/* GPU Admin Panel CSS
   Design tokens mirror members-area admin so both apps look the same.
   Light mode default, dark mode via [data-theme="dark"]. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   A. PRIMITIVE TOKENS  (mirrors members-area admin.css design tokens)
   ========================================================================== */
:root {
    /* -- Color palette -- */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --blue-400:  #5d7fa9;
    --blue-500:  #355f96;
    --blue-600:  #355f96;
    --blue-700:  #2a4c78;

    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;

    --red-400:   #f87171;
    --red-500:   #ef4444;
    --red-600:   #dc2626;

    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;

    --white: #ffffff;
    --black: #000000;

    /* -- Spacing scale (4px base) -- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* -- Typography scale -- */
    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: 0.875rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  1.875rem;
    --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ff-mono: 'SFMono-Regular', Consolas, monospace;
    --lh: 1.5;

    /* -- Borders + Radius -- */
    --border-width: 1px;
    --border-width-accent: 3px;
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* -- Focus -- */
    --focus-ring-width: 3px;

    /* -- Badge -- */
    --badge-ls: 0.3px;
    --ls-wide: 0.6px;

    /* -- Transitions -- */
    --ease:      0.2s ease;
    --ease-fast: 0.15s ease;
    --ease-soft: 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* -- Layout primitives -- */
    --container-max: 1200px;
    --header-height: 77px;
    --container-px-mobile: var(--sp-4);
    --container-px: var(--sp-6);
    --card-px-mobile: var(--sp-4);
    --card-px: var(--sp-6);

    /* -- Touch targets -- */
    --tap-min: 34px;

    /* -- Admin shell chrome -- */
    --topbar-height: 52px;
    --nav-width: 220px;
    --nav-collapsed-width: 68px;
    --nav-panel-width: 280px;

    /* -- Breakpoints -- */
    --bp-sm:        640px;
    --bp-md:        768px;
    --bp-lg:        1024px;
    --bp-feed-2col: 900px;
    --bp-feed-3col: 1100px;
    --bp-xl:        1400px;

    /* -- Max-width scale -- */
    --max-w-sm:      400px;
    --max-w-md:      640px;
    --max-w-lg:      960px;
    --max-w-xs:      480px;
    --max-w-profile: 560px;
    --max-w-feed:    740px;
    --max-w-viewer:  900px;

    /* -- Z-index scale -- */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    300;
    --z-nav:      350;
    --z-toast:    400;
    --z-progress: 500;
    --z-local:    2;
    --z-above:    10;

    /* -- Overlay tokens -- */
    --c-overlay-light:        rgba(0, 0, 0, 0.10);
    --c-overlay-dark:         rgba(0, 0, 0, 0.72);
    --c-overlay-white:        rgba(255, 255, 255, 0.92);
    --c-overlay-white-subtle: rgba(255, 255, 255, 0.15);
    --c-overlay-modal:        rgba(2, 6, 23, 0.92);
    --c-overlay-white-hover:  rgba(255, 255, 255, 0.30);
    --c-overlay-medium:       rgba(0, 0, 0, 0.6);
    --c-overlay-soft:         rgba(0, 0, 0, 0.3);
    --c-overlay-backdrop:     rgba(2, 6, 23, 0.4);

    /* -- Elevation -- */
    --shadow-elevated: 0 2px 12px rgba(0, 0, 0, 0.15);

    /* -- Icon sizing -- */
    --icon-sm: 18px;
    --icon-md: 20px;
    --icon-lg: 36px;

    /* -- Toggle component -- */
    --toggle-width:  34px;
    --toggle-height: 18px;
    --toggle-thumb:  14px;

    /* -- Misc primitives -- */
    --spa-bar-height: 3px;
    --nudge: 3px;

    /* -- Avatar sizes -- */
    --avatar-xs: 14px;
    --avatar-sm: 30px;
    --avatar-lg: 96px;
    --avatar-xl: 120px;

    /* -- Cover image heights -- */
    --cover-sm: 160px;
    --cover-md: 220px;
    --cover-lg: 280px;

    /* -- Feed grid columns -- */
    --feed-col-sm:        136px;
    --feed-col-sm-max:    180px;
    --feed-col-md:        123px;
    --feed-col-md-max:    162px;
    --feed-col-lg:        162px;
    --feed-col-right-min: 120px;
    --feed-col-right-max: 260px;

    /* -- Component sizing -- */
    --emoji-panel-w:       256px;
    --emoji-panel-h:       260px;
    --menu-dropdown-w:     160px;
    --menu-avatar-w:       200px;
    --media-placeholder-h: 200px;
    --textarea-min-h:      120px;
    --feed-min-h:          100px;
    --play-triangle-h:     9px;
    --notif-fs:            11px;
}

/* ==========================================================================
   B. SEMANTIC TOKENS -- Light
   Mirrors members-area admin shape; muted/soft text and borders pushed
   1-2 steps darker for stronger contrast (operators reported all gray).
   ========================================================================== */
:root {
    --c-bg:             var(--slate-50);
    --c-surface:        var(--white);
    --c-surface-raised: var(--white);
    --c-text:           var(--slate-900);
    --c-text-muted:     var(--slate-700);
    --c-text-soft:      var(--slate-600);
    --c-hover:          var(--slate-100);
    --c-border:         #c5cdd9;

    --c-primary:          var(--blue-600);
    --c-primary-dark:     var(--blue-700);
    --c-primary-light:    rgba(53, 95, 150, 0.05);
    --c-primary-hover-bg: rgba(53, 95, 150, 0.08);
    --c-on-primary:       var(--white);

    --c-success:        var(--green-500);
    --c-success-light:  #f0fdf4;
    --c-success-border: #bbf7d0;
    --c-on-success:     var(--white);

    --c-danger:        var(--red-500);
    --c-danger-dark:   var(--red-600);
    --c-danger-light:  #fef2f2;
    --c-danger-border: #fecaca;
    --c-on-danger:     var(--white);

    --c-warning:        var(--amber-500);
    --c-warning-light:  #fffbeb;
    --c-warning-border: #fde68a;
    --c-on-warning:     var(--slate-900);

    --c-focus-ring: rgba(53, 95, 150, 0.25);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow:    0 2px 6px rgba(15, 23, 42, 0.12);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.16);
}

/* ==========================================================================
   C. SEMANTIC TOKENS -- Dark
   ========================================================================== */
[data-theme="dark"] {
    --c-bg:             #0c1222;
    --c-surface:        #162032;
    --c-surface-raised: #243450;

    --c-text:       var(--slate-200);
    --c-text-muted: var(--slate-400);
    --c-text-soft:  var(--slate-500);

    --c-hover:  rgba(255, 255, 255, 0.08);
    --c-border: #283348;

    --c-primary:          #5d7fa9;
    --c-primary-dark:     var(--blue-400);
    --c-primary-light:    rgba(93, 127, 169, 0.12);
    --c-primary-hover-bg: rgba(93, 127, 169, 0.22);
    --c-on-primary:       #0c1222;

    --c-success:        #6ee7a0;
    --c-success-light:  rgba(110, 231, 160, 0.1);
    --c-success-border: rgba(110, 231, 160, 0.25);
    --c-on-success:     #0c1222;

    --c-danger:        #fca5a5;
    --c-danger-dark:   #f87171;
    --c-danger-light:  rgba(252, 165, 165, 0.1);
    --c-danger-border: rgba(252, 165, 165, 0.2);
    --c-on-danger:     #0c1222;

    --c-warning:        #fcd34d;
    --c-warning-light:  rgba(252, 211, 77, 0.1);
    --c-warning-border: rgba(252, 211, 77, 0.2);
    --c-on-warning:     #0c1222;

    --c-focus-ring: rgba(93, 127, 169, 0.35);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow:    0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--ff-sans);
    background: var(--c-bg);
    color: var(--c-text);
    line-height: var(--lh);
    font-size: var(--fs-base);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-primary); }
.text-muted { color: var(--c-text-muted); }

/* ==========================================================================
   Auth Gate
   ========================================================================== */
.admin-auth-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--c-bg);
    align-items: center;
    justify-content: center;
}
.admin-auth-gate.visible { display: flex; }

.admin-auth-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 380px;
    max-width: 95vw;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.admin-auth-box h2 { margin-bottom: 8px; font-size: var(--fs-xl); font-weight: 600; }
.admin-auth-box p { color: var(--c-text-muted); margin-bottom: 20px; font-size: var(--fs-sm); }

.admin-auth-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: var(--fs-base);
    margin-bottom: 12px;
    font-family: var(--ff-sans);
}
.admin-auth-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.admin-auth-error {
    color: var(--c-danger);
    font-size: var(--fs-sm);
    min-height: 20px;
    margin-top: 8px;
}

/* ==========================================================================
   Topbar
   ========================================================================== */
/* Topbar styles moved to ui-shell.css (.ui-topbar / .ui-topbar__*).
   Legacy .admin-topbar* selectors retired. */

/* --- ML: Breadcrumb navigation ------------------------------------------- */
.ml-breadcrumb {
    display: none;
    align-items: center;
    gap: 0;
    font-size: 0.8125rem;
    font-family: var(--ff-sans);
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
.ml-breadcrumb--visible {
    display: flex;
}
.ml-breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
    color: var(--c-text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}
.ml-breadcrumb-sep svg {
    width: 14px;
    height: 14px;
}
.ml-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 0.8125rem;
    font-family: var(--ff-sans);
    line-height: 1.3;
    transition: background 0.12s ease, color 0.12s ease;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.ml-breadcrumb-item:hover {
    background: var(--c-hover);
    color: var(--c-text);
}
.ml-breadcrumb-item--current {
    color: var(--c-text);
    font-weight: 500;
    cursor: default;
}
.ml-breadcrumb-item--current:hover {
    background: none;
}
.ml-breadcrumb-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Breadcrumb view-mode dropdown */
.ml-bc-dropdown {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.ml-bc-dropdown-trigger {
    gap: 3px;
}
.ml-bc-dd-arrow {
    width: 12px;
    height: 12px;
    opacity: 0.45;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.ml-bc-dropdown--open .ml-bc-dd-arrow {
    transform: rotate(180deg);
}
.ml-bc-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 140px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 600;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.ml-bc-dropdown-menu--open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.ml-bc-dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--c-text-muted);
    font-size: 0.8125rem;
    font-family: var(--ff-sans);
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    transition: background 0.1s ease, color 0.1s ease;
}
.ml-bc-dropdown-option:hover {
    background: var(--c-hover);
    color: var(--c-text);
}
.ml-bc-dropdown-option--active {
    color: var(--c-text);
    font-weight: 500;
}

/* .admin-topbar-env, .admin-topbar-right retired with topbar reskin
   (see ui-shell.css .ui-topbar / .ui-topbar__right). */

.admin-token-status {
    font-size: 0.6875rem;
    color: var(--c-text-muted);
    white-space: nowrap;
}
.admin-token-status--ok { color: var(--c-success); }

.admin-scope-badge {
    font-size: 0.625rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.scope-write { background: var(--c-success-light); color: var(--c-success); border: 1px solid var(--c-success-border); }
.scope-read  { background: var(--c-warning-light); color: var(--c-warning); border: 1px solid var(--c-warning-border); }

/* ==========================================================================
   Shell (Nav + Main)
   ========================================================================== */
.admin-shell {
    display: flex;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* Side navigation styles moved to ui-shell.css (.ui-sidebar / .ui-sidebar__*).
   Legacy .admin-nav* selectors retired. The body.admin-sidebar-collapsed and
   .admin-mobile-nav-overlay classes are still preserved as state hooks. */

/* ==========================================================================
   Main Content
   ========================================================================== */
.admin-main {
    flex: 1;
    padding: var(--sp-6) var(--sp-8) 80px;
    min-width: 0;
    width: 100%;
    max-width: none;
    overflow-y: auto;
    overflow-x: hidden;
}

body[data-page="library"] .admin-main,
body[data-page="posts-library"] .admin-main,
body[data-page="assets"] .admin-main,
body[data-page="galleries"] .admin-main {
    max-width: none;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--c-surface);
    color: var(--c-text);
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    text-decoration: none;
    line-height: 1.4;
    transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-soft);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    font-family: var(--ff-sans);
}
.admin-btn:hover:not(.admin-btn--primary):not(.admin-btn--danger) {
    background: var(--c-hover);
    border-color: var(--c-border);
}
.admin-btn:focus-visible {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.admin-btn--primary {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
}
.admin-btn--primary:hover {
    background: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
    color: var(--c-on-primary);
}
.admin-btn--danger {
    background: var(--c-danger);
    color: var(--c-on-danger, #fff);
    border-color: var(--c-danger);
}
.admin-btn--danger:hover {
    background: var(--c-danger-dark);
    border-color: var(--c-danger-dark);
    color: var(--c-on-danger, #fff);
}
.admin-btn--ghost {
    background: transparent;
    border-color: transparent;
}
.admin-btn--ghost:hover {
    background: var(--c-hover);
    border-color: var(--c-border);
}
.admin-btn--sm {
    padding: 5px 10px;
    font-size: 0.75rem;
}
.admin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.admin-btn--icon {
    padding: 6px;
    background: transparent;
    border-color: transparent;
    color: var(--c-text-muted);
}
.admin-btn--icon:hover {
    background: var(--c-hover);
    color: var(--c-text);
}

/* ==========================================================================
   Page Header
   ========================================================================== */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.admin-page-header h1 {
    font-size: clamp(1.5rem, 2.1vw, 1.85rem);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.015em;
}
.admin-page-header-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ==========================================================================
   Stat Cards
   ========================================================================== */
.admin-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.admin-stat-card {
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--ease-fast);
}
.admin-stat-card:hover {
    border-color: var(--c-border);
}
.admin-stat-label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    font-weight: 500;
    margin-bottom: var(--sp-1);
}
.admin-stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    font-family: var(--ff-mono);
    line-height: 1.1;
}

/* ==========================================================================
   Cards / Sections
   ========================================================================== */
.admin-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.admin-section { margin-bottom: var(--sp-8); }
.admin-section-title {
    font-size: var(--fs-md);
    font-weight: 650;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-border);
}

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

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.admin-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 500;
    color: var(--c-text-muted);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
}
.admin-table tr:hover {
    background: var(--c-bg);
}
.admin-table tr.clickable,
.admin-table .clickable-row {
    cursor: pointer;
}

/* ==========================================================================
   Badges  (mirrors members-area .admin-badge family)
   ========================================================================== */
.admin-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.admin-badge--success { background: var(--c-success-light); color: #15803d; }
.admin-badge--warning { background: var(--c-warning-light); color: #b45309; }
.admin-badge--danger  { background: var(--c-danger-light);  color: #b91c1c; }
.admin-badge--info    { background: var(--c-primary-light); color: var(--c-primary-dark); }
.admin-badge--neutral { background: var(--c-hover);         color: var(--c-text-muted); }

/* ==========================================================================
   Empty state  (mirrors members-area .admin-empty)
   ========================================================================== */
.admin-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--c-text-muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   Controls row  (mirrors members-area .admin-controls-row)
   ========================================================================== */
.admin-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}
.admin-controls-row h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 4px;
}
.admin-controls-row p {
    color: var(--c-text-muted);
    font-size: 0.875rem;
    margin: 0;
}
.admin-controls-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   Pagination  (mirrors members-area .admin-pagination)
   ========================================================================== */
.admin-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-top: 8px;
}
.admin-pagination button {
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
}
.admin-pagination button:hover:not(:disabled) {
    background: var(--c-hover);
}
.admin-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.admin-page-info {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

/* ==========================================================================
   Filters  (mirrors members-area .admin-filters)
   ========================================================================== */
.admin-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.admin-filters label {
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

/* ==========================================================================
   Modal  (mirrors members-area .admin-modal-* family)
   ========================================================================== */
.admin-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--c-overlay-backdrop);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.admin-modal-overlay.hidden,
.admin-modal-overlay[hidden] {
    display: none;
}
.admin-modal {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-modal--sm { max-width: 420px; }
.admin-modal--lg { max-width: 920px; }
.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
}
.admin-modal-header h2,
.admin-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text);
}
.admin-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-modal-close {
    background: none;
    border: 0;
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--ease-fast);
}
.admin-modal-close:hover {
    background: var(--c-hover);
    color: var(--c-text);
}
.admin-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.admin-modal-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.admin-modal-meta-item {
    padding: 8px 12px;
    background: var(--c-bg);
    border-radius: var(--radius-sm);
}
.admin-modal-meta-item label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.admin-modal-meta-item span {
    font-size: 0.8125rem;
    color: var(--c-text);
    font-weight: 500;
}
.admin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   Tabs  (mirrors members-area .admin-tabs / .admin-tab family)
   ========================================================================== */
.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 20px;
}
.admin-tab {
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-text-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.admin-tab:hover {
    color: var(--c-text);
}
.admin-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}
.admin-tab-content {
    display: none;
}
.admin-tab-content.active {
    display: block;
}

/* ==========================================================================
   Status indicators
   ========================================================================== */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}
.status--online  { background: var(--c-success); }
.status--stale   { background: var(--c-warning); }
.status--offline { background: var(--c-danger); }

/* ==========================================================================
   Events list
   ========================================================================== */
.events-list { max-height: 400px; overflow-y: auto; }

.event-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
}
.event-item__type {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-primary);
    min-width: 140px;
}
.event-item__node { color: var(--c-text-muted); min-width: 80px; }
.event-item__msg {
    flex: 1;
    color: var(--c-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.event-item__time { color: var(--c-text-soft); font-size: var(--fs-xs); white-space: nowrap; }

.event-item--warning .event-item__type { color: var(--c-warning); }
.event-item--error .event-item__type   { color: var(--c-danger); }

/* ==========================================================================
   Cards grid / Tags / KV
   ========================================================================== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-4);
}
.card {
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--ease-fast);
}
.card:hover { border-color: var(--c-border); }
.card__order { font-size: var(--fs-xs); color: var(--c-text-soft); margin-bottom: var(--sp-1); }
.card__title { font-weight: 600; font-size: var(--fs-base); }
.card__id    { font-size: var(--fs-xs); font-family: var(--ff-mono); color: var(--c-text-muted); }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-family: var(--ff-mono);
    color: var(--c-text-muted);
}

.kv-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
}
.kv-row__key { color: var(--c-text-muted); }
.kv-row__val { font-family: var(--ff-mono); }
.kv--true .kv-row__val  { color: var(--c-success); }
.kv--false .kv-row__val { color: var(--c-danger); }

.kv-section-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text-muted);
    margin: var(--sp-4) 0 var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kv-section-title:first-child { margin-top: 0; }

/* ==========================================================================
   Code block
   ========================================================================== */
.code-block {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    overflow-x: auto;
    white-space: pre-wrap;
    max-height: 500px;
    overflow-y: auto;
}

/* ==========================================================================
   Detail panel
   ========================================================================== */
.detail-panel {
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-top: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.detail-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-3);
}
.detail-panel__header h2 { margin-bottom: 0; border: none; padding: 0; font-size: var(--fs-md); }

/* ==========================================================================
   Filter / Select
   ========================================================================== */
.filter-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }

.admin-select {
    padding: 7px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-family: var(--ff-sans);
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast), background var(--ease-fast);
}
.admin-select:hover { border-color: var(--c-border); background: var(--c-surface-raised); }
.admin-select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--c-text-muted);
}

/* ==========================================================================
   Toast notifications
   ========================================================================== */
.admin-toast-container {
    position: fixed;
    top: calc(var(--topbar-height) + var(--sp-4));
    right: var(--sp-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}
.admin-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.25s, transform 0.25s;
    max-width: 380px;
}
.admin-toast.visible { opacity: 1; transform: translateX(0); }
.admin-toast.success { border-left: 3px solid var(--c-success); }
.admin-toast.error   { border-left: 3px solid var(--c-danger); }
.admin-toast.info    { border-left: 3px solid var(--c-primary); }
.admin-toast-icon { flex-shrink: 0; font-size: var(--fs-md); line-height: 1; }
.admin-toast-body { flex: 1; }
.admin-toast-title { font-weight: 600; font-size: var(--fs-sm); }
.admin-toast-detail { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }
.admin-toast-close {
    background: none;
    border: none;
    color: var(--c-text-muted);
    font-size: var(--fs-md);
    cursor: pointer;
    padding: 0 0 0 var(--sp-2);
    line-height: 1;
}

/* ==========================================================================
   Theme toggle icon
   ========================================================================== */
.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text-muted);
    cursor: pointer;
    padding: 5px 8px;
    font-size: var(--fs-sm);
    transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
}
.topbar-icon-btn:hover { background: var(--c-hover); border-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] .theme-icon-light { display: none; }
:root:not([data-theme="dark"]) .theme-icon-dark { display: none; }

/* ==========================================================================
   Node pill (clickable uppercase node name)
   ========================================================================== */
.node-pill {
    display: inline-block;
    padding: 4px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-family: var(--ff-mono);
    letter-spacing: 0.5px;
    color: var(--c-text);
    text-decoration: none;
    transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
    cursor: pointer;
}
.node-pill:hover {
    background: var(--c-hover);
    border-color: var(--c-border);
    color: var(--c-text);
}

.mcard {
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    cursor: pointer;
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.mcard:hover {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-focus-ring);
}
.mcard:focus-visible {
    outline: 2px solid var(--c-focus-ring);
    outline-offset: 2px;
}

.mcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.mcard-name {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: 0.02em;
}
.mcard-meta {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
}
.mcard-gpu {
    font-family: var(--ff-mono);
    font-size: 0.6875rem;
    color: var(--c-text-soft);
    margin-bottom: var(--sp-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcard-metrics {
    display: flex;
    gap: var(--sp-3);
}
.mcard-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mcard-metric-lbl {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mcard-metric-val {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
}

.mcard-bar {
    height: 3px;
    background: var(--c-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}
.mcard-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.mcard-bar-fill--low    { background: var(--c-success); }
.mcard-bar-fill--medium { background: var(--c-warning); }
.mcard-bar-fill--high   { background: var(--c-danger); }

.mcard-jobs {
    display: flex;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-3);
}
.mcard-job {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}
.mcard-job--active {
    color: var(--c-success);
    font-weight: 500;
}

/* Machine detail header */
.md-header {
    margin-bottom: var(--sp-5);
}
.md-title {
    font-family: var(--ff-sans);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--c-text);
    margin: var(--sp-2) 0 var(--sp-2);
}
.md-header-pills {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.machine-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 500;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    white-space: nowrap;
}
.machine-pill--online {
    background: var(--c-success-light);
    border-color: var(--c-success-border);
    color: var(--c-success);
}
.machine-pill--stale {
    background: var(--c-warning-light);
    border-color: var(--c-warning-border);
    color: var(--c-warning);
}
.machine-pill--offline {
    background: var(--c-danger-light);
    border-color: var(--c-danger-border);
    color: var(--c-danger);
}
.md-pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--c-success);
    border-radius: var(--radius-full);
    animation: md-pulse 2s ease-in-out infinite;
}
@keyframes md-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==========================================================================
   Personality Creation Modal
   ========================================================================== */
.pm-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.pm-backdrop.visible { display: flex; opacity: 1; }
[data-theme="dark"] .pm-backdrop { background: rgba(2, 6, 23, 0.6); }

.pm-dialog {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    width: 440px;
    max-width: 95vw;
    overflow: hidden;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pm-backdrop.visible .pm-dialog { transform: translateY(0) scale(1); }

.pm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--c-text-soft);
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius);
    transition: background var(--ease-fast), color var(--ease-fast);
    z-index: 2;
}
.pm-close:hover { background: var(--c-hover); color: var(--c-text); }
.pm-close svg { width: 20px; height: 20px; }

.pm-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-6) var(--sp-4);
}

.pm-icon-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-primary-light), rgba(53, 95, 150, 0.12));
    border: 1px solid rgba(53, 95, 150, 0.15);
    color: var(--c-primary);
}
[data-theme="dark"] .pm-icon-ring {
    background: linear-gradient(135deg, rgba(93, 127, 169, 0.15), rgba(93, 127, 169, 0.08));
    border-color: rgba(93, 127, 169, 0.2);
}

.pm-body {
    padding: 0 var(--sp-6) var(--sp-2);
    text-align: center;
}

.pm-heading {
    font-size: var(--fs-xl);
    font-weight: 650;
    margin: 0 0 var(--sp-1);
}

.pm-subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0 0 var(--sp-5);
    line-height: 1.5;
}

.pm-field {
    text-align: left;
    margin-bottom: var(--sp-3);
}

.pm-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: var(--sp-1);
}

.pm-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: var(--fs-base);
    font-family: var(--ff-sans);
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.pm-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.pm-input::placeholder { color: var(--c-text-soft); }

.pm-error {
    color: var(--c-danger);
    font-size: var(--fs-xs);
    min-height: 18px;
    margin-top: var(--sp-1);
    text-align: left;
}

.pm-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-family: var(--ff-sans);
    cursor: pointer;
    padding: var(--sp-1) 0;
    transition: color var(--ease-fast);
}
.pm-expand-toggle:hover { color: var(--c-primary); }

.pm-expand-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.pm-expand-toggle.open .pm-expand-chevron { transform: rotate(90deg); }

.pm-expand-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 0;
}
.pm-expand-body.open {
    max-height: 200px;
    opacity: 1;
    margin-top: var(--sp-3);
}

.pm-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    text-align: left;
}

.pm-select { width: 100%; }

.pm-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6) var(--sp-5);
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-2);
}

/* ==========================================================================
   Secondary Info Modal
   ========================================================================== */
.pd-info-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.pd-info-backdrop.visible { display: flex; opacity: 1; }
[data-theme="dark"] .pd-info-backdrop { background: rgba(2, 6, 23, 0.5); }

.pd-info-dialog {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 480px;
    max-width: 92vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(10px);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pd-info-backdrop.visible .pd-info-dialog { transform: translateY(0); }

.pd-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
}
.pd-info-header h3 {
    font-size: var(--fs-md);
    font-weight: 650;
    margin: 0;
}

.pd-info-body {
    padding: var(--sp-4) var(--sp-5);
    overflow-y: auto;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--c-text-muted);
}
.pd-info-body p { margin: 0 0 var(--sp-3); }
.pd-info-body p:last-child { margin-bottom: 0; }
.pd-info-body strong { color: var(--c-text); font-weight: 600; }
.pd-info-body ul {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-5);
}
.pd-info-body li { margin-bottom: var(--sp-1); }

/* ==========================================================================
   Personality Detail Page
   ========================================================================== */
.pd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--ease-fast);
}
.pd-back-link:hover { color: var(--c-primary); }

.pd-title-editable {
    outline: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--ease-fast);
    cursor: text;
    min-width: 60px;
}
.pd-title-editable:hover { border-bottom-color: var(--c-border); }
.pd-title-editable:focus { border-bottom-color: var(--c-primary); }

.pd-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.pd-status--draft {
    background: var(--c-bg);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}
.pd-status--preview {
    background: var(--c-warning-light);
    color: var(--c-warning);
    border: 1px solid var(--c-warning-border);
}
.pd-status--approved {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}
.pd-status--active {
    background: var(--c-success-light);
    color: var(--c-success);
    border: 1px solid var(--c-success-border);
}
.pd-status--deprecated {
    background: var(--c-danger-light);
    color: var(--c-danger);
    border: 1px solid var(--c-danger-border);
}

.pd-saved-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    color: var(--c-success);
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.pd-saved-indicator.visible { opacity: 1; }

.pd-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-6);
    align-items: start;
}

.pd-main { min-width: 0; }
.pd-sidebar { min-width: 0; }

/* -- Collapsible sections ------------------------------------------------ */
.pd-section {
    margin-bottom: var(--sp-6);
}

.pd-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-border);
}

.pd-section-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--ff-sans);
    color: var(--c-text);
    text-align: left;
}
.pd-section-toggle:hover { color: var(--c-primary); }

.pd-section-icon {
    flex-shrink: 0;
    color: var(--c-text-muted);
    display: flex;
}
.pd-section-toggle:hover .pd-section-icon { color: var(--c-primary); }

.pd-section-title {
    font-size: var(--fs-md);
    font-weight: 650;
    flex: 1;
}

.pd-section-hint {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--c-text-soft);
    white-space: nowrap;
}
.pd-section[data-expanded="true"] .pd-section-hint { display: none; }

.pd-section-chevron {
    flex-shrink: 0;
    color: var(--c-text-soft);
    transition: transform 0.2s ease;
}
.pd-section[data-expanded="true"] .pd-section-chevron { transform: rotate(0deg); }
.pd-section[data-expanded="false"] .pd-section-chevron { transform: rotate(-90deg); }

.pd-section-body {
    transition: max-height 0.25s ease, opacity 0.2s ease;
    overflow: hidden;
}
.pd-section[data-expanded="true"] .pd-section-body {
    max-height: 2000px;
    opacity: 1;
}
.pd-section[data-expanded="false"] .pd-section-body {
    max-height: 0;
    opacity: 0;
}

.pd-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    color: var(--c-text-soft);
    cursor: pointer;
    padding: 3px;
    border-radius: var(--radius-sm);
    transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
    flex-shrink: 0;
}
.pd-info-btn:hover {
    background: var(--c-primary-light);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

/* -- Detail form elements ------------------------------------------------ */
.pd-textarea {
    display: block;
    width: 100%;
    padding: var(--sp-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh);
    resize: vertical;
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.pd-textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.pd-textarea::placeholder { color: var(--c-text-soft); }

.pd-field { margin-bottom: var(--sp-4); }
.pd-field:last-child { margin-bottom: 0; }

.pd-field-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: var(--sp-1);
}

.pd-select { width: 100%; }

.pd-input {
    display: block;
    width: 100%;
    padding: 7px 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-family: var(--ff-sans);
    transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.pd-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.pd-input::placeholder { color: var(--c-text-soft); }

.pd-tag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.pd-field-value { font-size: var(--fs-sm); color: var(--c-text); }
.pd-field-mono {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    word-break: break-all;
}

/* -- Readiness checks ---------------------------------------------------- */
.pd-check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 0;
    font-size: var(--fs-sm);
}
.pd-check + .pd-check { border-top: 1px solid var(--c-border); }
.pd-check-icon { flex-shrink: 0; display: flex; }
.pd-check--pass .pd-check-icon { color: var(--c-success); }
.pd-check--pending .pd-check-icon { color: var(--c-text-soft); }
.pd-check--pass .pd-check-label { color: var(--c-text); }
.pd-check--pending .pd-check-label { color: var(--c-text-muted); }

/* -- Avatar ------------------------------------------------------------- */
.pd-avatar-wrap {
    display: flex;
    justify-content: center;
    padding: var(--sp-4) 0 var(--sp-2);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}

.pd-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--c-bg);
    border: 2px dashed var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--ease-fast), background var(--ease-fast), box-shadow var(--ease-fast);
    overflow: hidden;
    position: relative;
}
.pd-avatar:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-light);
    box-shadow: 0 0 0 4px var(--c-focus-ring);
}
.pd-avatar--has-image {
    border-style: solid;
    border-color: var(--c-border);
}
.pd-avatar--has-image:hover { border-color: var(--c-primary); }

.pd-avatar-placeholder {
    color: var(--c-text-soft);
    transition: color var(--ease-fast);
}
.pd-avatar:hover .pd-avatar-placeholder { color: var(--c-primary); }

.pd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-avatar-hover {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
    border-radius: 50%;
}
.pd-avatar:hover .pd-avatar-hover { opacity: 1; }
.pd-avatar:not(.pd-avatar--has-image) .pd-avatar-hover { display: none; }

/* -- Dataset quality summary -------------------------------------------- */
.pd-dataset-summary {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.pd-ds-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.pd-ds-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
}
.pd-ds-score--high { background: rgba(34, 197, 94, 0.1); color: var(--c-success); }
.pd-ds-score--medium { background: rgba(234, 179, 8, 0.1); color: var(--c-warning); }
.pd-ds-score--low { background: rgba(239, 68, 68, 0.1); color: var(--c-danger); }

.pd-ds-score-value { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.pd-ds-score-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.8; }

.pd-ds-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    flex: 1;
}
.pd-ds-stat {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-text-muted);
    background: var(--c-surface);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--c-border);
}
.pd-ds-suggestions {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.pd-ds-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--c-warning);
    font-weight: 500;
}

/* -- Visuals grid ------------------------------------------------------- */
.pd-source-list { margin-bottom: var(--sp-3); }
.pd-source-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    color: var(--c-text-soft);
    text-align: center;
}
.pd-source-empty p {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    max-width: 320px;
    margin: 0;
    line-height: 1.5;
}
.pd-source-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.pd-source-count {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.pd-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-3);
}

.pd-visual-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    aspect-ratio: 1;
    cursor: pointer;
    transition: box-shadow var(--ease-fast), border-color var(--ease-fast);
}
.pd-visual-card:hover {
    border-color: var(--c-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pd-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-visual-type {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.pd-visual-quality {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pd-visual-quality--high { background: rgba(34, 197, 94, 0.85); color: #fff; }
.pd-visual-quality--medium { background: rgba(234, 179, 8, 0.85); color: #fff; }
.pd-visual-quality--low { background: rgba(239, 68, 68, 0.85); color: #fff; }

.pd-visual-hover {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: var(--sp-2);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.pd-visual-card:hover .pd-visual-hover { opacity: 1; }
.pd-visual-name {
    font-size: 0.625rem;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .admin-main { padding: var(--sp-4); }
    .pd-grid { grid-template-columns: 1fr; }
    .pd-tag-grid { grid-template-columns: 1fr; }
    .pm-dialog { max-width: 100vw; border-radius: var(--radius-lg); }
    .pm-field-row { grid-template-columns: 1fr; }
    .pd-visual-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .pd-ds-row { flex-direction: column; align-items: flex-start; }
    .pd-avatar { width: 80px; height: 80px; }
}

/* ================================================================
   Machine Detail Page
   ================================================================ */

/* --- Back Button --- */
.md-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.md-back-btn:hover {
    color: var(--c-text);
    background: var(--c-hover);
    border-color: var(--c-border);
}
.md-back-btn:focus-visible {
    outline: 2px solid var(--c-focus-ring);
    outline-offset: 2px;
}
.md-back-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Gauge Cards Grid --- */
.md-gauges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.md-gauge {
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}

.md-gauge__label {
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.md-gauge__ring {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-gauge__ring svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}
.md-gauge__ring-bg {
    fill: none;
    stroke: var(--c-border);
    stroke-width: 6;
}
.md-gauge__ring-fill {
    fill: none;
    stroke: var(--c-primary);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}
.md-gauge__ring-fill--low  { stroke: var(--c-success); }
.md-gauge__ring-fill--medium { stroke: var(--c-warning); }
.md-gauge__ring-fill--high { stroke: var(--c-danger); }

.md-gauge__pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-text);
    pointer-events: none;
}

.md-gauge__sub {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

.md-gauge__spark {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    overflow: hidden;
    margin-top: var(--sp-1);
}
.md-gauge__spark-bar {
    flex: 1;
    min-width: 2px;
    max-width: 6px;
    background: var(--c-primary);
    border-radius: 1px 1px 0 0;
    transition: height 0.3s ease;
}
.md-gauge__spark-bar--low    { background: var(--c-success); }
.md-gauge__spark-bar--medium { background: var(--c-warning); }
.md-gauge__spark-bar--high   { background: var(--c-danger); }

/* --- System Info Card --- */
.md-sysinfo {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.md-sysinfo__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.md-sysinfo__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}
.md-sysinfo__item:last-child {
    border-bottom: none;
}

.md-sysinfo__key {
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    flex-shrink: 0;
    margin-right: var(--sp-3);
}

.md-sysinfo__val {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    color: var(--c-text);
    text-align: right;
    word-break: break-all;
}

.md-sysinfo__toggle {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3);
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-align: center;
    background: transparent;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.md-sysinfo__toggle:hover {
    color: var(--c-text);
    background: var(--c-hover);
    border-color: var(--c-text-muted);
}

/* --- Tabbed Section --- */
.md-tabs {
    margin-bottom: var(--sp-6);
}

.md-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.md-tab-btn {
    position: relative;
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ease-fast), border-color var(--ease-fast);
}
.md-tab-btn:hover {
    color: var(--c-text);
}
.md-tab-btn.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}
.md-tab-btn:focus-visible {
    outline: 2px solid var(--c-focus-ring);
    outline-offset: -2px;
}

.md-tab-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: var(--sp-2);
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    background: var(--c-hover);
    border-radius: var(--radius-full);
    line-height: 1;
}
.md-tab-btn.active .md-tab-btn__count {
    color: var(--c-primary);
    background: var(--c-primary-hover-bg);
}

.md-tab-panel {
    display: none;
}
.md-tab-panel.active {
    display: block;
}

/* --- Activity Feed --- */
.md-feed__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
}
.md-feed__item:last-child {
    border-bottom: none;
}

.md-feed__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--c-text-muted);
    flex-shrink: 0;
    margin-top: 6px;
}
.md-feed__dot--heartbeat { background: var(--c-text-soft); opacity: 0.5; }
.md-feed__dot--event     { background: var(--c-primary); }
.md-feed__dot--error     { background: var(--c-danger); }
.md-feed__dot--warning   { background: var(--c-warning); }

.md-feed__type {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    color: var(--c-text);
    flex-shrink: 0;
    min-width: 120px;
}

.md-feed__payload-preview {
    flex: 1;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-feed__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.md-feed__time {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    flex-shrink: 0;
    white-space: nowrap;
}

.md-feed__view-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.md-feed__view-btn:hover {
    color: var(--c-text);
    background: var(--c-hover);
    border-color: var(--c-text-muted);
}
.md-feed__view-btn svg {
    width: 14px;
    height: 14px;
}

.md-feed__empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.md-feed__more {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-2);
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-align: center;
    background: transparent;
    border: none;
    border-top: 1px dashed var(--c-border);
    cursor: pointer;
    transition: color var(--ease-fast), background var(--ease-fast);
}
.md-feed__more:hover {
    color: var(--c-text);
    background: var(--c-hover);
}

/* --- Audit Log --- */
.md-audit__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
}
.md-audit__item:last-child {
    border-bottom: none;
}

.md-audit__severity {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    line-height: 1.4;
}
.md-audit__severity--info {
    color: var(--c-text-muted);
    background: var(--c-hover);
}
.md-audit__severity--warning {
    color: var(--c-warning);
    background: var(--c-warning-light);
    border: 1px solid var(--c-warning-border);
}
.md-audit__severity--critical {
    color: var(--c-danger);
    background: var(--c-danger-light);
    border: 1px solid var(--c-danger-border);
}

.md-audit__type {
    font-family: var(--ff-mono);
    font-size: var(--fs-sm);
    color: var(--c-text);
    flex-shrink: 0;
    min-width: 100px;
}

.md-audit__msg {
    flex: 1;
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-audit__expand-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.md-audit__expand-btn:hover {
    color: var(--c-text);
    background: var(--c-hover);
    border-color: var(--c-text-muted);
}
.md-audit__expand-btn svg {
    width: 14px;
    height: 14px;
}

.md-audit__time {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    flex-shrink: 0;
    white-space: nowrap;
}

.md-audit__detail {
    display: none;
    padding: var(--sp-3);
    margin-top: var(--sp-2);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.md-audit__detail.active {
    display: block;
}
.md-audit__detail pre {
    margin: 0;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}

/* --- Detail Modal --- */
.md-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ease), visibility var(--ease);
}
.md-modal-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(12px);
    z-index: 1101;
    width: 90vw;
    max-width: 640px;
    max-height: 80vh;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ease), visibility var(--ease), transform var(--ease-soft);
}
.md-modal.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) translateY(0);
}

.md-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}
.md-modal__header h3 {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}
.md-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.md-modal__close:hover {
    color: var(--c-text);
    background: var(--c-hover);
    border-color: var(--c-border);
}
.md-modal__close svg {
    width: 18px;
    height: 18px;
}

.md-modal__body {
    padding: var(--sp-5);
    overflow-y: auto;
    flex: 1;
}

.md-modal__pre {
    margin: 0;
    padding: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.55;
    overflow-x: auto;
}

/* --- Polling Indicator --- */
.md-poll-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
}

.md-poll-indicator__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--c-success);
    animation: md-pulse 2s ease-in-out infinite;
}

.md-poll-indicator__text {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1;
}

@keyframes md-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}

/* --- Machine Detail Responsive --- */
@media (max-width: 1024px) {
    .md-gauges { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .md-gauges { grid-template-columns: 1fr; }
    .md-sysinfo__grid { grid-template-columns: 1fr; }
    .md-tab-bar { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .md-tab-bar::-webkit-scrollbar { display: none; }
    .md-feed__payload-preview { max-width: 140px; }
    .md-modal { width: 95vw; max-height: 90vh; border-radius: var(--radius-lg); }
    .md-audit__msg { max-width: 120px; }
}

/* ==========================================================================
   MEDIA LIBRARY
   ========================================================================== */

/* --- ML: Custom properties ------------------------------------------------ */
:root {
    --ml-tile-size: 180px;
    --ml-detail-width: 480px;
    --ml-collections-width: 260px;
    --ml-panel-ease: 0.25s cubic-bezier(.4, 0, .2, 1);
    --ml-bulk-height: 56px;
    --z-ml-bulk: 600;
    --z-ml-modal: 1200;
    --z-ml-dropdown: 700;
    --z-ml-context: 800;
}

.page-library {
    margin: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- ML: Filter bar ------------------------------------------------------- */
.ml-filters {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--c-surface) 94%, #fff 6%);
    border-bottom: 1px solid var(--c-border);
    width: 100%;
    box-sizing: border-box;
}

.ml-filters--top {
    flex-shrink: 0;
    z-index: 100;
    box-shadow: 0 10px 22px -22px rgba(15, 23, 42, 0.55);
}

.ml-more-wrap {
    position: relative;
    flex-shrink: 0;
}
.ml-new-wrap {
    position: relative;
    flex-shrink: 0;
}
.ml-new-toggle {
    min-width: 74px;
    justify-content: space-between;
}
.ml-new-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    min-width: 180px;
    padding: 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ml-new-dropdown .ml-new-action {
    width: 100%;
    justify-content: flex-start;
    color: var(--c-text);
}
.ml-new-toggle.ml-filter-btn--active {
    background: var(--c-primary, #3b82f6);
    color: #fff;
    border-color: var(--c-primary, #3b82f6);
}
.ml-more-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 200px;
    padding: 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ml-more-dropdown .ml-select-sm,
.ml-more-dropdown .ml-filter-btn,
.ml-more-dropdown .ml-color-dropdown {
    width: 100%;
}
.ml-more-dropdown .ml-filter-btn {
    justify-content: flex-start;
}

.ml-filter-sep {
    width: 1px;
    height: 20px;
    background: var(--c-border);
    flex-shrink: 0;
}

.ml-more-toggle.ml-filter-btn--active {
    background: var(--c-primary, #3b82f6);
    color: #fff;
    border-color: var(--c-primary, #3b82f6);
}

.ml-filters-left,
.ml-filters-right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.ml-filters-left {
    flex: 1;
    min-width: 0;
}

.ml-filters-right {
    flex-shrink: 0;
}

.ml-filter-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.ml-search-wrap {
    position: relative;
    flex: 0 1 260px;
    min-width: 170px;
}

.ml-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    pointer-events: none;
    display: flex;
}

.ml-search {
    width: 100%;
    padding: 8px 13px 8px 34px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-family: var(--ff-sans);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: border-color var(--ease), box-shadow var(--ease), transform 0.18s ease;
}
.ml-search:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring), 0 6px 16px -14px var(--c-primary);
    transform: translateY(-1px);
}
.ml-search::placeholder { color: var(--c-text-muted); }

.ml-nav-btn {
    padding: 7px 9px;
}

.ml-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--ff-sans);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow 0.18s ease;
}
.ml-filter-btn:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}
.ml-filter-btn--active {
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    border-color: var(--c-primary);
    color: var(--c-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-primary) 24%, transparent);
}

.ml-select-sm {
    padding: 8px 30px 8px 13px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--ff-sans);
    cursor: pointer;
    white-space: nowrap;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow 0.18s ease;
}
.ml-select-sm:hover {
    background-color: var(--c-surface-alt);
    color: var(--c-text);
}
.ml-select-sm:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring), 0 6px 16px -14px var(--c-primary);
}
.ml-select-sm--native-hidden {
    display: none !important;
}

.ml-select-proxy-btn {
    position: relative;
    padding-right: 30px;
}
.ml-select-proxy-btn::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-62%) rotate(45deg);
    pointer-events: none;
}

.ml-star-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--ff-sans);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.ml-star-toggle:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}
.ml-star-toggle.ml-filter-btn--active {
    background: #fefce8;
    border-color: #facc15;
    color: #ca8a04;
    box-shadow: none;
}
.ml-star-toggle.ml-filter-btn--active svg {
    fill: #facc15;
    stroke: #ca8a04;
}
[data-theme="dark"] .ml-star-toggle.ml-filter-btn--active {
    background: rgba(250, 204, 21, 0.15);
    border-color: rgba(250, 204, 21, 0.5);
    color: #facc15;
}

/* --- ML: Toggle groups ---------------------------------------------------- */
.ml-toggle-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}
.ml-toggle {
    padding: 6px 12px;
    background: var(--c-bg);
    border: none;
    border-right: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--ff-sans);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
}
.ml-toggle:last-child { border-right: none; }
.ml-toggle:hover { background: var(--c-surface-alt); color: var(--c-text); }
.ml-toggle--active {
    background: var(--c-text);
    color: var(--c-bg);
    font-weight: 600;
}
.ml-toggle--active:hover {
    background: var(--c-text);
    color: var(--c-bg);
}

/* --- ML: Collapsible search ----------------------------------------------- */
.ml-search-toggle-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.ml-search-toggle-btn {
    padding: 8px 10px;
}
.ml-search-expandable {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 260px;
    min-width: 170px;
}
.ml-search-expandable .ml-search {
    width: 100%;
    padding: 8px 34px 8px 34px;
}
.ml-search-expandable .ml-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    pointer-events: none;
    display: flex;
}
.ml-search-close {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background var(--ease), color var(--ease);
}
.ml-search-close:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

/* --- ML: Filter-down row -------------------------------------------------- */
.ml-filterdown-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--c-surface) 94%, #fff 6%);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
#ml-filterdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* --- ML: Size slider row -------------------------------------------------- */
.ml-size-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--c-surface) 94%, #fff 6%);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.ml-size-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 10px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    white-space: nowrap;
}

#ml-size-slider {
    width: 105px;
    accent-color: var(--c-primary);
    cursor: pointer;
}

.ml-color-dropdown {
    position: relative;
    z-index: calc(var(--z-ml-dropdown) + 1);
}

.ml-color-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--ff-sans);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.ml-color-btn:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

/* Keep toolbar "Color" control visually aligned with other pills. */
.ml-color-btn .ml-color-dot {
    width: 12px;
    height: 12px;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: transparent;
    outline: none;
    outline-offset: 0;
    transform: none;
    cursor: default;
}
.ml-color-btn .ml-color-dot:hover {
    transform: none;
    outline: none;
}

.ml-color-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    width: 150px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    z-index: var(--z-ml-dropdown);
    padding: var(--sp-2);
    display: none;
}
.ml-color-dropdown.ml-dropdown--open .ml-color-menu {
    display: block;
}

.ml-color-opt[data-color=""] {
    display: block;
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-family: var(--ff-sans);
    text-align: center;
    padding: 6px 8px;
    margin-bottom: var(--sp-2);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.ml-color-opt[data-color=""]:hover {
    border-color: var(--c-primary);
    color: var(--c-text);
    background: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg) 90%);
}
.ml-color-opt[data-color=""] .ml-color-dot { display: none; }

.ml-color-opt:not([data-color=""]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    border: none;
    background: none;
}

.ml-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.12s ease, outline-color 0.12s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.ml-color-dot:hover {
    transform: scale(1.1);
    outline-color: var(--c-border);
}
.ml-color-opt.ml-color--active .ml-color-dot {
    outline-color: var(--c-primary);
}

.ml-color-none {
    display: none;
}

.ml-color-menu-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
    justify-items: center;
}

/* --- ML: Layout (CSS grid with sliding panels) ---------------------------- */
.ml-layout {
    display: grid;
    grid-template-columns: 1fr 0px;
    grid-template-areas: "grid detail";
    gap: 0;
    width: 100%;
    flex: 1;
    min-height: 0;
    background: var(--c-bg);
    transition: grid-template-columns var(--ml-panel-ease);
}

.ml-layout.ml-detail--open {
    grid-template-columns: 1fr var(--ml-detail-width);
}

.ml-grid-pane {
    grid-area: grid;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.ml-grid-title {
    display: flex;
    align-items: center;
    padding: 14px 14px 0;
    color: var(--c-text);
    font-family: var(--ff-sans);
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
    gap: 8px;
}
.ml-grid-title-left { display: inline-flex; align-items: center; flex-shrink: 0; }

.ml-gvt { display: inline-flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.ml-gvt-btn { padding: 5px 14px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.1s ease, color 0.1s ease; background: var(--c-bg); color: var(--c-text-muted); }
.ml-gvt-btn:hover { background: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg)); color: var(--c-text); }
.ml-gvt-btn--active { background: var(--c-primary); color: #fff; }
.ml-gvt-btn--active:hover { background: var(--c-primary); color: #fff; }

.ml-gvt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--c-text-muted); text-align: center; }
.ml-gvt-empty-icon { opacity: 0.3; margin-bottom: 12px; }
.ml-gvt-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--c-text); }
.ml-gvt-empty-desc { font-size: 13px; opacity: 0.7; }

.ml-marquee {
    position: absolute;
    border: 1px solid var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    pointer-events: none;
    z-index: 10;
    display: none;
}

/* --- ML: Grid ------------------------------------------------------------- */
.ml-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--ml-tile-size, 180px));
    gap: 14px;
    padding: 14px;
    background: transparent;
}

.ml-grid-sentinel {
    height: 1px;
    width: 100%;
}

.ml-grid-loading {
    display: flex;
    justify-content: center;
    padding: var(--sp-8) 0;
}

/* --- ML: Empty state ------------------------------------------------------ */
.ml-grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    color: var(--c-text-muted);
}

/* --- ML: Spinner ---------------------------------------------------------- */
.ml-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ml-spinner::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: ml-spin 0.7s linear infinite;
}

@keyframes ml-spin {
    to { transform: rotate(360deg); }
}

/* --- ML: Tile ------------------------------------------------------------- */
.ml-tile {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease;
    content-visibility: auto;
    contain-intrinsic-size: var(--ml-tile-size, 180px) calc(var(--ml-tile-size, 180px) + 44px);
}
.ml-tile:hover {
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border) 60%);
}
.ml-tile--selected {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 1px var(--c-primary);
}
.ml-tile--dragging {
    opacity: 0.5;
}

.ml-tile-color {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1;
}

.ml-tile-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--c-bg);
}
.ml-tile-thumb img,
.ml-tile-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--c-bg);
}
.ml-tile-thumb img[src=""],
.ml-tile-thumb img:not([src]) {
    display: none;
}

.ml-tile-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    color: var(--c-border);
}
.ml-tile-placeholder svg {
    width: 36px;
    height: 36px;
}
.ml-tile-processing-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a12;
}
.ml-tile-processing-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 6px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ml-tile-processing-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(108, 92, 231, 0.25);
    border-top-color: var(--c-primary, #6c5ce7);
    border-radius: 50%;
    animation: ml-proc-spin 0.9s linear infinite;
}
.ml-tile-processing-label {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
}

.ml-tile-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.ml-tile-play svg {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.55);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* --- ML: Tile action bar -------------------------------------------------- */
.ml-tile-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}
.ml-tile-bar-spacer {
    flex: 1 1 auto;
}

.ml-tile-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ml-tile-checkbox:hover {
    border-color: var(--c-primary);
}
.ml-tile--selected .ml-tile-checkbox {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.ml-tile-checkbox input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.ml-tile-check-icon {
    width: 12px;
    height: 12px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.ml-tile-checkbox input:checked ~ .ml-tile-check-icon {
    opacity: 1;
}

.ml-tile-star,
.ml-tile-menu,
.ml-tile-color-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.ml-tile-star:hover,
.ml-tile-color-btn:hover,
.ml-tile-menu:hover {
    background: var(--c-bg);
    color: var(--c-text);
}
.ml-tile-star {
    font-size: 17px;
    line-height: 1;
    color: var(--c-border);
}
.ml-tile-star:hover {
    color: #fde68a;
}
.ml-tile-star.ml-star--active,
.ml-star--active {
    color: #facc15;
    background: #fefce8;
}
[data-theme="dark"] .ml-tile-star.ml-star--active,
[data-theme="dark"] .ml-star--active {
    background: rgba(250, 204, 21, 0.12);
}
.ml-tile-menu {
    font-size: 15px;
    line-height: 1;
}

.ml-tile-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-bg);
}
.ml-tile-color-btn--active .ml-tile-color-dot {
    border-color: transparent;
}

.ml-tile-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    text-transform: uppercase;
    flex-shrink: 0;
}

.ml-tile-tags {
    display: none;
}
.ml-tile-tag {
    display: none;
}
.ml-tile-tag--more {
    display: none;
}

/* legacy: keep selectors alive but hidden */
.ml-tile-overlay { display: none; }
.ml-tile-name { display: none; }
.ml-tile-checkbox-mark { display: none; }

/* --- ML: Bucket tiles (folders, collections, galleries in browse mode) ---- */
.ml-tile--bucket {
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ml-tile--bucket:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* Override base .ml-tile-thumb for bucket tiles */
.ml-tile--bucket .ml-tile-thumb,
.ml-tile--bucket .ml-tile-thumb::before { display: none; }

/* Bucket body: contains header + preview grid */
.ml-bt-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
    background: var(--c-surface);
}

.ml-bt-media {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
}

/* ---- Header row: type icon (left), actions (right) ---- */
.ml-bt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ml-bt-type-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--c-border) 30%, var(--c-bg));
}
.ml-bt-type-icon svg { width: 20px; height: 20px; }
.ml-tile--folder .ml-bt-type-icon { color: #e2b748; }
.ml-tile--collection .ml-bt-type-icon { color: var(--c-primary); }
.ml-tile--gallery .ml-bt-type-icon { color: #a855f7; }

.ml-bt-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bucket hamburger menu button — removed from tiles; actions via context menu */
.ml-bt-menu { display: none; }

/* Info button */
.ml-bt-info {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    padding: 0;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.ml-bt-info svg { width: 16px; height: 16px; }
.ml-bt-info:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

/* Count pill */
.ml-bt-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    color: var(--c-primary);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Checkbox */
.ml-bt-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.ml-bt-check input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}
.ml-bt-check-icon,
.ml-bt-check-icon--checked { width: 18px; height: 18px; color: var(--c-text-soft); pointer-events: none; }
.ml-bt-check-icon--checked { display: none; }
.ml-bt-check input:checked ~ .ml-bt-check-icon { display: none; }
.ml-bt-check input:checked ~ .ml-bt-check-icon--checked { display: block; }

/* ---- 3x2 preview grid ---- */
.ml-bt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    height: 100%;
}
.ml-bt-cell {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--c-bg);
}
.ml-bt-cell--blank {
    background: color-mix(in srgb, var(--c-border) 16%, var(--c-bg));
}
.ml-bt-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
/* Empty bucket: no previews at all — show large type icon */
.ml-bt-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--c-border) 14%, var(--c-bg));
    border-radius: 8px;
}
.ml-bt-empty svg { width: 32px; height: 32px; opacity: 0.25; }
.ml-tile--folder .ml-bt-empty { color: #e2b748; }
.ml-tile--collection .ml-bt-empty { color: var(--c-primary); }
.ml-tile--gallery .ml-bt-empty { color: #a855f7; }

/* ---- Name + rating row ---- */
.ml-bt-footer {
    padding: 2px 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ml-bt-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* ---- 5-star rating widget ---- */
.ml-bt-rating {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 18px;
}
.ml-bt-star {
    width: 15px;
    height: 15px;
    cursor: pointer;
    color: var(--c-border);
    transition: color 0.1s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.ml-bt-star:hover { transform: scale(1.15); }
.ml-bt-star--filled { color: #f59e0b; }
.ml-bt-rating:hover .ml-bt-star { color: var(--c-border); }
.ml-bt-rating:hover .ml-bt-star--hover { color: #f59e0b; }
.ml-bt-rating:hover .ml-bt-star--hover.ml-bt-star--filled { color: #f59e0b; }

/* ---- Detail panel star rating (larger variant for detail pane) ---- */
.ml-detail-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 6px 0 4px;
}
.ml-detail-rating .ml-bt-star {
    width: 20px;
    height: 20px;
}

/* --- ML: Bucket detail panel content -------------------------------------- */
.ml-bucket-detail { padding: 16px; }
.ml-bucket-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ml-bucket-detail-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ml-bucket-detail-type--folder { background: rgba(226,183,72,0.15); color: #e2b748; }
.ml-bucket-detail-type--collection { background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary); }
.ml-bucket-detail-type--gallery { background: rgba(168,85,247,0.12); color: #a855f7; }
.ml-bucket-detail-star { font-size: 20px; }
.ml-bucket-detail-name-row { margin-bottom: 14px; }
.ml-bucket-detail-name-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    background: var(--c-surface);
    color: var(--c-text);
    outline: none;
    transition: border-color 0.12s ease;
}
.ml-bucket-detail-name-input:focus { border-color: var(--c-primary); }
.ml-bucket-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}
.ml-bucket-detail-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ml-bucket-detail-meta-label {
    color: var(--c-text-muted);
    font-size: 12px;
}
.ml-bucket-detail-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.08s ease;
}
.ml-bucket-detail-publish-btn:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.ml-bucket-detail-pub-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-text-muted);
}
.ml-bucket-detail-pub-dot--on { background: #22c55e; }
.ml-bucket-detail-previews {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 16px;
    border-radius: 6px;
    overflow: hidden;
}
.ml-bucket-detail-previews img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--c-bg);
}
.ml-bucket-detail-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
}
.ml-bucket-detail-action {
    flex: 1;
    padding: 7px 0;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-family: inherit;
    color: var(--c-text);
    cursor: pointer;
    text-align: center;
    transition: background 0.08s ease;
}
.ml-bucket-detail-action:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.ml-bucket-detail-action--danger { color: var(--c-error, #e53e3e); border-color: color-mix(in srgb, var(--c-error, #e53e3e) 30%, var(--c-border)); }
.ml-bucket-detail-action--danger:hover { background: color-mix(in srgb, var(--c-error, #e53e3e) 6%, transparent); }

/* --- ML: Gallery detail header badges ------------------------------------- */
.ml-gal-hdr-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; }
.ml-gal-hdr-type { border: 1.5px solid; background: transparent; }
.ml-gal-hdr-type--image { color: #e53e3e; border-color: #e53e3e; }
.ml-gal-hdr-type--video { color: #3b82f6; border-color: #3b82f6; }
.ml-gal-hdr-pub { padding: 2px 10px; cursor: pointer; transition: opacity 0.1s ease; font-family: inherit; }
.ml-gal-hdr-pub:hover { opacity: 0.8; }
.ml-gal-hdr-pub--on { background: #22c55e; color: #fff; border: none; }
.ml-gal-hdr-pub:not(.ml-gal-hdr-pub--on) { background: var(--c-bg); color: var(--c-text-muted); border: 1px solid var(--c-border); }

/* --- ML: Gallery detail panel body ---------------------------------------- */
.ml-gal-detail { padding: 16px; }
.ml-gal-detail-title { font-size: 18px; font-weight: 700; margin: 0 0 20px; color: var(--c-text); line-height: 1.3; }

.ml-gal-section { margin-bottom: 20px; }
.ml-gal-section-hdr { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ml-gal-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); }
.ml-gal-section-gear { background: none; border: none; color: var(--c-text-muted); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; align-items: center; }
.ml-gal-section-gear:hover { color: var(--c-text); background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.ml-gal-section-spacer { flex: 1; }

.ml-gal-covers { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-gal-cover-img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--c-bg); border: 1px solid var(--c-border); }
.ml-gal-cover-empty { font-size: 12px; color: var(--c-text-muted); opacity: 0.7; padding: 12px 0; }

.ml-gal-meta-fields { display: flex; flex-direction: column; gap: 8px; background: var(--c-bg); border-radius: 8px; padding: 12px; border: 1px solid var(--c-border); }
.ml-gal-meta-field { display: flex; flex-direction: column; gap: 2px; }
.ml-gal-meta-key { font-size: 11px; font-weight: 600; color: var(--c-text-muted); }
.ml-gal-meta-val { font-size: 13px; color: var(--c-text); line-height: 1.4; }
.ml-gal-meta-val em { color: var(--c-text-muted); font-style: normal; }
.ml-gal-more-btn { display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: 6px; border: 1px solid var(--c-border); background: var(--c-surface); font-size: 12px; font-family: inherit; color: var(--c-text); cursor: pointer; }
.ml-gal-more-btn:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }

.ml-gal-media-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; }
.ml-gal-meta-field { position: relative; }
.ml-gal-meta-editable { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; transition: background 0.1s ease; min-height: 20px; }
.ml-gal-meta-editable:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.ml-gal-meta-input { width: 100%; padding: 2px 4px; margin: -2px -4px; border: 1px solid var(--c-primary); border-radius: 4px; font-size: 13px; font-family: inherit; background: var(--c-surface); color: var(--c-text); outline: none; box-sizing: content-box; }
.ml-gal-meta-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-border); }

.ml-gal-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-radius: 6px; overflow: hidden; }
.ml-gal-media-thumb-wrap { position: relative; cursor: pointer; }
.ml-gal-media-thumb-wrap:hover { opacity: 0.85; }
.ml-gal-media-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--c-bg); display: block; }
.ml-gal-media-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); pointer-events: none; }
.ml-gal-media-loading { font-size: 12px; color: var(--c-text-muted); padding: 12px 0; }
.ml-gal-media-empty { font-size: 12px; color: var(--c-text-muted); opacity: 0.7; padding: 8px 0; }

.ml-grid-title-info { background: none; border: none; color: var(--c-text-muted); cursor: pointer; padding: 2px; margin-left: 6px; vertical-align: middle; border-radius: 4px; display: inline-flex; align-items: center; }
.ml-grid-title-info:hover { color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }

.ml-gal-pub-inline-wrap { position: relative; display: inline-flex; margin-left: 8px; }
.ml-gal-pub-inline { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--c-border); border-radius: 999px; background: none; font-size: 11px; font-weight: 600; font-family: inherit; color: var(--c-text-muted); cursor: pointer; transition: all 0.12s ease; opacity: 0.6; }
.ml-gal-pub-inline:hover { opacity: 1; }
.ml-gal-pub-inline--on { border-color: var(--c-primary); color: var(--c-primary); opacity: 1; background: color-mix(in srgb, var(--c-primary) 6%, transparent); }
.ml-gal-pub-inline-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-muted); flex-shrink: 0; }
.ml-gal-pub-inline--on .ml-gal-pub-inline-dot { background: var(--c-primary); }
.ml-gal-pub-inline-menu { position: absolute; top: calc(100% + 4px); left: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; min-width: 120px; padding: 4px; }
.ml-gal-pub-inline-opt { display: block; width: 100%; padding: 6px 10px; border: none; background: none; font-size: 12px; font-family: inherit; color: var(--c-text); cursor: pointer; border-radius: 4px; text-align: left; }
.ml-gal-pub-inline-opt:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.ml-gal-pub-inline-opt--active { font-weight: 600; color: var(--c-primary); }

/* --- ML: Gallery cover selector on media tiles --- */
.ml-tile-cover-btn { display: inline-flex; align-items: center; gap: 2px; background: none; border: none; color: var(--c-text-muted); opacity: 0.3; cursor: pointer; padding: 2px; border-radius: 4px; font-size: 11px; font-weight: 700; transition: opacity 0.12s ease, color 0.12s ease; position: relative; }
.ml-tile-cover-btn:hover { opacity: 0.7; }
.ml-tile-cover-btn--active { opacity: 1; color: var(--c-primary); }
.ml-tile-cover-btn--active:hover { opacity: 1; }
.ml-tile-cover-num { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; border-radius: 3px; background: var(--c-primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }

.ml-cover-dropdown { display: flex; gap: 2px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.ml-cover-dropdown-opt { width: 28px; height: 28px; border: none; border-radius: 4px; background: none; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--c-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.08s ease; }
.ml-cover-dropdown-opt:hover { background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.ml-cover-dropdown-opt--active { background: var(--c-primary); color: #fff; }
.ml-cover-dropdown-opt--active:hover { background: var(--c-primary); }
.ml-cover-dropdown-opt--remove { color: var(--c-error, #e53e3e); font-size: 16px; }
.ml-cover-dropdown-opt--remove:hover { background: color-mix(in srgb, var(--c-error, #e53e3e) 10%, transparent); }

.ml-gal-media-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.ml-gal-media-overlay-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.8); }
.ml-gal-media-overlay-img { position: relative; max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.ml-gal-media-overlay-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.ml-gal-media-overlay-close:hover { background: rgba(255,255,255,0.3); }
.ml-gal-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.12s ease; }
.ml-gal-lb-arrow:hover { background: rgba(255,255,255,0.35); }
.ml-gal-lb-prev { left: 16px; }
.ml-gal-lb-next { right: 16px; }
.ml-gal-lb-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; z-index: 2; }

.ml-gal-info-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; }
.ml-gal-info-row:last-child { border-bottom: none; }
.ml-gal-info-label { color: var(--c-text-muted); font-size: 12px; }
.ml-gal-info-val { font-weight: 500; }

/* --- ML: Detail panel ----------------------------------------------------- */
.ml-detail {
    grid-area: detail;
    overflow: hidden;
    background: var(--c-surface);
    border-left: 1px solid transparent;
    height: 100%;
    min-width: 0;
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity var(--ml-panel-ease), transform var(--ml-panel-ease),
                border-left-color var(--ml-panel-ease);
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
.ml-detail::-webkit-scrollbar {
    width: 5px;
}
.ml-detail::-webkit-scrollbar-track {
    background: transparent;
}
.ml-detail::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 4px;
}
.ml-detail::-webkit-scrollbar-thumb:hover {
    background: var(--c-text-muted);
}
.ml-layout.ml-detail--open .ml-detail {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    overflow-y: auto;
    overflow-x: hidden;
    border-left-color: var(--c-border);
}

.ml-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    background: var(--c-surface);
    z-index: 2;
}

.ml-detail-title {
    font-size: var(--fs-sm);
    font-weight: 650;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.ml-detail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: background var(--ease), color var(--ease);
    flex-shrink: 0;
}
.ml-detail-close:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

.ml-detail-preview {
    width: 100%;
    max-height: 60vh;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-detail-preview img,
.ml-detail-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ml-detail-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ml-detail-video-wrap.ml-detail-video-wrap--portrait {
    aspect-ratio: 9 / 16;
    max-width: 50%;
    margin: 0 auto;
}
.ml-detail-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

.ml-detail-video-hd-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ml-detail-video-hd-btn:hover {
    background: rgba(0, 0, 0, 0.72);
    border-color: rgba(255, 255, 255, 0.45);
}

.ml-tile-vidthumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--c-bg);
}

.ml-detail-title-input {
    flex: 1;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    font-size: var(--fs-sm);
    font-weight: 650;
    font-family: var(--ff-sans);
    color: var(--c-text);
    background: transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ml-detail-title-input:hover {
    border-color: var(--c-border);
    background: var(--c-bg);
}
.ml-detail-title-input:focus {
    outline: none;
    border-color: var(--c-primary);
    background: var(--c-bg);
}

.ml-detail-preview--clickable { cursor: zoom-in; }

.ml-detail-star-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--ease), transform var(--ease);
}
.ml-detail-star-btn:hover {
    transform: scale(1.1);
    color: #fde68a;
}
.ml-detail-star-btn.ml-star--active {
    color: #facc15;
    background: #fefce8;
    border-radius: 4px;
}
[data-theme="dark"] .ml-detail-star-btn.ml-star--active {
    background: rgba(250, 204, 21, 0.12);
}

.ml-detail-body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.ml-detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.ml-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--fs-xs);
}

.ml-detail-label {
    color: var(--c-text-muted);
}

.ml-detail-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    display: inline-block;
    vertical-align: middle;
}

.ml-detail-section {
    border-bottom: 1px solid var(--c-border);
    padding-bottom: var(--sp-3);
}
.ml-detail-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ml-detail-similar-btns {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.ml-detail-description {
    font-size: var(--fs-sm);
    color: var(--c-text);
    line-height: 1.5;
}

.ml-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ml-detail-tags-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.ml-detail-muted {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.ml-detail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
}

/* --- ML: Detail panel – top bar buttons ----------------------------------- */
.ml-detail-header-spacer {
    flex: 1;
    min-width: 0;
}
.ml-detail-topbar-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}
.ml-detail-topbar-btn:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}
.ml-detail-topbar-btn--label {
    width: auto;
    padding: 0 8px;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    font-family: var(--ff-sans);
}

/* --- ML: Detail panel – title row ----------------------------------------- */
.ml-detail-title-row {
    padding: var(--sp-2) var(--sp-4) 0;
}

/* --- ML: Detail panel – hamburger menu ------------------------------------ */
.ml-detail-hamburger-wrap {
    position: relative;
}
.ml-detail-hamburger-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 170px;
    z-index: var(--z-ml-dropdown);
    overflow: hidden;
}
.ml-detail-hamburger-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: none;
    background: none;
    font-size: var(--fs-sm);
    font-family: var(--ff-sans);
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.12s ease;
}
.ml-detail-hamburger-menu button:hover {
    background: var(--c-surface-alt);
}

/* --- ML: Detail panel – inline similar buttons ---------------------------- */
.ml-detail-similar-inline {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* --- ML: Detail panel – resize drag handle -------------------------------- */
.ml-layout.ml-detail--open .ml-detail::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 10;
}
.ml-detail--resizing {
    transition: none !important;
}
.ml-resizing .ml-layout {
    transition: none !important;
}
.ml-resizing,
.ml-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* --- ML: Info & Details modals -------------------------------------------- */
.ml-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-ml-modal);
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .ml-modal-overlay {
    background: rgba(2, 6, 23, 0.6);
}
.ml-modal-overlay .ml-modal {
    transform: translateY(0) scale(1);
}
.ml-modal--sm { max-width: 420px; }
.ml-modal--md { max-width: 560px; }
.ml-modal--sm .ml-modal-body { max-height: 70vh; overflow-y: auto; }

.ml-detail-value-mono {
    font-family: var(--ff-mono, monospace);
    font-size: var(--fs-xs);
    word-break: break-all;
}

.ml-details-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.ml-details-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.ml-details-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
}
.ml-details-input,
.ml-details-textarea {
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: var(--fs-sm);
    font-family: var(--ff-sans);
    color: var(--c-text);
    background: var(--c-bg);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}
.ml-details-input:focus,
.ml-details-textarea:focus {
    outline: none;
    border-color: var(--c-primary);
}
.ml-details-textarea {
    min-height: 60px;
    resize: vertical;
}

/* --- ML: Chips ------------------------------------------------------------ */
.ml-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-weight: 500;
    transition: background var(--ease), border-color var(--ease);
}
.ml-chip:hover { border-color: var(--c-primary); }

.ml-chip--keyword {
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
}
.ml-chip--tag {
    border-color: color-mix(in srgb, var(--c-success) 40%, var(--c-border));
}
.ml-chip--gallery {
    border-color: color-mix(in srgb, var(--c-warning) 40%, var(--c-border));
}

.ml-detail-keywords-bar {
    padding: 4px 16px 8px;
}
.ml-detail-keywords-bar .ml-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ml-ai-more-wrap {
    padding: 0 16px 8px;
}
.ml-ai-more-btn {
    display: inline-block;
    padding: 2px 12px;
    font-size: var(--fs-xs);
    font-family: var(--ff-sans);
    font-weight: 500;
    color: var(--c-text-muted);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.ml-ai-more-btn:hover {
    background: var(--c-bg-hover);
    color: var(--c-text);
}
.ml-ai-details {
    display: none;
    margin-top: 8px;
}
.ml-ai-details--open {
    display: block;
}
.ml-ai-detail-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    font-size: var(--fs-xs);
    line-height: 1.4;
}
.ml-ai-detail-label {
    flex: 0 0 80px;
    font-weight: 600;
    color: var(--c-text-muted);
    text-align: right;
}
.ml-ai-detail-value {
    flex: 1;
    color: var(--c-text);
    word-break: break-word;
}

.ml-chip-remove {
    display: inline-flex;
    cursor: pointer;
    color: var(--c-text-muted);
    transition: color var(--ease);
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.ml-chip-remove:hover { color: var(--c-danger); }

.ml-tag-input {
    padding: 3px 8px;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    font-size: var(--fs-xs);
    font-family: var(--ff-sans);
    color: var(--c-text);
    min-width: 60px;
    outline: none;
    transition: border-color var(--ease);
}
.ml-tag-input:focus {
    border-color: var(--c-primary);
    border-style: solid;
}

.ml-tag-ac-wrap {
    position: relative;
    flex: 1;
    min-width: 80px;
}
.ml-tag-ac-wrap .ml-tag-input {
    width: 100%;
    box-sizing: border-box;
}
.ml-tag-ac-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}
.ml-tag-ac-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: var(--fs-xs);
    font-family: var(--ff-sans);
    color: var(--c-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}
.ml-tag-ac-item:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

/* --- ML: Media overlay ---------------------------------------------------- */
.ml-image-overlay,
.ml-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    animation: ml-overlay-in 0.2s ease;
}
.ml-image-overlay img,
.ml-video-overlay video {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: var(--radius);
}
.ml-video-overlay video {
    background: #000;
}
.ml-image-overlay-close,
.ml-video-overlay-close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 2001;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ml-image-overlay-close:hover,
.ml-video-overlay-close:hover {
    background: rgba(255, 255, 255, 0.25);
}
@keyframes ml-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- ML: Detail loading skeleton ------------------------------------------ */
.ml-detail-loading-bar {
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--c-border) 25%, rgba(255,255,255,0.08) 50%, var(--c-border) 75%);
    background-size: 200% 100%;
    animation: ml-shimmer 1.4s ease-in-out infinite;
}
.ml-detail-loading-chips {
    padding: var(--sp-2) var(--sp-4);
}
@keyframes ml-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- ML: Collections panel (global left sidebar) ------------------------- */
.ml-collections-panel {
    width: 0;
    min-width: 0;
    flex-shrink: 0;
    background: var(--c-surface);
    border-right: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
    transition: width var(--ml-panel-ease),
                min-width var(--ml-panel-ease),
                border-right-color var(--ml-panel-ease);
    z-index: 2;
}
.ml-collections-panel::-webkit-scrollbar { width: 5px; }
.ml-collections-panel::-webkit-scrollbar-track { background: transparent; }
.ml-collections-panel::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }
.ml-collections-panel::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }
.admin-body.admin-collections--open .ml-collections-panel {
    width: var(--ml-collections-width);
    min-width: var(--ml-collections-width);
    border-right: 1px solid var(--c-border);
}

/* Right-edge drag handle for collections panel resize */
.admin-body.admin-collections--open .ml-collections-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s ease;
}
.admin-body.admin-collections--open .ml-collections-panel:hover::after {
    background: color-mix(in srgb, var(--c-primary) 15%, transparent);
}
.ml-coll-resize-grip {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    z-index: 11;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.ml-coll-resize-grip::before,
.ml-coll-resize-grip::after {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--c-text-muted);
}
.ml-coll-resize-grip-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--c-text-muted);
}
.ml-collections-panel:hover .ml-coll-resize-grip {
    opacity: 0.5;
}
.ml-collections-panel.ml-coll--resizing {
    transition: none;
}
.ml-collections-panel.ml-coll--resizing::after {
    background: var(--c-primary);
}
.ml-collections-panel.ml-coll--resizing .ml-coll-resize-grip {
    opacity: 1;
}
.ml-collections-panel.ml-coll--resizing .ml-coll-resize-grip::before,
.ml-collections-panel.ml-coll--resizing .ml-coll-resize-grip::after,
.ml-collections-panel.ml-coll--resizing .ml-coll-resize-grip-dot {
    background: var(--c-primary);
}

/* --- ML: Collections tab bar --------------------------------------------- */
.ml-coll-tabs {
    display: flex;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    z-index: 2;
    flex-shrink: 0;
    padding: 0 4px;
    gap: 2px;
}
.ml-coll-tab {
    flex: 1;
    padding: 8px 0 7px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--ff-sans);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ml-coll-tab:hover { color: var(--c-text); }
.ml-coll-tab--active {
    color: var(--c-text);
    border-bottom-color: var(--c-primary);
}

/* --- Collections toolbar: search + filter + sort + create ---------------- */
.ml-coll-toolbar {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 3px 4px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    position: sticky;
    top: 34px;
    z-index: 3;
    flex-shrink: 0;
    min-height: 30px;
}
.ml-coll-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--c-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.08s ease, color 0.08s ease;
}
.ml-coll-tb-btn:hover { background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-text); }
.ml-coll-tb-btn.ml-coll-tb-btn--active {
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary);
}
.ml-coll-tb-spacer { flex: 1; min-width: 4px; }
.ml-coll-tb-sep {
    width: 1px;
    height: 16px;
    background: var(--c-border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Expandable search input */
.ml-coll-search-wrap {
    display: flex;
    align-items: center;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.2s cubic-bezier(.4,0,.2,1), opacity 0.15s ease;
    position: relative;
}
.ml-coll-search-wrap.ml-coll-search--open {
    max-width: 300px;
    opacity: 1;
}
.ml-coll-search-input {
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0 20px 0 6px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    background: var(--c-surface-alt, var(--c-surface));
    color: var(--c-text);
    outline: none;
    transition: border-color 0.12s ease;
}
.ml-coll-search-input:focus { border-color: var(--c-primary); }
.ml-coll-search-input::placeholder { color: var(--c-text-muted); opacity: 0.6; }
.ml-coll-search-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    font-size: 14px;
    line-height: 1;
    padding: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.ml-coll-search-clear:hover { background: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-text); }

/* --- Filter panel (slide-down) ------------------------------------------- */
.ml-coll-filter-panel {
    border-bottom: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface-alt, var(--c-surface)) 50%, var(--c-surface));
    padding: 8px 10px;
    flex-shrink: 0;
    position: sticky;
    top: 65px;
    z-index: 2;
}
.ml-coll-fp-section { margin-bottom: 8px; }
.ml-coll-fp-section:last-child { margin-bottom: 0; }
.ml-coll-fp-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    margin-bottom: 4px;
}
.ml-coll-fp-stars {
    display: flex;
    gap: 2px;
}
.ml-coll-fp-star {
    background: none;
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 2px 5px;
    transition: background 0.08s ease, color 0.08s ease, border-color 0.08s ease;
    font-family: inherit;
    line-height: 1.2;
}
.ml-coll-fp-star:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); color: var(--c-text); }
.ml-coll-fp-star.ml-coll-fp-star--active {
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary);
    border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
}
.ml-coll-fp-select {
    width: 100%;
    height: 24px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    background: var(--c-surface);
    color: var(--c-text);
    padding: 0 4px;
    cursor: pointer;
    outline: none;
}
.ml-coll-fp-select:focus { border-color: var(--c-primary); }
.ml-coll-fp-toggles {
    display: flex;
    gap: 2px;
}
.ml-coll-fp-toggle {
    flex: 1;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: 3px;
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 3px 0;
    text-align: center;
    transition: background 0.08s ease, color 0.08s ease, border-color 0.08s ease;
    font-family: inherit;
}
.ml-coll-fp-toggle:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); color: var(--c-text); }
.ml-coll-fp-toggle.ml-coll-fp-toggle--active {
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary);
    border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
}

/* --- Sort panel (slide-down) --------------------------------------------- */
.ml-coll-sort-panel {
    border-bottom: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface-alt, var(--c-surface)) 50%, var(--c-surface));
    padding: 4px 0;
    flex-shrink: 0;
    position: sticky;
    top: 65px;
    z-index: 2;
}
.ml-coll-sort-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
    font-family: inherit;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background 0.06s ease, color 0.06s ease;
    text-align: left;
}
.ml-coll-sort-opt:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); color: var(--c-text); }
.ml-coll-sort-opt.ml-coll-sort-opt--active {
    color: var(--c-primary);
    font-weight: 500;
}
.ml-coll-sort-opt-label { flex: 1; }
.ml-coll-sort-dir {
    font-size: 9px;
    opacity: 0.4;
    margin-left: 8px;
    transition: opacity 0.1s ease;
}
.ml-coll-sort-opt.ml-coll-sort-opt--active .ml-coll-sort-dir { opacity: 1; }

/* Active filter/sort indicator dot */
.ml-coll-tb-btn--has-filter::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-primary);
}
.ml-coll-tb-btn { position: relative; }

/* Hide no-longer-used create bar */
.ml-coll-create-bar { display: none !important; }

.ml-coll-tree {
    padding: 0 0 var(--sp-4);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.ml-coll-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--c-text-muted);
}

/* --- Windows Explorer navigation pane ------------------------------------ */
.ml-coll-node {
    user-select: none;
    position: relative;
}

.ml-coll-node--dragover > .ml-coll-label {
    outline: 2px dashed var(--c-primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}
.ml-coll-node--dragging { opacity: 0.4; }

/* Row: full-width, compact, no rounding -- just like Explorer */
.ml-coll-label {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px 0 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--c-text);
    transition: background 0.06s ease;
    position: relative;
    height: 26px;
}
.ml-coll-label:hover {
    background: color-mix(in srgb, var(--c-text) 6%, transparent);
}

/* Active / selected row -- subtle blue ribbon like Explorer's focus */
.ml-coll-label--active {
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}
.ml-coll-label--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--c-primary);
}
.ml-coll-label--active:hover {
    background: color-mix(in srgb, var(--c-primary) 18%, transparent);
}

/* Chevron toggle */
.ml-coll-chevron {
    width: 22px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    transition: transform 0.12s cubic-bezier(.4,0,.2,1), opacity 0.12s ease;
    opacity: 0.55;
    border-radius: 4px;
}
.ml-coll-folder > .ml-coll-label .ml-coll-chevron { cursor: pointer; }
.ml-coll-folder > .ml-coll-label .ml-coll-chevron:hover { opacity: 1; background: color-mix(in srgb, var(--c-text-muted) 15%, transparent); }
.ml-coll-label:hover .ml-coll-chevron { opacity: 1; }
.ml-coll-chevron svg { display: block; }
.ml-coll-chevron.ml-coll-chevron--none {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}
.ml-coll-folder--open > .ml-coll-label .ml-coll-chevron {
    transform: rotate(90deg);
    opacity: 0.8;
}
.ml-coll-item > .ml-coll-label .ml-coll-chevron {
    opacity: 0;
    pointer-events: none;
}

/* Folder / collection icon */
.ml-coll-icon {
    width: 22px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--c-text-muted);
}
.ml-coll-folder > .ml-coll-label .ml-coll-icon { color: #e2b748; }
.ml-coll-folder > .ml-coll-label .ml-coll-icon.ml-coll-icon--empty { opacity: 0.35; }
.ml-coll-folder--open > .ml-coll-label .ml-coll-icon { color: #daa520; }

/* Name */
.ml-coll-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    font-size: 13px;
    padding-left: 2px;
}
.ml-coll-folder > .ml-coll-label .ml-coll-name { font-weight: 500; }

/* Count badge: fades on hover to make room for menu */
.ml-coll-count {
    font-size: 11px;
    color: var(--c-text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    opacity: 0.5;
    min-width: 20px;
    text-align: right;
    transition: opacity 0.1s ease, width 0.1s ease;
}

/* Children container: expand/collapse */
.ml-coll-children {
    padding-left: 0;
    margin-left: 20px;
    border-left: 1px solid color-mix(in srgb, var(--c-border) 50%, transparent);
    position: relative;
    overflow: hidden;
}
.ml-coll-folder:not(.ml-coll-folder--open) > .ml-coll-children {
    display: none;
}
.ml-coll-empty-hint {
    padding: 4px 8px 4px 12px;
    font-size: 11px;
    color: var(--c-text-muted);
    opacity: 0.6;
    font-style: italic;
}

/* Context menu (shared for side panel + main grid) */
.ml-coll-ctx {
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    max-width: 260px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
    padding: 4px 0;
    animation: ml-ctx-in 0.12s cubic-bezier(.2,.8,.4,1);
}
@keyframes ml-ctx-in {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ml-coll-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.1s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.3;
}
.ml-coll-ctx-item:hover {
    background: var(--c-surface-alt);
}
.ml-coll-ctx-item:disabled {
    opacity: 0.45;
    pointer-events: none;
}
.ml-coll-ctx-item svg {
    flex-shrink: 0;
    opacity: 0.65;
}
.ml-coll-ctx-item:hover svg {
    opacity: 1;
}
.ml-coll-ctx-item--danger {
    color: var(--c-error, #e53e3e);
}
.ml-coll-ctx-item--danger svg { opacity: 0.8; }
.ml-coll-ctx-item--danger:hover {
    background: color-mix(in srgb, var(--c-error, #e53e3e) 8%, transparent);
}
.ml-coll-ctx-item--has-sub {
    position: relative;
}
.ml-coll-ctx-item--has-sub::after {
    content: '';
    margin-left: auto;
    border: 4px solid transparent;
    border-left-color: currentColor;
    opacity: 0.45;
}
.ml-coll-ctx-sep {
    height: 1px;
    background: var(--c-border);
    margin: 4px 0;
}

/* Folder-picker sub-menu (hierarchical) */
.ml-ctx-submenu {
    position: fixed;
    z-index: 10000;
    min-width: 200px;
    max-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
    animation: ml-ctx-in 0.12s cubic-bezier(.2,.8,.4,1);
}
.ml-ctx-submenu::-webkit-scrollbar { width: 4px; }
.ml-ctx-submenu::-webkit-scrollbar-track { background: transparent; }
.ml-ctx-submenu::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }
.ml-ctx-sub-header {
    padding: 5px 12px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
    user-select: none;
}
.ml-ctx-sub-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s ease;
    line-height: 1.3;
}
.ml-ctx-sub-item:hover {
    background: var(--c-surface-alt);
}
.ml-ctx-sub-item svg {
    flex-shrink: 0;
    opacity: 0.55;
}
.ml-ctx-sub-item:hover svg { opacity: 1; }
.ml-ctx-sub-item--root {
    font-style: italic;
    color: var(--c-text-muted);
}
.ml-ctx-sub-empty {
    padding: 12px;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-align: center;
}

/* --- ML: Bulk action bar -------------------------------------------------- */
.ml-bulk-bar {
    position: fixed;
    bottom: var(--sp-6);
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + var(--sp-8)));
    z-index: var(--z-ml-bulk);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: transform var(--ml-panel-ease), opacity var(--ml-panel-ease);
    pointer-events: none;
}
.ml-bulk-bar--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
[data-theme="dark"] .ml-bulk-bar {
    background: var(--c-surface-alt);
}

.ml-bulk-count {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}
.ml-bulk-count strong {
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}

.ml-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    font-family: var(--ff-sans);
    color: var(--c-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.ml-bulk-btn:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

.ml-bulk-btn--danger {
    color: var(--c-danger);
    border-color: var(--c-danger);
}
.ml-bulk-btn--danger:hover {
    background: color-mix(in srgb, var(--c-danger) 10%, transparent);
    color: var(--c-danger);
}

.ml-bulk-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-text-muted);
}
.ml-bulk-btn--ghost:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

/* 3-dot overflow menu */
.ml-bulk-overflow {
    position: relative;
    display: inline-flex;
}
.ml-bulk-overflow-trigger {
    padding: 6px 8px;
}
.ml-bulk-overflow-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 10;
    padding: 4px 0;
}
.ml-bulk-overflow-menu--open {
    display: block;
}
.ml-bulk-overflow-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    font-size: var(--fs-xs);
    font-weight: 600;
    font-family: var(--ff-sans);
    color: var(--c-text-muted);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
}
.ml-bulk-overflow-item:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

/* --- ML: Similar bar ------------------------------------------------------ */
.ml-similar-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: color-mix(in srgb, var(--c-primary) 8%, var(--c-bg));
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-4);
    flex-shrink: 0;
}

.ml-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-family: var(--ff-sans);
    color: var(--c-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease), border-color var(--ease);
}
.ml-back-btn:hover {
    background: var(--c-surface-alt);
}

.ml-similar-label {
    font-size: var(--fs-sm);
    color: var(--c-primary);
    font-weight: 500;
}

/* --- ML: Dropdown overlay ------------------------------------------------- */
.ml-dropdown-overlay {
    position: fixed;
    z-index: var(--z-ml-dropdown);
    min-width: 220px;
    max-width: 360px;
    max-height: 280px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.ml-dropdown-overlay.ml-dropdown--open {
    display: flex !important;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ml-dropdown-search {
    width: 100%;
    margin: 8px;
    width: calc(100% - 16px);
    padding: 8px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-family: var(--ff-sans);
    color: var(--c-text);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ml-dropdown-search:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.ml-dropdown-list {
    overflow-y: auto;
    flex: 1;
    padding: 0 var(--sp-1) var(--sp-1);
}

.ml-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    border-radius: 999px;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.ml-dropdown-item:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}
.ml-dropdown-item--active {
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    color: var(--c-primary);
    font-weight: 500;
}
.ml-dropdown-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ml-dropdown-item--disabled:hover {
    background: transparent;
    color: var(--c-text-muted);
}

.ml-dropdown-item--radio::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--c-border);
    border-radius: 50%;
    flex-shrink: 0;
    transition: border-color var(--ease), background var(--ease);
}
.ml-dropdown-item--radio.ml-dropdown-item--active::before {
    border-color: var(--c-primary);
    background: var(--c-primary);
    box-shadow: inset 0 0 0 3px var(--c-surface);
}

.ml-dropdown-empty {
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* --- ML: Modal ------------------------------------------------------------ */
.ml-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-ml-modal);
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.ml-modal-backdrop.ml-modal--open {
    display: flex;
    opacity: 1;
}
[data-theme="dark"] .ml-modal-backdrop {
    background: rgba(2, 6, 23, 0.6);
}

.ml-modal {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 520px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ml-modal-backdrop.ml-modal--open .ml-modal {
    transform: translateY(0) scale(1);
}

.ml-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.ml-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    transition: background var(--ease), color var(--ease);
}
.ml-modal-close:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

.ml-modal-body {
    padding: var(--sp-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    font-size: var(--fs-sm);
    color: var(--c-text);
    line-height: 1.5;
}

.ml-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
}

.ml-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8);
}

.ml-modal-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-family: var(--ff-sans);
    color: var(--c-text);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ml-modal-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.ml-modal-coll-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-height: 240px;
    overflow-y: auto;
}

.ml-modal-coll-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    transition: background var(--ease), color var(--ease);
}
.ml-modal-coll-item:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

.ml-modal-coll-create {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-primary);
    cursor: pointer;
    font-weight: 500;
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-1);
    transition: background var(--ease);
}
.ml-modal-coll-create:hover {
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

.ml-modal-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}

.ml-modal-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    cursor: pointer;
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.ml-modal-color-swatch:hover {
    transform: scale(1.15);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

/* --- ML: Add-media "+" tile ---------------------------------------------- */
.ml-tile--add-media {
    border: 2px dashed color-mix(in srgb, var(--c-border) 80%, transparent);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ml-tile--add-media:hover {
    border-color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 4%, transparent);
}
.ml-tile-add-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--c-text-muted);
    height: 100%;
}
.ml-tile--add-media:hover .ml-tile-add-inner { color: var(--c-primary); }
.ml-tile-add-label {
    font-size: 12px;
    font-weight: 500;
}
.ml-tile--add-media .ml-tile-bar { display: none; }

/* --- ML: Media Picker Modal ---------------------------------------------- */
.ml-picker-backdrop {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.ml-picker-backdrop--open { opacity: 1; }
[data-theme="dark"] .ml-picker-backdrop { background: rgba(2, 6, 23, 0.65); }

.ml-picker-modal {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 92vw;
    max-width: 1400px;
    height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ml-picker-backdrop--open .ml-picker-modal { transform: translateY(0) scale(1); }

.ml-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}
.ml-picker-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--c-text);
}
.ml-picker-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    transition: background 0.12s ease, color 0.12s ease;
}
.ml-picker-close:hover { background: var(--c-surface-alt); color: var(--c-text); }

.ml-picker-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    background: var(--c-surface);
}
.ml-picker-search {
    flex: 0 1 220px;
    min-width: 120px;
    padding: 8px 13px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--ff-sans);
    color: var(--c-text);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow 0.18s ease;
}
.ml-picker-search:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring), 0 6px 16px -14px var(--c-primary);
}
.ml-picker-search::placeholder { color: var(--c-text-muted); }

.ml-picker-filters .ml-color-dropdown { z-index: 10; }

.ml-picker-filterdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ml-picker-size-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--c-surface) 94%, #fff 6%);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.ml-picker-filterdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    background: color-mix(in srgb, var(--c-surface) 94%, #fff 6%);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ml-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 0;
}
.ml-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--ml-tile-size, 160px));
    gap: 12px;
}
.ml-picker-sentinel { height: 1px; width: 100%; }
.ml-picker-loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}
.ml-picker-empty {
    display: flex;
    justify-content: center;
    padding: 40px 0;
    color: var(--c-text-muted);
    font-size: 14px;
}

.ml-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
    background: var(--c-surface);
}
.ml-picker-footer-count {
    font-size: 13px;
    color: var(--c-text-muted);
}
.ml-picker-add-btn {
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: opacity 0.12s ease;
}
.ml-picker-add-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* --- ML: Context menu ----------------------------------------------------- */
.ml-context-menu {
    position: fixed;
    z-index: var(--z-ml-context);
    min-width: 180px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--sp-1) 0;
    animation: ml-context-in 0.12s ease;
}

@keyframes ml-context-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.ml-context-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--ff-sans);
}
.ml-context-item:hover {
    background: var(--c-surface-alt);
    color: var(--c-text);
}

.ml-context-item--danger {
    color: var(--c-danger);
}
.ml-context-item--danger:hover {
    background: color-mix(in srgb, var(--c-danger) 10%, transparent);
    color: var(--c-danger);
}

/* --- ML: Tile quick color menu ------------------------------------------- */
.ml-tile-color-menu {
    position: fixed;
    z-index: var(--z-ml-context);
    width: 190px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--sp-2);
    animation: ml-context-in 0.12s ease;
}

.ml-tile-color-menu-clear {
    display: block;
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-family: var(--ff-sans);
    text-align: center;
    padding: 6px 8px;
    margin-bottom: var(--sp-2);
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.ml-tile-color-menu-clear:hover {
    border-color: var(--c-primary);
    color: var(--c-text);
    background: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg) 90%);
}

.ml-tile-color-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2);
}

.ml-tile-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, outline-color 0.12s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.ml-tile-color-swatch:hover {
    transform: scale(1.1);
    outline-color: var(--c-border);
}
.ml-tile-color-swatch--active {
    outline-color: var(--c-primary);
}

/* --- ML: Responsive ------------------------------------------------------- */
@media (max-width: 1200px) {
    .ml-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "grid";
        transition: none;
    }
    .ml-layout.ml-detail--open {
        grid-template-columns: 1fr;
    }

    .ml-detail {
        position: fixed;
        top: var(--topbar-height);
        bottom: 0;
        right: 0;
        z-index: 800;
        height: auto;
        max-width: 90vw;
        box-shadow: var(--shadow-md);
        border-left: 1px solid var(--c-border);
        width: var(--ml-detail-width);
    }
    .ml-collections-panel {
        position: fixed;
        top: var(--topbar-height);
        bottom: 0;
        left: 0;
        z-index: 800;
        height: auto;
        max-width: 90vw;
        box-shadow: none;
        border-right: none;
        border-left: none;
        width: 0;
        min-width: 0;
    }
    .admin-body.admin-collections--open .ml-collections-panel {
        width: var(--ml-collections-width);
        min-width: var(--ml-collections-width);
        box-shadow: var(--shadow-md);
        border-right: 1px solid var(--c-border);
    }
}

@media (max-width: 768px) {
    .ml-filters {
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
    }
    .ml-search-wrap {
        min-width: 0;
        max-width: none;
        flex: 1 1 100%;
    }
    .ml-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--sp-3);
    }
    .ml-bulk-bar {
        left: var(--sp-3);
        right: var(--sp-3);
        transform: translateX(0) translateY(calc(100% + var(--sp-8)));
        border-radius: var(--radius-lg);
    }
    .ml-bulk-bar--visible {
        transform: translateX(0) translateY(0);
    }
    .ml-modal {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        width: 100%;
        height: 100%;
    }
    .ml-detail,
    .ml-collections-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* -- Media Library generation badges ----------------------------------- */
.ml-tile-badge {
    position: absolute;
    top: 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.1;
    z-index: 1;
    pointer-events: none;
}
.ml-tile-badge--generated {
    left: 6px;
    background: rgba(108, 92, 231, 0.85);
    color: #fff;
}
.ml-tile-badge--children {
    right: 6px;
    background: rgba(34, 197, 94, 0.85);
    color: #fff;
    min-width: 16px;
    text-align: center;
}
.ml-tile-badge--processing {
    left: 6px;
    background: rgba(234, 179, 8, 0.9);
    color: #111827;
    max-width: calc(100% - 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ml-detail-provenance {
    font-size: 12px;
}
.ml-detail-prov-link {
    color: var(--c-primary, #6c5ce7);
    text-decoration: none;
    font-size: 11px;
    font-family: monospace;
}
.ml-detail-prov-link:hover { text-decoration: underline; }
.ml-detail-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ml-detail-child-link {
    color: var(--c-primary, #6c5ce7);
    text-decoration: none;
    font-size: 11px;
    font-family: monospace;
}
.ml-detail-child-link:hover { text-decoration: underline; }

/* -- processing indicator --------------------------------------------- */
.ml-detail-processing-wrap {
    position: relative;
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
    background: #0a0a12;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-detail-processing-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: var(--radius-md, 6px);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}
.ml-detail-processing-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(108, 92, 231, 0.2);
    border-top-color: var(--c-primary, #6c5ce7);
    border-radius: 50%;
    animation: ml-proc-spin 0.9s linear infinite;
}
@keyframes ml-proc-spin { to { transform: rotate(360deg); } }
.ml-detail-processing-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text, #e0e0e0);
    text-transform: capitalize;
}
.ml-detail-processing-hint {
    font-size: 11px;
    color: var(--c-text-muted, #999);
    max-width: 220px;
    line-height: 1.5;
}

/* -- status badge ----------------------------------------------------- */
.ml-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.03em;
}
.ml-status-badge--processing {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}
.ml-status-badge--pending {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}
.ml-status-badge--generated {
    background: rgba(108, 92, 231, 0.15);
    color: #8b7aff;
}
/* ── Settings Modal ─────────────────────────────────────── */
.settings-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.settings-modal{background:var(--surface,#fff);border-radius:12px;width:600px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border,#e5e7eb)}
.settings-title{font-size:16px;font-weight:600;margin:0}
.settings-close{background:none;border:none;font-size:30px;cursor:pointer;color:var(--text-secondary,#6b7280);width:40px;height:40px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.settings-close:hover{color:var(--text,#111)}

/* Keep film details modal dimensions stable across tabs. */
.ml-modal-backdrop.ml-modal--film-info .ml-modal {
    width: 760px;
    max-width: 96vw;
    min-height: 620px;
}
.ml-modal-backdrop.ml-modal--film-info-media .ml-modal {
    width: 900px;
    max-width: 96vw;
}
.ml-modal-backdrop.ml-modal--film-info .ml-film-info-content {
    max-height: calc(85vh - 200px);
}
.settings-tabs{display:flex;gap:0;border-bottom:1px solid var(--border,#e5e7eb);padding:0 20px}
.settings-tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;font-size:13px;font-weight:500;color:var(--text-secondary,#6b7280);cursor:pointer;transition:color .15s,border-color .15s}
.settings-tab:hover{color:var(--text,#111)}
.settings-tab--active{color:var(--accent,#4f46e5);border-bottom-color:var(--accent,#4f46e5)}
.settings-body{flex:1;overflow-y:auto;padding:20px}
.settings-placeholder{color:var(--text-secondary,#6b7280);font-size:13px;text-align:center;padding:32px 0}
.settings-cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.settings-cat-title{font-size:14px;font-weight:600;margin:0}
.settings-cat-add{display:flex;gap:6px}
.settings-cat-input{border:1px solid var(--border,#d1d5db);border-radius:6px;padding:6px 10px;font-size:13px;width:200px;background:var(--surface,#fff);color:var(--text,#111)}
.settings-cat-input:focus{outline:none;border-color:var(--accent,#4f46e5)}
.settings-cat-add-btn{background:var(--accent,#4f46e5);color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer}
.settings-cat-add-btn:hover{opacity:.9}
.settings-cat-list{display:flex;flex-direction:column;gap:2px}
.settings-cat-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;background:var(--surface-secondary,#f9fafb);border:1px solid var(--border,#e5e7eb);transition:background .15s}
.settings-cat-item:hover{background:var(--surface-hover,#f3f4f6)}
.settings-cat-grip{cursor:grab;color:var(--text-tertiary,#9ca3af);display:flex;align-items:center}
.settings-cat-grip svg{pointer-events:none}
.settings-cat-name{flex:1;font-size:13px;font-weight:500}
.settings-cat-actions{display:flex;gap:4px}
.settings-cat-btn{background:none;border:none;cursor:pointer;padding:2px 4px;color:var(--text-secondary,#6b7280);border-radius:4px;display:flex;align-items:center}
.settings-cat-btn:hover{color:var(--text,#111);background:var(--surface-hover,#e5e7eb)}
.settings-cat-btn--danger:hover{color:#dc2626;background:#fef2f2}
.settings-cat-item--dragging{opacity:.5;background:var(--accent-light,#eef2ff)}
.settings-cat-item--over{border-color:var(--accent,#4f46e5);background:var(--accent-light,#eef2ff)}
.settings-cat-empty{color:var(--text-secondary,#6b7280);font-size:13px;text-align:center;padding:24px 0}
/* ── Photos Accordion Panels ──────────────────────────── */
.ml-photos-accordion{display:flex;flex-direction:column;gap:0;height:100%}
.ml-photos-acc-panel{border-bottom:1px solid var(--border,#e5e7eb)}
.ml-photos-acc-header{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;user-select:none;font-size:12px;font-weight:600;color:var(--text-secondary,#6b7280);text-transform:uppercase;letter-spacing:.04em;transition:color .15s}
.ml-photos-acc-header:hover{color:var(--text,#111)}
.ml-photos-acc-chevron{transition:transform .2s;flex-shrink:0}
.ml-photos-acc-header--active .ml-photos-acc-chevron{transform:rotate(90deg)}
.ml-photos-acc-title{flex:1}
.ml-photos-acc-add-btn{background:none;border:none;color:var(--accent,#4f46e5);font-size:11px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:4px;white-space:nowrap}
.ml-photos-acc-add-btn:hover{background:var(--accent-light,#eef2ff)}
.ml-photos-acc-body{overflow-y:auto;padding:0}
.ml-photos-acc-body--collapsed{display:none}
.ml-photos-cat-group{margin-bottom:2px}
.ml-photos-cat-label{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 14px;font-size:12px;font-weight:600;color:var(--text,#111);cursor:pointer;user-select:none;border-radius:4px;transition:background .15s}
.ml-photos-cat-label:hover{background:var(--surface-hover,#f3f4f6)}
.ml-photos-cat-label .ml-photos-acc-chevron{font-size:10px}
.ml-photos-cat-count{font-size:11px;font-weight:400;color:var(--text-secondary,#6b7280);margin-left:auto}
.ml-photos-cat-children{padding-left:8px}
.ml-photos-cat-children--collapsed{display:none}
.ml-photos-evt-label{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 14px;font-size:12px;font-weight:600;color:var(--text,#111);cursor:pointer;user-select:none;border-radius:4px;transition:background .15s}
.ml-photos-evt-label:hover{background:var(--surface-hover,#f3f4f6)}
.ml-photos-evt-count{font-size:11px;font-weight:400;color:var(--text-secondary,#6b7280);margin-left:auto}
.ml-photos-evt-actions{display:flex;gap:2px;margin-left:4px}
.ml-photos-evt-action-btn{background:none;border:none;cursor:pointer;padding:2px;color:var(--text-tertiary,#9ca3af);border-radius:3px;display:flex;align-items:center}
.ml-photos-evt-action-btn:hover{color:var(--text,#111);background:var(--surface-hover,#e5e7eb)}
.ml-photos-evt-action-btn--danger:hover{color:#dc2626;background:#fef2f2}
.ml-photos-empty{color:var(--text-secondary,#6b7280);font-size:12px;text-align:center;padding:16px 10px}
.ml-photos-back-row{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--accent,#4f46e5);border-bottom:1px solid var(--border,#e5e7eb);transition:background .15s;user-select:none}
.ml-photos-back-row:hover{background:var(--accent-light,#eef2ff)}
.ml-photos-back-row svg{flex-shrink:0}
.ml-photos-back-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-film-edit-btn{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--c-text-muted,#6b7280);padding:4px;border-radius:var(--radius-sm,4px);display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.ml-film-edit-btn:hover{color:var(--accent,#4f46e5);background:var(--accent-light,#eef2ff)}
/* ── Photo Section Picker (main grid) ─────────────────── */
.ml-photo-sections{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch;padding:48px 24px;box-sizing:border-box}
.ml-photo-section-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;width:240px;height:160px;flex-shrink:0;border-radius:4px 4px 14px 14px;cursor:pointer;transition:all .25s;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.ml-photo-section-card::before{content:'';position:absolute;top:0;left:0;width:40%;height:20px;border-radius:4px 8px 0 0;z-index:1}
.ml-photo-section-card--cat{background:var(--surface,#fff);border:1.5px solid #e5e7eb}
.ml-photo-section-card--cat::before{background:#f59e0b}
.ml-photo-section-card--evt{background:var(--surface,#fff);border:1.5px solid #e5e7eb}
.ml-photo-section-card--evt::before{background:#818cf8}
.ml-photo-section-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:#d1d5db}
.ml-photo-section-body{position:relative;z-index:2;padding:16px 20px;width:100%;margin-top:auto}
.ml-photo-section-icon{margin-bottom:6px}
.ml-photo-section-card--cat .ml-photo-section-icon{color:#d97706}
.ml-photo-section-card--evt .ml-photo-section-icon{color:#6366f1}
.ml-photo-section-title{font-size:17px;font-weight:700;color:var(--text,#111);margin-bottom:2px}
.ml-photo-section-desc{font-size:12px;color:var(--text-secondary,#6b7280);line-height:1.4}
.ml-photo-section-count{position:absolute;top:28px;right:16px;z-index:2;font-size:24px;font-weight:800;color:var(--border,#e5e7eb)}
.ml-photo-section-empty{color:var(--text-secondary,#6b7280);font-size:13px;text-align:center;padding:48px 24px}
.ml-photo-category-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;position:relative;width:170px;height:120px;border-radius:3px 3px 10px 10px;cursor:pointer;transition:all .2s;background:var(--surface,#fff);border:1.5px solid #e5e7eb;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ml-photo-category-tile::before{content:'';position:absolute;top:0;left:0;width:38%;height:14px;border-radius:3px 6px 0 0;background:#f59e0b}
.ml-photo-category-tile:hover{box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:#d1d5db}
.ml-photo-category-tile--event::before{background:#818cf8}
.ml-photo-category-icon{display:none}
.ml-photo-category-name{position:relative;z-index:1;padding:10px 12px;font-size:13px;font-weight:600;color:var(--text,#111);width:100%;text-align:left}
.ml-photo-tile-grid{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;padding:28px 24px;align-content:flex-start}
.ml-photo-section-empty{grid-column:1/-1}
/* ── Gallery Picker Modal ───────────────────────────── */
.ml-galpicker-tabs{display:flex;gap:0;border-bottom:1px solid var(--border,#e5e7eb);margin-bottom:0}
.ml-galpicker-tab{flex:1;padding:10px 0;border:none;background:none;font-size:13px;font-weight:600;color:var(--text-secondary,#6b7280);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.ml-galpicker-tab:hover{color:var(--text,#111)}
.ml-galpicker-tab--active{color:var(--accent,#4f46e5);border-bottom-color:var(--accent,#4f46e5)}
.ml-galpicker-tree{max-height:340px;overflow-y:auto;padding:6px 0;border-bottom:1px solid var(--border,#e5e7eb)}
.ml-galpicker-label{cursor:pointer;transition:background .12s}
.ml-galpicker-label:hover{background:var(--accent-light,#eef2ff)}
.ml-galpicker-label--active{background:var(--accent-light,#eef2ff) !important;box-shadow:inset 3px 0 0 var(--accent,#4f46e5)}
.ml-galpicker-create-row{display:flex;gap:8px;padding:8px 0 0}
.ml-galpicker-create-row .ml-modal-input{flex:1;font-size:13px}
.ml-galpicker-footer-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:8px}

/* --- ML: Film Info Modal ------------------------------------------------- */
.ml-film-info-loading{padding:32px;text-align:center;color:var(--c-text-muted);font-size:13px}
.ml-film-info-tabs{display:flex;gap:0;border-bottom:1px solid var(--c-border)}
.ml-film-info-tab{flex:1;padding:10px 0;border:none;background:none;font-size:13px;font-weight:600;color:var(--c-text-muted,#6b7280);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.ml-film-info-tab:hover{color:var(--c-text)}
.ml-film-info-tab--active{color:var(--c-accent,#4f46e5);border-bottom-color:var(--c-accent,#4f46e5)}
.ml-film-info-content{padding:16px 0 0;overflow-y:auto;max-height:55vh}
.ml-film-detail-form{display:flex;flex-direction:column;gap:12px;padding:0 4px}
.ml-film-field-label{font-size:12px;font-weight:500;color:var(--c-text-muted);margin-bottom:2px}
.ml-film-textarea{resize:vertical;min-height:72px;font-family:inherit}
.ml-film-select{appearance:auto;cursor:pointer}
.ml-film-row{display:flex;gap:16px}
.ml-film-field-half{flex:1;display:flex;flex-direction:column;gap:4px}
.ml-film-toggle{display:flex;border:1px solid var(--c-border);border-radius:var(--radius-sm);overflow:hidden}
.ml-film-toggle-btn{flex:1;padding:6px 10px;border:none;background:none;font-size:12px;font-weight:500;color:var(--c-text-muted);cursor:pointer;transition:background .15s,color .15s}
.ml-film-toggle-btn--active{background:var(--c-accent,#4f46e5);color:#fff}
.ml-film-toggle-btn:not(.ml-film-toggle-btn--active):hover{background:var(--c-surface-hover)}
.ml-film-associated-block{display:flex;flex-direction:column;gap:6px}
.ml-film-associated-card{display:flex;align-items:center;gap:10px;border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:8px;background:var(--c-surface)}
.ml-film-associated-thumb{width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;background:var(--c-surface-hover);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.ml-film-associated-thumb--play{cursor:pointer}
.ml-film-associated-thumb--play:hover .ml-film-play-icon{opacity:1}
.ml-film-associated-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ml-film-play-icon{position:absolute;width:22px;height:22px;color:#fff;opacity:.7;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));transition:opacity .15s;pointer-events:none}
.ml-film-associated-thumb-fallback{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--c-text-muted)}
.ml-film-associated-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.ml-film-associated-name{font-size:12px;font-weight:600;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-film-associated-id{font-size:11px;color:var(--c-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-film-associated-actions{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.ml-film-remove-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--c-text-muted);cursor:pointer;padding:0;transition:color .15s,background .15s}
.ml-film-remove-btn:hover{color:var(--c-danger,#e53e3e);background:rgba(229,62,62,.08)}
.ml-film-remove-btn svg{width:16px;height:16px}
.ml-video-player-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;animation:ml-fade-in .15s ease}
.ml-video-player-wrap{width:90vw;max-width:960px;display:flex;flex-direction:column;gap:0;border-radius:var(--radius-md,8px);overflow:hidden;background:#000}
.ml-video-player-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.06)}
.ml-video-player-title{color:#fff;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ml-video-player-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:24px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0}
.ml-video-player-close:hover{color:#fff}
.ml-video-player-el{width:100%;max-height:70vh;display:block;outline:none}
@keyframes ml-fade-in{from{opacity:0}to{opacity:1}}

/* Film Media Tab */
.ml-film-media-toolbar{display:flex;justify-content:flex-end;padding:0 4px 12px}
.ml-film-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:0 4px}
.ml-film-media-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;padding:48px 24px;text-align:center}
.ml-film-media-empty-text{color:var(--c-text-muted);font-size:14px;line-height:1.6;margin-bottom:20px}
.ml-film-media-empty-btn{margin-top:4px}
.ml-film-media-tile{position:relative;border:1px solid var(--c-border);border-radius:var(--radius-sm);overflow:hidden;cursor:grab;transition:box-shadow .15s,border-color .15s}
.ml-film-media-tile:hover{border-color:var(--c-accent,#4f46e5);box-shadow:0 0 0 1px var(--c-accent,#4f46e5)}
.ml-film-media-tile--dragging{opacity:.4}
.ml-film-media-tile--over{border-color:var(--c-accent,#4f46e5);box-shadow:0 0 0 2px var(--c-accent,#4f46e5)}
.ml-film-media-thumb{position:relative;width:100%;aspect-ratio:1;background:var(--c-surface-hover);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ml-film-media-thumb img{width:100%;height:100%;object-fit:cover}
.ml-film-media-placeholder{font-size:28px;color:var(--c-text-muted);opacity:.5}
.ml-film-media-cover-badge{position:absolute;top:4px;left:4px;background:var(--c-accent,#4f46e5);color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px}
.ml-film-media-type-badge{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 5px;border-radius:var(--radius-sm)}
.ml-film-media-actions{display:flex;justify-content:center;gap:6px;padding:4px 0}
.ml-film-media-action-btn{border:none;background:none;cursor:pointer;color:var(--c-text-muted);padding:3px;border-radius:var(--radius-sm);transition:color .12s,background .12s}
.ml-film-media-action-btn:hover{color:var(--c-accent,#4f46e5);background:var(--c-surface-hover)}
.ml-film-media-action-btn--danger:hover{color:#e11d48;background:rgba(225,29,72,.08)}
.ml-film-media-name{font-size:11px;color:var(--c-text-muted);padding:0 6px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* ── System Health Page ─────────────────────────────────────────── */
.health-page { padding: 24px 32px; max-width: 1200px; }
.health-page-title { font-size: 20px; font-weight: 700; margin: 0 0 24px; color: var(--c-text, #111); }
.health-section { background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 20px; margin-bottom: 20px; }
.health-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.health-section-header h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--c-text, #111); }
.health-incident-filters { display: flex; gap: 8px; }

.health-check-summary { margin-bottom: 12px; }
.health-check-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.health-check-badge--pass { background: #dcfce7; color: #166534; }
.health-check-badge--fail { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .health-check-badge--pass { background: rgba(34,197,94,.15); color: #4ade80; }
[data-theme="dark"] .health-check-badge--fail { background: rgba(239,68,68,.15); color: #f87171; }

.health-check-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.health-card { padding: 12px 14px; border-radius: var(--radius-sm, 6px); border-left: 4px solid; }
.health-card--pass { border-left-color: #22c55e; background: var(--c-surface-hover, #f9fafb); }
.health-card--fail { border-left-color: #ef4444; background: #fef2f2; }
[data-theme="dark"] .health-card--fail { background: rgba(239,68,68,.08); }
.health-card-name { font-size: 13px; font-weight: 600; color: var(--c-text, #111); margin-bottom: 4px; }
.health-card-detail { font-size: 12px; color: var(--c-text-muted, #6b7280); }
.health-card-remedy { font-size: 11px; color: #dc2626; margin-top: 4px; font-style: italic; }

.health-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.health-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--c-border, #e5e7eb); font-weight: 600; color: var(--c-text-muted, #6b7280); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.health-table td { padding: 7px 10px; border-bottom: 1px solid var(--c-border, #e5e7eb); color: var(--c-text, #111); }
.health-table--compact td { padding: 5px 10px; font-size: 12px; }
.health-table-total td { background: var(--c-surface-hover, #f9fafb); }
.health-incident-row { cursor: pointer; transition: background .12s; }
.health-incident-row:hover { background: var(--c-surface-hover, #f3f4f6); }
.health-incident-detail td { background: var(--c-surface-hover, #f9fafb); }
.health-json { font-family: var(--ff-mono, monospace); font-size: 11px; white-space: pre-wrap; word-break: break-all; margin: 0; max-height: 200px; overflow-y: auto; }

.health-sev { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.health-sev--critical { background: #fee2e2; color: #991b1b; }
.health-sev--error { background: #fee2e2; color: #991b1b; }
.health-sev--warning { background: #fef3c7; color: #92400e; }
.health-sev--info { background: #dbeafe; color: #1e40af; }
[data-theme="dark"] .health-sev--critical, [data-theme="dark"] .health-sev--error { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .health-sev--warning { background: rgba(234,179,8,.15); color: #fbbf24; }
[data-theme="dark"] .health-sev--info { background: rgba(59,130,246,.15); color: #60a5fa; }

.health-pagination { margin-top: 12px; font-size: 13px; color: var(--c-text-muted, #6b7280); display: flex; align-items: center; gap: 8px; }
.health-empty { text-align: center; padding: 24px; color: var(--c-text-muted, #6b7280); font-size: 13px; }
.health-db-conn { font-size: 13px; margin-bottom: 14px; color: var(--c-text, #111); }

.health-test-list { display: flex; flex-direction: column; gap: 4px; }
.health-test-item { padding: 8px 12px; border-radius: var(--radius-sm, 6px); font-size: 13px; border-left: 4px solid; }
.health-test-item.health-card--pass { border-left-color: #22c55e; }
.health-test-item.health-card--fail { border-left-color: #ef4444; }
.health-test-status { font-weight: 700; font-family: var(--ff-mono, monospace); font-size: 12px; }