/* /Components/SiteCard.razor.rz.scp.css */
/* Site card - polished v2 */

.site-card[b-kisrrwzjsc] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-med), border-color var(--transition-med);
}
.site-card:hover[b-kisrrwzjsc] {
    box-shadow: var(--shadow-md);
    border-color: var(--border-mid);
}

.site-preview[b-kisrrwzjsc] {
    height: 180px;
    background: var(--bg-inset);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.preview-browser[b-kisrrwzjsc] {
    width: 86%;
    height: 150px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.browser-bar[b-kisrrwzjsc] {
    height: 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    padding: 0 7px;
    gap: 4px;
}
.browser-dot[b-kisrrwzjsc] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border-mid);
}
.browser-content[b-kisrrwzjsc] {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fake-line[b-kisrrwzjsc] { height: 3px; border-radius: 2px; background: var(--border-light); }
.fake-line.dark[b-kisrrwzjsc] { background: var(--border-mid); }
.fake-line.accent[b-kisrrwzjsc] { background: var(--teal-mid); width: 40%; }

/* Live preview: iframe of the actual home page, scaled down to fit the
   container. The iframe is rendered at 4x the container's actual width
   (so the page sees a desktop-ish viewport) and transformed to 0.25 so
   the visible footprint matches the container exactly regardless of
   dashboard column width. Vertical overflow is clipped by the parent. */
.browser-content-live[b-kisrrwzjsc] {
    position: relative;
    width: 100%;
    height: calc(100% - 14px);
    overflow: hidden;
    background: #fff;
    padding: 0;
}
.site-preview-frame[b-kisrrwzjsc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 400%;
    border: 0;
    transform: scale(0.25);
    transform-origin: top left;
    pointer-events: none;
    background: #fff;
}

.status-badge[b-kisrrwzjsc] {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}
.status-live[b-kisrrwzjsc] { background: var(--teal-light); color: var(--teal-dark); }
.status-pending[b-kisrrwzjsc] { background: var(--warn-bg); color: var(--warn-text); }
.status-suspended[b-kisrrwzjsc] { background: var(--error-bg); color: var(--error-text); }

.site-body[b-kisrrwzjsc] { padding: 16px 18px; }
.site-name[b-kisrrwzjsc] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-primary);
}
.site-url[b-kisrrwzjsc] {
    font-size: 12px;
    color: var(--teal);
    margin-bottom: 12px;
}
.site-meta[b-kisrrwzjsc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.site-date[b-kisrrwzjsc] { font-size: 11px; color: var(--text-tertiary); }
.site-actions[b-kisrrwzjsc] { display: flex; gap: 8px; flex-wrap: wrap; }

.site-reason[b-kisrrwzjsc] {
    margin-top: 12px;
    padding: 8px 12px;
    background: #fef8f7;
    border-radius: 6px;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.action-btn[b-kisrrwzjsc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 6px 14px;
    line-height: 1;
    box-sizing: border-box;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-sans);
}
/* Icon-only action buttons (inbox, cloud, clone, trash) get a square
   footprint so they don't visually shrink next to "Preview" / "Edit". */
.action-btn:has(> i:only-child)[b-kisrrwzjsc] {
    padding: 6px 8px;
    min-width: 30px;
}
.action-btn:hover[b-kisrrwzjsc] {
    background: var(--bg-secondary);
    border-color: var(--border-mid);
}
.action-btn.edit[b-kisrrwzjsc] {
    color: #ffffff;
    border-color: var(--teal);
    background: var(--teal);
}
.action-btn.edit:hover[b-kisrrwzjsc] {
    background: var(--teal-dark);
}
.action-btn.disabled[b-kisrrwzjsc] {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 640px) {
    .action-btn[b-kisrrwzjsc] { padding: 8px 14px; font-size: 13px; }
    .site-actions[b-kisrrwzjsc] { gap: 10px; }
}
/* /Layout/AppLayout.razor.rz.scp.css */
/* Authenticated app shell - desktop sidebar + mobile flyout */

/* The sidebar is position:fixed (see app.css), so we no longer need grid to
   reserve a column for it. Simple block layout with an explicit margin on
   .main gives us the 260px offset and works on every browser without any
   chance of the grid track collapsing when its only child is out of flow. */
.shell[b-rlnejq5mx6] {
    min-height: 100vh;
    background: var(--bg-secondary);
    position: relative;
}

.main[b-rlnejq5mx6] {
    margin-left: 260px;
    padding: 32px 40px;
    overflow-x: auto;
    max-width: 1200px;
}

/* Mobile hamburger - hidden on desktop */
.mobile-hamburger[b-rlnejq5mx6] {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: #111113;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background 120ms ease;
}
.mobile-hamburger:hover[b-rlnejq5mx6] { background: #222228; }

/* Mobile overlay backdrop */
.mobile-overlay[b-rlnejq5mx6] {
    display: none;
}

@media (max-width: 900px) {
    /* Sidebar becomes a slide-in flyout (see app.css .sidebar media query);
       main content gets its full width back. */
    .main[b-rlnejq5mx6] {
        margin-left: 0;
        padding: 72px 20px 24px;
    }

    .mobile-hamburger[b-rlnejq5mx6] {
        display: flex;
    }

    .mobile-overlay[b-rlnejq5mx6] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
    }
}

@media (max-width: 480px) {
    .main[b-rlnejq5mx6] { padding: 68px 14px 16px; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Marketing layout - sticky nav + footer */

.nav[b-64fy5oizaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px;
    border-bottom: 1px solid var(--border-light);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}
.logo[b-64fy5oizaf] {
    font-family: var(--font-logo);
    font-size: 30px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.06em;
    text-decoration: none;
}
.logo[b-64fy5oizaf]  span { color: var(--teal); }

/* Hamburger - hidden on desktop */
.nav-hamburger[b-64fy5oizaf] {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 6px;
}

.nav-links[b-64fy5oizaf] {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-links a[b-64fy5oizaf] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.nav-links a:hover[b-64fy5oizaf] { color: var(--text-primary) !important; }
.nav-links .btn-primary[b-64fy5oizaf] { color: #ffffff !important; text-decoration: none; }
.nav-links .btn-primary:hover[b-64fy5oizaf] { color: #ffffff !important; }

/* Overlay backdrop */
.nav-overlay[b-64fy5oizaf] { display: none; }

main[b-64fy5oizaf] {
    min-height: calc(100vh - 130px);
}

.footer[b-64fy5oizaf] {
    background: #0c0c0e;
    padding: 28px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-left[b-64fy5oizaf] {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}
.footer-links[b-64fy5oizaf] {
    display: flex;
    gap: 24px;
}
.footer-links a[b-64fy5oizaf] {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-links a:hover[b-64fy5oizaf] { color: #ffffff !important; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .nav[b-64fy5oizaf] { padding: 14px 20px; }

    .nav-hamburger[b-64fy5oizaf] { display: block; }

    .nav-links[b-64fy5oizaf] {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-light);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        box-shadow: var(--shadow-lg);
        z-index: 99;
    }
    .nav-links.nav-links-open[b-64fy5oizaf] { display: flex; }

    .nav-links a[b-64fy5oizaf] {
        padding: 14px 24px;
        font-size: 15px;
        border-bottom: 1px solid var(--border-light);
    }
    .nav-links a:last-child[b-64fy5oizaf] { border-bottom: none; }

    .nav-links .btn-primary[b-64fy5oizaf] {
        margin: 12px 20px;
        text-align: center;
        border-radius: var(--radius-md);
    }

    .nav-overlay[b-64fy5oizaf] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 98;
        background: rgba(0,0,0,0.3);
    }

    .footer[b-64fy5oizaf] {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-links[b-64fy5oizaf] { flex-wrap: wrap; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Sidebar styles moved to app.css to avoid Blazor scoped CSS caching issues.
   This file is intentionally empty. */
/* /Pages/Dashboard.razor.rz.scp.css */
/* Dashboard - polished v2 */

.add-glyph[b-0miu6egxu4] { font-size: 15px; line-height: 1; }

.plan-banner[b-0miu6egxu4] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: var(--shadow-sm);
}
.plan-banner-text[b-0miu6egxu4] {
    font-size: 13px;
    color: var(--text-secondary);
}
.plan-banner-text strong[b-0miu6egxu4] { color: var(--text-primary); font-weight: 600; }
.plan-banner-link[b-0miu6egxu4] {
    font-size: 12px;
    color: var(--teal);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--teal);
    border-radius: var(--radius-md);
    padding: 5px 14px;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.plan-banner-link:hover[b-0miu6egxu4] {
    background: var(--teal);
    color: #ffffff;
}

/* metrics + sites-label styles moved to app.css */

.sites-grid[b-0miu6egxu4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

[b-0miu6egxu4] .sites-pagination {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 0 4px;
    color: var(--text-secondary);
    font-size: 13px;
}
[b-0miu6egxu4] .sites-pagination button {
    padding: 6px 12px;
}
[b-0miu6egxu4] .sites-pagination button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.empty-card[b-0miu6egxu4] {
    background: var(--bg-primary);
    border: 1.5px dashed var(--border-mid);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 10px;
    cursor: pointer;
    min-height: 196px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
}
.empty-card:hover[b-0miu6egxu4] {
    background: var(--bg-secondary);
    border-color: var(--teal-mid);
}
.empty-icon[b-0miu6egxu4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--teal);
    line-height: 1;
}
.empty-label[b-0miu6egxu4] { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.empty-sub[b-0miu6egxu4] { font-size: 12px; color: var(--text-tertiary); }

.empty-state[b-0miu6egxu4], .error-state[b-0miu6egxu4] {
    grid-column: 1 / -1;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    box-shadow: var(--shadow-card);
}
.error-state[b-0miu6egxu4] {
    background: var(--warn-bg);
    border-color: var(--warn-border);
    color: var(--warn-text);
}
.error-hint[b-0miu6egxu4] { font-size: 12px; margin-top: 8px; opacity: .8; }
.error-state code[b-0miu6egxu4], .error-hint code[b-0miu6egxu4] {
    background: rgba(0,0,0,0.06);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 12px;
}

@media (max-width: 1100px) {
    .sites-grid[b-0miu6egxu4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .sites-grid[b-0miu6egxu4] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .plan-banner[b-0miu6egxu4] { padding: 12px 16px; }
}
/* /Pages/Editor.razor.rz.scp.css */
/* Editor - polished v2 */

.editor-mobile-warning[b-uvjn7o4lwp] {
    display: none;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Grid the topbar into two rows: page-meta (left) + AI actions (right) on
   row one, formatting toolbar gets row two to itself so the format buttons
   aren't crammed in between the page picker and the AI buttons. */
.editor-topbar[b-uvjn7o4lwp] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "meta actions"
        "toolbar toolbar";
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    gap: 10px 14px;
    box-shadow: var(--shadow-card);
}
.editor-meta[b-uvjn7o4lwp]    { grid-area: meta; }
.editor-actions[b-uvjn7o4lwp] { grid-area: actions; }
.editor-toolbar[b-uvjn7o4lwp] { grid-area: toolbar; }
.editor-meta[b-uvjn7o4lwp] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}
.save-indicator[b-uvjn7o4lwp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 13px;
    color: var(--text-tertiary);
    background: transparent;
    transition: all var(--transition-fast);
}
.save-indicator.saved[b-uvjn7o4lwp] { color: var(--teal-dark); background: var(--teal-light); }
.save-indicator.saving[b-uvjn7o4lwp] { color: var(--text-secondary); }
.save-indicator.error[b-uvjn7o4lwp] { color: var(--warn-text); background: var(--warn-bg); }
.back-link[b-uvjn7o4lwp] {
    font-size: 12px;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.back-link:hover[b-uvjn7o4lwp] { color: var(--text-primary); }
.editor-title[b-uvjn7o4lwp] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.editor-actions[b-uvjn7o4lwp] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* AI action buttons in the right toolbar - subtle teal accent so they stand
   out from the formatting buttons and read as "magic features" without being
   loud. flex-shrink:0 keeps them visible when the topbar gets narrow. */
.ai-action-btn[b-uvjn7o4lwp] {
    flex-shrink: 0;
    color: var(--teal-dark, #085041);
}
.ai-action-btn:hover:not(:disabled)[b-uvjn7o4lwp] {
    background: var(--teal-light, #E1F5EE);
    color: var(--teal-dark, #085041);
}

.editor-canvas[b-uvjn7o4lwp] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    height: calc(100vh - 160px);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-frame[b-uvjn7o4lwp] {
    display: block;
    width: 100%;
    height: calc(100vh - 160px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-md);
    transition: width 0.2s ease, max-width 0.2s ease;
}

.editor-frame.editor-frame-mobile[b-uvjn7o4lwp] {
    width: 390px;
    max-width: 390px;
    margin: 0 auto;
    box-shadow: 0 0 0 6px #1f2937, 0 0 0 8px #374151, var(--shadow-md);
    border-radius: 28px;
}

.tb-viewmode[b-uvjn7o4lwp] {
    display: inline-flex;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: var(--radius-md, 6px);
    padding: 2px;
    gap: 2px;
}
.tb-viewmode .tb-btn[b-uvjn7o4lwp] {
    background: transparent;
    border: none;
}
.tb-viewmode .tb-btn.active[b-uvjn7o4lwp] {
    background: var(--bg-primary, #ffffff);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.placeholder[b-uvjn7o4lwp] {
    text-align: center;
    color: var(--text-secondary);
}
.placeholder-mark[b-uvjn7o4lwp] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -.02em;
    margin-bottom: 12px;
}
.placeholder-mark span[b-uvjn7o4lwp] { color: var(--teal); }
.placeholder-line[b-uvjn7o4lwp] { font-size: 14px; margin-bottom: 6px; }
.placeholder-sub[b-uvjn7o4lwp] { font-size: 12px; color: var(--text-tertiary); }
.placeholder-sub code[b-uvjn7o4lwp] {
    background: var(--bg-inset);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
}

@media (max-width: 900px) {
    .editor-mobile-warning[b-uvjn7o4lwp] { display: block; }
    .editor-topbar[b-uvjn7o4lwp] { padding: 12px 14px; }
    .editor-meta[b-uvjn7o4lwp] { gap: 10px; }
    .editor-title[b-uvjn7o4lwp] { font-size: 13px; }
    .editor-actions[b-uvjn7o4lwp] {
        width: 100%;
        gap: 8px;
    }
    .editor-actions .btn-primary[b-uvjn7o4lwp],
    .editor-actions .btn-outline[b-uvjn7o4lwp] {
        flex: 1;
        justify-content: center;
    }
    .editor-canvas[b-uvjn7o4lwp] { height: calc(100vh - 240px); min-height: 320px; }
}

@media (max-width: 480px) {
    .editor-topbar[b-uvjn7o4lwp] { padding: 10px 12px; }
    .save-indicator[b-uvjn7o4lwp] { font-size: 10px; padding: 2px 6px; }
}

/* ===== Editor toolbar (formatting controls) =====
   Lives on its own grid row now (full-width), so the buttons get to spread
   across the bar with a top border that visually separates them from the
   page-meta + AI-action row above. */
.editor-toolbar[b-uvjn7o4lwp] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}

.tb-btn[b-uvjn7o4lwp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s;
    gap: 6px;
}
.tb-btn:hover:not(:disabled)[b-uvjn7o4lwp] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.tb-btn.active[b-uvjn7o4lwp] {
    background: var(--teal-light);
    color: var(--teal-dark);
    border-color: var(--teal-mid);
}
.tb-btn:disabled[b-uvjn7o4lwp] {
    opacity: 0.3;
    cursor: not-allowed;
}
.tb-btn-primary[b-uvjn7o4lwp] {
    background: var(--teal);
    color: #fff !important;
}
.tb-btn-primary:hover:not(:disabled)[b-uvjn7o4lwp] {
    background: var(--teal-dark);
}

.tb-select[b-uvjn7o4lwp] {
    height: 32px;
    padding: 0 24px 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    cursor: pointer;
    font-family: inherit;
    min-width: 0;
    max-width: 140px;
}
.tb-select:disabled[b-uvjn7o4lwp] { opacity: 0.4; cursor: not-allowed; }

.tb-sep[b-uvjn7o4lwp] {
    width: 1px;
    height: 20px;
    background: var(--border-light);
    margin: 0 4px;
}

/* Text color picker - native <input type="color"> disguised as a toolbar button */
.tb-color[b-uvjn7o4lwp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 42px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s;
    gap: 2px;
}
.tb-color:hover[b-uvjn7o4lwp] { background: var(--bg-secondary); color: var(--text-primary); }
.tb-color input[type="color"][b-uvjn7o4lwp] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    border: none;
    background: transparent;
}
.tb-color input[type="color"]:disabled[b-uvjn7o4lwp] { cursor: not-allowed; }
.tb-color-swatch[b-uvjn7o4lwp] {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    margin-left: 2px;
    border: 1px solid rgba(0,0,0,0.15);
}

/* ===== Fullscreen mode =====
   When .aise-fullscreen is on <body>, the editor topbar and iframe
   are pulled out of the normal document flow and pinned to cover the
   entire viewport, regardless of where they sit in AppLayout. */
body.aise-fullscreen[b-uvjn7o4lwp] {
    overflow: hidden;
}
body.aise-fullscreen .editor-topbar[b-uvjn7o4lwp] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    border-radius: 0;
    margin: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
body.aise-fullscreen .editor-frame[b-uvjn7o4lwp] {
    position: fixed !important;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    z-index: 9997;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
}
body.aise-fullscreen .editor-frame.editor-frame-mobile[b-uvjn7o4lwp] {
    left: 50% !important;
    transform: translateX(-50%);
    width: 390px !important;
    max-width: 390px;
    border-radius: 28px;
    box-shadow: 0 0 0 6px #1f2937, 0 0 0 8px #374151;
}
body.aise-fullscreen .editor-mobile-warning[b-uvjn7o4lwp],
body.aise-fullscreen .editor-canvas[b-uvjn7o4lwp],
body.aise-fullscreen .shell > *:not(main)[b-uvjn7o4lwp],
body.aise-fullscreen .mobile-hamburger[b-uvjn7o4lwp] {
    display: none !important;
}
body.aise-fullscreen .main[b-uvjn7o4lwp] {
    padding: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

/* ===== Image picker modal ===== */
.aise-modal-backdrop[b-uvjn7o4lwp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.aise-modal[b-uvjn7o4lwp] {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.aise-modal-header[b-uvjn7o4lwp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.aise-modal-header h3[b-uvjn7o4lwp] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.aise-modal-body[b-uvjn7o4lwp] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.aise-upload[b-uvjn7o4lwp] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.aise-upload label[b-uvjn7o4lwp] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aise-upload-status[b-uvjn7o4lwp] { font-size: 13px; color: var(--text-tertiary); }
.aise-upload-status.error[b-uvjn7o4lwp] { color: #b33; }

.aise-library[b-uvjn7o4lwp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.aise-library-empty[b-uvjn7o4lwp] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    font-size: 14px;
}
.aise-image-tile-wrap[b-uvjn7o4lwp] {
    position: relative;
}
.aise-tile-actions[b-uvjn7o4lwp] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.aise-image-tile-wrap:hover .aise-tile-actions[b-uvjn7o4lwp] { opacity: 1; }
.aise-tile-actions .tb-btn[b-uvjn7o4lwp] {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    min-width: 28px;
    height: 28px;
    padding: 0;
}
.aise-tile-delete:hover[b-uvjn7o4lwp] { background: #fef0ef !important; color: #b33 !important; }
.aise-upload-hint[b-uvjn7o4lwp] { font-size: 12px; color: var(--text-tertiary); }

.aise-image-tile[b-uvjn7o4lwp] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
    width: 100%;
}
.aise-image-tile:hover[b-uvjn7o4lwp] {
    border-color: var(--teal);
    background: var(--teal-light);
    transform: translateY(-2px);
}
.aise-image-tile img[b-uvjn7o4lwp] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
}
.aise-image-name[b-uvjn7o4lwp] {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Background picker tabs */
.aise-tabs[b-uvjn7o4lwp] {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    padding: 0 20px;
    gap: 4px;
}
.aise-tab[b-uvjn7o4lwp] {
    background: transparent;
    border: none;
    padding: 12px 18px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aise-tab:hover[b-uvjn7o4lwp] { color: var(--text-primary); }
.aise-tab.active[b-uvjn7o4lwp] {
    color: var(--teal-dark);
    border-bottom-color: var(--teal);
}

/* Color picker */
.aise-color-picker[b-uvjn7o4lwp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.aise-color-field[b-uvjn7o4lwp] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}
.aise-color-field input[type="color"][b-uvjn7o4lwp] {
    width: 48px;
    height: 40px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
    background: #fff;
}
.aise-color-hex[b-uvjn7o4lwp] {
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    width: 120px;
}
.aise-color-preview[b-uvjn7o4lwp] {
    height: 80px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}
.aise-swatches[b-uvjn7o4lwp] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}
.aise-swatch[b-uvjn7o4lwp] {
    aspect-ratio: 1;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
}
.aise-swatch:hover[b-uvjn7o4lwp] { transform: scale(1.1); }

@media (max-width: 900px) {
    .editor-toolbar[b-uvjn7o4lwp] { justify-content: flex-start; width: 100%; }
    .aise-swatches[b-uvjn7o4lwp] { grid-template-columns: repeat(4, 1fr); }
}
/* /Pages/Home.razor.rz.scp.css */
/* All landing page styles are in app.css to avoid Blazor scoped CSS
   interfering with the video hero background. This file is intentionally empty. */
/* /Pages/Upload.razor.rz.scp.css */
/* Upload - modern v2 */

.upload-card[b-ny25nnwf6o] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 0;
    max-width: 680px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Segmented control tabs instead of browser-style tabs */
.tabs[b-ny25nnwf6o] {
    display: flex;
    padding: 16px 24px 0;
    gap: 4px;
    background: var(--bg-primary);
}
.tab[b-ny25nnwf6o] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
    font-family: var(--font-sans);
}
.tab:hover[b-ny25nnwf6o] { color: var(--text-primary); background: var(--bg-secondary); }
.tab.active[b-ny25nnwf6o] {
    color: var(--text-primary);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.form-section[b-ny25nnwf6o] {
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-light);
}
.form-section:last-of-type[b-ny25nnwf6o] { border-bottom: none; }

.field-label[b-ny25nnwf6o] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}

.subdomain-row[b-ny25nnwf6o] {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 420px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.subdomain-row:focus-within[b-ny25nnwf6o] {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-glow);
}
.subdomain-row .text-input[b-ny25nnwf6o] {
    border: none;
    flex: 1;
    padding: 10px 14px;
    font-size: 14px;
    background: var(--bg-primary);
    outline: none;
    color: var(--text-primary);
}
.subdomain-suffix[b-ny25nnwf6o] {
    background: var(--bg-inset);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-tertiary);
    border-left: 1px solid var(--border-light);
    white-space: nowrap;
}

.text-input[b-ny25nnwf6o] {
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    width: 100%;
    max-width: 540px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.text-input:focus[b-ny25nnwf6o] {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-glow);
}
.text-input.full[b-ny25nnwf6o] { max-width: 100%; }
.text-input.code[b-ny25nnwf6o] {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    width: 100%;
    max-width: 100%;
}

.hint[b-ny25nnwf6o] { font-size: 12px; margin-top: 8px; }
.hint.ok[b-ny25nnwf6o] { color: var(--teal); font-weight: 500; }
.hint.warn[b-ny25nnwf6o] { color: var(--warn-text); font-weight: 500; }
.help[b-ny25nnwf6o] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 10px;
    line-height: 1.5;
}
.help code[b-ny25nnwf6o] {
    background: var(--bg-inset);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* Modern dropzone - large, clean, animated border */
.dropzone[b-ny25nnwf6o] {
    border: 2px dashed var(--border-mid);
    border-radius: var(--radius-lg);
    padding: 48px 24px;
    text-align: center;
    background: var(--bg-inset);
    display: block;
    cursor: pointer;
    transition: border-color var(--transition-med), background var(--transition-med), box-shadow var(--transition-med);
}
.dropzone:hover[b-ny25nnwf6o] {
    border-color: var(--teal-mid);
    background: var(--teal-light);
    box-shadow: 0 0 0 4px var(--teal-glow);
}
.dropzone.dragover[b-ny25nnwf6o] {
    border-color: var(--teal);
    background: var(--teal-light);
    box-shadow: 0 0 0 6px var(--teal-glow);
}
.file-input-hidden[b-ny25nnwf6o] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.dropzone-icon[b-ny25nnwf6o] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--teal);
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.dropzone-label[b-ny25nnwf6o] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}
.dropzone-sub[b-ny25nnwf6o] {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 6px;
}

.link-btn[b-ny25nnwf6o] {
    background: none;
    border: none;
    color: var(--teal);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.status-row[b-ny25nnwf6o] {
    background: var(--bg-inset);
}
.status-message[b-ny25nnwf6o] {
    font-size: 13px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
}
.status-message.ok[b-ny25nnwf6o] {
    color: var(--teal-dark);
    border-color: var(--teal-mid);
    background: var(--teal-light);
}
.status-message.warn[b-ny25nnwf6o] {
    color: var(--warn-text);
    border-color: var(--warn-border);
    background: var(--warn-bg);
}
.status-message.info[b-ny25nnwf6o] { color: var(--text-secondary); }

.form-actions[b-ny25nnwf6o] {
    padding: 18px 28px;
    background: var(--bg-inset);
    display: flex;
    justify-content: flex-end;
}
.form-actions .btn-primary:disabled[b-ny25nnwf6o] { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
    .tab[b-ny25nnwf6o] { padding: 10px 8px; font-size: 12px; }
    .form-section[b-ny25nnwf6o] { padding: 20px 20px; }
    .subdomain-row[b-ny25nnwf6o] { max-width: 100%; }
    .subdomain-suffix[b-ny25nnwf6o] { font-size: 12px; padding: 10px 12px; }
    .dropzone[b-ny25nnwf6o] { padding: 36px 20px; }
    .form-actions[b-ny25nnwf6o] { padding: 16px 20px; }
    .form-actions .btn-primary[b-ny25nnwf6o] { width: 100%; justify-content: center; }
}

.template-grid[b-ny25nnwf6o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}
/* Reset UA button styling so the card inherits page typography. */
.template-card[b-ny25nnwf6o] {
    font: inherit;
    color: inherit;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.template-card:hover[b-ny25nnwf6o] {
    border-color: var(--teal-mid);
    background: var(--teal-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 110, 86, 0.08);
}
.template-card:focus-visible[b-ny25nnwf6o] {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18);
}
.template-card.active[b-ny25nnwf6o] {
    border-color: var(--teal);
    background: var(--teal-light);
    box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.18), 0 4px 12px rgba(15, 110, 86, 0.10);
}
.template-card-name[b-ny25nnwf6o] {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.3;
}
.template-card-desc[b-ny25nnwf6o] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
}
.template-card-meta[b-ny25nnwf6o] {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: auto;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.template-empty[b-ny25nnwf6o] {
    text-align: center;
    padding: 40px 24px;
    border: 1px dashed var(--border-light);
    border-radius: 12px;
    background: var(--bg-secondary, #fafafa);
}
.template-empty-icon[b-ny25nnwf6o] {
    font-size: 32px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}
.template-empty-title[b-ny25nnwf6o] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.template-empty-body[b-ny25nnwf6o] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 460px;
    margin: 0 auto;
}