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

/* ── Phone (Figma 💬 Agent: 10:1178 welcome, 10:1228 active, 10:1285 thinking, 10:1344 picker,
   10:1425 confirm, 10:1534 analysis + success) ───────────────────────────────────────────
   Same structure as the desktop, keyed on .chat-root.mobile (Shell.IsMobile) rather than a media
   query because the page lives inside the mobile shell, whose page area is the panel. The keyboard
   is the shell's business (MOBILE.md §3.10): it shrinks to the visual viewport, so the pinned
   input rides up with it. */
.chat-bg-pattern.mobile[b-jvefzrlxc6] {
    display: none;                   /* the frames draw a plain page, only the glow */
}

.chat-root.mobile .chat-input-group[b-jvefzrlxc6] {
    width: calc(100% - 40px);        /* 20px page gutters */
}

.chat-root.mobile.active .chat-input-group[b-jvefzrlxc6] {
    top: calc(100% - 8px);
}

/* Keyboard up (Figma 10:1639): the frame draws the composer right on the keyboard, with neither
   the tab bar (the shell hides it, MOBILE.md §3.10) nor the disclaimer. */
.m-shell[data-keyboard] .chat-root.mobile .chat-disclaimer[b-jvefzrlxc6] {
    display: none;
}

/* Welcome: 20px headline without the logomark, an 80px box, 14px text. */
.chat-root.mobile .chat-headline-logo[b-jvefzrlxc6] {
    display: none;
}

.chat-root.mobile .chat-headline[b-jvefzrlxc6] {
    font-size: 20px;
    line-height: 30px;
}

.chat-root.mobile .chat-greeting[b-jvefzrlxc6] {
    margin-bottom: 0;
}

.chat-root.mobile #chat-input-wrap[b-jvefzrlxc6] {
    min-height: 80px;
}

.chat-root.mobile:not(.active) #chat-input-wrap[b-jvefzrlxc6]  textarea {
    font-size: 14px;
    line-height: 20px;
    padding: 12px 64px 12px 20px;
}

.chat-root.mobile .chat-send-btn[b-jvefzrlxc6] {
    right: 20px;
}

/* Active: a 60px box with 12px padding, the 32px send in its bottom-right corner. */
.chat-root.mobile.active #chat-input-wrap[b-jvefzrlxc6] {
    min-height: 60px;
}

.chat-root.mobile.active #chat-input-wrap[b-jvefzrlxc6]  textarea {
    padding: 12px 52px 12px 12px;
}

.chat-root.mobile.active .chat-send-btn[b-jvefzrlxc6] {
    right: 12px;
    bottom: 12px;
}

.chat-root.mobile .chat-scroll-btn[b-jvefzrlxc6] {
    bottom: 108px;
}

/* Messages: page gutters, user bubbles as wide as the column (Figma 10:1260). */
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6] {
    padding-left: 20px;
    padding-right: 20px;
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .chat-user-bubble {
    max-width: 100%;
}

/* Cards at phone width: 12px paddings, stacked buttons. */
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .cg-card,
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .cg-inner,
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .gs-card,
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .choice-wrap,
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .img-picker-recap {
    padding: 12px;
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .cg-settings {
    gap: 12px;
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .cg-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* The chat's image picker (Figma 10:1363) keeps its card chrome and draws the upload zone
   above one tile per row with a 200px image — unlike the product page's two-column grid that
   ProductImageSelector's own phone rules produce. */
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-root {
    padding: 12px;
    border: 1px solid var(--bg-elevated);
    background: var(--bg-panel);
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-upload {
    order: 0;
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-dropzone {
    padding: 12px;
    background: var(--bg-page);
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-dropzone-inner {
    height: 56px;
    border-color: var(--color-grey-30);
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-dropzone-cta {
    padding: 0;
    border: 0;
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-grid {
    grid-template-columns: 1fr;
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-tile {
    height: auto;
    padding: 20px;
    gap: 16px;
    border-color: var(--bg-elevated);
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-img-box {
    flex: none;
    height: 200px;
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-img {
    width: 170px;
    height: 200px;
    max-height: none;
    border-radius: 8px;
    background: rgba(var(--color-white-rgb), 0.04);
}

.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .is-tile .pis-tile-icon {
    width: 20px;
    height: 20px;
}

/* The picker's action row ("Use N images" / "or write a message", Figma 10:1344) comes after
   the tiles (the selector's phone rules order the grid at 1) and sticks above the composer while
   the card scrolls, so it is always at hand; it sits just above the bottom fade so it stays
   opaque, and the tiles slide under its panel-colored band. */
.chat-root.mobile .chat-messages-inner[b-jvefzrlxc6]  .img-picker-actions {
    order: 3;
    position: sticky;
    bottom: calc(var(--chat-input-clearance, 165px) + var(--chat-fade-distance, 44px));
    z-index: 1;
    margin: -8px 0;
    padding: 8px 0;
    background: var(--bg-panel);
}
/* /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/AdTypeSelectionPage.razor.rz.scp.css */
/* Phone layout of the ad type picker (Figma 2153:5985 select, 2153:6515 selected, 2153:6324 style
   sheet). The desktop look stays in the component's <style> block; the at-* classes render only
   in the mobile shell. Shared pieces (.m-icon, .m-back, .m-btn) are in app.css. */

.at-root[b-ojleqnhzxn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ═══ Group: lime type icon, name, (Incompatible), "?" ═══ */
.at-group[b-ojleqnhzxn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
}

.at-group-head[b-ojleqnhzxn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.at-group-icon[b-ojleqnhzxn] {
    color: var(--accent-hover);
}

.at-group-name[b-ojleqnhzxn] {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.at-help[b-ojleqnhzxn] {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

/* ═══ Style row card: Gray/800 on a Gray/750 border; selected takes the desktop card's gradient,
   lime border, shadow and corner check ═══ */
.at-card[b-ojleqnhzxn] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 115px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
    cursor: pointer;
}

.at-card.selected[b-ojleqnhzxn] {
    background: var(--gradient-selection);
    border-color: var(--accent-hover);
    box-shadow: 0 20px 24px rgba(var(--color-shadow-warm-rgb), 0.5), 0 8px 8px rgba(var(--color-shadow-cool-rgb), 0.03);
}

.at-thumb[b-ojleqnhzxn] {
    position: relative;
    flex-shrink: 0;
    width: 152px;
    height: 91px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.at-thumb img[b-ojleqnhzxn] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 32px play tile over the poster; opens the style sheet. */
.at-play[b-ojleqnhzxn] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(var(--color-grey-10-rgb), 0.75);
    color: var(--accent-hover);
    cursor: pointer;
}

.at-text[b-ojleqnhzxn] {
    flex: 1;
    min-width: 0;
    min-height: 91px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

.at-name[b-ojleqnhzxn] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

/* The app's descriptions run longer than the frame's two lines; three fit under the name, the
   sheet shows the whole text. */
.at-desc[b-ojleqnhzxn] {
    color: var(--text-light);
    font-size: 12px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

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

.at-badge-inline[b-ojleqnhzxn] {
    position: static;
}

.at-check[b-ojleqnhzxn] {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-hover);
}

/* ═══ Style sheet (2153:6324): back tile, name + badge, description, the video, Select ═══ */
.at-sheet[b-ojleqnhzxn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.at-sheet-head[b-ojleqnhzxn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.at-sheet-title[b-ojleqnhzxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.at-sheet-desc[b-ojleqnhzxn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}

.at-sheet-video[b-ojleqnhzxn] {
    position: relative;
    aspect-ratio: 200 / 120;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.at-sheet-video video[b-ojleqnhzxn] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 24px black tiles: zoom top right, mute bottom left. */
.at-video-btn[b-ojleqnhzxn] {
    position: absolute;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(var(--color-black-rgb), 0.75);
    color: #fff;
    cursor: pointer;
}

.at-video-zoom[b-ojleqnhzxn] {
    top: 8px;
    right: 8px;
}

.at-video-mute[b-ojleqnhzxn] {
    bottom: 8px;
    left: 8px;
}

/* ═══ Type help sheet ═══ */
.at-help-text[b-ojleqnhzxn] {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}
/* /Components/Controls/Advanced/AdvancedReview.razor.rz.scp.css */
/* Review & Generate for the Advanced wizard (Figma 1446:10312). */

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

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

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

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

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

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

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

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

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

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

/* ── Ad object ── */

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

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

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

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

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

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

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

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

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

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

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

/* ── End card summary ── */

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

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

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

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

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

/* ── Footer ── */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Language carousel ── */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Voice grid ── */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.vc-empty[b-m9xtsgdmt6] {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-muted);
}

/* ── Phone (Figma 2167:3225 / 3522 / 3363; .mobile from MobileShell, MOBILE.md) ── */

/* On the page rather than in the raised panel: no inset of its own, the step's 12px rhythm,
   the strip bare (WizardMobileFrame gives it one card between the arrows). */
.vc-root.mobile[b-m9xtsgdmt6] {
    padding: 0;
    gap: 12px;
}

.mobile .vc-langs[b-m9xtsgdmt6] {
    padding: 0;
    background: none;
}

/* "Language" with its "?" (a sheet, not a tooltip) and "Voices": 16px block headers. */
.vc-m-title[b-m9xtsgdmt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
}

.vc-m-help[b-m9xtsgdmt6] {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.vc-m-help-text[b-m9xtsgdmt6] {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}

/* The search box and the 36px filter tool (m-search / m-tool, app.css); the sheet stands in
   for the chips, the tool's badge for their count. */
.mobile .vc-toolbar[b-m9xtsgdmt6] {
    flex-wrap: nowrap;
}

/* One voice per row (2167:3296): Gray/800, 8px inset, the 60px play tile, then the name over
   flag + language + count, with the bookmark at the end of that second line. The desktop's
   name row dissolves (display: contents) so the three pieces can take their grid cells. */
.mobile .vc-grid[b-m9xtsgdmt6] {
    grid-template-columns: 1fr;
    gap: 12px;
}

.mobile .vc-card[b-m9xtsgdmt6] {
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: var(--bg-panel);
}

.mobile .vc-info[b-m9xtsgdmt6] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 24px 20px;
    gap: 8px;
    align-items: center;
}

.mobile .vc-name-row[b-m9xtsgdmt6] {
    display: contents;
}

.mobile .vc-name[b-m9xtsgdmt6] {
    grid-area: 1 / 1;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.mobile .vc-fav[b-m9xtsgdmt6] {
    grid-area: 2 / 2;
}

.mobile .vc-langs-row[b-m9xtsgdmt6] {
    grid-area: 2 / 1;
}

.mobile .vc-empty[b-m9xtsgdmt6] {
    padding: 20px 0;
    font-size: 14px;
    line-height: 20px;
}

/* The Age row's three labels do not fit in equal thirds ("Middle aged" wrapped); they take their
   own width and spread out, as the frame's row does (2167:3515, gap-16). */
.vc-m-ages .m-check-item[b-m9xtsgdmt6] {
    flex: 0 0 auto;
}
/* /Components/Controls/BrandImageSelector.razor.rz.scp.css */
/* Brand logo picker. Desktop: header and upload zone on one row, the tile grid under them.
   Phone (Figma 26:1801): the header stacks, the tiles form two columns and the upload zone
   follows them — the top row dissolves (display: contents) so `order` can move its pieces. */
.is-root[b-r5eix8nh1p] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 8px;
    background: var(--bg-panel);
}

.is-top[b-r5eix8nh1p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.is-head[b-r5eix8nh1p] {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.is-desc[b-r5eix8nh1p] {
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
}

.is-upload[b-r5eix8nh1p] {
    flex: 1;
    min-width: 0;
}

.is-dropzone[b-r5eix8nh1p] {
    height: 132px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.is-dropzone-inner[b-r5eix8nh1p] {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--border-subtle);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.is-dropzone-cta[b-r5eix8nh1p] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.is-grid[b-r5eix8nh1p] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    align-content: flex-start;
    overflow-y: auto;
    max-height: 460px;
    padding: 6px;
}

.is-tile[b-r5eix8nh1p] {
    position: relative;
    width: 210px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
    cursor: pointer;
}

.is-tile.selected[b-r5eix8nh1p] {
    background: linear-gradient(180deg, var(--color-olive-dark) 0%, var(--color-olive-dark) 15.385%, transparent 50%);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

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

.is-img-box[b-r5eix8nh1p] {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-img[b-r5eix8nh1p] {
    width: 170px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
}

/* Checkerboard under transparent logos. */
.is-img-checker[b-r5eix8nh1p] {
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #fff;
}

.is-ops[b-r5eix8nh1p] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .is-root[b-r5eix8nh1p] {
        gap: 12px;
        padding: 0;
        background: none;
    }

    .is-top[b-r5eix8nh1p] {
        display: contents;
    }

    .is-head[b-r5eix8nh1p] {
        width: auto;
        gap: 4px;
    }

    .is-title[b-r5eix8nh1p] {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .is-desc[b-r5eix8nh1p] {
        color: var(--text-faint);
        font-size: 12px;
        line-height: 18px;
    }

    .is-grid[b-r5eix8nh1p] {
        order: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-height: none;
        padding: 0;
    }

    .is-upload[b-r5eix8nh1p] {
        order: 2;
    }

    .is-dropzone[b-r5eix8nh1p] {
        height: auto;
        padding: 8px;
        background: var(--bg-panel);
    }

    .is-dropzone-inner[b-r5eix8nh1p] {
        height: 100px;
        border-color: var(--bg-elevated);
    }

    .is-dropzone-cta[b-r5eix8nh1p] {
        padding: 8px 14px;
        border: 1px solid var(--border-hover);
        border-radius: 8px;
    }

    .is-tile[b-r5eix8nh1p] {
        width: auto;
        height: 160px;
        padding: 12px;
        border-color: var(--bg-elevated);
    }

    .is-img-box[b-r5eix8nh1p] {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .is-img[b-r5eix8nh1p] {
        width: 100%;
        height: 100%;
        max-height: 92px;
    }

    .is-tile .pis-tile-icon[b-r5eix8nh1p] {
        width: 16px;
        height: 16px;
    }
}
/* /Components/Controls/BrandPanel.razor.rz.scp.css */
/* Mobile brand card (Figma 15:349). The desktop card keeps its inline styles in the .razor. */

.bp-card[b-idp57vv89a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
    cursor: pointer;
}

.bp-topline[b-idp57vv89a] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.bp-icon-btn[b-idp57vv89a] {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    cursor: pointer;
}

.bp-icon-btn img[b-idp57vv89a] {
    width: 20px;
    height: 20px;
}

.bp-more[b-idp57vv89a],
.bp-more img[b-idp57vv89a] {
    width: 24px;
    height: 24px;
}

.bp-logo-wrap[b-idp57vv89a] {
    width: 100%;
    padding: 0 8px;
}

.bp-logo[b-idp57vv89a] {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--bg-elevated);
    overflow: hidden;
}

.bp-logo img[b-idp57vv89a] {
    max-width: 70%;
    max-height: 60%;
    object-fit: contain;
}

.bp-analyzing[b-idp57vv89a] {
    color: var(--text-muted);
    font-size: 12px;
}

.bp-name[b-idp57vv89a] {
    width: 100%;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-metrics[b-idp57vv89a] {
    display: flex;
    gap: 20px;
    margin-top: -8px;
}

.bp-metric[b-idp57vv89a] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}
/* /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-title[b-0h2pj50pjf] {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

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

/* Phone (Figma 26:1862): the label and its edit button on one line, the swatch (or the "Add
   color" box) full width under them. */
@media (max-width: 768px) {
    .cc-card[b-0h2pj50pjf] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px 8px;
        align-items: center;
        min-height: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .cc-title[b-0h2pj50pjf] {
        grid-column: 1;
        grid-row: 1;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .cc-card[b-0h2pj50pjf]  .mud-icon-button {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }

    .cc-swatch[b-0h2pj50pjf] {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        height: 60px;
        min-height: 60px;
        flex: none;
        border: 0;
    }

    .cc-card[b-0h2pj50pjf]  .mud-button {
        grid-column: 1 / -1;
        height: 60px;
        border-radius: 8px;
        background: var(--bg-panel);
    }
}
/* /Components/Controls/ContinueCreatingWidget.razor.rz.scp.css */
.continue-widget-stack[b-tpz0f7s9qw] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1300; /* above page content, below MudBlazor dialogs/snackbars */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* rows share the widest row's width */
    gap: 12px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cp-sparkle[b-c05caxzy2h] {
    display: inline-block;
    animation: sparkle-b-c05caxzy2h 1s infinite;
}

/* ═══ Mobile (Figma 28:2838): the card fills the column, NEW gets a lime border, the
   generating state uses the bigger white line. Applied by CreativePanel when the mobile
   shell is active; the desktop card is untouched. ═══ */
.cp-card-mobile[b-c05caxzy2h] {
    width: 100%;
}

.cp-card-mobile.cp-card-new .cp-top[b-c05caxzy2h],
.cp-card-mobile.cp-card-new .cp-bottom[b-c05caxzy2h] {
    border-color: var(--accent-active);
}

.cp-card-mobile .cp-generating[b-c05caxzy2h] {
    gap: 20px;
}

.cp-card-mobile .cp-generating-text[b-c05caxzy2h] {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
}
/* /Components/Controls/CreditPackCard.razor.rz.scp.css */
.cpack-card[b-n22ztj55pi] {
    min-width: 160px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.legal-element[b-bzmepg91yo] {
    background: var(--bg-panel);
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
}
/* /Components/Controls/FieldsEditor.razor.rz.scp.css */
/* The FORM / CHIPS / TABLE switch above the editor. The phone (Figma 119:10005) only has the
   form, so the switch is hidden there and the default view stays the form. */
.fe-view-toggle[b-gx6zkarwen] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

@media (max-width: 768px) {
    .fe-view-toggle[b-gx6zkarwen] {
        display: none;
    }
}
/* /Components/Controls/FieldsEditorForm.razor.rz.scp.css */
/* Form view of the fields editor. Desktop: a 300px label column beside each input. Phone
   (Figma 119:10005 "Input"): the label stacks over the input, 16px title and 12px description. */
.fe-form[b-o24bzcwo69] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.fe-field[b-o24bzcwo69] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.fe-label[b-o24bzcwo69] {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

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

.fe-remove[b-o24bzcwo69] {
    padding-top: 8px;
}

.fe-input[b-o24bzcwo69] {
    flex: 1;
}

.fe-divider[b-o24bzcwo69] {
    width: 100%;
    height: 1px;
    background: var(--border-default);
}

.fe-extra[b-o24bzcwo69] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.fe-extra-head[b-o24bzcwo69] {
    text-align: center;
}

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

.fe-extra-desc[b-o24bzcwo69] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

.fe-extra-buttons[b-o24bzcwo69] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
}

@media (max-width: 768px) {
    .fe-form[b-o24bzcwo69] {
        padding: 0;
    }

    .fe-field[b-o24bzcwo69] {
        flex-direction: column;
        gap: 12px;
    }

    /* The title and, for an optional field, its bin at the right edge share the first line;
       the description runs full width under them. */
    .fe-label[b-o24bzcwo69] {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0;
    }

    .fe-title[b-o24bzcwo69] {
        grid-area: 1 / 1;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .fe-desc[b-o24bzcwo69] {
        grid-area: 2 / 1 / auto / -1;
    }

    /* The 30px button keeps its tap area without making the line taller than a title, and its
       glyph (5px inside the button) lines up with the input's right edge. */
    .fe-remove[b-o24bzcwo69] {
        grid-area: 1 / 2;
        padding-top: 0;
        margin: -3px -5px -3px 12px;
    }

    .fe-input[b-o24bzcwo69] {
        width: 100%;
    }

    .fe-extra[b-o24bzcwo69] {
        align-items: flex-start;
    }

    .fe-extra-head[b-o24bzcwo69] {
        text-align: left;
    }

    .fe-extra-buttons[b-o24bzcwo69] {
        gap: 10px;
    }
}
/* /Components/Controls/FilesUploadControl.razor.rz.scp.css */
/* FilesUploadControl scoped styles.
   Migrated verbatim from ProductSetup.razor.css. `.manual-logo-label`
   is duplicated here because the label is now rendered inside this
   control via the Label parameter. */

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

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

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

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

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

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

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

.drop-zone-primary[b-1lmo9d93ew] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 18px;
}

.drop-zone-accent[b-1lmo9d93ew] {
    color: var(--accent-active);
    font-weight: 600;
    font-size: 18px;
}

.drop-zone-hint[b-1lmo9d93ew] {
    color: var(--text-muted);
    font-size: 12px;
}

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

/* Phone: a shorter zone with smaller text, file cards two to a row. */
@media (max-width: 768px) {
    .drop-zone-inner[b-1lmo9d93ew] {
        min-height: 120px;
        padding: 20px 12px;
    }

    .drop-zone-primary[b-1lmo9d93ew],
    .drop-zone-accent[b-1lmo9d93ew] {
        font-size: 14px;
    }

    .file-cards-row[b-1lmo9d93ew] {
        gap: 12px;
    }

    .file-card[b-1lmo9d93ew] {
        width: calc(50% - 6px);
        height: auto;
        padding: 8px 8px 12px;
    }

    .file-card-preview[b-1lmo9d93ew] {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-top: 28px;
    }
}
/* /Components/Controls/JobActionButton.razor.rz.scp.css */
/* Pay-with-credits action button used across job dialogs (Modify, Captions, etc).
   Disabled/submitting state uses a darker olive Brand/900 fill per Figma instead of
   the default MudButton grey-out. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.logo-delete:hover[b-2y0ovb2ovr] {
    opacity: 1;
}
/* /Components/Controls/MessagesList.razor.rz.scp.css */
/* Tabs, list, cards and footer of the notifications list. Shared by the desktop side panel
   (MessagesPanel) and the mobile /notifications page, which restyles the cards with its own
   ::deep rules (Notifications.razor.css). */

/* The root fills the host's column (the panel under its header, the page under the top bar)
   and lays tabs, list and footer out as the hosts did before it existed. */
.mp-messages[b-p1mzmjsqe6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

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

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

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

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

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

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

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

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

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

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

[b-p1mzmjsqe6] .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-p1mzmjsqe6] .mp-card-unread .mp-card-icon {
    background: var(--bg-elevated);
}

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

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

[b-p1mzmjsqe6] .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-p1mzmjsqe6] .mp-card-subtitle {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-muted);
}

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

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

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

[b-p1mzmjsqe6] .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-p1mzmjsqe6] .mp-footer {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    flex-shrink: 0;
}

[b-p1mzmjsqe6] .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-p1mzmjsqe6] .mp-footer-btn:hover:not(:disabled) {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

[b-p1mzmjsqe6] .mp-footer-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
/* /Components/Controls/MessagesPanel.razor.rz.scp.css */
/* Backdrop, panel and header of the desktop notifications side panel. The tabs, list and
   footer rules live in MessagesList.razor.css (shared with the mobile /notifications page). */

/* ═══════════ 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);
}
/* /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/ProductImageSelector.razor.rz.scp.css */
/* Product image picker. Desktop: header and upload zone on one row, the tile grid under them.
   Phone (Figma 2014:4741): the header stacks, the tiles form two columns and the upload zone
   follows them — the top row dissolves (display: contents) so `order` can move its pieces. */
.is-root[b-y0kuc6m7gj] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
}

/* No-selection warning: floats over the card's top edge on the desktop. */
.is-warning[b-y0kuc6m7gj] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px 4px 4px;
    border-radius: 16px;
    background: #7a2e0e;
    transition: opacity 0.3s ease;
}

.is-warning.hidden[b-y0kuc6m7gj] {
    opacity: 0;
    pointer-events: none;
}

.is-warning-badge[b-y0kuc6m7gj] {
    padding: 2px 10px;
    border: 1px solid #fedf89;
    border-radius: 16px;
    background: #b54708;
    color: #fec84b;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.is-warning-text[b-y0kuc6m7gj] {
    color: #fec84b;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.is-warning-close[b-y0kuc6m7gj] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.is-top[b-y0kuc6m7gj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.is-head[b-y0kuc6m7gj] {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.is-title-row[b-y0kuc6m7gj] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.is-desc[b-y0kuc6m7gj] {
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
}

.is-upload[b-y0kuc6m7gj] {
    flex: 1;
    min-width: 0;
}

.is-dropzone[b-y0kuc6m7gj] {
    height: 132px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.is-dropzone-inner[b-y0kuc6m7gj] {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--border-subtle);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.is-dropzone-cta[b-y0kuc6m7gj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.is-grid[b-y0kuc6m7gj] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    align-content: flex-start;
    overflow-y: auto;
    max-height: 460px;
    padding: 6px;
}

.is-tile[b-y0kuc6m7gj] {
    position: relative;
    width: 210px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
    cursor: pointer;
}

.is-tile.selected[b-y0kuc6m7gj] {
    background: linear-gradient(180deg, var(--color-olive-dark) 0%, var(--color-olive-dark) 15.385%, var(--bg-panel) 50%);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
}

/* Square checkbox in the tile's top-right corner. */
.is-checkbox[b-y0kuc6m7gj] {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    background: var(--bg-panel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-checkbox.checked[b-y0kuc6m7gj] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.is-img-box[b-y0kuc6m7gj] {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-img[b-y0kuc6m7gj] {
    width: 170px;
    height: 200px;
    border-radius: 8px;
    background: rgba(var(--color-white-rgb), 0.04);
    overflow: hidden;
}

.is-ops[b-y0kuc6m7gj] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .is-root[b-y0kuc6m7gj] {
        gap: 12px;
        padding: 0;
        border: 0;
        background: none;
    }

    .is-warning[b-y0kuc6m7gj] {
        position: static;
        transform: none;
        display: flex;
        flex-wrap: wrap;
    }

    .is-warning.hidden[b-y0kuc6m7gj] {
        display: none;
    }

    .is-warning-text[b-y0kuc6m7gj] {
        flex: 1;
        min-width: 0;
        white-space: normal;
    }

    .is-top[b-y0kuc6m7gj] {
        display: contents;
    }

    .is-head[b-y0kuc6m7gj] {
        width: auto;
    }

    .is-title[b-y0kuc6m7gj] {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .is-desc[b-y0kuc6m7gj] {
        color: var(--text-faint);
        font-size: 12px;
        line-height: 18px;
    }

    .is-grid[b-y0kuc6m7gj] {
        order: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-height: none;
        padding: 0;
        overflow: visible;   /* no scrolling here, and the checkbox overhangs the tile's corner */
    }

    .is-upload[b-y0kuc6m7gj] {
        order: 2;
    }

    .is-dropzone[b-y0kuc6m7gj] {
        height: auto;
        padding: 8px;
        background: var(--bg-panel);
    }

    .is-dropzone-inner[b-y0kuc6m7gj] {
        height: 100px;
        border-color: var(--bg-elevated);
    }

    .is-dropzone-cta[b-y0kuc6m7gj] {
        padding: 8px 14px;
        border: 1px solid var(--border-hover);
        border-radius: 8px;
    }

    .is-tile[b-y0kuc6m7gj] {
        width: auto;
        height: 200px;
        padding: 8px 8px 4px;
        gap: 8px;
        border-color: transparent;
    }

    .is-img-box[b-y0kuc6m7gj] {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .is-img[b-y0kuc6m7gj] {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background: var(--color-grey-16);
    }

    .is-tile .pis-tile-icon[b-y0kuc6m7gj] {
        width: 16px;
        height: 16px;
    }
}
/* /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;
}

/* Mobile (Figma 119:9777): the card fills the column; everything else is the desktop card. */
.pp-card-mobile[b-fx5nbwamtl] {
    width: 100%;
}
/* /Components/Controls/ServiceCoverSelector.razor.rz.scp.css */
/* Service cover picker (Figma 958:8607): header on the left, the current cover and the upload
   zone on the right. Phone (Figma 2033:5910): everything stacks, the zone full width. */
.sc-root[b-3ho6t1jvs6] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
}

.sc-head[b-3ho6t1jvs6] {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.sc-desc[b-3ho6t1jvs6] {
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
}

.sc-media[b-3ho6t1jvs6] {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.sc-cover[b-3ho6t1jvs6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
    cursor: pointer;
}

.sc-dropzone[b-3ho6t1jvs6] {
    width: 300px;
    height: 100%;
    min-height: 146px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-dropzone-inner[b-3ho6t1jvs6] {
    width: 100%;
    flex: 1;
    border: 2px dashed var(--border-subtle);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sc-cta[b-3ho6t1jvs6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.sc-cta-icon[b-3ho6t1jvs6] {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: var(--accent-active);
    -webkit-mask: url('media/icons/upload.svg') center / contain no-repeat;
    mask: url('media/icons/upload.svg') center / contain no-repeat;
}

@media (max-width: 768px) {
    .sc-root[b-3ho6t1jvs6] {
        flex-direction: column;
        gap: 12px;
        padding: 0;
        border: 0;
        background: none;
    }

    .sc-head[b-3ho6t1jvs6] {
        width: auto;
    }

    .sc-title[b-3ho6t1jvs6] {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .sc-desc[b-3ho6t1jvs6] {
        color: var(--text-faint);
        font-size: 12px;
        line-height: 18px;
    }

    .sc-media[b-3ho6t1jvs6] {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .sc-cover[b-3ho6t1jvs6] {
        border-color: transparent;
        background: var(--color-grey-16);
    }

    .sc-dropzone[b-3ho6t1jvs6] {
        width: 100%;
        min-height: 0;
        padding: 8px;
        background: var(--bg-panel);
    }

    .sc-dropzone-inner[b-3ho6t1jvs6] {
        height: 100px;
        border-color: var(--bg-elevated);
    }

    .sc-cta[b-3ho6t1jvs6] {
        padding: 8px 14px;
        border: 1px solid var(--border-hover);
        border-radius: 8px;
    }
}
/* /Components/Controls/SettingsEditor.razor.rz.scp.css */
.st-root[b-pnpezag49o] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

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

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

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

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

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

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

/* General tiles */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Touch drag (stringListEditor.js): the row is lifted and follows the finger, the rows it
   passes slide one place over, and on release it glides into the gap. */
.sl-stack.touch-sorting .sl-row[b-oitc0xz0i5] {
    transition: transform 150ms ease;
}

.sl-row.touch-lifted[b-oitc0xz0i5] {
    z-index: 1;
    background: var(--bg-elevated);
    border-color: var(--accent-hover);
    box-shadow: 0 8px 24px rgba(var(--color-black-rgb), 0.5);
}

/* Under the finger the row moves with it, not after it. */
.sl-stack.touch-sorting .sl-row.touch-dragging[b-oitc0xz0i5] {
    transition: none;
}

/* The padding (taken back by the margin) stretches the handle over the row's left end, a
   42x44px target for a finger; touch-action keeps a drag on it from scrolling the page. */
.sl-handle[b-oitc0xz0i5] {
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    cursor: grab;
    padding: 10px 8px 10px 14px;
    margin: -10px -8px -10px -14px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.vs-caption[b-1uswshb4gw] {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}
/* /Components/Controls/WizardMobileFrame.razor.rz.scp.css */
/* The phone wizard's chrome and the phone look of every screen built inside it (Figma "Wizard"
   2167:5383 and "Idea to Video" 2167:5382), shared by CreateAdMobile and CreateAdvancedMobile.
   Shared pieces (.m-page, .m-btn, .m-icon…) are in app.css; the ad type picker's phone look is
   in AdTypeSelectionPage.razor.css. Only the stepper is this component's own markup — the
   rest of the rules reach the twins' screens, the step header and the desktop step controls
   through ::deep (keyed on .cm-section-body for the controls, so the desktop twins are
   untouched). Rules that only one wizard needs stay in that twin's stylesheet (Ad Type and
   Ad Content in CreateAdMobile's, the Scenario, Voice and in-page views in
   CreateAdvancedMobile's). */

/* The wizard is a column at least the page area tall (MOBILE.md §3.11): the page grows, so a
   short step's footer still sits at the bottom of the screen; a long one scrolls under it. */
.cm-root[b-thkjiy4dvi] {
    display: flex;
    flex-direction: column;
    min-height: var(--m-main-height);
}

[b-thkjiy4dvi] .cm-page {
    flex: 1;
    padding-top: 8px;
}

/* ═══ Stepper (Figma "Stepper": black, 60px, Gray/800 bottom line, lg shadow) ═══ */
.cm-stepper[b-thkjiy4dvi] {
    position: sticky;
    top: var(--m-top-height);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding-left: 12px;
    background: var(--color-black);
    border-bottom: 1px solid var(--bg-panel);
    box-shadow: 0 12px 16px -4px rgba(var(--color-shadow-cool-rgb), 0.3),
                0 4px 6px -2px rgba(var(--color-shadow-cool-rgb), 0.5);
    overflow-x: auto;
    scrollbar-width: none;
}

.cm-stepper[b-thkjiy4dvi]::-webkit-scrollbar {
    display: none;
}

.cm-start-over[b-thkjiy4dvi] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--color-grey-16);
    color: var(--text-primary);
    cursor: pointer;
}

.cm-step[b-thkjiy4dvi] {
    flex-shrink: 0;
    width: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
}

.cm-step:disabled[b-thkjiy4dvi] {
    cursor: default;
}

.cm-step.current[b-thkjiy4dvi] {
    border-bottom-color: var(--text-muted);
    color: var(--text-bright);
}

.cm-step:last-child[b-thkjiy4dvi] {
    margin-right: 12px;
}

/* Gray/600 numbered circle; Gray/200 on the current step; lime with a check once done. */
.cm-step-circle[b-thkjiy4dvi] {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-grey-40);
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.cm-step.current .cm-step-circle[b-thkjiy4dvi] {
    background: var(--color-grey-80);
}

.cm-step.done .cm-step-circle[b-thkjiy4dvi] {
    background: var(--accent-hover);
}

.cm-step-label[b-thkjiy4dvi] {
    font-size: 10px;
    line-height: 12px;
    white-space: nowrap;
}

[b-thkjiy4dvi] .cm-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

[b-thkjiy4dvi] .cm-section-icon {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding-top: 6px;
    color: var(--text-secondary);
}

[b-thkjiy4dvi] .cm-section-icon svg {
    width: 16px;
    height: 16px;
}

[b-thkjiy4dvi] .cm-section-done {
    color: var(--accent-hover);
}

[b-thkjiy4dvi] .cm-section-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

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

[b-thkjiy4dvi] .cm-section-desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

/* The header's right end: a switch with its label (the Idea to Video wizard's "No voiceover"
   and "No endcard", Figma 1446:9921 on the desktop; the phone frames draw the same switch on
   the End Card's Logo row), kept on one line. */
[b-thkjiy4dvi] .cm-section-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 2px;
}

[b-thkjiy4dvi] .cm-head-toggle {
    margin: 0;
    color: var(--text-secondary);
    white-space: nowrap;
}

[b-thkjiy4dvi] .cm-section-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-thkjiy4dvi] .cm-divider {
    height: 1px;
    background: var(--color-grey-16);
}

/* ═══ Footer: stuck above the tab bar (MOBILE.md §3.11), the content sliding under its 46px
   fade ("Shade"). Ad type: the hint, or "Selected …" over the lime Next step; other steps: the
   outlined Next Step. ═══ */
[b-thkjiy4dvi] .cm-footer {
    position: sticky;
    bottom: var(--m-tabs-height);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-page);
}

[b-thkjiy4dvi] .cm-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 46px;
    background: linear-gradient(180deg, rgba(var(--color-grey-10-rgb), 0) 0%, var(--bg-page) 100%);
    pointer-events: none;
}

/* The frame's disabled Next Step (2153:5811): olive text on a dark olive border. */
[b-thkjiy4dvi] .cm-footer .m-btn-outline:disabled {
    border-color: var(--color-olive-cta);
    color: var(--accent-dark);
}

/* ═══ Ad Object: ProductSelector as a two-column grid (Figma 2153:6690 / 2153:5811) ═══ */
[b-thkjiy4dvi] .cm-section-body .ps-top-bar {
    width: 100%;
    margin: 0;
    gap: 12px;
}

[b-thkjiy4dvi] .cm-section-body .ps-search-wrapper {
    flex: 1;
    min-width: 0;
    width: auto;
}

[b-thkjiy4dvi] .cm-section-body .product-search-input {
    font-size: 14px;
    line-height: 20px;
}

/* The create button is a 40px square with the plus only. */
[b-thkjiy4dvi] .cm-section-body .ps-create-btn-outlined {
    padding: 9px;
    gap: 0;
    border-color: var(--accent-dark);
}

[b-thkjiy4dvi] .cm-section-body .ps-create-btn-outlined span {
    display: none;
}

[b-thkjiy4dvi] .cm-section-body .product-selector-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
}

[b-thkjiy4dvi] .cm-section-body .product-card {
    width: auto;
    min-width: 0;
    padding: 8px 8px 4px;
    gap: 8px;
    outline: none;
    box-shadow: none;
}

[b-thkjiy4dvi] .cm-section-body .product-card.selected {
    outline: 1px solid var(--accent-hover);
    box-shadow: var(--shadow-md);
}

[b-thkjiy4dvi] .cm-section-body .product-card.incompatible {
    outline: 1px solid var(--bg-elevated);
    background: none;
}

[b-thkjiy4dvi] .cm-section-body .product-card-image-container {
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: var(--color-grey-16);
    overflow: hidden;
}

[b-thkjiy4dvi] .cm-section-body .product-card-image {
    max-height: 100%;
}

[b-thkjiy4dvi] .cm-section-body .product-card-name {
    text-align: left;
    font-size: 14px;
    line-height: 20px;
}

[b-thkjiy4dvi] .cm-section-body .product-card-type {
    text-align: left;
}

[b-thkjiy4dvi] .cm-section-body .product-card-ops {
    padding-top: 0;
}

[b-thkjiy4dvi] .cm-section-body .product-card-op {
    font-size: 12px;
    line-height: 18px;
}

[b-thkjiy4dvi] .cm-section-body .product-card-op .op-icon {
    width: 12px;
    height: 12px;
}

/* No objects (2153:5811): the illustration, a line and an outlined lime create button, no card
   around. The button's black plus becomes the icon as a mask so it takes the lime. */
[b-thkjiy4dvi] .cm-section-body .ps-empty-state {
    width: 100%;
    margin: 0;
    padding: 20px 8px;
    border: 0;
    background: none;
}

[b-thkjiy4dvi] .cm-section-body .ps-empty-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

[b-thkjiy4dvi] .cm-section-body .ps-empty-state .ps-create-btn {
    border: 1px solid var(--accent-dark);
    background: none;
    color: var(--accent-active);
    box-shadow: none;
}

[b-thkjiy4dvi] .cm-section-body .ps-empty-state .ps-create-btn img {
    display: none;
}

[b-thkjiy4dvi] .cm-section-body .ps-empty-state .ps-create-btn::before {
    content: "";
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url(media/Icons/plus-circle-black.svg) center / contain no-repeat;
    mask: url(media/Icons/plus-circle-black.svg) center / contain no-repeat;
}

/* ═══ Video Size: VideoSizeSelector as a two-column grid of tall cards (Figma 2153:6887):
   a 100px Gray/750 tile with the size icon, the ratio, "Name · resolution"; no badges ═══ */
[b-thkjiy4dvi] .cm-section-body .vs-root {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
}

[b-thkjiy4dvi] .cm-section-body .vs-root .vs-card {
    height: auto;
    min-height: 258px;
    padding: 20px 8px;
    gap: 12px;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
}

[b-thkjiy4dvi] .cm-section-body .vs-root .vs-card.selected {
    background: var(--gradient-selection);
}

[b-thkjiy4dvi] .cm-section-body .vs-root .vs-thumb {
    width: 100px;
    background: var(--bg-elevated);
}

[b-thkjiy4dvi] .cm-section-body .vs-root .vs-ratio {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

[b-thkjiy4dvi] .cm-section-body .vs-root .vs-caption {
    color: var(--text-faint);
    font-size: 12px;
    line-height: 18px;
}

[b-thkjiy4dvi] .cm-section-body .vs-root .vs-help,
[b-thkjiy4dvi] .cm-section-body .vs-root .vs-recommended {
    display: none;
}

/* ═══ End Card: EndCardEditor's form column on the page, no preview (Figma 2153:7095) ═══ */
[b-thkjiy4dvi] .cm-section-body .endcard-editor {
    flex-direction: column;
    gap: 0;
    padding: 0;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-editor-left {
    width: 100%;
    padding: 0;
    gap: 20px;
    border: 0;
    background: none;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-editor-right,
[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-divider {
    display: none;
}

/* Label over the field. stretch, not the desktop row's flex-start: in a column that would keep
   .endcard-input-col (flex: 1, no width of its own) at the field's content width. */
[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* Label and toggle share the first line; the tile / field takes the whole second. */
[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-row-inline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    height: auto;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-row-inline .endcard-label-col {
    grid-column: 1;
    grid-row: 1;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-row-inline .endcard-toggle {
    grid-column: 2;
    grid-row: 1;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-row-inline .endcard-logo-tile,
[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-row-inline .endcard-input-col {
    grid-column: 1 / -1;
    grid-row: 2;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-logo-tile {
    height: 100px;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-label-col {
    width: auto;
}

[b-thkjiy4dvi] .cm-section-body .endcard-editor .endcard-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* ═══ Settings: SettingsEditor on the page, 72px tiles stacked (Figma 2153:6990) ═══ */
[b-thkjiy4dvi] .cm-section-body .st-root {
    padding: 0;
    gap: 20px;
}

[b-thkjiy4dvi] .cm-section-body .st-root .st-section {
    gap: 12px;
    padding: 0;
    border-radius: 0;
    background: none;
}

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

[b-thkjiy4dvi] .cm-section-body .st-root .st-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

[b-thkjiy4dvi] .cm-section-body .st-root .st-tile {
    height: 72px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 20px;
    border: 0;
    background: var(--bg-panel);
}

[b-thkjiy4dvi] .cm-section-body .st-root .st-tile > :last-child {
    margin-left: auto;
}

[b-thkjiy4dvi] .cm-section-body .st-root .st-tile-label {
    color: var(--text-light);
    font-size: 14px;
    font-weight: 400;
}

/* One language card between 40px arrows; the arrows page one card at a time. */
[b-thkjiy4dvi] .cm-section-body .lang-root .lang-arrow {
    padding: 0 4px;
}

[b-thkjiy4dvi] .cm-section-body .lang-root .lang-card {
    flex: 0 0 100%;
}

/* ═══ Review (Figma 2153:5650) ═══ */
[b-thkjiy4dvi] .cm-review {
    gap: 20px;
}

[b-thkjiy4dvi] .cm-review .cm-divider {
    background: var(--bg-elevated);
}

[b-thkjiy4dvi] .cm-review-head {
    text-align: center;
}

[b-thkjiy4dvi] .cm-review-head h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

[b-thkjiy4dvi] .cm-review-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

[b-thkjiy4dvi] .cm-review-row2 {
    display: flex;
    gap: 20px;
}

[b-thkjiy4dvi] .cm-review-row2 > * {
    flex: 1;
    min-width: 0;
}

[b-thkjiy4dvi] .cm-review-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-thkjiy4dvi] .cm-review-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
}

[b-thkjiy4dvi] .cm-edit {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
}

[b-thkjiy4dvi] .cm-review-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

[b-thkjiy4dvi] .cm-review-tile {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-elevated);
}

[b-thkjiy4dvi] .cm-review-tile img {
    width: 24px;
    height: 24px;
}

/* A tile holding one of CustomIcons' inline SVGs (Film, Speaker in the Idea to Video review):
   they carry a hard-coded Gray/500 stroke, recoloured here to the lime the icon files use. */
[b-thkjiy4dvi] .cm-review-tile svg {
    width: 24px;
    height: 24px;
}

[b-thkjiy4dvi] .cm-review-tile svg path {
    stroke: var(--accent-hover);
}

[b-thkjiy4dvi] .cm-review-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

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

[b-thkjiy4dvi] .cm-review-sub {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-thkjiy4dvi] .cm-review-object {
    display: flex;
    align-items: center;
    gap: 20px;
}

[b-thkjiy4dvi] .cm-review-object img {
    flex-shrink: 0;
    width: 80px;
    height: 94px;
    object-fit: cover;
    border-radius: 8px;
}

[b-thkjiy4dvi] .cm-review-object span {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 20px;
}

/* "No end card" (Idea to Video, the switch on). */
[b-thkjiy4dvi] .cm-review-none {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

[b-thkjiy4dvi] .cm-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-thkjiy4dvi] .cm-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 18px;
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
    box-shadow: var(--shadow-sm);
}

[b-thkjiy4dvi] .cm-chip-cta {
    border-radius: 100px;
    background: var(--color-olive-cta);
}

[b-thkjiy4dvi] .cm-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-thkjiy4dvi] .cm-review-setting {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

[b-thkjiy4dvi] .cm-review-setting .cm-review-tile {
    width: 32px;
    height: 32px;
}

[b-thkjiy4dvi] .cm-terms {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

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

[b-thkjiy4dvi] .cm-review .jab-btn {
    width: 100%;
    justify-content: center;
}
/* /Components/Controls/WizardStepper.razor.rz.scp.css */
/* ═══════════ Stepper ═══════════ */
/* One bar for both wizards, styled from Figma 1448:23761: a self-contained rounded panel whose
   pills carry their state in the fill. It replaced an earlier flush treatment — a #141414 slab with
   square bottom corners, a hairline and a drop shadow — that only suited Guided's scroll container.
   The shadow lives with the page that needs it (CreateAd.razor.css), since whether the bar casts
   onto anything depends on what scrolls beneath it, which is the page's business, not this one's. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes components-reconnect-spin-b-bohhflesom {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/AdResultDesktop.razor.rz.scp.css */
.adr-container[b-smohgiqsev] {
    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-smohgiqsev] {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.adr-breadcrumb-link:hover[b-smohgiqsev] {
    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-smohgiqsev] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.adr-info-value[b-smohgiqsev] {
    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-smohgiqsev] {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accent);
}

/* Content card wrapping video + sidebar */
.adr-content-card[b-smohgiqsev] {
    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-smohgiqsev] {
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}

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

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

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

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

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

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

.adr-video-pane[b-smohgiqsev] {
    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-smohgiqsev] {
    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-smohgiqsev] {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.adr-sidebar-top[b-smohgiqsev], .adr-sidebar-bottom[b-smohgiqsev] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

/* Buttons */
.adr-btn[b-smohgiqsev] {
    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-smohgiqsev] { opacity: 0.85; }
.adr-btn:disabled[b-smohgiqsev] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.adr-btn img[b-smohgiqsev] { width: 20px; height: 20px; flex-shrink: 0; }
.adr-btn-full[b-smohgiqsev] { width: 100%; padding: 10px 18px; font-size: 16px; line-height: 24px; }

/* Lime filled — primary CTA (Download). */
.adr-btn-primary[b-smohgiqsev] {
    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-smohgiqsev] {
    background: transparent;
    border-color: #7E9202;
    color: #C3E203;
}
.adr-btn-accent-outlined:hover[b-smohgiqsev] { background: rgba(195, 226, 3, 0.08); }

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

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

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

.adr-icon-btn[b-smohgiqsev] {
    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-smohgiqsev] { opacity: 1; }
.adr-icon-btn-active[b-smohgiqsev] { opacity: 1; }
.adr-icon-btn img[b-smohgiqsev] { 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-smohgiqsev] {
    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-smohgiqsev] {
    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-smohgiqsev] { box-sizing: border-box; }
.adr-feedback-title[b-smohgiqsev] { margin: 0; color: #F9F9F9; font-size: 18px; font-weight: 600;
                      line-height: 28px; }
.adr-feedback-tags[b-smohgiqsev] { display: flex; flex-wrap: wrap; gap: 8px; }
.adr-feedback-chip[b-smohgiqsev] {
    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-smohgiqsev] { color: #CCC; }
.adr-feedback-chip.selected[b-smohgiqsev] { background: #383838; color: #CCC; }
.adr-feedback-note[b-smohgiqsev] {
    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-smohgiqsev] { border-color: #CCC; }
.adr-feedback-note[b-smohgiqsev]::placeholder { color: #808080; }
.adr-feedback-actions[b-smohgiqsev] { display: flex; justify-content: space-between; align-items: center; }
.adr-feedback-actions .adr-btn[b-smohgiqsev] { padding: 8px 14px; font-size: 14px; line-height: 20px; }
.adr-feedback-actions .adr-btn:disabled[b-smohgiqsev] { opacity: 0.5; cursor: not-allowed; }

/* The pointer to the MCP connector at the foot of the sidebar: quiet, one line, a link. */
.adr-hint[b-smohgiqsev] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.adr-hint:hover[b-smohgiqsev] { background: rgba(255, 255, 255, 0.07); color: var(--text-light); }
.adr-hint b[b-smohgiqsev] { font-weight: 600; color: var(--accent-hover); white-space: nowrap; }
.adr-hint-logos[b-smohgiqsev] { display: inline-flex; gap: 6px; flex-shrink: 0; }
.adr-hint-logos img[b-smohgiqsev] { width: 16px; height: 16px; opacity: 0.85; }
/* /Components/Pages/AdResultMobile.razor.rz.scp.css */
/* Mobile creative page (Figma 45:3044) and its sub-views. Shared pieces (.m-page, .m-back, .m-btn…) are in app.css. */

.am-header[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}.am-header-top[b-1fogjj0lnj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}.am-id[b-1fogjj0lnj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}.am-title-row[b-1fogjj0lnj] {
    display: flex;
    min-width: 0;
}/* The shared inline editor is a 24px title on desktop; the phone header is 20px. */
.am-title-row[b-1fogjj0lnj]  .ine-title,
.am-title-row[b-1fogjj0lnj]  .ine-input {
    font-size: 20px;
    line-height: 30px;
}.am-date[b-1fogjj0lnj] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}/* ═══ Main card: video + controls ═══ */
.am-main[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 8px;
    background: #2B2B2B;
    overflow: hidden;
}.am-video[b-1fogjj0lnj] {
    background: var(--bg-page);
    border-radius: 8px;
    display: flex;
    justify-content: center;
}.am-video video[b-1fogjj0lnj] {
    display: block;
    width: 100%;
    max-height: 70dvh;
    border-radius: 8px;
    background: var(--bg-page);
}.am-controls[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 20px 20px;
}.am-block[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}.am-grid[b-1fogjj0lnj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}.am-logo[b-1fogjj0lnj] {
    width: 20px;
    height: 20px;
}/* Bookmark + thumbs row. */
.am-feedback-row[b-1fogjj0lnj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}.am-thumbs[b-1fogjj0lnj] {
    display: flex;
    gap: 12px;
}.am-icon-btn[b-1fogjj0lnj] {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0.7;
    display: flex;
    cursor: pointer;
}.am-icon-btn.active[b-1fogjj0lnj] {
    opacity: 1;
}.am-icon-btn img[b-1fogjj0lnj] {
    width: 20px;
    height: 20px;
    display: block;
}/* ═══ Info tiles (Figma 45:3350) ═══ */
.am-info[b-1fogjj0lnj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 8px;
}.am-info-tile[b-1fogjj0lnj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}.am-info-icon[b-1fogjj0lnj] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}.am-info-icon img[b-1fogjj0lnj] {
    width: 24px;
    height: 24px;
}.am-info-flag[b-1fogjj0lnj] {
    border-radius: 50%;
    object-fit: cover;
}.am-info-text[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}.am-info-label[b-1fogjj0lnj] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}.am-info-value[b-1fogjj0lnj] {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.am-info-link[b-1fogjj0lnj] {
    color: var(--accent-hover);
    text-decoration: none;
}/* ═══ Failed creative ═══ */
.am-failed[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 20px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-panel);
    text-align: center;
}.am-failed-icon[b-1fogjj0lnj] {
    width: 40px;
    height: 40px;
}.am-failed-title[b-1fogjj0lnj] {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}.am-failed-message[b-1fogjj0lnj] {
    color: var(--status-error);
    font-size: 14px;
    line-height: 20px;
}.am-failed-hint[b-1fogjj0lnj] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}.am-failed .am-grid[b-1fogjj0lnj] {
    width: 100%;
    margin-top: 8px;
}/* ═══ Sub-views: Translate / Resize / Publish / Feedback ═══ */
.am-sub[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: var(--m-main-height);
    padding: 20px;
}.am-sub-head[b-1fogjj0lnj] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}.am-sub-head h1[b-1fogjj0lnj] {
    margin: 0;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}.am-sub-desc[b-1fogjj0lnj] {
    margin-top: -16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}.am-sub-actions[b-1fogjj0lnj] {
    margin-top: auto;
}.am-sub-actions[b-1fogjj0lnj]  .jab-btn {
    width: 100%;
}.am-options[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}/* Language row (Figma 89:4150): Gray/775, 60px, flag + name, lime border when chosen. */
.am-option[b-1fogjj0lnj] {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #2B2B2B;
    color: var(--text-bright);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}.am-option.selected[b-1fogjj0lnj],
.am-size.selected[b-1fogjj0lnj] {
    border-color: var(--accent);
    color: var(--text-primary);
}.am-flag[b-1fogjj0lnj] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}.am-option-check[b-1fogjj0lnj] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}/* Size card (Figma 89:4292): icon tile, ratio, name · resolution. */
.am-size[b-1fogjj0lnj] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
}.am-size-icon[b-1fogjj0lnj] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}.am-size-icon img[b-1fogjj0lnj] {
    width: 40px;
    height: 40px;
}.am-size-ratio[b-1fogjj0lnj] {
    font-size: 16px;
    line-height: 24px;
}.am-size-sub[b-1fogjj0lnj] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}/* Publish (Figma 89:4870). */
.am-publish-preview[b-1fogjj0lnj] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-page);
}.am-publish-preview video[b-1fogjj0lnj] {
    display: block;
    width: 100%;
    max-height: 50dvh;
}.am-publish-badge[b-1fogjj0lnj] {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--text-primary);
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-transform: uppercase;
}.am-field[b-1fogjj0lnj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-panel);
}.am-field-label[b-1fogjj0lnj] {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 18px;
}.am-input[b-1fogjj0lnj] {
    display: flex;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}.am-input input[b-1fogjj0lnj],
.am-textarea[b-1fogjj0lnj] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
}.am-input input[b-1fogjj0lnj]::placeholder,
.am-textarea[b-1fogjj0lnj]::placeholder {
    color: var(--text-muted);
}/* Feedback (Figma 116:6060). */
.am-chips[b-1fogjj0lnj] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}.am-chip[b-1fogjj0lnj] {
    padding: 8px 14px;
    border: 1px solid var(--color-grey-40);
    border-radius: 100px;
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}.am-chip.selected[b-1fogjj0lnj] {
    border-color: var(--accent);
    color: var(--accent-hover);
}.am-textarea[b-1fogjj0lnj] {
    min-height: 105px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    resize: vertical;
}

/* The pointer to the MCP connector under the actions: quiet, one line, a link. */
.am-hint[b-1fogjj0lnj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    text-decoration: none;
}
.am-hint:active[b-1fogjj0lnj] { background: rgba(255, 255, 255, 0.07); }
.am-hint b[b-1fogjj0lnj] { font-weight: 600; color: var(--accent-hover); white-space: nowrap; }
.am-hint-logos[b-1fogjj0lnj] { display: inline-flex; gap: 6px; flex-shrink: 0; }
.am-hint-logos img[b-1fogjj0lnj] { width: 16px; height: 16px; opacity: 0.85; }
/* /Components/Pages/BoardMobile.razor.rz.scp.css */
/* Mobile creatives board (Figma 🗂️ Creatives). Shared pieces (.m-page, .m-search, .m-btn, sheet rows…) are in app.css. */

.bm-searchbar[b-3hwikmv15g] {
    display: flex;
    align-items: center;
    gap: 12px;
}/* ═══ Toolbar: board title + count, icon buttons (Figma 96:1332) ═══ */
.bm-toolbar[b-3hwikmv15g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}.bm-board[b-3hwikmv15g] {
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 0;
    border: 0;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
}.bm-board .m-icon[b-3hwikmv15g] {
    color: var(--accent-dark);
}.bm-board-name[b-3hwikmv15g] {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.bm-tools[b-3hwikmv15g] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}.bm-lang-grid[b-3hwikmv15g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}.bm-flag[b-3hwikmv15g] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}/* Ad object search in the filters sheet (Figma 97:5026): the 44px box with 14px text and an olive
   icon. .m-search is flex: 1 for a toolbar row; in the section's column that would shrink it to
   its line of text. */
.bm-object-search[b-3hwikmv15g] {
    flex: none;
}.bm-object-search .m-icon[b-3hwikmv15g] {
    color: var(--accent-dark);
}.bm-object-search input[b-3hwikmv15g] {
    font-size: 14px;
    line-height: 20px;
}.bm-chips[b-3hwikmv15g] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}.bm-chip[b-3hwikmv15g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-grey-40);
    border-radius: 100px;
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}.bm-chip.selected[b-3hwikmv15g] {
    border-color: var(--accent-dark);
    color: var(--accent-active);
}/* Boards list (Figma 89:5344) and the move-target list. */
.bm-folder-list[b-3hwikmv15g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}.bm-folder-list-scroll[b-3hwikmv15g] {
    max-height: 45dvh;
    overflow-y: auto;
    margin-bottom: 20px;
}.bm-folder-row[b-3hwikmv15g] {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-bright);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    cursor: pointer;
}.bm-folder-row.selected[b-3hwikmv15g] {
    background: var(--bg-elevated);
    color: var(--text-primary);
}.bm-folder-row .m-icon[b-3hwikmv15g] {
    color: var(--text-secondary);
}.bm-folder-main[b-3hwikmv15g] {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}.bm-folder-name[b-3hwikmv15g] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.bm-folder-more[b-3hwikmv15g] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    display: flex;
    cursor: pointer;
}.bm-folder-new[b-3hwikmv15g] {
    color: var(--text-primary);
}/* The move-target list (Figma 97:5755): a Gray/900 well with 8px corners, 48px rows that touch
   (and keep their height when the list scrolls), Gray/200 names with Gray/500 icons. The picked
   row is Gray/775 edge to edge with a lime folder and check. */
.bm-move[b-3hwikmv15g] {
    gap: 0;
    border-radius: 8px;
    background: var(--bg-page);
}.bm-move .bm-folder-row[b-3hwikmv15g] {
    height: 48px;
    flex-shrink: 0;
    border-radius: 0;
    color: var(--text-light);
}.bm-move .bm-folder-row .m-icon[b-3hwikmv15g] {
    color: var(--text-muted);
}.bm-move .bm-folder-row.selected[b-3hwikmv15g] {
    background: var(--color-grey-16);
    color: var(--text-primary);
}.bm-move .bm-folder-row.selected .m-icon[b-3hwikmv15g] {
    color: var(--accent-hover);
}/* The boards drawer (Figma 89:5523): 48px rows that touch, Gray/200 names with Gray/500 icons,
   8px between a row's parts (12px after its icon). The open board's row is Gray/750 with a lime
   icon, a white "…" and a lighter count. The dividers sit 28px from the text of "New board" and
   "Archive" and 8px from the list between them. */
.bm-boards[b-3hwikmv15g] {
    gap: 0;
}.bm-boards .bm-folder-row[b-3hwikmv15g] {
    height: 48px;
    gap: 8px;
    color: var(--text-light);
}.bm-boards .bm-folder-row > .m-icon[b-3hwikmv15g] {
    margin-right: 4px;
}.bm-boards .bm-folder-row .m-icon[b-3hwikmv15g] {
    color: var(--text-muted);
}.bm-boards .bm-folder-row.selected[b-3hwikmv15g] {
    color: var(--text-primary);
}.bm-boards .bm-folder-row.selected .m-icon[b-3hwikmv15g] {
    color: var(--accent-hover);
}.bm-boards .bm-folder-row.selected .m-count[b-3hwikmv15g] {
    background: var(--color-grey-30);
    color: var(--text-light);
}.bm-boards .bm-folder-more[b-3hwikmv15g] {
    width: 20px;
    height: 20px;
}.bm-boards .bm-folder-row .bm-folder-more .m-icon[b-3hwikmv15g] {
    color: var(--text-primary);
}.bm-boards .bm-folder-new[b-3hwikmv15g] {
    color: var(--text-bright);
}.bm-boards .bm-folder-new .m-icon[b-3hwikmv15g] {
    color: var(--text-primary);
}.bm-boards .m-divider[b-3hwikmv15g] {
    margin: 8px 0 4px;
}.bm-boards .bm-folder-new + .m-divider[b-3hwikmv15g] {
    margin: 4px 0 8px;
}/* Name field (rename / new board, Figma 97:5038). */
.bm-field[b-3hwikmv15g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}.bm-field-label[b-3hwikmv15g] {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 18px;
}.bm-input[b-3hwikmv15g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}.bm-input input[b-3hwikmv15g] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
}.bm-input input[b-3hwikmv15g]::placeholder {
    color: var(--text-muted);
}
/* /Components/Pages/BrandSetupDesktop.razor.rz.scp.css */
/* ── BrandSetup page scoped styles ── */

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

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

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

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

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

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

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

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

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

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

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

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

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

.setup-field-hint[b-parv1y99ae] {
    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-parv1y99ae] {
    background: var(--bg-page);
    border-radius: 4px;
    overflow: hidden;
}

/* ── Video background ── */

.video-bg[b-parv1y99ae] {
    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-parv1y99ae] {
    border-radius: 0;
}

/* ── or divider ── */

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

/* ── Manual card ── */

.manual-card[b-parv1y99ae] {
    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-parv1y99ae] {
    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-parv1y99ae] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

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

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

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

.manual-header-desc[b-parv1y99ae] {
    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-parv1y99ae] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

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

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

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

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

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

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

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

.manual-logo-dropzone[b-parv1y99ae] {
    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-parv1y99ae] {
    border-color: var(--accent-active);
}

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

.manual-logo-upload-btn[b-parv1y99ae] {
    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-parv1y99ae] {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

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

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

/* ── Terms text ── */

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

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

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

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

/* ── Analyzing state ── */

.analyzing-container[b-parv1y99ae] {
    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-parv1y99ae] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 24px;
}

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

.logo-color-row[b-parv1y99ae] {
    display: flex;
    gap: 20px;
    margin-top: 16px;
}
/* /Components/Pages/BrandSetupMobile.razor.rz.scp.css */
/* Mobile brand page (Figma ⭐ Brands). Shared pieces (.m-page, .m-field, .m-input, .m-btn,
   .m-tool, .m-icon) are in app.css; the logo picker and color cards carry their own phone rules. */

.bs-page[b-wzbp8elgbs] {
    padding-top: 12px;
    gap: 12px;
}

.bs-title[b-wzbp8elgbs] {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
}

/* ═══ Cards of the create form ═══ */
.bs-card-head[b-wzbp8elgbs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

.bs-card-title[b-wzbp8elgbs] {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
}

.bs-card-desc[b-wzbp8elgbs] {
    color: var(--text-faint);
    font-size: 12px;
    line-height: 18px;
}

/* Import with AI: the animated background under a dark tint, the URL field on a solid box. */
.bs-ai[b-wzbp8elgbs] {
    position: relative;
    padding: 12px;
    border-radius: 8px;
    background: #202020;
    overflow: hidden;
}

.bs-video[b-wzbp8elgbs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.35;
    pointer-events: none;
}

.bs-ai-body[b-wzbp8elgbs] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bs-url[b-wzbp8elgbs] {
    background: var(--color-grey-16);
}

.bs-or[b-wzbp8elgbs] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.bs-manual[b-wzbp8elgbs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-panel);
}

.bs-manual-head[b-wzbp8elgbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
}

.bs-chevron[b-wzbp8elgbs] {
    transform: rotate(90deg);
    transition: transform 0.15s;
}

.bs-chevron.open[b-wzbp8elgbs] {
    transform: rotate(-90deg);
}

/* Logo drop zone: a dashed 100px box on the page background with the upload button in it. */
.bs-upload[b-wzbp8elgbs] {
    padding: 8px;
    border-radius: 8px;
    background: var(--bg-page);
}

.bs-dropzone[b-wzbp8elgbs] {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 20px;
    border: 2px dashed var(--bg-elevated);
    border-radius: 8px;
    cursor: pointer;
}

.bs-upload-btn[b-wzbp8elgbs] {
    padding: 8px 14px;
    color: var(--accent-active);
}

.bs-logo-preview[b-wzbp8elgbs] {
    max-height: 52px;
    max-width: 200px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    padding: 4px;
}

.bs-upload-hint[b-wzbp8elgbs] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

.bs-footer[b-wzbp8elgbs] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 0;
}

.bs-terms[b-wzbp8elgbs] {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

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

/* ═══ Analyzing (Figma 24:1397) ═══ */
.bs-analyzing[b-wzbp8elgbs] {
    position: relative;
    min-height: calc(var(--m-main-height) - 12px);   /* the bottom margin */
    margin: 0 20px 12px;
    border-radius: 24px;
    background: #121212;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-analyzing-body[b-wzbp8elgbs] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
}

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

.bs-analyzing-desc[b-wzbp8elgbs] {
    margin-top: -8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

/* ═══ Created (Figma 26:1557) ═══ */
.bs-created[b-wzbp8elgbs] {
    gap: 16px;
}

.bs-head[b-wzbp8elgbs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-head-top[b-wzbp8elgbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bs-back[b-wzbp8elgbs] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.bs-saving[b-wzbp8elgbs] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}

.bs-saving[b-wzbp8elgbs]  .bs-saved {
    color: var(--accent-dark);
}

.bs-meta[b-wzbp8elgbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bs-date[b-wzbp8elgbs] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.bs-fav[b-wzbp8elgbs] {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.bs-fav img[b-wzbp8elgbs] {
    width: 20px;
    height: 20px;
}

.bs-actions[b-wzbp8elgbs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bs-tool[b-wzbp8elgbs] {
    background: var(--bg-elevated);
    color: var(--text-light);
}

.bs-warning[b-wzbp8elgbs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 4px 10px 4px 4px;
    border-radius: 16px;
    background: #7a2e0e;
    color: #fec84b;
    font-size: 14px;
    font-weight: 500;
}

.bs-warning-badge[b-wzbp8elgbs] {
    padding: 2px 10px;
    border: 1px solid #fedf89;
    border-radius: 16px;
    background: #b54708;
    white-space: nowrap;
}

.bs-warning-text[b-wzbp8elgbs] {
    flex: 1;
    min-width: 0;
}

.bs-warning-close[b-wzbp8elgbs] {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

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

.bs-section[b-wzbp8elgbs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bs-section-head[b-wzbp8elgbs] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

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

.bs-section-icon img[b-wzbp8elgbs] {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.bs-section-text[b-wzbp8elgbs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bs-section-title[b-wzbp8elgbs] {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
}

.bs-section-desc[b-wzbp8elgbs] {
    color: var(--text-faint);
    font-size: 12px;
    line-height: 18px;
}

.bs-colors[b-wzbp8elgbs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /Components/Pages/CreateAdDesktop.razor.rz.scp.css */
/* Prevent MudExpansionPanel from changing margin when expanded */
[b-n1qapynqct] .mud-expand-panel {
    margin: 0 !important;
}

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

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

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

.ad-type-bar[b-n1qapynqct] {
    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-n1qapynqct] {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 24px;
    color: #F9F9F9;
}

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

.ad-type-bar-btn[b-n1qapynqct] {
    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-n1qapynqct] {
    background: #DAFB09;
    border-color: #DAFB09;
    cursor: pointer;
}

.ad-type-bar-btn.active:hover[b-n1qapynqct] {
    background: #E0FC31;
    border-color: #E0FC31;
}
/* /Components/Pages/CreateAdMobile.razor.rz.scp.css */
/* Mobile Guided wizard (Figma "Wizard" 2167:5383): only what the Guided wizard alone draws —
   the Select Ad type title and the ad type step's footer, and the Ad Content step's phone
   layout. The stepper, the step header, the footer, the review pieces and the phone layout of
   the step controls shared with Idea to Video are WizardMobileFrame's (its stylesheet reaches
   this twin's markup through ::deep); the ad type picker's phone look is in
   AdTypeSelectionPage.razor.css. */

/* ═══ Page title (Select Ad type) and the step header ("Single step": icon, title, subtitle) ═══ */
.cm-title[b-q021sh4tds] {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
}

.cm-hint[b-q021sh4tds] {
    padding: 8px 0;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

.cm-selected[b-q021sh4tds] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 20px;
}

.cm-selected span:last-child[b-q021sh4tds] {
    color: var(--text-primary);
    text-align: right;
}

/* ═══ Ad Content: AdContentEditor on the page, no box (Figma 2153:6807) ═══ */
.cm-section-body[b-q021sh4tds]  .ac-root {
    padding: 0;
    gap: 20px;
}

.cm-section-body[b-q021sh4tds]  .ac-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    border-radius: 0;
    background: none;
}

.cm-section-body[b-q021sh4tds]  .ac-label-col {
    flex: none;
    gap: 4px;
}

/* "Your Vision (Recommended)" on one line, as the frame draws "Instructions (Recommended)". */
.cm-section-body[b-q021sh4tds]  .ac-label-col > div {
    flex-direction: row !important;
    align-items: baseline;
    gap: 4px;
}

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

.cm-section-body[b-q021sh4tds]  .ac-section-recommended {
    color: var(--text-light);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.cm-section-body[b-q021sh4tds]  .ac-section-desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

.cm-section-body[b-q021sh4tds]  .ac-card {
    padding: 12px;
}

.cm-section-body[b-q021sh4tds]  .ac-card-text {
    color: var(--text-light);
}

.cm-section-body[b-q021sh4tds]  .ac-card.selected .ac-card-text {
    color: var(--text-primary);
}

.cm-section-body[b-q021sh4tds]  .ac-checkbox {
    top: -4px;
    right: -6px;
}

.cm-section-body[b-q021sh4tds]  .ac-instructions {
    min-height: 340px;
    border-color: var(--border-default);
}

.cm-section-body[b-q021sh4tds]  .ac-toggle-label {
    font-size: 14px;
    line-height: 20px;
}
/* /Components/Pages/CreateAdvancedDesktop.razor.rz.scp.css */
/* Advanced wizard shell (Figma section 1446:12364). One screen per step: sticky stepper,
   step header, a single content panel, then the "Next step" CTA. */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* EndCardEditor's preview sticks 93px down to clear CreateAd's sticky stepper, which lives in
   the same scrollport there. Here the stepper is outside .adv-panel entirely, so the preview
   only needs to clear the panel's own top edge. */
.adv-panel[b-h62kc8rf8f]  .endcard-preview {
    top: 20px;
}
/* /Components/Pages/CreateAdvancedMobile.razor.rz.scp.css */
/* Mobile Idea to Video wizard (Figma "Idea to Video" 2167:5382): only what this wizard alone
   draws — the Scenario & References step's phone layout (ReferencesEditor, ScenarioEditor), the
   Settings step's board row, the in-page Add reference / Choose from assets views (the dialog
   components rendered bare), the "Coming soon" screen. The stepper, the step header, the footer,
   the review pieces and the phone layout of the step controls shared with Guided (object, size,
   end card, settings tiles, language strip) are WizardMobileFrame's; the voice picker's phone
   look is in VoiceSelector.razor.css. The ::deep blocks are keyed on .cm-section-body / .cm-view
   so the desktop twin is untouched. */

/* ═══ Coming soon (the chooser disables the card; a direct URL lands here) ═══ */
.cm-soon[b-pnnc878dob] {
    min-height: var(--m-main-height);
    justify-content: center;
    padding: 20px;
    font-size: 14px;
    line-height: 20px;
}

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

/* ═══ Scenario & References (2167:3941 / 2810): the References block, a line, the Scenario
   block — both on the page, their 20px-semibold desktop titles as 16px block headers ═══ */
.cm-section-body[b-pnnc878dob]  .ref-root {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--bg-elevated);
}

.cm-section-body[b-pnnc878dob]  .ref-head {
    align-items: flex-start;
    gap: 12px;
}

.cm-section-body[b-pnnc878dob]  .ref-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.cm-section-body[b-pnnc878dob]  .ref-desc {
    margin-top: 0;
}

/* The frame draws no counter; it stays, small, since the cap is real. */
.cm-section-body[b-pnnc878dob]  .ref-counter {
    font-size: 14px;
    line-height: 24px;
}

/* Two 180px cards to a row (the frame's 168px tiles in a 350px column, 12px apart). */
.cm-section-body[b-pnnc878dob]  .ref-grid {
    margin-top: 12px;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
    gap: 12px;
}

/* The add tile (2167:2868): a Gray/800 card with two Gray/850 halves, the dashed upload box in
   the upper one, each with its icon over a 12px label. */
.cm-section-body[b-pnnc878dob]  .ref-add {
    align-self: stretch;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: var(--bg-panel);
}

.cm-section-body[b-pnnc878dob]  .ref-add-drop {
    flex: 1 1 0;
    padding: 4px;
}

.cm-section-body[b-pnnc878dob]  .ref-add-btn {
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.cm-section-body[b-pnnc878dob]  .ref-add-assets {
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

/* A reference card (2167:2877): Gray/800, 8px inset, the image filling the well over the chip;
   the "…" menu a 24px black tile in the corner. */
.cm-section-body[b-pnnc878dob]  .ref-card {
    padding: 8px;
    gap: 8px;
    background: var(--bg-panel);
}

.cm-section-body[b-pnnc878dob]  .ref-thumb {
    flex: 1 1 auto;
}

/* No z-index of its own on the phone: the "…" menu is DropdownMenu's bottom sheet, rendered
   inside this holder, and a positioned, z-indexed holder would be a stacking context that keeps
   the fixed sheet's z-index (1350) local to it — the sheet then slid under the Next Step footer
   and the tab bar (both z-index 5 / 100 at the root). Positioned, it still paints over the
   card's thumb and chip, which are not. */
.cm-section-body[b-pnnc878dob]  .ref-menu {
    top: 4px;
    right: 4px;
    z-index: auto;
}

.cm-section-body[b-pnnc878dob]  .ref-menu-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(var(--color-black-rgb), 0.5);
}

/* The scenario field (2167:2914): 16px block header, the field, the "used" line under it. The
   coaching block sits at the field's bottom edge, under the example, rather than over its
   middle, so the example stays readable in the shorter phone field. */
.cm-section-body[b-pnnc878dob]  .sc-root {
    padding: 0;
}

.cm-section-body[b-pnnc878dob]  .sc-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.cm-section-body[b-pnnc878dob]  .sc-desc {
    margin-top: 0;
}

.cm-section-body[b-pnnc878dob]  .sc-wrap {
    margin-top: 12px;
    height: 320px;
}

.cm-section-body[b-pnnc878dob]  .sc-hints {
    top: auto;
    bottom: 14px;
    width: 300px;
    transform: translateX(-50%);
}

/* ═══ End card: inert while "No endcard" is on, as on the desktop ═══ */
.cm-endcard.disabled[b-pnnc878dob] {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* ═══ Settings: the board row (Figma 1446:10303 on the desktop; the phone frame 2167:4476
   draws no board, the review 2167:4212 shows one) stacks under the tiles ═══ */
.cm-section-body[b-pnnc878dob]  .st-root .st-section-desc {
    font-size: 12px;
    line-height: 18px;
}

.cm-section-body[b-pnnc878dob]  .st-root .st-change-folder-btn {
    flex: none;
    width: 100%;
}

/* ═══ In-page views: Add reference (2167:3139 … 3749) and Choose from assets — the back tile,
   then the dialog's body stripped of its sheet (padding, width, close button) ═══ */
.cm-view[b-pnnc878dob] {
    gap: 8px;
    padding-top: 12px;
}

.cm-view[b-pnnc878dob]  .popup-container {
    width: auto;
    max-width: none;
    gap: 20px;
    padding: 0;
    align-items: stretch;
}

.cm-view[b-pnnc878dob]  .popup-close {
    display: none;
}

.cm-view[b-pnnc878dob]  .popup-title {
    font-size: 20px;
    line-height: 30px;
}

.cm-view[b-pnnc878dob]  .popup-subtitle {
    margin-top: 0;
}

.cm-view[b-pnnc878dob]  .popup-action,
.cm-view[b-pnnc878dob]  .popup-action .mud-button-root {
    width: 100%;
}

/* The upload box (2167:3191): a 200px Gray/775 panel with a dashed Gray/700 box 12px inside it
   and the outlined "Add image" button in the middle; the desktop's "Drop your image here or" is
   not drawn (there is nothing to drop from on a phone). */
.cm-view[b-pnnc878dob]  .ar-dropzone {
    position: relative;
    height: 200px;
    padding: 12px;
    border: 0;
    background: var(--color-grey-16);
}

.cm-view[b-pnnc878dob]  .ar-dropzone::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 2px dashed var(--color-grey-30);
    border-radius: 8px;
    pointer-events: none;
}

.cm-view[b-pnnc878dob]  .ar-dropzone-text {
    display: none;
}

.cm-view[b-pnnc878dob]  .ar-select-btn {
    padding: 10px 16px;
    border-color: var(--accent-dark);
    color: var(--accent-active);
    font-size: 14px;
    line-height: 20px;
}

/* The picked image (2167:3662): 240px, the trash tile in its corner. */
.cm-view[b-pnnc878dob]  .ar-preview {
    height: 240px;
    background: var(--color-grey-16);
}

.cm-view[b-pnnc878dob]  .ar-preview-remove {
    top: 8px;
    right: 8px;
}

/* Fields stack their 16px label and 12px line over the input (2167:3195 / 3201). stretch, not
   the desktop row's flex-start: MudSelect wraps its control in an outer div.mud-select that
   carries no class of ours (Class lands on the inner control), so in a column it would sit at
   its content width and the control's width: 100% would be 100% of that. */
.cm-view[b-pnnc878dob]  .ar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.cm-view[b-pnnc878dob]  .ar-labels {
    width: auto;
    padding-top: 0;
}

.cm-view[b-pnnc878dob]  .ar-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.cm-view[b-pnnc878dob]  .ar-select {
    width: 100%;
}

.cm-view[b-pnnc878dob]  .ar-error {
    padding-left: 0;
}

/* The views' button is the frame's (2167:3208 disabled, 2167:3749 ready): the m-btn-primary
   look — 40px, lime, sentence case, olive with the lighter border while disabled — over
   MudButton's uppercase grey. The dialogs drop their inline size on the phone for this.
   MudBlazor forces the disabled colour and background with !important, so those two do too. */
.cm-view[b-pnnc878dob]  .popup-action .mud-button-root {
    height: 40px;
    padding: 10px 16px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: none;
    box-shadow: var(--shadow-sm);
}

.cm-view[b-pnnc878dob]  .popup-action .mud-button-root:disabled {
    border-color: var(--color-accent-olive-light);
    background: var(--accent-dark) !important;
    color: var(--text-on-accent) !important;
}

/* Choose from assets: two tiles to a row on the page, their delete tile always shown (there
   is no hover to reveal it on a touch screen). */
.cm-view[b-pnnc878dob]  .ca-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
}

.cm-view[b-pnnc878dob]  .ca-tile {
    background: var(--bg-panel);
    border: 0;
}

.cm-view[b-pnnc878dob]  .ca-tile.selected {
    outline: 1px solid var(--accent-hover);
    outline-offset: -1px;
}

.cm-view[b-pnnc878dob]  .ca-del {
    opacity: 1;
}
/* /Components/Pages/CreateStart.razor.rz.scp.css */
/* ═══════════ Create mode chooser (Figma 1438:8429 / hover 1438:8697) ═══════════ */

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

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

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

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

.mode-cards[b-oqystih6gt] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* equal heights in a row even if one description wraps */
    justify-content: center;
    gap: 20px;
    width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

.mode-badge-soon[b-oqystih6gt] {
    background: #2B2B2B;
    color: var(--text-light);
}

/* The fourth card links out to /connect (the MCP how-to). Its illustration is the client
   marks in markup — there is no Figma frame for it — on the same 300×220 box. */
.mode-card-link[b-oqystih6gt] {
    color: inherit;
    text-decoration: none;
}

.mode-illustration-clients[b-oqystih6gt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        radial-gradient(60% 55% at 50% 100%, rgba(218, 251, 9, 0.16), transparent 70%),
        linear-gradient(180deg, #2B2B2B 0%, #1F1F1F 100%);
}

.mode-illustration-clients span[b-oqystih6gt] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #1D1D1D;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(0, 0, 0, 0.35);
}

.mode-illustration-clients img[b-oqystih6gt] {
    width: 22px;
    height: 22px;
    opacity: 0.92;
}

/* ═══════════ Phone (Figma 2153:5898): row cards centered in the page area ═══════════ */

.mode-mobile[b-oqystih6gt] {
    min-height: var(--m-main-height);
    justify-content: center;
    gap: 20px;
    padding: 8px 20px 16px;
}

.mode-m-header[b-oqystih6gt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

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

.mode-m-header p[b-oqystih6gt] {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

/* 160px card on a Gray/775 → #1D1D1D gradient; the illustration box is 172px wide. */
.mode-m-card[b-oqystih6gt] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 160px;
    padding: 20px 12px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #2B2B2B 0%, #1D1D1D 100%);
    box-shadow: 0 12px 6px rgba(var(--color-black-rgb), 0.3);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.mode-m-ill[b-oqystih6gt] {
    flex-shrink: 0;
    width: 172px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mode-m-ill img[b-oqystih6gt] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

.mode-m-text[b-oqystih6gt] {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.mode-m-desc[b-oqystih6gt] {
    color: var(--text-light);
    font-size: 12px;
    line-height: 18px;
}

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

.mode-card-soon .mode-m-ill img[b-oqystih6gt] {
    filter: grayscale(0.6);
    opacity: 0.6;
}
/* /Components/Pages/ExploreMobile.razor.rz.scp.css */
/* Mobile Explore (Figma 🧭 Explore). Shared pieces (.m-page, .m-search, .m-tool, .m-btn, sheet rows…) are in app.css. */

.em-page[b-5cust1pagh] {
    padding-top: 8px;
}

/* ═══ Toolbar (Figma 1:10952) ═══
   Stays under the shell's top bar while the feed scrolls (MOBILE.md §3.11). The padding paints the
   page's 8px top inset and the 12px gap to the feed in the page color, and the negative margins give
   that space back to the layout, so cards slide under the toolbar and nothing shows through. */
.em-toolbar[b-5cust1pagh] {
    position: sticky;
    top: var(--m-top-height);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 12px;
    margin: -8px 0 -12px;
    background: var(--bg-page);
}

.em-toolbar[b-5cust1pagh]  .em-search {
    height: 36px;
}

.em-toolbar[b-5cust1pagh]  .em-search input {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.em-publish-btn[b-5cust1pagh] {
    height: 36px;
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    background: none;
    color: var(--accent-active);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* ═══ Feed: one card per row, the entry's own aspect ratio ═══ */
.em-feed[b-5cust1pagh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.em-card[b-5cust1pagh] {
    border-radius: 8px;
    background: var(--bg-panel);
    overflow: hidden;
    cursor: pointer;
}

.em-media[b-5cust1pagh] {
    position: relative;
    width: 100%;
    max-height: 622px;
    background: var(--bg-panel);
}

.em-media img[b-5cust1pagh],
.em-media video[b-5cust1pagh] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.em-overlay[b-5cust1pagh] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 85%);
}

.em-type[b-5cust1pagh] {
    height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(var(--color-black-rgb), 0.5);
    color: var(--text-light);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.em-type-lg[b-5cust1pagh] {
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0;
}

.em-like[b-5cust1pagh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-light);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    cursor: pointer;
}

.em-like.liked[b-5cust1pagh] {
    color: #EF4444;
}

.em-like[b-5cust1pagh]  svg {
    display: block;
}

.em-featured[b-5cust1pagh] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--accent-hover);
    color: var(--color-black);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.em-sentinel[b-5cust1pagh] {
    min-height: 24px;
    display: flex;
    justify-content: center;
    padding: 12px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ═══ Sub-views: detail (1:11545) and publish (1:11986) ═══ */
.em-sub[b-5cust1pagh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: var(--m-main-height);
    padding: 20px;
}

.em-sub-head[b-5cust1pagh] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.em-sub-head h1[b-5cust1pagh] {
    margin: 0;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.em-sub-desc[b-5cust1pagh] {
    margin-top: -16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.em-sub-actions[b-5cust1pagh] {
    margin-top: auto;
}

.em-detail-head[b-5cust1pagh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.em-detail-top[b-5cust1pagh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.em-detail-date[b-5cust1pagh] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.em-detail-meta[b-5cust1pagh] {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

.em-detail-desc[b-5cust1pagh] {
    margin-top: -6px;
    color: var(--text-light);
    font-size: 12px;
    line-height: 18px;
}

.em-detail-video[b-5cust1pagh] {
    position: relative;
    border-radius: 8px;
    background: var(--bg-page);
    overflow: hidden;
}

.em-detail-video video[b-5cust1pagh] {
    display: block;
    width: 100%;
    max-height: 70dvh;
}

/* Publish: two-column picker of the user's finished creatives. */
/* The publish view is exactly the page area and does not scroll; the picker grid does. Every
   other row keeps its own size (.m-search is flex: 1 for the feed's toolbar row and would
   otherwise grow or shrink with the column's free space). */
.em-pub[b-5cust1pagh] {
    height: var(--m-main-height);
    overflow: hidden;
}

.em-pub > :not(.em-pub-grid)[b-5cust1pagh] {
    flex: none;
}

/* Figma 1:11986: the search icon is lime here, not the search box's muted grey. */
.em-pub .m-search .m-icon[b-5cust1pagh] {
    color: var(--accent-active);
}

.em-pub-grid[b-5cust1pagh] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.em-pub-card[b-5cust1pagh] {
    position: relative;
    height: 212px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.em-pub-card.selected[b-5cust1pagh] {
    border-color: var(--accent-hover);
    background: linear-gradient(to bottom, var(--color-olive-dark) 0%, var(--color-olive-dark) 15%, var(--bg-panel) 50%);
    box-shadow: 0 20px 24px rgba(var(--color-shadow-warm-rgb), 0.5);
}

.em-pub-preview[b-5cust1pagh] {
    position: relative;
    height: 152px;
    border-radius: 8px;
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.em-pub-preview video[b-5cust1pagh] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

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

.em-pub-name[b-5cust1pagh] {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.em-pub-date[b-5cust1pagh] {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 12px;
}

.em-pub-check[b-5cust1pagh] {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-hover);
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-pub-form[b-5cust1pagh] {
    padding: 20px;
    border-radius: 12px;
    background: #2B2B2B;
}
/* /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 — what the panel leaves, 60% on a wide window. Not a fixed 60%: the panel cannot
   get narrower than its 320px form plus paddings (440px), so under 1100px a fixed share pushed
   the panel's right edge, and the close button, out of the window. */
.login-left[b-hh14x3jk83] {
    flex: 1 1 0;
    min-width: 0;
    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;
}


/* Phone layout (Figma AdStar-Mobile "Auth"; the panel's own rules are in LoginPanel.css): the
   desktop's video fills the page behind the panel at full brightness (the picker's header
   carries a text shadow for it, LoginPanel.css), and the document scrolls when a tall card or
   the keyboard leaves no room. The frames' still image stays underneath for the moment before
   the video paints. It starts at 900px rather than the shell's 768px: below that the 40%
   column is too narrow for the buttons, and the page has no in-between layout. */
@media (max-width: 900px) {
    .login-container[b-hh14x3jk83] {
        display: block;
        position: relative;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        background: url(media/auth-bg.jpg) center / cover no-repeat #000;
    }

    .login-left[b-hh14x3jk83] {
        position: absolute;
        inset: 0;
        background: none;
    }

    .login-left[b-hh14x3jk83]  video {
        background: none;
    }

    .login-right[b-hh14x3jk83] {
        z-index: 1;
        height: auto;
        min-height: 100dvh;
        padding: 0;
        background: none;
        justify-content: flex-start;
    }
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* ═══════════ Mobile (Figma 156:4016 / 156:4089) ═══════════ */

.notif-page[b-re6tjresym] {
    display: flex;
    flex-direction: column;
    min-height: var(--m-main-height);
    padding: 0 20px 20px;
}

/* The list's root fills the page: the list grows (flex: 1 in MessagesList.razor.css) and the
   footer rests at the bottom, 20px above the tab bar (Figma 156:4016). */
.notif-page[b-re6tjresym]  .mp-messages.mp-messages {
    flex: 1;
    gap: 20px;
}

/* The list grows with the page and the document scrolls (MOBILE.md §3.11); the empty state
   still fills the screen. */
.notif-page[b-re6tjresym]  .mp-list.mp-list {
    overflow: visible;
}

.notif-page[b-re6tjresym]  .mp-empty.mp-empty {
    flex: 1;
    height: auto;
}

/* MessagesList is a child component with its own scoped rules of equal specificity, so
   every override here doubles its class to win the tie. */

/* Two full-width tabs, 44px, lime 1px underline under the active one. */
.notif-page[b-re6tjresym]  .mp-tabs.mp-tabs {
    padding: 0;
    border-bottom: 0;
}

.notif-page[b-re6tjresym]  .mp-tabs .mud-tabs-tabbar-wrapper {
    display: flex;
    width: 100%;
}

/* A tab with TabContent is rendered inside a fit-content wrapper div, and that div is the
   flex item: it takes half the row, the tab fills it. The slider is sized as the active tab's
   share of all tabs, i.e. half the row, so the two only line up when the tabs fill the row. */
.notif-page[b-re6tjresym]  .mp-tabs .mud-tabs-tabbar-wrapper > div:not(.mud-tab-slider) {
    flex: 1 1 0;
    min-width: 0;
}

/* !important: MudTabs sets its MinimumTabWidth (160px) inline, wider than half a small phone. */
.notif-page[b-re6tjresym]  .mp-tabs .mud-tab {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
    height: 44px;
    min-height: 44px;
    padding: 4px 0;
    text-transform: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.notif-page[b-re6tjresym]  .mp-tabs .mud-tab.mud-tab-active {
    color: var(--text-primary);
}

.notif-page[b-re6tjresym]  .mp-tabs .mud-tab-slider {
    height: 1px;
    background: var(--accent-hover);
}

.notif-page[b-re6tjresym]  .mp-tabs .mud-tabs-panels {
    display: none;
}

/* Cards: bordered, page-colored, 36px icon circle with the unread dot on its corner. */
.notif-page[b-re6tjresym]  .mp-list.mp-list {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-page[b-re6tjresym]  .mp-card.mp-card {
    position: relative;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
}

.notif-page[b-re6tjresym]  .mp-card-icon.mp-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--bg-elevated);
}

.notif-page[b-re6tjresym]  .mp-card-body.mp-card-body {
    gap: 4px;
}

.notif-page[b-re6tjresym]  .mp-card-title.mp-card-title {
    white-space: normal;
}

.notif-page[b-re6tjresym]  .mp-card-official .mp-card-link {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-light);
}

.notif-page[b-re6tjresym]  .mp-card-interactive .mp-card-link {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--accent-active);
    text-decoration: underline;
}

.notif-page[b-re6tjresym]  .mp-card-date.mp-card-date {
    line-height: 18px;
    margin-top: 0;
}

.notif-page[b-re6tjresym]  .mp-unread-dot.mp-unread-dot {
    position: absolute;
    left: 47px;
    top: 12px;
    width: 6px;
    height: 6px;
    min-width: 6px;
    margin: 0;
}

.notif-page[b-re6tjresym]  .mp-empty.mp-empty {
    padding: 40px 0;
}

.notif-page[b-re6tjresym]  .mp-footer.mp-footer {
    padding: 0;
}

/* ═══════════ Desktop route ═══════════ */
.notif-desktop[b-re6tjresym] {
    display: flex;
    flex-direction: column;
}
/* /Components/Pages/Products.razor.rz.scp.css */
/* Mobile products list toolbar (Figma 119:9774): search box + sort button. */

.pl-toolbar[b-d5aprf0zp9] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pl-search[b-d5aprf0zp9] {
    height: 36px;
}

.pl-search input[b-d5aprf0zp9] {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.pl-sort[b-d5aprf0zp9] {
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--color-grey-40);
    border-radius: 8px;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.pl-sort svg[b-d5aprf0zp9] {
    color: var(--text-light);
}
/* /Components/Pages/ProductSetupDesktop.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-fz52dcd33k] {
    background: var(--bg-page);
    border-radius: 24px;
}

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

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

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

.ps-tabs[b-fz52dcd33k] {
    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-fz52dcd33k] {
    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-fz52dcd33k] {
    background: #4D4D4D;           /* Gray/700 */
    color: #F9F9F9;               /* Gray/25 — active text */
}

.ps-tab-label[b-fz52dcd33k] {
    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-fz52dcd33k] {
    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-fz52dcd33k] {
    background: #E0FC31;          /* Brand/500 — active */
}

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

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

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

.ps-toggle-knob[b-fz52dcd33k] {
    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-fz52dcd33k] {
    left: 18px;
}

/* Helper subtitle under the switch (Figma 889:16101). */
.ps-switch-desc[b-fz52dcd33k] {
    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-fz52dcd33k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    width: 240px;
    flex-shrink: 0;
}

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

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

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

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

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

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

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

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

.setup-field-column[b-fz52dcd33k] {
    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-fz52dcd33k] {
    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-fz52dcd33k] {
    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-fz52dcd33k]  .mud-input-slot {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 18px;
}

/* ── Video background ── */

.video-bg[b-fz52dcd33k] {
    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-fz52dcd33k] {
    border-radius: 0;
}

/* ── or divider ── */

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

/* ── Manual card ── */

.manual-card[b-fz52dcd33k] {
    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-fz52dcd33k] {
    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-fz52dcd33k] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

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

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

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

.manual-header-desc[b-fz52dcd33k] {
    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-fz52dcd33k] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}

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

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

/* ── Terms text ── */

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

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

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

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

/* ── Analyzing state ── */

.analyzing-container[b-fz52dcd33k] {
    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-fz52dcd33k] {
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 24px;
}

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

/* ── Manual: Key benefits label (the rows use the shared StringListEditor control) ── */

.benefits-section[b-fz52dcd33k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefits-label[b-fz52dcd33k] {
    font-size: 14px;
    line-height: 20px;
}

.benefits-label-title[b-fz52dcd33k] {
    font-weight: 500;
    color: var(--text-light);
}

.benefits-label-hint[b-fz52dcd33k] {
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Files drop zone inside the manual card ── */

.manual-files-section[b-fz52dcd33k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Components/Pages/ProductSetupMobile.razor.rz.scp.css */
/* Mobile product page (Figma 🏷️ Products). Shared pieces (.m-page, .m-field, .m-input, .m-btn,
   .m-tool, .m-icon) are in app.css; the image selectors, the fields form and the upload
   controls carry their own phone rules. */

.ps-page[b-7yn9ukdh54] {
    padding-top: 12px;
    gap: 12px;
}

.ps-head[b-7yn9ukdh54] {
    margin-bottom: 8px;
    text-align: center;
}

.ps-head h1[b-7yn9ukdh54] {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

.ps-head p[b-7yn9ukdh54] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

/* ═══ Product / Service switch (Figma 116:9348) ═══ */
.ps-tabs[b-7yn9ukdh54] {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-grey-16);
}

.ps-tab[b-7yn9ukdh54] {
    flex: 1;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
}

.ps-tab.active[b-7yn9ukdh54] {
    background: var(--color-grey-30);
    color: var(--text-primary);
}

.ps-tab.active .m-icon[b-7yn9ukdh54] {
    color: var(--accent-hover);
}

/* ═══ Cards of the create form ═══ */
.ps-card-head[b-7yn9ukdh54] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

.ps-card-title[b-7yn9ukdh54] {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 24px;
}

.ps-card-desc[b-7yn9ukdh54] {
    color: var(--text-faint);
    font-size: 12px;
    line-height: 18px;
}

.ps-ai[b-7yn9ukdh54] {
    position: relative;
    padding: 12px;
    border-radius: 8px;
    background: #202020;
    overflow: hidden;
}

.ps-video[b-7yn9ukdh54] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.35;
    pointer-events: none;
}

.ps-ai-body[b-7yn9ukdh54] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ps-url[b-7yn9ukdh54] {
    background: var(--color-grey-16);
}

.ps-or[b-7yn9ukdh54] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.ps-manual[b-7yn9ukdh54] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-panel);
}

.ps-manual-head[b-7yn9ukdh54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
}

.ps-chevron[b-7yn9ukdh54] {
    transform: rotate(90deg);
    transition: transform 0.15s;
}

.ps-chevron.open[b-7yn9ukdh54] {
    transform: rotate(-90deg);
}

.ps-label-hint[b-7yn9ukdh54] {
    color: var(--text-muted);
    font-weight: 400;
}

.ps-footer[b-7yn9ukdh54] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 0;
}

.ps-terms[b-7yn9ukdh54] {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

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

/* ═══ Analyzing (Figma 116:7366) ═══ */
.ps-analyzing[b-7yn9ukdh54] {
    position: relative;
    min-height: calc(var(--m-main-height) - 12px);   /* the bottom margin */
    margin: 0 20px 12px;
    border-radius: 24px;
    background: #121212;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-analyzing-body[b-7yn9ukdh54] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
}

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

.ps-analyzing-desc[b-7yn9ukdh54] {
    margin-top: -8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

/* ═══ Created (Figma 119:10005) ═══ */
.ps-created[b-7yn9ukdh54] {
    gap: 20px;
}

.ps-created-head[b-7yn9ukdh54] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-head-top[b-7yn9ukdh54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ps-back[b-7yn9ukdh54] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.ps-saving[b-7yn9ukdh54] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}

.ps-saving[b-7yn9ukdh54]  .ps-saved {
    color: var(--accent-dark);
}

.ps-meta[b-7yn9ukdh54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ps-date[b-7yn9ukdh54] {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.ps-fav[b-7yn9ukdh54] {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ps-fav img[b-7yn9ukdh54] {
    width: 20px;
    height: 20px;
}

.ps-actions[b-7yn9ukdh54] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.ps-tool[b-7yn9ukdh54] {
    width: 40px;
    height: 40px;
    background: var(--bg-elevated);
    color: var(--text-light);
}

.ps-warning[b-7yn9ukdh54] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 4px 10px 4px 4px;
    border-radius: 16px;
    background: #7a2e0e;
    color: #fec84b;
    font-size: 14px;
    font-weight: 500;
}

.ps-warning-badge[b-7yn9ukdh54] {
    padding: 2px 10px;
    border: 1px solid #fedf89;
    border-radius: 16px;
    background: #b54708;
    white-space: nowrap;
}

.ps-warning-text[b-7yn9ukdh54] {
    flex: 1;
    min-width: 0;
}

.ps-warning-close[b-7yn9ukdh54] {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.ps-divider[b-7yn9ukdh54] {
    height: 1px;
    background: var(--bg-elevated);
}
/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
/* Settings on the phone (MOBILE.md §6 slice 8; Figma AdStar-Mobile "Settings", 2078:4163).
   The page renders the desktop's tabs and panels inside .st-page, and the billing dialogs
   inline inside .st-view; everything here restyles them. The panels' and dialogs' own rules
   are global <style> blocks, so these scoped ones win by specificity. */

/* ── Tabs (2092:5167) ── */

.st-page[b-aj4r28m1lj]  .settings-tabs {
    gap: 12px;
    margin-bottom: 0;
    border: 0;
    background: var(--bg-overlay);
}

.st-page[b-aj4r28m1lj]  .settings-tab,
.st-page[b-aj4r28m1lj]  .settings-tab:hover:not(.active) {
    min-width: 0;
    padding: 8px 4px;
    gap: 6px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 18px;
}

.st-page[b-aj4r28m1lj]  .settings-tab.active {
    background: var(--border-subtle);
    color: var(--text-primary);
}

.st-page[b-aj4r28m1lj]  .settings-tab.active .m-icon {
    color: var(--accent-hover);
}

/* ── Blocks: one column, full-width actions (2092:5180 … 2092:5280) ── */

.st-page[b-aj4r28m1lj]  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.st-page[b-aj4r28m1lj]  .settings-block-full {
    grid-column: auto;
}

.st-page[b-aj4r28m1lj]  .settings-block-subtitle {
    color: var(--text-faint);
}

/* The "?" help tooltips never open on touch (MOBILE.md §8.4), and the frames draw none. */
.st-page[b-aj4r28m1lj]  .settings-block-top > .mud-tooltip-root {
    display: none;
}

.st-page[b-aj4r28m1lj]  .settings-saved-tag {
    background: var(--bg-elevated);
}

.st-page[b-aj4r28m1lj]  .settings-input {
    border-color: var(--border-hover);
}

.st-page[b-aj4r28m1lj]  .settings-input:focus {
    border-color: var(--accent);
}

.st-page[b-aj4r28m1lj]  .btn-outline-brand {
    color: var(--accent-active);
}

.st-page[b-aj4r28m1lj]  .btn-secondary {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
    color: var(--text-light);
}

.st-page[b-aj4r28m1lj]  .settings-submit,
.st-page[b-aj4r28m1lj]  .settings-buttons > button,
.st-page[b-aj4r28m1lj]  .settings-billing > button,
.st-page[b-aj4r28m1lj]  .settings-personal > button,
.st-page[b-aj4r28m1lj]  .plan-buttons > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
}

.st-page[b-aj4r28m1lj]  .settings-submit {
    align-self: stretch;
}

.st-page[b-aj4r28m1lj]  .settings-buttons {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 20px;
}

/* Registered logins: the linked service is the raised row, as drawn (the desktop has it the
   other way round). */
.st-page[b-aj4r28m1lj]  .settings-login-row,
.st-page[b-aj4r28m1lj]  .settings-passkey-row {
    border-color: var(--border-hover);
}

.st-page[b-aj4r28m1lj]  .settings-login-row {
    background: var(--bg-panel);
}

.st-page[b-aj4r28m1lj]  .settings-login-row.linked {
    background: var(--bg-elevated);
}

.st-page[b-aj4r28m1lj]  .settings-billing {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

.st-page[b-aj4r28m1lj]  .settings-card-display {
    align-self: flex-start;
    gap: 8px;
    padding: 10px 32px;
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}

/* Personal data: the text and the warning over Delete | Download. */
.st-page[b-aj4r28m1lj]  .settings-personal {
    flex-wrap: wrap;
    gap: 16px 20px;
}

.st-page[b-aj4r28m1lj]  .settings-personal-info {
    flex: 1 1 100%;
    order: -2;
}

.st-page[b-aj4r28m1lj]  .settings-personal-text {
    font-size: 14px;
    line-height: 20px;
}

.st-page[b-aj4r28m1lj]  .settings-personal > button {
    flex: 1;
}

.st-page[b-aj4r28m1lj]  .settings-personal-delete {
    order: -1;
}

.st-page[b-aj4r28m1lj]  .settings-warning-badge {
    display: flex;
}

.st-page[b-aj4r28m1lj]  .settings-warning-text {
    flex: 1;
}

/* ── Plan: the plan card (2092:5316) ── */

.st-page[b-aj4r28m1lj]  .plan-card-inner {
    flex-direction: column;
}

.st-page[b-aj4r28m1lj]  .plan-current {
    padding: 4px 20px 20px;
}

.st-page[b-aj4r28m1lj]  .plan-name {
    font-size: 18px;
    line-height: 28px;
}

.st-page[b-aj4r28m1lj]  .plan-name-sub {
    color: var(--text-faint);
}

.st-page[b-aj4r28m1lj]  .plan-row-label {
    width: 160px;
    flex-shrink: 0;
    color: var(--text-light);
}

.st-page[b-aj4r28m1lj]  .plan-row-value {
    min-width: 0;
}

.st-page[b-aj4r28m1lj]  .plan-row-wrap {
    flex-wrap: wrap;
}

.st-page[b-aj4r28m1lj]  .plan-buttons {
    flex-direction: column;
    align-items: stretch;
}

.st-page[b-aj4r28m1lj]  .plan-divider {
    width: auto;
    height: 1px;
}

.st-page[b-aj4r28m1lj]  .plan-features {
    padding: 16px 20px;
    gap: 12px;
}

.st-page[b-aj4r28m1lj]  .plan-features-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* The file's arrow points right: up while the list is open, down when it is folded. */
.st-page[b-aj4r28m1lj]  .plan-features-chevron {
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
}

.st-page[b-aj4r28m1lj]  .plan-features-chevron.open {
    transform: rotate(-90deg);
}

.st-page[b-aj4r28m1lj]  .plan-features-list {
    padding-bottom: 0;
}

.st-page[b-aj4r28m1lj]  .plan-feature {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-bright);
}

/* The Monthly / Yearly toggle, the comparison table and its dots are styled, for both
   shells, in Components/Controls/PlanComparison.razor. */

/* ── Usage (2092:5543): no card, two-line rows ── */

.st-page[b-aj4r28m1lj]  .usage-card {
    padding: 0;
    border: 0;
    background: none;
}

.st-page[b-aj4r28m1lj]  .usage-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.st-page[b-aj4r28m1lj]  .usage-period-chip {
    gap: 4px;
    padding: 0;
    border: 0;
    line-height: 20px;
}

.st-page[b-aj4r28m1lj]  .usage-totals {
    align-items: center;
    gap: 0;
    padding: 12px;
    border-color: var(--border-hover);
}

/* Two lines, as drawn: "Remaining / credits". */
.st-page[b-aj4r28m1lj]  .usage-total-label {
    line-height: normal;
    text-align: center;
}

.st-page[b-aj4r28m1lj]  .usage-total-label span {
    display: block;
}

.st-page[b-aj4r28m1lj]  .usage-total-value {
    flex-wrap: wrap;
    justify-content: center;
}

.st-page[b-aj4r28m1lj]  .usage-total-cap {
    font-size: 12px;
}

.st-page[b-aj4r28m1lj]  .usage-total-op {
    padding: 0 4px;
    color: var(--text-bright);
}

.st-page[b-aj4r28m1lj]  .usage-filter-tabs {
    display: flex;
    align-self: stretch;
    gap: 4px;
    border-color: var(--border-subtle);
    background: var(--bg-panel);
}

.st-page[b-aj4r28m1lj]  .usage-filter-tab {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: var(--bg-elevated);
    color: var(--text-light);
}

.st-page[b-aj4r28m1lj]  .usage-filter-tab.active {
    background: var(--border-hover);
    color: var(--text-primary);
}

.st-page[b-aj4r28m1lj]  .usage-table {
    border-color: var(--border-subtle);
}

/* Label and date on the first line, amount and its expiry on the second: the amount cell
   dissolves so its two spans take the second line's ends. */
.st-page[b-aj4r28m1lj]  .usage-row,
.st-page[b-aj4r28m1lj]  .usage-row.payments-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 12px;
    padding: 12px;
}

.st-page[b-aj4r28m1lj]  .usage-row + .usage-row {
    border-top-color: var(--border-subtle);
}

.st-page[b-aj4r28m1lj]  .usage-row-date {
    justify-self: end;
    color: var(--text-bright);
}

.st-page[b-aj4r28m1lj]  .usage-row-amount {
    display: contents;
    line-height: 20px;
}

.st-page[b-aj4r28m1lj]  .usage-row-hint {
    justify-self: end;
}

.st-page[b-aj4r28m1lj]  .amt-positive {
    color: var(--accent-hover);
}

/* A payment's second line: the money and its status, then the invoice button. */
.st-page[b-aj4r28m1lj]  .payments-row .usage-row-amount {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.st-page[b-aj4r28m1lj]  .usage-row-actions {
    justify-self: end;
}

.st-page[b-aj4r28m1lj]  .usage-actions {
    margin-top: 0;
}

/* The frame has no purchase button here; it is one tab away, on Plan. */
.st-page[b-aj4r28m1lj]  .usage-btn-primary {
    display: none;
}

.st-page[b-aj4r28m1lj]  .usage-btn-secondary {
    width: 100%;
    border-color: var(--border-hover);
    color: var(--text-light);
    line-height: 20px;
}

/* ══════════ In-page views (2092:5610 buy credits, 2092:5689 manage subscription,
   2092:5766 cancel reason, 2092:5745 final notice) ══════════
   A back tile, then the dialog's content without its frame: the page is the frame. */

.st-view[b-aj4r28m1lj] {
    gap: 20px;
    padding: 20px;
}

.st-view[b-aj4r28m1lj]  .bcd-container,
.st-view[b-aj4r28m1lj]  .msd-container,
.st-view[b-aj4r28m1lj]  .csrd-container,
.st-view[b-aj4r28m1lj]  .csfd-container {
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
}

.st-view[b-aj4r28m1lj]  .bcd-close,
.st-view[b-aj4r28m1lj]  .msd-close,
.st-view[b-aj4r28m1lj]  .csrd-close,
.st-view[b-aj4r28m1lj]  .csfd-close {
    display: none;
}

/* The line under the title sits 4px below it; the container's gap is 20px. */
.st-view[b-aj4r28m1lj]  .bcd-disclaimer,
.st-view[b-aj4r28m1lj]  .msd-section-label {
    margin-top: -16px;
    color: var(--text-bright);
    font-size: 14px;
    line-height: 20px;
}

/* Buy credits: one pack per row. */
.st-view[b-aj4r28m1lj]  .bcd-grid {
    grid-template-columns: minmax(0, 1fr);
}

.st-view[b-aj4r28m1lj]  .bcd-card {
    min-width: 0;
}

.st-view[b-aj4r28m1lj]  .bcd-card-top {
    background: var(--bg-overlay);
}

.st-view[b-aj4r28m1lj]  .bcd-bg-icon {
    top: 11px;
    right: -8px;
    opacity: 1;
}

.st-view[b-aj4r28m1lj]  .bcd-bonus-badge {
    background: var(--border-subtle);
    color: var(--accent-active);
}

.st-view[b-aj4r28m1lj]  .bcd-card-bottom {
    background: var(--bg-panel);
}

.st-view[b-aj4r28m1lj]  .bcd-purchase-btn {
    color: var(--accent-active);
}

/* Manage subscription. */
.st-view[b-aj4r28m1lj]  .msd-card,
.st-view[b-aj4r28m1lj]  .csrd-card,
.st-view[b-aj4r28m1lj]  .csfd-card {
    border-color: var(--bg-elevated);
    background: var(--bg-panel);
}

.st-view[b-aj4r28m1lj]  .msd-plan-name {
    font-size: 18px;
    line-height: 28px;
}

.st-view[b-aj4r28m1lj]  .msd-secondary-btn {
    width: 100%;
    border-color: var(--border-hover);
    background: var(--bg-elevated);
    color: var(--text-light);
    line-height: 20px;
}

/* Cancel reason and final notice: the frames draw the buttons inside the card, the dialogs
   have them under it, so the card loses its bottom edge and the button row continues it. */
.st-view[b-aj4r28m1lj]  .csrd-card,
.st-view[b-aj4r28m1lj]  .csfd-card {
    padding: 20px 20px 0;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.st-view[b-aj4r28m1lj]  .csrd-buttons,
.st-view[b-aj4r28m1lj]  .csfd-buttons {
    margin-top: -20px;
    padding: 20px;
    gap: 20px;
    border: 1px solid var(--bg-elevated);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--bg-panel);
}

.st-view[b-aj4r28m1lj]  .csrd-card {
    gap: 16px;
}

.st-view[b-aj4r28m1lj]  .csrd-option {
    color: var(--text-light);
    line-height: 24px;
}

/* The frame's radio: a 16px Gray/500 ring on the card color, lime with a dot when chosen. */
.st-view[b-aj4r28m1lj]  .csrd-option input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-panel);
    -webkit-appearance: none;
    appearance: none;
}

.st-view[b-aj4r28m1lj]  .csrd-option input[type="radio"]:checked {
    border-color: var(--accent);
    background: radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px);
}

.st-view[b-aj4r28m1lj]  .csrd-buttons button,
.st-view[b-aj4r28m1lj]  .csfd-confirm-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
}

.st-view[b-aj4r28m1lj]  .csrd-secondary-btn {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
    color: var(--text-light);
}

.st-view[b-aj4r28m1lj]  .csfd-warning {
    margin-bottom: 16px;
}

.st-view[b-aj4r28m1lj]  .csfd-warning img {
    width: 60px;
    height: 51px;
}

.st-view[b-aj4r28m1lj]  .csfd-buttons {
    padding-top: 16px;
}
/* /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);
    }
/* /Components/Pages/Support.razor.rz.scp.css */
.support-content[b-2vktwtd81g] {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100dvh - 100px);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 24px;
}

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

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

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

.support-content p[b-2vktwtd81g] {
    margin-bottom: 16px;
}

.support-content a[b-2vktwtd81g] {
    color: var(--text-primary);
    text-decoration: underline;
}
/* /Editor/CreativeEditor.razor.rz.scp.css */
.ced-root[b-se8apv860s] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background: var(--bg, #1a1a1a);
}

.ced-topbar[b-se8apv860s] {
    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-se8apv860s] {
    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-se8apv860s] {
    background: var(--hover, #252525);
}

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

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

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

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

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

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

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

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

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

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

.dfl-iframe[b-foa4ojg7wp] {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #000;
}
/* /Flow/FlowGallery.razor.rz.scp.css */
/* Template gallery — dark grid in the Explore page's idiom (outline buttons, lime
   accents), portrait cards because most templates produce vertical ads. */

.fg-root[b-xjsp64tyh6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 20px 24px;
    gap: 20px;
}

/* ── Toolbar: title · type tabs · filter · bookmarks · search ── */

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

.fg-title[b-xjsp64tyh6] {
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    margin-right: 8px;
}

.fg-tabs[b-xjsp64tyh6] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.fg-tab[b-xjsp64tyh6] {
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.fg-tab:hover[b-xjsp64tyh6] {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.fg-tab.active[b-xjsp64tyh6] {
    color: var(--text-primary);
    background: var(--bg-elevated);
    font-weight: 600;
}

.fg-iconbtn[b-xjsp64tyh6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.fg-iconbtn img[b-xjsp64tyh6] {
    width: 20px;
    height: 20px;
    opacity: 0.75;
}

.fg-iconbtn:hover[b-xjsp64tyh6] {
    border-color: var(--border-hover);
}

.fg-iconbtn:hover img[b-xjsp64tyh6],
.fg-iconbtn.active img[b-xjsp64tyh6] {
    opacity: 1;
}

.fg-iconbtn.active[b-xjsp64tyh6] {
    border-color: var(--accent);
}

.fg-iconbtn-count[b-xjsp64tyh6] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg-page);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

/* The search box is SearchField with Class="fg-search": its elements are rendered by the
   control, outside this page's CSS scope, hence ::deep under the page's own toolbar. */
.fg-toolbar[b-xjsp64tyh6]  .fg-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    width: 240px;
    padding: 0 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.fg-toolbar[b-xjsp64tyh6]  .fg-search:focus-within {
    border-color: var(--text-secondary);
}

.fg-toolbar[b-xjsp64tyh6]  .fg-search svg {
    width: 18px;
    height: 18px;
    color: var(--color-accent-olive);
    opacity: 0.6;
}

.fg-toolbar[b-xjsp64tyh6]  .fg-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
}

.fg-toolbar[b-xjsp64tyh6]  .fg-search input::placeholder {
    color: var(--text-muted);
}

/* ── Categories popup (anchored under the filter button) ── */

.fg-filter-wrap[b-xjsp64tyh6] {
    position: relative;
}

.fg-backdrop[b-xjsp64tyh6] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.fg-filters[b-xjsp64tyh6] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 380px;
    padding: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 24px 48px -12px var(--color-shadow-dark);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fg-filters-title[b-xjsp64tyh6] {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.fg-filters-group[b-xjsp64tyh6] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-top: 6px;
}

.fg-filters-chips[b-xjsp64tyh6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fg-chip[b-xjsp64tyh6] {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.fg-chip:hover[b-xjsp64tyh6] {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.fg-chip.active[b-xjsp64tyh6] {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--color-accent-active-rgb), 0.08);
}

.fg-filters-actions[b-xjsp64tyh6] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.fg-btn-secondary[b-xjsp64tyh6],
.fg-btn-primary[b-xjsp64tyh6] {
    flex: 1;
    height: 38px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fg-btn-secondary[b-xjsp64tyh6] {
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
}

.fg-btn-secondary:disabled[b-xjsp64tyh6] {
    opacity: 0.4;
    cursor: default;
}

.fg-btn-primary[b-xjsp64tyh6] {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--bg-page);
}

.fg-btn-primary:hover[b-xjsp64tyh6] {
    background: var(--accent-hover);
}

/* ── Grid ── */

.fg-scroll[b-xjsp64tyh6] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.fg-empty[b-xjsp64tyh6] {
    padding: 60px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.fg-grid[b-xjsp64tyh6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px 16px;
}

.fg-card[b-xjsp64tyh6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}

.fg-card-cover[b-xjsp64tyh6] {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.fg-card:hover .fg-card-cover[b-xjsp64tyh6] {
    transform: translateY(-2px);
}

.fg-card-cover img[b-xjsp64tyh6],
.fg-card-cover video[b-xjsp64tyh6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fg-card[b-xjsp64tyh6]  .fg-card-cover-empty {
    color: var(--text-muted);
    opacity: 0.35;
    font-size: 44px;
}

.fg-card-badge[b-xjsp64tyh6] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.fg-card-featured[b-xjsp64tyh6] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--accent-hover);
    color: var(--bg-page);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.fg-card-bookmark[b-xjsp64tyh6] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.fg-card-bookmark img[b-xjsp64tyh6] {
    width: 16px;
    height: 16px;
}

.fg-card:hover .fg-card-bookmark[b-xjsp64tyh6],
.fg-card-bookmark.on[b-xjsp64tyh6] {
    opacity: 1;
}

.fg-card-name[b-xjsp64tyh6] {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-card-meta[b-xjsp64tyh6] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}

.fg-card-meta span[b-xjsp64tyh6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fg-card-meta img[b-xjsp64tyh6] {
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

.fg-card-credits[b-xjsp64tyh6] {
    margin-left: auto;
    color: var(--accent);
    font-weight: 600;
}
/* /Flow/FlowProjectEditor.razor.rz.scp.css */
/* Full-screen editor host — same chrome as CreativeEditor.razor.css (scoped CSS
   can't be shared between components, so the few rules are mirrored here). */

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

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

.fped-back-btn[b-z3fh72iqxv] {
    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;
}

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

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

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

.fped-iframe[b-z3fh72iqxv] {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #000;
}
/* /Flow/Flows.razor.rz.scp.css */
/* Flow cards — PORTRAIT, sized to sit next to CreatePanel (200x360 there too).
   Most flows produce vertical (9:16) ads, so the cover is a tall full-bleed area
   with the name/date on a footer strip below it. */

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

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

/* Cover area: everything the footer doesn't take. A 9:16 result fills it with a
   small top/bottom crop; wider results crop at the sides instead. */
.dflows-card-thumb[b-bj0hektrfx] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-default);
}

.dflows-card-thumb img[b-bj0hektrfx],
.dflows-card-thumb video[b-bj0hektrfx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dflows-card[b-bj0hektrfx]  .dflows-card-thumb-empty {
    color: var(--text-muted);
    opacity: 0.35;
    font-size: 44px;
}

/* The "…" action menu overlays the cover — a scrim keeps it readable over bright
   imagery. It rides on the button itself, which MudBlazor already draws as a circle:
   the wrapper wraps the menu's own activator div, whose box is taller than the button.
   The whole thing fades in, so nothing shows until the card is hovered. */
.dflows-card-actions[b-bj0hektrfx] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    opacity: 0;
    transition: opacity 0.15s;
}

.dflows-card:hover .dflows-card-actions[b-bj0hektrfx] {
    opacity: 1;
}

.dflows-card[b-bj0hektrfx]  .dflows-card-menu {
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
}

/* Bookmark toggle — top-left twin of the "…" menu. Hidden until hover unless the
   flow is bookmarked, so a filled bookmark is always visible on the card. */
.dflows-card-bookmark[b-bj0hektrfx] {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    opacity: 0;
    transition: opacity 0.15s;
}

.dflows-card:hover .dflows-card-bookmark[b-bj0hektrfx],
.dflows-card-bookmark-on[b-bj0hektrfx] {
    opacity: 1;
}

/* Toolbar "Bookmarked" toggle in its on state. */
.dflows-toolbar-btn-active[b-bj0hektrfx] {
    border-color: var(--accent-dark);
}

.dflows-card-foot[b-bj0hektrfx] {
    flex: none;
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--border-default);
}

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

.dflows-card-date[b-bj0hektrfx] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
}
/* /Flow/FlowTemplateView.razor.rz.scp.css */
/* Full-screen read-only iframe host — same chrome as Flow.razor.css (scoped CSS, hence the copy). */

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

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

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

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

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

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

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

.dfl-iframe[b-r5m1zv21vh] {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #000;
}
/* /Library/MyAssets.razor.rz.scp.css */
/* My Assets — developer listing of the user asset library (LIBRARY.md).
   PagePanel is a fixed-height flex column; .mya-root becomes the scroll container
   (same trick as Flows.razor). */

.mya-root[b-f5scm3orbl] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Tabs ---- */

.mya-tabs[b-f5scm3orbl] {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    padding-bottom: 10px;
}

.mya-tab[b-f5scm3orbl] {
    border: none;
    background: none;
    color: var(--text-muted, #9aa1a9);
    font-size: 15px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.mya-tab:hover[b-f5scm3orbl] {
    color: var(--text-primary, #fff);
}

.mya-tab.active[b-f5scm3orbl] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
}

.mya-tab-count[b-f5scm3orbl] {
    font-weight: 400;
    opacity: 0.6;
    margin-left: 4px;
}

/* ---- Toolbar + folder chips ---- */

.mya-toolbar[b-f5scm3orbl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mya-btn[b-f5scm3orbl] {
    border: 1px solid var(--border-color, #2a2a2a);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #e8eaed);
    font-size: 14px;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.mya-btn:hover[b-f5scm3orbl] {
    background: rgba(255, 255, 255, 0.09);
}

.mya-btn-primary[b-f5scm3orbl] {
    font-weight: 600;
}

.mya-input[b-f5scm3orbl] {
    border: 1px solid var(--border-color, #2a2a2a);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary, #e8eaed);
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 8px;
    outline: none;
    width: 220px;
}

.mya-chips[b-f5scm3orbl] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mya-chip[b-f5scm3orbl] {
    border: 1px solid var(--border-color, #2a2a2a);
    background: none;
    color: var(--text-muted, #9aa1a9);
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.mya-chip:hover[b-f5scm3orbl] {
    color: var(--text-primary, #fff);
}

.mya-chip.active[b-f5scm3orbl] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
    border-color: var(--text-muted, #9aa1a9);
}

.mya-folderbar[b-f5scm3orbl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted, #9aa1a9);
}

.mya-folderbar button[b-f5scm3orbl] {
    border: none;
    background: none;
    color: var(--text-muted, #9aa1a9);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

.mya-folderbar button:hover[b-f5scm3orbl] {
    color: var(--text-primary, #fff);
}

.mya-folderbar .mya-btn[b-f5scm3orbl] {
    padding: 4px 10px;
    border: 1px solid var(--border-color, #2a2a2a);
}

.mya-danger:hover[b-f5scm3orbl] {
    color: #f87171 !important;
}

.mya-uploadrow[b-f5scm3orbl] {
    font-size: 13px;
    color: var(--text-muted, #9aa1a9);
    animation: mya-pulse-b-f5scm3orbl 1.2s ease-in-out infinite;
}

@keyframes mya-pulse-b-f5scm3orbl {
    50% {
        opacity: 0.45;
    }
}

/* ---- Media / references grid ---- */

.mya-grid[b-f5scm3orbl] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mya-card[b-f5scm3orbl] {
    width: 190px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mya-thumb[b-f5scm3orbl] {
    position: relative;
    width: 190px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mya-thumb img[b-f5scm3orbl],
.mya-thumb video[b-f5scm3orbl] {
    width: 100%;
    height: 100%;
    /* contain, not cover: off-aspect thumbs letterbox on the card's dark
       background instead of being cropped */
    object-fit: contain;
}

.mya-thumb-glyph[b-f5scm3orbl] {
    font-size: 34px;
    color: var(--text-muted, #9aa1a9);
    opacity: 0.7;
}

.mya-card-actions[b-f5scm3orbl] {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.12s;
}

.mya-card:hover .mya-card-actions[b-f5scm3orbl] {
    opacity: 1;
}

/* keep the ⋯ readable over bright thumbnails */
[b-f5scm3orbl] .mya-card-menu {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
}

.mya-badge[b-f5scm3orbl] {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #cbd5a0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    padding: 2px 6px;
}

.mya-card-name[b-f5scm3orbl] {
    font-size: 13px;
    color: var(--text-primary, #e8eaed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mya-card-meta[b-f5scm3orbl] {
    font-size: 12px;
    color: var(--text-muted, #9aa1a9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Fonts rows ---- */

.mya-rows[b-f5scm3orbl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 720px;
}

.mya-row[b-f5scm3orbl] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 10px;
    padding: 10px 14px;
}

.mya-row-main[b-f5scm3orbl] {
    flex: 1;
    min-width: 0;
}

.mya-row-name[b-f5scm3orbl] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #e8eaed);
}

.mya-row-meta[b-f5scm3orbl] {
    font-size: 12px;
    color: var(--text-muted, #9aa1a9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mya-empty[b-f5scm3orbl] {
    color: var(--text-muted, #9aa1a9);
    font-size: 14px;
    padding: 24px 4px;
}
/* /Mobile/BottomSheet.razor.rz.scp.css */
/* Figma 10:5164: Gray/800 sheet, 38px top radius, 36x5 Gray/600 grabber, 20px side padding. */

/* Not in the layout at all while closed. A card list renders one sheet per card (its "…" menu),
   and once the document became the scroller (MOBILE.md §3.11) 55 always-present fixed layers
   made iOS WebKit kill the tab on the first scroll. The slide still runs both ways through
   display transitions (allow-discrete here, @starting-style in app.css) on WebKit 17.5+ and
   Chrome 117+; older browsers show and hide the sheet without the slide. */
.bs-root[b-tfflvjg5hj] {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: none;
    transition: display 0.25s allow-discrete;
}

.bs-root.bs-open[b-tfflvjg5hj] {
    display: block;
}

/* The document scrolls behind the sheet (MOBILE.md §3.11): a drag on the backdrop must not
   move it, and a list inside the sheet that reaches its end must not hand the scroll on. */
.bs-backdrop[b-tfflvjg5hj] {
    position: absolute;
    inset: 0;
    touch-action: none;
    background: rgba(var(--color-black-rgb), 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.bs-open .bs-backdrop[b-tfflvjg5hj] {
    opacity: 1;
}

/* touch-action: none, like the backdrop: a touch on the sheet must never scroll the document
   behind it. The sheet's own scrolling body is the nearest scroller for touches inside it, so
   this does not reach those; mobileShell.sheetDrag swallows what that body cannot scroll. */
.bs-sheet[b-tfflvjg5hj] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85dvh;
    touch-action: none;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-radius: 38px 38px 0 0;
    box-shadow: 0 15px 75px rgba(var(--color-black-rgb), 0.18);
    padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

/* `none`, not translateY(0): a transformed ancestor would become the containing block of
   any position:fixed descendant, e.g. a DropdownMenu's own sheet opened from inside this one. */
.bs-open .bs-sheet[b-tfflvjg5hj] {
    transform: none;
}

.bs-grabber-row[b-tfflvjg5hj] {
    display: flex;
    justify-content: center;
    padding: 10px 0 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.bs-grabber[b-tfflvjg5hj] {
    width: 36px;
    height: 5px;
    border-radius: 2.5px;
    background: var(--color-grey-40);
}

.bs-title[b-tfflvjg5hj] {
    flex-shrink: 0;
    margin-bottom: 16px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.bs-body[b-tfflvjg5hj] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Drawer (Figma 89:5409 / 89:5410 "Boards"): a full-height Gray/800 panel on the left edge, 320px
   of the 390px frame (a narrower phone keeps a strip of backdrop to tap), 32px padding, square
   corners, over a 70% overlay. Child combinators: a sheet opened from inside the drawer (a board's
   "…" menu) is a descendant of this root and stays a bottom sheet. */
.bs-drawer > .bs-backdrop[b-tfflvjg5hj] {
    background: rgba(var(--color-black-rgb), 0.7);
}

.bs-drawer > .bs-sheet[b-tfflvjg5hj] {
    top: 0;
    right: auto;
    width: min(320px, calc(100% - 48px));
    max-height: none;
    border-radius: 0;
    padding: calc(32px + env(safe-area-inset-top, 0px)) 32px calc(20px + env(safe-area-inset-bottom, 0px));
}

.bs-drawer:not(.bs-open) > .bs-sheet[b-tfflvjg5hj] {
    transform: translateX(-100%);
}
/* /Mobile/MobileLayout.razor.rz.scp.css */
/* Mobile shell (MOBILE.md). Measurements from the Figma "Mobile base" frames: 390px wide,
   60px top bar, 60px tab bar, 20px side gutters. Colors map onto the app.css tokens; the two
   #2B2B2B chips (Gray/775) have no token and stay raw. */

/* The document scrolls, not the shell (MOBILE.md §3.11): phone browsers collapse their
   toolbars only on document scroll. The shell is at least one viewport tall so the tab bar
   reaches the bottom of a short page; the two bars stick to the viewport edges and the page
   slides under them. The variables let pages size against the bars (the wizard's sticky
   stepper and footer, a screen-filling sub-view) without knowing which bars are shown. */
.m-shell[b-jtvh0s1v87] {
    --m-top-height: 60px;
    --m-tabs-height: calc(60px + env(safe-area-inset-bottom, 0px));
    --m-main-height: calc(100dvh - var(--m-top-height) - var(--m-tabs-height));
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg-page);
    color: var(--text-primary);
}

.m-shell.m-no-top[b-jtvh0s1v87] {
    --m-top-height: 0px;
}

/* A page that owns its scrolling (the chat: composer pinned above the keyboard, messages
   scrolling in their column) gets the shell as the viewport and .m-main as the scroller;
   MobileShell.FillViewport() sets it. The browser toolbars stay put on such a page. */
.m-shell.m-fixed[b-jtvh0s1v87] {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.m-shell.m-fixed .m-main[b-jtvh0s1v87] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════ Top bar ═══════════ */
.m-top[b-jtvh0s1v87] {
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    background: var(--bg-page);
}

.m-top-left[b-jtvh0s1v87],
.m-top-right[b-jtvh0s1v87] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.m-top-right[b-jtvh0s1v87] {
    justify-content: flex-end;
    gap: 12px;
}

.m-avatar[b-jtvh0s1v87] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.m-avatar-img[b-jtvh0s1v87] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.m-avatar-mark[b-jtvh0s1v87] {
    width: 16px;
    height: 20px;
    display: block;
}

.m-top-logo[b-jtvh0s1v87] {
    display: flex;
    flex-shrink: 0;
}

.m-top-logo img[b-jtvh0s1v87] {
    height: 24px;
    width: auto;
    display: block;
}

.m-bell[b-jtvh0s1v87] {
    position: relative;
    display: flex;
    color: var(--text-light);
}

.m-dot[b-jtvh0s1v87] {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--notification-dot);
}

/* "Upgrade" / "Sign In" chip: Gray/775 fill, Brand/900 border, 12px text. */
.m-cta[b-jtvh0s1v87] {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #2B2B2B;
    border: 1px solid var(--accent-dark);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
}

.m-cta .m-icon[b-jtvh0s1v87] {
    color: var(--accent-active);
}

/* Credits chip for subscribers. */
.m-credits[b-jtvh0s1v87] {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #2B2B2B;
    color: var(--text-bright);
    font-size: 12px;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
}

.m-credits .m-icon[b-jtvh0s1v87] {
    color: var(--accent-hover);
}

/* Titled variant (Figma 156:4018): back arrow pinned left (absolute against the sticky bar),
   title centered. */
.m-top-titled[b-jtvh0s1v87] {
    justify-content: center;
}

.m-top-back[b-jtvh0s1v87] {
    position: absolute;
    left: 20px;
    top: 18px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
}

.m-top-title[b-jtvh0s1v87] {
    flex: 1;
    padding: 0 32px;
    text-align: center;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════ Page area ═══════════ */
.m-main[b-jtvh0s1v87] {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* ═══════════ Tab bar ═══════════ */
/* Sticks to the bottom of the viewport while the page scrolls under it. The frame's 50% black
   is 85% here so the labels stay legible over content, and there is no backdrop blur on purpose:
   WebKit re-renders a blur from the content beneath on every frame and crashed the tab on the
   Brands list (iPhone, 2026-09-27). */
.m-tabs[b-jtvh0s1v87] {
    position: sticky;
    bottom: 0;
    z-index: 100;
    flex-shrink: 0;
    height: var(--m-tabs-height);
    padding: 0 28px env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--color-black-rgb), 0.85);
}

.m-tab[b-jtvh0s1v87] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.m-tab-label[b-jtvh0s1v87] {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.m-tab.active[b-jtvh0s1v87] {
    color: var(--accent-active);
}

.m-tab.active .m-tab-label[b-jtvh0s1v87] {
    color: var(--text-primary);
}

/* ═══════════ More menu (Figma 10:5149) ═══════════ */
.m-more-backdrop[b-jtvh0s1v87] {
    position: fixed;
    inset: 0;
    z-index: 1250;
    touch-action: none;   /* the document scrolls behind it (§3.11); a drag here must not move it */
}

.m-more[b-jtvh0s1v87] {
    position: fixed;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 1251;
    touch-action: none;   /* nor must a drag on the menu itself */
    /* Figma's width is the minimum; a longer label ("ChatGPT & Claude") widens the menu leftwards. */
    width: max-content;
    min-width: 143px;
    max-width: calc(100vw - 24px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 24px 48px -12px var(--color-shadow-dark);
}

/* justify-content: Sign out is a <button>, and MudBlazor's global button rule centers one. */
.m-more-item[b-jtvh0s1v87] {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--text-light);
    font-family: inherit;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.m-more-item:hover[b-jtvh0s1v87],
.m-more-item:active[b-jtvh0s1v87] {
    background: rgba(var(--color-white-rgb), 0.05);
}

.m-more-divider[b-jtvh0s1v87] {
    height: 1px;
    margin: 0 4px;
    background: var(--border-default);
}

/* ═══════════ Brand sheet (Figma 10:5164) ═══════════ */
.m-brand-search[b-jtvh0s1v87] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
}

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

.m-brand-search input[b-jtvh0s1v87]::placeholder {
    color: var(--text-muted);
}

.m-brand-list[b-jtvh0s1v87] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    max-height: 50dvh;
    overflow-y: auto;
    overscroll-behavior: contain;   /* reaching the end must not scroll the page behind the sheet */
}

.m-brand-row[b-jtvh0s1v87] {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 52px;
    width: 100%;
    flex-shrink: 0;
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.m-brand-row.selected[b-jtvh0s1v87] {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.m-brand-logo[b-jtvh0s1v87] {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.m-brand-logo img[b-jtvh0s1v87] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.m-brand-info[b-jtvh0s1v87] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.m-brand-name[b-jtvh0s1v87] {
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-brand-metrics[b-jtvh0s1v87] {
    display: flex;
    gap: 12px;
    color: var(--color-grey-40);
    font-size: 12px;
    line-height: 18px;
}

.selected .m-brand-metrics[b-jtvh0s1v87] {
    color: var(--text-secondary);
}

.m-brand-metric[b-jtvh0s1v87] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.m-brand-metric .m-icon[b-jtvh0s1v87] {
    width: 16px;
    height: 16px;
}

.m-brand-check[b-jtvh0s1v87] {
    color: var(--accent-hover);
}

.m-brand-create[b-jtvh0s1v87] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--accent-active);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

/* ═══════════ Desktop pages hosted in the shell ═══════════
   Until a page has a mobile twin its desktop markup renders inside .m-main. The shell owns
   the header (brand, credits, notifications) so the page's TopBlock goes, and the panel
   loses its desktop margins, radius and 100dvh height so the page scrolls the document like
   the twins do (§3.11). */
/* !important: TopBlock's root sets display inline, which outranks any selector. */
[b-jtvh0s1v87] .m-main .topblock {
    display: none !important;
}

[b-jtvh0s1v87] .m-main .page-panel {
    margin: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: var(--m-main-height);
}

/* The legal text's inner scroll box is sized from 100dvh for the desktop; on the phone it would
   keep the browser toolbars pinned, so it grows and the document scrolls. Goes with that
   page's twin. */
[b-jtvh0s1v87] .m-main .legal-content {
    height: auto !important;
    max-height: none !important;
}

/* ═══════════ Keyboard ═══════════
   mobileShell.js marks the shell while a keyboard is up (an attribute, not a class: Blazor
   renders the class attribute and would drop one it does not know). The tab bar goes (Figma
   10:1639 draws it hidden) so a composer sits on the keyboard, and whatever a page pins above
   the tab bar follows it down. */
.m-shell[data-keyboard][b-jtvh0s1v87] {
    --m-tabs-height: 0px;
}

.m-shell[data-keyboard] .m-tabs[b-jtvh0s1v87] {
    display: none;
}