/* MIR Dark Amber Admin Theme Override
   Source: MIR_SPEC.md Section 16 + 04-UI-SPEC.md
   Loaded after Bagisto Admin app.css via View::composer startPush('styles') */

/* === Dark Mode (default) === */
:root {
    --mir-background: hsl(220 16% 7%);
    --mir-dark-bg: hsl(220 18% 6%);
    --mir-card: hsl(220 14% 11%);
    --mir-foreground: hsl(216 25% 92%);
    --mir-muted-foreground: hsl(213 13% 65%);
    --mir-primary: hsl(43 100% 50%);
    --mir-primary-foreground: hsl(220 16% 7%);
    --mir-gold-hover: hsl(43 100% 60%);
    --mir-accent: hsl(207 97% 62%);
    --mir-success: hsl(145 100% 45%);
    --mir-destructive: hsl(8 100% 61%);
    --mir-warning: hsl(40 100% 50%);
    --mir-border: hsl(218 14% 17%);
    --mir-ring: hsl(43 100% 50%);
    --topbar-h: 56px;

    /* Spacing tokens */
    --mir-space-xs: 4px;
    --mir-space-sm: 8px;
    --mir-space-md: 16px;
    --mir-space-lg: 24px;
    --mir-space-xl: 32px;
    --mir-space-2xl: 48px;
}

/* === Light Mode (when Bagisto's .dark class is absent) === */
html:not(.dark) {
    --mir-background: hsl(220 20% 97%);
    --mir-dark-bg: hsl(220 20% 95%);
    --mir-card: hsl(0 0% 100%);
    --mir-foreground: hsl(220 16% 12%);
    --mir-muted-foreground: hsl(213 13% 42%);
    --mir-primary: hsl(43 100% 45%);
    --mir-primary-foreground: hsl(0 0% 100%);
    --mir-gold-hover: hsl(43 100% 38%);
    --mir-accent: hsl(207 97% 48%);
    --mir-success: hsl(145 100% 35%);
    --mir-destructive: hsl(8 100% 50%);
    --mir-warning: hsl(40 100% 45%);
    --mir-border: hsl(220 14% 88%);
    --mir-ring: hsl(43 100% 45%);
}

/* === Body and Page Background === */
body {
    background-color: var(--mir-background) !important;
    color: var(--mir-foreground) !important;
}

/* Background on html element follows theme variables */
html.dark {
    background-color: var(--mir-background);
}
html:not(.dark) {
    background-color: var(--mir-background);
}

/* === Primary Button (was bg-blue-600) === */
.primary-button {
    background-color: var(--mir-primary) !important;
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}

.primary-button:hover {
    background-color: var(--mir-gold-hover) !important;
    border-color: var(--mir-gold-hover) !important;
}

/* === Secondary Button (was border-blue-600 text-blue-600) === */
.secondary-button {
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
    background-color: transparent !important;
}

.secondary-button:hover,
.secondary-button:focus {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
}

/* === Transparent Button === */
.transparent-button {
    color: var(--mir-foreground) !important;
}

.transparent-button:hover,
.transparent-button:focus {
    background-color: var(--mir-card) !important;
}

/* === Sidebar and Header (box-shadow class) === */
.box-shadow {
    background-color: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Sidebar Navigation Active State === */
.bg-blue-600\/10,
[class*="bg-blue-600"] {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
}

.text-blue-600,
[class*="text-blue-600"] {
    color: var(--mir-primary) !important;
}

.border-blue-600,
[class*="border-blue-600"] {
    border-color: var(--mir-primary) !important;
}

/* === Table Rows === */
.bg-white {
    background-color: var(--mir-card) !important;
}

.dark\:bg-gray-950 {
    background-color: var(--mir-background) !important;
}

.dark\:bg-gray-900 {
    background-color: var(--mir-card) !important;
}

/* === Input Fields === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    background-color: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--mir-primary) !important;
    box-shadow: 0 0 0 3px hsla(43, 100%, 50%, 0.15) !important;
}

/* === Shimmer / Empty State === */
.shimmer {
    background-color: var(--mir-border) !important;
}

/* === Breadcrumbs === */
.text-gray-600 {
    color: var(--mir-muted-foreground) !important;
}

/* === Dropdown Menus === */
.bg-white[class*="shadow"],
[class*="dropdown"] .bg-white {
    background-color: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Pagination Active === */
.bg-blue-600 {
    background-color: var(--mir-primary) !important;
}

/* === Flash Messages === */
.bg-green-100,
.bg-green-500,
[class*="bg-green-"] {
    background-color: var(--mir-success) !important;
}

.bg-red-100,
.bg-red-500,
[class*="bg-red-"] {
    background-color: var(--mir-destructive) !important;
}

/* === Focus Rings (was ring-blue-500) === */
.ring-blue-500,
[class*="ring-blue-"] {
    --tw-ring-color: var(--mir-ring) !important;
}

/* === Text Colors === */
.text-gray-800,
.dark\:text-white {
    color: var(--mir-foreground) !important;
}

.text-gray-500,
.text-gray-400 {
    color: var(--mir-muted-foreground) !important;
}

/* === Border Colors === */
.border-gray-200,
.border-gray-300,
.dark\:border-gray-800 {
    border-color: var(--mir-border) !important;
}

/* === Card Backgrounds (general panels) === */
.bg-gray-50,
.dark\:bg-gray-800 {
    background-color: var(--mir-card) !important;
}

/* === Link Colors === */
a.text-blue-600,
a[class*="text-blue-"] {
    color: var(--mir-accent) !important;
}

/* === Hover Row States === */
tr:hover > td,
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
    background-color: var(--mir-border) !important;
}

/* === Sidebar Active Nav Item (amber left border) === */
.border-l-blue-600,
[class*="border-l-blue-"] {
    border-left-color: var(--mir-primary) !important;
}

/* === Phase 8: UI Utility Classes === */

/* Font family utilities */
.font-display {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

.font-body {
    font-family: 'Inter', system-ui, sans-serif !important;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace !important;
}

/* Gold gradient text for page titles */
.gold-gradient-text {
    background: linear-gradient(90deg, hsl(43 100% 50%) 0%, hsl(43 100% 67%) 50%, hsl(43 100% 50%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover lift effect (Phase 9: updated to match prototyper) */
.card-lift {
    transition: all 0.3s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    border-color: hsl(43 100% 50% / 0.25) !important;
    box-shadow: 0 0 30px hsl(43 100% 50% / 0.15) !important;
}

/* Amber glow for popular plan card */
.amber-glow {
    box-shadow: 0 0 20px hsla(43, 100%, 50%, 0.12);
}

/* Icon container for dashboard action cards */
.icon-container-amber {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(43, 100%, 50%, 0.08);
    border: 1px solid hsla(43, 100%, 50%, 0.15);
    border-radius: 10px;
}

/* Page entry animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-page-in {
    animation: fadeInUp 0.3s ease;
}

/* Primary button amber style for MIR CTAs */
.mir-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background-color: var(--mir-primary);
    color: var(--mir-primary-foreground);
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.mir-btn-primary:hover {
    background-color: var(--mir-gold-hover);
    box-shadow: 0 0 20px hsla(43, 100%, 50%, 0.12);
}

/* Outline button */
.mir-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: transparent;
    color: var(--mir-foreground);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--mir-border);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.mir-btn-outline:hover {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.05);
}

/* Ghost button for bulk actions */
.mir-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: transparent;
    color: var(--mir-muted-foreground);
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}
.mir-btn-ghost:hover {
    color: var(--mir-foreground);
    background: hsla(216, 25%, 92%, 0.05);
}

/* Status badges */
.mir-badge-success {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(145, 100%, 45%, 0.15);
    color: var(--mir-success);
}

.mir-badge-destructive {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(8, 100%, 61%, 0.15);
    color: var(--mir-destructive);
}

.mir-badge-muted {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--mir-border);
    color: var(--mir-muted-foreground);
}

/* === Phase 9: Noise Texture Overlay === */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* === Phase 9: Content Above Noise === */
.content-above-noise {
    position: relative;
    z-index: 2;
}

/* =============================================
   HEADER — MIR theme overrides (Lovable prototype)
   Persists in <head> across Turbo body swaps.
   ============================================= */

header.sticky a[target="_blank"] {
    display: none !important;
}

/* Hide notification bell for tenants — will return in a future version */
header.sticky v-notifications {
    display: none !important;
}

/* Always show hamburger menu icon on all viewports (desktop sidebar collapse + mobile drawer) */
header.sticky .icon-menu {
    display: block !important;
    cursor: pointer;
    color: var(--mir-muted-foreground);
}

header.sticky v-notifications .icon-notification {
    color: var(--mir-muted-foreground) !important;
}
header.sticky v-notifications .icon-notification:hover {
    color: var(--mir-primary) !important;
    background: hsla(43, 100%, 50%, 0.08) !important;
}
header.sticky v-notifications .bg-blue-600 {
    background-color: var(--mir-primary) !important;
    color: var(--mir-dark-bg) !important;
}

/* Re-color Bagisto's blue avatar initials button/div to MIR amber theme */
header.sticky button.bg-blue-400,
header.sticky div.bg-blue-400,
header.sticky .bg-blue-400,
header.sticky button:hover.bg-blue-500,
header.sticky button:focus.bg-blue-500,
header.sticky button.bg-blue-600 {
    background: var(--mir-card) !important;
    border: 1px solid hsla(43,100%,50%,0.25) !important;
    color: var(--mir-foreground) !important;
}
header.sticky button.bg-blue-400:hover,
header.sticky button.bg-blue-400:focus,
header.sticky .bg-blue-400:hover {
    background: hsla(43,100%,50%,0.12) !important;
}

header.sticky {
    z-index: 10001;
    height: 56px !important;
    background-color: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
    padding: 0 1rem !important;
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Left section: hamburger + logo */
header.sticky > .flex.items-center.gap-1\.5 {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0;
    flex-shrink: 0;
    justify-self: start;
}
header.sticky > .flex.items-center.gap-1\.5 > a {
    display: flex !important;
    align-items: center !important;
    line-height: 1;
}

/* Right section: icons + avatar */
header.sticky > .flex.items-center.gap-2\.5 {
    justify-self: end;
    flex-shrink: 0;
}

/* Center section: search bar - middle grid column */
/* Vue replaces <v-mega-search> with its template root <div>, so we target the real middle child */
header.sticky > div:nth-child(2),
header.sticky v-mega-search {
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
header.sticky > div:nth-child(2) > div,
header.sticky v-mega-search > div {
    width: 100% !important;
    max-width: 100% !important;
}
header.sticky > div:nth-child(2) input,
header.sticky > div:nth-child(2) .peer,
header.sticky v-mega-search input,
header.sticky v-mega-search .peer,
header.sticky .relative.flex.items-center input {
    background: var(--mir-background) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.5rem !important;
    color: var(--mir-foreground) !important;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    width: 100% !important;
}
header.sticky > div:nth-child(2) input::placeholder,
header.sticky v-mega-search input::placeholder,
header.sticky .relative.flex.items-center input::placeholder {
    color: var(--mir-muted-foreground) !important;
}
header.sticky > div:nth-child(2) input:focus,
header.sticky v-mega-search input:focus,
header.sticky .relative.flex.items-center input:focus {
    border-color: var(--mir-primary) !important;
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15) !important;
}
header.sticky > div:nth-child(2) .absolute,
header.sticky v-mega-search .absolute,
header.sticky .relative.flex.items-center .absolute {
    background: var(--mir-card) !important;
    border: 1px solid hsla(43, 100%, 50%, 0.15) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
header.sticky > div:nth-child(2) .border-b-2.border-blue-600,
header.sticky > div:nth-child(2) .-mb-px.border-blue-600,
header.sticky v-mega-search .border-b-2.border-blue-600,
header.sticky v-mega-search .-mb-px.border-blue-600 {
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
}
header.sticky > div:nth-child(2) a:hover,
header.sticky > div:nth-child(2) .cursor-pointer:hover,
header.sticky v-mega-search a:hover,
header.sticky v-mega-search .cursor-pointer:hover {
    background: hsla(43, 100%, 50%, 0.05) !important;
}
header.sticky > div:nth-child(2) .icon-search,
header.sticky v-mega-search .icon-search,
header.sticky .relative.flex.items-center .icon-search {
    color: var(--mir-muted-foreground) !important;
}

/* === Center Bagisto mega search in header === */
/* (already styled above with flex:1, max-width:36rem, margin:0 auto) */

/* === Mobile Header === */
@media (max-width: 1023px) {
    header.sticky {
        max-width: 100vw !important;
        padding: 0 0.5rem !important;
        gap: 0.25rem !important;
    }
    header.sticky > .flex.items-center.gap-1\.5 {
        gap: 0.375rem !important;
        min-width: 0 !important;
    }
    header.sticky .icon-menu {
        padding: 0.25rem !important;
        font-size: 1.5rem !important;
    }
    header.sticky v-mega-search {
        min-width: 0 !important;
        max-width: none !important;
    }
    header.sticky v-mega-search > div,
    header.sticky v-mega-search .relative.flex {
        width: 100% !important;
        max-width: 100% !important;
    }
    header.sticky v-mega-search input {
        height: 2rem !important;
        font-size: 0.8125rem !important;
        padding-left: 2rem !important;
        padding-right: 0.5rem !important;
    }
    header.sticky v-mega-search .icon-search {
        font-size: 1.25rem !important;
        left: 0.5rem !important;
    }
    header.sticky > .flex.items-center.gap-2\.5 {
        gap: 0.125rem !important;
        flex-shrink: 0 !important;
    }
    header.sticky > .flex.items-center.gap-2\.5 .icon-notification,
    header.sticky > .flex.items-center.gap-2\.5 .icon-light,
    header.sticky > .flex.items-center.gap-2\.5 .icon-dark {
        font-size: 1.25rem !important;
        padding: 0.25rem !important;
    }
    header.sticky .v-mir-avatar-wrap button {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.75rem !important;
    }
}
@media (max-width: 399px) {
    header.sticky v-mega-search input {
        font-size: 0.75rem !important;
    }
}

/* === MIR Mega Search Result Styles === */
.mir-search-thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--mir-muted, rgba(128, 128, 128, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-search-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
}
.mir-search-thumb-placeholder {
    font-size: 1.25rem;
    color: var(--mir-muted-foreground, #888);
}
.mir-search-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.mir-badge-mockup {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}
.mir-badge-image {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.mir-search-explore-link {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mir-primary, hsl(43, 100%, 50%));
    transition: opacity 0.15s;
    text-decoration: none;
}
.mir-search-explore-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}
.mir-search-shimmer .mir-shimmer-line {
    height: 0.75rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, var(--mir-border, #e5e7eb) 25%, var(--mir-background, #f9fafb) 50%, var(--mir-border, #e5e7eb) 75%);
    background-size: 200% 100%;
    animation: mir-shimmer 1.5s infinite;
}
@keyframes mir-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile dropdowns: constrain to viewport */
@media (max-width: 1023px) {
    header.sticky v-notifications .absolute,
    header.sticky v-notifications [class*="min-w-[250px]"] {
        position: fixed !important;
        top: 56px !important;
        right: 0.5rem !important;
        left: auto !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
    }
    header.sticky .v-mir-avatar-wrap > div:not(:first-child) {
        position: fixed !important;
        top: 56px !important;
        right: 0.5rem !important;
        left: auto !important;
        max-width: calc(100vw - 1rem) !important;
        z-index: 99999 !important;
    }
}

/* Sidebar: above noise + dark-bg background per prototype */
.fixed.top-14 {
    z-index: 1000;
    background-color: var(--mir-dark-bg) !important;
    box-shadow: none !important;
}

/* Main content area above noise */
.flex-1.overflow-auto,
.flex-1.overflow-y-auto,
main,
[class*="flex-1"][class*="overflow"] {
    position: relative;
    z-index: 2;
}

/* === Phase 9: Global Font Enforcement === */
html, html.dark {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* CTA buttons: Space Grotesk per prototype (button.tsx uses font-display).
   Sidebar nav items in Bagisto are <a> tags and inherit Inter from body. */
.primary-button,
.secondary-button,
.transparent-button,
[type="submit"],
[type="reset"] {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* Table headers: Space Grotesk */
th,
thead td {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* Tab text: Space Grotesk */
[role="tab"],
.border-b-2 {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* Dropdown/menu items: Inter (body font) */
[role="menu"],
[role="listbox"],
[role="option"],
.dropdown-list {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Breadcrumbs: Inter */
[class*="breadcrumb"],
.breadcrumbs {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Form inputs: Inter (body font) for text entry */
input,
select,
textarea,
optgroup {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Amber glow on hover */
.amber-glow-hover:hover {
    box-shadow: 0 8px 20px hsl(43 100% 50% / 0.15) !important;
}

/* === Phase 9: Border-Radius Enforcement (rounded-xl) === */
.box-shadow,
.rounded-lg:not(nav .rounded-lg):not(.icon-container-amber):not(.w-9):not(.w-10):not(.h-5):not(.h-6),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    border-radius: 0.75rem !important;
}

/* Preserve rounded-full for toggles/switches (track + knob) */
.rounded-full,
label.rounded-full,
button.rounded-full,
span.rounded-full {
    border-radius: 9999px !important;
}

/* === Toggle / Switch overrides === */
/* Bagisto toggle: label with peer-checked:bg-blue-600 — fix track + knob */
label[class*="peer-checked:bg-blue-600"],
label.peer-checked\:bg-blue-600 {
    background-color: var(--mir-border) !important;   /* off state: subtle track */
    border-radius: 9999px !important;
}
.peer:checked ~ label[class*="peer-checked:bg-blue-600"],
.peer:checked ~ label.peer-checked\:bg-blue-600 {
    background-color: var(--mir-primary) !important;  /* on state: amber */
}
/* Bagisto toggle knob (::after pseudo) */
label[class*="peer-checked:bg-blue-600"]::after {
    border-color: transparent !important;
    background-color: white !important;
    border-radius: 9999px !important;
}

/* MIR custom toggle button (settings page) */
button.rounded-full[class*="w-10"][class*="h-6"],
button.rounded-full.w-10 {
    border-radius: 9999px !important;
}
button.rounded-full[class*="w-10"] > span.rounded-full {
    border-radius: 9999px !important;
}

/* Modal containers */
[class*="modal"] > div > div,
.fixed[class*="z-"][class*="bg-"] > div {
    border-radius: 0.75rem !important;
}

/* Dropdown menus */
.absolute[class*="shadow"],
.absolute[class*="bg-white"],
.absolute[class*="bg-card"] {
    border-radius: 0.75rem !important;
}

/* ====================================================================
   SIDEBAR NAV — match Lovable prototype Sidebar.tsx exactly
   Prototype: px-3 py-2.5 rounded-lg text-sm, gap-3 (12px),
   bg-primary/8 + border-l-[3px] border-primary for active,
   text-muted-foreground for inactive, hover:bg-primary/5,
   ChevronDown w-4 h-4 rotate-180 when expanded,
   Sub-items: ml-4 pl-4 border-l border-border/50
   ==================================================================== */

/* --- Top-level nav links (both active and inactive) --- */
nav.grid > .px-4 > a {
    padding: 10px 12px !important;
    gap: 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-font-smoothing: antialiased;
    border-left: 3px solid transparent;
    color: var(--mir-muted-foreground) !important;
}

/* Nav labels */
nav.grid > .px-4 > a p {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: inherit !important;
}

/* Nav icons: 20px to match prototype w-5 h-5 */
nav.grid > .px-4 > a > span[class*="icon-"]:first-child {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* --- Active sidebar item (Bagisto applies bg-blue-600 when route matches) --- */
nav.grid > .px-4 > a.bg-blue-600,
nav.grid > .px-4 > a[class*="bg-blue-600"] {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    border-left: 3px solid var(--mir-primary) !important;
    border-radius: 8px !important;
    color: var(--mir-foreground) !important;
}

/* Active item text: override Bagisto's white */
nav.grid > .px-4 > a.bg-blue-600 p,
nav.grid > .px-4 > a[class*="bg-blue-600"] p {
    color: var(--mir-foreground) !important;
}

/* Active item icon: amber */
nav.grid > .px-4 > a.bg-blue-600 > span:first-child,
nav.grid > .px-4 > a[class*="bg-blue-600"] > span:first-child {
    color: var(--mir-primary) !important;
}

/* --- Expanded parent (non-active route, toggled open via chevron) --- */
nav.grid > .px-4 > a.mir-parent-expanded {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    border-left: 3px solid var(--mir-primary) !important;
    border-radius: 8px !important;
    color: var(--mir-foreground) !important;
}
nav.grid > .px-4 > a.mir-parent-expanded > span:first-child {
    color: var(--mir-primary) !important;
}
nav.grid > .px-4 > a.mir-parent-expanded p {
    color: var(--mir-foreground) !important;
}

/* --- Hover on inactive items --- */
nav.grid > .px-4 > a:not(.bg-blue-600):not([class*="bg-blue-600"]):not(.mir-parent-expanded):hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}

/* --- Kill ALL Bagisto hover flyout submenus — JS controls via .mir-submenu --- */
nav.grid .px-4 > div:not(:first-child):not(.mir-submenu) {
    display: none !important;
}
nav.grid .px-4:hover > div:not(:first-child):not(.mir-submenu),
nav.grid .px-4.inactive:hover > div:not(:first-child):not(.mir-submenu) {
    display: none !important;
}

/* Controlled submenu container — JS manages display/maxHeight */
.mir-submenu {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    z-index: auto !important;
}

/* --- Collapsed sidebar: override base .mir-submenu styles so Bagisto's
       native Tailwind flyout classes (position:fixed, left:70px, group-hover)
       can take effect. Uses high specificity to beat expanded-mode rules. --- */
.sidebar-collapsed nav.grid .px-4 > .mir-submenu {
    position: fixed !important;
    width: auto !important;
    min-width: 180px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: none !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    border-left: none !important;
    background: var(--mir-dark-bg) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3) !important;
}

.sidebar-collapsed .mir-chevron-indicator {
    display: none !important;
}

.sidebar-collapsed nav.grid .px-4 > .mir-submenu a {
    padding: 0.5rem 1.25rem !important;
    border-left: none !important;
    margin-left: 0 !important;
}

/* --- Submenu child container: left guide line (border-l border-border/50) --- */
nav.grid .px-4 > .mir-submenu {
    margin-left: 16px !important;
    margin-top: 4px !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
    padding-bottom: 4px !important;
    border-left: 1px solid var(--mir-border) !important;
    border-radius: 0 !important;
    gap: 2px !important;
}

/* --- Child links --- */
nav.grid .px-4 > .mir-submenu a {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border-left: none !important;
    transition: all 0.2s ease !important;
    display: block !important;
    color: var(--mir-muted-foreground) !important;
}

/* Child: active — use exact class selector, NOT [class*="text-blue"] which
   falsely matches hover:text-blue-600 that Bagisto puts on ALL child links */
nav.grid .px-4 > .mir-submenu a.text-blue-600 {
    color: var(--mir-primary) !important;
    font-weight: 500 !important;
}

/* Child: hover (inactive) */
nav.grid .px-4 > .mir-submenu a:not(.text-blue-600):hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}

/* Child: hover keeps amber on active */
nav.grid .px-4 > .mir-submenu a.text-blue-600:hover {
    color: var(--mir-primary) !important;
}

/* --- Chevron indicator (visual-only, not interactive) --- */
.mir-chevron-indicator {
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    color: var(--mir-muted-foreground) !important;
    pointer-events: none !important;
}
.mir-chevron-indicator svg {
    transition: transform 0.2s ease !important;
    width: 16px !important;
    height: 16px !important;
}

/* --- Sidebar collapse button at bottom --- */
.fixed.bottom-0.w-full.cursor-pointer {
    background-color: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
}
.fixed.bottom-0.w-full.cursor-pointer:hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
}


/* ====================================================================
   NATIVE BAGISTO SIDEBAR THEME
   Applies MIR dark-amber branding to both tenant admin and super admin
   sidebars. Targets Bagisto's Tailwind utility classes.
   ==================================================================== */

/* --- Sidebar container --- */
.fixed.top-14.z-\[1000\].h-full.w-\[270px\],
.dark .fixed.top-14.z-\[1000\].h-full.w-\[270px\] {
    background: var(--mir-dark-bg) !important;
    border-right: 1px solid var(--mir-border) !important;
    box-shadow: none !important;
}

/* --- Sidebar font family (force on all text elements, preserve icon font) --- */
.fixed.top-14.z-\[1000\] nav.grid,
.fixed.top-14.z-\[1000\] nav.grid a,
.fixed.top-14.z-\[1000\] nav.grid p,
.fixed.top-14.z-\[1000\] nav.grid div {
    font-family: 'Inter', system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
.fixed.top-14.z-\[1000\] nav.grid {
    font-size: 14px;
    gap: 2px !important;
}

/* --- Menu item rows --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4 > a {
    color: var(--mir-muted-foreground) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border-left: 3px solid transparent !important;
    padding: 10px 12px !important;
    gap: 12px !important;
}

.fixed.top-14.z-\[1000\] nav.grid > .px-4 > a:hover {
    background-color: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}

/* --- Active menu item (parent link) --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4.active > a {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    color: var(--mir-primary) !important;
    border-left-color: var(--mir-primary) !important;
    border-radius: 8px !important;
}

/* Override Bagisto's blue active bg */
.fixed.top-14.z-\[1000\] nav.grid > .px-4.active > a.bg-blue-600,
.fixed.top-14.z-\[1000\] nav.grid > .px-4.active > a[class*="bg-blue"] {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
}

/* --- Active item text/label --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4.active > a p {
    color: var(--mir-primary) !important;
}

/* --- Active item icon --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4.active > a span[class^="icon-"] {
    color: var(--mir-primary) !important;
}

/* --- Inactive item labels --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4 > a p {
    color: var(--mir-muted-foreground) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* --- Inactive item icons --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4 > a span[class^="icon-"] {
    color: var(--mir-muted-foreground) !important;
    font-size: 20px !important;
}

/* --- Submenu flyout panel --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4 > div[class*="bg-gray-100"],
.fixed.top-14.z-\[1000\] nav.grid > .px-4 > div.bg-gray-100,
.dark .fixed.top-14.z-\[1000\] nav.grid > .px-4 > div.dark\:bg-gray-950 {
    background: var(--mir-dark-bg) !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
}

/* --- Submenu child links --- */
.fixed.top-14.z-\[1000\] nav.grid > .px-4 > div a {
    color: var(--mir-muted-foreground) !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
}

.fixed.top-14.z-\[1000\] nav.grid > .px-4 > div a:hover {
    color: var(--mir-foreground) !important;
}

/* Active child link */
.fixed.top-14.z-\[1000\] nav.grid > .px-4 > div a[class*="text-blue"] {
    color: var(--mir-primary) !important;
}

/* --- Sidebar collapse button --- */
.fixed.top-14.z-\[1000\] ~ [class*="fixed bottom-0"],
.fixed.top-14.z-\[1000\] > [class*="fixed bottom-0"],
div[class*="fixed bottom-0"][class*="max-w-\[270px\]"] {
    background: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

.fixed.top-14.z-\[1000\] ~ [class*="fixed bottom-0"]:hover,
.fixed.top-14.z-\[1000\] > [class*="fixed bottom-0"]:hover,
div[class*="fixed bottom-0"][class*="max-w-\[270px\]"]:hover {
    background: hsla(43, 100%, 50%, 0.05) !important;
}

.fixed.top-14.z-\[1000\] > [class*="fixed bottom-0"] span[class^="icon-"],
div[class*="fixed bottom-0"][class*="max-w-\[270px\]"] span[class^="icon-"] {
    color: var(--mir-muted-foreground) !important;
}

/* --- Collapsed sidebar adjustments --- */
.sidebar-collapsed .fixed.top-14.z-\[1000\] nav.grid > .px-4 > a {
    border-left-color: transparent !important;
}

/* Desktop sidebar collapsed mode */
.fixed.top-14.mir-sidebar-is-collapsed {
    width: 64px !important;
    min-width: 64px !important;
    transition: width 0.2s ease;
    overflow: hidden;
}
.fixed.top-14.mir-sidebar-is-collapsed nav.grid {
    padding: 16px 12px !important;
    align-items: center;
}

/* Main content padding transition (Bagisto toggles between pl-[270px] and pl-[69px]
   via .group/container.sidebar-collapsed — JS adds that class when our hamburger
   collapses the sidebar). Smooth out the shift. */
.group\/container > [class*="pl-[270px]"],
.group\/container > [class*="pl-\[270px\]"] {
    transition: padding 0.2s ease;
}
/* Hide the bottom sidebar collapse toggle — JS also hides it in sidebar-overrides */
.fixed.top-14.z-\[1000\] > .fixed.bottom-0 {
    display: none !important;
}

/* ── Sidebar shell: flex column so plan widget sticks to bottom ── */
/* Bagisto uses h-full (100vh) starting at top:56px → 56px overflows viewport.
   Cap to calc(100vh - 56px) so everything fits inside the visible area. */
.fixed.top-14 {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
}

/* Sidebar scroll container: takes remaining space after plan widget */
/* Override Bagisto's h-[calc(100vh-100px)] — flex:1 handles sizing correctly */
.fixed.top-14 .journal-scroll {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
}

/* ── Sidebar nav: override grid → flex column so spacer can grow ── */
.fixed.top-14 nav.grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-height: 100%;
    padding: 16px 8px !important;
}
.mir-nav-spacer {
    flex: 1 1 auto !important;
    min-height: 8px !important;
}
.mir-nav-separator {
    border-top: 1px solid var(--mir-border);
    margin: 8px 8px;
}

.fixed.top-14.mir-sidebar-is-collapsed nav.grid > .px-4 > a p,
.fixed.top-14.mir-sidebar-is-collapsed nav.grid > .px-4 > a .mir-chevron-indicator {
    display: none !important;
}
.fixed.top-14.mir-sidebar-is-collapsed nav.grid > .px-4 > a {
    justify-content: center !important;
    padding: 10px 0 !important;
    border-left: none !important;
    border-radius: 8px !important;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
.fixed.top-14.mir-sidebar-is-collapsed nav.grid > .px-4 > a.bg-blue-600,
.fixed.top-14.mir-sidebar-is-collapsed nav.grid > .px-4 > a[class*="bg-blue-600"],
.fixed.top-14.mir-sidebar-is-collapsed nav.grid > .px-4 > a.mir-parent-expanded,
.fixed.top-14.mir-sidebar-is-collapsed nav.grid > .px-4.active > a {
    border-left: none !important;
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    border-radius: 8px !important;
}
.fixed.top-14.mir-sidebar-is-collapsed .mir-submenu {
    display: none !important;
}
.fixed.top-14.mir-sidebar-is-collapsed .mir-sidebar-plan-widget .mir-sidebar-plan-name,
.fixed.top-14.mir-sidebar-is-collapsed .mir-sidebar-plan-widget .mir-sidebar-plan-bar,
.fixed.top-14.mir-sidebar-is-collapsed .mir-sidebar-plan-widget .mir-sidebar-plan-usage {
    display: none !important;
}
.fixed.top-14.mir-sidebar-is-collapsed .mir-sidebar-plan-widget {
    text-align: center !important;
    padding: 8px 4px !important;
}
.fixed.top-14.mir-sidebar-is-collapsed .mir-sidebar-plan-widget::before {
    display: none;
}
.fixed.top-14.mir-sidebar-is-collapsed .mir-sidebar-plan-widget::after {
    content: attr(data-pct);
    display: block;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--mir-primary);
    line-height: 1;
}
.fixed.top-14.mir-sidebar-is-collapsed .mir-sidebar-plan-widget .mir-sidebar-plan-pill {
    font-size: 9px !important;
    padding: 2px 4px !important;
}
@media (max-width: 1023px) {
    .fixed.top-14.mir-sidebar-is-collapsed {
        width: 270px !important;
        min-width: 270px !important;
    }
}

/* --- Sidebar scrollbar (Webkit) --- */
.fixed.top-14.z-\[1000\] .journal-scroll::-webkit-scrollbar {
    width: 4px;
}
.fixed.top-14.z-\[1000\] .journal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.fixed.top-14.z-\[1000\] .journal-scroll::-webkit-scrollbar-thumb {
    background: var(--mir-border);
    border-radius: 4px;
}

/* --- Mobile drawer (Bagisto native) --- */
.fixed[class*="z-\[10002\]"] {
    background: var(--mir-dark-bg) !important;
}

/* Drawer close button */
.mir-drawer-close-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10003;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: var(--mir-card);
    color: var(--mir-muted-foreground);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.mir-drawer-close-btn:hover {
    background: hsla(43,100%,50%,0.12);
    color: var(--mir-foreground);
}
@media (min-width: 1024px) {
    .mir-drawer-close-btn { display: none; }
}

/* Drawer backdrop overlay */
.mir-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
}
@media (min-width: 1024px) {
    .mir-drawer-backdrop { display: none; }
}

/* Sidebar plan widget — flows as last child of flex-column sidebar shell */
.mir-sidebar-plan-widget {
    flex-shrink: 0;
    width: 100%;
    padding: 12px 16px;
    border-top: none;
    background: var(--mir-dark-bg);
    box-sizing: border-box;
}
/* Separator line above plan widget — matches the nav separator exactly */
.mir-sidebar-plan-widget::before {
    content: '';
    display: block;
    height: 0;
    border-top: 1px solid var(--mir-border);
    margin: -4px 0 12px 0;
}
.mir-sidebar-plan-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.mir-sidebar-plan-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.05em;
    background: hsla(43, 100%, 50%, 0.12);
    color: var(--mir-primary);
    border: 1px solid hsla(43, 100%, 50%, 0.2);
}
.mir-sidebar-plan-usage {
    font-size: 11px;
    color: var(--mir-muted-foreground);
    font-family: 'Inter', sans-serif;
    margin-bottom: 6px;
}
.mir-sidebar-plan-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}
.mir-sidebar-plan-bar-fill {
    height: 100%;
    background: var(--mir-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.fixed[class*="z-\[10002\]"] nav.grid,
.fixed[class*="z-\[10002\]"] nav.grid a,
.fixed[class*="z-\[10002\]"] nav.grid p,
.fixed[class*="z-\[10002\]"] nav.grid div {
    font-family: 'Inter', system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
.fixed[class*="z-\[10002\]"] nav.grid {
    font-size: 14px;
    gap: 4px !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div > a {
    color: var(--mir-muted-foreground) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border-radius: 0.5rem !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border-left: 3px solid transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fixed[class*="z-\[10002\]"] nav.grid > div > a p {
    color: var(--mir-muted-foreground) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div > a span[class^="icon-"] {
    color: var(--mir-muted-foreground) !important;
    font-size: 20px !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div > a:hover {
    background: hsla(43, 100%, 50%, 0.05) !important;
    color: var(--mir-foreground) !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div.active > a {
    background: hsla(43, 100%, 50%, 0.08) !important;
    color: var(--mir-primary) !important;
    border-left-color: var(--mir-primary) !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

/* Override Bagisto's blue active bg in drawer */
.fixed[class*="z-\[10002\]"] nav.grid > div.active > a.bg-blue-600,
.fixed[class*="z-\[10002\]"] nav.grid > div.active > a[class*="bg-blue"],
.fixed[class*="z-\[10002\]"] nav.grid > div > a.bg-blue-600,
.fixed[class*="z-\[10002\]"] nav.grid > div > a[class*="bg-blue"],
.fixed[class*="z-\[10002\]"] nav.grid a.bg-blue-600,
.fixed[class*="z-\[10002\]"] a.bg-blue-600 {
    background-color: hsla(43, 100%, 50%, 0.08) !important;
    background: hsla(43, 100%, 50%, 0.08) !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div.active > a p {
    color: var(--mir-primary) !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div.active > a span[class^="icon-"] {
    color: var(--mir-primary) !important;
}

/* Override active white text from Bagisto (when bg-blue-600 makes text white) */
.fixed[class*="z-\[10002\]"] nav.grid > div.active > a .text-white,
.fixed[class*="z-\[10002\]"] nav.grid > div > a.bg-blue-600 p,
.fixed[class*="z-\[10002\]"] nav.grid > div > a.bg-blue-600 span[class^="icon-"] {
    color: var(--mir-primary) !important;
}

/* Drawer submenu links */
.fixed[class*="z-\[10002\]"] nav.grid > div > div a {
    color: var(--mir-muted-foreground) !important;
    font-size: 13px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div > div a:hover {
    color: var(--mir-foreground) !important;
}

.fixed[class*="z-\[10002\]"] nav.grid > div > div a[class*="text-blue"] {
    color: var(--mir-primary) !important;
}

/* --- Sidebar content column padding adjustment (match sidebar width) --- */
.group\/container.sidebar-not-collapsed > div.ltr\:pl-\[270px\] {
    padding-left: 270px;
}
.group\/container.sidebar-collapsed > div.ltr\:pl-\[270px\] {
    padding-left: 69px;
}
[dir="rtl"] .group\/container.sidebar-not-collapsed > div.rtl\:pr-\[270px\] {
    padding-right: 270px;
}
[dir="rtl"] .group\/container.sidebar-collapsed > div.rtl\:pr-\[270px\] {
    padding-right: 69px;
}

/* --- Responsive: Remove sidebar padding below lg (1024px) where sidebar is hidden --- */
@media (max-width: 1023px) {
    .group\/container > div.ltr\:pl-\[270px\],
    .group\/container.sidebar-not-collapsed > div.ltr\:pl-\[270px\],
    .group\/container.sidebar-collapsed > div.ltr\:pl-\[270px\] {
        padding-left: 0 !important;
    }
    [dir="rtl"] .group\/container > div.rtl\:pr-\[270px\],
    [dir="rtl"] .group\/container.sidebar-not-collapsed > div.rtl\:pr-\[270px\],
    [dir="rtl"] .group\/container.sidebar-collapsed > div.rtl\:pr-\[270px\] {
        padding-right: 0 !important;
    }
    .group\/container {
        gap: 0 !important;
    }
}

/* --- Hide "Powered by Bagisto" footer --- */
div[data-turbo-body] > .mt-auto {
    display: none !important;
}

/* --- Hide Bagisto logo in avatar dropdown --- */
header.sticky img[src*="bagisto"],
header.sticky img[src*="cache/logo"] {
    display: none !important;
}

/* Hide default Bagisto logo globally (header + drawer) to prevent flash before JS injects MIR SVGs.
   #logo-image is ONLY on the default fallback; custom superadmin logos use a different element. */
#logo-image {
    display: none !important;
}

/* Hide native Bagisto version row in dropdown (img + version text) */
.flex.items-center.gap-1\.5.border.px-5.py-2\.5:has(img[src*="bagisto"]),
.flex.items-center.gap-1\.5.border.px-5.py-2\.5:has(img[src*="cache/logo"]) {
    display: none !important;
}

/* --- Mobile drawer: MIR theme styling (preserve native logo) --- */
.fixed[class*="z-\[10002\]"] .flex.items-center.justify-between {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--mir-primary);
}

/* --- Avatar dropdown: hide Bagisto version row --- */
.v-mir-avatar-wrap img[src*="bagisto"],
.v-mir-avatar-wrap img[src*="cache/logo"] {
    display: none !important;
}
.v-mir-avatar-wrap .flex.items-center.gap-1\.5:has(img[src*="bagisto"]),
.v-mir-avatar-wrap .flex.items-center.gap-1\.5:has(img[src*="cache/logo"]) {
    display: none !important;
}

/* ====================================================================
   MIR REUSABLE COMPONENT LIBRARY
   Define once, use everywhere. All MIR pages and Bagisto overrides
   should reference these classes for visual consistency.
   ==================================================================== */

/* === Buttons: Base === */
.mir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    text-decoration: none;
}

.mir-btn:disabled,
.mir-btn-primary:disabled,
.mir-btn-outline:disabled,
.mir-btn-ghost:disabled,
.mir-btn-destructive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Destructive button */
.mir-btn-destructive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    background-color: var(--mir-destructive);
    color: white;
}
.mir-btn-destructive:hover {
    opacity: 0.9;
    box-shadow: 0 0 20px hsla(8, 100%, 61%, 0.15);
}

/* Size variants */
.mir-btn-sm,
.mir-btn-primary.mir-btn-sm,
.mir-btn-outline.mir-btn-sm,
.mir-btn-ghost.mir-btn-sm,
.mir-btn-destructive.mir-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    gap: 0.375rem;
}

.mir-btn-lg,
.mir-btn-primary.mir-btn-lg,
.mir-btn-outline.mir-btn-lg,
.mir-btn-ghost.mir-btn-lg,
.mir-btn-destructive.mir-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    gap: 0.5rem;
}

/* Icon-only button */
.mir-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Loading spinner inside button */
.mir-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.mir-btn-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--mir-border);
    border-top-color: var(--mir-primary-foreground);
    border-radius: 50%;
    animation: mir-spin 0.6s linear infinite;
}
@keyframes mir-spin {
    to { transform: rotate(360deg); }
}

/* === Form Elements === */
.mir-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mir-input::placeholder {
    color: var(--mir-muted-foreground);
}
.mir-input:focus {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}
.mir-input-error {
    border-color: var(--mir-destructive) !important;
}
.mir-input-error:focus {
    box-shadow: 0 0 0 2px hsla(8, 100%, 61%, 0.15) !important;
}
.mir-input:disabled,
.mir-input-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.mir-input:read-only {
    opacity: 0.6;
}

.mir-select {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    transition: border-color 0.2s;
    appearance: auto;
}
.mir-select:focus {
    border-color: var(--mir-primary);
}

.mir-textarea {
    width: 100%;
    min-height: 5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mir-textarea:focus {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}

.mir-label {
    display: block;
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    color: var(--mir-muted-foreground);
    margin-bottom: 0.375rem;
}

.mir-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 2px solid var(--mir-border);
    appearance: none;
    cursor: pointer;
    transition: all 0.15s;
}
.mir-checkbox:checked {
    background: var(--mir-primary);
    border-color: var(--mir-primary);
}

.mir-toggle {
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--mir-border);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.mir-toggle.active {
    background: var(--mir-primary);
}
.mir-toggle > span {
    position: absolute;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--mir-foreground);
    transition: left 0.2s;
}
.mir-toggle:not(.active) > span { left: 0.25rem; }
.mir-toggle.active > span { left: 1.375rem; }

.mir-search-input {
    width: 100%;
    height: 2.25rem;
    padding-left: 2.25rem;
    padding-right: 0.75rem;
    border-radius: 0.5rem;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.mir-search-input::placeholder {
    color: var(--mir-muted-foreground);
}
.mir-search-input:focus {
    border-color: var(--mir-primary);
}

.mir-file-upload {
    border: 2px dashed var(--mir-border);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-file-upload:hover,
.mir-file-upload.dragover {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.04);
}

/* === Cards === */
.mir-card {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
}

.mir-card-lift {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}
.mir-card-lift:hover {
    transform: translateY(-4px);
    border-color: hsla(43, 100%, 50%, 0.25);
    box-shadow: 0 0 30px hsla(43, 100%, 50%, 0.15);
}

.mir-stat-card {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.mir-stat-card .stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mir-primary);
}
.mir-stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--mir-muted-foreground);
    margin-bottom: 0.5rem;
}

/* === Navigation: Sub-filter Chips === */
.mir-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    background: var(--mir-card);
    cursor: pointer;
    transition: all 0.2s;
}
.mir-chip-active {
    border-color: var(--mir-primary);
    color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.05);
}
.mir-chip:hover:not(.mir-chip-active) {
    border-color: var(--mir-muted-foreground);
}

/* === Feedback: Progress Bar === */
.mir-progress-bar {
    width: 100%;
    height: 0.375rem;
    border-radius: 9999px;
    background: hsla(43, 100%, 50%, 0.08);
    overflow: hidden;
}
.mir-progress-bar > .fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--mir-primary);
    transition: width 0.3s ease;
}
.mir-progress-bar > .fill.danger {
    background: var(--mir-destructive);
}

/* === Feedback: Toasts === */
.mir-toast {
    position: fixed;
    z-index: 10000;
    border-radius: 0.75rem;
    padding: 1rem;
    width: 20rem;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.mir-toast-success { border-left: 3px solid var(--mir-success); }
.mir-toast-error { border-left: 3px solid var(--mir-destructive); }
.mir-toast-warning { border-left: 3px solid var(--mir-warning); }
.mir-toast-info { border-left: 3px solid var(--mir-accent); }

/* === Bagisto <v-flash-group> MIR restyle ===
   Override the default pill-shaped flash notifications to match MIR's
   card + left accent bar pattern. Targets the transition-group wrapper
   and each flash-item div rendered inside it. */
body .fixed.top-5.z-\[10003\] {
    right: 1.25rem !important;
}
body .fixed.top-5.z-\[10003\] > div {
    border-radius: 0.75rem !important;
    padding: 12px 18px !important;
    background: var(--mir-card) !important;
    color: var(--mir-foreground) !important;
    border: 1px solid var(--mir-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border-left: 4px solid var(--mir-accent) !important;
    min-width: 260px;
}
body .fixed.top-5.z-\[10003\] > div[style*="background: #059669"],
body .fixed.top-5.z-\[10003\] > div[style*="background:#059669"] {
    border-left-color: var(--mir-success) !important;
}
body .fixed.top-5.z-\[10003\] > div[style*="background: #EF4444"],
body .fixed.top-5.z-\[10003\] > div[style*="background:#EF4444"] {
    border-left-color: var(--mir-destructive) !important;
}
body .fixed.top-5.z-\[10003\] > div[style*="background: #FACC15"],
body .fixed.top-5.z-\[10003\] > div[style*="background:#FACC15"] {
    border-left-color: var(--mir-warning) !important;
}
body .fixed.top-5.z-\[10003\] > div[style*="background: #0284C7"],
body .fixed.top-5.z-\[10003\] > div[style*="background:#0284C7"] {
    border-left-color: var(--mir-accent) !important;
}
body .fixed.top-5.z-\[10003\] > div p {
    color: var(--mir-foreground) !important;
    font-size: 0.8125rem;
    font-weight: 600;
}
body .fixed.top-5.z-\[10003\] .icon-toast-done {
    display: none !important;
}
body .fixed.top-5.z-\[10003\] span.cursor-pointer.underline {
    display: none !important;
}

/* === Feedback: Skeleton Loader === */
.mir-skeleton {
    background: linear-gradient(90deg, var(--mir-border) 25%, hsla(218, 14%, 22%, 1) 50%, var(--mir-border) 75%);
    background-size: 200% 100%;
    animation: mir-shimmer 1.5s ease infinite;
    border-radius: 0.5rem;
}
@keyframes mir-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Feedback: Empty State === */
.mir-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    border-radius: 0.75rem;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
}
.mir-empty-state .icon {
    color: var(--mir-muted-foreground);
    opacity: 0.3;
    margin-bottom: 0.75rem;
}
.mir-empty-state .title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    color: var(--mir-foreground);
}
.mir-empty-state .description {
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
    margin-top: 0.25rem;
}

/* === Feedback: Additional Badges === */
.mir-badge-warning {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(40, 100%, 50%, 0.15);
    color: var(--mir-warning);
}

.mir-badge-info {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: hsla(207, 97%, 62%, 0.15);
    color: var(--mir-accent);
}

/* === Data Display: Tables === */
.mir-table {
    width: 100%;
    font-size: 0.875rem;
    color: var(--mir-foreground);
}
.mir-table thead tr {
    border-bottom: 1px solid var(--mir-border);
    background: transparent;
}
.mir-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
}
.mir-table tbody tr {
    border-bottom: 1px solid var(--mir-border);
    transition: background 0.15s;
}
.mir-table tbody tr:last-child {
    border-bottom: none;
}
.mir-table tbody tr:hover {
    background: hsla(43, 100%, 50%, 0.05);
}
.mir-table td {
    padding: 0.875rem 1rem;
}

/* === Tables V2 Helpers === */
.mir-table-wrap {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
    overflow: hidden;
}
.mir-table-wrap .mir-table {
    border: none;
}

.mir-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mir-border);
    flex-wrap: wrap;
}
.mir-table-toolbar .mir-table-results-count {
    font-size: 0.8125rem;
    color: var(--mir-muted-foreground);
    white-space: nowrap;
}

.mir-table-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.mir-table-pagination a,
.mir-table-pagination button,
.mir-table-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: var(--mir-muted-foreground);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.mir-table-pagination a:hover,
.mir-table-pagination button:hover {
    background: hsla(43, 100%, 50%, 0.1);
    color: var(--mir-accent);
}
.mir-table-pagination .active,
.mir-table-pagination span[aria-current="page"] {
    background: var(--mir-accent);
    color: #000;
    font-weight: 600;
}
.mir-table-pagination .disabled {
    opacity: 0.3;
    pointer-events: none;
}

.mir-table-status {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.mir-table-status--success { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.mir-table-status--warning { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.mir-table-status--danger  { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.mir-table-status--info    { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.mir-table-status--muted   { background: rgba(139, 139, 163, 0.12); color: #8b8ba3; }
.mir-table-status--accent  { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.mir-table-status--pending { background: hsla(213, 13%, 65%, 0.1); color: hsl(213, 13%, 65%); }
.mir-table-status--processing { background: hsla(43, 100%, 50%, 0.1); color: hsl(43, 100%, 50%); }
.mir-table-status--ready   { background: hsla(145, 100%, 45%, 0.1); color: hsl(145, 100%, 45%); }
.mir-table-status--failed  { background: hsla(8, 100%, 61%, 0.1); color: hsl(8, 100%, 61%); }

.mir-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.5rem;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mir-table-action:hover {
    background: hsla(43, 100%, 50%, 0.1);
    color: var(--mir-accent);
}
.mir-table-action--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.mir-table-action svg {
    width: 1rem;
    height: 1rem;
}

.mir-table-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--mir-muted-foreground);
    font-size: 0.875rem;
}

.mir-table-thumb {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    object-fit: cover;
    flex-shrink: 0;
}
.mir-table-thumb-placeholder {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: var(--mir-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-table-thumb-placeholder svg {
    width: 1rem;
    height: 1rem;
    color: var(--mir-muted-foreground);
}

.mir-table-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
}
.mir-table-filter-form label {
    display: block;
    font-size: 0.6875rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    margin-bottom: 0.25rem;
}
.mir-table-filter-form select,
.mir-table-filter-form input[type="text"],
.mir-table-filter-form input[type="date"],
.mir-table-filter-form input[type="search"] {
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--mir-foreground);
    transition: border-color 0.15s;
}
.mir-table-filter-form select:focus,
.mir-table-filter-form input:focus {
    outline: none;
    border-color: var(--mir-accent);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}

.mir-table-stat-card {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
}
.mir-table-stat-card .stat-label {
    font-size: 0.6875rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
}
.mir-table-stat-card .stat-value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.mir-table-variant-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.mir-table-variant-chip--primary {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}
.mir-table-variant-chip--primary:hover {
    background: rgba(59, 130, 246, 0.4);
    color: #fff;
}
.mir-table-variant-chip--default {
    background: var(--mir-muted);
    color: var(--mir-muted-foreground);
}
.mir-table-variant-chip--default:hover {
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-foreground);
}
.mir-table-variant-chip--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* === Data Display: Key-Value Row === */
.mir-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mir-border);
}
.mir-kv-row:last-child {
    border-bottom: none;
}
.mir-kv-row .key {
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
}
.mir-kv-row .value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mir-foreground);
}

/* ====================================================================
   BAGISTO NATIVE PAGE OVERRIDES
   Target Bagisto's component class names to apply MIR theme globally
   without modifying any Bagisto core files.
   ==================================================================== */

/* === DataGrid: Table Container === */
.table-responsive.box-shadow,
.table-responsive.box-shadow.grid {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
}

/* === DataGrid: Header Row === */
.table-responsive .row.grid.border-b.bg-gray-50,
.table-responsive .row.grid.font-semibold,
.row.grid.min-h-\[47px\].items-center.bg-gray-50 {
    background: transparent !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-muted-foreground) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* === DataGrid: Body Rows === */
.table-responsive .row.grid.border-b:not(.bg-gray-50):not(.font-semibold) {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}
.table-responsive .row.grid.border-b:hover {
    background: hsla(43, 100%, 50%, 0.05) !important;
}

/* === DataGrid: Empty State === */
.table-responsive .row.grid.text-center {
    color: var(--mir-muted-foreground) !important;
}

/* === DataGrid: Toolbar === */
.mt-7.flex.items-center.justify-between {
    color: var(--mir-foreground) !important;
}

/* === DataGrid: Search Input === */
.table-responsive ~ div input[type="text"],
[class*="datagrid"] input,
.flex.items-center.justify-between input[type="text"] {
    background: var(--mir-background) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
    border-radius: 0.5rem !important;
}

/* === DataGrid: Filter Button === */
.rounded-md.border.bg-white {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === DataGrid: Mass Action Checkbox (blue -> amber) === */
.peer-checked\:icon-checked.peer-checked\:text-blue-600,
.peer-checked\:text-blue-600 {
    color: var(--mir-primary) !important;
}

/* === DataGrid: Sort Arrows === */
.icon-arrow-up,
.icon-arrow-down,
.icon-up-arrow,
.icon-down-arrow {
    color: var(--mir-primary) !important;
}

/* === DataGrid: Pagination === */
.pagination button.bg-blue-600,
[class*="pagination"] .bg-blue-600 {
    background: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}
.pagination button:hover,
[class*="pagination"] button:hover {
    background: hsla(43, 100%, 50%, 0.1) !important;
    color: var(--mir-accent) !important;
}
.pagination button.bg-blue-600:hover,
[class*="pagination"] .bg-blue-600:hover {
    background: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}

/* === DataGrid: Status Pills (.label-*) === */
.label-active,
.label-completed {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border-radius: 9999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
}
.label-pending,
.label-pending_payment,
.label-processing {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #eab308 !important;
    border-radius: 9999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
}
.label-canceled,
.label-fraud {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border-radius: 9999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
}
.label-info,
.label-closed {
    background: rgba(139, 139, 163, 0.12) !important;
    color: #8b8ba3 !important;
    border-radius: 9999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
}

/* === DataGrid: Action Icon Buttons === */
.table-responsive .icon-edit,
.table-responsive .icon-eye,
.table-responsive .icon-view,
.table-responsive .icon-delete,
.table-responsive [class*="icon-"] {
    color: var(--mir-muted-foreground) !important;
    transition: background 0.15s, color 0.15s !important;
}
.table-responsive .icon-edit:hover,
.table-responsive .icon-eye:hover,
.table-responsive .icon-view:hover {
    background: hsla(43, 100%, 50%, 0.1) !important;
    color: var(--mir-accent) !important;
}
.table-responsive .icon-delete:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

/* === DataGrid: Sort Arrows (stock Bagisto classes) === */
.icon-up-stat,
.icon-down-stat {
    color: var(--mir-primary) !important;
}
.icon-sort-down,
.icon-sort-left,
.icon-sort-right {
    color: var(--mir-muted-foreground) !important;
}

/* === DataGrid: Per-Page & Page-Input Controls === */
.mt-7.flex.items-center.justify-between select,
.mt-7.flex.items-center.justify-between input[type="text"],
.mt-7.flex.items-center.justify-between input[type="number"] {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
    border-radius: 0.5rem !important;
}
.mt-7.flex.items-center.justify-between .rounded-md.border.bg-white,
.mt-7.flex.items-center.justify-between .inline-flex.items-center.rounded-md.border {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === DataGrid: Mass-Action Bar === */
.table-responsive ~ .flex.w-full.items-center,
.flex.w-full.items-center.gap-x-1 {
    color: var(--mir-foreground) !important;
}
.flex.w-full.items-center .rounded-md.border.bg-white {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === DataGrid: Filter Drawer Interior === */
.fixed.z-\[10002\] .text-blue-600 {
    color: var(--mir-accent) !important;
}
.fixed.z-\[10002\] .bg-gray-600 {
    background: var(--mir-muted) !important;
    color: var(--mir-muted-foreground) !important;
}
.fixed.z-\[10002\] select,
.fixed.z-\[10002\] input[type="text"],
.fixed.z-\[10002\] input[type="date"] {
    background: var(--mir-background) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
    border-radius: 0.5rem !important;
}
.fixed.z-\[10002\] select:focus,
.fixed.z-\[10002\] input:focus {
    border-color: var(--mir-accent) !important;
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15) !important;
}
.fixed.z-\[10002\] .border-b {
    border-color: var(--mir-border) !important;
}

/* === DataGrid: Empty State Row === */
.table-responsive .row.grid.text-center {
    color: var(--mir-muted-foreground) !important;
    padding: 3rem 1rem !important;
}

/* === Page Title: Prevent Flex Squeeze === */
.flex.items-center.justify-between > p.text-xl.font-bold {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
.flex.items-center.justify-between.gap-4 > p.text-xl.font-bold,
.flex.items-center.justify-between > p.text-xl.font-bold {
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

/* === Modal Overlay === */
.fixed.inset-0.bg-gray-500.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* === Modal Dialog === */
.box-shadow.relative.z-\[999\].rounded-lg.bg-white,
.box-shadow.rounded-lg.bg-white.max-w-\[568px\],
.box-shadow.rounded-lg.bg-white.max-w-\[400px\],
[class*="z-[999]"].rounded-lg.bg-white {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
}

/* === Modal Header === */
.box-shadow .border-b.px-4.py-3,
.box-shadow .flex.items-center.justify-between.border-b {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === Modal Content === */
.box-shadow .border-b.px-4.py-2\.5 {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === Modal Close Button === */
.icon-cancel-1.cursor-pointer {
    color: var(--mir-muted-foreground) !important;
}
.icon-cancel-1.cursor-pointer:hover {
    background: var(--mir-border) !important;
}

/* === Drawer Panel === */
.fixed.z-\[10002\].bg-white,
.pointer-events-auto.h-full.w-full.overflow-auto.bg-white {
    background: var(--mir-card) !important;
    border-left: 1px solid var(--mir-border) !important;
}

/* === Drawer Header === */
.grid.gap-y-2\.5.border-b.p-3 {
    border-color: var(--mir-border) !important;
    color: var(--mir-foreground) !important;
}

/* === Drawer Close === */
.icon-cross.cursor-pointer {
    color: var(--mir-muted-foreground) !important;
}
.icon-cross.cursor-pointer:hover {
    background: var(--mir-border) !important;
}

/* === Tabs: Active State (blue -> amber) === */
.-mb-px.border-blue-600.border-b-2,
.border-b-2.border-blue-600,
[class*="-mb-px"][class*="border-blue-600"] {
    border-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
}

/* === Tabs: Container === */
.tabs .flex.gap-4.border-b-2,
.mb-4.flex.gap-4.border-b-2 {
    border-color: var(--mir-border) !important;
}

/* === Tabs: Inactive Tab Text === */
.tabs .text-gray-600,
.tabs .text-gray-300,
.pb-3\.5.px-2\.5.text-base.font-medium.text-gray-600 {
    color: var(--mir-muted-foreground) !important;
}

/* === Footer: "Powered by Bagisto" === */
.mt-auto > .border-t.bg-white.py-2.text-center,
.mt-auto > .border-t.text-center {
    background: var(--mir-dark-bg) !important;
    border-color: var(--mir-border) !important;
    color: var(--mir-muted-foreground) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border-top-width: 0 !important;
}

/* === Configuration: Section Cards === */
.box-shadow.rounded.bg-white.p-4,
.box-shadow.rounded.bg-white.p-4.dark\:bg-gray-900 {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
}

/* === Configuration: Card Hover === */
.flex.max-w-\[360px\].items-center.gap-2.rounded-lg.p-2:hover {
    background: hsla(43, 100%, 50%, 0.05) !important;
}

/* === Configuration: Page Title === */
.text-xl.font-bold.text-gray-800 {
    color: var(--mir-foreground) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

/* === Bagisto Star Rating === */
.icon-star-fill {
    color: var(--mir-primary) !important;
}

/* === Flash Message Container (Bagisto) === */
.alert-success,
.flash-group .p-4.bg-green-100 {
    background: hsla(145, 100%, 45%, 0.15) !important;
    color: var(--mir-success) !important;
    border-radius: 0.5rem !important;
}
.alert-error,
.flash-group .p-4.bg-red-100 {
    background: hsla(8, 100%, 61%, 0.15) !important;
    color: var(--mir-destructive) !important;
    border-radius: 0.5rem !important;
}

/* === Notification Dropdown === */
.notification-panel,
[class*="notification"] .bg-white {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Sub-menu Links (blue -> amber/accent) === */
a.text-blue-600:not(.tabs a),
.hover\:text-blue-600:hover {
    color: var(--mir-accent) !important;
}

/* === "View details" / Action Links === */
.text-blue-600.transition-all:hover,
.cursor-pointer.text-blue-600:hover {
    color: var(--mir-gold-hover) !important;
}

/* === Dark Mode Background Overrides (catch-all) === */
.dark\:bg-gray-950 {
    background-color: var(--mir-background) !important;
}
.dark\:bg-gray-900 {
    background-color: var(--mir-card) !important;
}
.dark\:border-gray-800 {
    border-color: var(--mir-border) !important;
}
.dark\:text-gray-300 {
    color: var(--mir-muted-foreground) !important;
}
.dark\:text-white {
    color: var(--mir-foreground) !important;
}

/* === Shimmer Loader Override (Bagisto native) === */
.shimmer,
[class*="shimmer"] {
    background: linear-gradient(90deg, var(--mir-border) 25%, hsla(218, 14%, 22%, 1) 50%, var(--mir-border) 75%) !important;
    background-size: 200% 100% !important;
    animation: mir-shimmer 1.5s ease infinite !important;
}

/* === TinyMCE Editor Container === */
.tox.tox-tinymce {
    border-color: var(--mir-border) !important;
    border-radius: 0.5rem !important;
}
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow,
.tox .tox-menubar {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}
.tox .tox-edit-area__iframe {
    background: var(--mir-background) !important;
}

/* === File Upload Zones (Bagisto) === */
.cursor-pointer.rounded-xl.border.border-dashed,
[class*="border-dashed"][class*="cursor-pointer"] {
    border-color: var(--mir-border) !important;
    background: var(--mir-card) !important;
}
.cursor-pointer.rounded-xl.border.border-dashed:hover {
    border-color: var(--mir-primary) !important;
    background: hsla(43, 100%, 50%, 0.04) !important;
}

/* === Reporting: Chart Containers === */
.chart-container,
[class*="chart"] .bg-white {
    background: var(--mir-card) !important;
    border-color: var(--mir-border) !important;
}

/* === Category Tree View === */
.tree-container,
[class*="tree"] .bg-white,
[class*="tree"] .bg-gray-50 {
    background: var(--mir-card) !important;
}

/* === Footer Links (Bagisto dark:text-darkBlue) === */
.dark\:text-darkBlue {
    color: var(--mir-accent) !important;
}

/* === Dark Hover Surfaces (Bagisto dark:hover:bg-gray-950) === */
.dark\:hover\:bg-gray-950:hover {
    background-color: var(--mir-background) !important;
}

/* === Additional Gray/Blue Catch-all Overrides === */
.text-gray-700 {
    color: var(--mir-foreground) !important;
}
.bg-gray-100 {
    background-color: var(--mir-card) !important;
}
.dark\:bg-gray-800 {
    background-color: var(--mir-card) !important;
}
.dark\:border-gray-700 {
    border-color: var(--mir-border) !important;
}
.dark\:text-gray-400 {
    color: var(--mir-muted-foreground) !important;
}
.hover\:bg-gray-200:hover {
    background-color: var(--mir-border) !important;
}
.dark\:hover\:bg-gray-800:hover {
    background-color: var(--mir-border) !important;
}
.hover\:border-gray-400:hover {
    border-color: var(--mir-muted-foreground) !important;
}
.hover\:text-gray-600:hover {
    color: var(--mir-foreground) !important;
}

/* === Blue Icon/Upload Containers (super admin) === */
.bg-blue-50 {
    background: hsla(43, 100%, 50%, 0.08) !important;
}
.dark\:bg-blue-900\/20 {
    background: hsla(43, 100%, 50%, 0.08) !important;
}
.text-blue-600:not(a) {
    color: var(--mir-primary) !important;
}
.border-blue-500 {
    border-color: var(--mir-primary) !important;
}

/* === Warning Notices (yellow → MIR warning) === */
.bg-yellow-50 {
    background: hsla(40, 100%, 50%, 0.08) !important;
}
.text-yellow-700 {
    color: var(--mir-warning) !important;
}
.dark\:bg-yellow-900\/20 {
    background: hsla(40, 100%, 50%, 0.08) !important;
}
.dark\:text-yellow-400 {
    color: var(--mir-warning) !important;
}

/* === Success Notices (green → MIR success) === */
.bg-green-50 {
    background: hsla(145, 100%, 45%, 0.1) !important;
}
.text-green-700 {
    color: var(--mir-success) !important;
}
.dark\:text-green-400 {
    color: var(--mir-success) !important;
}
.border-green-200,
.dark\:border-green-800 {
    border-color: hsla(145, 100%, 45%, 0.2) !important;
}

/* === Delete/Red Button (red → MIR destructive) === */
.text-red-600 {
    color: var(--mir-destructive) !important;
}
.dark\:text-red-400 {
    color: var(--mir-destructive) !important;
}
.hover\:bg-red-50:hover {
    background: hsla(8, 100%, 61%, 0.08) !important;
}
.dark\:hover\:bg-red-900\/20:hover {
    background: hsla(8, 100%, 61%, 0.08) !important;
}
.border-red-500 {
    border-color: var(--mir-destructive) !important;
}
.text-red-500 {
    color: var(--mir-destructive) !important;
}

/* === Tag Badges (gray-600 bg) === */
.bg-gray-600 {
    background-color: var(--mir-border) !important;
}

/* === Inactive Toggle === */
.bg-gray-400 {
    background-color: var(--mir-border) !important;
}

/* === Super Admin: x-saas components share same class names.
   All selectors above apply via class-name targeting. === */

/* ====================================================
   LIGHT MODE UTILITY OVERRIDES
   Active when Bagisto removes .dark class from <html>
   ==================================================== */

/* Noise overlay: subtler on light backgrounds */
html:not(.dark) body::after {
    opacity: 0.02;
}

/* Gold gradient text: darker amber for contrast on white */
html:not(.dark) .gold-gradient-text {
    background: linear-gradient(90deg, hsl(43 100% 38%) 0%, hsl(43 100% 50%) 50%, hsl(43 100% 38%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card lift hover: visible shadow on light backgrounds */
html:not(.dark) .card-lift:hover {
    box-shadow: 0 8px 30px hsla(220, 16%, 12%, 0.12) !important;
    border-color: hsl(43 100% 45% / 0.3) !important;
}
html:not(.dark) .mir-card-lift:hover {
    box-shadow: 0 8px 30px hsla(220, 16%, 12%, 0.12);
    border-color: hsla(43, 100%, 45%, 0.3);
}
html:not(.dark) .mir-tpl-card-diagonal {
    background: hsla(0, 0%, 100%, 0.88);
}

/* Icon container: higher opacity for light bg contrast */
html:not(.dark) .icon-container-amber {
    background: hsla(43, 100%, 45%, 0.12);
    border-color: hsla(43, 100%, 45%, 0.2);
}

/* Amber glow: visible on light backgrounds */
html:not(.dark) .amber-glow {
    box-shadow: 0 0 20px hsla(43, 100%, 45%, 0.15);
}

/* Status badge backgrounds: slightly more visible in light mode */
html:not(.dark) .bg-green-100,
html:not(.dark) [class*="bg-green-100"] {
    background-color: hsla(145, 100%, 35%, 0.1) !important;
}
html:not(.dark) .bg-red-100,
html:not(.dark) [class*="bg-red-100"] {
    background-color: hsla(8, 100%, 50%, 0.1) !important;
}
html:not(.dark) .bg-yellow-100,
html:not(.dark) [class*="bg-yellow-100"] {
    background-color: hsla(40, 100%, 45%, 0.1) !important;
}

/* DataGrid header row: light treatment */
html:not(.dark) .table-responsive .row.grid.border-b.bg-gray-50 {
    background: hsla(220, 20%, 95%, 0.8) !important;
}

/* Sidebar active state: stronger amber tint on light sidebar */
html:not(.dark) nav.grid > .px-4 > a.bg-blue-600,
html:not(.dark) nav.grid > .px-4 > a[class*="bg-blue-600"],
html:not(.dark) nav.grid > .px-4 > a.mir-parent-expanded {
    background-color: hsla(43, 100%, 45%, 0.1) !important;
}

/* Light mode: sub-menu guide line uses light border */
html:not(.dark) nav.grid .px-4 > .mir-submenu {
    border-left-color: hsla(220, 14%, 88%, 0.5) !important;
}

/* Primary button: slightly darker amber for light bg */
html:not(.dark) .primary-button {
    background-color: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}
html:not(.dark) .primary-button:hover {
    background-color: var(--mir-gold-hover) !important;
}

/* ====================================================================
   Reusable Empty State component
   ==================================================================== */
.mir-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}
.mir-empty-state-icon {
    color: var(--mir-muted-foreground);
    opacity: 0.5;
    margin-bottom: 16px;
}
.mir-empty-state-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--mir-foreground);
    margin: 0 0 8px;
}
.mir-empty-state-body {
    font-size: 13px;
    color: var(--mir-muted-foreground);
    line-height: 1.5;
    margin: 0 0 20px;
}
.mir-empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    background: var(--mir-primary);
    color: var(--mir-dark-bg);
    text-decoration: none;
    transition: opacity 0.15s;
}
.mir-empty-state-action:hover {
    opacity: 0.85;
}

/* ====================================================================
   PHASE 10: LUCIDE ICON FONT REPLACEMENT
   Replaces Bagisto's "bagisto-admin" icon font with Lucide (v0.469.0).
   Each .icon-*::before rule overrides the glyph codepoint + font-family.
   ==================================================================== */

@font-face {
    font-family: "lucide";
    src: url("/vendor/mir/fonts/lucide.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* Override base icon styles: redirect from bagisto-admin to lucide.
   Exclude .icon-container-amber which is a MIR layout utility, not a glyph. */
[class^="icon-"]:not(.icon-container-amber),
[class*=" icon-"]:not(.icon-container-amber) {
    font-family: "lucide" !important;
}

/* --- Bagisto icon → Lucide icon glyph mapping (80 core icons) --- */

.icon-phone:before { content: "\e136" !important; }
.icon-list:before { content: "\e10b" !important; }
.icon-admin-export:before { content: "\e0b6" !important; }
.icon-magic:before { content: "\e416" !important; }
.icon-zoom:before { content: "\e1b5" !important; }
.icon-ar:before { content: "\e065" !important; }
.icon-report:before { content: "\e313" !important; }
.icon-refund:before { content: "\e14b" !important; }
.icon-light:before { content: "\e17b" !important; }
.icon-dark:before { content: "\e121" !important; }
.icon-checkbox-partical:before { content: "\e174" !important; }
.icon-checkbox-partial:before { content: "\e174" !important; }
.icon-uncheckbox:before { content: "\e16a" !important; }
.icon-add-customer:before { content: "\e1a1" !important; }
.icon-arrow-down:before { content: "\e046" !important; }
.icon-arrow-left:before { content: "\e04c" !important; }
.icon-arrow-right:before { content: "\e04d" !important; }
.icon-arrow-up:before { content: "\e04e" !important; }
.icon-attribute-block:before { content: "\e104" !important; }
.icon-attribute:before { content: "\e299" !important; }
.icon-calendar:before { content: "\e067" !important; }
.icon-cancel-1:before { content: "\e1b1" !important; }
.icon-cancel:before { content: "\e088" !important; }
.icon-cart:before { content: "\e15f" !important; }
.icon-checked:before { content: "\e55d" !important; }
.icon-cms:before { content: "\e0d0" !important; }
.icon-configuration:before { content: "\e157" !important; }
.icon-cross:before { content: "\e1b1" !important; }
.icon-customer-2:before { content: "\e1a3" !important; }
.icon-customer:before { content: "\e19e" !important; }
.icon-dashboard:before { content: "\e1c0" !important; }
.icon-delete:before { content: "\e18d" !important; }
.icon-done:before { content: "\e070" !important; }
.icon-dot:before { content: "\e453" !important; }
.icon-dots:before { content: "\e0ba" !important; }
.icon-down-stat:before { content: "\e18f" !important; }
.icon-drag:before { content: "\e0ee" !important; }
.icon-edit-save:before { content: "\e150" !important; }
.icon-edit:before { content: "\e1f8" !important; }
.icon-filter:before { content: "\e0d5" !important; }
.icon-folder-block:before { content: "\e341" !important; }
.icon-folder:before { content: "\e0dc" !important; }
.icon-image:before { content: "\e0f9" !important; }
.icon-information:before { content: "\e0fe" !important; }
.icon-language:before { content: "\e0eb" !important; }
.icon-location:before { content: "\e114" !important; }
.icon-mail:before { content: "\e112" !important; }
.icon-menu:before { content: "\e118" !important; }
.icon-notification:before { content: "\e05d" !important; }
.icon-order-back:before { content: "\e2a0" !important; }
.icon-printer:before { content: "\e144" !important; }
.icon-processing:before { content: "\e10c" !important; }
.icon-product-1:before { content: "\e12c" !important; }
.icon-product:before { content: "\e12c" !important; }
.icon-promotion:before { content: "\e182" !important; }
.icon-radio-normal:before { content: "\e07a" !important; }
.icon-radio-selected:before { content: "\e348" !important; }
.icon-repeat:before { content: "\e149" !important; }
.icon-sales:before { content: "\e0b5" !important; }
.icon-search:before { content: "\e154" !important; }
.icon-setting:before { content: "\e157" !important; }
.icon-settings:before { content: "\e157" !important; }
.icon-ship:before { content: "\e193" !important; }
.icon-sort-down:before { content: "\e071" !important; }
.icon-sort-left:before { content: "\e072" !important; }
.icon-sort-right:before { content: "\e073" !important; }
.icon-sort-up-down:before { content: "\e210" !important; }
.icon-sort-up:before { content: "\e074" !important; }
.icon-star:before { content: "\e179" !important; }
.icon-store:before { content: "\e3e7" !important; }
.icon-tick:before { content: "\e070" !important; }
.icon-up-stat:before { content: "\e190" !important; }
.icon-view:before { content: "\e0be" !important; }
.icon-view-close:before { content: "\e0bf" !important; }
.icon-copy:before { content: "\e0a2" !important; }
.icon-exit:before { content: "\e111" !important; }
.icon-clip:before { content: "\e130" !important; }
.icon-collapse:before { content: "\e075" !important; }
.icon-login:before { content: "\e110" !important; }
.icon-pause:before { content: "\e131" !important; }
.icon-play:before { content: "\e13f" !important; }

/* --- Star fill: use Lucide star glyph with amber color --- */
.icon-star-fill:before { content: "\e179" !important; color: #ffb600 !important; }

/* --- Additional icons used in templates --- */
.icon-add-product:before { content: "\e267" !important; }
.icon-discount:before { content: "\e135" !important; }
.icon-clock:before { content: "\e08b" !important; }
.icon-size:before { content: "\e115" !important; }

/* --- Super admin extras --- */
.icon-camera:before { content: "\e068" !important; }
.icon-check-box:before { content: "\e55d" !important; }
.icon-double-arrow:before { content: "\e077" !important; }
.icon-hamburger:before { content: "\e118" !important; }
.icon-orders:before { content: "\e08a" !important; }
.icon-users:before { content: "\e1a3" !important; }

/* --- MIR tenant menu icons --- */
.icon-mir-plug:before { content: "\e382" !important; }
.icon-mir-key:before { content: "\e102" !important; }
.icon-mir-layers:before { content: "\e52d" !important; }
.icon-mir-wand:before { content: "\e245" !important; }
.icon-mir-folder-open:before { content: "\e246" !important; }

/* --- Social media icons (SVG mask, Lucide-style thin stroke) --- */
.icon-facebook:before,
.icon-twitter:before,
.icon-instagram:before,
.icon-linkedin:before,
.icon-google-plus:before {
    font-family: initial !important;
    content: "" !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
}

.icon-facebook:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}

.icon-twitter:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'/%3E%3C/svg%3E");
}

.icon-instagram:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");
}

.icon-linkedin:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect width='4' height='12' x='2' y='9'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect width='4' height='12' x='2' y='9'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

.icon-google-plus:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
}

/* --- Icon color overrides for dark/light mode --- */
/* Lucide icons inherit color via currentColor, so existing
   Bagisto dark/light rules ([class^="icon-"] color) still apply.
   Override sort arrows / stat indicators to use theme colors: */
html.dark [class^="icon-"]:not(.icon-container-amber),
html.dark [class*=" icon-"]:not(.icon-container-amber) {
    color: #d1d5db;
}

html:not(.dark) [class^="icon-"]:not(.icon-container-amber),
html:not(.dark) [class*=" icon-"]:not(.icon-container-amber) {
    color: #6b7280;
}

/* ====================================================================
   PHASE 11: DASHBOARD LAYOUT – match prototype AppShell spacing
   ==================================================================== */

/* Dashboard container: match prototype's AppShell spacing.
   Bagisto layout provides px-4 (16px) + pt-3 (12px).
   Enforce space-y-8 (32px) between child sections since
   Tailwind's space-y-8 may not be in compiled CSS. */
.mir-dashboard {
    padding-top: 0.25rem;
}
.mir-dashboard > * + * {
    margin-top: 2rem !important;
}
@media (min-width: 768px) {
    .mir-dashboard {
        padding-top: 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Action cards 2×2 grid: force correct layout regardless of
   Tailwind compilation (gap-4 may not be in compiled CSS). */
.mir-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Action card individual styling */
.mir-action-grid > a,
.mir-action-grid > div {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 0.75rem !important;
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
}

/* Stack action cards on narrow screens */
@media (max-width: 639px) {
    .mir-action-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Recent Mockups grid: 3 cols mobile, 6 cols desktop.
   aspect-[4/5] and sm:grid-cols-6 are JIT classes that
   won't exist in Bagisto's compiled CSS, so we force them. */
.mir-mockups-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}
@media (min-width: 640px) {
    .mir-mockups-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* Mockup card */
.mir-mockups-grid > div {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    cursor: pointer;
}

/* Image wrapper: force 4:5 aspect ratio */
.mir-mockups-grid > div > div:first-child {
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: var(--mir-background);
}
.mir-mockups-grid > div > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Card footer text */
.mir-mockups-grid > div > div:last-child {
    padding: 0 0.5rem 0.5rem !important;
}

/* Usage stats 3-column grid */
.mir-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Stat card */
.mir-stats-grid > div {
    background: var(--mir-card) !important;
    border: 1px solid var(--mir-border) !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
}

/* Stat value */
.mir-stats-grid .mir-stat-value {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--mir-primary) !important;
    line-height: 1.75rem;
}

/* Stat label */
.mir-stats-grid .mir-stat-label {
    font-size: 0.75rem !important;
    color: var(--mir-muted-foreground) !important;
    margin-bottom: 0.5rem !important;
}

/* Progress bar track */
.mir-stats-grid .mir-progress-track {
    width: 100% !important;
    height: 6px !important;
    border-radius: 9999px !important;
    background: hsla(43, 100%, 50%, 0.08) !important;
}

/* Progress bar fill */
.mir-stats-grid .mir-progress-fill {
    height: 100% !important;
    border-radius: 9999px !important;
    background: var(--mir-primary) !important;
    transition: width 0.3s ease !important;
}

/* Stack stats on narrow screens */
@media (max-width: 639px) {
    .mir-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ====================================================================
   PHASE 12: TEMPLATES PAGE – match prototype layout
   ==================================================================== */

/* Page container */
.mir-templates-page {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.mir-templates-page > * + * {
    margin-top: 0;
}

/* Remove gap between sidebar and content column for Templates */
.group\/container:has(.mir-templates-page) {
    gap: 0 !important;
}
.flex-col.pt-3:has(.mir-templates-page) {
    padding-top: 0 !important;
}

/* Tab bar */
.mir-tab-bar {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--mir-border);
    margin-top: 1rem;
}
.mir-tab {
    padding: 0.625rem 1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s ease;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.mir-tab:hover {
    color: var(--mir-foreground);
}
.mir-tab-active {
    border-bottom-color: var(--mir-primary) !important;
    color: var(--mir-primary) !important;
}

/* Section spacing */
.mir-tpl-section > * + * {
    margin-top: 1.5rem;
}

/* Category pills row */
.mir-pills-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mir-pills-row::-webkit-scrollbar {
    display: none;
}
.mir-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
}
.mir-pill-active {
    background: var(--mir-primary) !important;
    color: var(--mir-primary-foreground) !important;
}
.mir-pill-inactive {
    background: hsla(43, 100%, 50%, 0.08);
    border: 1px solid hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-pill-inactive:hover {
    background: hsla(43, 100%, 50%, 0.15);
}

/* Template count */
.mir-tpl-count {
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
}

/* Template grid: 2 cols mobile, 4 cols desktop */
.mir-tpl-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}
@media (min-width: 768px) {
    .mir-tpl-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Template card */
.mir-tpl-card {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

/* Card image area */
.mir-tpl-card-img {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-tpl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.35s ease;
}
.mir-tpl-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mir-background);
}

/* Diagonal hover action pane */
.mir-tpl-card-diagonal {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 55%;
    background: hsla(220, 16%, 7%, 0.85);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 0.75rem;
    z-index: 4;
}
.mir-tpl-card:hover .mir-tpl-card-diagonal {
    opacity: 1;
}
.mir-tpl-card-diagonal button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 9rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.mir-tpl-diag-primary {
    border: 1px solid hsla(43, 100%, 50%, 0.3);
    background: hsla(43, 100%, 50%, 0.05);
    color: var(--mir-primary);
}
.mir-tpl-diag-primary:hover {
    background: hsla(43, 100%, 50%, 0.15);
}
.mir-tpl-diag-ghost {
    border: 1px solid transparent;
    background: none;
    color: var(--mir-foreground);
}
.mir-tpl-diag-ghost:hover {
    background: hsla(0, 0%, 100%, 0.06);
}

/* Card badges */
.mir-tpl-badge {
    position: absolute;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    z-index: 2;
}
.mir-tpl-badge-custom {
    top: 0.5rem;
    right: 0.5rem;
    background: var(--mir-primary);
    color: var(--mir-primary-foreground);
}
.mir-tpl-badge-status {
    top: 0.5rem;
    left: 0.5rem;
    text-transform: capitalize;
}
.mir-pulse {
    animation: mir-pulse-anim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes mir-pulse-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* (Legacy overlay removed — replaced by diagonal action pane) */

/* Card footer */
.mir-tpl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
}
.mir-tpl-card-info {
    min-width: 0;
    flex: 1;
}
.mir-tpl-card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mir-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mir-tpl-card-meta {
    font-size: 0.75rem;
    color: var(--mir-muted-foreground);
}

/* Card action buttons */
.mir-tpl-card-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.mir-tpl-btn-muted,
.mir-tpl-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s ease;
}
.mir-tpl-btn-muted {
    color: var(--mir-muted-foreground);
}
.mir-tpl-btn-muted:hover {
    color: var(--mir-primary);
}
.mir-tpl-btn-primary {
    color: var(--mir-primary);
}

/* Skeleton loading */
.mir-tpl-skeleton {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--mir-border);
}
.mir-tpl-skeleton-img {
    aspect-ratio: 1 / 1;
    background: var(--mir-border);
    animation: mir-pulse-anim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.mir-tpl-skeleton-text {
    padding: 0.75rem;
}

/* Empty state */
.mir-tpl-empty {
    padding: 4rem 0;
    text-align: center;
}
.mir-tpl-empty-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mir-foreground);
}
.mir-tpl-empty-sub {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--mir-muted-foreground);
}

/* =============================================
   Turbo Drive SPA navigation
   ============================================= */

.turbo-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 100002;
    background: linear-gradient(90deg, hsl(43 100% 50%) 0%, hsl(43 100% 67%) 50%, hsl(43 100% 50%) 100%);
    background-size: 300% 100%;
    animation: turbo-bar-shimmer 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px hsl(43 100% 50% / 0.4), 0 0 5px hsl(43 100% 50% / 0.2);
    transition: opacity 0.3s ease;
}

@keyframes turbo-bar-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

[data-turbo-body] {
    transition: opacity 0.12s ease;
}

html.turbo-loading [data-turbo-body] {
    opacity: 0;
    transition: none;
}

/* ── vue-color-kit theme overrides ─────────────────────── */
.hu-color-picker {
    background: var(--mir-card) !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
    padding: 10px !important;
}
.hu-color-picker .color-type .name {
    background: var(--mir-background) !important;
    color: var(--mir-muted-foreground) !important;
    border-radius: 4px 0 0 4px !important;
}
.hu-color-picker .color-type .value {
    background: var(--mir-background) !important;
    color: var(--mir-foreground) !important;
    border-radius: 0 4px 4px 0 !important;
}
.hu-color-picker .colors.history {
    border-top-color: var(--mir-border) !important;
}
.hu-color-picker .colors .item {
    border-radius: 50% !important;
}
.hu-color-picker .saturation,
.hu-color-picker .saturation canvas {
    border-radius: 6px !important;
}

/* ── Library: Artwork card hover overlay ──────────────── */
.mir-artwork-overlay {
    position: absolute;
    inset: 0;
    background: hsla(220, 14%, 11%, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.mir-artwork-card:hover .mir-artwork-overlay {
    opacity: 1;
}

/* ── Push-to-Store slide-in animation ─────────────────── */
@keyframes mirSlideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════
   PRINT AREA EDITOR — LITE MODE (sidebar-based layout)
   ═══════════════════════════════════════════════════════════ */

/* Skin toggle pill (shared between desktop + mobile) */
.mir-lite-skin-pill {
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mir-border);
    background: var(--mir-background);
    flex-shrink: 0;
}
.mir-lite-skin-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
}
.mir-lite-skin-btn:hover {
    color: var(--mir-foreground);
}
.mir-lite-skin-active {
    background: var(--mir-primary);
    color: #000 !important;
    cursor: default;
}

/* Zoom pill (floating in canvas area) */
.mir-lite-zoom-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-radius: 9999px;
    background: hsla(220, 14%, 11%, 0.95);
    border: 1px solid var(--mir-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
    z-index: 15;
    transition: bottom 0.3s ease;
}
.mir-lite-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s ease;
}
.mir-lite-zoom-btn:hover {
    color: var(--mir-foreground);
    background: hsla(0, 0%, 100%, 0.06);
}

/* Icon rail (right edge of sidebar when layer selected) */
.mir-lite-icon-rail {
    width: 56px;
    border-right: 1px solid var(--mir-border);
    background: var(--mir-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    flex-shrink: 0;
}
.mir-lite-icon-rail-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    position: relative;
}
.mir-lite-icon-rail-btn:hover {
    background: hsla(0, 0%, 100%, 0.06);
    color: var(--mir-foreground);
}
.mir-lite-icon-rail-btn.active {
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-lite-icon-rail-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 9999px;
    background: var(--mir-primary);
}

/* Layer list rows (48px, hover effect) */
.mir-lite-layer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 16px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-radius: 0;
}
.mir-lite-layer-row:hover {
    background: hsla(43, 100%, 50%, 0.06);
}

/* Color swatch grid (6 columns for POD presets) */
.mir-lite-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 36px);
    gap: 8px;
}
.mir-lite-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}
.mir-lite-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mir-lite-swatch.active {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.25);
    transform: scale(1.05);
}

/* Download pill (amber split button at sidebar bottom) */
.mir-lite-download-pill {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 40px;
    border-radius: 6px;
    background: var(--mir-primary);
    color: #000;
    overflow: hidden;
    box-shadow: 0 4px 14px -4px hsla(43, 100%, 50%, 0.6);
    transition: all 0.15s ease;
}
.mir-lite-download-pill.open {
    box-shadow: 0 4px 14px -4px hsla(43, 100%, 50%, 0.6), 0 0 0 2px hsla(43, 100%, 50%, 0.4), 0 0 0 4px var(--mir-card);
}

/* Scrollbar hide utility */
.mir-lite-scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mir-lite-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ── Floating overlays (Fit & Anchor on canvas) ── */
.mir-float-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mir-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--mir-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: var(--mir-primary);
    cursor: pointer;
    transition: border-color 0.15s;
}
.mir-float-btn:hover {
    border-color: hsla(43, 100%, 50%, 0.5);
}
.mir-float-panel {
    background: var(--mir-card);
    backdrop-filter: blur(8px);
    border: 1px solid var(--mir-border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mir-float-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 8px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
}
.mir-float-option:hover {
    color: var(--mir-foreground);
    background: hsla(0, 0%, 100%, 0.06);
}
.mir-float-option[data-active="true"] {
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-float-anchor-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mir-border);
    background: var(--mir-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
}
.mir-float-anchor-dot:hover {
    border-color: hsla(43, 100%, 50%, 0.5);
    background: hsla(0, 0%, 100%, 0.06);
}
.mir-float-anchor-dot[data-active="true"] {
    background: var(--mir-primary);
    border-color: var(--mir-primary);
    transform: scale(1.1);
    box-shadow: 0 0 8px hsla(43, 100%, 50%, 0.3);
}

/* Toast notifications */
.mir-lite-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    z-index: 100;
    animation: mirFadeIn 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}
.mir-lite-toast-success {
    background: hsla(145, 60%, 40%, 0.9);
    color: #fff;
}
.mir-lite-toast-error {
    background: hsla(0, 70%, 50%, 0.9);
    color: #fff;
}

/* Mobile bottom sheet — Polotno-style slide-up panel */
.mir-mobile-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mir-card);
    border-top: 1px solid var(--mir-border);
    border-radius: 16px 16px 0 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 55vh;
    overflow: hidden;
}
.mir-mobile-panel.open {
    transform: translateY(0);
}
.mir-mobile-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mir-border);
    flex-shrink: 0;
}
.mir-mobile-panel__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--mir-foreground);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mir-mobile-panel__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Mobile layer tab strip */
.mir-mobile-tabs {
    display: flex;
    align-items: stretch;
    height: 64px;
    border-top: 1px solid var(--mir-border);
    background: hsla(220, 14%, 9%, 0.97);
    backdrop-filter: blur(12px);
    z-index: 30;
    flex-shrink: 0;
    padding: 8px 12px;
    gap: 8px;
}
.mir-mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1.5px solid var(--mir-border);
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    min-width: 0;
    transition: background 150ms ease, border-color 150ms ease;
}
.mir-mobile-tab:active {
    background: rgba(255,255,255,0.05);
}
.mir-mobile-tab--active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.08);
}
.mir-mobile-tab__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-mobile-tab__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--mir-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.mir-mobile-tab--active .mir-mobile-tab__label {
    color: var(--mir-primary);
}
/* Icon-only mode (>3 layers) */
.mir-mobile-tabs--icons-only .mir-mobile-tab {
    flex: 0 0 48px;
    padding: 0;
}
.mir-mobile-tabs--icons-only .mir-mobile-tab__label {
    display: none;
}
.mir-mobile-tabs--icons-only .mir-mobile-tab__icon {
    width: 36px;
    height: 36px;
}
.mir-mobile-tabs--icons-only {
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
}
/* Add button (round) */
.mir-mobile-tab--add {
    flex: 0 0 44px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    border: 1.5px dashed var(--mir-border);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-mobile-tab--add:active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.08);
}

/* Mobile download button — full width */
.mir-mobile-download {
    flex-shrink: 0;
    padding: 8px 12px;
    background: var(--mir-card);
    border-top: 1px solid var(--mir-border);
    z-index: 30;
}
.mir-mobile-download__btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: none;
    background: var(--mir-primary);
    color: #000;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 150ms ease;
}
.mir-mobile-download__btn:active {
    opacity: 0.85;
}
.mir-mobile-download__btn .meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
}
/* Expand arrow */
.mir-mobile-download__expand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Mobile download menu (slide-up) */
.mir-mobile-dl-menu {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mir-card);
    border-top: 1px solid var(--mir-border);
    border-radius: 16px 16px 0 0;
    z-index: 50;
    padding: 20px 16px 24px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.mir-mobile-dl-menu.open {
    transform: translateY(0);
}
.mir-mobile-dl-menu__section {
    margin-bottom: 16px;
}
.mir-mobile-dl-menu__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    margin-bottom: 8px;
}
.mir-mobile-dl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mir-mobile-dl-pill {
    height: 36px;
    padding: 0 16px;
    border-radius: 9999px;
    border: 1.5px solid var(--mir-border);
    background: transparent;
    color: var(--mir-foreground);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.mir-mobile-dl-pill--active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.12);
    color: var(--mir-primary);
}
.mir-mobile-dl-output {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--mir-border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--mir-muted-foreground);
}

/* Spin animation (may already exist) */
@keyframes mirSpin {
    to { transform: rotate(360deg); }
}
@keyframes mirFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile layout */
.mir-lite-mobile {
    display: none;
}

/* Responsive: show mobile, hide desktop */
@media (min-width: 801px) {
    #lite-desktop-grid {
        display: grid !important;
    }
    .mir-lite-mobile {
        display: none !important;
    }
    .mir-lite-mode-toggle {
        display: inline-flex !important;
    }
}
@media (max-width: 800px) {
    #lite-desktop-grid {
        display: none !important;
    }
    .mir-lite-mobile {
        display: flex !important;
    }
    .mir-lite-back-label {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   PRINT AREA EDITOR — SHARED CLASSES (Lite + Pro)
   Normalized to core MIR design tokens:
     text: 10px (micro) / 12px (sm) / 14px (base)
     fonts: Space Grotesk (display), JetBrains Mono (data), Inter (body)
     rounding: 8px (sm) / 12px (md) / 9999px (pill)
   ═══════════════════════════════════════════════════════════ */

/* ── Fullscreen shell ── */
.mir-editor-shell {
    position: fixed;
    inset: 0;
    z-index: 10002;
    overflow: hidden;
}

/* ── Top bar ── */
.mir-editor-topbar {
    height: 50px;
    border-bottom: 1px solid var(--mir-border);
    background: hsla(220, 14%, 11%, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
    flex-shrink: 0;
}

/* ── Sidebar (left or right) ── */
.mir-editor-sidebar {
    background: var(--mir-card);
    flex-shrink: 0;
    overflow: hidden;
}
.mir-editor-sidebar-l { border-right: 1px solid var(--mir-border); }
.mir-editor-sidebar-r { border-left: 1px solid var(--mir-border); }

/* ── Canvas area ── */
.mir-editor-canvas {
    position: relative;
    overflow: hidden;
    background: var(--mir-background);
}
.mir-editor-canvas-scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Section border (reusable bottom divider for panel sections) ── */
.mir-editor-section { border-bottom: 1px solid var(--mir-border); }

/* ── Panel header row (sidebar section headers) ── */
.mir-editor-panel-hd {
    height: 50px;
    border-bottom: 1px solid var(--mir-border);
    flex-shrink: 0;
}
.mir-editor-panel-hd-sm {
    height: 40px;
    border-bottom: 1px solid var(--mir-border);
    flex-shrink: 0;
}

/* ── Vertical divider (between header items) ── */
.mir-editor-vdiv {
    width: 1px;
    height: 20px;
    background: var(--mir-border);
    flex-shrink: 0;
}

/* ── Floating glass pill (mode toolbar, zoom controls) ── */
.mir-editor-glass {
    border-radius: 9999px;
    background: hsla(220, 14%, 11%, 0.95);
    border: 1px solid var(--mir-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Mode segmented button (Fixed / Perspective / Distorted) ── */
.mir-editor-mode-btn {
    height: 24px;
    padding: 0 10px;
    border-radius: 9999px;
    border: none;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: capitalize;
}
.mir-editor-mode-btn[data-active="true"] {
    background: var(--mir-primary);
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mir-editor-mode-btn[data-active="false"] {
    background: transparent;
    color: var(--mir-muted-foreground);
    box-shadow: none;
}

/* ── Segmented control container (filter tabs, fit/bounds etc) ── */
.mir-editor-seg {
    border-radius: 8px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
}

/* ── Segment tab button ── */
.mir-editor-seg-btn {
    height: 28px;
    border-radius: 6px;
    border: none;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.12s;
}
.mir-editor-seg-btn[data-active="true"] {
    background: var(--mir-card);
    color: var(--mir-foreground);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mir-editor-seg-btn[data-active="false"] {
    background: transparent;
    color: var(--mir-muted-foreground);
    box-shadow: none;
}

/* ── Micro label (above selects, stat boxes — font-mono uppercase 10px) ── */
.mir-editor-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    display: block;
    margin-bottom: 4px;
}

/* ── Panel title (13px display font) ── */
.mir-editor-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--mir-foreground);
}

/* ── Panel subtitle (data/description) ── */
.mir-editor-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--mir-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Stat box (bounds readout, output summary) ── */
.mir-editor-stat-box {
    padding: 8px;
    border-radius: 8px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
}

/* ── Icon accent box (download/add-layers header icons) ── */
.mir-editor-icon-accent {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: hsla(43, 100%, 50%, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Spinner (loading indicator) ── */
.mir-editor-spinner {
    border-radius: 50%;
    border: 2px solid var(--mir-border);
    border-top-color: var(--mir-primary);
    animation: mirSpin 0.8s linear infinite;
}
.mir-editor-spinner-sm { width: 18px; height: 18px; }
.mir-editor-spinner-md { width: 20px; height: 20px; }
.mir-editor-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* ── Optimization progress message (thinking animation) ── */
.mir-opt-msg {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: mirOptMsgIn 0.5s ease-out forwards;
}
@keyframes mirOptMsgIn {
    0% { opacity: 0; transform: translateY(4px); filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Save button (amber glow) ── */
.mir-editor-save-active {
    background: var(--mir-primary);
    color: #000;
    font-weight: 600;
    box-shadow: 0 0 0 1px hsla(43, 100%, 50%, 0.4), 0 4px 14px -2px hsla(43, 100%, 50%, 0.35);
}
.mir-editor-save-done {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    font-weight: 600;
}

/* ── Upload dashed button ── */
.mir-editor-upload {
    height: 36px;
    border-radius: 8px;
    border: 1px dashed var(--mir-border);
    background: transparent;
    color: var(--mir-muted-foreground);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: border-color 0.15s;
}
.mir-editor-upload:hover {
    border-color: var(--mir-primary);
}

/* ── Masonry grid ── */
.mir-editor-masonry {
    display: flex;
    gap: 6px;
}
.mir-editor-masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mir-editor-masonry-tile {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}
.mir-editor-masonry-tile[data-active="true"] {
    border-color: var(--mir-primary);
}
.mir-editor-masonry-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mir-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mir-editor-masonry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Zoom percent display ── */
.mir-editor-zoom-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mir-muted-foreground);
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0 4px;
}

/* ── Small input overrides for editor context (compact selects, search) ── */
.mir-editor-input-sm {
    height: 36px;
    font-size: 12px;
}

/* ── Muted hint text ── */
.mir-editor-muted {
    color: var(--mir-muted-foreground);
}
.mir-editor-text-10 { font-size: 10px; }
.mir-editor-text-12 { font-size: 12px; }
.mir-editor-text-14 { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   V2 PROTOTYPE ALIGNMENT — New reusable class families
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 2.2 Icon rail ── */
.mir-icon-rail {
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 6px;
    flex-shrink: 0;
}
.mir-icon-rail__btn {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    position: relative;
    transition: background 150ms ease, color 150ms ease;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    border: none;
    background: transparent;
}
.mir-icon-rail__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.7;
}
.mir-icon-rail__btn--active .mir-icon-rail__label { opacity: 1; }
.mir-icon-rail__btn:hover {
    background: rgba(var(--mir-primary-rgb), 0.08);
}
.mir-icon-rail__btn--active {
    background: rgba(var(--mir-primary-rgb), 0.15);
    color: var(--mir-primary);
}
.mir-icon-rail__btn--active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--mir-primary);
}
.mir-icon-rail__btn--dimmed {
    opacity: 0.35;
}
.mir-icon-rail__btn--dimmed:hover {
    opacity: 0.7;
}
.mir-layer-select {
    flex: 1 1 0%;
    min-width: 0;
    font-size: 14px;
    color: var(--mir-foreground);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 2px 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 20px;
}
.mir-layer-select option {
    background: var(--mir-card);
    color: var(--mir-foreground);
}
.mir-icon-rail__swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--mir-border);
}
.mir-icon-rail__swatch-stack {
    position: relative;
    width: 32px;
    height: 32px;
}
.mir-icon-rail__swatch-stack > span {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--mir-card);
}
.mir-icon-rail__swatch-stack > span:nth-child(1) { left: 0; top: 0; z-index: 3; }
.mir-icon-rail__swatch-stack > span:nth-child(2) { left: 7px; top: 3px; z-index: 2; }
.mir-icon-rail__swatch-stack > span:nth-child(3) { left: 14px; top: 6px; z-index: 1; }

/* ── 2.3 Color picker ── */
.mir-color-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.mir-color-swatch {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.mir-color-swatch:hover {
    border-color: var(--mir-muted-foreground);
}
.mir-color-swatch--selected {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px rgba(var(--mir-primary-rgb), 0.25);
    transform: scale(1.05);
}
.mir-color-swatch--dark {
    border-color: var(--mir-border);
}
.mir-color-hex-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mir-color-hex-trigger {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid var(--mir-border);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 150ms ease;
}
.mir-color-hex-trigger:hover,
.mir-color-hex-trigger--open {
    border-color: var(--mir-primary);
}
/* ── 2.4 Bound field ── */
.mir-bound-field {
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.mir-bound-field__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
}
.mir-bound-field__value {
    color: var(--mir-foreground);
    text-align: right;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    width: 60px;
    font-variant-numeric: tabular-nums;
}
.mir-bound-field:focus-within {
    border-color: var(--mir-primary);
}

/* ── 2.5 Link toggle ── */
.mir-link-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--mir-border);
}
.mir-link-toggle__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mir-muted-foreground);
}
.mir-toggle-pill {
    width: 32px;
    height: 16px;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: background 200ms ease;
    background: var(--mir-border);
    flex-shrink: 0;
}
.mir-toggle-pill.active {
    background: var(--mir-primary);
}
.mir-toggle-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 200ms ease;
}
.mir-toggle-pill.active::after {
    transform: translateX(16px);
}

/* ── 2.6 Source tabs (pill style) ── */
.mir-source-tabs {
    display: flex;
    gap: 4px;
}
.mir-source-tab {
    flex: 1;
    text-align: center;
    padding: 0 4px;
    height: 30px;
    line-height: 28px;
    font-size: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    position: relative;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
    background: transparent;
    border: 1px solid var(--mir-border);
    border-radius: 9999px;
    white-space: nowrap;
}
.mir-source-tab:hover {
    color: var(--mir-foreground);
    border-color: color-mix(in srgb, var(--mir-border) 50%, var(--mir-foreground));
}
.mir-source-tab--active {
    color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.12);
    border-color: var(--mir-primary);
}
.mir-source-tab--active::after {
    display: none;
}

/* ── 2.7 Download footer ── */
.mir-download-footer {
    height: 48px;
    flex-shrink: 0;
    border-top: 1px solid var(--mir-border);
    background: var(--mir-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    z-index: 40;
}
.mir-output-selector {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    overflow: hidden;
    height: 32px;
}
.mir-output-selector select {
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 0 8px;
    color: var(--mir-foreground);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.mir-output-selector select + select {
    border-left: 1px solid var(--mir-border);
}

/* ── 2.9 Layer row ── */
.mir-layer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 150ms ease;
    min-height: 48px;
}
.mir-layer-row:hover {
    background: rgba(var(--mir-primary-rgb), 0.06);
}
.mir-layer-row__name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--mir-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 2.10 Floating mode button ── */
.mir-float-mode-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 11px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.mir-float-mode-btn:hover {
    color: var(--mir-foreground);
}
.mir-float-mode-btn--active {
    background: rgba(var(--mir-primary-rgb), 0.15);
    color: var(--mir-primary);
}

/* ── 2.11 Fit/Anchor floating controls ── */
.mir-float-fit-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    cursor: pointer;
    background: transparent;
    border: none;
}
.mir-float-fit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--mir-muted-foreground-rgb, 156,163,175), 0.4);
    transition: background 150ms ease;
}
.mir-float-fit-dot--active {
    background: var(--mir-primary);
}
.mir-float-fit-menu {
    padding: 4px;
}
.mir-float-fit-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 150ms ease;
    color: var(--mir-muted-foreground);
}
.mir-float-fit-option:hover {
    color: var(--mir-foreground);
    background: var(--mir-card);
}
.mir-float-fit-option--active {
    background: rgba(var(--mir-primary-rgb), 0.15);
    color: var(--mir-primary);
}
.mir-float-fit-option__label {
    font-size: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}
.mir-float-fit-option__sub {
    font-size: 9px;
    color: var(--mir-muted-foreground);
}

/* ── Section header (uppercase label + optional action) ── */
.mir-section-header {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mir-muted-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Sidebar panel (scrollable content area) ── */
.mir-sidebar-panel {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ─── AI Product Staging Panel ─── */
.mir-ai-prompt-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.mir-ai-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.mir-ai-category-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    background: transparent;
    cursor: pointer;
    transition: all 150ms ease;
    color: var(--mir-muted-foreground);
}
.mir-ai-category-chip:hover {
    border-color: var(--mir-primary);
    color: var(--mir-foreground);
    background: hsla(43, 100%, 50%, 0.04);
}
.mir-ai-category-chip--active {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.12);
    color: var(--mir-primary);
}
.mir-ai-category-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mir-ai-category-chip__label {
    font-size: 9px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mir-ai-status-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: hsla(43, 100%, 50%, 0.06);
    border: 1px solid hsla(43, 100%, 50%, 0.15);
}




/* ═════════════════════════════════════════════════════════════════════════
   Library Page
   ═════════════════════════════════════════════════════════════════════════ */

.mir-lib-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

/* ── Header row ── */
.mir-lib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mir-lib-sort-select {
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    outline: none;
    cursor: pointer;
    min-width: 110px;
}

/* ── Filter pills row ── */
.mir-lib-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.mir-lib-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    cursor: pointer;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    color: var(--mir-muted-foreground);
    transition: all 0.15s;
}
.mir-lib-pill:hover {
    border-color: hsla(43, 100%, 50%, 0.3);
    color: var(--mir-foreground);
}
.mir-lib-pill--active {
    background: hsla(43, 100%, 50%, 0.12);
    border-color: hsla(43, 100%, 50%, 0.4);
    color: var(--mir-primary);
}
.mir-lib-pill-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: hsla(43, 100%, 50%, 0.08);
    color: inherit;
}
.mir-lib-pill--active .mir-lib-pill-count {
    background: hsla(43, 100%, 50%, 0.2);
}

/* ── Card grid ── */
.mir-lib-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .mir-lib-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .mir-lib-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
    .mir-lib-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Card ── */
.mir-lib-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mir-lib-card:hover {
    transform: translateY(-4px);
    border-color: var(--mir-primary);
    box-shadow: 0 8px 24px hsla(43, 100%, 50%, 0.12);
}
.mir-lib-card--selected {
    border: 2px solid #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.mir-lib-card--selected:hover {
    border-color: #3B82F6;
}

/* ── Card thumbnail ── */
.mir-lib-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: hsla(43, 100%, 50%, 0.03);
}
.mir-lib-card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: pointer;
}
.mir-lib-card-checkbox--visible,
.mir-lib-card:hover .mir-lib-card-checkbox {
    opacity: 1;
}
.mir-lib-checkbox-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--mir-border);
    background: var(--mir-card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.mir-lib-card-checkbox--checked .mir-lib-checkbox-box {
    background: var(--mir-primary);
    border-color: var(--mir-primary);
}
.mir-lib-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mir-lib-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mir-muted-foreground);
    opacity: 0.25;
}

/* ── Type badges ── */
.mir-lib-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    pointer-events: none;
}
.mir-lib-card-badge--psd,
.mir-lib-card-badge--psb {
    background: rgba(168, 85, 247, 0.15);
    color: #A855F7;
}
.mir-lib-card-badge--png {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}
.mir-lib-card-badge--jpg,
.mir-lib-card-badge--jpeg {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}
.mir-lib-card-badge--svg {
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
}
.mir-lib-card-badge--webp {
    background: rgba(20, 184, 166, 0.15);
    color: #14B8A6;
}
.mir-lib-card-badge--mockup {
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
}
.mir-lib-card-badge--image {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}
.mir-lib-card-badge--template {
    background: rgba(168, 85, 247, 0.15);
    color: #A855F7;
}
.mir-lib-card-badge--print {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}
.mir-lib-card-badge--file {
    background: rgba(100, 116, 139, 0.15);
    color: #94A3B8;
}

/* ── Three-dot menu button ── */
.mir-lib-card-menu-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(220, 14%, 11%, 0.65);
    border: none;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.mir-lib-card:hover .mir-lib-card-menu-btn {
    opacity: 1;
}
.mir-lib-card-menu-btn:hover {
    background: hsla(220, 14%, 11%, 0.85);
}

/* ── Select mark ── */
.mir-lib-select-mark {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #3B82F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Card body ── */
.mir-lib-card-body {
    padding: 8px 10px 10px;
}
.mir-lib-card-label {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: var(--mir-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}
.mir-lib-card-meta {
    font-size: 10px;
    color: var(--mir-muted-foreground);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mir-lib-card-source {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.mir-lib-card-date {
    font-size: 10px;
    color: var(--mir-muted-foreground);
    opacity: 0.7;
    margin: 2px 0 0;
}
.mir-lib-card-source-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.25);
    margin-bottom: 2px;
}

/* ── Context menu ── */
.mir-lib-context-menu {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 8px;
    padding: 4px;
    min-width: 140px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.mir-lib-context-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--mir-foreground);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
}
.mir-lib-context-menu button:hover {
    background: hsla(43, 100%, 50%, 0.07);
}

/* ── Empty state ── */
.mir-lib-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
    border: 2px dashed var(--mir-border);
    border-radius: 12px;
    background: hsla(43, 100%, 50%, 0.02);
}

/* ── Batch bar ── */
.mir-lib-batch-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    animation: mirBatchSlideUp 0.2s ease;
}
@keyframes mirBatchSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Drop overlay ── */
.mir-lib-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(220, 14%, 11%, 0.8);
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.mir-lib-drop-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    border: 3px dashed var(--mir-primary);
    border-radius: 20px;
    color: var(--mir-primary);
}

/* ── Loading spinner ── */
.mir-lib-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--mir-border);
    border-top-color: var(--mir-primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: mirLibSpin 0.7s linear infinite;
}
@keyframes mirLibSpin {
    to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════════
   My Work Page — Lovable-prototype-aligned sticky toolbar + cards
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Full-width layout: strip Bagisto wrapper padding ── */
.group\/container:has(.mir-lib-page--work) {
    gap: 0 !important;
}
.flex-col.pt-3:has(.mir-lib-page--work) {
    padding-top: 0 !important;
}

/* Content area below toolbar gets its own padding */
.mir-lib-page--work .mir-lib-work-content {
    padding: 16px 8px 24px;
}

/* ── Sticky toolbar ── */
.mir-lib-work-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--mir-background);
    border-bottom: 1px solid var(--mir-border);
    padding: 12px 16px;
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
}
.mir-lib-work-toolbar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mir-lib-work-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Scrollable pill row with arrows ── */
.mir-lib-work-scroll-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}
.mir-lib-work-scroll-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.mir-lib-work-scroll-track {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 36px;
}
.mir-lib-work-scroll-track::-webkit-scrollbar {
    display: none;
}
.mir-lib-work-pills-row {
    display: flex;
    gap: 8px;
}
.mir-lib-work-pills-row--wrap {
    flex-wrap: wrap;
}

/* gradient fade masks */
.mir-lib-work-scroll-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 1;
}
.mir-lib-work-scroll-mask--left {
    left: 0;
    background: linear-gradient(to right, var(--mir-background) 40%, transparent);
}
.mir-lib-work-scroll-mask--right {
    right: 36px;
    background: linear-gradient(to left, var(--mir-background) 40%, transparent);
}

/* scroll arrow buttons */
.mir-lib-work-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s;
}
.mir-lib-work-scroll-arrow:hover {
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.4);
}
.mir-lib-work-scroll-arrow--left { left: 0; }
.mir-lib-work-scroll-arrow--right { right: 36px; }

/* expand / collapse button */
.mir-lib-work-expand-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s;
}
.mir-lib-work-expand-btn:hover {
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.4);
}
.mir-lib-work-expand-btn--collapse {
    background: hsla(43, 100%, 50%, 0.1);
    border-color: hsla(43, 100%, 50%, 0.3);
    color: var(--mir-primary);
    top: 0;
    transform: none;
}

/* expanded mode */
.mir-lib-work-scroll-wrap--expanded .mir-lib-work-scroll-expanded {
    position: relative;
    padding-right: 36px;
}
.mir-lib-work-scroll-wrap--expanded .mir-lib-work-pills-row--wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Work filter pills (icon + label + count) ── */
.mir-lib-work-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    color: var(--mir-muted-foreground);
    transition: all 0.15s;
}
.mir-lib-work-pill:hover {
    border-color: hsla(43, 100%, 50%, 0.3);
    color: var(--mir-foreground);
}
.mir-lib-work-pill--active {
    background: hsla(43, 100%, 50%, 0.15) !important;
    border-color: hsla(43, 100%, 50%, 0.35) !important;
    color: var(--mir-primary) !important;
}
.mir-lib-work-pill-icon {
    display: inline-flex;
    align-items: center;
    color: inherit;
}
.mir-lib-work-pill-icon svg {
    width: 14px;
    height: 14px;
}
.mir-lib-work-pill-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: hsla(43, 100%, 50%, 0.08);
    color: inherit;
}
.mir-lib-work-pill--active .mir-lib-work-pill-count {
    background: hsla(43, 100%, 50%, 0.2);
}

/* ── Sort pill (styled select) ── */
.mir-lib-work-sort-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 9999px;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.mir-lib-work-sort-pill:hover {
    border-color: hsla(43, 100%, 50%, 0.3);
}
.mir-lib-work-sort-label {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--mir-muted-foreground);
}
.mir-lib-work-sort-select {
    background: transparent;
    border: none;
    outline: none;
    color: var(--mir-foreground);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
}
.mir-lib-work-sort-select option {
    background: var(--mir-card);
    color: var(--mir-foreground);
}
.mir-lib-work-sort-chevron {
    color: var(--mir-muted-foreground);
    flex-shrink: 0;
}

/* ── Upload button (toolbar) ── */
.mir-lib-work-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--mir-primary);
    color: #000;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.1s;
}
.mir-lib-work-upload-btn:hover { opacity: 0.9; }
.mir-lib-work-upload-btn:active { transform: scale(0.97); }

/* ── Work card badges (colored icon badges) ── */
.mir-lib-card-badge--work {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.6;
}
.mir-lib-badge-icon {
    display: inline-flex;
    align-items: center;
}
.mir-lib-badge-icon svg {
    width: 10px;
    height: 10px;
}
.mir-lib-card-badge--work-mockup {
    background: rgba(245, 158, 11, 0.18);
    color: #F59E0B;
}
.mir-lib-card-badge--work-image {
    background: rgba(59, 130, 246, 0.18);
    color: #3B82F6;
}
.mir-lib-card-badge--work-template {
    background: rgba(168, 85, 247, 0.18);
    color: #A855F7;
}
.mir-lib-card-badge--work-print {
    background: rgba(34, 197, 94, 0.18);
    color: #22C55E;
}

/* ── Print placeholder ── */
.mir-lib-print-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #022c22 100%);
    color: rgba(255, 255, 255, 0.85);
}
.mir-lib-print-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin-top: 6px;
}

/* ── Bulk badge for work cards ── */
.mir-lib-card-badge--work-bulk {
    background: rgba(236, 72, 153, 0.18);
    color: #EC4899;
}

/* ── BulkCollage: 2x2 thumbnail grid in work card ── */
.mir-lib-bulk-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 100%;
    height: 100%;
    background: var(--mir-border);
}
.mir-lib-bulk-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-lib-bulk-collage-cell {
    position: relative;
    overflow: hidden;
    background: hsla(220, 14%, 11%, 0.3);
}
.mir-lib-bulk-collage-extra {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   Batch Detail Page
   ═══════════════════════════════════════════════════════════════════════ */

.mir-batch-page {
    max-width: 1400px;
    margin: 0 auto;
}

.mir-batch-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.mir-batch-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.mir-batch-back-btn:hover {
    background: hsla(43, 100%, 50%, 0.08);
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.3);
}

.mir-batch-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mir-foreground);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mir-batch-download-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--mir-primary);
    color: #000;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.mir-batch-download-all:hover {
    opacity: 0.9;
    transform: scale(1.01);
}
.mir-batch-download-all:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.mir-batch-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--mir-muted-foreground);
    margin-bottom: 16px;
    padding-left: 48px;
}
.mir-batch-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: hsla(220, 14%, 20%, 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* ── Batch grid ── */
.mir-batch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px)  { .mir-batch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .mir-batch-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .mir-batch-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── Batch tile ── */
.mir-batch-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    cursor: pointer;
    transition: all 0.2s;
}
.mir-batch-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.mir-batch-tile--selected {
    border: 2px solid #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.mir-batch-tile-thumb {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: hsla(220, 14%, 11%, 0.3);
}
.mir-batch-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mir-batch-tile-index {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.mir-batch-tile-checkbox {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}
.mir-batch-tile:hover .mir-batch-tile-checkbox,
.mir-batch-tile--selected .mir-batch-tile-checkbox {
    opacity: 1;
}

.mir-batch-tile-download {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    backdrop-filter: blur(4px);
}
.mir-batch-tile:hover .mir-batch-tile-download {
    opacity: 1;
}
.mir-batch-tile-download:hover {
    background: var(--mir-primary);
    color: #000;
}

.mir-batch-tile-body {
    padding: 6px 8px 8px;
}
.mir-batch-tile-label {
    font-size: 11px;
    color: var(--mir-foreground);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mir-batch-tile-sub {
    font-size: 10px;
    color: var(--mir-muted-foreground);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mir-batch-tile-color {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.15);
    vertical-align: middle;
    margin-right: 4px;
}

/* ── Selection toolbar (floating) ── */
.mir-batch-selection-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-radius: 12px;
    background: hsla(220, 14%, 11%, 0.95);
    border: 1px solid var(--mir-border);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 50;
    font-size: 13px;
    color: var(--mir-foreground);
}
.mir-batch-selection-bar-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--mir-primary);
}
.mir-batch-selection-bar button {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    background: transparent;
    color: var(--mir-foreground);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.mir-batch-selection-bar button:hover {
    background: hsla(43, 100%, 50%, 0.1);
    border-color: hsla(43, 100%, 50%, 0.3);
}
.mir-batch-selection-bar button.mir-batch-sel-primary {
    background: var(--mir-primary);
    color: #000;
    border-color: var(--mir-primary);
    font-weight: 600;
}
.mir-batch-selection-bar button.mir-batch-sel-primary:hover {
    opacity: 0.9;
}

/* ── Empty state for batch detail ── */
.mir-batch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--mir-muted-foreground);
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   Templates V4 — Lovable-aligned Pinterest gallery
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sticky toolbar ── */
.mir-templates-page .mir-tpl-sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--mir-background);
    border-bottom: 1px solid var(--mir-border);
    padding: 12px 16px;
    margin-bottom: 0;
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
}

/* ── Toolbar inner row ── */
.mir-templates-page .mir-tpl-toolbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
}

/* ── Back / breadcrumb buttons ── */
.mir-templates-page .mir-tpl-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.mir-templates-page .mir-tpl-back-btn:hover {
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.3);
}

.mir-templates-page .mir-tpl-breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: hsla(43, 100%, 50%, 0.18);
    border: 1px solid hsla(43, 100%, 50%, 0.4);
    color: var(--mir-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.mir-templates-page .mir-tpl-breadcrumb-pill:hover {
    background: hsla(43, 100%, 50%, 0.28);
}

.mir-templates-page .mir-tpl-breadcrumb-sep {
    flex-shrink: 0;
    color: var(--mir-muted-foreground);
    opacity: 0.5;
}

/* ── Scrollable pill row ── */
.mir-templates-page .mir-tpl-scroll-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}
.mir-templates-page .mir-tpl-scroll-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.mir-templates-page .mir-tpl-scroll-track {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 36px;
}
.mir-templates-page .mir-tpl-scroll-track::-webkit-scrollbar {
    display: none;
}
.mir-templates-page .mir-tpl-scroll-track .mir-tpl-scroll-pills {
    display: flex;
    gap: 8px;
}

/* expanded (wrapped) mode */
.mir-templates-page .mir-tpl-scroll-wrap--expanded .mir-tpl-scroll-inner {
    display: block;
}
.mir-templates-page .mir-tpl-scroll-wrap--expanded .mir-tpl-scroll-track {
    overflow: visible;
    padding-right: 36px;
}
.mir-templates-page .mir-tpl-scroll-wrap--expanded .mir-tpl-scroll-pills {
    flex-wrap: wrap;
}

/* gradient fade masks */
.mir-templates-page .mir-tpl-scroll-mask-left,
.mir-templates-page .mir-tpl-scroll-mask-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 1;
}
.mir-templates-page .mir-tpl-scroll-mask-left {
    left: 0;
    background: linear-gradient(to right, var(--mir-background) 40%, transparent);
}
.mir-templates-page .mir-tpl-scroll-mask-right {
    right: 36px;
    background: linear-gradient(to left, var(--mir-background) 40%, transparent);
}

/* scroll arrow buttons */
.mir-templates-page .mir-tpl-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s;
}
.mir-templates-page .mir-tpl-scroll-arrow:hover {
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.4);
}
.mir-templates-page .mir-tpl-scroll-arrow--left { left: 0; }
.mir-templates-page .mir-tpl-scroll-arrow--right { right: 36px; }

/* expand / collapse button */
.mir-templates-page .mir-tpl-expand-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s;
}
.mir-templates-page .mir-tpl-expand-btn:hover {
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.4);
}
.mir-templates-page .mir-tpl-scroll-wrap--expanded .mir-tpl-expand-btn {
    background: hsla(43, 100%, 50%, 0.1);
    border-color: hsla(43, 100%, 50%, 0.3);
    color: var(--mir-primary);
    top: 0;
    transform: none;
}

/* ── Pill buttons ── */
.mir-templates-page .mir-tpl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mir-templates-page .mir-tpl-pill:hover {
    background: hsla(43, 100%, 50%, 0.06);
    border-color: hsla(43, 100%, 50%, 0.25);
    color: var(--mir-foreground);
}
.mir-templates-page .mir-tpl-pill--active {
    background: hsla(43, 100%, 50%, 0.08) !important;
    border-color: hsla(43, 100%, 50%, 0.35) !important;
    color: var(--mir-primary) !important;
}

/* Category pills (larger, icon + label) */
.mir-templates-page .mir-tpl-pill--cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: hsla(43, 100%, 50%, 0.06);
    border: 1px solid hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mir-templates-page .mir-tpl-pill--cat:hover {
    background: hsla(43, 100%, 50%, 0.14);
}
.mir-templates-page .mir-tpl-pill--cat svg {
    width: 16px;
    height: 16px;
}
.mir-templates-page .mir-tpl-pill-emoji {
    font-size: 15px;
    line-height: 1;
}

/* Subcategory pills */
.mir-templates-page .mir-tpl-pill--sub {
    padding: 6px 14px;
    font-size: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
}
.mir-templates-page .mir-tpl-pill--sub:hover {
    border-color: hsla(43, 100%, 50%, 0.4);
    color: var(--mir-primary);
}

/* Tag pills (smallest) */
.mir-templates-page .mir-tpl-pill--tag {
    padding: 5px 12px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
}
.mir-templates-page .mir-tpl-pill--tag:hover {
    color: var(--mir-foreground);
    border-color: var(--mir-muted-foreground);
}
.mir-templates-page .mir-tpl-pill--tag.mir-tpl-pill--active {
    background: hsla(43, 100%, 50%, 0.15) !important;
    border-color: hsla(43, 100%, 50%, 0.3) !important;
    color: var(--mir-primary) !important;
}

/* Upload button in toolbar */
.mir-templates-page .mir-tpl-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: var(--mir-primary);
    color: #000;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 4px 14px hsla(43, 100%, 50%, 0.35);
    transition: all 0.2s;
}
.mir-templates-page .mir-tpl-upload-btn:hover {
    background: hsla(43, 100%, 55%, 0.95);
}
.mir-templates-page .mir-tpl-upload-btn svg {
    width: 16px;
    height: 16px;
}

/* ── Masonry grid ── */
.mir-templates-page .mir-tpl-masonry {
    columns: 1;
    column-gap: 16px;
    padding: 16px 8px 24px;
}
@media (min-width: 640px)  { .mir-templates-page .mir-tpl-masonry { columns: 2; } }
@media (min-width: 1024px) { .mir-templates-page .mir-tpl-masonry { columns: 3; } }
@media (min-width: 1280px) { .mir-templates-page .mir-tpl-masonry { columns: 4; } }

/* ── Card V4 ── */
.mir-templates-page .mir-tpl-card-v4 {
    position: relative;
    break-inside: avoid;
    margin-bottom: 16px;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s;
}
html:not(.dark) .mir-templates-page .mir-tpl-card-v4 {
    border-color: rgba(0, 0, 0, 0.08);
}
.mir-templates-page .mir-tpl-card-v4:hover {
    transform: scale(1.02);
    border-color: var(--mir-primary);
    box-shadow: 0 8px 32px hsla(43, 100%, 50%, 0.18);
}

/* ── Card image area ── */
.mir-templates-page .mir-tpl-card-img {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: hsla(0, 0%, 50%, 0.08);
}
.mir-templates-page .mir-tpl-card-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s;
}

/* ── Like button (top-right) ── */
.mir-templates-page .mir-tpl-card-like {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}
.mir-templates-page .mir-tpl-card-v4:hover .mir-tpl-card-like {
    opacity: 1;
}
.mir-templates-page .mir-tpl-card-like:hover {
    background: rgba(0,0,0,0.75);
    transform: scale(1.1);
}
.mir-templates-page .mir-tpl-card-like svg {
    width: 16px;
    height: 16px;
}
.mir-templates-page .mir-tpl-card-like--faved {
    color: #f87171;
    opacity: 1;
}

/* ── Bottom gradient overlay (always visible) ── */
.mir-templates-page .mir-tpl-card-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}
.mir-templates-page .mir-tpl-card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    pointer-events: none;
    order: 2;
    text-align: right;
}
.mir-templates-page .mir-tpl-card-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    order: 1;
}
.mir-templates-page .mir-tpl-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 6px;
    border-radius: 9999px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    white-space: nowrap;
}
.mir-templates-page .mir-tpl-card-badge svg {
    width: 12px;
    height: 12px;
}

/* ── Image placeholder (no thumbnail) ── */
.mir-templates-page .mir-tpl-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mir-muted-foreground);
    opacity: 0.25;
}

/* ── Expanded template detail ── */
.mir-templates-page .mir-tpl-expanded {
    margin: 24px auto;
    max-width: min(1200px, 100%);
    max-height: calc(100vh - 120px);
    background: var(--mir-card);
    border: 1px solid hsla(43, 100%, 50%, 0.4);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px hsla(43, 100%, 50%, 0.18);
    animation: mir-expand-card 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: top;
}
@keyframes mir-expand-card {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mir-templates-page .mir-tpl-expanded-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}
@media (max-width: 768px) {
    .mir-templates-page .mir-tpl-expanded-inner {
        grid-template-columns: 1fr;
    }
}

/* Left: image area */
.mir-templates-page .mir-tpl-expanded-img {
    position: relative;
    background: var(--mir-background);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 768px) {
    .mir-templates-page .mir-tpl-expanded-img { padding: 24px; }
}
.mir-templates-page .mir-tpl-expanded-hero {
    position: relative;
    flex: 1;
    min-height: 280px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mir-background);
}
@media (min-width: 768px) {
    .mir-templates-page .mir-tpl-expanded-hero { min-height: 400px; }
}
.mir-templates-page .mir-tpl-expanded-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.5s;
}
.mir-templates-page .mir-tpl-expanded-state-label {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    white-space: nowrap;
}
.mir-templates-page .mir-tpl-expanded-thumbs {
    display: flex;
    gap: 8px;
}
.mir-templates-page .mir-tpl-expanded-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--mir-border);
    cursor: pointer;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .mir-templates-page .mir-tpl-expanded-thumb { width: 80px; height: 80px; }
}
.mir-templates-page .mir-tpl-expanded-thumb--active {
    border-color: var(--mir-primary);
}
.mir-templates-page .mir-tpl-expanded-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right: info area */
.mir-templates-page .mir-tpl-expanded-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    .mir-templates-page .mir-tpl-expanded-info { padding: 24px; }
}

.mir-templates-page .mir-tpl-expanded-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.mir-templates-page .mir-tpl-expanded-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--mir-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .mir-templates-page .mir-tpl-expanded-title { font-size: 24px; }
}
.mir-templates-page .mir-tpl-expanded-subtitle {
    font-size: 14px;
    color: var(--mir-muted-foreground);
    margin-top: 2px;
}
.mir-templates-page .mir-tpl-expanded-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    background: none;
    border: none;
}
.mir-templates-page .mir-tpl-expanded-close:hover {
    background: var(--mir-background);
}
.mir-templates-page .mir-tpl-expanded-close svg {
    width: 16px;
    height: 16px;
}

/* Metadata dl */
.mir-templates-page .mir-tpl-expanded-dl {
    font-size: 12px;
}
.mir-templates-page .mir-tpl-expanded-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid hsla(0, 0%, 50%, 0.1);
}
.mir-templates-page .mir-tpl-expanded-row + .mir-tpl-expanded-row {
    margin-top: 6px;
}
.mir-templates-page .mir-tpl-expanded-dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
}
.mir-templates-page .mir-tpl-expanded-dd {
    color: var(--mir-foreground);
    text-transform: capitalize;
}

/* Color dots */
.mir-templates-page .mir-tpl-expanded-colors {
    margin-top: 4px;
}
.mir-templates-page .mir-tpl-expanded-colors-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    margin-bottom: 6px;
}
.mir-templates-page .mir-tpl-expanded-color-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mir-templates-page .mir-tpl-expanded-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
}

/* Features */
.mir-templates-page .mir-tpl-expanded-features {
    font-size: 12px;
}
.mir-templates-page .mir-tpl-expanded-features-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
    margin-bottom: 6px;
}
.mir-templates-page .mir-tpl-expanded-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.mir-templates-page .mir-tpl-expanded-features li {
    color: var(--mir-foreground);
    padding: 2px 0;
}
.mir-templates-page .mir-tpl-expanded-features li svg {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 4px;
    color: #22C55E;
}

/* CTA area */
.mir-templates-page .mir-tpl-expanded-cta {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mir-templates-page .mir-tpl-expanded-use-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    background: var(--mir-primary);
    color: #000;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-templates-page .mir-tpl-expanded-use-btn:hover {
    background: hsla(43, 100%, 55%, 0.95);
}
.mir-templates-page .mir-tpl-expanded-use-btn svg {
    width: 16px;
    height: 16px;
}
.mir-templates-page .mir-tpl-expanded-hint {
    text-align: center;
    font-size: 11px;
    color: var(--mir-muted-foreground);
}

/* ── Loading spinner ── */
.mir-templates-page .mir-lib-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--mir-border);
    border-top-color: var(--mir-primary);
    border-radius: 50%;
    animation: mir-spin 0.7s linear infinite;
}
@keyframes mir-spin {
    to { transform: rotate(360deg); }
}

/* ── Empty state ── */
.mir-templates-page .mir-lib-empty {
    text-align: center;
    padding: 5rem 1rem;
}
.mir-templates-page .mir-tpl-empty-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    color: var(--mir-foreground);
    margin-top: 14px;
    font-weight: 700;
}
.mir-templates-page .mir-tpl-empty-sub {
    font-size: 14px;
    color: var(--mir-muted-foreground);
    margin-top: 4px;
}
.mir-templates-page .mir-tpl-empty-clear {
    font-size: 12px;
    color: var(--mir-primary);
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    text-decoration: underline;
}

/* ── Sentinel / loading-more ── */
.mir-templates-page .mir-tpl-sentinel {
    height: 40px;
}
.mir-templates-page .mir-tpl-loading-more {
    text-align: center;
    padding: 1rem 0;
    color: var(--mir-muted-foreground);
    font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Create V4 — Lovable-prototype port: 3-panel collapsible bulk
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
.mir-create-v3 {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 68px;
    overflow: hidden;
}
@media (min-width: 768px) {
    .mir-create-v3 { padding: 12px 24px 68px; }
}

/* ── Collapsible panel (SectionCard) ── */
.mir-create-panel {
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: flex 0.25s ease;
}
.mir-create-panel--flex {
    flex: 1 1 0;
    min-height: 0;
}
.mir-create-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 44px;
    flex-shrink: 0;
    border-bottom: 1px solid hsla(0, 0%, 50%, 0.12);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.mir-create-panel-header:hover {
    background: hsla(0, 0%, 50%, 0.04);
}
.mir-create-panel-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
    font-size: 10px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}
.mir-create-panel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--mir-foreground);
}
.mir-create-panel-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mir-muted-foreground);
}
.mir-create-panel-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--mir-primary);
    padding: 2px 8px;
    border-radius: 99px;
    background: hsla(43, 100%, 50%, 0.1);
    border: 1px solid hsla(43, 100%, 50%, 0.2);
}
.mir-create-panel-spacer { flex: 1; }
.mir-create-panel-chevron {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--mir-muted-foreground);
    transition: transform 0.2s;
}
.mir-create-panel-chevron--up { transform: rotate(180deg); }
.mir-create-panel-body {
    padding: 12px;
}

/* ── Selected row (120px horizontal strip) ── */
.mir-create-selected-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 120px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.mir-create-selected-row::-webkit-scrollbar { display: none; }

/* ── ThumbButton (selectable design/template tile) ── */
.mir-create-thumb {
    position: relative;
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--mir-border);
    cursor: pointer;
    transition: all 0.18s;
    padding: 0;
    background: var(--mir-background);
}
.mir-create-thumb:hover { border-color: hsla(43, 100%, 50%, 0.5); }
.mir-create-thumb--selected {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.3);
}
.mir-create-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-create-thumb-check {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mir-primary);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.mir-create-thumb-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 3;
    padding: 0;
}
.mir-create-thumb:hover .mir-create-thumb-remove { opacity: 1; }
.mir-create-thumb-remove:hover { color: #f87171; }
.mir-create-thumb-label {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.mir-create-thumb-label > span {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Upload tile + Add tile ── */
.mir-create-upload-tile {
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 2px dashed var(--mir-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    transition: all 0.18s;
    background: transparent;
    padding: 0;
}
.mir-create-upload-tile:hover {
    border-color: var(--mir-primary);
    color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.04);
}
.mir-create-upload-tile > span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 600;
}
.mir-create-add-tile {
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 2px dashed hsla(43, 100%, 50%, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mir-primary);
    cursor: pointer;
    transition: all 0.18s;
    background: transparent;
    padding: 0;
}
.mir-create-add-tile:hover {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.06);
}
.mir-create-add-tile > span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 600;
}

/* ── TemplateRowCard (selected template with variant badge + colors) ── */
.mir-create-tpl-card {
    position: relative;
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid hsla(43, 100%, 50%, 0.4);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
    background: var(--mir-card);
}
.mir-create-tpl-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-create-tpl-card-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    z-index: 2;
}
.mir-create-tpl-card-variants {
    padding: 2px 6px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: #fff;
}
.mir-create-tpl-card-close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
}
.mir-create-tpl-card-close:hover { color: #f87171; }
.mir-create-tpl-card-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    z-index: 2;
}
.mir-create-tpl-card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.mir-create-tpl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.mir-create-tpl-card-dots {
    display: flex;
    align-items: center;
    gap: -2px;
}
.mir-create-tpl-card-dots > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    margin-left: -2px;
}
.mir-create-tpl-card-dots > span:first-child { margin-left: 0; }
.mir-create-tpl-card-dots-fixed {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
}
.mir-create-tpl-card-color-btn {
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
    border: none;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s;
}
.mir-create-tpl-card-color-btn:hover {
    background: var(--mir-primary);
    color: #1a1a1a;
}

/* ── Picker panel (inline full-height picker) ── */
.mir-create-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
}
.mir-create-picker-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mir-create-picker-search {
    flex: 1;
    height: 32px;
    padding: 0 12px 0 32px;
    border-radius: 8px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s;
}
.mir-create-picker-search:focus {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.12);
}
.mir-create-picker-search-wrap {
    position: relative;
    flex: 1;
}
.mir-create-picker-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mir-muted-foreground);
    pointer-events: none;
}
.mir-create-picker-done {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--mir-primary);
    color: #1a1a1a;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.mir-create-picker-done:hover { background: hsla(43, 100%, 45%, 1); }
.mir-create-picker-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 8px;
    padding-right: 4px;
    align-content: start;
}
.mir-create-picker-grid--designs {
    grid-template-columns: repeat(6, 1fr);
}
.mir-create-picker-grid--templates {
    grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px) {
    .mir-create-picker-grid--designs { grid-template-columns: repeat(8, 1fr); }
    .mir-create-picker-grid--templates { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1024px) {
    .mir-create-picker-grid--designs { grid-template-columns: repeat(10, 1fr); }
    .mir-create-picker-grid--templates { grid-template-columns: repeat(8, 1fr); }
}
/* Picker thumb (square, in grid) */
.mir-create-picker-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--mir-border);
    cursor: pointer;
    transition: all 0.18s;
    padding: 0;
    background: var(--mir-background);
}
.mir-create-picker-thumb:hover { border-color: hsla(43, 100%, 50%, 0.5); }
.mir-create-picker-thumb--selected {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.3);
}
.mir-create-picker-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-create-picker-thumb-check {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mir-primary);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
/* Template picker card (with name + meta overlay) */
.mir-create-picker-tpl-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%);
}
.mir-create-picker-tpl-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mir-create-picker-tpl-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Scrollable pill row (matches templates page) ── */
.mir-create-scroll-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}
.mir-create-scroll-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.mir-create-scroll-track {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 36px;
}
.mir-create-scroll-track::-webkit-scrollbar { display: none; }
.mir-create-scroll-pills {
    display: flex;
    gap: 8px;
}
.mir-create-scroll-wrap--expanded .mir-create-scroll-inner { display: block; }
.mir-create-scroll-wrap--expanded .mir-create-scroll-track { overflow: visible; padding-right: 36px; }
.mir-create-scroll-wrap--expanded .mir-create-scroll-pills { flex-wrap: wrap; }

.mir-create-scroll-mask-left,
.mir-create-scroll-mask-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 1;
}
.mir-create-scroll-mask-left {
    left: 0;
    background: linear-gradient(to right, var(--mir-card) 30%, transparent);
}
.mir-create-scroll-mask-right {
    right: 36px;
    background: linear-gradient(to left, var(--mir-card) 30%, transparent);
}
.mir-create-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    color: var(--mir-muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}
.mir-create-scroll-arrow:hover {
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.4);
}
.mir-create-scroll-arrow--left { left: 0; }
.mir-create-scroll-arrow--right { right: 36px; }

.mir-create-expand-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    color: var(--mir-muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}
.mir-create-expand-btn:hover {
    color: var(--mir-primary);
    border-color: hsla(43, 100%, 50%, 0.4);
}
.mir-create-scroll-wrap--expanded .mir-create-expand-btn {
    background: hsla(43, 100%, 50%, 0.1);
    border-color: hsla(43, 100%, 50%, 0.3);
    color: var(--mir-primary);
    top: 0;
    transform: none;
}

.mir-create-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--mir-border);
    background: transparent;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    transition: all 0.15s;
}
.mir-create-pill:hover {
    background: hsla(43, 100%, 50%, 0.06);
    border-color: hsla(43, 100%, 50%, 0.25);
    color: var(--mir-foreground);
}
.mir-create-pill--active {
    background: hsla(43, 100%, 50%, 0.08) !important;
    border-color: hsla(43, 100%, 50%, 0.35) !important;
    color: var(--mir-primary) !important;
}
.mir-create-pill svg {
    width: 16px;
    height: 16px;
}
.mir-create-pill--mine {
    gap: 5px;
}
.mir-create-pill--mine svg {
    width: 14px;
    height: 14px;
}

/* ── Matrix preview grid ── */
.mir-create-matrix-grid {
    overflow-y: auto;
}
.mir-create-matrix-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
@media (min-width: 640px) { .mir-create-matrix-inner { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 768px) { .mir-create-matrix-inner { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1024px) { .mir-create-matrix-inner { grid-template-columns: repeat(10, 1fr); } }
@media (min-width: 1280px) { .mir-create-matrix-inner { grid-template-columns: repeat(12, 1fr); } }

.mir-create-matrix-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    transition: opacity 0.2s;
}
.mir-create-matrix-cell--pending { opacity: 0.4; }
.mir-create-matrix-cell-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ── PreviewTile (clip-path composite) ── */
.mir-create-preview-tile {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--mir-card);
}
.mir-create-preview-tile > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── In-place render result overlay (replaces composite on completion) ── */
.mir-create-tile-result {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    animation: mirCreateResultIn 0.4s ease-out;
}
@keyframes mirCreateResultIn {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Loading overlay on top of composite ── */
.mir-create-tile-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}

/* ── Status badges and overlays (positioned on matrix cell) ── */
.mir-create-matrix-cell .mir-create-tile-color-dot {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 4;
}
.mir-create-matrix-cell .mir-create-tile-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(6px);
    z-index: 4;
}
.mir-create-matrix-cell--pending .mir-create-tile-status-badge,
.mir-create-matrix-cell--queued .mir-create-tile-status-badge,
.mir-create-matrix-cell--processing .mir-create-tile-status-badge {
    background: hsla(43, 100%, 50%, 0.22);
    color: var(--mir-primary);
}
.mir-create-matrix-cell--completed .mir-create-tile-status-badge {
    background: hsla(142, 70%, 45%, 0.22);
    color: #4ade80;
}
.mir-create-matrix-cell--failed .mir-create-tile-status-badge {
    background: hsla(0, 70%, 50%, 0.22);
    color: #f87171;
}
.mir-create-matrix-cell .mir-create-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    cursor: pointer;
}
.mir-create-matrix-cell--completed { cursor: pointer; }
.mir-create-matrix-cell--completed:hover .mir-create-tile-overlay { opacity: 1; }

/* ── Matrix empty state ── */
.mir-create-matrix-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    gap: 8px;
    color: var(--mir-muted-foreground);
    text-align: center;
}
.mir-create-matrix-empty > svg { opacity: 0.4; }
.mir-create-matrix-empty > p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

/* ── Fixed sticky footer ── */
.mir-create-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 40;
    border-top: 1px solid var(--mir-border);
    background: rgba(var(--mir-background-rgb, 18, 18, 18), 0.95);
    backdrop-filter: blur(12px);
}
.mir-create-footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
}
@media (min-width: 768px) {
    .mir-create-footer-inner { padding: 0 24px; }
}
.mir-create-footer-options {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mir-create-footer-select {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.mir-create-footer-select:hover { border-color: hsla(43, 100%, 50%, 0.4); }
.mir-create-footer-formats {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
}
.mir-create-format-pill {
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.mir-create-format-pill:hover { color: var(--mir-foreground); }
.mir-create-format-pill--active {
    background: var(--mir-primary);
    color: #1a1a1a;
}
.mir-create-footer-spacer { flex: 1; }

/* Generate button */
.mir-create-generate-btn {
    height: 40px;
    padding: 0 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, hsla(43, 100%, 50%, 1), hsla(36, 100%, 48%, 1));
    color: #1a1a1a;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.18s;
    flex-shrink: 0;
}
.mir-create-generate-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}
.mir-create-generate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--mir-card);
    color: var(--mir-muted-foreground);
}
.mir-create-generate-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    opacity: 0.7;
    margin-left: 4px;
}

/* Progress bar (generating) */
.mir-create-progress {
    width: 280px;
    flex-shrink: 0;
}
.mir-create-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background: hsla(43, 100%, 50%, 0.1);
    overflow: hidden;
}
.mir-create-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--mir-primary);
    transition: width 0.3s ease;
}
.mir-create-progress-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--mir-muted-foreground);
    text-align: right;
    margin-top: 2px;
}

/* Done state */
.mir-create-done-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mir-create-done-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mir-create-done-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    color: var(--mir-foreground);
    transition: all 0.15s;
}
.mir-create-done-btn:hover { border-color: var(--mir-primary); color: var(--mir-primary); }
.mir-create-done-btn--primary {
    background: var(--mir-primary);
    color: #1a1a1a;
    border-color: var(--mir-primary);
}
.mir-create-done-btn--primary:hover { background: hsla(43, 100%, 45%, 1); }

/* ── Color picker modal ── */
.mir-create-color-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.mir-create-color-modal {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mir-create-color-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mir-border);
}
.mir-create-color-modal-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mir-border);
    flex-shrink: 0;
}
.mir-create-color-modal-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-create-color-modal-info { flex: 1; min-width: 0; }
.mir-create-color-modal-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--mir-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mir-create-color-modal-desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mir-muted-foreground);
    margin-top: 2px;
}
.mir-create-color-modal-close {
    background: transparent;
    border: none;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
}
.mir-create-color-modal-close:hover {
    background: var(--mir-background);
    color: var(--mir-foreground);
}
.mir-create-color-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.mir-create-color-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--mir-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mir-create-color-modal-variant-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--mir-muted-foreground);
}
.mir-create-color-modal-variant-count > strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--mir-primary);
}

/* ── Swatch grid (inside color modal) ── */
.mir-create-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.mir-create-swatch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.mir-create-swatch-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.18s;
    position: relative;
}
.mir-create-swatch-circle:hover { transform: scale(1.1); }
.mir-create-swatch-circle--active {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 3px hsla(43, 100%, 50%, 0.3);
    transform: scale(1.05);
}
.mir-create-swatch-circle--active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.mir-create-swatch-label {
    font-size: 9px;
    color: var(--mir-muted-foreground);
    max-width: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Color group accordion (multi profile) */
.mir-create-color-group {
    border: 1px solid var(--mir-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 6px;
    transition: border-color 0.15s;
}
.mir-create-color-group--open { border-color: hsla(43, 100%, 50%, 0.4); }
.mir-create-color-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}
.mir-create-color-group-header:hover { background: hsla(0, 0%, 50%, 0.04); }
.mir-create-color-group-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--mir-foreground);
    flex: 1;
    min-width: 0;
}
.mir-create-color-group-hint {
    font-size: 10px;
    color: var(--mir-muted-foreground);
}
.mir-create-color-group-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mir-muted-foreground);
}
.mir-create-color-group-dots {
    display: flex;
    margin-left: -3px;
}
.mir-create-color-group-dots > span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--mir-card);
    flex-shrink: 0;
    margin-left: -4px;
}
.mir-create-color-group-dots > span:first-child { margin-left: 0; }
.mir-create-color-group-body {
    padding: 8px 12px 12px;
    border-top: 1px solid hsla(0, 0%, 50%, 0.1);
}
.mir-create-color-group-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid hsla(0, 0%, 50%, 0.08);
}
.mir-create-color-group-action-btn {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.mir-create-color-group-action-btn:hover { color: var(--mir-primary); }

/* ── Custom color hex input (inside color modal) ── */
.mir-create-custom-color {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mir-create-custom-color-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px dashed var(--mir-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.15s;
}
.mir-create-custom-color-trigger:hover {
    border-color: var(--mir-primary);
    color: var(--mir-primary);
}
.mir-create-custom-color-trigger > input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Fixed color (none profile) message */
.mir-create-color-fixed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    font-size: 12px;
}

/* Swatch "Select all" header */
.mir-create-swatch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mir-create-swatch-header-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mir-muted-foreground);
}
.mir-create-swatch-header-action {
    font-size: 11px;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}
.mir-create-swatch-header-action:hover { color: var(--mir-primary); }

/* ── Combo count info row ── */
.mir-create-combo-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--mir-muted-foreground);
}
.mir-create-combo-info strong {
    color: var(--mir-foreground);
}

/* ── Template picker modal (shared) ── */
.mir-create-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.mir-create-modal {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 16px;
    width: 100%;
    max-width: 920px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mir-create-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mir-border);
}
.mir-create-modal-close {
    background: transparent;
    border: none;
    color: var(--mir-muted-foreground);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s;
}
.mir-create-modal-close:hover {
    background: var(--mir-background);
    color: var(--mir-foreground);
}
.mir-create-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.mir-create-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--mir-border);
    text-align: right;
}
.mir-create-modal-search-row {
    display: flex;
    gap: 10px;
}
input.mir-create-modal-search {
    flex: 1;
    height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 13px;
    outline: none;
}
input.mir-create-modal-search:focus {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}
.mir-create-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.mir-create-modal-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mir-background);
    border: 2px solid var(--mir-border);
    cursor: pointer;
    aspect-ratio: 1 / 1;
    transition: all 0.2s;
}
.mir-create-modal-card:hover {
    transform: translateY(-4px);
    border-color: var(--mir-primary);
    box-shadow: 0 8px 24px hsla(43, 100%, 50%, 0.12);
}
.mir-create-modal-card--selected {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.3);
}
.mir-create-modal-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-create-modal-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: #fff;
}

/* ── Spinner ── */
.mir-create-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: mirCreateSpin 0.7s linear infinite;
    vertical-align: -2px;
}
.mir-create-spinner--lg {
    width: 24px;
    height: 24px;
    border-width: 3px;
    color: var(--mir-primary);
}
@keyframes mirCreateSpin {
    to { transform: rotate(360deg); }
}
.mir-create-pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mir-primary);
    animation: mirCreatePulse 1.2s ease-in-out infinite;
}
@keyframes mirCreatePulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* ── Result tiles (in matrix after generation) ── */
.mir-create-tile {
    border-radius: 10px;
    overflow: hidden;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    opacity: 0;
    animation: mirCreateTileIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mirCreateTileIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mir-create-tile-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: var(--mir-background);
    cursor: default;
}
.mir-create-tile-status-completed .mir-create-tile-thumb { cursor: pointer; }
.mir-create-tile-thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-create-tile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mir-muted-foreground);
}
.mir-create-tile-color-dot {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
.mir-create-tile-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(6px);
    z-index: 2;
}
.mir-create-tile-status-queued .mir-create-tile-status-badge,
.mir-create-tile-status-pending .mir-create-tile-status-badge,
.mir-create-tile-status-processing .mir-create-tile-status-badge {
    background: hsla(43, 100%, 50%, 0.22);
    color: var(--mir-primary);
}
.mir-create-tile-status-completed .mir-create-tile-status-badge {
    background: hsla(142, 70%, 45%, 0.22);
    color: #4ade80;
}
.mir-create-tile-status-failed .mir-create-tile-status-badge {
    background: hsla(0, 70%, 50%, 0.22);
    color: #f87171;
}
.mir-create-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    opacity: 0;
    transition: opacity 0.22s;
    z-index: 3;
}
.mir-create-tile-status-completed:hover .mir-create-tile-overlay { opacity: 1; }
.mir-create-tile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-create-tile-action:hover {
    background: var(--mir-primary);
    color: #1a1a1a;
    border-color: var(--mir-primary);
}

/* ── Collection popover ── */
.mir-create-collection-popover {
    position: absolute;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 8px;
    z-index: 1000;
    min-width: 180px;
}
.mir-create-collection-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--mir-foreground);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.mir-create-collection-item:hover {
    background: hsla(43, 100%, 50%, 0.1);
    color: var(--mir-primary);
}
.mir-create-collection-cancel {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--mir-muted-foreground);
    font-size: 11px;
    cursor: pointer;
    text-align: center;
}
.mir-create-collection-cancel:hover { background: var(--mir-background); }


/* ═══════════════════════════════════════════════════════════════════════
   Settings V3 — 5-section vertical layout with billing rings
   ═══════════════════════════════════════════════════════════════════════ */

.mir-set-page {
    padding-bottom: 4rem;
}

/* ── Settings pills wrap (reuses Library pill classes) ── */
.mir-set-pills-wrap {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Settings sticky toolbar override ── */
.mir-set-page > .mir-lib-work-toolbar {
    margin-top: -12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Settings centered content area (matches API/Users pages) ── */
.mir-set-content {
    max-width: 780px;
    margin: 0 auto;
    padding-top: 20px;
}

/* ── Quick Stats cards ── */
.mir-set-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.mir-set-quick-stat-card {
    background: var(--mir-dark-bg);
    border: 1px solid var(--mir-border);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
.mir-set-quick-stat-val {
    display: block;
    color: var(--mir-foreground);
}
.mir-set-quick-stat-sub {
    font-size: 11px;
    color: var(--mir-muted-foreground);
    display: block;
    margin-top: 2px;
}

/* ── Section ── */
.mir-set-section {
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}
.mir-set-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mir-border);
    background: hsla(43, 100%, 50%, 0.02);
}
.mir-set-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: hsla(43, 100%, 50%, 0.15);
    color: var(--mir-primary);
    font-size: 12px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}
.mir-set-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--mir-foreground);
}
.mir-set-section-body {
    padding: 16px;
}

/* ── Field + input ── */
.mir-set-field {
    margin-bottom: 10px;
}
.mir-set-field > label,
.mir-set-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mir-muted-foreground);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mir-set-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    color: var(--mir-foreground);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.mir-set-input:focus {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}
.mir-set-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.mir-set-field-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Save button ── */
.mir-set-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    background: hsla(43, 100%, 50%, 0.18);
    color: var(--mir-primary);
    border: 1px solid hsla(43, 100%, 50%, 0.3);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-set-save-btn:hover:not(:disabled) {
    background: hsla(43, 100%, 50%, 0.28);
}
.mir-set-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Spinner ── */
.mir-set-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: mirSetSpin 0.7s linear infinite;
    vertical-align: -2px;
}
@keyframes mirSetSpin { to { transform: rotate(360deg); } }

/* ── Profile row ── */
.mir-set-profile-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.mir-set-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mir-set-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mir-background);
    border: 2px solid var(--mir-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.mir-set-avatar:hover {
    border-color: var(--mir-primary);
}
.mir-set-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mir-set-avatar-initials {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: var(--mir-muted-foreground);
}
.mir-set-profile-fields {
    flex: 1;
    min-width: 240px;
}

/* ── Sub-card (collapsible) ── */
.mir-set-subcard {
    border: 1px solid var(--mir-border);
    border-radius: 10px;
    overflow: hidden;
}
.mir-set-subcard-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: hsla(43, 100%, 50%, 0.02);
    border: none;
    color: var(--mir-foreground);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}
.mir-set-subcard-toggle:hover {
    background: hsla(43, 100%, 50%, 0.06);
}
.mir-set-subcard-body {
    padding: 14px;
    border-top: 1px solid var(--mir-border);
}

/* ── Session row ── */
.mir-set-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid hsla(0, 0%, 50%, 0.1);
}
.mir-set-session-row:last-child {
    border-bottom: none;
}

/* ── Badge ── */
.mir-set-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mir-set-badge--amber {
    background: hsla(43, 100%, 50%, 0.18);
    color: var(--mir-primary);
}
.mir-set-badge--gray {
    background: hsla(0, 0%, 50%, 0.15);
    color: var(--mir-muted-foreground);
}
.mir-set-badge--green {
    background: hsla(142, 70%, 45%, 0.18);
    color: #4ade80;
}

/* ── Current plan card ── */
.mir-set-plan-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--mir-border);
    border-radius: 10px;
    background: hsla(43, 100%, 50%, 0.03);
    margin-bottom: 18px;
}
.mir-set-plan-current-left {
    display: flex;
    align-items: center;
}
.mir-set-plan-current-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Usage rings ── */
.mir-set-rings-row {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 0;
}
.mir-set-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}
.mir-set-ring {
    display: block;
}
.mir-set-ring--warn {
    animation: mirSetRingPulse 2s ease-in-out infinite;
}
@keyframes mirSetRingPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
.mir-set-ring-label {
    margin-top: -64px;
    position: relative;
    text-align: center;
    margin-bottom: 14px;
}
.mir-set-ring-nudge {
    color: hsl(20, 90%, 55%);
    font-weight: 700;
    margin-top: 4px;
    text-align: center;
    max-width: 160px;
}

/* ── Plan toggle ── */
.mir-set-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.mir-set-plan-toggle {
    display: inline-flex;
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    border-radius: 9999px;
    padding: 3px;
    gap: 2px;
}
.mir-set-plan-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mir-muted-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-set-plan-toggle-btn:hover {
    color: var(--mir-foreground);
}
.mir-set-plan-toggle-btn--active {
    background: hsla(43, 100%, 50%, 0.18);
    color: var(--mir-primary);
}
.mir-set-plan-save-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: hsla(142, 70%, 45%, 0.2);
    color: #4ade80;
}

/* ── Plan card grid ── */
.mir-set-plan-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.mir-set-plan-card {
    border: 1px solid var(--mir-border);
    border-radius: 10px;
    padding: 14px;
    background: var(--mir-background);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}
.mir-set-plan-card--current {
    border-color: var(--mir-primary);
    box-shadow: 0 0 0 2px hsla(43, 100%, 50%, 0.15);
}
.mir-set-plan-card:not(.mir-set-plan-card--current):hover {
    transform: translateY(-4px);
    border-color: var(--mir-primary);
    box-shadow: 0 8px 24px hsla(43, 100%, 50%, 0.12);
}
.mir-set-plan-card-head {
    display: flex;
    align-items: center;
}
.mir-set-plan-card-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.mir-set-plan-features {
    flex: 1;
}
.mir-set-plan-feature-row {
    padding: 2px 0;
}
.mir-set-plan-upgrade-btn {
    width: 100%;
    padding: 7px 0;
    border-radius: 8px;
    background: hsla(43, 100%, 50%, 0.18);
    color: var(--mir-primary);
    border: 1px solid hsla(43, 100%, 50%, 0.3);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-set-plan-upgrade-btn:hover:not(:disabled) {
    background: hsla(43, 100%, 50%, 0.3);
}

/* ── Invoice table ── */
.mir-set-invoice-table {
    width: 100%;
    border-collapse: collapse;
}
.mir-set-invoice-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: var(--mir-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mir-border);
}
.mir-set-invoice-table td {
    padding: 8px;
    border-bottom: 1px solid hsla(0, 0%, 50%, 0.08);
}
.mir-set-invoice-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mir-set-invoice-skeleton-row {
    height: 32px;
    border-radius: 6px;
    background: hsla(43, 100%, 50%, 0.05);
    animation: mirSetSkeletonPulse 1.5s ease-in-out infinite;
}
@keyframes mirSetSkeletonPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

/* ── Preference pills ── */
.mir-set-pill-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mir-set-pill {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mir-muted-foreground);
    background: var(--mir-background);
    border: 1px solid var(--mir-border);
    cursor: pointer;
    transition: all 0.2s;
}
.mir-set-pill:hover {
    color: var(--mir-foreground);
    border-color: hsla(43, 100%, 50%, 0.3);
}
.mir-set-pill--active {
    background: hsla(43, 100%, 50%, 0.18);
    color: var(--mir-primary);
    border-color: var(--mir-primary);
}

/* ── Notification toggle ── */
.mir-set-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid hsla(0, 0%, 50%, 0.08);
}
.mir-set-toggle-row:last-child {
    border-bottom: none;
}
.mir-set-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}
.mir-set-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.mir-set-toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: var(--mir-border);
    transition: background 0.2s;
}
.mir-set-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}
.mir-set-toggle input:checked + .mir-set-toggle-slider {
    background: var(--mir-primary);
}
.mir-set-toggle input:checked + .mir-set-toggle-slider::after {
    transform: translateX(16px);
}

/* ── Developer upgrade card ── */
.mir-set-dev-upgrade {
    text-align: center;
    padding: 16px;
    border: 1px dashed var(--mir-border);
    border-radius: 8px;
    background: hsla(43, 100%, 50%, 0.02);
}

/* ── Danger Zone ── */
.mir-set-danger-section {
    border-color: hsla(0, 70%, 50%, 0.3);
    background: hsla(0, 70%, 50%, 0.02);
}
.mir-set-danger-btn {
    padding: 8px 18px;
    border-radius: 8px;
    background: hsla(0, 70%, 50%, 0.15);
    color: hsl(0, 70%, 60%);
    border: 1px solid hsla(0, 70%, 50%, 0.3);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.mir-set-danger-btn:hover:not(:disabled) {
    background: hsla(0, 70%, 50%, 0.25);
}
.mir-set-danger-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mir-set-danger-btn--secondary {
    background: hsla(0, 0%, 50%, 0.1);
    color: var(--mir-muted-foreground);
    border-color: var(--mir-border);
}
.mir-set-danger-btn--secondary:hover:not(:disabled) {
    background: hsla(0, 0%, 50%, 0.18);
}

/* ── Delete modal ── */
.mir-set-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.mir-set-modal {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
}

/* ── Team invite row ── */
.mir-set-team-invite-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .mir-set-page { padding-left: 8px; padding-right: 8px; }
    .mir-set-profile-row { flex-direction: column; align-items: center; }
    .mir-set-rings-row { gap: 20px; }
    .mir-set-plan-card-grid { grid-template-columns: 1fr; }
    .mir-set-field-row { flex-direction: column; }
}

/* ====================================================================
   API Dashboard page
   ==================================================================== */
.mir-api-page {
    padding-bottom: 4rem;
}
.mir-api-page > .mir-lib-work-toolbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mir-api-content {
    max-width: 780px;
    margin: 0 auto;
    padding-top: 20px;
}
.mir-api-section {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.mir-api-upgrade {
    text-align: center;
    padding: 48px 24px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 12px;
}
.mir-api-upgrade-icon {
    color: var(--mir-muted-foreground);
    opacity: 0.5;
    margin-bottom: 16px;
}
.mir-api-key-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--mir-border);
}
.mir-api-key-row:last-of-type { border-bottom: none; }
.mir-api-key-info { display: flex; flex-direction: column; gap: 2px; }
.mir-api-key-actions { display: flex; gap: 6px; }
.mir-api-create-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.mir-api-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mir-api-usage-card {
    background: var(--mir-dark-bg);
    border: 1px solid var(--mir-border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.mir-api-code-block {
    background: var(--mir-dark-bg);
    border: 1px solid var(--mir-border);
    border-radius: 8px;
    padding: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--mir-foreground);
    overflow-x: auto;
    line-height: 1.6;
}
.mir-api-code-pre {
    margin: 0;
    white-space: pre;
    overflow-x: auto;
    padding-right: 60px;
}
.mir-api-usage-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: hsla(43, 100%, 50%, 0.08);
    overflow: hidden;
}
.mir-api-usage-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--mir-primary);
    transition: width 0.3s ease;
}
.mir-api-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    background: var(--mir-card);
    color: var(--mir-foreground);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.mir-api-link-btn:hover {
    border-color: var(--mir-primary);
    background: hsla(43, 100%, 50%, 0.05);
}
.mir-api-link-btn svg {
    color: var(--mir-primary);
    flex-shrink: 0;
}

/* API Docs tab */
.mir-api-doc-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
    padding: 12px;
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 10px;
}
.mir-api-doc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--mir-foreground);
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    text-decoration: none;
    transition: background 0.15s;
}
.mir-api-doc-link:hover {
    background: hsla(43, 100%, 50%, 0.06);
}
.mir-api-doc-method {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 48px;
    text-align: center;
}
.mir-api-doc-method--get {
    background: hsla(142, 70%, 45%, 0.15);
    color: hsl(142, 70%, 45%);
}
.mir-api-doc-method--post {
    background: hsla(43, 100%, 50%, 0.15);
    color: hsl(43, 100%, 67%);
}
.mir-api-doc-endpoint {
    padding: 20px 0;
    border-top: 1px solid var(--mir-border);
}
.mir-api-doc-endpoint:first-of-type {
    border-top: none;
    padding-top: 0;
}
.mir-api-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13px;
}
.mir-api-doc-table th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mir-border);
    color: var(--mir-muted-foreground);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mir-api-doc-table td {
    padding: 8px 12px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.04);
}
.mir-api-doc-table code {
    background: hsla(43, 100%, 50%, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--mir-primary);
}
.mir-api-placeholder {
    padding: 24px;
    text-align: center;
    color: var(--mir-muted-foreground);
    font-size: 13px;
    border: 1px dashed var(--mir-border);
    border-radius: 8px;
    background: hsla(0, 0%, 0%, 0.15);
}

/* API method badges extended */
.mir-api-doc-method--delete {
    background: hsla(0, 70%, 50%, 0.15);
    color: hsl(0, 70%, 60%);
}
/* Doc group header in nav */
.mir-api-doc-group-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mir-muted-foreground);
    padding: 10px 12px 2px;
}
.mir-api-doc-group-title:first-child { padding-top: 4px; }
/* Doc info card (auth, rate limits, etc.) */
.mir-api-doc-info {
    background: var(--mir-dark-bg);
    border: 1px solid var(--mir-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--mir-foreground);
}
.mir-api-doc-info p { margin: 0 0 8px; }
.mir-api-doc-info p:last-child { margin-bottom: 0; }
.mir-api-doc-info code {
    background: hsla(43, 100%, 50%, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--mir-primary);
}
.mir-api-doc-response-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mir-muted-foreground);
    margin: 12px 0 6px;
}

/* Key reveal banner */
.mir-api-key-reveal {
    background: hsla(43, 100%, 50%, 0.06);
    border: 1px solid var(--mir-primary);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.mir-api-key-reveal-value {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    background: var(--mir-dark-bg);
    border: 1px solid var(--mir-border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    word-break: break-all;
    color: var(--mir-foreground);
}
.mir-api-key-reveal-value span { flex: 1; }

/* API Playground */
.mir-api-pg-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.mir-api-pg-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mir-api-pg-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--mir-border);
    background: var(--mir-dark-bg);
    color: var(--mir-foreground);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.mir-api-pg-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--mir-border);
    background: var(--mir-dark-bg);
    color: var(--mir-foreground);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    box-sizing: border-box;
}
.mir-api-pg-input::placeholder { color: var(--mir-muted-foreground); opacity: 0.5; }
.mir-api-pg-input:focus { outline: none; border-color: var(--mir-primary); }
.mir-api-pg-params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 600px) {
    .mir-api-pg-params-grid { grid-template-columns: 1fr; }
}
.mir-api-pg-response { margin-top: 16px; }
.mir-api-pg-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.mir-api-pg-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.mir-api-pg-status--ok {
    background: hsla(142, 70%, 45%, 0.15);
    color: hsl(142, 70%, 45%);
}
.mir-api-pg-status--err {
    background: hsla(0, 70%, 50%, 0.15);
    color: hsl(0, 70%, 60%);
}
.mir-api-pg-time {
    font-size: 12px;
    color: var(--mir-muted-foreground);
    font-family: 'JetBrains Mono', monospace;
}
.mir-api-pg-warn {
    background: hsla(43, 100%, 50%, 0.06);
    border: 1px solid hsla(43, 100%, 50%, 0.2);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: hsl(43, 100%, 67%);
    margin-bottom: 14px;
}

/* ====================================================================
   Users page
   ==================================================================== */
.mir-users-page {
    padding-bottom: 4rem;
}
.mir-users-page > .mir-lib-work-toolbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mir-users-content {
    max-width: 780px;
    margin: 0 auto;
    padding-top: 20px;
}
.mir-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mir-users-invite-row {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 280px;
}
.mir-users-card {
    background: var(--mir-card);
    border: 1px solid var(--mir-border);
    border-radius: 12px;
    padding: 16px;
}
.mir-users-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mir-border);
}
.mir-users-row:last-child { border-bottom: none; }
.mir-users-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: hsla(43, 100%, 50%, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mir-users-avatar-initials {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--mir-primary);
}
.mir-users-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.mir-users-role {
    font-size: 11px;
    font-weight: 600;
    color: var(--mir-muted-foreground);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
}
.mir-users-status {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.mir-users-status--active {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}
.mir-users-status--pending {
    background: rgba(245, 158, 11, 0.12);
    color: var(--mir-primary);
}
.mir-users-empty {
    padding: 32px 0;
    text-align: center;
}
@media (max-width: 600px) {
    .mir-users-header { flex-direction: column; align-items: stretch; }
    .mir-users-invite-row { min-width: 0; }
    .mir-users-row { flex-wrap: wrap; }
}

/* === Save Button Status Dot === */
.mir-save-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mir-save-dot-unsaved {
    background: #ef4444;
    animation: mir-save-dot-blink 2.5s ease-in-out infinite;
}
.mir-save-dot-saved {
    background: #22c55e;
}
@keyframes mir-save-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.mir-save-dropdown-item:hover {
    background: var(--mir-muted);
}