/*
 * admin.css - BizPriest.LandingPages admin surface
 *
 * Loaded AFTER landing.css. Design tokens (--c-brand-*, --sp-*, --fs-*)
 * come from landing.css; this file is layout + components only.
 *
 * Layout: sticky dark sidebar (desktop) / top nav (mobile)
 *         + main area with breadcrumb + page header + content.
 */

/* ============================================================================
   Admin body override
   ============================================================================ */
body.admin {
    background: var(--c-bg-softer);
    color: var(--c-fg);
    min-height: 100vh;
    font-size: var(--fs-sm);
}

body.admin main,
body.admin footer,
body.admin header.lp-header { /* disable public header/footer if leaked in */
    display: none;
}

body.admin h1 { font-size: var(--fs-xl); }
body.admin h2 { font-size: var(--fs-lg); }
body.admin h3 { font-size: var(--fs-md); }

/* ============================================================================
   Shell: sidebar + main layout
   ============================================================================ */
.admin-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 960px) {
    .admin-shell { grid-template-columns: 240px 1fr; }
}

/* -------------- Sidebar -------------- */
.admin-sidebar {
    background: var(--c-brand-900);
    color: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 20;
}

@media (max-width: 959px) {
    .admin-sidebar { position: static; }
}

.admin-sidebar-brand {
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-sidebar-brand .lp-brand-mark {
    background: linear-gradient(135deg, var(--c-accent-500), var(--c-accent-600));
}

.admin-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.admin-sidebar-brand-text strong {
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.admin-sidebar-brand-text small {
    color: rgba(255,255,255,0.55);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

.admin-sidebar-section {
    padding: var(--sp-4) var(--sp-3);
}

.admin-sidebar-label {
    padding: 0 var(--sp-3);
    margin-bottom: var(--sp-2);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.625rem var(--sp-3);
    border-radius: var(--radius-md);
    color: rgba(255,255,255,0.8);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.admin-nav a:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
}

.admin-nav a.is-active {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
}

.admin-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.85;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.5);
}

.admin-sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.admin-sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    background: linear-gradient(135deg, var(--c-brand-700), var(--c-brand-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-xs);
    flex-shrink: 0;
}

.admin-sidebar-user-name {
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1.2;
}

.admin-sidebar-user-role {
    color: rgba(255,255,255,0.5);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-signout-form { margin: 0; }

.admin-signout-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

/* CRITICAL: constrain the inline SVG explicitly — without this the SVG
   renders at its intrinsic size (tiny viewBox ignored) and dominates the
   button. This is the actual bug the user screenshotted. */
.admin-signout-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke-width: 2.2;
}

.admin-signout-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.35);
}
.admin-signout-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* -------------- Main area -------------- */
.admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;     /* allow shrink inside grid */
    overflow-x: hidden;  /* never let child overflow cause a page scrollbar */
}

.admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-4) var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-fg-muted);
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-breadcrumb li + li::before {
    content: "/";
    margin-right: var(--sp-2);
    color: var(--c-border-strong);
}

.admin-breadcrumb a {
    color: var(--c-fg-muted);
    text-decoration: none;
}

.admin-breadcrumb a:hover { color: var(--c-brand-700); text-decoration: underline; }

.admin-breadcrumb [aria-current="page"] {
    color: var(--c-ink);
    font-weight: 600;
}

.admin-topbar-actions {
    margin-left: auto;
    display: flex;
    gap: var(--sp-2);
}

.admin-content {
    padding: var(--sp-6);
    max-width: 1240px;
    width: 100%;
    margin: 0;
    overflow-x: hidden;   /* never let child content cause horizontal page scroll */
    min-width: 0;         /* allow shrink in grid/flex parent */
}

@media (min-width: 1280px) { .admin-content { padding: var(--sp-7); } }

/* Grid and table admin pages opt out of the 1240px readability cap — they
   benefit from every pixel of the main-area on wide monitors. Uses CSS
   :has() so only these layouts widen; text-heavy admin pages (single-page
   forms, settings, long-form docs) keep the comfortable reading width.
   Currently opts in: Templates library (.tlib-grid) and any page with an
   .admin-table (Pages/Leads/Versions). */
.admin-content:has(.tlib-grid),
.admin-content:has(.admin-table) {
    max-width: none;
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.admin-page-header > div:first-child { min-width: 0; flex: 1 1 auto; }

.admin-page-title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--sp-1);
    color: var(--c-ink);
    letter-spacing: -0.01em;
}

.admin-page-subtitle {
    color: var(--c-fg-muted);
    font-size: var(--fs-sm);
    margin: 0;
}

.admin-page-actions {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* ============================================================================
   Cards + panels
   ============================================================================ */
.admin-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.admin-card-header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.admin-card-title {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--c-ink);
    font-weight: 700;
}

.admin-card-subtitle {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-fg-muted);
}

.admin-card-body { padding: var(--sp-6); }
.admin-card-body-flush { padding: 0; }

.admin-card + .admin-card { margin-top: var(--sp-5); }

/* ============================================================================
   Buttons
   ============================================================================ */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    min-height: 38px;
}

.admin-btn svg { width: 16px; height: 16px; }

.admin-btn-primary {
    background: var(--c-brand-800);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

.admin-btn-primary:hover {
    background: var(--c-brand-700);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.admin-btn-accent {
    background: var(--c-accent-600);
    color: #fff;
}

.admin-btn-accent:hover {
    background: var(--c-accent-500);
    color: #fff;
    text-decoration: none;
}

.admin-btn-secondary {
    background: #fff;
    color: var(--c-ink);
    border-color: var(--c-border-strong);
}

.admin-btn-secondary:hover {
    background: var(--c-bg-softer);
    color: var(--c-ink);
    border-color: var(--c-fg-muted);
    text-decoration: none;
}

.admin-btn-ghost {
    background: transparent;
    color: var(--c-fg);
    border-color: transparent;
}

.admin-btn-ghost:hover {
    background: var(--c-bg-softer);
    color: var(--c-ink);
    text-decoration: none;
}

.admin-btn-danger {
    background: #fff;
    color: #b91c1c;
    border-color: #fca5a5;
}

.admin-btn-danger:hover {
    background: #fef2f2;
    color: #7f1d1d;
    text-decoration: none;
}

.admin-btn-sm { padding: 0.35rem 0.75rem; font-size: var(--fs-xs); min-height: 30px; }
.admin-btn-lg { padding: 0.75rem 1.25rem; font-size: var(--fs-base); min-height: 44px; }
.admin-btn-block { display: flex; width: 100%; }

/* ============================================================================
   Status badges / tags
   ============================================================================ */
.admin-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-round);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.admin-tag::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

.admin-tag-draft     { background: #f1f5f9; color: #475569; }
.admin-tag-review    { background: #fef3c7; color: #92400e; }
.admin-tag-published { background: #dcfce7; color: #166534; }
.admin-tag-archived  { background: #ede9fe; color: #5b21b6; }
.admin-tag-ok        { background: #dcfce7; color: #166534; }
.admin-tag-retry     { background: #fef3c7; color: #92400e; }
.admin-tag-failed    { background: #fee2e2; color: #991b1b; }
.admin-tag-pending   { background: #e0f2fe; color: #075985; }

/* ============================================================================
   Stat cards (dashboard)
   ============================================================================ */
.admin-stat-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--sp-6);
}

@media (min-width: 640px)  { .admin-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .admin-stat-grid { grid-template-columns: repeat(4, 1fr); } }

.admin-stat {
    background: #fff;
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-brand-600);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    transition: box-shadow 160ms ease, transform 160ms ease;
    box-shadow: var(--shadow-xs);
}

.admin-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.admin-stat-label {
    color: var(--c-fg-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--sp-2);
}

.admin-stat-num {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--c-ink);
    line-height: 1;
    letter-spacing: -0.02em;
}

.admin-stat-delta {
    font-size: var(--fs-xs);
    color: var(--c-fg-muted);
    margin-top: var(--sp-2);
}

.admin-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--c-brand-50);
    color: var(--c-brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-stat-icon svg { width: 20px; height: 20px; }

.admin-stat-published { border-left-color: #16a34a; }
.admin-stat-published .admin-stat-icon { background: #dcfce7; color: #166534; }

.admin-stat-draft { border-left-color: #64748b; }
.admin-stat-draft .admin-stat-icon { background: #f1f5f9; color: #475569; }

.admin-stat-review { border-left-color: #f59e0b; }
.admin-stat-review .admin-stat-icon { background: #fef3c7; color: #92400e; }

.admin-stat-leads { border-left-color: var(--c-accent-600); }
.admin-stat-leads .admin-stat-icon { background: #fee4d4; color: #9a3412; }

/* ============================================================================
   Tables
   ============================================================================ */
.admin-table-wrap { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: var(--fs-sm);
}

.admin-table thead th {
    text-align: left;
    padding: 0.875rem 1rem;
    background: var(--c-bg-soft);
    color: var(--c-fg-muted);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-fg);
    vertical-align: top;
}

.admin-table tbody tr:hover td { background: var(--c-bg-soft); }
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-table-link {
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
}

.admin-table-link:hover { color: var(--c-brand-700); text-decoration: underline; }

.admin-table code {
    background: var(--c-bg-softer);
    color: var(--c-brand-800);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
}

.admin-table-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
}

.admin-meta {
    color: var(--c-fg-muted);
    font-size: var(--fs-xs);
}

/* ============================================================================
   Filter bar / tabs
   ============================================================================ */
.admin-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg-soft);
    flex-wrap: wrap;
}

.admin-tabs {
    display: inline-flex;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 2px;
}

.admin-tabs a {
    padding: 0.4rem 0.9rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-fg-muted);
    text-decoration: none;
    border-radius: calc(var(--radius-md) - 2px);
}

.admin-tabs a:hover { color: var(--c-ink); text-decoration: none; }

.admin-tabs a.is-active {
    background: var(--c-brand-800);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

.admin-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
}

.admin-search input {
    width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    background: #fff;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    font-family: inherit;
}

.admin-search input:focus {
    outline: none;
    border-color: var(--c-brand-600);
    box-shadow: 0 0 0 3px rgba(30,96,145,0.12);
}

.admin-search svg {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--c-fg-muted);
}

/* ============================================================================
   Forms
   ============================================================================ */
.admin-form {
    display: grid;
    gap: var(--sp-4);
    max-width: 48rem;
}

.admin-form-grid-2 {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .admin-form-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.admin-field { display: grid; gap: var(--sp-2); }

.admin-field > label,
.admin-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="tel"],
.admin-form input[type="url"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    background: #fff;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: var(--c-brand-600);
    box-shadow: 0 0 0 3px rgba(30,96,145,0.12);
}

.admin-form textarea { resize: vertical; min-height: 96px; }

.admin-form-hint {
    font-size: var(--fs-xs);
    color: var(--c-fg-muted);
    line-height: 1.5;
}

.admin-form-hint code {
    background: var(--c-bg-softer);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
}

.admin-form-actions {
    display: flex;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.admin-json-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.8125rem !important;
    line-height: 1.5;
    min-height: 28rem;
    background: var(--c-bg-soft) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-ink) !important;
}

/* ============================================================================
   Template picker (visual cards on /Admin/Pages/New and /Admin/Templates)
   ============================================================================ */
.admin-template-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}

@media (min-width: 720px)  { .admin-template-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .admin-template-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .admin-template-grid { grid-template-columns: repeat(4, 1fr); } }

.admin-template {
    position: relative;
    background: #fff;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-template:hover {
    border-color: var(--c-brand-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.admin-template.is-selected {
    border-color: var(--c-brand-800);
    background: var(--c-brand-50);
    box-shadow: 0 0 0 3px rgba(30,96,145,0.15);
}

.admin-template input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-template-preview {
    background: linear-gradient(135deg, var(--c-brand-900), var(--c-brand-700));
    border-radius: var(--radius-md);
    height: 120px;
    margin-bottom: var(--sp-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-4);
    gap: 6px;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.admin-template-preview::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,106,43,0.35), transparent 60%);
    pointer-events: none;
}

.admin-template-preview-line {
    height: 6px;
    background: rgba(255,255,255,0.7);
    border-radius: 3px;
}

.admin-template-preview-line.wide { width: 80%; }
.admin-template-preview-line.mid  { width: 55%; opacity: 0.55; }
.admin-template-preview-line.pill { width: 60px; height: 16px; background: var(--c-accent-500); }

.admin-template h3 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
    color: var(--c-ink);
}

.admin-template-cat {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-brand-700);
    background: var(--c-brand-50);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-round);
    margin-bottom: var(--sp-2);
}

.admin-template p {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-fg-muted);
    line-height: 1.5;
}

.admin-template-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-template-block-tag {
    font-size: 0.625rem;
    padding: 0.15rem 0.45rem;
    background: var(--c-bg-softer);
    color: var(--c-fg-muted);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-template-block-tag.is-locked {
    background: #fff8e1;
    color: #854d0e;
    border-color: #fde68a;
}

/* ============================================================================
   Alerts / notices
   ============================================================================ */
.admin-alert {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}

.admin-alert svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.admin-alert-error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.admin-alert-notice,
.admin-alert-success {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

.admin-alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.admin-alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #854d0e;
}

/* Legacy class aliases */
.admin-error  { }
.admin-notice { }

/* ============================================================================
   Empty states
   ============================================================================ */
.admin-empty {
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    color: var(--c-fg-muted);
}

.admin-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius-round);
    background: var(--c-brand-50);
    color: var(--c-brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-empty-icon svg { width: 28px; height: 28px; }

.admin-empty h3 {
    color: var(--c-ink);
    font-size: var(--fs-md);
    margin: 0 0 var(--sp-2);
}

.admin-empty p {
    max-width: 26rem;
    margin: 0 auto var(--sp-4);
    font-size: var(--fs-sm);
}

/* ============================================================================
   SignIn page (outside the shell)
   ============================================================================ */
body.admin-signin {
    background: linear-gradient(135deg, var(--c-brand-900) 0%, var(--c-brand-700) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    min-height: 100vh;
}

.admin-signin-card {
    width: 100%;
    max-width: 28rem;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--sp-7);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

.admin-signin-header {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.admin-signin-header .lp-brand-mark {
    margin: 0 auto var(--sp-4);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-md);
}

.admin-signin-card h1 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xl);
    color: var(--c-ink);
}

.admin-signin-header p {
    color: var(--c-fg-muted);
    font-size: var(--fs-sm);
    margin: 0;
}

.admin-signin-card form {
    display: grid;
    gap: var(--sp-4);
}

.admin-signin-card label {
    display: grid;
    gap: 0.4rem;
}

.admin-signin-card label > span {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-signin-card input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--fs-base);
    color: var(--c-ink);
    background: #fff;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    font-family: inherit;
}

.admin-signin-card input:focus {
    outline: none;
    border-color: var(--c-brand-600);
    box-shadow: 0 0 0 3px rgba(30,96,145,0.12);
}

.admin-signin-foot {
    margin-top: var(--sp-5);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-fg-muted);
}

/* ============================================================================
   Misc utilities
   ============================================================================ */
.admin-inline-flex {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.admin-stack { display: flex; flex-direction: column; gap: var(--sp-4); }

.admin-hstack {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.admin-divider {
    height: 1px;
    background: var(--c-border);
    margin: var(--sp-5) 0;
}

.inline-form { display: inline; margin: 0; }

.admin-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: var(--c-bg-softer);
    color: var(--c-fg-muted);
    border-radius: var(--radius-round);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================================
   Template Library v2  (Admin/Templates)
   Distinct, layout-driven thumbnails + filterable card grid.
   These styles are scoped via .tlib-* / .ttb-* and never override the
   legacy .admin-template-preview classes still used by the new-page wizard.
   ============================================================================ */

/* Toolbar -------------------------------------------------------------- */
.tlib-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tlib-toolbar-spacer { flex: 1 1 auto; }

.tlib-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: var(--c-bg-softer);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-round);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-fg);
    cursor: pointer;
    transition: all 140ms ease;
}
.tlib-chip span {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--c-fg-muted);
    background: #fff;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-round);
}
.tlib-chip:hover {
    border-color: var(--c-brand-600);
    color: var(--c-brand-700);
}
.tlib-chip.is-active {
    background: var(--c-brand-800);
    border-color: var(--c-brand-800);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(8,44,71,0.45);
}
.tlib-chip.is-active span { color: var(--c-brand-800); }

.tlib-search {
    flex: 0 1 240px;
    min-width: 160px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    background: var(--c-bg-soft);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.tlib-search:focus {
    outline: none;
    border-color: var(--c-brand-600);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30,96,145,0.15);
}

/* Grid + card ---------------------------------------------------------- */
.tlib-grid { gap: var(--sp-5); }

.tlib-card {
    --tlib-accent-1: var(--c-brand-800);
    --tlib-accent-2: var(--c-brand-600);
    --tlib-tint:     #eef4fb;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--c-border);
    box-shadow: var(--shadow-sm);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, border-color 160ms ease;
}
.tlib-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(15,23,42,0.35), 0 4px 10px -4px rgba(15,23,42,0.18);
    border-color: var(--tlib-accent-2);
}
.tlib-card.is-service  { --tlib-accent-1:#0b3d5f; --tlib-accent-2:#1e6091; --tlib-tint:#eef4fb; }
.tlib-card.is-consult  { --tlib-accent-1:#0f766e; --tlib-accent-2:#14b8a6; --tlib-tint:#ecfdf5; }
.tlib-card.is-city     { --tlib-accent-1:#b45309; --tlib-accent-2:#f59e0b; --tlib-tint:#fffaf0; }
.tlib-card.is-longform { --tlib-accent-1:#5b21b6; --tlib-accent-2:#8b5cf6; --tlib-tint:#f5f3ff; }

/* Top accent bar (subtle category signal) */
.tlib-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tlib-accent-1), var(--tlib-accent-2));
    z-index: 2;
}

/* Recommended ribbon */
.tlib-ribbon {
    position: absolute;
    top: 14px;
    right: -38px;
    transform: rotate(35deg);
    background: linear-gradient(135deg, var(--c-accent-600), var(--c-accent-500));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 2.5rem;
    box-shadow: 0 6px 14px -6px rgba(232,90,26,0.6);
    z-index: 3;
}

/* Thumbnail — real picsum image (same seed as the preview iframe hero).
   Fixed 160px height keeps all cards aligned. A subtle category-coloured
   gradient overlay at the bottom preserves the theme-color signal without
   obscuring the photo. */
.tlib-thumb {
    position: relative;
    margin: 0;
    border-radius: 0;
    height: 160px;
    flex: 0 0 160px;
    background: linear-gradient(160deg, var(--tlib-accent-1) 0%, var(--tlib-accent-2) 100%);
    padding: 0;
    display: block;
    overflow: hidden;
}
.tlib-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.03);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.tlib-card:hover .tlib-thumb-img { transform: scale(1.04); }
/* Category-coloured gradient overlay at the bottom of the image to retain
   the theme colour cue without washing out the photo. */
.tlib-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, var(--tlib-accent-1) 140%);
    opacity: 0.55;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.tlib-thumb::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
    pointer-events: none;
}

.tlib-thumb-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 1;
}
.tlib-thumb-bar > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
}
.tlib-thumb-bar > span:nth-child(1) { background:#ff5f57; }
.tlib-thumb-bar > span:nth-child(2) { background:#febc2e; }
.tlib-thumb-bar > span:nth-child(3) { background:#28c840; }
.tlib-thumb-url {
    flex: 1;
    margin-left: 8px;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.12);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tlib-thumb-canvas {
    flex: 1;
    min-height: 0;
    background: var(--tlib-tint);
    margin: 10px;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    box-shadow: 0 8px 18px -10px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.6);
    position: relative;
    z-index: 1;
}
/* Bottom fade-out hint for dense templates where content is clipped. */
.tlib-thumb-canvas::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    background: linear-gradient(180deg, transparent 0%, var(--tlib-tint) 95%);
    pointer-events: none;
    z-index: 2;
}
/* Mini-mockup blocks inside the canvas must not grow unbounded. They stay
   at their intrinsic size; extra blocks just overflow + get clipped. */
.tlib-thumb-canvas > .ttb { flex-shrink: 0; }

/* Block miniatures ------------------------------------------------------
   .ttb is the base; each .ttb-* paints a recognisable mini layout.
   They use the card's --tlib-accent-* tokens so each category looks unique.
*/
.ttb {
    flex: 0 0 auto;
    background: #fff;
    border-radius: 4px;
    padding: 6px 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}

/* Hero — title bar, sub bar, CTA pill */
.ttb-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: linear-gradient(135deg, var(--tlib-accent-1), var(--tlib-accent-2));
}
.ttb-hero .ttb-h1 { height: 8px; width: 75%; background: rgba(255,255,255,0.95); border-radius: 2px; }
.ttb-hero .ttb-h2 { height: 4px; width: 55%; background: rgba(255,255,255,0.55); border-radius: 2px; }
.ttb-hero .ttb-cta { height: 9px; width: 32px; background: var(--c-accent-500); border-radius: 2px; margin-top: 2px; }

/* Benefits — 4-tile grid */
.ttb-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 6px;
}
.ttb-benefits i {
    height: 14px;
    border-radius: 3px;
    background: var(--tlib-tint);
    border: 1px solid var(--tlib-accent-2);
    border-top-width: 3px;
}

/* Pricing — 3 column tiers, middle is "popular" */
.ttb-pricing {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px;
}
.ttb-pricing > div {
    background: var(--tlib-tint);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ttb-pricing > div b { display:block; height: 5px; width: 60%; background: var(--tlib-accent-1); border-radius: 1px; }
.ttb-pricing > div u { display:block; height: 3px; width: 90%; background: rgba(15,23,42,0.18); border-radius: 1px; text-decoration: none; }
.ttb-pricing > .is-pop {
    background: #fff;
    border-color: var(--tlib-accent-2);
    box-shadow: 0 2px 4px rgba(15,23,42,0.12);
    transform: translateY(-2px);
}

/* Process — numbered circles */
.ttb-process {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    position: relative;
}
.ttb-process::before {
    content: "";
    position: absolute;
    left: 16px; right: 16px; top: 50%;
    height: 1px;
    background: var(--tlib-accent-2);
    opacity: 0.4;
}
.ttb-process > div {
    position: relative;
    z-index: 1;
}
.ttb-process i {
    display:flex;
    align-items:center;
    justify-content:center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tlib-accent-1);
    color: #fff;
    font-style: normal;
    font-size: 7px;
    font-weight: 800;
}

/* Testimonial — quote bubble + stars */
.ttb-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fff;
    border-left: 3px solid var(--tlib-accent-2);
}
.ttb-reviews .ttb-quote { flex: 1; display:flex; flex-direction:column; gap: 3px; position: relative; padding-left: 10px; }
.ttb-reviews .ttb-quote span { position:absolute; left:-2px; top:-6px; font-size: 18px; line-height:1; color: var(--tlib-accent-2); font-family: Georgia, serif; }
.ttb-reviews .ttb-quote u { display:block; height: 3px; background: rgba(15,23,42,0.18); border-radius: 1px; text-decoration: none; }
.ttb-reviews .ttb-quote u:nth-child(2) { width: 92%; }
.ttb-reviews .ttb-quote u:nth-child(3) { width: 70%; }
.ttb-reviews .ttb-stars {
    color: #f59e0b;
    font-size: 8px;
    letter-spacing: 1px;
    line-height: 1;
}

/* FAQ — accordion rows */
.ttb-faq {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 6px;
}
.ttb-faq > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--tlib-tint);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    padding: 3px 6px;
}
.ttb-faq u { display:block; height: 3px; width: 70%; background: rgba(15,23,42,0.3); border-radius: 1px; text-decoration: none; }
.ttb-faq b { font-size: 9px; line-height: 1; color: var(--tlib-accent-2); font-weight: 800; }

/* CTA form */
.ttb-cta-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: linear-gradient(135deg, var(--tlib-tint), #fff);
    border: 1px dashed var(--tlib-accent-2);
}
.ttb-cta-form u { display:block; height: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: 2px; text-decoration: none; }
.ttb-cta-form .ttb-btn { height: 10px; width: 50%; background: var(--c-accent-500); border-radius: 2px; align-self: flex-start; box-shadow: 0 2px 4px rgba(232,90,26,0.4); }

/* Trust badges row */
.ttb-trust {
    display: flex;
    gap: 4px;
    padding: 6px;
    justify-content: space-between;
}
.ttb-trust span {
    flex: 1;
    height: 12px;
    background: #fff;
    border: 1px solid var(--tlib-accent-2);
    border-radius: 6px;
    position: relative;
}
.ttb-trust span::after {
    content: "";
    position: absolute;
    left: 4px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px;
    background: var(--tlib-accent-1);
    border-radius: 50%;
}

/* Long-form content lines */
.ttb-longform {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
}
.ttb-longform u { display:block; height: 3px; background: rgba(15,23,42,0.22); border-radius: 1px; text-decoration: none; }
.ttb-longform u.short { width: 60%; }

/* TOC */
.ttb-toc {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    background: var(--tlib-tint);
    border-left: 2px solid var(--tlib-accent-2);
}
.ttb-toc > div { display:flex; align-items:center; gap: 4px; }
.ttb-toc i { width: 4px; height: 4px; border-radius: 50%; background: var(--tlib-accent-2); }
.ttb-toc u { display:block; height: 3px; flex: 1; background: rgba(15,23,42,0.2); border-radius: 1px; text-decoration: none; }

/* Local trust */
.ttb-local {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
}
.ttb-local .ttb-pin {
    color: var(--tlib-accent-2);
    font-size: 14px;
    line-height: 1;
}
.ttb-local > div { flex:1; display:flex; flex-direction:column; gap: 3px; }
.ttb-local u { display:block; height: 3px; background: rgba(15,23,42,0.22); border-radius: 1px; text-decoration: none; }
.ttb-local u.short { width: 55%; }

/* Card body ------------------------------------------------------------ */
.tlib-card .tlib-meta,
.tlib-card h3,
.tlib-card > p,
.tlib-card .tlib-stats,
.tlib-card .tlib-blocks-toggle,
.tlib-card .tlib-actions {
    margin-left: var(--sp-5);
    margin-right: var(--sp-5);
}
.tlib-card .tlib-meta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tlib-card h3 { margin-top: var(--sp-3); margin-bottom: var(--sp-1); font-size: 1.05rem; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }
.tlib-card > p { margin-top: 0; margin-bottom: var(--sp-3); }

.tlib-bestfor {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--tlib-accent-1);
    background: var(--tlib-tint);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-round);
    border: 1px solid var(--tlib-accent-2);
}

/* Stat row */
.tlib-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-3);
    border-top: 1px dashed var(--c-border);
    border-bottom: 1px dashed var(--c-border);
}
.tlib-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tlib-stat strong { font-size: 1rem; font-weight: 800; color: var(--tlib-accent-1); line-height: 1; }
.tlib-stat span { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-fg-muted); font-weight: 600; }

/* Blocks toggle */
.tlib-blocks-toggle { margin-bottom: var(--sp-3); }
.tlib-blocks-toggle summary {
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--c-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
    list-style: none;
    user-select: none;
}
.tlib-blocks-toggle summary::-webkit-details-marker { display: none; }
.tlib-blocks-toggle summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 140ms ease;
    color: var(--tlib-accent-2);
}
.tlib-blocks-toggle[open] summary::before { content: "▾ "; }
.tlib-blocks-toggle .admin-template-blocks { margin-top: var(--sp-2); }

/* Actions */
.tlib-actions {
    margin-top: auto;
    margin-bottom: var(--sp-5);
    display: flex;
    gap: var(--sp-2);
}
.tlib-btn { flex: 1; justify-content: center; }

/* Empty state */
.tlib-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: var(--sp-6);
    background: #fff;
    border: 2px dashed var(--c-border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--c-fg-muted);
    margin-top: var(--sp-4);
}
.tlib-empty strong { color: var(--c-ink); font-size: 1rem; }

/* Disable the legacy hover transform on the v2 card so our richer hover wins */
.tlib-card:hover { /* override of .admin-template:hover */ }

/* ============================================================================
   Template Library v3  —  banner, sort, tags, modal, upgraded empty state
   ============================================================================ */

/* -------- Banner (page header with stats) ------------------------------- */
.tlib-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
    background: linear-gradient(135deg, var(--c-brand-900) 0%, var(--c-brand-800) 55%, var(--c-brand-700) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.tlib-banner::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,106,43,0.3), transparent 60%);
    pointer-events: none;
}
@media (min-width: 960px) {
    .tlib-banner { grid-template-columns: 1fr auto; align-items: end; padding: var(--sp-6) var(--sp-7); }
}
.tlib-banner-text h1.admin-page-title { color: #fff; margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.tlib-banner-text p.admin-page-subtitle { color: rgba(255,255,255,0.78); max-width: 42rem; }

.tlib-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    position: relative;
    z-index: 1;
}
.tlib-stat-big {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    min-width: 0;
}
.tlib-stat-big strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.tlib-stat-big span {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
}

/* -------- Sort dropdown in toolbar -------------------------------------- */
.tlib-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-fg-muted);
    font-weight: 700;
}
.tlib-sort {
    padding: 0.4rem 1.8rem 0.4rem 0.65rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 0.55rem center/12px,
        var(--c-bg-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.tlib-sort:focus {
    outline: none;
    border-color: var(--c-brand-600);
    box-shadow: 0 0 0 3px rgba(30,96,145,0.15);
    background-color: #fff;
}

/* -------- Tag chips on cards -------------------------------------------- */
.tlib-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: var(--sp-5);
    margin-right: var(--sp-5);
    margin-bottom: var(--sp-3);
}
.tlib-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    background: var(--tlib-tint, var(--c-bg-softer));
    color: var(--tlib-accent-1, var(--c-brand-800));
    border: 1px solid var(--tlib-accent-2, var(--c-border));
}

/* -------- Fixed recommended ribbon (top-left corner badge, no rotation) -- */
.tlib-badge-reco {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    background: linear-gradient(135deg, var(--c-accent-600), var(--c-accent-500));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-round);
    box-shadow: 0 6px 16px -6px rgba(232,90,26,0.55);
    white-space: nowrap;
}
/* Kill the old diagonal ribbon rule from v2 */
.tlib-card .tlib-ribbon { display: none !important; }

/* -------- Usage stat column --------------------------------------------- */
.tlib-stat-usage strong { color: var(--c-brand-700); }
.tlib-stat-usage { cursor: help; }

/* ------------------------------------------------------------------------
   Picker variant of tlib-card — used on /Admin/Pages/New template picker.
   Reuses the library card design so both surfaces stay in lockstep, but
   adds a radio-selection flow: label wraps a hidden radio, click anywhere
   on the card selects it, visible ring + checkmark badge on :is-selected.
   ------------------------------------------------------------------------ */
.tlib-picker { cursor: pointer; }
.tlib-picker input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tlib-picker.is-selected {
    border-color: var(--c-brand-800);
    box-shadow: 0 0 0 3px rgba(30, 96, 145, 0.18), 0 22px 48px -24px rgba(15, 23, 42, 0.35);
}
.tlib-picker.is-selected::after {
    content: "";
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-brand-800) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/16px no-repeat;
    z-index: 4;
    box-shadow: 0 6px 16px -4px rgba(8, 44, 71, 0.5);
}
/* The pseudo-button saying "Click to select" in the actions row — visual
   cue only, pointer-events disabled so clicking it selects the parent card. */
.tlib-picker-cta {
    pointer-events: none;
    opacity: 0.5;
    justify-content: center;
    flex: 1;
}
.tlib-picker.is-selected .tlib-picker-cta {
    opacity: 1;
    background: var(--c-brand-800);
    border-color: var(--c-brand-800);
}
.tlib-picker.is-selected .tlib-picker-cta::before { content: "\2713 \00a0 "; }
.tlib-picker.is-selected .tlib-picker-cta::after  { content: "Selected"; }
.tlib-picker.is-selected .tlib-picker-cta { font-size: 0; }
.tlib-picker.is-selected .tlib-picker-cta::before,
.tlib-picker.is-selected .tlib-picker-cta::after { font-size: 0.75rem; font-weight: 700; }

/* ============================================================================
   Compact tile-strip template picker — /Admin/Pages/New
   ============================================================================
   Replaces the full-card grid with a horizontal scrollable row of tiny image
   tiles (~100px tall). Clicking one selects it and slides open a slim detail
   bar below the strip showing description, block list, tags, and a Preview
   link. Total vertical footprint: ~180px instead of ~800px. */

/* The card that wraps the tile strip must clip so horizontal overflow
   stays inside the strip's own scrollbar and never leaks to the page.
   Also force the card itself to respect the content area width. */
.admin-card:has(.tpl-strip) {
    overflow: hidden;
    max-width: 100%;
}

.tpl-strip {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;    /* MUST match axis — CSS spec: if one is 'auto' and the other 'visible', 'visible' becomes 'auto'. Use hidden. */
    padding: 0.5rem 0 0.75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
}
.tpl-strip::-webkit-scrollbar { height: 6px; }
.tpl-strip::-webkit-scrollbar-track { background: transparent; }
.tpl-strip::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 3px; }

.tpl-tile {
    flex: 0 0 auto;
    width: 140px;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    scroll-snap-align: start;
}
.tpl-tile input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tpl-tile img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
    filter: saturate(1.05);
    transition: transform 280ms ease;
}
.tpl-tile:hover img { transform: scale(1.06); }
.tpl-tile-name {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fff;
    border-top: 1px solid var(--c-border);
    line-height: 1.2;
}
.tpl-tile-reco {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: var(--c-accent-600);
    color: #fff;
    font-size: 0.55rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.tpl-tile:hover {
    border-color: var(--c-brand-600);
    box-shadow: 0 8px 20px -10px rgba(15,23,42,0.25);
}
.tpl-tile.is-active {
    border-color: var(--c-brand-800);
    box-shadow: 0 0 0 3px rgba(30,96,145,0.2), 0 8px 20px -10px rgba(15,23,42,0.25);
    transform: translateY(-2px);
}
.tpl-tile.is-active::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-brand-800) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(8,44,71,0.5);
}

/* Detail bar — slides open for the selected template */
.tpl-detail {
    padding: 0.75rem 0;
    min-height: 0;
}
.tpl-detail-panel {
    display: none;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    flex-wrap: wrap;
}
.tpl-detail-panel.is-active { display: flex; }

.tpl-detail-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 200px;
}
.tpl-detail-left strong {
    font-size: var(--fs-sm);
    color: var(--c-ink);
}
.tpl-detail-desc {
    color: var(--c-fg-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tpl-detail-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.tpl-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

@media (max-width: 720px) {
    .tpl-tile { width: 120px; }
    .tpl-tile img { height: 64px; }
    .tpl-detail-panel { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Tile preview button — small eye icon overlay on each picker tile
   ============================================================================ */
.tpl-tile-preview {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 160ms ease, background 140ms ease;
    text-decoration: none;
}
.tpl-tile-preview svg { width: 13px; height: 13px; }
.tpl-tile:hover .tpl-tile-preview { opacity: 1; }
.tpl-tile-preview:hover { background: var(--c-brand-800); }
/* Move reco star to the left when preview is present */
.tpl-tile .tpl-tile-reco { right: auto; left: 4px; }

/* ============================================================================
   Structured block editor (be-*) — /Admin/Pages/New step 4
   ============================================================================ */
.be-container { display: flex; flex-direction: column; gap: var(--sp-3); }

.be-placeholder {
    text-align: center;
    color: var(--c-fg-muted);
    padding: var(--sp-6);
    font-size: var(--fs-sm);
    font-style: italic;
}

/* Each block is a collapsible <details> panel with a color-coded left border */
.be-block {
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-brand-700);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
    transition: box-shadow 160ms ease;
}
.be-block[open] { box-shadow: 0 8px 24px -12px rgba(15,23,42,0.18); }

.be-block-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-bg-soft);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-ink);
    user-select: none;
    list-style: none;
}
/* Color-coded left accent on header hover — uses the --be-color set in JS */
.be-block-header:hover { background: color-mix(in srgb, var(--be-color, var(--c-brand-700)) 6%, white); }
.be-block-header::-webkit-details-marker { display: none; }
.be-block-header::after {
    content: "";
    width: 10px; height: 10px;
    margin-left: auto;
    border-right: 2px solid var(--c-fg-muted);
    border-bottom: 2px solid var(--c-fg-muted);
    transform: rotate(45deg);
    transition: transform 160ms ease;
    flex-shrink: 0;
}
.be-block[open] > .be-block-header::after { transform: rotate(-135deg); }
.be-block[open] > .be-block-header { border-bottom-color: var(--c-border); }

.be-block-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.be-block-label { flex: 1; }

/* Per-block AI Fill button in the panel header */
.be-ai-btn {
    padding: 0.3rem 0.65rem;
    background: linear-gradient(135deg, var(--c-accent-600), var(--c-accent-500));
    color: #fff;
    border: 0;
    border-radius: var(--radius-round);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 140ms ease;
    box-shadow: 0 2px 8px -2px rgba(232, 90, 26, 0.4);
    flex-shrink: 0;
}
.be-ai-btn:hover {
    background: linear-gradient(135deg, var(--c-accent-500), #f97316);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -3px rgba(232, 90, 26, 0.5);
}
.be-req { color: var(--c-accent-600); font-weight: 600; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Hint text describing what this block is for — shown below the header */
.be-block-hint {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-bg-softer);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--c-fg-muted);
    line-height: 1.5;
    border-left: 3px solid var(--c-border-strong);
}

/* Image URL field with live preview thumbnail */
.be-image-preview {
    margin-top: 0.35rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 320px;
    background: var(--c-bg-softer);
    border: 1px dashed var(--c-border);
    min-height: 0;
}
.be-image-preview img {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md);
}

.be-block-body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Field wrapper */
.be-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.be-field label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.be-field .admin-input,
.be-field input[type="text"],
.be-field input[type="number"],
.be-field textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: var(--fs-sm);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.be-field input:focus,
.be-field textarea:focus {
    outline: none;
    border-color: var(--c-brand-600);
    box-shadow: 0 0 0 3px rgba(30, 96, 145, 0.12);
}
.be-field textarea { resize: vertical; min-height: 56px; }
.be-field-check {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
}
.be-field-check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--c-brand-700);
}

/* Repeater */
.be-repeater {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--c-border);
    margin-top: var(--sp-2);
}
.be-repeater-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: var(--sp-2);
    align-items: start;
    padding: var(--sp-3);
    background: var(--c-bg-softer);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}
.be-item-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-brand-800);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}
.be-item-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.be-remove-item {
    width: 28px;
    height: 28px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--c-fg-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 140ms ease;
    flex-shrink: 0;
}
.be-remove-item:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}
.be-add-item {
    align-self: flex-start;
}

/* String-list mini-repeater (e.g. pricing plan features) — vertical stack
   of single-line inputs, each with its own remove button. */
.be-string-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.be-sl-row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.be-sl-input {
    flex: 1;
    min-width: 0;
}
.be-sl-rm {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    font-size: 0.875rem !important;
    padding: 0 !important;
}
.be-sl-add {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* ============================================================================
   Pricing comparison grid editor (be-pg-*)
   ============================================================================ */
.be-pg { overflow-x: auto; }

.be-pg-header,
.be-pg-feat-row {
    display: grid;
    gap: 0.5rem;
    align-items: start;
    min-width: 0;
}

.be-pg-header {
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--c-border);
}

.be-pg-corner {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-fg-muted);
    padding-top: 0.5rem;
    align-self: end;
}

.be-pg-plan {
    background: var(--c-bg-softer);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    min-width: 140px;
}
.be-pg-plan.is-pop {
    background: #faf5ff;
    border-color: #7c3aed;
    box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.2);
}

.be-pg-input {
    width: 100%;
    padding: 0.4rem 0.55rem;
    font-size: 0.8125rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-ink);
    font-family: inherit;
}
.be-pg-input:focus {
    outline: none;
    border-color: var(--c-brand-600);
    box-shadow: 0 0 0 2px rgba(30, 96, 145, 0.12);
}
.be-pg-name { font-weight: 800; font-size: 0.9375rem; }
.be-pg-price { font-weight: 700; color: var(--c-brand-800); }

.be-pg-pop-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--c-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.be-pg-pop-label input[type="checkbox"] {
    accent-color: #7c3aed;
    width: 16px; height: 16px;
}

.be-pg-rm-plan {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px; height: 20px;
    border: 0;
    background: transparent;
    color: var(--c-fg-muted);
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 120ms ease;
}
.be-pg-rm-plan:hover { background: #fef2f2; color: #dc2626; }

.be-pg-add-col {
    display: flex;
    align-items: center;
    justify-content: center;
}
.be-pg-add-plan {
    width: 32px; height: 32px;
    border: 2px dashed var(--c-border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--c-fg-muted);
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 140ms ease;
}
.be-pg-add-plan:hover { border-color: var(--c-brand-600); color: var(--c-brand-700); background: var(--c-brand-50); }

/* Feature rows */
.be-pg-features {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.be-pg-feat-row {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem;
}
.be-pg-feat-row:nth-child(odd) { background: var(--c-bg-softer); }

.be-pg-feat-name {
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--c-ink);
}
.be-pg-feat-name:focus {
    border-color: var(--c-brand-600);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(30, 96, 145, 0.12);
    outline: none;
}

.be-pg-check-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}
.be-pg-check-cell input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--c-brand-700);
    cursor: pointer;
}

.be-pg-rm-feat {
    width: 24px; height: 24px;
    border: 0;
    background: transparent;
    color: var(--c-fg-muted);
    cursor: pointer;
    font-size: 0.875rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.be-pg-rm-feat:hover { color: #dc2626; }

@media (max-width: 720px) {
    .be-pg-plan { min-width: 120px; padding: var(--sp-2); }
    .be-pg-corner { font-size: 0.625rem; }
}

/* "Add more sections" panel — extras not in the current template */
.be-add-more {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--c-bg-softer);
    border: 2px dashed var(--c-border);
    border-radius: var(--radius-lg);
}
.be-add-more-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--c-fg-muted);
    margin: 0 0 var(--sp-3);
}
.be-add-more-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.be-add-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: #fff;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--c-ink);
    cursor: pointer;
    transition: all 160ms ease;
}
.be-add-more-btn:hover {
    background: var(--c-brand-50);
    border-color: var(--c-brand-600);
    color: var(--c-brand-800);
    box-shadow: 0 4px 12px -4px rgba(15,23,42,0.18);
    transform: translateY(-1px);
}
.be-add-more-btn .be-block-icon { font-size: 1.1rem; }

/* Raw JSON toggle */
.be-raw-toggle summary {
    font-size: 0.75rem;
    color: var(--c-fg-muted);
}

@media (max-width: 720px) {
    .be-repeater-item { grid-template-columns: 24px 1fr auto; padding: var(--sp-2); }
    .be-item-num { width: 24px; height: 24px; font-size: 0.6rem; }
}

/* -------- Pagination bar ------------------------------------------------ */
.tlib-pagination[hidden] { display: none !important; }
.tlib-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding: var(--sp-3);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tlib-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.95rem;
    background: var(--c-bg-softer);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-ink);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: all 140ms ease;
}
.tlib-page-nav svg { width: 14px; height: 14px; }
.tlib-page-nav:hover:not(:disabled) {
    background: var(--c-brand-50);
    border-color: var(--c-brand-600);
    color: var(--c-brand-800);
}
.tlib-page-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tlib-page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0 var(--sp-2);
}
.tlib-page-num {
    min-width: 34px;
    height: 34px;
    padding: 0 0.55rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--c-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 140ms ease;
    font-feature-settings: "tnum";
}
.tlib-page-num:hover {
    background: var(--c-bg-softer);
    color: var(--c-brand-800);
}
.tlib-page-num.is-active {
    background: var(--c-brand-800);
    color: #fff;
    border-color: var(--c-brand-800);
    box-shadow: 0 4px 12px -4px rgba(8, 44, 71, 0.45);
    cursor: default;
}
.tlib-page-num.is-active:hover {
    background: var(--c-brand-800);
    color: #fff;
}
.tlib-page-gap {
    display: inline-block;
    padding: 0 0.35rem;
    color: var(--c-fg-muted);
    font-size: 0.875rem;
    user-select: none;
}

.tlib-page-summary {
    flex: 1 1 auto;
    min-width: 180px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--c-fg-muted);
    font-weight: 600;
    padding: 0 var(--sp-2);
}

@media (max-width: 720px) {
    .tlib-pagination { padding: var(--sp-2); gap: 0.35rem; }
    .tlib-page-nav { padding: 0.5rem 0.75rem; }
    .tlib-page-nav > span,
    .tlib-page-nav { font-size: 0.75rem; }
    .tlib-page-summary {
        flex-basis: 100%;
        text-align: center;
        order: 10;
        padding-top: var(--sp-2);
        border-top: 1px dashed var(--c-border);
    }
}

/* -------- Upgraded empty state ------------------------------------------ */
/* CRITICAL: respect the HTML `hidden` attribute. The v2 `.tlib-empty` rule
   above sets `display: flex` unconditionally, which has higher specificity
   than the UA `[hidden] { display: none }` rule and defeats the `hidden`
   attribute. This override restores the expected behaviour. */
.tlib-empty[hidden] { display: none !important; }

.tlib-empty {
    padding: var(--sp-8) var(--sp-6);
    gap: var(--sp-3);
    background: linear-gradient(180deg, #fff 0%, var(--c-bg-softer) 100%);
    border: 2px dashed var(--c-border-strong);
    border-radius: var(--radius-xl);
}
.tlib-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-bg-softer);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-fg-muted);
    margin-bottom: var(--sp-2);
}
.tlib-empty-icon svg { width: 28px; height: 28px; }
.tlib-empty span { max-width: 22rem; line-height: 1.5; }

/* ============================================================================
   Preview modal (native <dialog>)
   ============================================================================ */

/* Body scroll lock while modal is open */
body.tlib-modal-lock { overflow: hidden; }

/* Dialog element — styles only apply when the dialog is open.
   CRITICAL: never apply `display: flex` unconditionally to a <dialog>, or
   it overrides the browser's `dialog:not([open]) { display: none }` and
   the dialog renders in normal document flow as flow content. Always
   scope layout rules under `[open]`. */
.tlib-modal {
    padding: 0;
    border: 0;
    border-radius: 16px;
    width: 96vw;
    max-width: 1400px;
    height: 92vh;
    max-height: 92vh;
    background: #fff;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
    overflow: hidden;
}
/* Belt-and-braces: explicitly hide when not open so any future layout
   rule that leaks in still can't force visibility. */
.tlib-modal:not([open]) { display: none; }
.tlib-modal[open] {
    display: flex;
    flex-direction: column;
}
.tlib-modal::backdrop {
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
}

.tlib-modal-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    z-index: 2;
}
.tlib-modal-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}
.tlib-modal-title strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tlib-modal-cat {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: var(--c-brand-50);
    color: var(--c-brand-700);
    border-radius: var(--radius-round);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.tlib-modal-viewports {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--c-bg-softer);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    justify-self: center;
}
.tlib-vp {
    width: 36px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--c-fg-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.tlib-vp svg { width: 16px; height: 16px; }
.tlib-vp:hover { color: var(--c-brand-700); }
.tlib-vp.is-active {
    background: #fff;
    color: var(--c-brand-800);
    box-shadow: 0 1px 3px rgba(15,23,42,0.12);
}

.tlib-modal-actions {
    display: inline-flex;
    gap: var(--sp-2);
    align-items: center;
    justify-self: end;
}
.tlib-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--c-border);
    background: #fff;
    border-radius: var(--radius-md);
    color: var(--c-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 140ms ease;
}
.tlib-modal-close svg { width: 16px; height: 16px; }
.tlib-modal-close:hover {
    background: var(--c-bg-softer);
    color: var(--c-ink);
    border-color: var(--c-border-strong);
}

.tlib-modal-body {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--c-bg-softer);
}

.tlib-modal-frame {
    min-height: 100%;
    display: flex;
    justify-content: center;
    padding: var(--sp-4);
    box-sizing: border-box;
}
.tlib-modal-frame iframe {
    width: 100%;
    max-width: 100%;
    height: calc(92vh - 160px);
    min-height: 640px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px -12px rgba(15,23,42,0.25);
    transition: max-width 260ms ease, opacity 200ms ease;
    opacity: 0;
}
/* Viewport modes */
.tlib-modal-frame[data-viewport="desktop"] iframe { max-width: 100%; }
.tlib-modal-frame[data-viewport="tablet"]  iframe { max-width: 820px; }
.tlib-modal-frame[data-viewport="mobile"]  iframe { max-width: 420px; }

/* Skeleton — shown while iframe is loading */
.tlib-modal-skeleton {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: var(--sp-6) var(--sp-6) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    pointer-events: none;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}
@keyframes tlib-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.tlib-skel {
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 800px 100%;
    border-radius: 6px;
    animation: tlib-shimmer 1.6s linear infinite;
}
.tlib-skel-bar { height: 14px; width: 40%; }
.tlib-skel-big { height: 48px; width: 85%; }
.tlib-skel-row { height: 12px; width: 95%; }
.tlib-skel-row:nth-of-type(4) { width: 72%; }
.tlib-skel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
.tlib-skel-grid > div {
    height: 96px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 800px 100%;
    border-radius: 8px;
    animation: tlib-shimmer 1.6s linear infinite;
}

.tlib-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: #fff;
    border-top: 1px solid var(--c-border);
    font-size: 0.75rem;
}
.tlib-modal-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    background: var(--c-bg-softer);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-ink);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: all 140ms ease;
}
.tlib-modal-nav svg { width: 14px; height: 14px; }
.tlib-modal-nav:hover {
    background: var(--c-brand-50);
    border-color: var(--c-brand-600);
    color: var(--c-brand-800);
}
.tlib-modal-hint { color: var(--c-fg-muted); }
.tlib-modal-hint kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: var(--c-bg-softer);
    border: 1px solid var(--c-border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--c-ink);
    font-weight: 700;
}

/* Mobile / narrow screen modal adjustments */
@media (max-width: 768px) {
    .tlib-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .tlib-modal-header { grid-template-columns: 1fr auto; }
    .tlib-modal-viewports { display: none; }
    .tlib-modal-actions .admin-btn { display: none; }
    .tlib-modal-actions { gap: 0.35rem; }
    .tlib-modal-close { display: inline-flex; }
}