/* ========================================
   HanlanCore OS - Design Tokens
   The quiet creative foundation
   ======================================== */

:root {
    /* ===== Spacing System ===== */
    /* Spacing scale */
    --hanlan-space-xxs: 4px;
    --hanlan-space-xs: 8px;
    --hanlan-space-sm: 10px;
    --hanlan-space-md: 12px;
    --hanlan-space-lg: 16px;
    --hanlan-space-xl: 24px;
    --hanlan-space-xxl: 32px;

    /* Single knob for right-click / context-menu item inner padding */
    --hanlan-context-menu-item-padding: 6px 10px;


    /* ===== Radius ===== */
    --hanlan-radius: 5px;
    --hanlan-radius-sm: 3px;
    --hanlan-radius-md: 5px;
    --hanlan-radius-lg: 8px;
    /* Apple SF design language */

    /* ===== Typography ===== */
    --hanlan-font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hanlan-font-family-mono: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --hanlan-font-size-base: 12px;
    --hanlan-font-size-heading: 11px;
    /* Slightly larger for hierarchy */
    --hanlan-font-weight-regular: 400;
    --hanlan-font-weight-medium: 500;
    --hanlan-font-weight-semibold: 600;

    /* ===== Motion ===== */
    --hanlan-duration: 140ms;
    --hanlan-duration-fast: 120ms;
    --hanlan-duration-normal: 220ms;
    /* Slightly slower for elegance */
    --hanlan-ease: ease-out;
    --hanlan-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Smoother Apple-like ease */
    --hanlan-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    /* Fluid expo curve for modals, panels, reveals */
    --hanlan-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --hanlan-transition-base: 340ms var(--hanlan-ease-in-out);

    /* Transition presets - complete duration + easing combos.
       Tuned for AE plugin feel: snappy hover, deliberate base, real slow tier. */
    --hanlan-transition-fast: 150ms ease;
    --hanlan-transition-normal: 250ms ease;
    --hanlan-transition-slow: 400ms ease;
    --hanlan-transition-collapse: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Shadows ===== */
    --hanlan-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
    --hanlan-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    --hanlan-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
    --hanlan-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    /* Raised surface with subtle inset highlight for glass-like depth */
    --hanlan-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, 0.05);

    /* ===== Colors - Dark Theme (default) ===== */
    --hanlan-color-bg-panel: #1e1e1e;
    --hanlan-color-bg-elevated: #282828;
    --hanlan-color-bg-input: #272727;
    --hanlan-color-bg-secondary: #303030;
    --hanlan-color-bg-hover: #323232;
    --hanlan-color-bg-header: rgba(0, 0, 0, 0.25);
    --hanlan-color-bg-header-strong: rgba(0, 0, 0, 0.45);
    --hanlan-color-bg-inset: rgba(0, 0, 0, 0.25);
    --hanlan-color-bg-row-alt: rgba(255, 255, 255, 0.015);
    --hanlan-color-bg-active: rgba(0, 0, 0, 0.18);
    --hanlan-color-bg-button: var(--hanlan-color-bg-input);
    --hanlan-color-bg-button-hover: var(--hanlan-color-bg-hover);
    --hanlan-button-border: transparent;
    --hanlan-button-border-hover: transparent;
    --hanlan-color-border: rgba(255, 255, 255, 0.25);
    /* Stronger, more evident borders (Adobe-like) */
    --hanlan-color-border-strong: rgba(255, 255, 255, 0.50);

    /* ===== Border Tokens ===== */
    --hanlan-border: 1px solid var(--hanlan-color-border);
    --hanlan-border-hover: 1px solid var(--hanlan-color-border-strong);
    --hanlan-border-accent: 1px solid var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    --hanlan-divider-width: 1px;
    --hanlan-divider-color: var(--hanlan-control-border);
    --hanlan-divider: var(--hanlan-divider-width) solid var(--hanlan-divider-color);

    --hanlan-color-text: rgba(255, 255, 255, 0.94);
    --hanlan-color-text-secondary: rgba(255, 255, 255, 0.70);
    --hanlan-color-text-muted: rgba(255, 255, 255, 0.62);
    --hanlan-color-text-label: var(--hanlan-color-text-muted);
    --hanlan-color-text-subtle: rgba(255, 255, 255, 0.38);
    /* Fourth tier: placeholders, disabled labels, metadata */
    --hanlan-color-accent: var(--hanlan-gradient-first-color, #6b8afd);
    /* Accent-derived states via color-mix - auto-adapts to any plugin accent
       Static rgba fallbacks are for AE 2020-2022 (Chromium <111, no color-mix).
       On newer AE the color-mix declaration below wins via cascade. */
    --hanlan-color-accent-subtle: rgba(245, 166, 35, 0.15);
    --hanlan-color-accent-subtle: color-mix(in srgb, var(--hanlan-color-accent) 15%, transparent);
    --hanlan-color-accent-glow: rgba(245, 166, 35, 0.25);
    --hanlan-color-accent-glow: color-mix(in srgb, var(--hanlan-color-accent) 25%, transparent);
    --hanlan-color-green: #34c759;
    --hanlan-color-red: #ff3b30;
    --hanlan-color-yellow: #ffb800;
    --hanlan-color-blue: #357ae8;

    /* Semantic color aliases */
    --hanlan-color-success: var(--hanlan-color-green);
    --hanlan-color-error: var(--hanlan-color-red);
    --hanlan-color-warning: var(--hanlan-color-yellow);
    --hanlan-color-info: var(--hanlan-color-blue);
    --hanlan-color-destructive: var(--hanlan-color-error);

    /* ===== Prism — State & Component Tokens ===== */
    /* Opacity tokens for disabled/inactive states */
    --hanlan-opacity-disabled: 0.4;
    --hanlan-saturation-disabled: 0.6;
    --hanlan-opacity-icon-inactive: 0.7;
    --hanlan-opacity-icon-active: 1;

    /* Focus ring (accent-derived, graduated opacity) — rgba fallbacks for AE 2020-2022 */
    --hanlan-color-focus-ring-sm: rgba(245, 166, 35, 0.15);
    --hanlan-color-focus-ring-sm: color-mix(in srgb, var(--hanlan-color-accent) 15%, transparent);
    --hanlan-color-focus-ring: rgba(245, 166, 35, 0.25);
    --hanlan-color-focus-ring: color-mix(in srgb, var(--hanlan-color-accent) 25%, transparent);
    --hanlan-color-focus-ring-lg: rgba(245, 166, 35, 0.4);
    --hanlan-color-focus-ring-lg: color-mix(in srgb, var(--hanlan-color-accent) 40%, transparent);

    /* Brightness-adaptive tokens (overridden by detectTheme at runtime) */
    --hanlan-color-scrollbar: transparent;
    --hanlan-color-scrollbar-hover: rgba(255, 255, 255, 0.25);
    --hanlan-color-scrollbar-active: rgba(255, 255, 255, 0.45);
    --cor-tab-scrollbar-edge-inset: 1px;
    --cor-tab-scrollbar-width-idle: 3px;
    --cor-tab-scrollbar-width-hover: 5px;
    --cor-tab-scrollbar-track-width: 6px;
    --cor-tab-scrollbar-thumb-idle: transparent;
    --cor-tab-scrollbar-thumb-hover: var(--hanlan-color-scrollbar-hover);
    --cor-tab-scrollbar-thumb-active: var(--hanlan-color-scrollbar-active);
    --cor-tab-scrollbar-idle-left-inset: calc(var(--cor-tab-scrollbar-track-width) - var(--cor-tab-scrollbar-width-idle) - var(--cor-tab-scrollbar-edge-inset));
    --cor-tab-scrollbar-hover-left-inset: calc(var(--cor-tab-scrollbar-track-width) - var(--cor-tab-scrollbar-width-hover) - var(--cor-tab-scrollbar-edge-inset));
    --cor-tab-scrollbar-content-gutter: 0px;
    --hanlan-color-bg-code: rgba(0, 0, 0, 0.2);
    --hanlan-color-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    /* ===== Glass Tokens (dark theme defaults) =====
       Readable-glass calibration (APR 8):
       - glass-bg: 5% white — subtle frost, composites to ~#2a over panel
         (old rgba(30,30,30,0.25) was a no-op — same color as panel)
       - glass-border: 33% white — rim hits WCAG 1.4.11 3:1 against #1e1e1e
         (rim = ~#686868 composited, the visible edge of modals/dropdowns)
       - glass-border-strong: 50% white — hover/focus rim (~#8f8f8f composited) */
    --hanlan-glass-bg: rgba(255, 255, 255, 0.05);
    --hanlan-glass-bg-light: rgba(255, 255, 255, 0.78);
    --hanlan-menu-surface-bg: var(--hanlan-glass-bg);
    --hanlan-menu-surface-border: var(--hanlan-glass-border);
    --hanlan-menu-text: var(--hanlan-color-text);
    --hanlan-menu-hover-bg: var(--hanlan-color-bg-hover);
    --hanlan-menu-hover-text: var(--hanlan-color-text);
    --hanlan-glass-border: rgba(255, 255, 255, 0.33);
    --hanlan-glass-border-strong: rgba(255, 255, 255, 0.50);
    --hanlan-glass-border-light: rgba(0, 0, 0, 0.22);
    --hanlan-control-border: var(--hanlan-color-border);
    --hanlan-control-border-strong: var(--hanlan-color-border-strong);
    --hanlan-glass-blur: 8px;
    /* Refined blur for depth */
    --hanlan-glass-backdrop: rgba(0, 0, 0, 0.3);
    /* Multi-layer shadow for glass depth.
       First layer is a 1px rim using --hanlan-glass-border — this acts
       as a "fake border" that renders outside the element's mask, so
       scroll-fade alpha masks never clip the visible boundary. */
    --hanlan-glass-shadow:
        0 0 0 1px var(--hanlan-glass-border),
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* ===== COR Plugin Identity ===== */
    --hanlan-plugin-gradient: linear-gradient(180deg, #f5a623 0%, #f57c00 100%);
    --hanlan-plugin-gradient-hover: linear-gradient(180deg, #ffb84d 0%, #ff8c1a 100%);
    --hanlan-plugin-accent: #f5a623;
    --hanlan-gradient-first-color: #f5a623;
    --hanlan-gradient-second-color: #f57c00;
    --hanlan-plugin-gradient-first-color-hover: #ffb84d;
    /* Text color used on top of accent/gradient backgrounds (active states, destructive buttons) */
    --hanlan-color-text-on-accent: #ffffff;

    /* Accent-tinted token chip states (CSV columns, data-source tokens).
       Single source of truth — chip rules reference these vars.
       Literal rgba because CEP's Chromium predates color-mix(). */
    --hanlan-token-featured-bg: rgba(245, 166, 35, 0.14);
    --hanlan-token-featured-bg-hover: rgba(245, 166, 35, 0.22);
    --hanlan-token-featured-border: rgba(245, 166, 35, 0.55);
    --hanlan-smart-naming-token-gap: 6px;
    --cor-v11-gap: 6px;
    --cor-v11-stack-gap: var(--hanlan-space-xs);
    --cor-v11-section-gap: var(--hanlan-space-xs);
    --cor-v11-action-height: var(--hanlan-control-height);
    --cor-v11-field-height: 30px;
    --cor-v11-action-padding-x: var(--hanlan-space-sm);
    --cor-v11-row-padding: var(--cor-v11-gap) var(--cor-v11-section-gap);
    --cor-v11-cell-padding: var(--cor-v11-gap) var(--hanlan-space-sm);

    /* ===== Control Height ===== */
    --hanlan-control-height: 26px;
    --hanlan-control-visual-size: 60px; /* 2 rows (26px) + gap (8px) = 60px for visual controls */
    --hanlan-icon-size: 14px;

    /* ===== Z-Index Layers ===== */
    --hanlan-z-dropdown: 1000;
    --hanlan-z-toolbar: 1100;
    --hanlan-z-side-panel: 1200;
    --hanlan-z-modal-backdrop: 3000;
    --hanlan-z-modal: 3100;
    --hanlan-z-context-menu: 3600;
    --hanlan-z-color-picker: 10100;
    --hanlan-z-toast: 3400;
    --hanlan-z-tooltip: 3500;
    --hanlan-z-always-on-top: 3600;
    --hanlan-z-loading: 5000;

    /* ===== Modal Sizing ===== */
    --hanlan-modal-min-width: 340px;
    --hanlan-modal-width: 500px;
    --hanlan-modal-max-width: 620px;
    --hanlan-modal-padding: 12px;
    --hanlan-modal-footer-padding: 10px;        /* Tighter vertical padding for fixed footer buttons */
    --hanlan-modal-inner-radius: calc(var(--hanlan-radius) - 1px);
    --hanlan-modal-edge-shadow-top: 0 2px 8px rgba(0, 0, 0, 0.15);
    --hanlan-modal-edge-shadow-bottom: 0 -2px 8px rgba(0, 0, 0, 0.15);
    --hanlan-modal-footer-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);

    /* ===== Modal Content Spacing ===== */
    --hanlan-section-gap-above: 20px;           /* Space before section title */
    --hanlan-section-gap-below: 10px;           /* Space after section title before content */

    /* ===== Positioning & Overlay Tokens ===== */
    --hanlan-menu-gap: 8px;
    --hanlan-menu-margin: 8px;
    --hanlan-menu-max-width: 450px;
    --hanlan-menu-max-height: 80vh;
    --hanlan-dropdown-max-height: 200px;
    --hanlan-tooltip-offset: 8px;
    --hanlan-tooltip-max-width: 250px;
    --hanlan-color-bg-tooltip: var(--hanlan-color-bg-secondary);
    --hanlan-tooltip-bg: var(--hanlan-color-bg-tooltip);
    --hanlan-tooltip-border: var(--hanlan-control-border);
    --hanlan-tooltip-text: var(--hanlan-color-text);
}

/* ===== Scrollbar (unified: 6px, subtle idle, lighter on hover) ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Visible on container hover or JS-flagged */
.hanlan-scrollbar-visible::-webkit-scrollbar-thumb,
*:hover > ::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb {
    background-color: var(--hanlan-color-scrollbar-hover);
}

/* Thumb hovered/active — lighter */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--hanlan-color-scrollbar-active) !important;
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--hanlan-color-scrollbar-active) !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    user-select: none;
    -webkit-user-select: none;
}

*:hover {
    scrollbar-color: var(--hanlan-color-scrollbar-hover) transparent;
}

/* Universal smooth transitions for all interactive elements */
button, a, summary,
[class*="hanlan-btn"],
[class*="hanlan-tab"],
[class*="hanlan-modal-close"],
[class*="hanlan-accordion-header"],
[class*="hanlan-token"],
[class*="hanlan-sort"],
[class*="hanlan-filter"],
[class*="disclosure-header"],
[class*="separator-option"],
[class*="export-format"],
[class*="empty-state-cta"],
[class*="empty-state-icon"],
[class*="color-picker"],
[class*="color-trigger"],
[class*="overflow-chevron"],
[class*="info-icon"],
[class*="drag-handle"],
[class*="aspect-lock"],
[class*="smart-list-item"],
[class*="anchor-grid"],
[class*="alignment-grid"],
[class*="responsive-grid-item"],
[class*="search-filter-item"] {
    transition: color var(--hanlan-transition-fast), background-color var(--hanlan-transition-fast), border-color var(--hanlan-transition-fast), opacity var(--hanlan-transition-fast), box-shadow var(--hanlan-transition-fast), transform var(--hanlan-transition-fast), filter var(--hanlan-transition-fast);
}

.hanlan-scrollbar-visible {
    scrollbar-color: var(--hanlan-color-scrollbar-active) transparent;
}

/* ===== Scroll Fade Affordance =====
   Theme-independent alpha mask. JS sets data-fade-top / data-fade-bottom /
   data-fade-left / data-fade-right based on scroll position. CSS reads
   those attributes to apply a mask-image that fades only the relevant
   edges. No colors involved → works perfectly in any theme/container. */
.hanlan-scroll-fade {
    position: relative;
    --hanlan-scroll-fade-size: 24px;
    --hanlan-scroll-fade-inset-left: 0px;
    --hanlan-scroll-fade-inset-right: 0px;
    --hanlan-scroll-fade-inset-top: 0px;
    --hanlan-scroll-fade-inset-bottom: 0px;
    --hanlan-scroll-fade-opacity: 1;
    --hanlan-scroll-fade-transition: opacity var(--hanlan-duration-normal) var(--hanlan-ease-out),
        mask-image var(--hanlan-duration-normal) var(--hanlan-ease-out),
        -webkit-mask-image var(--hanlan-duration-normal) var(--hanlan-ease-out);
    /* Mask affects content area only — border stays fully visible.
       Without this, the scroll-fade mask clips the top/bottom borders. */
    -webkit-mask-clip: padding-box;
    mask-clip: padding-box;
}

/* Vertical fade — top edge only */
.hanlan-scroll-fade[data-fade-top]:not([data-fade-bottom]) {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        black var(--hanlan-scroll-fade-size),
        black 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0,
        black var(--hanlan-scroll-fade-size),
        black 100%);
}

/* Vertical fade — bottom edge only */
.hanlan-scroll-fade[data-fade-bottom]:not([data-fade-top]) {
    -webkit-mask-image: linear-gradient(to bottom,
        black 0,
        black calc(100% - var(--hanlan-scroll-fade-size)),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        black 0,
        black calc(100% - var(--hanlan-scroll-fade-size)),
        transparent 100%);
}

/* Vertical fade — both edges */
.hanlan-scroll-fade[data-fade-top][data-fade-bottom] {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        black var(--hanlan-scroll-fade-size),
        black calc(100% - var(--hanlan-scroll-fade-size)),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0,
        black var(--hanlan-scroll-fade-size),
        black calc(100% - var(--hanlan-scroll-fade-size)),
        transparent 100%);
}

.hanlan-scroll-fade__overlay {
    position: sticky;
    pointer-events: none;
    opacity: 0;
    transition: var(--hanlan-scroll-fade-transition);
    will-change: opacity;
    border-radius: inherit;
    z-index: 10;
    flex: none;
}

.hanlan-scroll-fade__overlay.is-visible {
    opacity: var(--hanlan-scroll-fade-opacity);
}

.hanlan-scroll-fade__top,
.hanlan-scroll-fade__bottom {
    left: 0;
    right: 0;
    width: calc(100% + var(--hanlan-scroll-fade-inset-left) + var(--hanlan-scroll-fade-inset-right));
    margin-left: calc(-1 * var(--hanlan-scroll-fade-inset-left));
    margin-right: calc(-1 * var(--hanlan-scroll-fade-inset-right));
    height: var(--hanlan-scroll-fade-size);
}

.hanlan-scroll-fade__top {
    top: 0;
    margin-bottom: calc(-1 * var(--hanlan-scroll-fade-size));
    /* No background — fade is handled by the container's mask-image */
}

.hanlan-scroll-fade__bottom {
    bottom: 0;
    margin-top: calc(-1 * var(--hanlan-scroll-fade-size));
    /* No background — fade is handled by the container's mask-image */
}

.hanlan-scroll-fade__left,
.hanlan-scroll-fade__right {
    top: 0;
    bottom: 0;
    height: calc(100% + var(--hanlan-scroll-fade-inset-top) + var(--hanlan-scroll-fade-inset-bottom));
    margin-top: calc(-1 * var(--hanlan-scroll-fade-inset-top));
    margin-bottom: calc(-1 * var(--hanlan-scroll-fade-inset-bottom));
    width: var(--hanlan-scroll-fade-size);
}

.hanlan-scroll-fade__left {
    left: 0;
    margin-right: calc(-1 * var(--hanlan-scroll-fade-size));
    /* No background — fade is handled by the container's mask-image */
}

.hanlan-scroll-fade__right {
    right: 0;
    margin-left: calc(-1 * var(--hanlan-scroll-fade-size));
    /* No background — fade is handled by the container's mask-image */
}

/* ===== Selection ===== */
::selection {
    background: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
    color: #ffffff;
}

/* ===== Dark Theme ===== */
/* Fallback values used before detectTheme() runs OR if JS detection fails.
   APR 8 readable-glass pass: surface ladder widened (matching JS offsets in
   ui.js ~L474-493), borders bumped to hit WCAG 1.4.11 3:1, muted text lifted
   from #888 (3.56–4.22 contrast) to #a0a0a0 (~5.5) for AA compliance. */
body.hanlan_theme_dark {
    --hanlan-color-bg-panel: #1e1e1e;
    --hanlan-color-bg-elevated: #2c2c2c;
    --hanlan-color-bg-input: #3b3b3b;
    --hanlan-color-bg-secondary: #303030;
    --hanlan-color-bg-hover: #494949;
    --hanlan-color-bg-header: #343434;
    --hanlan-color-bg-header-strong: #2c2c2c;
    --hanlan-color-bg-inset: #303030;
    --hanlan-color-bg-row-alt: rgba(255, 255, 255, 0.015);
    --hanlan-color-bg-active: #2c2c2c;
    --hanlan-color-bg-button: var(--hanlan-color-bg-input);
    --hanlan-color-bg-button-hover: var(--hanlan-color-bg-hover);
    --hanlan-button-border: transparent;
    --hanlan-button-border-hover: transparent;
    --hanlan-color-border: #686868;
    --hanlan-color-border-strong: #808080;
    --hanlan-color-text: #e5e5e5;
    --hanlan-color-text-secondary: #b5b5b5;
    --hanlan-color-text-muted: #a0a0a0;
    --hanlan-color-text-label: var(--hanlan-color-text-muted);
    --hanlan-color-text-subtle: #6a6a6a;
    --hanlan-glass-bg: rgba(30, 30, 30, 0.75);
    --hanlan-floating-surface-bg: var(--hanlan-color-bg-elevated);
    --hanlan-menu-surface-bg: rgba(44, 44, 44, 0.96);
    --hanlan-menu-surface-border: var(--hanlan-glass-border);
    --hanlan-menu-text: var(--hanlan-color-text);
    --hanlan-menu-hover-bg: var(--hanlan-color-bg-hover);
    --hanlan-menu-hover-text: var(--hanlan-color-text);
    --hanlan-modal-shelf-bg: #252525;
    --hanlan-modal-edge-shadow-top: 0 2px 8px rgba(0, 0, 0, 0.15);
    --hanlan-modal-edge-shadow-bottom: 0 -2px 8px rgba(0, 0, 0, 0.15);
    --hanlan-modal-footer-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    --hanlan-control-border: rgba(255, 255, 255, 0.22);
    --hanlan-control-border-strong: rgba(255, 255, 255, 0.34);
    --hanlan-color-bg-tooltip: var(--hanlan-color-bg-secondary);
    --hanlan-tooltip-bg: var(--hanlan-color-bg-tooltip);
    --hanlan-tooltip-border: var(--hanlan-control-border);
    --hanlan-tooltip-text: var(--hanlan-color-text);
    --hanlan-divider-color: var(--hanlan-control-border);
    --hanlan-divider: var(--hanlan-divider-width) solid var(--hanlan-divider-color);
}

/* ===== Light Theme ===== */
/* APR 8 readable-glass pass: mirror of dark ladder calibration.
   Surfaces step darker from panel (inputs recessed, modals kept at white
   for max lift). Borders bumped to hit WCAG 1.4.11 3:1. Text-muted lifted. */
body.hanlan_theme_light {
    --hanlan-color-bg-panel: #f5f5f5;
    --hanlan-color-bg-elevated: #ffffff;
    --hanlan-color-bg-input: #e9e9e9;
    --hanlan-color-bg-secondary: #e1e1e1;
    --hanlan-color-bg-hover: #d9d9d9;
    --hanlan-color-bg-header: #cbcbcb;
    --hanlan-color-bg-header-strong: #bfbfbf;
    --hanlan-color-bg-inset: #e1e1e1;
    --hanlan-color-bg-row-alt: rgba(0, 0, 0, 0.025);
    --hanlan-color-bg-active: #dddddd;
    --hanlan-color-bg-button: #eeeeee;
    --hanlan-color-bg-button-hover: #dddddd;
    --hanlan-button-border: rgba(0, 0, 0, 0.16);
    --hanlan-button-border-hover: rgba(0, 0, 0, 0.30);
    --hanlan-color-border: #9f9f9f;
    --hanlan-color-border-strong: #797979;
    --hanlan-color-text: #1a1a1a;
    --hanlan-color-text-secondary: #444444;
    --hanlan-color-text-muted: #5a5a5a;
    --hanlan-color-text-label: var(--hanlan-color-text-secondary);
    --hanlan-color-text-subtle: #8a8a8a;
    --hanlan-color-destructive: #dc2626;
    --hanlan-color-bg-code: rgba(0, 0, 0, 0.06);
    --hanlan-color-text-shadow: none;
    --hanlan-modal-shelf-bg: #ffffff;
    --hanlan-color-scrollbar: transparent;
    --hanlan-color-scrollbar-hover: rgba(0, 0, 0, 0.15);
    --hanlan-color-scrollbar-active: rgba(0, 0, 0, 0.3);
    /* Glass tokens — light theme.
       Mirror of dark glass. Rim intentionally matches the footer divider
       opacity (~rgba(0,0,0,0.37) → composites to ~#9b9b9b on panel) so
       all 1px borders feel uniform across the plugin. Strong rim a hair
       darker for focus/hover. Trades a bit of WCAG 1.4.11 strictness
       (~2.5:1 vs 3:1 target) for visual consistency with the rest of the
       plugin's border language. */
    --hanlan-glass-bg: rgba(255, 255, 255, 0.64);
    --hanlan-floating-surface-bg: var(--hanlan-color-bg-elevated);
    --hanlan-menu-surface-bg: rgba(235, 235, 235, 0.98);
    --hanlan-menu-surface-border: rgba(0, 0, 0, 0.34);
    --hanlan-menu-text: var(--hanlan-color-text);
    --hanlan-menu-hover-bg: var(--hanlan-color-bg-hover);
    --hanlan-menu-hover-text: var(--hanlan-color-text);
    --hanlan-glass-border: rgba(0, 0, 0, 0.37);
    --hanlan-glass-border-strong: rgba(0, 0, 0, 0.52);
    --hanlan-control-border: rgba(0, 0, 0, 0.24);
    --hanlan-control-border-strong: rgba(0, 0, 0, 0.36);
    --hanlan-modal-edge-shadow-top: 0 1px 0 rgba(0, 0, 0, 0.10);
    --hanlan-modal-edge-shadow-bottom: 0 -1px 0 rgba(0, 0, 0, 0.10);
    --hanlan-modal-footer-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08);
    --hanlan-color-bg-tooltip: var(--hanlan-color-bg-hover);
    --hanlan-tooltip-bg: var(--hanlan-color-bg-tooltip);
    --hanlan-tooltip-border: var(--hanlan-control-border-strong);
    --hanlan-tooltip-text: var(--hanlan-color-text);
    --hanlan-divider-color: var(--hanlan-control-border);
    --hanlan-divider: var(--hanlan-divider-width) solid var(--hanlan-divider-color);
    --hanlan-glass-shadow:
        0 0 0 1px var(--hanlan-glass-border),
        0 6px 20px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
    /* Softer hierarchical shadows for light theme */
    --hanlan-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --hanlan-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --hanlan-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   Global Focus Ring (WCAG 2.4.7 Focus Visible)
   -----------------------------------------------------------
   Rule: :focus-visible outlines automatically clip to the
   target element's own border-radius in modern Chromium
   (which CEP uses). Never set border-radius here — it must
   come from the element so pills stay pills, circles stay
   circles, rects stay rects. See DESIGN.md §Focus Rings.
   ========================================================= */
:focus-visible {
    outline: 2px solid var(--hanlan-plugin-accent, var(--hanlan-color-accent));
    outline-offset: 2px;
}

/* Accessibility Mode — amplified focus ring (thicker) */
body.hanlan-accessibility-mode *:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
}

/* ========================================
   Base Reset
   ======================================== */

/* ========================================
   Base Reset (Aggressive / Zero Fallback)
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* SVGs inherit text color so they theme-swap correctly.
   Dark theme: near-white icons. Light theme: near-black icons.
   Stroke follows currentColor; fill must still be opted in per-element. */
svg {
    color: var(--hanlan-color-text);
    stroke: currentColor;
}

/* Opt-in class for SVG images that need forced white */
img.hanlan-icon-white {
    filter: brightness(0) invert(1);
}

*:focus:not(:focus-visible) {
    outline: none;
}
/* Duplicate *:focus-visible removed — canonical rule lives at top of file.
   Do NOT re-add border-radius here. See DESIGN.md §Focus Rings. */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--hanlan-color-bg-panel);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    line-height: 1.4;
    user-select: none;
    /* App-like feel by default */
    cursor: default;
}

/* Allow text selection in specific areas if needed, but default to app-like */
input,
textarea,
[contenteditable] {
    user-select: text;
    cursor: text;
}

/* ========================================
   Panel Layout System
   Universal container for CEP panel UIs
   ======================================== */

.hanlan-panel {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--hanlan-space-md);
    padding-bottom: 0;
    gap: var(--hanlan-space-md);
    box-sizing: border-box;
}

.hanlan-panel-header {
    flex-shrink: 0;
    margin-bottom: var(--hanlan-space-sm);
}

.hanlan-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: var(--hanlan-font-weight-semibold);
    color: var(--hanlan-color-text);
}

.hanlan-panel-content {
    flex: 1;
    min-height: 0; /* Allow shrinking for overflow scroll */
}

/* Scrollable content variant */
.hanlan-panel-content--scroll {
    overflow-y: overlay;
}

/* ========================================
   Tag-Level Typography (Zero Fallback)
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--hanlan-font-family-base);
    font-weight: var(--hanlan-font-weight-medium);
    color: var(--hanlan-color-text);
    margin: 0 0 var(--hanlan-space-sm) 0;
    line-height: 1.2;
}

h1 {
    font-size: 18px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

h4 {
    font-size: 12px;
    font-weight: 600;
}

h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--hanlan-color-text-muted);
}

h6 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--hanlan-color-text-muted);
}

p {
    margin: 0 0 var(--hanlan-space-md) 0;
    font-size: var(--hanlan-font-size-base);
    color: var(--hanlan-color-text);
}

a {
    color: var(--hanlan-color-accent);
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--hanlan-transition-base);
}

a:hover {
    opacity: 0.8;
}

code,
pre {
    font-family: var(--hanlan-font-family-mono);
    font-size: 11px;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 4px;
    border-radius: 3px;
}

ul,
ol {
    margin: 0 0 var(--hanlan-space-md) var(--hanlan-space-lg);
    padding: 0;
}

li {
    margin-bottom: var(--hanlan-space-sm);
    /* MANDATORY: 8px spacing between list items */
}

hr {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: var(--hanlan-space-md) 0;
}

/* ========================================
   FOUC Prevention - Universal
   Start hidden, fade in when ready
   ======================================== */

body {
    opacity: 0;
    transition: opacity 120ms var(--hanlan-ease-out);
}

body.hanlan-ready {
    opacity: 1;
}

.hanlan-main-wrapper {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.90);
    transform-origin: center center;
    transition:
        opacity 340ms var(--hanlan-ease-out),
        transform 560ms var(--hanlan-ease-out-expo);
}

body.hanlan-ready:not(.hanlan-licensing-pending) .hanlan-main-wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.hanlan-main-wrapper::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--hanlan-control-height) + (var(--hanlan-space-md) * 2));
    height: var(--hanlan-divider-width);
    background: var(--hanlan-divider-color);
    pointer-events: none;
    z-index: calc(var(--hanlan-z-toolbar, 1100) - 1);
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .hanlan-main-wrapper {
        transform: none;
        transition: opacity 160ms var(--hanlan-ease-out);
    }
}

/* ========================================
   App Container
   ======================================== */

.hanlan_app {
    width: 100%;
    height: 100%;
    background-color: var(--hanlan-color-bg-panel);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    color: var(--hanlan-color-text);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Layout Utilities
   ======================================== */

.hanlan_panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--hanlan-color-bg-panel);
}

.hanlan_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--hanlan-space-sm);
}

.hanlan_col {
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-sm);
}

/* Section spacing - 16px breathing room between major sections */
.hanlan-section {
    margin-bottom: var(--hanlan-space-lg);
}

.hanlan-section:last-child {
    margin-bottom: 0;
}

/* Section group container for consistent item spacing */
.hanlan-section-group {
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-sm);  /* 8px between items in a group */
}

/* Icon optical alignment utilities */
.hanlan-icon-nudge-up {
    transform: translateY(-1px);
}

.hanlan-icon-nudge-down {
    transform: translateY(1px);
}

.hanlan-icon-nudge-left {
    transform: translateX(-1px);
}

.hanlan-icon-nudge-right {
    transform: translateX(1px);
}

/* ========================================
   Typography Utilities
   ======================================== */

.hanlan_text {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-regular);
    color: var(--hanlan-color-text);
    line-height: 1.4;
}

.hanlan_heading,
.hanlan-title {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-heading) !important;
    font-weight: var(--hanlan-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--hanlan-color-text);
    line-height: 1.4;
    /* Flex-friendly truncation: fills available space, truncates only under real pressure */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Universal section title styling - ensure 10px uppercase for major section titles */
.hanlan_heading,
[class*="hanlan"][class*="heading"],
[class*="hanlan"][class*="title"]:not([class*="subtitle"]):not([class*="small"]):not([class*="body"]) {
    font-size: var(--hanlan-font-size-heading) !important;
    /* Flex-friendly truncation: fills available space, truncates only under real pressure */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure section titles using h3 are 10px when they should be headings */
section>h3.hanlan_heading,
section>.hanlan_heading h3,
.hanlan_heading h3 {
    font-size: var(--hanlan-font-size-heading) !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    /* Flex-friendly truncation: fills available space, truncates only under real pressure */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Standardized section title spacing for modals and panels */
.hanlan-section-title {
    /* Inherits all heading styles from .hanlan_heading */
    margin-top: var(--hanlan-section-gap-above);
    margin-bottom: var(--hanlan-section-gap-below);
}

.hanlan-section-title:first-child {
    margin-top: 0;  /* No top margin for first section */
}

/* Header row with title/count and action buttons */
.hanlan-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hanlan-space-xs);  /* 8px */
}

/* Headings inside flex rows don't need their own margin-bottom — the row handles spacing */
.hanlan-section-header-row .hanlan_heading,
.modal-form-row--header .hanlan_heading {
    margin-bottom: 0;
}

/* Inline labels (in flex rows) shouldn't have bottom margin either */
.row .label[style*="margin-bottom"],
.row > .label {
    margin-bottom: 0;
}

/* Input wrappers in flex rows don't need extra margin */
.hanlan-input-wrapper:has(> .hanlan-input + button),
.row > .hanlan-input-wrapper {
    margin-bottom: 0;
}

/* Search input clear-X — only on inputs that are search-style. The X
   appears when the input has a value (placeholder no longer shown). Click
   clears the input and dispatches an `input` event so listening filter
   logic refreshes the list. */
.hanlan-search-wrap {
    position: relative;
}

.hanlan-search-wrap > .hanlan-input {
    padding-right: 28px;
}

.hanlan-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: 0;
    color: var(--hanlan-color-text-muted);
    font-size: 18px;
    font-family: var(--hanlan-font-family-base);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background var(--hanlan-transition-base), color var(--hanlan-transition-base);
}

.hanlan-search-wrap > .hanlan-input:not(:placeholder-shown) ~ .hanlan-search-clear {
    display: flex;
}

.hanlan-search-clear:hover {
    background: var(--hanlan-color-bg-hover);
    color: var(--hanlan-color-text);
}

.hanlan-search-clear:active {
    background: var(--hanlan-color-bg-elevated);
}

/* Content block spacing - for related content within a section */
.hanlan-content-block {
    margin-bottom: var(--hanlan-space-lg);  /* 16px between content blocks */
}

.hanlan-content-block:last-child {
    margin-bottom: 0;
}

/* ========================================
   Parenthetical Text (Hint/Clarifying Text)
   Use .hanlan-hint to wrap any text in brackets/parentheses
   Hard rule: ALL parenthetical text MUST be italicized
   ======================================== */

.hanlan-hint {
    font-style: italic;
    color: var(--hanlan-color-text-muted);
}

/* Override muted/secondary text to white when inside active/gradient items */
.hanlan-context-menu-item:hover .hanlan-hint,
.hanlan-context-menu-item.gradient-hover .hanlan-hint,
.hanlan-dropdown-item--active .hanlan-hint,
.hanlan-filter-menu-item--active .hanlan-hint,
.hanlan-sort-menu-item--active .hanlan-hint,
.hanlan-tab--active .hanlan-hint,
.hanlan-segmented-item--active .hanlan-hint,
.hanlan-toast-success .hanlan-hint,
.hanlan-toast-error .hanlan-hint {
    color: rgba(255, 255, 255, 1);
}

/* ========================================
   Universal Italicized Text Rule
   Hard rule: ALL italicized text in colored containers MUST be pure white
   This includes: toasts, primary buttons, gradients, active states
   ======================================== */

/* All italicized text in colored containers */
.hanlan-btn--primary em,
.hanlan-btn--primary i,
.hanlan-btn--primary [style*="font-style: italic"],
.hanlan-toast em,
.hanlan-toast i,
.hanlan-toast [style*="font-style: italic"],
.hanlan-toast-success em,
.hanlan-toast-success i,
.hanlan-toast-success [style*="font-style: italic"],
.hanlan-toast-error em,
.hanlan-toast-error i,
.hanlan-toast-error [style*="font-style: italic"],
.hanlan-toast-warning em,
.hanlan-toast-warning i,
.hanlan-toast-warning [style*="font-style: italic"],
.hanlan-toast-info em,
.hanlan-toast-info i,
.hanlan-toast-info [style*="font-style: italic"],
.hanlan-context-menu-item:hover em,
.hanlan-context-menu-item:hover i,
.hanlan-context-menu-item.gradient-hover em,
.hanlan-context-menu-item.gradient-hover i,
.hanlan-dropdown-item--active em,
.hanlan-dropdown-item--active i,
.hanlan-filter-menu-item--active em,
.hanlan-filter-menu-item--active i,
.hanlan-sort-menu-item--active em,
.hanlan-sort-menu-item--active i,
.hanlan-tab--active em,
.hanlan-tab--active i,
.hanlan-segmented-item--active em,
.hanlan-segmented-item--active i {
    color: rgba(255, 255, 255, 1) !important;
}

/* ========================================
   Truncation Utility
   ======================================== */

.hanlan-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Truncation utility for flex containers (requires min-width: 0 on parent) */
.hanlan-truncate-flex {
    min-width: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Full-width truncation - takes entire available width */
.hanlan-truncate-full {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flex container full-width truncation */
.hanlan-truncate-flex-full {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multi-line truncation (2 lines with ellipsis) */
.hanlan-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-line truncation (3 lines with ellipsis) */
.hanlan-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Auto tooltip on truncation - JS will add title attribute when text is truncated */
.hanlan-truncate-auto,
.hanlan-truncate-flex-auto,
.hanlan-truncate-full-auto {
    cursor: default;
}

.hanlan_mono {
    font-family: var(--hanlan-font-family-mono);
    font-size: var(--hanlan-font-size-base);
    color: var(--hanlan-color-text);
    line-height: 1.4;
}

.hanlan_mono_caps {
    font-family: var(--hanlan-font-family-mono);
    font-size: var(--hanlan-font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hanlan-color-text);
    line-height: 1.4;
}

.hanlan_mono_code {
    font-family: var(--hanlan-font-family-mono);
    font-size: var(--hanlan-font-size-base);
    background: var(--hanlan-color-bg-input);
    padding: 0 var(--hanlan-space-xs);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    line-height: 1.4;
}

/* ========================================
   Button Components
   ======================================== */

/* Base button styles - shared by all button variants AND bare button tags
   NOTE: bare `button` kept at low specificity (0,0,1) so class-based
   variants (.hanlan-btn--primary, .hanlan-btn-gradient, etc.) naturally
   win the cascade without needing !important. */
.hanlan-btn,
.hanlan-btn-icon,
.hanlan-btn-toggle,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background: var(--hanlan-color-bg-input);
    background: var(--hanlan-color-bg-button, var(--hanlan-color-bg-input));
    border: 1px solid var(--hanlan-button-border, transparent);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    transition: background-color var(--hanlan-transition-base),
        transform var(--hanlan-transition-base),
        color var(--hanlan-transition-base),
        filter var(--hanlan-transition-base);
    user-select: none;
    outline: none;
    will-change: transform, background-color;
    /* Default sizing for bare buttons */
    min-width: 24px;
    min-height: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    margin: 0;
    gap: var(--hanlan-space-xs);
    font-weight: var(--hanlan-font-weight-regular);
    line-height: 1;
}

/* Button groups - connected buttons with shared borders */
.hanlan-btn-group {
    display: inline-flex;
    align-items: center;
}

/* Buttons inside groups - shared borders, no gap */
.hanlan-btn-group > .hanlan-btn,
.hanlan-btn-group > .hanlan-btn-icon,
.hanlan-btn-group > .hanlan-btn-toggle,
.hanlan-btn-group > button {
    border-radius: 0;
}

/* First button in group gets left radius */
.hanlan-btn-group > :first-child {
    border-radius: var(--hanlan-radius) 0 0 var(--hanlan-radius);
}

/* Last button in group gets right radius */
.hanlan-btn-group > :last-child {
    border-radius: 0 var(--hanlan-radius) var(--hanlan-radius) 0;
}

/* Only button in group gets full radius */
.hanlan-btn-group > :only-child {
    border-radius: var(--hanlan-radius);
}

/* Prevent double borders between adjacent buttons in group */
.hanlan-btn-group > :not(:first-child) {
    margin-left: -1px;
}

/* Segmented control — pill-group toggle (e.g., GIFs/Stickers, GIF/MP4/WebP) */
.ha-seg {
    display: flex;
    gap: var(--hanlan-space-xxs);
    background: var(--hanlan-color-bg-elevated);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-xxs);
}

.ha-seg-btn {
    flex: 1;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    color: var(--hanlan-color-text-muted);
    background: transparent;
    border: none;
    border-radius: calc(var(--hanlan-radius) - 2px);
    cursor: pointer;
    transition: all var(--hanlan-duration-fast) var(--hanlan-ease-out);
    white-space: nowrap;
    line-height: 1;
}

.ha-seg-btn:hover {
    color: var(--hanlan-color-text);
}

.ha-seg-btn.active {
    background: var(--hanlan-color-bg-panel);
    color: var(--hanlan-color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ha-seg-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Compact variant — smaller text/padding for tight spaces */
.ha-seg--sm .ha-seg-btn {
    padding: 4px 8px;
    font-size: 10px;
}

/* No-grow variant — buttons don't stretch to fill */
.ha-seg--fit .ha-seg-btn {
    flex: none;
}

/* Button row - standard container for spaced buttons */
.hanlan-btn-row {
    display: flex;
    gap: var(--hanlan-space-xs);
    align-items: center;
    width: 100%;
}

/* Hover States — wrapped in :where() to keep specificity at (0,0,1)
   so any component-level :hover rule (gradient buttons, active tabs,
   icon button variants) wins automatically without needing :not() chains. */
:where(.hanlan-btn, .hanlan-btn-icon, .hanlan-btn-toggle, button, input[type="button"], input[type="submit"], input[type="reset"]):hover {
    background: var(--hanlan-color-bg-button-hover, var(--hanlan-color-bg-hover));
    border-color: var(--hanlan-button-border-hover, var(--hanlan-button-border, transparent));
    color: var(--hanlan-color-text);
}

/* Active/Pressed States */
.hanlan-btn:active,
.hanlan-btn-icon:active,
.hanlan-btn-toggle:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
    background: var(--hanlan-color-bg-input);
    background: var(--hanlan-color-bg-button, var(--hanlan-color-bg-input));
    border-color: var(--hanlan-button-border, transparent);
    transform: translateY(0) scale(0.99);
}

/* Focus States */
/* Focus states - only visible when accessibility is enabled */
/* Button focus rings now handled by the global :focus-visible rule at the
   top of this file. Do NOT re-add `outline: none` here — it violates WCAG
   2.4.7 (Focus Visible). See DESIGN.md §Focus Rings. */

/* Subtle focus indicators when accessibility is enabled - Spring-like focus rings with pulse */
@keyframes hanlan-focus-ring-pulse {

    0%,
    100% {
        /* rgba fallback for AE 2020-2022 (Chromium <111) */
        box-shadow: 0 0 0 2px var(--hanlan-color-focus-ring),
            0 0 0 4px rgba(245, 166, 35, 0.1),
            0 2px 4px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 0 2px var(--hanlan-color-focus-ring),
            0 0 0 4px color-mix(in srgb, var(--hanlan-color-accent) 10%, transparent),
            0 2px 4px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow: 0 0 0 3px var(--hanlan-color-focus-ring-lg),
            0 0 0 6px var(--hanlan-color-accent-subtle),
            0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

.hanlan-accessibility-enabled .hanlan-btn:focus-visible,
.hanlan-accessibility-enabled .hanlan-btn-icon:focus-visible,
.hanlan-accessibility-enabled .hanlan-btn-toggle:focus-visible,
.hanlan-accessibility-enabled button:focus-visible,
.hanlan-accessibility-enabled input[type="button"]:focus-visible,
.hanlan-accessibility-enabled input[type="submit"]:focus-visible,
.hanlan-accessibility-enabled input[type="reset"]:focus-visible {
    outline: none;
    animation: hanlan-focus-ring-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

/* Accessibility: Ensure focus is always visible */
.hanlan-btn[tabindex],
.hanlan-btn-icon[tabindex],
.hanlan-btn-toggle[tabindex] {
    outline: none;
}

.hanlan-btn[tabindex]:focus,
.hanlan-btn-icon[tabindex]:focus,
.hanlan-btn-toggle[tabindex]:focus {
    outline: none;
}

/* Default button + fallback for plugins using .btn */
.hanlan-btn,
.btn {
    min-width: 24px;
    min-height: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    gap: var(--hanlan-space-xs);
    font-weight: var(--hanlan-font-weight-regular);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Explicit neutral secondary variant so overlays/modals don't rely on
   incidental inheritance from the base button rule. */
.hanlan-btn--secondary {
    background: var(--hanlan-color-bg-button, var(--hanlan-color-bg-input));
    border: 1px solid var(--hanlan-button-border, transparent);
    color: var(--hanlan-color-text);
}

.hanlan-btn--secondary:hover {
    background: var(--hanlan-color-bg-button-hover, var(--hanlan-color-bg-hover));
    border-color: var(--hanlan-button-border-hover, var(--hanlan-button-border, transparent));
    color: var(--hanlan-color-text);
}


/* Icon button + fallback for plugins using .btn--icon */
button.hanlan-btn-icon,
.hanlan-btn-icon,
.btn--icon {
    --hanlan-icon-button-size: var(--hanlan-control-height);
    width: var(--hanlan-icon-button-size);
    height: var(--hanlan-icon-button-size);
    min-width: var(--hanlan-icon-button-size);
    min-height: var(--hanlan-icon-button-size);
    max-width: var(--hanlan-icon-button-size);
    max-height: var(--hanlan-icon-button-size);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    padding: 0 !important;
    position: relative;
    z-index: auto;
}

.hanlan-btn-icon img,
.hanlan-filter-btn img,
.hanlan-sort-btn img {
    width: var(--hanlan-icon-size);
    height: var(--hanlan-icon-size);
    display: block;
    image-rendering: -webkit-optimize-contrast;
    opacity: 0.85;
    transition: opacity 200ms var(--hanlan-ease-in-out);
}

/* Dark theme: invert PNG/SVG icon images to render in white */
body.hanlan_theme_dark .hanlan-btn-icon img,
body.hanlan_theme_dark .hanlan-filter-btn img,
body.hanlan_theme_dark .hanlan-sort-btn img {
    filter: invert(1);
}

/* Gradient buttons: img icons forced white in BOTH themes because
   the orange brand gradient always uses white iconography (matches
   the white text rule for .hanlan-btn--primary / .hanlan-btn-gradient).
   Uses brightness(0) invert(1) to force any source SVG to pure white. */
.hanlan-btn-gradient img,
.hanlan-btn--primary img,
.hanlan-btn-icon--active img,
.hanlan-btn-toggle--active img {
    filter: brightness(0) invert(1) !important;
}

.hanlan-btn-icon:hover img,
.hanlan-filter-btn:hover img,
.hanlan-sort-btn:hover img {
    opacity: 1;
}

.hanlan-btn-icon svg {
    width: var(--hanlan-icon-size);
    height: var(--hanlan-icon-size);
    display: block;
    opacity: 0.85;
    fill: currentColor;
    stroke: currentColor;
    transition: opacity 200ms var(--hanlan-ease-in-out);
}

.hanlan-btn-icon:hover svg {
    opacity: 1;
    fill: currentColor;
    stroke: currentColor;
}

.hanlan-btn-icon:active {
    opacity: 0.9;
}

/* Icon button active state (when selected/on) */
.hanlan-btn-icon--active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border: 1px solid transparent;
    color: #ffffff;
}

.hanlan-btn-icon--active svg,
.hanlan-btn-icon--active img {
    opacity: 1;
    fill: #ffffff;
    stroke: #ffffff;
    filter: none;
}

.hanlan-btn-icon.hanlan-btn-icon--active:hover {
    background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient, linear-gradient(135deg, #8ea6ff, #a87cff)));
    border: none;
    filter: brightness(1.1);
    box-shadow: 0 0 8px var(--hanlan-color-focus-ring-sm);
}

.hanlan-btn-icon.hanlan-btn-icon--active:active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border: none;
    filter: brightness(0.95);
}

/* Toggle button */
.hanlan-btn-toggle {
    width: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    min-width: var(--hanlan-control-height);
    min-height: var(--hanlan-control-height);
    padding: 0;
    gap: var(--hanlan-space-xs);
    font-weight: var(--hanlan-font-weight-regular);
}

.hanlan-btn-toggle:active {
    transform: scale(0.99);
}

.hanlan-btn-toggle svg,
.hanlan-btn-toggle img {
    opacity: 0.85;
    fill: currentColor;
    stroke: currentColor;
    transition: opacity 200ms var(--hanlan-ease-in-out);
}

.hanlan-btn-toggle:hover svg,
.hanlan-btn-toggle:hover img {
    opacity: 1;
}

.hanlan-btn-toggle--active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border: 1px solid transparent;
    color: #ffffff;
}

.hanlan-btn-toggle--active svg,
.hanlan-btn-toggle--active img {
    opacity: 1;
    fill: #ffffff;
    stroke: #ffffff;
    filter: none;
}

.hanlan-btn-toggle.hanlan-btn-toggle--active:hover {
    background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient, linear-gradient(135deg, #8ea6ff, #a87cff)));
    border: none;
    filter: brightness(1.1);
    box-shadow: 0 0 8px var(--hanlan-color-focus-ring-sm);
}

.hanlan-btn-toggle.hanlan-btn-toggle--active:active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border: none;
    filter: brightness(0.95);
}

/* Disabled state styling — keeps the click suppressed via the disabled
   attribute itself, but ALLOWS pointer-events so hover fires + the tooltip
   system (mouseover delegation) can surface a why-disabled tooltip. The
   native `disabled` attribute on <button> still blocks clicks at the
   browser level; this CSS just stops blocking hover/mouseover. */
.hanlan-btn:disabled,
.hanlan-btn-icon:disabled,
.hanlan-btn-toggle:disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: saturate(0.6);
}

/* Disabled buttons keep their disabled appearance on hover — generic rule
   removed; the old `background: var(--hanlan-color-bg-input)` flattened
   primary's gradient to gray on hover and read as broken. Per-variant
   disabled-hover overrides live below (search for `:disabled:hover`).
   Tooltip still fires because pointer-events stays on. */

/* Slightly more muted for icon-only buttons (no text label fallback) */
.hanlan-btn-icon:disabled,
.hanlan-btn-icon[disabled] {
    opacity: 0.4;
}

/* Gradient CTA button (license activation, etc.) */
/* NOTE: CSS cannot transition gradient backgrounds — the gradient swap snaps instantly.
   Filter, box-shadow, and transform transitions smooth the overall feel. */
.hanlan-btn-gradient {
    background: var(--hanlan-plugin-gradient);
    border: none;
    color: #fff;
    font-weight: var(--hanlan-font-weight-medium);
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    box-shadow:
        0 0 12px rgba(245, 166, 35, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.15);
    box-shadow:
        0 0 12px color-mix(in srgb, var(--hanlan-plugin-accent) 30%, transparent),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transition: filter var(--hanlan-transition-fast), box-shadow var(--hanlan-transition-fast), transform var(--hanlan-transition-fast);
}

.hanlan-btn-gradient:hover {
    background: var(--hanlan-plugin-gradient-hover);
    filter: brightness(1.1);
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    box-shadow:
        0 0 18px rgba(245, 166, 35, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.22);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--hanlan-plugin-accent) 45%, transparent),
        0 6px 14px rgba(0, 0, 0, 0.22);
}

.hanlan-btn-gradient:disabled {
    background: var(--hanlan-plugin-gradient);
    border: none;
    color: #fff;
    opacity: 0.35;
    box-shadow: none;
    filter: saturate(0.5);
    cursor: not-allowed;
}

.hanlan-input:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
textarea:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--hanlan-color-bg-input);
    border-color: var(--hanlan-color-border);
    pointer-events: none;
    filter: saturate(0.6);
}

.hanlan-input:disabled:hover,
input[type="text"]:disabled:hover,
input[type="number"]:disabled:hover,
input[type="password"]:disabled:hover,
input[type="search"]:disabled:hover,
textarea:disabled:hover {
    background: var(--hanlan-color-bg-input);
    border-color: var(--hanlan-color-border);
    /* No hover effect on disabled inputs */
}

/* ========================================
   Input Components
   ======================================== */

.hanlan-input,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea {
    width: 100%;
    min-height: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    background: var(--hanlan-color-bg-input);
    border: 1px solid var(--hanlan-control-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-regular);
    font-feature-settings: 'tnum';
    line-height: 1.2;
    transition: all var(--hanlan-transition-base);
    outline: none;
    appearance: none;
    /* Remove native styling */
    -webkit-appearance: none;
    /* Subtle inset border for depth */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

textarea {
    height: var(--hanlan-control-height);
    min-height: var(--hanlan-control-height);
    resize: vertical;
    line-height: 1.5;
}

.hanlan-input:hover,
input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-control-border-strong);
    transition: border-color var(--hanlan-transition-base),
        background-color var(--hanlan-transition-base);
}

.hanlan-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
    /* Subtle border glow on focus using theme accent color. rgba fallback for AE 2020-2022. */
    box-shadow:
        0 0 0 2px rgba(245, 166, 35, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--hanlan-color-accent) 15%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Light theme: text inputs use the shared input surface so fields stay
   distinct on both white modal bodies and grey card containers.
   Scoped to text-entry inputs only — does not affect tabs/list items
   that share --hanlan-color-bg-input. */
body.hanlan_theme_light .hanlan-input,
body.hanlan_theme_light input[type="text"],
body.hanlan_theme_light input[type="number"],
body.hanlan_theme_light input[type="password"],
body.hanlan_theme_light input[type="search"],
body.hanlan_theme_light input[type="email"],
body.hanlan_theme_light input[type="url"],
body.hanlan_theme_light textarea {
    background: var(--hanlan-color-bg-input);
    border-color: var(--hanlan-control-border);
}

body.hanlan_theme_light .hanlan-input:hover,
body.hanlan_theme_light input[type="text"]:hover,
body.hanlan_theme_light input[type="number"]:hover,
body.hanlan_theme_light input[type="password"]:hover,
body.hanlan_theme_light input[type="search"]:hover,
body.hanlan_theme_light textarea:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-control-border-strong);
}

body.hanlan_theme_light .hanlan-input:disabled,
body.hanlan_theme_light input[type="text"]:disabled,
body.hanlan_theme_light input[type="number"]:disabled,
body.hanlan_theme_light input[type="password"]:disabled,
body.hanlan_theme_light input[type="search"]:disabled,
body.hanlan_theme_light input[type="email"]:disabled,
body.hanlan_theme_light input[type="url"]:disabled,
body.hanlan_theme_light textarea:disabled {
    opacity: 1;
    filter: none;
    color: var(--hanlan-color-text-muted);
    background: var(--hanlan-color-bg-input);
    border-color: var(--hanlan-control-border);
}

/* Enhanced focus ring for inputs when accessibility enabled - Spring-like pulse */
@keyframes hanlan-input-focus-pulse {

    0%,
    100% {
        /* rgba fallback for AE 2020-2022 (Chromium <111) */
        box-shadow:
            0 0 0 2px rgba(245, 166, 35, 0.3),
            0 0 0 4px rgba(245, 166, 35, 0.1),
            0 2px 4px rgba(0, 0, 0, 0.1);
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--hanlan-color-accent) 30%, transparent),
            0 0 0 4px color-mix(in srgb, var(--hanlan-color-accent) 10%, transparent),
            0 2px 4px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(245, 166, 35, 0.4),
            0 0 0 6px rgba(245, 166, 35, 0.15),
            0 2px 8px rgba(0, 0, 0, 0.15);
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--hanlan-color-accent) 40%, transparent),
            0 0 0 6px color-mix(in srgb, var(--hanlan-color-accent) 15%, transparent),
            0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

.hanlan-accessibility-enabled .hanlan-input:focus-visible,
.hanlan-accessibility-enabled input[type="text"]:focus-visible,
.hanlan-accessibility-enabled input[type="number"]:focus-visible,
.hanlan-accessibility-enabled input[type="password"]:focus-visible,
.hanlan-accessibility-enabled input[type="search"]:focus-visible,
.hanlan-accessibility-enabled textarea:focus-visible {
    animation: hanlan-input-focus-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hanlan-input:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-control-border-strong);
}

.hanlan-input:focus {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-input::placeholder {
    color: var(--hanlan-color-text-muted);
}


/* ========================================
   Card Component
   ======================================== */

.hanlan-card {
    background: var(--hanlan-color-bg-elevated);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-lg);
    box-shadow: var(--hanlan-shadow-sm);
    margin-bottom: var(--hanlan-space-md);
}

/* ========================================
   Divider Component
   ======================================== */

.hanlan-divider {
    width: 100%;
    height: var(--hanlan-divider-width);
    background: var(--hanlan-divider-color);
    border: none;
    margin: var(--hanlan-space-md) 0;
}

/* ========================================
   Modal Component (Glass)
   ======================================== */

.hanlan-side-panel {
    z-index: var(--hanlan-z-side-panel, 1200);
}

.hanlan-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Near-zero tint is required to activate backdrop-filter in Chromium —
       with a fully transparent background the blur is optimised away and
       the blur effect only shows behind the modal box itself instead of
       the whole viewport. */
    background: rgba(0, 0, 0, 0.01);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--hanlan-z-modal-backdrop, 3000);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hanlan-transition-base), visibility 0s linear 300ms;
}

.hanlan-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--hanlan-transition-base), visibility 0s linear 0s;
}

.hanlan-modal-backdrop.hanlan-modal-exiting {
    animation: hanlan-fadeOut var(--hanlan-duration-normal) var(--hanlan-ease-out) forwards;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hanlan-modal {
    background: var(--hanlan-glass-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-control-border);
    border-radius: var(--hanlan-radius);
    width: min(var(--hanlan-modal-width), calc(100vw - 16px));
    min-width: min(var(--hanlan-modal-min-width), calc(100vw - 16px));
    /* v1.1 polish — clamp modal to actual viewport width minus a small
       gutter. Previous 90vw allowed the modal to render wider than the
       panel at very narrow widths (e.g. 340px modal in 280px panel). */
    max-width: min(var(--hanlan-modal-max-width), calc(100vw - 16px));
    min-height: 0;
    max-height: min(75vh, 700px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: hanlan-modalIn var(--hanlan-duration-normal) var(--hanlan-ease-out) forwards;
    overflow: visible;
    display: flex;
    flex-direction: column;
    z-index: var(--hanlan-z-modal, 3100);
    position: absolute;
    transition: transform var(--hanlan-transition-base), opacity var(--hanlan-transition-base);
}

/* Confirm prompts are intentionally short. The base modal now hugs content;
   keep this class as an explicit compact marker for confirm-style callers. */
.hanlan-modal--compact {
    min-height: 0;
}

/* Modal stack positioning */
.hanlan-modal[data-stack-index="0"] {
    transform: scale(1);
}

/* Modals behind the front one recede cleanly: dimmed + blurred in place
   (no sideways card-stack offset, which peeked out messily). Matches the
   standard "blur the background" pattern when a secondary modal is open. */
.hanlan-modal[data-stack-index="1"],
.hanlan-modal[data-stack-index="2"],
.hanlan-modal[data-stack-index="3"],
.hanlan-modal[data-stack-index="4"] {
    transform: scale(0.985);
    opacity: 0.35;
    filter: blur(3px);
    pointer-events: none;
}

.hanlan-modal.hanlan-modal-exiting {
    animation: hanlan-modalOut var(--hanlan-duration-normal) var(--hanlan-ease-out) forwards;
}

.hanlan-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hanlan-modal-padding);
    /* Shelf fill mirrors .hanlan-modal-footer so the header and footer frame
       the scrolling body symmetrically — same shared --hanlan-modal-shelf-bg
       token, applied across every modal. No orphan treatment on one bar only. */
    background: var(--hanlan-modal-shelf-bg, var(--hanlan-color-bg-elevated));
    border-bottom: var(--hanlan-divider);
    border-top-left-radius: var(--hanlan-modal-inner-radius);
    border-top-right-radius: var(--hanlan-modal-inner-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.hanlan-title,
.hanlan-accordion-header {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-heading);
    font-weight: var(--hanlan-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hanlan-color-text);
    line-height: 1.2;
    margin: 0;
}

.hanlan-modal-close {
    --hanlan-icon-button-size: var(--hanlan-control-height);
    width: var(--hanlan-icon-button-size);
    height: var(--hanlan-icon-button-size);
    min-width: var(--hanlan-icon-button-size);
    min-height: var(--hanlan-icon-button-size);
    max-width: var(--hanlan-icon-button-size);
    max-height: var(--hanlan-icon-button-size);
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    background: var(--hanlan-color-bg-button, var(--hanlan-color-bg-input));
    border: 1px solid var(--hanlan-button-border, transparent);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 var(--hanlan-icon-button-size);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    transition: background-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base);
    user-select: none;
}

.hanlan-modal-close::before,
.hanlan-modal-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--hanlan-icon-size);
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
    transition: opacity 200ms var(--hanlan-ease-in-out);
}

.hanlan-modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.hanlan-modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.hanlan-modal-close:hover {
    background: var(--hanlan-color-bg-button-hover, var(--hanlan-color-bg-hover));
    border-color: var(--hanlan-button-border-hover, var(--hanlan-button-border, transparent));
    color: var(--hanlan-color-text);
}

.hanlan-modal-close:hover::before,
.hanlan-modal-close:hover::after {
    opacity: 1;
}

.hanlan-modal-tabs {
    display: flex;
    flex-direction: row;
    gap: var(--hanlan-space-sm);
    padding: var(--hanlan-space-sm);
    flex-shrink: 0;
    background: var(--hanlan-color-bg-base);
}

.hanlan-modal-tab {
    padding: var(--hanlan-space-sm) var(--hanlan-space-lg);
    background: var(--hanlan-color-bg-input);
    border: none;
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text-muted);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    cursor: pointer;
    transition: color var(--hanlan-transition-base),
        background-color var(--hanlan-transition-base),
        filter var(--hanlan-transition-base);
    user-select: none;
    outline: none;
    white-space: nowrap;
    flex: 1;
}

.hanlan-modal-tab:hover {
    color: var(--hanlan-color-text);
    background: var(--hanlan-color-bg-hover);
}

.hanlan-modal-tab--active {
    background: var(--hanlan-plugin-gradient);
    color: #ffffff;
}

.hanlan-modal-tab--active:hover {
    background: var(--hanlan-plugin-gradient-hover);
    color: #ffffff;
    filter: brightness(1.1);
}

/* WCAG AA: #888 on #2a2a2a = 4.05 (fail). #a0a0a0 = 5.49 (pass). Dark theme only. */
body.hanlan_theme_dark .hanlan-modal-tab:not(.hanlan-modal-tab--active) {
    color: #a0a0a0;
}

.hanlan-modal-tab-panel {
    display: none;
}

.hanlan-modal-tab-panel.active {
    display: block;
}

.hanlan-modal-body {
    padding: var(--hanlan-modal-padding);
    /* v1.1 polish — was flex: 1, which made the body stretch to fill the
       modal's max-height even when the form content was shorter. That created
       a visible empty gap above the footer in modals like Edit Preset / Add
       Preset where the content naturally fits. flex: 0 1 auto lets the body
       size to its content; when content overflows, min-height: 0 + overflow
       still allow internal scroll. */
    flex: 0 1 auto;
    min-height: 0;
    /* Positioning context for the custom scrollbar thumb in shell mode. */
    position: relative;
    /* Fallback before shell-wrap installs the inner viewport — prevents
       content escaping during the brief unshelled window. The shell CSS
       (.hanlan-modal-body[data-cor-shell="1"]) overrides to overflow:visible
       once the inner .cor-scroll-viewport takes over scrolling. */
    overflow: hidden;
}

.hanlan-modal-body:last-child {
    border-bottom-left-radius: var(--hanlan-modal-inner-radius);
    border-bottom-right-radius: var(--hanlan-modal-inner-radius);
}

/* Modal scroll affordance — sticky-shadow on header / footer when content
   has scrolled away from each edge. JS toggles data-fade-top / data-fade-bottom
   on the .hanlan-modal as the inner viewport scrolls. Replaces the older
   gradient-overlay approach (Stripe / Linear / Notion convention). */
.hanlan-modal-header,
.hanlan-modal-footer {
    transition: box-shadow var(--hanlan-duration-normal) var(--hanlan-ease-out);
    z-index: 2;
    position: relative;
}

.hanlan-modal[data-fade-top] > .hanlan-modal-header {
    box-shadow: var(--hanlan-modal-edge-shadow-top);
}

.hanlan-modal[data-fade-bottom] > .hanlan-modal-footer {
    box-shadow: var(--hanlan-modal-edge-shadow-bottom);
}

/* Prevent nested scrollbars in settings sections within modal body */
.hanlan-modal-body .hanlan-settings-actions,
.hanlan-modal-body .hanlan-settings-footer {
    overflow: visible;
}

/* Centered modal body for confirmation dialogs (text + flex-axis centered).
   Targets both the unshelled body and the inner shell viewport — the shell-wrap
   system relocates content one level deeper after first paint, so without the
   dual selector the centering applies for one frame then drops as soon as the
   shell installs. (Same pattern as --vcentered below.) */
.hanlan-modal-body--centered:not([data-cor-shell="1"]),
.hanlan-modal-body--centered[data-cor-shell="1"] > .cor-scroll-viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Inputs inside centered modal bodies should stretch full width */
.hanlan-modal-body--centered .hanlan-input,
.hanlan-modal-body--centered[data-cor-shell="1"] > .cor-scroll-viewport .hanlan-input {
    width: 100%;
}

/* Vertically-centered modal body — content sits in the vertical middle but
   spans full width and reads left-aligned. Used by modal.prompt where a
   single input shouldn't sit pinned to the top of an otherwise tall body.
   Targets both the unshelled body and the inner shell viewport, since
   the shell-wrap system relocates content one level deeper. */
.hanlan-modal-body--vcentered:not([data-cor-shell="1"]),
.hanlan-modal-body--vcentered[data-cor-shell="1"] > .cor-scroll-viewport {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hanlan-modal-body .hanlan_text,
.hanlan-modal-body p {
    margin-bottom: var(--hanlan-space-sm);
}

.hanlan-modal-body .hanlan-input {
    margin-bottom: var(--hanlan-space-sm);
}

.hanlan-modal-body .hanlan_text:last-child,
.hanlan-modal-body p:last-child,
.hanlan-modal-body .hanlan-input:last-child,
.hanlan-modal-body .hanlan-input:has(+ .hidden:last-child) {
    margin-bottom: 0;
}

/* Shared modal-content primitives so every modal feels like an equivalent of
   the next. Use these instead of repeating inline `style="..."` blocks. */
.hanlan-modal-section {
    margin-bottom: var(--hanlan-space-md);
}

.hanlan-modal-section:last-child {
    margin-bottom: 0;
}

.hanlan-modal-section-heading {
    /* v1.0.2: align with .hanlan_heading tokens for visual consistency across all modal section
       heads. Margin matches .modal-form-section > .hanlan_heading; size + letter-spacing match
       the standard heading scale. --success / --error variants override only colour below. */
    margin: 0 0 var(--hanlan-space-xs);
    font-size: var(--hanlan-font-size-heading);
    font-weight: var(--hanlan-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--hanlan-color-text-secondary);
}

.hanlan-modal-section-heading--success { color: var(--hanlan-color-success); }
.hanlan-modal-section-heading--error { color: var(--hanlan-color-error); }

.hanlan-modal-list-scroll {
    max-height: 240px;
    overflow-y: auto;
}

.hanlan-modal-list-scroll--tall { max-height: 340px; }
.hanlan-modal-list-scroll--short { max-height: 120px; }

.hanlan-modal-meta-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    color: var(--hanlan-color-text-muted);
    font-size: 12px;
}

/* Meta-row that sits beneath a scrollable list — adds a top border + padding
   so the count/summary reads as a footer of the list above. */
.hanlan-modal-meta-row--bordered {
    padding-top: var(--hanlan-space-md);
    margin-top: var(--hanlan-space-xs);
    border-top: var(--hanlan-divider);
}

.hanlan-modal-hint {
    color: var(--hanlan-color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Standard list rows inside .hanlan-modal-list-scroll — used by results
   modals (Creation Results' Created / Failed sublists, etc.). */
.hanlan-modal-list-row {
    padding: 4px 0;
    line-height: 1.4;
}

.hanlan-modal-list-row--success { color: var(--hanlan-color-success); }
.hanlan-modal-list-row--error { color: var(--hanlan-color-error); }

/* Bullet list — for the rare case a modal needs to enumerate items
   ("Clear Data" lists the categories that get wiped). */
.hanlan-modal-body .hanlan-modal-bullet-list {
    margin: var(--hanlan-space-sm) 0;
    padding-left: var(--hanlan-space-lg);
    color: var(--hanlan-color-text-muted);
}

/* Inline warning paragraph — used for irreversible-action callouts inside
   destructive confirms ("This action cannot be undone."). */
.hanlan-modal-body .hanlan-modal-warning {
    color: var(--hanlan-color-error);
    font-weight: 500;
}

/* Help modal — section navigation chips at the top, then scrollable body. */
.hanlan-help-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hanlan-space-xs);
    margin-bottom: var(--hanlan-space-md);
}

.hanlan-help-nav-chip {
    font-size: 11px;
    padding: var(--hanlan-space-xxs) var(--hanlan-space-xs);
    border-radius: var(--hanlan-radius-sm);
    background: var(--hanlan-color-bg-input);
    color: var(--hanlan-color-text-secondary);
    border: none;
    cursor: pointer;
    font-family: var(--hanlan-font-family-base);
    transition: background var(--hanlan-transition-base), color var(--hanlan-transition-base);
}

.hanlan-help-nav-chip:hover {
    background: var(--hanlan-color-bg-hover);
    color: var(--hanlan-color-text);
}

.hanlan-help-body {
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--hanlan-space-xxs);
}

.hanlan-help-section {
    margin-bottom: var(--hanlan-space-lg);
}

.hanlan-help-section:last-child {
    margin-bottom: 0;
}

.hanlan-help-section-title {
    font-size: 13px;
    font-weight: 600;
    margin: var(--hanlan-space-lg) 0 var(--hanlan-space-xs);
}

.hanlan-help-section:first-child .hanlan-help-section-title {
    margin-top: 0;
}

/* Full-width button inside modal content (e.g. action picker rows). */
.hanlan-modal-btn-block { width: 100%; }

/* 2-column grid of buttons — for action pickers like Export Queue
   (4 actions = 2x2 balanced layout). Buttons stretch to fill each cell. */
.hanlan-modal-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hanlan-space-sm);
}

.hanlan-modal-btn-grid > .hanlan-btn {
    width: 100%;
}

/* Vertical stack of full-width buttons (Export Queue, Import Queue choices). */
.hanlan-modal-btn-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-sm);
    margin-top: var(--hanlan-space-xs);
}

.hanlan-modal-btn-stack--tight {
    gap: var(--hanlan-space-xs);
}

/* Leading-aligned button used for picker rows ("JSON — Full queue with folders"). */
.hanlan-modal-btn-leading {
    justify-content: flex-start;
}

.hanlan-modal-btn-label {
    font-weight: 600;
}

.hanlan-modal-btn-meta {
    opacity: 0.7;
    margin-left: var(--hanlan-space-xs);
}

/* Form-group spacing variant — extra gap between two form blocks in a modal. */
.hanlan-modal-form-group--spaced {
    margin-top: var(--hanlan-space-lg);
}

/* Inline radio row inside a modal form-group (Import Mode picker). */
.hanlan-modal-radio-row {
    display: flex;
    gap: var(--hanlan-space-xs);
    margin-top: var(--hanlan-space-xs);
}

.hanlan-modal-radio {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-xxs);
    cursor: pointer;
}

.hanlan-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hanlan-space-xs);
    padding: var(--hanlan-modal-footer-padding) var(--hanlan-modal-padding);
    background: var(--hanlan-modal-shelf-bg, var(--hanlan-color-bg-elevated));
    border-top: var(--hanlan-divider);
    flex-shrink: 0;
    flex-wrap: wrap;
    box-shadow: var(--hanlan-modal-footer-shadow);
    border-bottom-left-radius: var(--hanlan-modal-inner-radius);
    border-bottom-right-radius: var(--hanlan-modal-inner-radius);
    overflow: hidden;
}

/* ========================================
   Settings Branding Section
   ======================================== */

.hanlan-settings-branding {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-md);
    margin-top: var(--hanlan-space-lg);
    padding-top: var(--hanlan-space-lg);
    border-top: var(--hanlan-divider);
    max-width: 500px;
    width: 100%;
}

.hanlan-settings-branding-logo {
    width: 125px;
    height: 75px;
    object-fit: contain;
    opacity: 0.9;
    flex-shrink: 0;
}

.hanlan-settings-branding-text {
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-xxs);
    flex: 1;
}

.hanlan-settings-branding-title {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-heading);
    font-weight: var(--hanlan-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hanlan-color-text);
    line-height: 1.2;
}

.hanlan-settings-branding-links {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-xxs);
    font-size: var(--hanlan-font-size-base);
    line-height: 1.2;
}

.hanlan-settings-branding-separator {
    color: var(--hanlan-color-text-muted);
    opacity: 0.5;
}

/* Branded accent link — solid colour, smooth color transition on hover.
   Was a clipped gradient, but Chromium can't reliably transition background-image
   and gradient-text repaints flicker. Solid `color` transitions smoothly,
   reads cleanly at any size, and matches the accent identity. */
.hanlan-link-gradient {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    color: var(--hanlan-plugin-accent);
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    transition: color var(--hanlan-transition-fast);
}

.hanlan-link-gradient:hover {
    color: var(--hanlan-plugin-gradient-first-color-hover);
    opacity: 1;
}

/* ========================================
   Settings Actions (Reset/Clear)
   Action buttons above branding footer
   ======================================== */

/* Settings collapsible sections */
.settings-disclosure {
}

.settings-disclosure-header {
    display: flex;
    align-items: center;
    padding: var(--hanlan-space-sm) 0;
    font-size: var(--hanlan-font-size-xs);
    font-weight: var(--hanlan-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hanlan-color-text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color var(--hanlan-transition-fast);
    border-radius: var(--hanlan-radius);
}

.settings-disclosure-header::-webkit-details-marker {
    display: none;
}

.settings-disclosure-header::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    margin-right: var(--hanlan-space-sm);
    transition: transform var(--hanlan-transition-fast);
    flex-shrink: 0;
}

.settings-disclosure[open] > .settings-disclosure-header::before {
    transform: rotate(45deg);
}

.settings-disclosure-header:hover {
    color: var(--hanlan-color-text);
}

.settings-disclosure-body {
    padding: 0 0 var(--hanlan-space-sm) calc(6px + var(--hanlan-space-sm));
}

.hanlan-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hanlan-space-xs);
    margin-top: var(--hanlan-space-lg);
    padding-top: var(--hanlan-space-sm);
}

/* Destructive variant — single red family across all states. The button
   has presence at rest (visible red border + faint red fill), and hover
   subtly intensifies both border opacity and fill. No state jumps from
   "transparent" to "filled" — every transition is a gradient within the
   red family so the colour-clash on hover is gone. */
.hanlan-btn--destructive {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.6);
    /* Brighter red + bold so the destructive action reads clearly on a dark fill (kept universal). */
    color: #ff6b61;
    font-weight: 600;
    transition: var(--hanlan-transition-base);
}

.hanlan-btn--destructive:hover {
    background: rgba(239, 68, 68, 0.24);
    border-color: rgba(239, 68, 68, 0.8);
    filter: brightness(1.1);
}

.hanlan-btn--destructive:active {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.9);
    filter: none;
}

/* ========================================
   Settings Footer (Branding)
   Compact footer for settings modals
   ======================================== */

.hanlan-settings-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hanlan-space-sm);
    margin-top: var(--hanlan-modal-padding);
    text-align: center;
}

.hanlan-settings-footer-logo {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

.hanlan-settings-footer-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hanlan-space-xxs);
    text-align: center;
}

.hanlan-settings-footer-name {
    /* Inherits gradient from .hanlan-link-gradient */
}

.hanlan-settings-footer-copyright {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    color: var(--hanlan-color-text-muted);
}

.hanlan-btn--primary {
    background: var(--hanlan-plugin-gradient);
    border: none;
    color: #ffffff;
    margin: 0;
    border-radius: var(--hanlan-radius);
}

.hanlan-btn--primary:hover {
    background: var(--hanlan-plugin-gradient-hover);
}

.hanlan-btn--primary:active {
    opacity: 0.9;
}

.hanlan-btn--primary:disabled,
.hanlan-btn--primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Disabled-hover: re-pin the base gradient so the :hover gradient-hover
   rule above doesn't visually re-light a disabled button. */
.hanlan-btn--primary:disabled:hover,
.hanlan-btn--primary[disabled]:hover {
    background: var(--hanlan-plugin-gradient);
}

/* Modal exit animation now handled directly on .hanlan-modal.hanlan-modal-exiting */

/* ========================================
   Toast Component (Glass)
   ======================================== */

.hanlan-toast-container {
    position: fixed;
    bottom: var(--hanlan-space-lg);
    right: var(--hanlan-space-lg);
    display: flex;
    flex-direction: column-reverse;
    /* Right-justify all toasts regardless of width so narrower ones don't
       drift left of the wider ones in the stack. */
    align-items: flex-end;
    gap: var(--hanlan-space-sm);
    z-index: var(--hanlan-z-toast, 3400);
    pointer-events: none;
}

.hanlan-toast {
    position: relative;
    background: var(--hanlan-glass-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: none;
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-sm) var(--hanlan-space-md);
    width: max-content;
    max-width: min(420px, calc(100vw - var(--hanlan-space-lg) * 2));
    box-shadow: var(--hanlan-glass-shadow);
    pointer-events: none;
    transform-origin: right center;
    animation: hanlan-toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hanlan-toast.hanlan-toast-exiting {
    animation: hanlan-toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hanlan-toast.hanlan-toast-bump {
    animation: hanlan-toast-bump 150ms ease-out;
}

@keyframes hanlan-toast-bump {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.hanlan-toast-content {
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.hanlan-toast--with-action {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-md);
}

.hanlan-toast--with-action .hanlan-toast-content {
    flex: 1 1 auto;
}

.hanlan-toast-action {
    pointer-events: auto;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: inherit;
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: var(--hanlan-space-xxs) var(--hanlan-space-sm);
    border-radius: var(--hanlan-radius-sm);
    transition: background var(--hanlan-motion-fast, 150ms) ease;
}

.hanlan-toast-action:hover {
    background: rgba(255, 255, 255, 0.18);
}

.hanlan-toast-action:active {
    background: rgba(255, 255, 255, 0.28);
}

/* Colored toast rims — tinted to match their fill color instead of using
   the neutral glass-border rim (which reads as a hard black line on the
   bright colored background). Each rim is a darker shade of its own hue. */
.hanlan-toast-success {
    background: rgba(52, 199, 89, 0.95);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    box-shadow:
        0 0 0 1px rgba(22, 120, 52, 0.55),
        0 8px 32px rgba(0, 0, 0, 0.25);
}

.hanlan-toast-success .hanlan-toast-content {
    color: #ffffff;
}

.hanlan-toast-error {
    background: rgba(255, 59, 48, 0.95);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    box-shadow:
        0 0 0 1px rgba(150, 25, 18, 0.55),
        0 8px 32px rgba(0, 0, 0, 0.25);
}

.hanlan-toast-error .hanlan-toast-content {
    color: #ffffff;
}

.hanlan-toast-warning {
    background: rgba(255, 184, 0, 0.95);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    box-shadow:
        0 0 0 1px rgba(150, 105, 0, 0.55),
        0 8px 32px rgba(0, 0, 0, 0.25);
}

.hanlan-toast-warning .hanlan-toast-content {
    color: #000000;
}

.hanlan-toast-info {
    background: rgba(53, 122, 232, 0.95);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    box-shadow:
        0 0 0 1px rgba(20, 60, 140, 0.55),
        0 8px 32px rgba(0, 0, 0, 0.25);
}

.hanlan-toast-info .hanlan-toast-content {
    color: #ffffff;
}

@keyframes hanlan-toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
}

/* ========================================
   Loading Overlay Component
   Glass background with conic-gradient spinner
   ======================================== */

.hanlan-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--hanlan-glass-backdrop, rgba(0, 0, 0, 0.4));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--hanlan-z-loading, 5000);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hanlan-duration-normal, 200ms) var(--hanlan-ease-out, ease-out),
        visibility var(--hanlan-duration-normal, 200ms) var(--hanlan-ease-out, ease-out);
}

.hanlan-loading-overlay.hanlan-loading-visible {
    opacity: 1;
    visibility: visible;
}

.hanlan-loading-overlay.hanlan-loading-exiting {
    opacity: 0;
    visibility: hidden;
}

.hanlan-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hanlan-space-lg, 16px);
    padding: var(--hanlan-space-xl, 24px) var(--hanlan-space-2xl, 32px);
    background: var(--hanlan-glass-bg, rgba(30, 30, 30, 0.85));
    border: 1px solid var(--hanlan-glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--hanlan-radius-lg, 12px);
    box-shadow: var(--hanlan-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.4));
}

/* Spinner: industry-standard CSS border-ring. One border-color, one transform
   animation, no filter / mask / drop-shadow / conic-gradient. Fast on CEP's
   older Chromium GPU; doesn't steal compositor budget from concurrent
   modal entry animations (e.g. the licensing modal during initial load). */
.hanlan-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #f5a623));
    border-radius: 50%;
    animation: hanlan-spin 0.8s linear infinite;
}

/* Standalone variant: fixed-centered (used by the initial-load licensing spinner) */
.hanlan-loading-spinner.hanlan-loading-spinner--centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -16px 0 0 -16px;
    z-index: 999999;
}

.hanlan-loading-message {
    color: var(--hanlan-color-text, #e0e0e0);
    font-family: var(--hanlan-font-family-base, system-ui, sans-serif);
    font-size: var(--hanlan-font-size-base, 13px);
    text-align: center;
    max-width: 220px;
    line-height: 1.4;
}

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

@keyframes hanlan-spinnerPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ========================================
   Context Menu Component (Glass)
   ======================================== */

.hanlan-context-menu {
    position: fixed;
    background: var(--hanlan-menu-surface-bg, var(--hanlan-glass-bg));
    color: var(--hanlan-menu-text, var(--hanlan-color-text));
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-menu-surface-border, var(--hanlan-glass-border));
    border-radius: var(--hanlan-radius);
    padding: 8px;
    width: max-content;
    max-width: min(90vw, 450px);
    max-height: 80vh !important;
    box-shadow: var(--hanlan-shadow-md);
    z-index: var(--hanlan-z-context-menu, 3200);
    animation: hanlan-scaleIn var(--hanlan-duration-fast) var(--hanlan-ease-out);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.hanlan-context-menu-exiting {
    animation: hanlan-scaleOut var(--hanlan-duration-fast) var(--hanlan-ease-out) forwards;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Force all direct children to allow shrinking for scroll to work */
.hanlan-context-menu>* {
    flex-shrink: 1;
    min-height: 0;
}

.hanlan-context-menu-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: overlay;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.hanlan-context-menu-content>* {
    flex-shrink: 0;
}

.hanlan-context-menu-content-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hanlan-context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-xs);
    width: 100%;
    box-sizing: border-box;
    padding: var(--hanlan-context-menu-item-padding);
    margin-bottom: 0;
    color: var(--hanlan-menu-text, var(--hanlan-color-text));
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    border-radius: calc(var(--hanlan-radius) - 2px);
    cursor: pointer;
    transition: background-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base);
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.hanlan-context-menu-item:hover,
.hanlan-context-menu-item.gradient-hover {
    background: var(--hanlan-menu-hover-bg, var(--hanlan-color-bg-hover));
    color: var(--hanlan-menu-hover-text, var(--hanlan-color-text));
}

.hanlan-context-menu-divider {
    display: none;
}

/* Submenu indicator — arrow at the right edge of items that open a submenu */
.hanlan-context-menu-item--has-submenu {
    justify-content: space-between;
}
.hanlan-context-menu-item__label {
    flex: 1;
    min-width: 0;
}
.hanlan-context-menu-arrow {
    margin-left: var(--hanlan-space-sm);
    opacity: 0.55;
    font-size: 1.5em;
    line-height: 0.7;
    font-weight: 300;
    transform: translateY(-1px);
}
.hanlan-context-menu-item--has-submenu:hover .hanlan-context-menu-arrow {
    opacity: 1;
}

/* Submenu reuses .hanlan-context-menu styling; positioned via JS */
.hanlan-context-menu.hanlan-context-menu--submenu {
    position: fixed;
}

/* Context menu toggle button */
.hanlan-context-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 10px;
    margin: 0;
    border-radius: var(--hanlan-radius);
    font-size: var(--hanlan-font-size-base);
    white-space: nowrap;
}

/* Active toggle in context menu — keep proper padding (base --active sets padding:1px for icon toggles) */
.hanlan-context-menu-toggle.hanlan-btn-toggle--active {
    padding: 10px;
}

/* Context menu checkbox item */
.hanlan-context-menu-check {
    width: 1em;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ========================================
   Tabs Component
   ======================================== */

.hanlan-tabs {
    display: flex;
    flex-direction: row;
    gap: var(--hanlan-space-sm);
    width: 100%;
}

.hanlan-tab {
    padding: var(--hanlan-space-sm) var(--hanlan-space-lg);
    background: var(--hanlan-color-bg-input);
    border: none;
    color: var(--hanlan-color-text-muted);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    cursor: pointer;
    transition: color var(--hanlan-transition-base),
        background-color var(--hanlan-transition-base),
        filter var(--hanlan-transition-base);
    user-select: none;
    outline: none;
    border-radius: var(--hanlan-radius);
    flex: 1;
}

.hanlan-tab:hover {
    color: var(--hanlan-color-text);
    background: var(--hanlan-color-bg-hover);
}

.hanlan-tab--active {
    background: var(--hanlan-plugin-gradient);
    color: #ffffff;
}

.hanlan-tab--active:hover {
    background: var(--hanlan-plugin-gradient-hover);
    color: #ffffff;
    filter: brightness(1.1);
}

.hanlan-tab:active,
.hanlan-tab--active:active {
    transform: none;
}

/* ========================================
   Horizontal Overflow Chevron (Opt-in)
   ======================================== */

.hanlan-overflow-row {
    position: relative;
    padding-right: 24px;
}

.hanlan-overflow-chevron {
    position: absolute;
    right: var(--hanlan-space-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: calc(var(--hanlan-radius) - 2px);
    border: none;
    background: var(--hanlan-color-bg-input);
    color: var(--hanlan-color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base),
        opacity var(--hanlan-transition-base);
    opacity: 0.9;
}

.hanlan-overflow-chevron:hover {
    background: var(--hanlan-color-bg-hover);
    color: var(--hanlan-color-text);
    opacity: 1;
}

.hanlan-overflow-chevron::before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Invalid value shake animation */
.hanlan-scrub-label--invalid {
    animation: hanlan-shake 0.3s ease-out;
    border-color: var(--hanlan-color-error) !important;
    box-shadow: 0 0 0 1px var(--hanlan-color-error), 0 0 8px rgba(255, 69, 58, 0.3) !important;
}

@keyframes hanlan-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* ========================================
   Button Group Component
   Visually connects adjacent controls (e.g., stepper + button)
   ======================================== */

.hanlan-button-group {
    display: inline-flex;
    align-items: stretch;
    height: var(--hanlan-control-height);
}

.hanlan-button-group > *:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.hanlan-button-group > *:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

.hanlan-button-group > *:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-left: none;
}

/* ========================================
   Scrub Label Component
   ======================================== */

.hanlan-scrub-label {
    --hanlan-scrub-height: var(--hanlan-control-height);
    --hanlan-scrub-radius: var(--hanlan-radius);
    --hanlan-scrub-padding-x: var(--hanlan-space-xs);
    --hanlan-scrub-gap: var(--hanlan-space-xs);
    --hanlan-scrub-value-width: 4ch;
    --hanlan-scrub-suffix-width: 2ch;
    --hanlan-scrub-chevron-width: 16px;
    --hanlan-scrub-chevron-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2715%2018%209%2012%2015%206%27/%3E%3C/svg%3E");
    --hanlan-scrub-chevron-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%279%206%2015%2012%209%2018%27/%3E%3C/svg%3E");
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hanlan-scrub-gap);
    padding: 0 var(--hanlan-scrub-padding-x);
    height: var(--hanlan-scrub-height);
    min-width: calc(var(--hanlan-scrub-value-width) + var(--hanlan-scrub-suffix-width) + (var(--hanlan-scrub-chevron-width) * 2) + (var(--hanlan-scrub-padding-x) * 2));
    border: none;
    border-radius: var(--hanlan-scrub-radius);
    background: var(--hanlan-color-bg-input);
    box-shadow: none;
    cursor: ew-resize;
    user-select: none;
    font-family: var(--hanlan-font-family-mono);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    letter-spacing: 0.02em;
    color: var(--hanlan-color-text);
    transition:
        border-color var(--hanlan-transition-base),
        box-shadow var(--hanlan-transition-base),
        background-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base);
}

.hanlan-scrub-label:hover {
    background: var(--hanlan-color-bg-hover);
}

/* Light theme: drop the gradient overlay — it muddies the look on
   light backgrounds. Use a flat fill that matches input styling. */
body.hanlan_theme_light .hanlan-scrub-label {
    background: var(--hanlan-color-bg-input);
    box-shadow: none;
}

body.hanlan_theme_light .hanlan-scrub-label:hover {
    background: var(--hanlan-color-bg-hover);
}

.hanlan-scrub-label--dragging {
    box-shadow:
        0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd)),
        inset 0 0 0 1px var(--hanlan-color-focus-ring-lg);
}

.hanlan-scrub-label--dragging .hanlan-scrub-label__chevron {
    color: var(--hanlan-color-text);
}

.hanlan-scrub-label--dragging .hanlan-scrub-label__chevron::before {
    opacity: 1;
}

.hanlan-scrub-label--editing {
    cursor: text;
    box-shadow:
        0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd)),
        inset 0 0 0 1px var(--hanlan-color-focus-ring-lg);
}

.hanlan-scrub-label__chevron {
    width: var(--hanlan-scrub-chevron-width);
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--hanlan-color-text-secondary);
    opacity: 0.9;
    transition: color var(--hanlan-transition-base), opacity var(--hanlan-transition-base), transform var(--hanlan-transition-base);
}

.hanlan-scrub-label__chevron::before {
    content: '';
    width: 11px;
    height: 11px;
    display: block;
    background: currentColor;
    opacity: 0.82;
    transition: opacity var(--hanlan-transition-base);
}

.hanlan-scrub-label__chevron--left::before {
    -webkit-mask: var(--hanlan-scrub-chevron-left) center/contain no-repeat;
    mask: var(--hanlan-scrub-chevron-left) center/contain no-repeat;
}

.hanlan-scrub-label__chevron--right::before {
    -webkit-mask: var(--hanlan-scrub-chevron-right) center/contain no-repeat;
    mask: var(--hanlan-scrub-chevron-right) center/contain no-repeat;
}

.hanlan-scrub-label:hover .hanlan-scrub-label__chevron {
    color: var(--hanlan-color-text);
}

.hanlan-scrub-label:hover .hanlan-scrub-label__chevron::before {
    opacity: 1;
}

.hanlan-scrub-label__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hanlan-space-xxs);
    min-width: calc(var(--hanlan-scrub-value-width) + var(--hanlan-scrub-suffix-width));
    padding: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hanlan-scrub-label__value {
    min-width: var(--hanlan-scrub-value-width);
    text-align: center;
}

.hanlan-scrub-label__suffix {
    color: var(--hanlan-color-text-muted);
    font-size: 0.9em;
    opacity: 0.9;
}

.hanlan-scrub-label__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 var(--hanlan-scrub-padding-x);
    margin: 0;
    border: none;
    background: transparent;
    appearance: textfield;
    -webkit-appearance: none;
    font-family: var(--hanlan-font-family-mono);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--hanlan-color-text);
    text-align: center;
    outline: none;
    caret-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-sizing: border-box;
    display: none;
}

.hanlan-scrub-label__input::-webkit-outer-spin-button,
.hanlan-scrub-label__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hanlan-scrub-label__input {
    -moz-appearance: textfield;
}

.hanlan-scrub-label--editing .hanlan-scrub-label__input {
    display: block;
}

.hanlan-scrub-label--editing .hanlan-scrub-label__content,
.hanlan-scrub-label--editing .hanlan-scrub-label__chevron {
    visibility: hidden;
}

/* ========================================
   Rotation Dial Component
   ======================================== */

.hanlan-rotation-dial {
    --rotation-dial-accent: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    --rotation-dial-accent-hover: var(--hanlan-plugin-gradient-first-color-hover, #8ea6ff);

    position: relative;
    width: var(--hanlan-control-visual-size);
    height: var(--hanlan-control-visual-size);
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}

.hanlan-rotation-dial__circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base),
        box-shadow var(--hanlan-transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hanlan-rotation-dial:hover .hanlan-rotation-dial__circle {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hanlan-rotation-dial--active .hanlan-rotation-dial__circle,
.hanlan-rotation-dial:active .hanlan-rotation-dial__circle {
    background: var(--hanlan-color-bg-input);
    border-color: var(--hanlan-color-border);
    box-shadow: none;
}

.hanlan-rotation-dial__indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 45%;
    background: var(--rotation-dial-accent);
    transform-origin: center bottom;
    transform: translate(-50%, -100%) rotate(var(--rotation-angle, 0deg));
    border-radius: 1px;
    transition: background-color var(--hanlan-transition-base);
    pointer-events: none;
}

.hanlan-rotation-dial:hover .hanlan-rotation-dial__indicator,
.hanlan-rotation-dial--active .hanlan-rotation-dial__indicator {
    background: var(--rotation-dial-accent-hover);
}

.hanlan-rotation-dial__tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(2px) scale(0.985);
    transform-origin: center top;
    background: var(--hanlan-tooltip-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-tooltip-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
    color: var(--hanlan-tooltip-text);
    font-size: var(--hanlan-font-size-base);
    font-family: var(--hanlan-font-family-mono);
    font-weight: var(--hanlan-font-weight-medium);
    white-space: nowrap;
    z-index: var(--hanlan-z-tooltip);
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--hanlan-duration-fast) var(--hanlan-ease-out),
        transform var(--hanlan-duration-fast) var(--hanlan-ease-out);
    font-variant-numeric: tabular-nums;
}

.hanlan-rotation-dial--show-tooltip .hanlan-rotation-dial__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.hanlan-rotation-dial:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.hanlan-scrub-label--error {
    border-color: #ff4444;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: hanlan-scrub-shake 0.4s cubic-bezier(.36, .07, .19, .97);
}

@keyframes hanlan-scrub-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-2px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(2px);
    }
}

/* ========================================
   Token System (Smart Naming)
   ======================================== */

.hanlan-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hanlan-smart-naming-token-gap);
    min-height: 32px;
    padding: var(--hanlan-space-xs);
    border-radius: var(--hanlan-radius);
    transition: background-color var(--hanlan-transition-base);
    position: relative;
}

.hanlan-token-list.active-tokens {
    background: rgba(0, 0, 0, 0.1);
    border: 1px dashed var(--hanlan-color-border);
}

.hanlan-token {
    display: inline-flex;
    align-items: center;
    height: var(--hanlan-control-height);
    padding: 0 var(--hanlan-space-sm);
    border-radius: 4px;
    /* Pill-ish but slightly squared for tech feel */
    font-family: var(--hanlan-font-family-base);
    font-size: 11px;
    font-weight: var(--hanlan-font-weight-medium);
    cursor: pointer;
    user-select: none;
    transition: all var(--hanlan-transition-base);
    border: 1px solid transparent;
}

/* Inactive State */
.hanlan-token--inactive {
    background: var(--hanlan-color-bg-input);
    color: var(--hanlan-color-text-muted);
    border-color: var(--hanlan-color-border);
}

.hanlan-token--inactive:hover {
    background: var(--hanlan-color-bg-hover);
    color: var(--hanlan-color-text);
    border-color: var(--hanlan-color-border-strong);
}

/* Token already present in the active pattern — fade so it reads as
   "already in use" without disabling. Click still adds another instance. */
.hanlan-token--in-use {
    opacity: 0.5;
}

.hanlan-token--in-use:hover {
    opacity: 0.85;
}

/* Featured chips (e.g. CSV column tokens) — accent-tinted fill so
   data-driven tokens stand out from built-ins without screaming.
   All colours come from the token block in :root for consistency. */
.hanlan-token--featured {
    background: var(--hanlan-token-featured-bg);
    color: var(--hanlan-color-text);
    border-color: var(--hanlan-token-featured-border);
}

.hanlan-token--featured:hover {
    background: var(--hanlan-token-featured-bg-hover);
    border-color: var(--hanlan-plugin-accent);
    color: var(--hanlan-color-text);
}

.hanlan-token-list--featured {
    margin-top: calc(var(--hanlan-smart-naming-token-gap) / 2);
    margin-bottom: var(--hanlan-smart-naming-token-gap);
}

.hanlan-naming-featured-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hanlan-color-text-muted);
    margin-top: var(--hanlan-smart-naming-token-gap);
    margin-bottom: calc(var(--hanlan-smart-naming-token-gap) / 2);
}

.hanlan-naming-featured-label--secondary {
    opacity: 0.7;
}

/* Pattern Preview — small uppercase label + larger preview value below.
   The preview is the load-bearing piece of feedback in any rename modal,
   so it gets stronger hierarchy than the label that introduces it. */
.hanlan-naming-preview-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hanlan-color-text-muted);
    margin-bottom: var(--hanlan-space-xxs);
}

.hanlan-naming-preview-value {
    font-size: 15px;
    line-height: 1.3;
    color: var(--hanlan-plugin-accent);
    margin-bottom: var(--hanlan-space-sm);
    word-break: break-all;
}

/* Active State */
.hanlan-token--active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, #6b8afd, #8b5cf6));
    color: #ffffff;
    padding-right: 4px;
    /* Space for remove button */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: grab;
}

.hanlan-token--active:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: filter var(--hanlan-transition-fast) 0.1s, box-shadow var(--hanlan-transition-fast) 0.1s;
}

/* Separator tokens — same styling as content tokens */

.hanlan-token.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.hanlan-token--active:active {
    cursor: grabbing;
}

.hanlan-token-drop-indicator {
    position: absolute;
    width: 2px;
    height: 18px;
    background: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    border-radius: 1px;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 6px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    opacity: 0;
}

.hanlan-token-drop-indicator.show {
    opacity: 1;
}

.hanlan-token-content {
    margin-right: 4px;
    pointer-events: none;
}

.hanlan-token--inactive .hanlan-token-content {
    margin-right: 0;
}

.hanlan-token-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-left: var(--hanlan-space-xs);
    cursor: pointer;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
    font-size: 10px;
    line-height: 1;
    pointer-events: auto;
}

.hanlan-token-remove:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.hanlan-token-remove svg {
    width: 8px;
    height: 8px;
    stroke-width: 3;
}

/* ========================================
   Color Picker Styling (Native)
   ======================================== */

input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    border: 2px solid var(--hanlan-color-border);
    border-radius: var(--hanlan-radius);
    cursor: pointer;
    background: transparent;
    padding: 2px;
    transition: border-color var(--hanlan-transition-base);
}

input[type="color"]:hover {
    border-color: var(--hanlan-color-border-strong);
}

input[type="color"]:focus {
    border-color: var(--hanlan-color-accent);
    outline: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: calc(var(--hanlan-radius) - 2px);
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--hanlan-radius) - 4px);
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--hanlan-radius) - 4px);
}

/* ========================================
   Dropdown / Select Component
   ======================================== */

/* Dropdown + fallback for plugins using .dropdown */
.hanlan-dropdown,
.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.hanlan-dropdown-trigger {
    position: relative;
}

.hanlan-dropdown-trigger,
select {
    position: relative;
    width: 100%;
    min-height: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    padding-right: 24px;
    /* Space for arrow */
    background: var(--hanlan-color-bg-input);
    border: 1px solid var(--hanlan-control-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all var(--hanlan-transition-base);
    display: flex;
    align-items: center;
}

select:hover,
.hanlan-dropdown-trigger:hover {
    background-color: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-control-border-strong);
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
}

select:focus,
.hanlan-dropdown-trigger:focus {
    border-color: var(--hanlan-color-accent);
    outline: none;
}

/* Subtle focus indicator for dropdowns when accessibility enabled */
.hanlan-accessibility-enabled .hanlan-dropdown-trigger:focus-visible,
.hanlan-accessibility-enabled select:focus-visible {
    outline: 1px solid var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    outline-offset: 2px;
    opacity: 0.6;
}

select:active,
.hanlan-dropdown-trigger:active {
    transform: none;
}


.hanlan-dropdown-trigger::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: auto;
    display: inline-block;
    flex-shrink: 0;
    position: absolute;
    right: var(--hanlan-space-sm);
    border-right: 1.5px solid var(--hanlan-color-text-muted);
    border-bottom: 1.5px solid var(--hanlan-color-text-muted);
    top: 50%;
    transform: translateY(-75%) rotate(45deg);
    transform-origin: center;
    transition: transform var(--hanlan-duration-normal) var(--hanlan-ease-out);
}

.hanlan-dropdown.open .hanlan-dropdown-trigger::after {
    transform: translateY(-25%) rotate(-135deg);
}

.hanlan-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--hanlan-space-xs));
    left: 0;
    transform-origin: top left;
    /* Natural width based on content, with sensible constraints */
    min-width: 100%;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    background: var(--hanlan-menu-surface-bg, var(--hanlan-glass-bg));
    color: var(--hanlan-menu-text, var(--hanlan-color-text));
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    /* No border — inset shadow below acts as the visible rim. */
    border: none;
    border-radius: var(--hanlan-radius);
    padding: 8px;
    /* Inset rim so the boundary renders inside the border-box — outer
       shadow rims get clipped when a dropdown sits inside an ancestor
       with overflow:hidden (e.g., .queue-section), making the left edge
       invisible. Inset rim can never be clipped. */
    box-shadow:
        inset 0 0 0 1px var(--hanlan-menu-surface-border, var(--hanlan-glass-border)),
        0 8px 32px rgba(0, 0, 0, 0.25);
    /* Restore alpha-mask fade for scrolled content (top/bottom edges of the
       items list fade out as the user scrolls). Mask-image is disabled —
       masking the whole element makes the dropdown background alpha-
       transparent at the fade region, exposing whatever is behind. Use the
       sticky overlay divs (with bg-coloured gradients) instead so items
       fade INTO the dropdown's own background colour. */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    z-index: var(--hanlan-z-dropdown, 1000);
    max-height: var(--hanlan-dropdown-max-height);
    overflow-y: auto;
    overflow-x: hidden;
    --hanlan-scroll-fade-bg: var(--hanlan-menu-surface-bg, var(--hanlan-color-bg-panel));
    /* Subtle fade band — small enough not to dominate the first/last item. */
    --hanlan-scroll-fade-size: 14px;
    display: none;
}

/* When the dropdown menu actually scrolls, JS adds this class so the
   scrollbar reserves its own gutter inside the padding-box (keeping it
   inset from the menu edge instead of flush against it). Only applied
   when scrolling so non-scrolling menus stay symmetric. */
.hanlan-dropdown-menu.hanlan-dropdown-menu--scrollable {
    scrollbar-gutter: stable;
}

/* Scroll-fade overlays inside dropdown menus: since mask-image is
   disabled on dropdowns, use gradient backgrounds on the sticky
   overlay divs to provide the visual fade. */
.hanlan-dropdown-menu > .hanlan-scroll-fade__top {
    background: linear-gradient(
        to bottom,
        var(--hanlan-scroll-fade-bg, var(--hanlan-color-bg-panel)) 0%,
        transparent 100%
    );
}
.hanlan-dropdown-menu > .hanlan-scroll-fade__bottom {
    background: linear-gradient(
        to top,
        var(--hanlan-scroll-fade-bg, var(--hanlan-color-bg-panel)) 0%,
        transparent 100%
    );
}

/* Portal dropdown menus (used inside context menus to avoid clipping) */
.hanlan-dropdown-menu--portal {
    position: fixed;
    left: 0;
    top: 0;
    transform-origin: top left;
    z-index: calc(var(--hanlan-z-context-menu, 3200) + 1);
    display: none;
}

.hanlan-dropdown-menu--portal-open {
    display: block;
}

.hanlan-dropdown.open .hanlan-dropdown-menu {
    display: block;
}

/* Upward positioning when near bottom edge */
.hanlan-dropdown.open.hanlan-dropdown--upward .hanlan-dropdown-menu {
    top: auto;
    bottom: calc(100% + var(--hanlan-space-xs));
    transform-origin: bottom left;
}

/* Shift left when menu would overflow right edge of viewport */
.hanlan-dropdown.open.hanlan-dropdown--shift-left .hanlan-dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
}

.hanlan-dropdown.open.hanlan-dropdown--upward.hanlan-dropdown--shift-left .hanlan-dropdown-menu {
    transform: none;
}

/* Shift right when menu would overflow left edge of viewport */
.hanlan-dropdown.open.hanlan-dropdown--shift-right .hanlan-dropdown-menu {
    left: 0;
    right: auto;
    transform: none;
}

.hanlan-dropdown.open.hanlan-dropdown--upward.hanlan-dropdown--shift-right .hanlan-dropdown-menu {
    transform: none;
}

/* Legacy class support - maps to shift-left behavior */
.hanlan-dropdown.open.hanlan-dropdown--left .hanlan-dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
}

.hanlan-dropdown.open.hanlan-dropdown--upward.hanlan-dropdown--left .hanlan-dropdown-menu {
    transform: none;
}

.hanlan-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-xs);
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-bottom: var(--hanlan-menu-gap);
    color: var(--hanlan-menu-text, var(--hanlan-color-text));
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    border-radius: calc(var(--hanlan-radius) - 2px);
    cursor: pointer;
    transition: background-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base);
    user-select: none;
}

.hanlan-dropdown-item:last-child {
    margin-bottom: 0;
}

.hanlan-dropdown-item:hover {
    background: var(--hanlan-menu-hover-bg, var(--hanlan-color-bg-hover));
    color: var(--hanlan-menu-hover-text, var(--hanlan-color-text));
}

.hanlan-dropdown-item--active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    color: #ffffff;
}

.hanlan-dropdown-item--active:hover {
    background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient, linear-gradient(135deg, #8ea6ff, #a87cff)));
    filter: brightness(1.1);
    transition: filter var(--hanlan-transition-fast) 0.1s;
}

.hanlan-dropdown-item[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    filter: saturate(0.6);
}

/* Dropdown header/separator for category titles */
.hanlan-dropdown-menu .hanlan-title,
.hanlan-dropdown .hanlan-title {
    padding-top: 0;
    margin-top: var(--hanlan-space-sm);
    margin-bottom: var(--hanlan-space-xs);
    margin-left: 0;
    margin-right: 0;
}

/* First category title — no extra top margin */
.hanlan-dropdown-menu .hanlan-title:first-child,
.hanlan-dropdown .hanlan-title:first-child {
    margin-top: 0;
    user-select: none;
    pointer-events: none;
    /* Inherits all heading styles from .hanlan_heading - ensure key properties are enforced */
    text-transform: uppercase !important;
    font-weight: var(--hanlan-font-weight-semibold) !important;
    letter-spacing: 0.1em !important;
    font-size: var(--hanlan-font-size-heading) !important;
    color: var(--hanlan-color-text) !important;
}

.hanlan-dropdown-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: var(--hanlan-space-xs) var(--hanlan-space-md);
    border: none;
    padding: 0;
}

/* First header: minimal top */
.hanlan-dropdown-menu .hanlan-title:first-child,
.hanlan-dropdown .hanlan-title:first-child {
    padding-top: 0;
    margin-top: 2px;
}

/* ========================================
   Toolbar Component (Dynamic)
   ======================================== */

.hanlan-toolbar {
    position: fixed;
    bottom: var(--hanlan-space-md);
    left: var(--hanlan-space-md);
    right: var(--hanlan-space-md);
    background: var(--hanlan-floating-surface-bg, var(--hanlan-glass-bg));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--hanlan-control-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-md) var(--hanlan-space-lg);
    z-index: var(--hanlan-z-toolbar, 1100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
    animation: hanlan-slideInUp var(--hanlan-duration-normal) var(--hanlan-ease-out) forwards;
}

/* Light theme: no per-component override needed.
   Inherits glass treatment from --hanlan-glass-bg / --hanlan-glass-border. */

.hanlan-toolbar.hanlan-toolbar-exiting {
    animation: hanlan-slideOutDown var(--hanlan-duration-normal) var(--hanlan-ease-out) forwards;
}

/* v1.1 polish — responsive shrinking for the dynamic toolbar so the
   primary action doesn't wrap to 2 lines and the "X selected" counter
   doesn't clip off-screen when the panel is docked narrow.
   The Add-to-Queue button text is already implicitly the count
   ("Add 2 to Queue"), so the right-section counter becomes redundant
   below ~440px — hiding it gives the buttons the breathing room they need. */
.hanlan-toolbar .hanlan-btn--primary {
    white-space: nowrap;
}
@media (max-width: 440px) {
    .hanlan-toolbar #queue-toolbar-selection-count,
    .hanlan-toolbar #preset-toolbar-selection-count {
        display: none;
    }
}
@media (max-width: 360px) {
    /* At truly narrow widths, also tighten button padding so the row fits.
       Counter is already hidden; this just buys back a few more px for the
       primary action + middleSection icons. */
    .hanlan-toolbar {
        padding: var(--hanlan-space-sm) var(--hanlan-space-md);
    }
    .hanlan-toolbar .hanlan-btn--primary {
        padding-left: var(--hanlan-space-sm);
        padding-right: var(--hanlan-space-sm);
        font-size: 12px;
    }
}

/* Fixed bottom action buttons (settings, info) — corner-positioned */
.hanlan-bottom-actions {
    position: fixed;
    bottom: var(--hanlan-space-md);
    right: var(--hanlan-space-md);
    left: auto;
    display: flex;
    gap: var(--hanlan-space-xs);
    z-index: var(--hanlan-z-toolbar, 1000);
    background: none;
    border-top: none;
    padding: 0;
}

/* Panel footer - fixed bottom bar for info/settings buttons */
.hanlan-panel-footer {
    position: fixed;
    bottom: var(--hanlan-space-sm);
    right: var(--hanlan-space-sm);
    z-index: var(--hanlan-z-toolbar, 1000);
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-xs);
}

/* Standardized info/settings button classes - extend .hanlan-btn-icon */
.hanlan-info-btn,
.hanlan-settings-btn {
    /* Inherits from .hanlan-btn-icon - just semantic aliases */
}

/* Ensure info/settings buttons in footer have consistent icon styling */
.hanlan-bottom-actions .hanlan-btn-icon svg,
.hanlan-bottom-actions .hanlan-btn-icon img,
.hanlan-panel-footer .hanlan-btn-icon svg,
.hanlan-panel-footer .hanlan-btn-icon img {
    width: 16px;
    height: 16px;
    opacity: 0.85;
    fill: currentColor;
    stroke: currentColor;
    filter: none;
    transition: opacity 200ms var(--hanlan-ease-in-out);
}

.hanlan-bottom-actions .hanlan-btn-icon:hover svg,
.hanlan-bottom-actions .hanlan-btn-icon:hover img,
.hanlan-panel-footer .hanlan-btn-icon:hover svg,
.hanlan-panel-footer .hanlan-btn-icon:hover img {
    opacity: 1;
}

/* ========================================
   Switch Component
   ======================================== */

.hanlan-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    /* Ensure switch doesn't get squished */
}

.hanlan-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
    padding: 0;
}

.hanlan-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: 999px;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
    /* Ensure slider is always visible */
    box-sizing: border-box;
}

.hanlan-switch-slider:hover {
    border-color: var(--hanlan-color-border-strong);
}

.hanlan-switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--hanlan-color-text);
    border-radius: 50%;
    transition: transform var(--hanlan-transition-base);
    box-sizing: border-box;
}

.hanlan-switch input:checked+.hanlan-switch-slider {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border: none;
}

.hanlan-switch input:checked+.hanlan-switch-slider:hover {
    background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient, linear-gradient(135deg, #8ea6ff, #a87cff)));
}

.hanlan-switch input:checked+.hanlan-switch-slider:before {
    transform: translateX(16px) translateY(-50%);
    background: #ffffff;
}

/* Disabled state */
.hanlan-switch input:disabled+.hanlan-switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Checkbox Component (Global Override)
   ======================================== */

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    min-width: var(--hanlan-control-height);
    min-height: var(--hanlan-control-height);
    margin: 0;
    padding: 0;
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    cursor: pointer;
    position: relative;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
    flex-shrink: 0;
}

input[type="checkbox"]:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}

input[type="checkbox"]:checked {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    /* Border kept at 1px so the box stays the same size as unchecked, but
     * recoloured to match the white inset frame — together they read as
     * a single 3px white frame around the orange centre. No orange band
     * peeks through outside the white. */
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

input[type="checkbox"]:checked:hover {
    background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient, linear-gradient(135deg, #8ea6ff, #a87cff)));
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: none;
}

input[type="checkbox"]:checked:focus,
input[type="checkbox"]:checked:focus-visible {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* ========================================
   Radio Component (Global Override)
   ======================================== */

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all var(--hanlan-transition-base);
    flex-shrink: 0;
}

input[type="radio"]:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}

input[type="radio"]:checked {
    background: var(--hanlan-color-bg-input);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
}

input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
}

input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 2px var(--hanlan-color-focus-ring);
    border-color: var(--hanlan-color-accent);
}

/* ========================================
   Slider Component (Global Override)
   ======================================== */

input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: transparent;
    border-radius: 4px;
    outline: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -4px;
    transition: transform var(--hanlan-transition-base);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--hanlan-transition-base);
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: var(--hanlan-color-border);
    border-radius: 4px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: var(--hanlan-color-border);
    border-radius: 4px;
}

input[type="range"]:focus-visible {
    outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: none;
}

input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: none;
}

/* ========================================
   Slider Tooltip Component
   ======================================== */

.hanlan-slider-tooltip {
    position: fixed;
    background: var(--hanlan-tooltip-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-tooltip-border);
    border-radius: var(--hanlan-radius);
    padding: 2px 6px;
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    color: var(--hanlan-tooltip-text);
    pointer-events: none;
    z-index: var(--hanlan-z-tooltip, 3500);
    white-space: nowrap;
    box-shadow: var(--hanlan-glass-shadow);
    text-align: center;
    min-width: 32px;
    /* Fade in animation - slides down from above */
    opacity: 0;
    transform: translateY(4px) scale(0.985);
    transform-origin: center top;
    transition: opacity var(--hanlan-duration-fast) var(--hanlan-ease-out),
        transform var(--hanlan-duration-fast) var(--hanlan-ease-out);
}

.hanlan-slider-tooltip.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Tooltip positioned below (when near top edge) */
.hanlan-slider-tooltip[data-position="below"] {
    transform: translateY(-4px) scale(0.985);
    transform-origin: center bottom;
}

.hanlan-slider-tooltip[data-position="below"].show {
    transform: translateY(0) scale(1);
}

/* ========================================
   Slider Container (for unified numericControl API)
   ======================================== */

.hanlan-slider-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.hanlan-slider-container input[type="range"] {
    flex: 1;
    min-width: 0; /* Allow shrinking below content size */
}

/* ========================================
    border-color: var(--hanlan-color-border-strong);
}

select:focus {
    outline: none;
    background-color: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

select:focus-visible {
    outline: none;
}

/* ========================================
   Animation Keyframes
   ======================================== */

@keyframes hanlan-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Panel load animation - subtle fade in */
@keyframes hanlan-panelLoad {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hanlan-fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes hanlan-tooltipIn {
    from {
        opacity: 0;
        transform: translateY(2px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hanlan-tooltipOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(2px) scale(0.985);
    }
}

@keyframes hanlan-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hanlan-scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes hanlan-modalIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hanlan-modalOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes hanlan-slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hanlan-toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes hanlan-slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes hanlan-slideInUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hanlan-slideOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes hanlan-listItemSlideIn {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   Color Picker Component
   ======================================== */

.hanlan-color-picker {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), var(--hanlan-glass-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-glass-border);
    border-radius: calc(var(--hanlan-radius) + 4px);
    padding: var(--hanlan-space-lg);
    min-width: 220px;
    max-width: 220px;
    box-shadow: var(--hanlan-shadow-lg);
    z-index: var(--hanlan-z-color-picker, 10100);
    animation: hanlan-scaleIn var(--hanlan-duration-normal) var(--hanlan-ease-out) forwards;
}

/* Hue wheel container */
.hanlan-color-picker-wheel-container {
    position: relative;
    width: 176px;
    height: 176px;
    margin: 0 auto var(--hanlan-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hue wheel canvas */
.hanlan-color-picker-wheel {
    width: 176px;
    height: 176px;
    cursor: crosshair;
    border-radius: 50%;
    border: 1px solid var(--hanlan-color-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* Wheel indicator - border/shadow set dynamically by JS for contrast */
.hanlan-color-picker-wheel-indicator {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

/* Sliders section */
.hanlan-color-picker-sliders {
    margin-bottom: var(--hanlan-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-sm);
}

.hanlan-color-picker-slider-row {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-sm);
}

.hanlan-color-picker-slider-label {
    font-size: 11px;
    font-weight: var(--hanlan-font-weight-semibold);
    color: var(--hanlan-color-text);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.hanlan-color-picker-slider {
    flex: 1;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.hanlan-color-picker-range {
    width: 100%;
    height: 22px;
    background: transparent;
}

.hanlan-color-picker-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    background: var(--hanlan-slider-gradient, var(--hanlan-color-border));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.hanlan-color-picker-range::-moz-range-track {
    width: 100%;
    height: 10px;
    background: var(--hanlan-slider-gradient, var(--hanlan-color-border));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.hanlan-color-picker-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.hanlan-color-picker-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.hanlan-color-picker-range:focus-visible {
    outline: none;
}

.hanlan-color-picker-input-row {
    display: flex;
    gap: var(--hanlan-space-sm);
    margin-bottom: var(--hanlan-space-md);
}

.hanlan-color-picker-input {
    flex: 1;
    min-height: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-mono);
    font-size: var(--hanlan-font-size-base);
    outline: none;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
}

.hanlan-color-picker-input:focus {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-color-picker-preview {
    position: relative;
    width: 44px;
    height: var(--hanlan-control-height);
    min-width: 44px;
    border: var(--hanlan-border-hover);
    border-radius: var(--hanlan-radius);
    background: #000;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: border-color var(--hanlan-transition-base), transform var(--hanlan-transition-base);
    overflow: hidden;
}

.hanlan-color-picker-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, #808080 25%, transparent 25%),
        linear-gradient(-45deg, #808080 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #808080 75%),
        linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    background-color: #404040;
    z-index: 0;
    border-radius: inherit;
}

.hanlan-color-picker-preview-color {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.hanlan-color-picker-preview:hover {
    border-color: var(--hanlan-color-border-strong);
}

.hanlan-color-picker-copy-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    opacity: 0;
    transition: opacity var(--hanlan-transition-base);
    border-radius: inherit;
    z-index: 2;
}

.hanlan-color-picker-preview:hover .hanlan-color-picker-copy-icon {
    opacity: 1;
}

.hanlan-color-picker-preview--copied .hanlan-color-picker-copy-icon {
    opacity: 1;
    background: rgba(52, 199, 89, 0.8);
}

.hanlan-color-picker-section {
    margin-bottom: var(--hanlan-space-lg);
}

.hanlan-color-picker-section-title {
    font-size: 11px;
    font-weight: var(--hanlan-font-weight-medium);
    color: var(--hanlan-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--hanlan-space-sm);
}

.hanlan-color-picker-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hanlan-space-xs);
}

.hanlan-color-picker-swatch {
    width: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    cursor: pointer;
    transition: border-color var(--hanlan-transition-base);
    position: relative;
}

.hanlan-color-picker-swatch:hover {
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    z-index: 1;
}

.hanlan-color-picker-swatch--dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.hanlan-color-picker-swatch--drag-over {
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: 0 0 0 2px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-color-picker-add-swatch {
    width: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border-hover);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base);
}

.hanlan-color-picker-add-swatch:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-color-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--hanlan-space-sm);
    margin-top: var(--hanlan-space-md);
}

/* Swatch delete overlay - appears on long press */
.hanlan-color-picker-swatch--deleting::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--hanlan-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hanlan-color-picker-swatch--deleting::before {
    content: "×";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hanlan-color-error);
    font-size: 20px;
    font-weight: bold;
    z-index: 1;
    pointer-events: none;
}

/* ========================================
   Color Trigger Button (opens color picker)
   ======================================== */

.hanlan-color-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--hanlan-space-sm);
    height: var(--hanlan-control-height);
    padding: 0 var(--hanlan-space-sm);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    cursor: pointer;
    transition:
        background var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base),
        box-shadow var(--hanlan-transition-base);
}

.hanlan-color-trigger:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}

.hanlan-color-trigger:focus-visible {
    outline: none;
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: 0 0 0 2px var(--hanlan-color-focus-ring);
}

.hanlan-color-trigger-swatch {
    width: 18px;
    height: 18px;
    border-radius: calc(var(--hanlan-radius) - 2px);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    /* Checkerboard for transparency indication */
    background-image:
        linear-gradient(45deg, rgba(128, 128, 128, 0.3) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(128, 128, 128, 0.3) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.3) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.3) 75%);
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
    position: relative;
}

.hanlan-color-trigger-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--hanlan-color-trigger-value, #6b8afd);
}

.hanlan-color-trigger-value {
    font-family: var(--hanlan-font-mono);
    font-size: 11px;
    color: var(--hanlan-color-text);
    text-transform: uppercase;
    min-width: 58px;
}

/* ========================================
   Curve Editor Component
   ======================================== */

.hanlan-curve-editor {
    width: 160px;
    height: 160px;
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    position: relative;
    overflow: visible;
    touch-action: none;
    user-select: none;
}

.hanlan-curve-editor__canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.hanlan-curve-editor__grid line {
    stroke: var(--hanlan-color-border);
    stroke-width: 1;
    opacity: 0.7;
}

.hanlan-curve-editor__diagonal {
    stroke: var(--hanlan-color-border);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.3;
}

.hanlan-curve-editor__curve-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    stroke-linecap: round;
    cursor: crosshair;
    pointer-events: stroke;
}

.hanlan-curve-editor__curve-hit:hover+.hanlan-curve-editor__curve {
    stroke-width: 2.5;
}

.hanlan-curve-editor__curve {
    fill: none;
    stroke: var(--hanlan-color-text);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.hanlan-curve-editor__endpoint {
    fill: var(--hanlan-color-bg-elevated);
    stroke: var(--hanlan-color-text);
    stroke-width: 2;
    pointer-events: none;
}

.hanlan-curve-editor__handle {
    fill: url(#hanlan-curve-handle-gradient);
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
    cursor: grab;
    pointer-events: auto;
    transition: filter var(--hanlan-transition-base);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.hanlan-curve-editor__handle:hover {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.hanlan-curve-editor__handle:active,
.hanlan-curve-editor__handle--dragging {
    cursor: grabbing;
}

/* (Context Menu Component — duplicate section removed, defined earlier) */

/* Setting row layout for context menus and panels */
.hanlan-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hanlan-space-md);
    padding: var(--hanlan-space-sm) var(--hanlan-space-lg);
    min-height: var(--hanlan-control-height);
}

.hanlan-setting-row-label {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-xs);
    flex-shrink: 0;
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
}

.hanlan-setting-row-control {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-sm);
    flex-shrink: 0;
}

/* Info icon for setting descriptions - appears next to label */
.hanlan-setting-row .hanlan-info-icon {
    margin-left: 0;
}

/* Hide any subtext by default in setting rows - use info icon instead */
.hanlan-setting-row-subtext {
    display: none;
}

/* ========================================
   Tooltip Component
   ======================================== */

.hanlan-tooltip {
    position: fixed;
    background: var(--hanlan-tooltip-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-tooltip-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    color: var(--hanlan-tooltip-text);
    box-shadow: var(--hanlan-shadow-md);
    z-index: var(--hanlan-z-tooltip, 3500);
    pointer-events: none;
    animation: hanlan-tooltipIn var(--hanlan-duration-fast) var(--hanlan-ease-out) forwards;
    transform-origin: center top;
    max-width: var(--hanlan-tooltip-max-width, 250px);
    word-wrap: break-word;
}

.hanlan-tooltip[data-position="top"] {
    transform-origin: center bottom;
}

.hanlan-tooltip[data-position="left"] {
    transform-origin: right center;
}

.hanlan-tooltip[data-position="right"] {
    transform-origin: left center;
}

.hanlan-tooltip-arrow {
    display: none;
}

/* Exit fade — JS adds .hanlan-tooltip--exiting and removes the node ~90ms
   later. Matches the asymmetric tooltip pattern (fade-in to confirm intent,
   short fade-out on departure) — softer than instant disappear. */
.hanlan-tooltip--exiting {
    animation: hanlan-tooltipOut 90ms var(--hanlan-ease-out) forwards;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hanlan-tooltip {
        animation: hanlan-fadeIn 90ms var(--hanlan-ease-out) forwards;
    }

    .hanlan-tooltip--exiting {
        animation: hanlan-fadeOut 70ms var(--hanlan-ease-out) forwards;
    }
}

/* ========================================
   Info Icon Component
   ======================================== */

.hanlan-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--hanlan-color-text-muted);
    opacity: 0.4;
    font-size: 11px;
    font-weight: var(--hanlan-font-weight-medium);
    color: var(--hanlan-color-text-muted);
    cursor: help;
    transition: opacity var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
    user-select: none;
    -webkit-user-select: none;
    margin-left: var(--hanlan-space-xs);
}

.hanlan-info-icon::before {
    content: 'i';
    font-style: italic;
}

.hanlan-info-icon:hover {
    opacity: 0.6;
}

/* Info icon SVG - for inline help icons only (not buttons) */
.hanlan-info-icon svg,
.hanlan-info-icon svg circle,
.hanlan-info-icon svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Settings option layout with info icon */
.hanlan-settings-option {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-sm);
}

/* ========================================
   Search/Filter/Sort Component
   ======================================== */

.hanlan-search-filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-sm);
    margin-bottom: var(--hanlan-space-md);
}

.hanlan-search-filter-input {
    flex: 1;
    min-height: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    outline: none;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
}

.hanlan-search-filter-input:focus {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-filter-btn,
.hanlan-sort-btn {
    position: relative;
    width: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    min-width: var(--hanlan-control-height);
    min-height: var(--hanlan-control-height);
    padding: 0;
    background: var(--hanlan-color-bg-button, var(--hanlan-color-bg-input));
    border: 1px solid var(--hanlan-button-border, transparent);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base);
}

/* filter-btn/sort-btn img inherits from shared .hanlan-btn-icon img rule */

.hanlan-filter-btn svg,
.hanlan-sort-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    opacity: 0.85;
    fill: currentColor;
    stroke: currentColor;
    transition: opacity 200ms var(--hanlan-ease-in-out);
}

.hanlan-filter-btn:hover svg,
.hanlan-sort-btn:hover svg {
    opacity: 1;
}

.hanlan-filter-btn:hover,
.hanlan-sort-btn:hover {
    background: var(--hanlan-color-bg-button-hover, var(--hanlan-color-bg-hover));
    border-color: var(--hanlan-button-border-hover, var(--hanlan-button-border, transparent));
    color: var(--hanlan-color-text);
}

.hanlan-filter-menu,
.hanlan-sort-menu {
    position: absolute;
    top: calc(100% + var(--hanlan-space-xs));
    right: 0;
    background: var(--hanlan-glass-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-glass-border);
    border-radius: var(--hanlan-radius);
    padding: 8px;
    min-width: 150px;
    box-shadow: var(--hanlan-shadow-md);
    z-index: var(--hanlan-z-dropdown, 1000);
    display: none;
    flex-direction: column;
    gap: 8px;
}

.hanlan-filter-menu.show,
.hanlan-sort-menu.show {
    display: flex;
}

.hanlan-filter-menu-item,
.hanlan-sort-menu-item {
    display: flex;
    align-items: center;
    gap: var(--hanlan-space-xs);
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 0;
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    cursor: pointer;
    border-radius: calc(var(--hanlan-radius) - 2px);
    transition: background-color var(--hanlan-transition-base),
        color var(--hanlan-transition-base),
        filter var(--hanlan-transition-base);
    user-select: none;
}

.hanlan-filter-menu-item:hover,
.hanlan-sort-menu-item:hover {
    background: var(--hanlan-color-bg-hover);
}

.hanlan-filter-menu-item--active,
.hanlan-sort-menu-item--active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    color: #ffffff;
}

.hanlan-filter-menu-item--active:hover,
.hanlan-sort-menu-item--active:hover {
    background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient, linear-gradient(135deg, #8ea6ff, #a87cff)));
    filter: brightness(1.1);
    transition: filter var(--hanlan-transition-fast) 0.1s;
}

/* Sort direction indicator */
.hanlan-sort-menu-item {
    justify-content: space-between;
}

.hanlan-sort-direction {
    opacity: 0;
    margin-left: var(--hanlan-space-sm);
    transition: opacity var(--hanlan-transition-base), transform var(--hanlan-transition-base);
}

.hanlan-sort-menu-item--active .hanlan-sort-direction {
    opacity: 1;
}

/* Direction arrow states — stroke-only SVG arrows */
.hanlan-sort-direction[data-direction="asc"]::after,
.hanlan-sort-direction[data-direction="desc"]::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: middle;
}

.hanlan-sort-direction[data-direction="asc"]::after {
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5V1.5M2.5 4L5 1.5L7.5 4'/%3E%3C/svg%3E");
}

.hanlan-sort-direction[data-direction="desc"]::after {
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 1.5V8.5M2.5 6L5 8.5L7.5 6'/%3E%3C/svg%3E");
}

.hanlan-context-menu-item input[type="checkbox"],
.hanlan-dropdown-item input[type="checkbox"],
.hanlan-filter-menu-item input[type="checkbox"],
.hanlan-sort-menu-item input[type="checkbox"] {
    order: -1;
}

.hanlan-search-filter-list {
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-xs);
}

.hanlan-search-filter-item {
    padding: var(--hanlan-space-sm) var(--hanlan-space-md);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
}

.hanlan-search-filter-item:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}

/* ========================================
   Smart List Component
   ======================================== */

.hanlan-smart-list-container {
    background: var(--hanlan-color-bg-elevated);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-smart-list-padding, var(--hanlan-space-sm));
    min-height: var(--hanlan-smart-list-min-height, 300px);
    max-height: var(--hanlan-smart-list-max-height, 300px);
    overflow-y: overlay;
    margin-bottom: var(--hanlan-space-md);
    display: flex;
    flex-direction: column;
}

.hanlan-smart-list {
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-sm);
    position: relative;
    min-height: 100%;
}

/* Hide dividers inside list containers */
.hanlan-smart-list hr,
.hanlan-smart-list .hanlan-divider,
.hanlan-smart-list-container hr,
.hanlan-smart-list-container .hanlan-divider {
    display: none;
}

.hanlan-smart-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hanlan-space-sm);
    padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
    background: var(--hanlan-color-bg-input);
    border: none;
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    cursor: pointer;
    transition: background-color 200ms var(--hanlan-ease-in-out),
        border-color 200ms var(--hanlan-ease-in-out),
        box-shadow 200ms var(--hanlan-ease-in-out),
        transform 200ms var(--hanlan-ease-in-out),
        filter 200ms var(--hanlan-ease-in-out),
        opacity 200ms var(--hanlan-ease-in-out);
    user-select: none;
    /* Ensure item respects container width */
    max-width: 100%;
    min-width: 0;
    /* Allow flex items to shrink below content size */
}

/* Slide-in animation disabled - was causing issues with rapid list updates */
/* .hanlan-smart-list-item.hanlan-list-item-entering {
    animation: hanlan-listItemSlideIn var(--hanlan-duration-normal) var(--hanlan-ease-out) forwards;
    opacity: 0;
} */

.hanlan-smart-list-item:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-smart-list-item:active {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-smart-list-item--selected {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-smart-list-item--selected:hover {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    filter: brightness(1.1);
}

/* Light theme: selected items use a soft orange brand tint instead of
   pure white. Clearly reads as "selected" against the darker rest/hover
   states without needing color-mix (unsupported in Chromium 99). */
body.hanlan_theme_light .hanlan-smart-list-item--selected,
body.hanlan_theme_light .hanlan-smart-list-item--selected:hover {
    background: rgba(245, 166, 35, 0.14);
}

/* Maintain hover state when context menu is active */
.hanlan-smart-list-item--context-menu-active,
.hanlan-smart-list-item--context-menu-active:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-gradient-first-color, #6b8afd);
    box-shadow: inset 0 0 0 1px var(--hanlan-gradient-first-color, #6b8afd);
}

.hanlan-smart-list-item.dragging {
    opacity: 0.65;
    cursor: grabbing;
    transform: none;
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.08), rgba(245, 166, 35, 0.02));
    background: linear-gradient(135deg, color-mix(in srgb, var(--hanlan-color-accent) 8%, transparent), color-mix(in srgb, var(--hanlan-color-accent) 2%, transparent));
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--hanlan-color-focus-ring-lg);
    z-index: var(--hanlan-z-dropdown, 1000);
    will-change: transform, opacity;
}

/* Removed drag-over styling - using drop indicator instead for smoother drag experience */

/* Drop zone indicators - items create space for smooth magnetic drag */
.hanlan-smart-list-item.hanlan-drop-zone-before {
    margin-top: var(--hanlan-space-md);
    transition: margin-top 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hanlan-smart-list-item.hanlan-drop-zone-after {
    margin-bottom: var(--hanlan-space-md);
    transition: margin-bottom 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hanlan-smart-list-drag-handle {
    width: 8px;
    height: 8px;
    padding: 4px;
    margin: -4px;
    box-sizing: content-box;
    opacity: 0.5;
    cursor: grab;
    flex-shrink: 0;
    /* Never shrink - always preserve space for drag handle */
    transition: opacity 200ms var(--hanlan-ease-in-out);
    background-repeat: no-repeat;
    background-position: center;
}

/* Dark theme: invert the source SVG (which is dark) to white */
body.hanlan_theme_dark .hanlan-smart-list-drag-handle {
    filter: invert(1);
}

.hanlan-smart-list-drag-handle:active {
    cursor: grabbing;
}

.hanlan-smart-list-item:hover .hanlan-smart-list-drag-handle {
    opacity: 0.85;
}

/* Drag disabled state (when sorted) */
.hanlan-drag-disabled .hanlan-smart-list-drag-handle {
    display: none !important;
}

.hanlan-drag-disabled .hanlan-smart-list-item,
.hanlan-drag-disabled .hanlan-responsive-grid-item {
    cursor: pointer !important;
}

/* Dragging state */
.hanlan-dragging {
    cursor: grabbing !important;
}

.hanlan-dragging .hanlan-smart-list-item,
.hanlan-dragging .hanlan-responsive-grid-item {
    cursor: grabbing !important;
}

/* Ensure buttons and other right-side elements in list items don't shrink */
.hanlan-smart-list-item>button,
.hanlan-smart-list-item>.hanlan-btn,
.hanlan-smart-list-item>.hanlan-btn-icon {
    flex-shrink: 0;
    /* Never shrink - always preserve space for buttons */
    position: relative;
    z-index: auto;
}

.hanlan-smart-list-text {
    flex: 1;
    min-width: 0;
    /* Critical for truncation in flexbox */
    min-width: 0;
    /* Max 80% of container width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    user-select: text;
}

/* Inline edit input for list items */
.hanlan-smart-list-text-input {
    flex: 1;
    min-width: 0;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--hanlan-font-family-base) !important;
    font-size: var(--hanlan-font-size-base) !important;
    color: var(--hanlan-color-text) !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: auto;
    line-height: inherit;
    width: auto;
    min-height: 0;
    max-height: none;
    vertical-align: baseline;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.hanlan-smart-list-text-input::selection {
    background: var(--hanlan-color-accent);
    color: var(--hanlan-color-text);
}

/* Discreet inline rename: contentEditable on the name span itself.
   No chrome, no layout shift — only the selection highlight signals edit. */
.inline-rename-editing {
    outline: none;
    caret-color: var(--hanlan-plugin-accent);
    cursor: text;
}

.inline-rename-editing::selection {
    background: var(--hanlan-color-accent);
    color: var(--hanlan-color-text);
}

/* Grid item support for future grid view */
.hanlan-grid-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    user-select: text;
}

.hanlan-grid-item-text-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--hanlan-font-family-base) !important;
    font-size: var(--hanlan-font-size-base) !important;
    color: var(--hanlan-color-text) !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: auto;
    line-height: inherit;
    min-height: 0;
    max-height: none;
    vertical-align: baseline;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.hanlan-grid-item-text-input::selection {
    background: var(--hanlan-color-accent);
    color: var(--hanlan-color-text);
}

/* Folder arrow indicator for expandable list items */
.hanlan-smart-list-item--folder::before,
.hanlan-smart-list-item[data-folder]::before {
    content: '';
    width: 22px;
    height: 22px;
    margin-left: calc(-1 * var(--hanlan-space-xs));
    margin-right: var(--hanlan-space-sm);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(0deg);
    transition: transform var(--hanlan-transition-base);
    opacity: 0.7;
}

.hanlan-smart-list-item--folder-open::before,
.hanlan-smart-list-item--folder[aria-expanded="true"]::before,
.hanlan-smart-list-item[data-folder="open"]::before,
.hanlan-smart-list-item[data-folder][aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.hanlan-smart-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--hanlan-space-xl);
    /* Slight visual-balance nudge (content above mathematical center),
       capped so small panels don't push content off-screen. */
    padding-bottom: clamp(var(--hanlan-space-xl), calc(var(--hanlan-space-xl) + 6%), 56px);
    color: var(--hanlan-color-text-muted);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    text-align: center;
    flex: 1;
    box-sizing: border-box;
}

/* Empty container — compact empty state for settings, modals, inline lists.
   Contains items when populated; shows centered message when empty. */
.hanlan-empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    background: var(--hanlan-color-bg-input);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-md);
}

.hanlan-empty-container-msg {
    color: var(--hanlan-color-text-muted);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    text-align: center;
    font-style: italic;
}

/* Empty state CTA button - interactive action within empty states */
.hanlan-empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--hanlan-space-xs);
    margin-top: var(--hanlan-space-md);
    padding: var(--hanlan-space-sm) var(--hanlan-space-md);
    background: var(--hanlan-color-bg-elevated);
    border: 1px solid var(--hanlan-color-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-style: normal;
    cursor: pointer;
    transition: all var(--hanlan-transition-base);
}

.hanlan-empty-state-cta:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-plugin-accent);
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.25);
    box-shadow: 0 0 12px color-mix(in srgb, var(--hanlan-plugin-accent) 25%, transparent);
    color: var(--hanlan-plugin-accent);
}

.hanlan-empty-state-cta:active {
    transform: scale(0.98);
}

/* Gradient CTA button for empty states */
.hanlan-empty-state-cta--gradient {
    font-size: var(--hanlan-font-size-base);
    padding: var(--hanlan-space-sm) var(--hanlan-space-lg);
    background: var(--hanlan-plugin-gradient);
    background-image: var(--hanlan-plugin-gradient);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    border: none;
    border-radius: var(--hanlan-radius);
    font-weight: 600;
    cursor: pointer;
}

.hanlan-empty-state-cta--gradient:hover {
    background: var(--hanlan-plugin-gradient-hover);
    background-image: var(--hanlan-plugin-gradient-hover);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    border: none;
    filter: brightness(1.1);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
}

.hanlan-empty-state-cta--gradient:active {
    filter: brightness(0.95);
}

/* First-run guide link in empty state — branded accent link.
   Hidden by default via CSS (not inline) so there's no parse-flash before
   the DOMContentLoaded handler runs. JS opts it in via the --show modifier. */
.cor-first-run-link {
    display: none;
    font-size: 11px;
    text-decoration: none;
    margin-top: 8px;
    color: var(--hanlan-plugin-accent);
    opacity: 1;
    transition: color var(--hanlan-transition-fast);
}
.cor-first-run-link--show {
    display: inline-block;
}
.cor-first-run-link:hover {
    color: var(--hanlan-plugin-gradient-first-color-hover);
    opacity: 1;
}

/* Empty state text — label inside empty states */
.hanlan-empty-state-text {
    font-size: var(--hanlan-font-size-base);
    color: var(--hanlan-color-text-muted);
    font-family: var(--hanlan-font-family-base);
    text-align: center;
}

/* Empty state icon — muted icon that animates on hover */
.hanlan-empty-state-icon {
    color: var(--hanlan-color-text-muted);
    opacity: 0.5;
    transition: opacity var(--hanlan-duration-fast, 150ms) var(--hanlan-ease-out, ease-out),
                transform var(--hanlan-duration-fast, 150ms) var(--hanlan-ease-out, ease-out);
}

.hanlan-empty-state:hover .hanlan-empty-state-icon {
    opacity: 1;
    transform: scale(1.15);
}

/* Empty state icon button — clickable icon with same hover animation */
/* Excluded from base button styles via :not() selectors */
.hanlan-empty-state-icon-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: var(--hanlan-space-sm);
    cursor: pointer;
    color: var(--hanlan-color-text-muted);
    opacity: 0.3;
    transition: opacity var(--hanlan-duration-fast, 150ms) var(--hanlan-ease-out, ease-out),
                transform var(--hanlan-duration-fast, 150ms) var(--hanlan-ease-out, ease-out);
}

.hanlan-empty-state-icon-btn:hover {
    opacity: 0.8;
    transform: scale(1.15);
}

/* Empty state hint button — dim accent-coloured hint, brightens on hover. */
.hanlan-empty-state-hint-btn {
    font-size: 11px;
    font-family: var(--hanlan-font-family-base);
    color: var(--hanlan-plugin-accent);
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--hanlan-radius-sm, 4px);
    opacity: 0.6;
    transition: opacity var(--hanlan-transition-fast),
                color var(--hanlan-transition-fast);
}

.hanlan-empty-state-hint-btn:hover {
    color: var(--hanlan-plugin-gradient-first-color-hover);
    opacity: 1;
}

/* Favourite star toggle - for marking items as favourites */
.hanlan-favourite-star {
    transition: color 200ms var(--hanlan-ease-in-out),
                transform 200ms var(--hanlan-ease-in-out),
                text-shadow 200ms var(--hanlan-ease-in-out),
                opacity 200ms var(--hanlan-ease-in-out);
    flex-shrink: 0;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    margin-left: 8px;
}

.hanlan-favourite-star:not(.is-favourite) {
    color: var(--hanlan-color-text-muted);
    opacity: 0.5;
}

.hanlan-favourite-star.is-favourite {
    color: var(--hanlan-plugin-accent);
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    text-shadow: 0 0 4px rgba(245, 166, 35, 0.4);
    text-shadow: 0 0 4px color-mix(in srgb, var(--hanlan-plugin-accent) 40%, transparent);
}

/* Press feedback — scale down briefly on click. The :active chain on the
   parent list item is suppressed by selectors elsewhere; only the star
   itself reacts to the press. */
.hanlan-favourite-star:active {
    transform: scale(0.88);
    transition-duration: 80ms;
}

/* Hover on a DISABLED star: only partially brighten (not full opacity)
   and scale up — preview, not commit. Full opacity is reserved for the
   active/favourited state. */
.hanlan-favourite-star:not(.is-favourite):hover {
    color: var(--hanlan-plugin-accent);
    opacity: 0.75;
    transform: scale(1.2);
}

/* Hover on an ENABLED star: full opacity + scale up. */
.hanlan-favourite-star.is-favourite:hover {
    opacity: 1;
    transform: scale(1.2);
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    text-shadow: 0 0 6px rgba(245, 166, 35, 0.5);
    text-shadow: 0 0 6px color-mix(in srgb, var(--hanlan-plugin-accent) 50%, transparent);
}

/* ========================================
   Responsive Grid Layout Component
   ======================================== */

.hanlan-responsive-grid {
    display: grid;
    gap: var(--hanlan-space-sm);
    width: 100%;
    /* Grid columns are set dynamically via inline style by JS */
    /* grid-template-columns will be set to repeat(N, 1fr) */
}

.hanlan-responsive-grid-item {
    /* Base item styling - size controlled by grid */
    position: relative;
    width: 100%;
    height: 100%;
    /* Items should be square by default (1:1 aspect ratio) */
    aspect-ratio: 1 / 1;
}

/* Grid item content wrapper */
.hanlan-responsive-grid-item-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Grid item with custom aspect ratio */
.hanlan-responsive-grid-item--custom-aspect {
    /* Custom aspect ratio applied via inline style */
}

/* Grid item with auto aspect ratio (natural sizing) */
.hanlan-responsive-grid-item--auto-aspect {
    aspect-ratio: auto;
    height: auto;
}

/* Grid item size variants (for user-controlled sizing presets) */
.hanlan-responsive-grid--size-small {
    /* Small items - typically 32-40px */
}

.hanlan-responsive-grid--size-medium {
    /* Medium items - typically 48-64px */
}

.hanlan-responsive-grid--size-large {
    /* Large items - typically 80-120px */
}

/* Grid item hover states */
.hanlan-responsive-grid-item {
    cursor: pointer;
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    background: var(--hanlan-color-bg-input);
    user-select: none;
    transition: transform 200ms var(--hanlan-ease-in-out),
        box-shadow 200ms var(--hanlan-ease-in-out),
        border-color 200ms var(--hanlan-ease-in-out),
        background-color 200ms var(--hanlan-ease-in-out),
        filter 200ms var(--hanlan-ease-in-out);
}

.hanlan-responsive-grid-item:hover {
    transform: scale(1.05);
    z-index: 1;
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

/* Grid item selection state (matching smart list) */
.hanlan-responsive-grid-item--selected {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
}

.hanlan-responsive-grid-item--selected:hover {
    background: var(--hanlan-color-bg-elevated);
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    filter: brightness(1.1);
}

/* Light theme: same orange brand tint as smart list items */
body.hanlan_theme_light .hanlan-responsive-grid-item--selected,
body.hanlan_theme_light .hanlan-responsive-grid-item--selected:hover {
    background: rgba(245, 166, 35, 0.14);
}

/* Grid drag and drop states */
.hanlan-responsive-grid--dragging {
    cursor: grabbing;
}

.hanlan-responsive-grid-item.dragging {
    opacity: 0.65;
    cursor: grabbing;
    border-color: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.08), rgba(245, 166, 35, 0.02));
    background: linear-gradient(135deg, color-mix(in srgb, var(--hanlan-color-accent) 8%, transparent), color-mix(in srgb, var(--hanlan-color-accent) 2%, transparent));
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px var(--hanlan-plugin-accent, rgba(107, 138, 253, 0.4));
    transform: scale(1.02);
    z-index: 10;
}

.hanlan-responsive-grid-item.hanlan-drop-zone-before {
    margin-top: var(--hanlan-space-md);
    transition: margin-top 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hanlan-responsive-grid-item.hanlan-drop-zone-after {
    margin-bottom: var(--hanlan-space-md);
    transition: margin-bottom 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Grid empty state (matching smart list) */
.hanlan-responsive-grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--hanlan-space-xl);
    color: var(--hanlan-color-text-muted);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    text-align: center;
    min-height: 200px;
    width: 100%;
    grid-column: 1 / -1;
    /* Span all columns */
}

.hanlan-drop-indicator {
    /* Unified drop indicator — used by both item drag and folder drag */
    pointer-events: none;
    z-index: 1000;
    height: 2px;
    background: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    border-radius: 1px;
    box-shadow: 0 0 6px var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    opacity: 0;
}

.hanlan-drop-indicator.show {
    opacity: 1;
}

/* Folder drop target state — single visual indicator via class toggle */
.hanlan-accordion-item.hanlan-folder-drop-hover {
    border: 2px dashed var(--hanlan-plugin-accent, #6b8afd);
    border-radius: var(--hanlan-radius, 6px);
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    background: rgba(245, 166, 35, 0.08);
    background: color-mix(in srgb, var(--hanlan-color-accent) 8%, transparent);
    padding: var(--hanlan-space-xs);
    transition: border var(--hanlan-transition-fast), background var(--hanlan-transition-fast), padding var(--hanlan-transition-fast);
}

.hanlan-accordion-item.hanlan-folder-drop-hover > .hanlan-accordion-header {
    background: var(--hanlan-color-accent-subtle);
}

.hanlan-drag-preview {
    min-width: 180px;
    padding: var(--hanlan-space-sm) var(--hanlan-space-md);
    border-radius: calc(var(--hanlan-radius) + 4px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: 12px;
    font-weight: var(--hanlan-font-weight-medium);
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.hanlan-drag-preview__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hanlan-drag-preview__count {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: var(--hanlan-space-sm);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--hanlan-color-accent-subtle);
    color: var(--hanlan-color-text);
    font-size: 11px;
}

/* ========================================
   Progress Bar Component
   ======================================== */

.hanlan-progress {
    width: 100%;
    height: 8px;
    background: var(--hanlan-color-border);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.hanlan-progress-bar {
    height: 100%;
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border-radius: 4px;
    transition: width var(--hanlan-transition-base);
}

.hanlan-progress--success .hanlan-progress-bar {
    background: var(--hanlan-color-success);
}

.hanlan-progress--error .hanlan-progress-bar {
    background: var(--hanlan-color-error);
}

/* Progress Modal Content */
.hanlan-progress-modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--hanlan-space-sm);
    width: 100%;
    min-width: 200px;
}

.hanlan-progress-modal-label {
    font-size: 12px;
    color: var(--hanlan-color-text-secondary);
    text-align: center;
}

/* ========================================
   Segmented Control Component
   ======================================== */

.hanlan-segmented {
    display: flex;
    width: 100%;
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    padding: 4px;
    gap: 4px;
}

.hanlan-segmented-item {
    flex: 1;
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    background: transparent;
    border: none;
    color: var(--hanlan-color-text-muted);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    cursor: pointer;
    border-radius: calc(var(--hanlan-radius) - 2px);
    transition: color var(--hanlan-transition-base),
        background-color var(--hanlan-transition-base),
        filter var(--hanlan-transition-base);
    user-select: none;
    outline: none;
    text-align: center;
}

.hanlan-segmented-item:hover {
    color: var(--hanlan-color-text);
    background: var(--hanlan-color-bg-hover);
}

.hanlan-segmented-item--active {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    color: #ffffff;
}

.hanlan-segmented-item--active:hover {
    background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient, linear-gradient(135deg, #8ea6ff, #a87cff)));
    filter: brightness(1.1);
    transition: filter var(--hanlan-transition-fast) 0.1s;
}

/* ========================================
   Badge/Pill Component
   ======================================== */

.hanlan-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--hanlan-space-xxs) var(--hanlan-space-sm);
    background: var(--hanlan-color-bg-elevated);
    border: var(--hanlan-border);
    border-radius: 999px;
    color: var(--hanlan-color-text);
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-heading);
    font-weight: var(--hanlan-font-weight-medium);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hanlan-badge--accent {
    background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
    border-color: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
    color: #ffffff;
}

.hanlan-badge--success {
    background: var(--hanlan-color-success);
    border-color: var(--hanlan-color-success);
    color: #ffffff;
}

.hanlan-badge--error {
    background: var(--hanlan-color-error);
    border-color: var(--hanlan-color-error);
    color: #ffffff;
}

/* ========================================
   Anchor Grid Component (Visual Control)
   9-point position/anchor selector
   ======================================== */

.hanlan-anchor-grid {
    --anchor-grid-accent: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    --anchor-grid-accent-hover: var(--hanlan-plugin-gradient-first-color-hover, #8ea6ff);

    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--hanlan-space-xxs);
    width: var(--hanlan-control-visual-size);
    height: var(--hanlan-control-visual-size);
    min-width: var(--hanlan-control-visual-size);
    min-height: var(--hanlan-control-visual-size);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-sm);
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
}

.hanlan-anchor-grid:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}

.hanlan-anchor-grid__point {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: background-color var(--hanlan-transition-base),
        transform var(--hanlan-transition-base);
}

.hanlan-anchor-grid__point::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hanlan-color-text-muted);
    transition: background-color var(--hanlan-transition-base),
        transform var(--hanlan-transition-base),
        box-shadow var(--hanlan-transition-base);
}

.hanlan-anchor-grid__point:hover::before {
    background: var(--hanlan-color-text);
    transform: scale(1.2);
}

.hanlan-anchor-grid__point--active::before {
    background: var(--anchor-grid-accent);
    transform: scale(1.4);
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.5); /* AE 2020-2022 fallback */
    box-shadow: 0 0 8px color-mix(in srgb, var(--anchor-grid-accent) 50%, transparent);
}

.hanlan-anchor-grid__point--active:hover::before {
    background: var(--anchor-grid-accent-hover);
}

.hanlan-anchor-grid__point:focus {
    outline: none;
}

.hanlan-anchor-grid__tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(2px) scale(0.985);
    transform-origin: center top;
    background: var(--hanlan-tooltip-bg);
    backdrop-filter: blur(var(--hanlan-glass-blur));
    -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
    border: 1px solid var(--hanlan-tooltip-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
    color: var(--hanlan-tooltip-text);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    white-space: nowrap;
    z-index: var(--hanlan-z-tooltip);
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--hanlan-duration-fast) var(--hanlan-ease-out),
        transform var(--hanlan-duration-fast) var(--hanlan-ease-out);
}

.hanlan-anchor-grid--show-tooltip .hanlan-anchor-grid__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.hanlan-anchor-grid:disabled,
.hanlan-anchor-grid[disabled],
.hanlan-anchor-grid--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Legacy alias: alignment-grid → anchor-grid (for backward compatibility) */
.hanlan-alignment-grid {
    --anchor-grid-accent: var(--hanlan-plugin-accent, var(--hanlan-gradient-first-color, #6b8afd));
    --anchor-grid-accent-hover: var(--hanlan-plugin-gradient-first-color-hover, #8ea6ff);
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--hanlan-space-xxs);
    width: var(--hanlan-control-visual-size);
    height: var(--hanlan-control-visual-size);
    min-width: var(--hanlan-control-visual-size);
    min-height: var(--hanlan-control-visual-size);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    padding: var(--hanlan-space-sm);
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--hanlan-transition-base),
        border-color var(--hanlan-transition-base);
}
.hanlan-alignment-grid:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}
.hanlan-alignment-grid__point {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: background-color var(--hanlan-transition-base),
        transform var(--hanlan-transition-base);
}
.hanlan-alignment-grid__point::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hanlan-color-text-muted);
    transition: background-color var(--hanlan-transition-base),
        transform var(--hanlan-transition-base),
        box-shadow var(--hanlan-transition-base);
}
.hanlan-alignment-grid__point:hover::before {
    background: var(--hanlan-color-text);
    transform: scale(1.2);
}
.hanlan-alignment-grid__point--active::before {
    background: var(--anchor-grid-accent);
    transform: scale(1.4);
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.5); /* AE 2020-2022 fallback */
    box-shadow: 0 0 8px color-mix(in srgb, var(--anchor-grid-accent) 50%, transparent);
}
.hanlan-alignment-grid__point--active:hover::before {
    background: var(--anchor-grid-accent-hover);
}
.hanlan-alignment-grid__point:focus { outline: none; }
.hanlan-alignment-grid--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Accordion Component
   ======================================== */

.hanlan-accordion {
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    overflow: hidden;
    background: var(--hanlan-color-bg-elevated);
    margin-bottom: var(--hanlan-space-md);
}

.hanlan-accordion-item {
    user-select: none;
    margin-bottom: var(--hanlan-space-xs);
}

.hanlan-accordion-item:last-child {
    margin-bottom: 0;
}

/* Hidden-folder cue — dimmed when revealed via "Show hidden folders" so the
   user can tell it's a hidden one at a glance. Doesn't apply when the folder
   is actually hidden (display:none via the JS render filter). */
.hanlan-folder--hidden {
    opacity: 0.45;
    transition: opacity var(--hanlan-transition-base, 200ms ease);
}
.hanlan-folder--hidden:hover {
    opacity: 0.75;
}

/* Zebra striping for accordions - improves readability in collapsed view */
.hanlan-accordion .hanlan-accordion-item:nth-child(odd) > .hanlan-accordion-header {
    background: rgba(255, 255, 255, 0.025);
}

.hanlan-accordion .hanlan-accordion-item:nth-child(odd) > .hanlan-accordion-header:hover {
    background: var(--hanlan-color-bg-elevated);
}

/* Zebra striping utility — apply to any container with repeating child rows */
.ha-zebra-rows > *:nth-child(odd) {
    background: rgba(255, 255, 255, 0.025);
}

.hanlan-accordion-header {
    display: flex;
    align-items: center;
    padding: var(--hanlan-space-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background-color var(--hanlan-transition-base);
    user-select: none;
    outline: none;
    /* Inherits font styles from .hanlan-title */
}

.hanlan-accordion-disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-right: var(--hanlan-space-sm);
    border-radius: 999px;
    position: relative;
}

.hanlan-accordion-select-pill {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 18px;
    padding: 0;
    margin: 0 10px 0 0;
    border: none;
    min-width: 12px;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transition:
        opacity var(--hanlan-transition-base),
        transform var(--hanlan-transition-base);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.hanlan-accordion-select-pill::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 18px;
    margin-left: -2px;
    margin-top: -9px;
    border-radius: 999px;
    background: var(--hanlan-plugin-accent);
    opacity: 0.28;
    transform: translateY(0) scaleY(0.7);
    transform-origin: center;
    transition:
        opacity var(--hanlan-transition-base),
        transform var(--hanlan-transition-base);
}

.hanlan-accordion-select-pill:hover::before {
    opacity: 0.6;
    transform: translateY(0) scaleY(1);
}

.hanlan-accordion-select-pill:focus {
    outline: none;
}

.hanlan-accordion-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.hanlan-accordion-disclosure::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--hanlan-color-text-muted);
    border-bottom: 1.5px solid var(--hanlan-color-text-muted);
    transform: rotate(-45deg);
    transform-origin: center center;
    transition: transform var(--hanlan-transition-base);
    display: inline-block;
}

.hanlan-accordion-item--open .hanlan-accordion-disclosure::before,
.hanlan-accordion-header[aria-expanded="true"] .hanlan-accordion-disclosure::before {
    transform: rotate(45deg);
}

.hanlan-accordion-header:hover {
    background: var(--hanlan-color-bg-elevated);
}

body.hanlan_theme_light .hanlan-accordion .hanlan-accordion-item:nth-child(odd) > .hanlan-accordion-header,
body.hanlan_theme_light .ha-zebra-rows > *:nth-child(odd) {
    background: rgba(0, 0, 0, 0.045);
}

body.hanlan_theme_light .hanlan-accordion .hanlan-accordion-item:nth-child(odd) > .hanlan-accordion-header:hover,
body.hanlan_theme_light .hanlan-accordion-header:hover {
    background: var(--hanlan-color-bg-input);
}

.hanlan-accordion-header:active {
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   CHEVRON UTILITIES - Standard stroke-based arrows (6x6px, 1.5px stroke)
   Usage: <span class="hanlan-chevron"></span>
   ═══════════════════════════════════════════════════════════════ */
.hanlan-chevron {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--hanlan-color-text-muted);
    border-bottom: 1.5px solid var(--hanlan-color-text-muted);
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform var(--hanlan-transition-base);
    flex-shrink: 0;
}

.hanlan-chevron--down {
    transform: rotate(45deg);
}

.hanlan-chevron--up {
    transform: rotate(-135deg);
}

.hanlan-chevron--open,
.open > .hanlan-chevron,
.open .hanlan-chevron,
.folder--open > .hanlan-chevron,
.folder--open .hanlan-chevron,
[class*="--open"] > .hanlan-chevron,
[aria-expanded="true"] > .hanlan-chevron {
    transform: rotate(45deg);
}

.hanlan-accordion-header::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--hanlan-color-text-muted);
    border-bottom: 1.5px solid var(--hanlan-color-text-muted);
    transform: rotate(-45deg) !important;
    transform-origin: center center;
    transition: transform var(--hanlan-transition-base);
    flex-shrink: 0;
    margin-right: var(--hanlan-space-md);
    display: inline-block;
}

.hanlan-accordion-header--with-disclosure::before {
    display: none;
}

.hanlan-accordion-item--open .hanlan-accordion-header::before,
.hanlan-accordion-header[aria-expanded="true"]::before {
    transform: rotate(45deg) !important;
}

/* Ensure arrow directions are correct even with plugin overrides */
.hanlan-accordion-item.hanlan-accordion-item--open .hanlan-accordion-header::before {
    transform: rotate(45deg) !important;
}

.hanlan-accordion-content {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition:
        max-height var(--hanlan-transition-collapse),
        opacity var(--hanlan-transition-collapse);
    opacity: 0;
}

.hanlan-accordion-content > * {
    overflow: hidden;
}

.hanlan-accordion-item--open .hanlan-accordion-content {
    max-height: 2400px;
    opacity: 1;
}

.hanlan-accordion-item--selected > .hanlan-accordion-header .hanlan-accordion-select-pill::before {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}

.hanlan-accordion-body {
    padding: var(--hanlan-space-sm);
    padding-top: 0;
    gap: var(--hanlan-space-xs);
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity var(--hanlan-transition-collapse),
        transform var(--hanlan-transition-collapse);
}

.hanlan-accordion-item--open .hanlan-accordion-body {
    opacity: 1;
    transform: translateY(0);
}

/* Empty state for accordion folders */
.hanlan-accordion-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hanlan-space-md) var(--hanlan-space-lg);
    margin: var(--hanlan-space-sm);
    background: var(--hanlan-color-bg-input);
    border-radius: var(--hanlan-radius-sm);
    color: var(--hanlan-color-text-muted);
    font-size: var(--hanlan-font-size-sm);
    font-style: italic;
}

/* Hide when there are other items */
.hanlan-accordion-empty:not(:only-child) {
    display: none;
}

/* Accordion count badge - pill-styled count in accordion headers */
.hanlan-accordion-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--hanlan-space-xxs);
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    line-height: 22px;
    border-radius: 999px;
    background: var(--hanlan-color-bg-elevated);
    color: var(--hanlan-color-text-muted);
    border: 1px solid var(--hanlan-color-border);
}

.hanlan-accordion-count-badge--empty {
    opacity: 0.5;
    background: transparent;
    border-color: transparent;
}


/* Folder drag handle — mirrors .hanlan-smart-list-drag-handle */
.hanlan-accordion-drag-handle {
    width: 8px;
    height: 8px;
    padding: 4px;
    margin: -4px;
    margin-left: 6px;
    box-sizing: content-box;
    opacity: 0.4;
    cursor: grab;
    flex-shrink: 0;
    transition: opacity 200ms var(--hanlan-ease-in-out, ease);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Dark theme: invert the source SVG (which is dark) to white */
body.hanlan_theme_dark .hanlan-accordion-drag-handle {
    filter: invert(1);
}

.hanlan-accordion-drag-handle:active {
    cursor: grabbing;
}

.hanlan-accordion-header:hover .hanlan-accordion-drag-handle {
    opacity: 0.65;
}

.hanlan-accordion-drag-handle:hover {
    opacity: 0.85;
}

.hanlan-accordion-item.dragging .hanlan-accordion-drag-handle {
    opacity: 0.85;
}

/* Accordion drag and drop styles */
.hanlan-accordion-item.dragging {
    opacity: 0.65;
    cursor: grabbing;
    border-color: var(--hanlan-plugin-accent, #6b8afd);
    /* rgba fallback for AE 2020-2022 (Chromium <111) */
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.08), rgba(245, 166, 35, 0.02));
    background: linear-gradient(135deg, color-mix(in srgb, var(--hanlan-color-accent) 8%, transparent), color-mix(in srgb, var(--hanlan-color-accent) 2%, transparent));
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--hanlan-color-focus-ring-lg);
    z-index: var(--hanlan-z-dropdown, 1000);
    will-change: transform, opacity;
}

.hanlan-accordion-item.hanlan-drop-zone-before {
    margin-top: var(--hanlan-space-md);
    transition: margin-top 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hanlan-accordion-item.hanlan-drop-zone-after {
    margin-bottom: var(--hanlan-space-md);
    transition: margin-bottom 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   Skeleton Loader Component
   ======================================== */

.hanlan-skeleton {
    background: var(--hanlan-color-bg-input);
    border-radius: var(--hanlan-radius);
    position: relative;
    overflow: hidden;
    padding: var(--hanlan-space-sm);
}

.hanlan-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: hanlan-shimmer 1.5s infinite;
}

@keyframes hanlan-shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.hanlan-skeleton-text {
    height: 14px;
    margin-bottom: var(--hanlan-space-xs);
    background: var(--hanlan-color-bg-elevated);
    border-radius: 2px;
}

.hanlan-skeleton-text:last-child {
    margin-bottom: 0;
}

.hanlan-skeleton-text--short {
    width: 60%;
}

.hanlan-skeleton-text--medium {
    width: 80%;
}

.hanlan-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hanlan-color-bg-elevated);
}

.hanlan-skeleton-button {
    width: 100px;
    height: var(--hanlan-control-height);
    background: var(--hanlan-color-bg-elevated);
    border-radius: var(--hanlan-radius);
}

/* Utility class for one-time spin animation (e.g., refresh buttons) */
.hanlan-icon-spin-once {
    animation: hanlan-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ========================================
   Overscroll Gradient Fade System
   ======================================== */

.hanlan-overscroll-fade {
    position: relative;
}

.hanlan-overscroll-fade::before,
.hanlan-overscroll-fade::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity var(--hanlan-transition-base);
}

.hanlan-overscroll-fade::before {
    top: 0;
    background: linear-gradient(to bottom, var(--hanlan-scroll-fade-bg, var(--hanlan-glass-bg)), transparent);
}

.hanlan-overscroll-fade::after {
    bottom: 0;
    background: linear-gradient(to top, var(--hanlan-scroll-fade-bg, var(--hanlan-glass-bg)), transparent);
}

.hanlan-overscroll-fade.hanlan-overscroll-fade-top::before {
    opacity: 1;
}

.hanlan-overscroll-fade.hanlan-overscroll-fade-bottom::after {
    opacity: 1;
}

/* Horizontal overscroll fade support (requires wrapper element) */
.hanlan-overscroll-fade-wrapper {
    position: relative;
}

.hanlan-overscroll-fade-edge-left,
.hanlan-overscroll-fade-edge-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity var(--hanlan-transition-base);
}

.hanlan-overscroll-fade-edge-left {
    left: 0;
    background: linear-gradient(to right, var(--hanlan-scroll-fade-bg, var(--hanlan-glass-bg)), transparent);
}

.hanlan-overscroll-fade-edge-right {
    right: 0;
    background: linear-gradient(to left, var(--hanlan-scroll-fade-bg, var(--hanlan-glass-bg)), transparent);
}

.hanlan-overscroll-fade-wrapper.hanlan-overscroll-fade-left .hanlan-overscroll-fade-edge-left {
    opacity: 1;
}

.hanlan-overscroll-fade-wrapper.hanlan-overscroll-fade-right .hanlan-overscroll-fade-edge-right {
    opacity: 1;
}

/* Overscroll bounce effect */
.hanlan-overscroll-bouncing {
    will-change: transform;
}

/* ========================================
   Plugin Gradient Convention
   ======================================== */

/* Plugins can define their own gradient identity:
   
   Example for "patheon" plugin:
   :root {
       --patheon-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
       --patheon-gradient-hover: linear-gradient(135deg, #7c3aed, #a855f7);
       --patheon-accent: #6366f1;
   }
   
   Then use with modifier class:
   .hanlan-btn-toggle--active.patheon-gradient {
       background: var(--patheon-gradient);
       border-color: var(--patheon-accent);
   }
   
   Or plugins can directly override:
   .hanlan-btn-toggle--active {
       background: var(--patheon-gradient);
   }
*/

/* ========================================
   Defensive Fallbacks for Common Plugin Patterns
   Catch common naming conventions and apply HanlanCore styling
   ======================================== */

/* Button fallbacks - catch plugins using .btn patterns */
.btn:not([class*="hanlan"]) {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    font-weight: var(--hanlan-font-weight-medium);
    height: var(--hanlan-control-height);
    padding: 0 var(--hanlan-space-sm);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    cursor: pointer;
    transition: var(--hanlan-transition-base);
}

.btn:not([class*="hanlan"]):hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}

/* Modal title fallbacks - catch common patterns */
.modal-title,
.dialog-title,
.modal-header h1,
.modal-header h2,
.modal-header h3 {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-heading);
    font-weight: var(--hanlan-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hanlan-color-text);
    margin: 0;
}

/* Modal body fallbacks - left-align for readability (industry standard) */
.modal-body,
.modal-content,
.dialog-body,
.dialog-content {
    padding: var(--hanlan-space-sm) var(--hanlan-space-md);
    color: var(--hanlan-color-text);
    text-align: left;
}

/* Modal footer fallbacks */
.modal-footer,
.dialog-footer,
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--hanlan-space-sm);
    padding: var(--hanlan-space-sm) var(--hanlan-space-md);
    border-top: var(--hanlan-divider);
}

/* Input fallbacks */
input[type="text"]:not([class*="hanlan"]),
input[type="number"]:not([class*="hanlan"]),
input[type="search"]:not([class*="hanlan"]) {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    height: var(--hanlan-control-height);
    padding: 0 var(--hanlan-space-sm);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    transition: var(--hanlan-transition-base);
}

input[type="text"]:not([class*="hanlan"]):focus,
input[type="number"]:not([class*="hanlan"]):focus,
input[type="search"]:not([class*="hanlan"]):focus {
    outline: none;
    border-color: var(--hanlan-color-accent);
    box-shadow: 0 0 0 2px var(--hanlan-color-focus-ring-sm);
}

/* Select fallbacks */
select:not([class*="hanlan"]) {
    font-family: var(--hanlan-font-family-base);
    font-size: var(--hanlan-font-size-base);
    height: var(--hanlan-control-height);
    padding: 0 var(--hanlan-space-sm);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    color: var(--hanlan-color-text);
    cursor: pointer;
}

/* ========================================
   Spacing Utility Classes
   Use these instead of hardcoded values
   ======================================== */

.hanlan-gap-xs {
    gap: var(--hanlan-space-xs);
}

.hanlan-gap-sm {
    gap: var(--hanlan-space-sm);
}

.hanlan-gap-md {
    gap: var(--hanlan-space-md);
}

.hanlan-gap-lg {
    gap: var(--hanlan-space-lg);
}

.hanlan-gap-xl {
    gap: var(--hanlan-space-xl);
}

.hanlan-p-xs {
    padding: var(--hanlan-space-xs);
}

.hanlan-p-sm {
    padding: var(--hanlan-space-sm);
}

.hanlan-p-md {
    padding: var(--hanlan-space-md);
}

.hanlan-p-lg {
    padding: var(--hanlan-space-lg);
}

.hanlan-p-xl {
    padding: var(--hanlan-space-xl);
}

.hanlan-px-xs {
    padding-left: var(--hanlan-space-xs);
    padding-right: var(--hanlan-space-xs);
}

.hanlan-px-sm {
    padding-left: var(--hanlan-space-sm);
    padding-right: var(--hanlan-space-sm);
}

.hanlan-px-md {
    padding-left: var(--hanlan-space-md);
    padding-right: var(--hanlan-space-md);
}

.hanlan-px-lg {
    padding-left: var(--hanlan-space-lg);
    padding-right: var(--hanlan-space-lg);
}

.hanlan-py-xs {
    padding-top: var(--hanlan-space-xs);
    padding-bottom: var(--hanlan-space-xs);
}

.hanlan-py-sm {
    padding-top: var(--hanlan-space-sm);
    padding-bottom: var(--hanlan-space-sm);
}

.hanlan-py-md {
    padding-top: var(--hanlan-space-md);
    padding-bottom: var(--hanlan-space-md);
}

.hanlan-py-lg {
    padding-top: var(--hanlan-space-lg);
    padding-bottom: var(--hanlan-space-lg);
}

.hanlan-m-xs {
    margin: var(--hanlan-space-xs);
}

.hanlan-m-sm {
    margin: var(--hanlan-space-sm);
}

.hanlan-m-md {
    margin: var(--hanlan-space-md);
}

.hanlan-m-lg {
    margin: var(--hanlan-space-lg);
}

.hanlan-mb-xs {
    margin-bottom: var(--hanlan-space-xs);
}

.hanlan-mb-sm {
    margin-bottom: var(--hanlan-space-sm);
}

.hanlan-mb-md {
    margin-bottom: var(--hanlan-space-md);
}

.hanlan-mb-lg {
    margin-bottom: var(--hanlan-space-lg);
}

.hanlan-mt-xs {
    margin-top: var(--hanlan-space-xs);
}

.hanlan-mt-sm {
    margin-top: var(--hanlan-space-sm);
}

.hanlan-mt-md {
    margin-top: var(--hanlan-space-md);
}

.hanlan-mt-lg {
    margin-top: var(--hanlan-space-lg);
}

/* ========================================
   Modal Scale Animations
   ======================================== */

/* Modal scale-in animation (subtle spring) */
.hanlan-animate-scale-in {
    animation: hanlanModalScaleIn 250ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

/* Modal scale-out animation (subtle ease-out) */
.hanlan-animate-scale-out {
    animation: hanlanModalScaleOut 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes hanlanModalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hanlanModalScaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* ========================================
   Context Menu Dropdown Fix
   Ensures dropdowns inside context menus behave normally
   ======================================== */

/* Context menus with nested dropdowns need visible overflow for dropdowns to show */
/* But still need scrolling on the content wrapper */
.hanlan-context-menu--has-dropdowns {
    overflow: visible !important;
    max-height: none !important;
}

.hanlan-context-menu--has-dropdowns>.hanlan-context-menu-content {
    max-height: 50vh !important;
    overflow-y: overlay;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Dropdowns inside context menus need proper positioning context */
.hanlan-context-menu .hanlan-dropdown {
    position: relative;
    display: block;
    width: 100%;
}

/* Dropdown menus inside context menus must stay relative to their trigger */
.hanlan-context-menu .hanlan-dropdown-menu {
    position: absolute;
    z-index: 10;
    /* Use left-aligned positioning instead of centered */
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    transform-origin: top left;
}

/* Override upward positioning for context menus */
.hanlan-context-menu .hanlan-dropdown.open.hanlan-dropdown--upward .hanlan-dropdown-menu {
    top: auto;
    bottom: calc(100% + var(--hanlan-space-xs));
    transform-origin: bottom left;
}

/* Style the dropdown trigger inside context menus as a form input, not a menu item */
.hanlan-context-menu .hanlan-dropdown-trigger {
    position: relative;
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    padding-right: var(--hanlan-space-xl);
    background: var(--hanlan-color-bg-input);
    border: var(--hanlan-border);
    border-radius: var(--hanlan-radius);
    cursor: pointer;
    transition: background-color var(--hanlan-transition-base), border-color var(--hanlan-transition-base);
    user-select: none;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    min-height: var(--hanlan-control-height);
    height: var(--hanlan-control-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.hanlan-context-menu .hanlan-dropdown-trigger:hover {
    background: var(--hanlan-color-bg-hover);
    border-color: var(--hanlan-color-border-strong);
}

/* Dropdown trigger arrow in context menu - absolute positioned like standard dropdowns */
.hanlan-context-menu .hanlan-dropdown-trigger::after {
    position: absolute;
    right: var(--hanlan-space-sm);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    margin-left: 0;
}

.hanlan-context-menu .hanlan-dropdown.open .hanlan-dropdown-trigger::after {
    transform: translateY(-25%) rotate(-135deg);
}

/* Dropdown items inside context menu should match context menu styling */
.hanlan-context-menu .hanlan-dropdown-item {
    padding: var(--hanlan-space-xs) var(--hanlan-space-md);
    margin-bottom: var(--hanlan-space-xs);
}

.hanlan-context-menu .hanlan-dropdown-item:last-child {
    margin-bottom: 0;
}
/* License activation modal — accent-colored 1px rim (matches plugin-wide
   rim width). Uses the real CSS border set in licensing.css; box-shadow
   only adds the soft orange bloom, NOT a second rim layer. */
.hanlan-licensing-container {
  border-color: var(--hanlan-plugin-gradient-first-color-hover, #ffb84d) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 20px 4px rgba(245, 166, 35, 0.25),
    0 0 40px 8px rgba(245, 166, 35, 0.15);
}

/* Dev-only control inside the activation modal.
   It needs a slightly stronger neutral fill than the standard button token
   because it sits against the licensing glass/glow stack. */
body.hanlan_theme_dark .hanlan-licensing-dev-bypass {
  background: rgba(255, 255, 255, 0.14);
  color: var(--hanlan-color-text);
}

body.hanlan_theme_dark .hanlan-licensing-dev-bypass:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--hanlan-color-text);
}

/* Light-mode license key placeholder — softer gray to match the muted
   icon tier (text-muted feels too heavy for a placeholder in light mode). */
body.hanlan_theme_light .hanlan-licensing-input-wrapper .hanlan-input::placeholder {
  color: #9a9a9a;
}

#hanlan-info-modal .hanlan-settings-footer {
  gap: var(--hanlan-space-xs);
  padding-bottom: var(--hanlan-space-xs) !important;
}

.hanlan-info-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--hanlan-space-sm);
  padding-top: var(--hanlan-space-xs);
  margin-top: 0;
}

/* ─── About Modal: Hero Section ───────────────────────
   Responsive: logo and padding scale down based on viewport height
   so the modal's bottom content (links, license badge) never gets
   cut off on small CEP panels. */
.hanlan-info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(var(--hanlan-space-xs), 2vh, var(--hanlan-space-lg)) 0 clamp(var(--hanlan-space-xs), 1.5vh, var(--hanlan-space-md));
  gap: clamp(var(--hanlan-space-xxs), 0.8vh, var(--hanlan-space-sm));
}

.hanlan-info-hero-logo {
  width: clamp(80px, 22vh, 180px);
  max-width: 80%;
  aspect-ratio: 2429.09 / 1000;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

/* Light theme: darken the logo to match --hanlan-color-text (#333)
   via brightness(0.2) — white source × 0.2 = 51 = approximate #333.
   Softer drop shadow to match light theme aesthetic. */
body.hanlan_theme_light .hanlan-info-hero-logo {
  filter: brightness(0.2) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
}

.hanlan-info-hero-logo--placeholder {
  width: clamp(80px, 22vh, 180px);
  height: clamp(40px, 10vh, 80px);
  background: var(--hanlan-color-bg-elevated);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hanlan-color-text-muted);
  font-size: 11px;
}

.hanlan-info-hero-title {
  font-size: clamp(14px, 2.4vh, 20px);
  font-weight: 800;
  color: var(--hanlan-color-text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: clamp(0px, 0.6vh, var(--hanlan-space-sm));
}

.hanlan-info-hero-meta {
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  font-family: var(--hanlan-font-family-mono, 'SF Mono', monospace);
  letter-spacing: 0.5px;
}

/* ─── About Modal: Tapered Divider ───────────────────── */
.hanlan-info-divider-tapered {
  height: var(--hanlan-divider-width);
  margin: var(--hanlan-space-md) auto var(--hanlan-space-sm);
  width: 60%;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--hanlan-divider-color) 30%,
    var(--hanlan-divider-color) 70%,
    transparent 100%
  );
}

/* ─── About Modal: Author Credit (inline with links) ─── */
.hanlan-info-credit-label {
  opacity: 0.7;
  color: var(--hanlan-color-text-muted);
}

.hanlan-info-links .hanlan-link-gradient {
  font-weight: 600;
}

/* ─── About Modal: License Status (rounded pill) ─────── */
.hanlan-info-license-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hanlan-space-sm);
  width: 100%;
  box-sizing: border-box;
  padding: var(--hanlan-space-xs) var(--hanlan-space-sm) var(--hanlan-space-xs) var(--hanlan-space-md);
  background: var(--hanlan-info-license-status-bg, var(--hanlan-color-bg-elevated));
  border-radius: 999px;
}

body.hanlan_theme_dark .hanlan-info-license-status {
  --hanlan-info-license-status-bg: rgba(255, 255, 255, 0.05);
}

/* One-off token: this row sits inside pale glass, so it needs a little more
   body than standard light surfaces to keep the status text readable. */
body.hanlan_theme_light .hanlan-info-license-status {
  --hanlan-info-license-status-bg: rgba(0, 0, 0, 0.04);
}

.hanlan-info-license-left {
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-xs);
}

.hanlan-info-license-text {
  font-size: 12px;
  font-weight: var(--hanlan-font-weight-medium);
}

.hanlan-info-website-link,
.hanlan-info-support-link {
  font-size: 12px;
}

.hanlan-info-license-status .hanlan-manage-licenses-token {
  border-radius: 999px;
}

.hanlan-manage-licenses-token {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--hanlan-font-weight-medium);
  color: var(--hanlan-color-text-muted);
  background: var(--hanlan-color-bg-input);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease,
              background-color 150ms ease,
              border-color 150ms ease;
  white-space: nowrap;
}

.hanlan-manage-licenses-token svg {
  width: 11px;
  height: 11px;
  opacity: 0.5;
  fill: none;
  transition: opacity var(--hanlan-duration-fast) var(--hanlan-ease-out);
}

.hanlan-manage-licenses-token:hover svg {
  opacity: 0.8;
  fill: none;
}

body.hanlan_theme_light .hanlan-manage-licenses-token {
  background: var(--hanlan-color-bg-input);
}

body.hanlan_theme_light .hanlan-manage-licenses-token:hover {
  background: var(--hanlan-color-bg-hover);
}

/* ─── About Modal: Links Row ─────────────────────────── */
.hanlan-info-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hanlan-space-sm);
  font-size: 11px;
  padding-top: var(--hanlan-space-xs);
  padding-bottom: clamp(var(--hanlan-space-xs), 2vh, var(--hanlan-space-lg));
}

.hanlan-info-links-separator {
  color: var(--hanlan-color-text-muted);
  opacity: 0.8;
  font-size: 18px;
  margin: 0 2px;
}

.hanlan-manage-licenses-token:hover {
  opacity: 1;
}

.hanlan-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--hanlan-space-xxs);
  margin-left: var(--hanlan-space-xxs);
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

#preset-dropdown-value.is-placeholder {
  color: var(--hanlan-color-text-muted);
}

#preset-dropdown-trigger:has(#preset-dropdown-value:not(.is-placeholder)) {
  border-color: var(--hanlan-color-accent);
}

.hanlan-toolbar.hanlan-toolbar--modal-level {
  z-index: calc(var(--hanlan-z-modal, 3100) + 50);
}

.hanlan-btn-row > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center;
}

.hanlan-btn-row > .hanlan-input,
.hanlan-btn-row > input[type="text"] {
  width: auto;
}

.hanlan-btn-row > .hanlan-btn-icon {
  flex-shrink: 0;
  width: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  height: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  min-width: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  min-height: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  max-width: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  max-height: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  aspect-ratio: 1 / 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hanlan-section-header-row .hanlan-btn-row {
  width: auto;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-xs);
  padding-top: var(--hanlan-space-xs);
}


.row {
  display: flex;
  gap: var(--hanlan-space-sm);
  align-items: center;
}

.label {
  font-size: var(--hanlan-font-size-base);
  font-weight: 500;
  color: var(--hanlan-color-text-muted);
  /* Standardised label→input vertical gap (4px). Halved from xs in v1.0.2 for
     consistency across every modal and settings row. Containers with their own
     flex `gap` (e.g. .modal-form-field, .modal-grid-item) zero this and rely on
     the parent gap; standalone labels get this default. */
  margin-bottom: var(--hanlan-space-xxs);
  display: block;
}

/* ========================================
   Field Hint — standardised helper text under a form control
   AE / Photoshop / Figma / Notion / macOS Settings convention:
   one short grey line directly under the control it describes,
   tight-bound above, clear gap below to the next control.

   Default: text-input + hint. 4px gap to the control above.
   --for-control: checkbox/switch + hint. Pulls up into the switch
   label's natural margin-bottom, indents past the 16px control +
   10px gap so the line aligns under the label text (not the box).
   ======================================== */
.hanlan-field-hint {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--hanlan-color-text-muted);
  margin: var(--hanlan-space-xxs) 0 0;
}

.hanlan-field-hint--for-control {
  margin-top: calc(var(--hanlan-space-sm) * -1 + var(--hanlan-space-xxs));
  margin-bottom: var(--hanlan-space-xs);
  margin-left: calc(16px + var(--hanlan-space-sm));
}

.hidden {
  display: none !important;
}

.hanlan-stepper-vertical {
  --hanlan-stepper-max-digits: 3;
  display: flex;
  align-items: stretch;
  min-width: 60px;
  max-width: 80px;
  height: var(--hanlan-control-height);
  border-radius: var(--hanlan-radius);
  overflow: hidden;
  background: var(--hanlan-color-bg-input);
  border: none;
}

.hanlan-stepper-vertical .hanlan-stepper-vertical-value,
.hanlan-stepper .hanlan-stepper-value {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--hanlan-font-family-base);
  font-size: var(--hanlan-font-size-base);
  color: var(--hanlan-color-text);
}

.hanlan-stepper-vertical .hanlan-stepper-vertical-value::-webkit-outer-spin-button,
.hanlan-stepper-vertical .hanlan-stepper-vertical-value::-webkit-inner-spin-button,
.hanlan-stepper .hanlan-stepper-value::-webkit-outer-spin-button,
.hanlan-stepper .hanlan-stepper-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hanlan-stepper-vertical-controls {
  position: relative;
  width: 20px;
  height: 100%;
  flex: 0 0 20px;
}

.hanlan-stepper-vertical-button {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hanlan-color-bg-input);
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--hanlan-color-text-muted);
  transition: background var(--hanlan-transition-base), color var(--hanlan-transition-base);
}

.hanlan-stepper-vertical-button:hover {
  background: var(--hanlan-color-bg-hover);
  color: var(--hanlan-color-text);
}

.hanlan-stepper-vertical-button-up {
  top: 0;
  border-radius: 0 var(--hanlan-radius-sm) 0 0;
  border-bottom: none;
}

.hanlan-stepper-vertical-button-down {
  bottom: 0;
  border-radius: 0 0 var(--hanlan-radius-sm) 0;
}

.hanlan-stepper-vertical-button::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
}

.hanlan-stepper-vertical-button-up::after {
  border-width: 0 3px 4px 3px;
  border-color: transparent transparent currentColor transparent;
}

.hanlan-stepper-vertical-button-down::after {
  border-width: 4px 3px 0 3px;
  border-color: currentColor transparent transparent transparent;
}

.hanlan-stepper-vertical,
input[type="number"],
select,
.hanlan-select {
  border-color: transparent;
}

.hanlan-stepper-vertical .hanlan-stepper-vertical-value {
  flex: 1;
  min-width: 0;
  height: 100%;
  text-align: center;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--hanlan-color-text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--hanlan-space-xl);
  height: 100%;
  min-height: 150px;
}

.tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: calc(var(--hanlan-control-height) + 2 * var(--hanlan-space-md));
}

.queue-selected-count {
    color: var(--hanlan-text-secondary, #8e8e93);
    font-weight: normal;
    font-size: 0.9em;
}

.tab-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--hanlan-space-md);
}

.tab-panel.active {
  display: flex;
}

#queue-tab {
  gap: var(--hanlan-space-md);
}

.queue-section,
.presets-section,
.project-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-top: var(--hanlan-space-xs);
}

.tab-panel > .section:not(.queue-section):not(.presets-section):not(.project-section) {
  flex-shrink: 0;
}

#preset-categories {
  overflow: visible;
  min-height: 100%;
  padding: 8px 12px 8px 8px;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

#queue-list .hanlan-accordion,
#project-list .hanlan-accordion,
#preset-categories .hanlan-accordion {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  margin: 4px 0;
}

#preset-categories .hanlan-accordion-item,
#project-list .hanlan-accordion-item,
#queue-list .hanlan-accordion-item {
  margin-bottom: var(--hanlan-space-xs);
}
#preset-categories .hanlan-accordion-item:last-child,
#project-list .hanlan-accordion-item:last-child,
#queue-list .hanlan-accordion-item:last-child {
  margin-bottom: 0;
}

#preset-categories .hanlan-accordion-item + .hanlan-accordion-item > .hanlan-accordion-header,
#queue-list .hanlan-accordion-item + .hanlan-accordion-item > .hanlan-accordion-header,
#project-list .hanlan-accordion-item + .hanlan-accordion-item > .hanlan-accordion-header {
  border-top: none;
}

#preset-categories .hanlan-accordion-header,
#queue-list .hanlan-accordion-header,
#project-list .hanlan-accordion-header {
  min-height: 28px;
  padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
  align-items: center;
  line-height: 1.2;
  font-size: var(--hanlan-font-size-base);
}

#preset-categories .hanlan-accordion-count-badge,
#queue-list .hanlan-accordion-count-badge,
#project-list .hanlan-accordion-count-badge {
  background: none;
  border: none;
  min-width: unset;
  height: unset;
  padding: 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--hanlan-color-text-muted);
  opacity: 0.6;
}

#preset-categories .hanlan-accordion-item--open .hanlan-accordion-body,
#project-list .hanlan-accordion-item--open .hanlan-accordion-body,
#queue-list .hanlan-accordion-item--open .hanlan-accordion-body {
  padding: var(--hanlan-space-xs) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-xs);
}

#preset-categories .hanlan-accordion-item:not(.hanlan-accordion-item--open) .hanlan-accordion-content,
#queue-list .hanlan-accordion-item:not(.hanlan-accordion-item--open) .hanlan-accordion-content,
#project-list .hanlan-accordion-item:not(.hanlan-accordion-item--open) .hanlan-accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

#queue-list,
#project-list {
  overflow: visible;
  min-height: 100%;
  padding: 8px 12px 8px 8px;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Hide HanlanCore's overlay divs — replaced by wrapper pseudo-elements */
.hanlan-scroll-fade__overlay {
  display: none !important;
}

/* ===== Animated custom scrollbar shells (modal-body & dropdown-menu) =====
   The list scroll-fade-wrap pattern hides native scrollbars and uses a JS-
   driven thumb that opacity-transitions in/out. Native ::-webkit-scrollbar-
   thumb can't transition in CEP Chromium 99. To get the same animation in
   modal/dropdown without restructuring HTML, JS wraps their children in
   `.cor-scroll-viewport` and tags the outer shell with data-cor-shell="1".
   The outer shell holds the absolutely-positioned custom track; the inner
   viewport handles overflow + native scrollbar (now hidden). */

.cor-scroll-viewport::-webkit-scrollbar {
  width: 0;
  display: none;
}
.cor-scroll-viewport {
  scrollbar-width: none;
}
/* Disable mask-image fade on shell viewports — they use overlay-gradient
   fade instead so opacity animates (mask-image transitions don't work). */
.cor-scroll-viewport.hanlan-scroll-fade {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Re-allow HanlanCore overlay divs inside custom-shell viewports — they
   power the gradient fade affordance for modal/dropdown content. */
.cor-scroll-viewport > .hanlan-scroll-fade__overlay {
  display: block !important;
}

/* Modal body shell: outer doesn't scroll, inner viewport does. overflow:hidden
   so content can't visually leak past the body bounds (into footer/header).
   The shell's own box-shadow (none) and parent rim are unaffected. */
.hanlan-modal-body[data-cor-shell="1"] {
  padding: 0;
  border-right: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.hanlan-modal-body[data-cor-shell="1"] > .cor-scroll-viewport {
  flex: 1;
  min-height: 0;
  padding: var(--hanlan-modal-padding);
  overflow-y: overlay;
  overflow-x: hidden;
}
/* Modal viewports need the actual gradient affordance: when content is clipped
   above/below the visible body, rows should fade into the modal glass instead
   of looking accidentally chopped. JS still mirrors scroll state to the modal
   shell for the subtle header/footer shadow, but the viewport owns the fade. */
.hanlan-modal-body[data-cor-shell="1"] > .cor-scroll-viewport {
  --hanlan-scroll-fade-size: 24px;
  --hanlan-scroll-fade-bg: var(--hanlan-modal-shelf-bg, var(--hanlan-color-bg-elevated));
  --hanlan-scroll-fade-inset-left: var(--hanlan-modal-padding);
  --hanlan-scroll-fade-inset-right: var(--hanlan-modal-padding);
  --hanlan-scroll-fade-edge-offset: var(--hanlan-modal-padding);
}
.hanlan-modal-body[data-cor-shell="1"] .cor-scroll-viewport > .hanlan-scroll-fade__overlay {
  z-index: 6;
  border-radius: 0;
  background-clip: padding-box;
}
.hanlan-modal-body[data-cor-shell="1"] .cor-scroll-viewport > .hanlan-scroll-fade__top {
  transform: translateY(calc(-1 * var(--hanlan-scroll-fade-edge-offset)));
  background: linear-gradient(
    to bottom,
    var(--hanlan-scroll-fade-bg, var(--hanlan-glass-bg)) 0%,
    transparent 100%
  );
}
.hanlan-modal-body[data-cor-shell="1"] .cor-scroll-viewport > .hanlan-scroll-fade__bottom {
  transform: translateY(var(--hanlan-scroll-fade-edge-offset));
  background: linear-gradient(
    to top,
    var(--hanlan-scroll-fade-bg, var(--hanlan-glass-bg)) 0%,
    transparent 100%
  );
}

/* Dropdown menu shell. No fade affordance — items clip at the menu edge,
   matching native behaviour (Linear, Notion, Arc, Raycast, every macOS menu).
   Block layout (not flex) — the dropdown's only height anchor is its own
   max-height, and flex:1 + min-height:0 doesn't reliably constrain a flex
   item inside a max-height-only flex container. Putting max-height directly
   on the viewport avoids the circularity and makes scrolling work. */
.hanlan-dropdown-menu[data-cor-shell="1"] {
  padding: 0;
  overflow: hidden;
}
.hanlan-dropdown.open > .hanlan-dropdown-menu[data-cor-shell="1"],
.hanlan-dropdown-menu[data-cor-shell="1"].hanlan-dropdown-menu--portal-open {
  display: block;
}
.hanlan-dropdown-menu[data-cor-shell="1"] > .cor-scroll-viewport {
  max-height: var(--hanlan-dropdown-max-height);
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
.hanlan-dropdown-menu[data-cor-shell="1"] .cor-scroll-viewport > .hanlan-scroll-fade__overlay {
  display: none !important;
}

/* Scroll fade wrapper — sits around each scrollable list container.
   Uses ::before/::after as opaque gradient overlays.
   JS sets data-scroll-fade on this element: "top", "bottom", or "both". */
.scroll-fade-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tab-scroll-viewport {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow-y: overlay;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.tab-scroll-viewport.hanlan-scrollbar-visible,
.tab-scroll-viewport:hover,
.tab-scroll-viewport:focus-within {
  scrollbar-color: var(--cor-tab-scrollbar-thumb-hover) transparent;
}

/* Hide native scrollbar on tab viewports — replaced by custom JS overlay */
.tab-scroll-viewport::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* Custom scrollbar overlay thumb. Track is inset 6px from all container
   edges so the thumb visually clears the rim (Apple HIG: thumb shouldn't
   touch the container border or adjacent dividers). pointer-events: auto
   so click-on-track-to-jump works (standard scrollbar UX). The thumb's
   own click is filtered out via `e.target === thumb` in createScrollbar's
   track mousedown handler. */
.cor-scrollbar-track {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  bottom: 6px;
  z-index: 3;
  pointer-events: auto;
}

.cor-scrollbar-thumb {
  position: absolute;
  right: 0;
  width: 6px;
  min-height: 24px;
  border-radius: 3px;
  background-color: var(--hanlan-color-scrollbar-hover);
  opacity: 0;
  /* Width transition gives the Linear/Figma hover-expand affordance —
     visual feedback that the thumb is interactable. */
  transition: opacity 0.3s ease, background-color 0.2s ease, width 0.15s ease;
  pointer-events: auto;
  cursor: default;
}

.cor-scrollbar-thumb.is-visible {
  opacity: 1;
}

.cor-scrollbar-thumb:hover,
.cor-scrollbar-thumb.is-dragging {
  background-color: var(--hanlan-color-scrollbar-active);
  width: 8px;
}

/* Inline-thumb architecture (data-cor-inline-bar / cor-inline-scrollbar-thumb)
   removed — modal-body and dropdown-menu now use the same shell + viewport
   pattern as side panels via .cor-scrollbar-track / .cor-scrollbar-thumb. */

.tab-scroll-content {
  min-height: 100%;
  width: 100%;
}

.scroll-fade-wrap::before,
.scroll-fade-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--hanlan-transition-fast);
}

.scroll-fade-wrap::before {
  top: 0;
  background: linear-gradient(to bottom, var(--hanlan-color-bg-panel), transparent);
}

.scroll-fade-wrap::after {
  bottom: 0;
  background: linear-gradient(to top, var(--hanlan-color-bg-panel), transparent);
}

.scroll-fade-wrap[data-scroll-fade="top"]::before,
.scroll-fade-wrap[data-scroll-fade="both"]::before {
  opacity: 1;
}

.scroll-fade-wrap[data-scroll-fade="bottom"]::after,
.scroll-fade-wrap[data-scroll-fade="both"]::after {
  opacity: 1;
}

.section-actions {
  margin-top: auto;
  padding-top: var(--hanlan-space-lg);
  flex-shrink: 0;
}

#queue-list.hanlan-smart-list,
#project-list.hanlan-smart-list {
  gap: 8px;
}

.hanlan-smart-list-item {
  min-height: 32px;
  padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
}

.hanlan-smart-list-text {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  gap: var(--hanlan-space-sm);
}

.list-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  line-height: 1.4;
  /* Preserve actual case — naming patterns are case-sensitive */
  text-transform: none;
}

/* Queue folder names preserve user-entered case */
#queue-list .hanlan-accordion-header {
  text-transform: none;
}

/* Empty folder message */
.hanlan-folder-empty {
  padding: var(--hanlan-space-sm) var(--hanlan-space-md);
  margin: 4px 6px;
  color: var(--hanlan-color-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--hanlan-radius-sm, 4px);
  font-size: var(--hanlan-font-size-sm, 11px);
  font-style: italic;
  text-align: center;
  opacity: 0.6;
}

.list-item-meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: var(--hanlan-space-md);
  color: var(--hanlan-color-text-muted);
  white-space: nowrap;
}

.meta-dot {
  opacity: 0.45;
  font-size: 13px;
}

.token-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hanlan-space-xs);
  padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
  background: var(--hanlan-color-bg-elevated);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  color: var(--hanlan-color-text);
  font-size: var(--hanlan-font-size-base);
  margin-right: var(--hanlan-space-xs);
  margin-bottom: var(--hanlan-space-xs);
}

.token-chip-remove {
  cursor: pointer;
  color: var(--hanlan-color-text-muted);
  font-size: var(--hanlan-font-size-base);
  line-height: 1;
  transition: color var(--hanlan-transition-base);
}

.token-chip-remove:hover {
  color: var(--hanlan-color-error);
}

.token-bar {
  min-height: 40px;
  padding: var(--hanlan-space-sm);
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  margin-bottom: var(--hanlan-space-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.token-placeholder {
  color: var(--hanlan-color-text-muted);
  font-size: var(--hanlan-font-size-base);
  font-style: italic;
}

.hanlan-token-list > .hanlan-token-add-btn,
.hanlan-token-list > .hanlan-btn-icon[title="Add custom token"] {
  width: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  min-width: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  max-width: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  height: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  min-height: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  max-height: var(--hanlan-icon-button-size, var(--hanlan-control-height));
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--hanlan-color-border);
  border-radius: 4px;
  background: var(--hanlan-color-bg-input);
  color: var(--hanlan-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  box-shadow: none;
}

.cor-smart-naming-links {
  display: flex;
  gap: var(--hanlan-space-xs);
  flex-wrap: wrap;
  margin-top: var(--hanlan-space-sm);
}

.cor-link-btn {
  height: 28px;
  padding: 0 var(--hanlan-space-sm);
  font-size: var(--hanlan-font-size-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.cor-inline-chevron {
  width: 14px;
  min-width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1;
  opacity: 0.9;
}

.cor-inline-chevron svg {
  display: block;
}

.cor-inline-chevron--end {
  margin-left: 2px;
}

.cor-control-fill {
  flex: 1;
  min-width: 0;
}

/* v1.1 modal action grammar — scoped utility for the new render/bundle flows.
   Keeps secondary actions visually equivalent without changing global buttons. */
.cor-v11-action.hanlan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cor-v11-action-height);
  min-height: var(--cor-v11-action-height);
  padding: 0 var(--cor-v11-action-padding-x);
  border: 1px solid var(--hanlan-button-border, var(--hanlan-control-border));
  border-radius: var(--hanlan-radius-sm);
  color: var(--hanlan-color-text-muted);
  background: var(--hanlan-color-bg-button, var(--hanlan-color-bg-input));
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.cor-v11-action.hanlan-btn:hover,
.cor-v11-action.hanlan-btn:focus-visible {
  color: var(--hanlan-color-text);
  background: var(--hanlan-color-bg-button-hover, var(--hanlan-color-bg-hover));
  border-color: var(--hanlan-button-border-hover, var(--hanlan-color-border-strong, var(--hanlan-control-border)));
}

.cor-v11-action--field.hanlan-btn {
  height: var(--cor-v11-field-height);
  min-height: var(--cor-v11-field-height);
  font-size: var(--hanlan-font-size-base);
  padding: 0 var(--cor-v11-action-padding-x);
}

.cor-v11-action.hanlan-btn.hanlan-btn--destructive {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ff6b61;
  font-weight: 600;
}

.cor-v11-action.hanlan-btn.hanlan-btn--destructive:hover,
.cor-v11-action.hanlan-btn.hanlan-btn--destructive:focus-visible {
  background: rgba(239, 68, 68, 0.24);
  border-color: rgba(239, 68, 68, 0.8);
}

/* Flow body (Duplicate from List, Add to Render Queue) must never push
   the modal wider than its declared width. Long output paths / filenames
   in the preview table previously overflowed the modal because nothing
   capped horizontal growth on the inner flow container, and the segmented
   tab grid forced .cor-list-flow itself wider than the modal body. */
.cor-list-flow,
.cor-list-flow * {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cor-list-flow {
  display: flex;
  flex-direction: column;
  /* v1.1 COR parity — shared compact section rhythm. */
  gap: var(--cor-v11-section-gap);
  width: 100%;
}

.cor-flow-stepbar {
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  align-self: flex-start;
  color: var(--hanlan-color-text-muted);
  font-size: 11px;
  line-height: 1.2;
}

.cor-flow-step-count {
  color: var(--hanlan-color-text-muted);
  font-weight: 500;
}

.cor-flow-step-count::after {
  content: "·";
  margin-left: var(--cor-v11-gap);
  color: var(--hanlan-color-text-dim, var(--hanlan-color-text-muted));
}

.cor-flow-step-label {
  color: var(--hanlan-color-text);
  font-weight: 600;
}

/* Master list + summary read as quiet inline meta text, not boxed cards.
   Warning + error keep the bordered card treatment because they signal state. */
.cor-flow-master-list,
.cor-flow-summary {
  padding: 0;
  background: transparent;
  border: none;
  color: var(--hanlan-color-text-muted);
  font-size: var(--hanlan-font-size-sm);
  line-height: 1.45;
  margin: var(--cor-v11-gap) 0 var(--cor-v11-section-gap);
}

.cor-flow-master-list {
  margin-bottom: var(--cor-v11-gap);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cor-flow-source-count {
  min-height: 18px;
  margin: 0;
}

.cor-flow-source-count.cor-flow-error {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--hanlan-color-error);
}

.cor-flow-warning,
.cor-flow-error {
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius-sm);
  padding: var(--cor-v11-section-gap);
  background: var(--hanlan-color-bg-secondary);
  color: var(--hanlan-color-text-muted);
  font-size: var(--hanlan-font-size-sm);
}

.cor-flow-warning {
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--hanlan-color-warning, #f59e0b);
}

.cor-flow-error {
  border-color: rgba(239, 68, 68, 0.45);
  color: var(--hanlan-color-error);
}

.cor-flow-source-panel,
.cor-flow-pattern-panel {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-section-gap);
}

.cor-flow-pattern-panel > .cor-link-btn {
  align-self: flex-start;
  height: 22px;
  min-height: 22px;
  padding: 0;
  gap: var(--cor-v11-gap);
  background: transparent;
  border: none;
  color: var(--hanlan-color-text-muted);
  box-shadow: none;
}

.cor-flow-pattern-panel > .cor-link-btn:hover,
.cor-flow-pattern-panel > .cor-link-btn:focus-visible {
  background: transparent;
  color: var(--hanlan-color-text);
}

.cor-duplicate-pattern-head .cor-rq-default-pattern-toggle {
  color: var(--hanlan-color-text-secondary);
}

.cor-duplicate-pattern-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--cor-v11-gap);
}

.cor-duplicate-pattern-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cor-duplicate-pattern-preview-value {
  display: block;
  min-height: var(--cor-v11-field-height);
  padding: 0 var(--hanlan-space-sm);
  border: 1px solid var(--hanlan-control-border);
  border-radius: var(--hanlan-radius-sm);
  background: var(--hanlan-color-bg-input);
  color: var(--hanlan-color-text);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: var(--cor-v11-field-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#duplicate-list-naming-container {
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  margin-top: var(--cor-v11-section-gap);
  transition: max-height var(--hanlan-duration-normal, 280ms) var(--hanlan-ease-out, ease),
              opacity var(--hanlan-duration-fast, 160ms) var(--hanlan-ease-out, ease),
              margin-top var(--hanlan-duration-normal, 280ms) var(--hanlan-ease-out, ease);
}

#duplicate-list-naming-container.cor-rq-default-pattern-collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

.cor-list-flow--duplicate #duplicate-preview .cor-flow-table-wrap {
  max-height: 224px;
}

.cor-list-flow--duplicate #duplicate-preview .cor-flow-table th:nth-child(1),
.cor-list-flow--duplicate #duplicate-preview .cor-flow-table td:nth-child(1) {
  width: 27%;
}

.cor-list-flow--duplicate #duplicate-preview .cor-flow-table th:nth-child(2),
.cor-list-flow--duplicate #duplicate-preview .cor-flow-table td:nth-child(2) {
  width: 25%;
}

.cor-list-flow--duplicate #duplicate-preview .cor-flow-table th:nth-child(3),
.cor-list-flow--duplicate #duplicate-preview .cor-flow-table td:nth-child(3) {
  width: 48%;
}

/* Paste textarea gets enough vertical room to actually read multiple lines.
   Default rendering was a single-line-tall input which felt cramped. */
.cor-flow-source-panel textarea,
.cor-flow-source-panel .hanlan-input[is="textarea"],
#duplicate-paste-text {
  min-height: 96px;
  resize: vertical;
  font-family: var(--hanlan-font-mono, var(--hanlan-font-sans));
  line-height: 1.5;
}

/* CSV dropzone + sample-link + error block breathes vertically. */
.cor-flow-csv-actions {
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  margin-top: var(--cor-v11-gap);
}

.cor-flow-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cor-v11-gap);
}

.cor-flow-segmented .hanlan-btn {
  justify-content: center;
}

.cor-flow-segmented .hanlan-btn--active {
  background: var(--hanlan-plugin-gradient);
  color: var(--hanlan-color-text-on-accent, #fff);
  border: none;
}

.cor-flow-segmented .hanlan-btn--active:hover {
  background: var(--hanlan-plugin-gradient-hover, var(--hanlan-plugin-gradient));
}

.cor-flow-dropzone {
  position: relative;
  border: 1px dashed var(--hanlan-color-border-strong);
  border-radius: var(--hanlan-radius-sm);
  padding: var(--cor-v11-section-gap);
  text-align: center;
  background: var(--hanlan-color-bg-secondary);
}

.cor-flow-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cor-flow-dropzone-hint {
  margin-top: var(--cor-v11-gap);
  color: var(--hanlan-color-text-muted);
}

.cor-flow-range-field {
  flex: 1;
  min-width: 0;
}

.cor-flow-table-wrap {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius-sm);
}

.cor-flow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hanlan-font-size-xs);
  /* Fixed layout so long filenames + error notes can't push the table
     wider than the modal. Combined with overflow-wrap below, long unbroken
     text wraps inside the cell instead of overflowing horizontally. */
  table-layout: fixed;
}

.cor-flow-table th,
.cor-flow-table td {
  padding: var(--cor-v11-gap) var(--cor-v11-section-gap);
  border-bottom: var(--hanlan-divider);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cor-flow-table th {
  color: var(--hanlan-color-text-muted);
  font-weight: 600;
  background: var(--hanlan-color-bg-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.cor-flow-truncate {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.cor-flow-truncate--with-status {
  max-width: calc(100% - 18px);
}

.cor-flow-status {
  display: inline-flex;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: var(--cor-v11-gap);
  background: var(--hanlan-plugin-accent);
}

.cor-flow-status--ok {
  background: var(--hanlan-color-success);
}

.cor-flow-status--warn {
  background: var(--hanlan-color-warning, #f59e0b);
}

.cor-flow-status--bad {
  background: var(--hanlan-color-error);
}

.cor-flow-note {
  margin-top: var(--cor-v11-gap);
  color: var(--hanlan-color-text-muted);
}

.cor-flow-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--cor-v11-gap);
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: var(--cor-v11-section-gap) 0 calc(-1 * var(--hanlan-modal-padding));
  padding: var(--cor-v11-section-gap) 0 var(--hanlan-modal-padding);
  background: var(--hanlan-modal-shelf-bg, var(--hanlan-color-bg-elevated));
  border-top: var(--hanlan-divider);
  position: sticky;
  bottom: calc(-1 * var(--hanlan-modal-padding));
  z-index: 7;
  box-shadow:
    0 -10px 18px -12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.cor-flow-footer::before {
  content: none;
}

.cor-flow-footer .hanlan-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* ========================================================================
   COR Render Queue v1.0.2 — multi-output modal
   Stack of output rows beneath a shared "defaults" header. Each row
   collapses to a one-line summary; click to expand inline. Inheritance
   from the shared defaults is shown via a "linked" pill.
   ======================================================================== */

.cor-rq-defaults {
  display: grid;
  /* v1.1 COR parity — label column sizes to its text (was a fixed 138px, wider
     than the labels, which left a dead gap before each control). */
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--cor-v11-gap);
  row-gap: var(--cor-v11-gap);
  align-items: center;
  /* v1.1 COR parity — no horizontal padding so labels align to the same left
     edge as every other section (masters, outputs, preview, matrix). */
  padding: 2px 0 var(--cor-v11-gap);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.cor-rq-default-row {
  display: contents;
}

.cor-rq-default-row .label {
  grid-column: 1;
  display: flex;
  align-items: center;
  margin: 0;
  min-height: var(--cor-v11-field-height);
  line-height: 1;
}

.cor-rq-default-control {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: var(--cor-v11-gap);
  min-width: 0;
}

.cor-rq-default-control .hanlan-input {
  min-width: 0;
  margin-bottom: 0;
}

.cor-rq-default-row--folder .hanlan-input,
.cor-rq-default-row--folder .hanlan-btn {
  height: var(--cor-v11-field-height);
  min-height: var(--cor-v11-field-height);
  align-self: start;
}

.cor-rq-default-row--folder .hanlan-input {
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--cor-v11-field-height);
}

.cor-rq-default-row--folder .hanlan-btn {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

.cor-rq-outputs-section {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-stack-gap);
}

.cor-rq-outputs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cor-v11-gap);
}

.cor-rq-outputs-head .hanlan_heading {
  margin-bottom: 0;
}

.cor-section-count {
  color: var(--hanlan-color-text-muted) !important;
  font-style: italic;
}

body.hanlan_theme_light .cor-section-count {
  color: var(--hanlan-color-text-secondary) !important;
}

.cor-rq-outputs-head .cor-v11-action {
  flex-shrink: 0;
}

.cor-rq-outputs {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-stack-gap);
}

.cor-rq-add-output-btn {
  align-self: flex-start;
}

.cor-rq-output {
  background: var(--hanlan-color-bg-secondary);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  /* v1.1 COR parity — compact AE-native row, was space-sm (too tall). */
  padding: var(--cor-v11-row-padding);
  transition: border-color var(--hanlan-transition-base), background var(--hanlan-transition-base);
}

.cor-rq-output:hover {
  border-color: var(--hanlan-color-border-strong);
}

.cor-rq-output--expanded {
  border-color: var(--hanlan-token-featured-border);
}

.cor-rq-output-head {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--cor-v11-gap);
  cursor: pointer;
}

.cor-rq-output-chevron {
  justify-self: center;
  opacity: 0.78;
  border-color: var(--hanlan-color-text-muted);
}

.cor-rq-output:hover .cor-rq-output-chevron,
.cor-rq-output--expanded .cor-rq-output-chevron {
  opacity: 1;
  border-color: var(--hanlan-color-text);
}

.cor-rq-output-textcol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cor-rq-output-format {
  font-size: 12px;
  font-weight: 500;
  color: var(--hanlan-color-text);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cor-rq-output-summary {
  max-width: 100%;
  min-width: 0;
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  font-family: 'SF Mono', Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cor-rq-summary-tag {
  color: var(--hanlan-color-text-dim, var(--hanlan-color-text-muted));
  font-style: italic;
  font-family: var(--hanlan-font-family-base);
  margin-right: 4px;
  opacity: 0.7;
}

body.hanlan_theme_light .cor-rq-summary-tag {
  color: var(--hanlan-color-text-secondary) !important;
  opacity: 1;
}

body.hanlan_theme_light .cor-rq-output-summary {
  color: var(--hanlan-color-text-secondary);
}

body.hanlan_theme_light .cor-rq-inherited,
body.hanlan_theme_light .cor-rq-preview-note,
body.hanlan_theme_light .cor-rq-matrix-cell--empty {
  color: var(--hanlan-color-text-muted) !important;
}

.cor-rq-output-actions {
  display: inline-flex;
  justify-content: flex-end;
  width: 32px;
  min-width: 32px;
  gap: 2px;
  flex-shrink: 0;
  align-self: center;
}

.hanlan-btn-icon.cor-rq-output-more {
  --hanlan-icon-button-size: 30px;
  background: transparent;
  border: none;
  color: var(--hanlan-color-text-muted);
  cursor: pointer;
  width: var(--hanlan-icon-button-size);
  height: var(--hanlan-icon-button-size);
  min-width: var(--hanlan-icon-button-size);
  min-height: var(--hanlan-icon-button-size);
  max-width: var(--hanlan-icon-button-size);
  max-height: var(--hanlan-icon-button-size);
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: var(--hanlan-radius);
  font-size: 16px;
  line-height: 0;
  flex: 0 0 var(--hanlan-icon-button-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cor-more-icon,
.cor-v11-more-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  overflow: visible;
}

.hanlan-btn-icon.cor-rq-output-more:hover,
.hanlan-btn-icon.cor-rq-output-more:focus,
.hanlan-btn-icon.cor-rq-output-more.cor-rq-output-more--open {
  color: var(--hanlan-color-text);
  background: var(--hanlan-color-bg-hover);
}

.cor-rq-output-body {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-gap);
  padding-top: var(--cor-v11-section-gap);
  margin-top: var(--cor-v11-section-gap);
}

.cor-rq-output-field {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: var(--cor-v11-gap);
}

.cor-rq-output-field .label {
  margin: 0;
}

.cor-rq-output-control {
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  min-width: 0;
}

.cor-rq-inherited {
  font-style: italic;
  color: var(--hanlan-color-text-muted);
}

.cor-rq-link-toggle {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hanlan-color-text-secondary);
}

.cor-rq-link-toggle--linked {
  color: var(--hanlan-plugin-accent);
  border-color: var(--hanlan-token-featured-border);
}

.cor-rq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--hanlan-space-xs);
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
}

.cor-rq-summary strong {
  color: var(--hanlan-color-text-muted);
  font-weight: 500;
}

.cor-rq-preview-card {
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  overflow: hidden;
}

.cor-rq-preview-comp {
  border-bottom: var(--hanlan-divider);
}

.cor-rq-preview-comp:last-child {
  border-bottom: none;
}

.cor-rq-preview-comp-head {
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  padding: var(--cor-v11-gap) var(--hanlan-space-md);
  cursor: pointer;
}

.cor-rq-preview-comp-head:hover {
  background: var(--hanlan-color-bg-hover);
}

.cor-rq-preview-comp--expanded .cor-rq-preview-comp-head {
  background: var(--hanlan-color-bg-active);
}

.cor-rq-preview-chevron {
  color: var(--hanlan-color-text-dim, var(--hanlan-color-text-muted));
  width: 12px;
  text-align: center;
  font-size: 10px;
}

.cor-rq-preview-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--hanlan-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cor-rq-preview-meta {
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  display: inline-flex;
  gap: var(--cor-v11-gap);
  align-items: center;
}

.cor-rq-preview-output {
  padding: var(--hanlan-space-xxs) var(--hanlan-space-md) var(--hanlan-space-xxs) 36px;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, monospace;
  color: var(--hanlan-color-text-muted);
  background: var(--hanlan-color-bg-inset);
  border-top: var(--hanlan-divider);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cor-v11-gap);
}

.cor-rq-preview-output > .cor-flow-status {
  flex: 0 0 9px;
}

.cor-rq-preview-output-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cor-rq-preview-note {
  flex: 0 0 100%;
  margin-top: var(--hanlan-space-xxs);
  margin-left: 14px;
  color: var(--hanlan-color-text-dim, var(--hanlan-color-text-muted));
  font-family: var(--hanlan-font-family-base);
  font-style: italic;
}

/* v1.0.3 — preview header + list/matrix toggle + matrix grid view */
.cor-rq-preview-header {
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  margin-bottom: var(--cor-v11-gap);
}

.cor-rq-preview-header-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hanlan-color-text-label);
  font-weight: 600;
}

.cor-rq-preview-header-meta {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--hanlan-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  font-weight: 500;
}

.cor-rq-preview-header-meta--ready {
  color: var(--hanlan-color-text-muted);
}

.cor-rq-preview-header-meta--warn {
  color: var(--hanlan-color-warning, #f59e0b);
}

.cor-rq-preview-header-meta--bad {
  color: var(--hanlan-color-error);
}

/* v1.1 redesign — one-click batch fix. Tinted accent button (secondary to the
   primary "Add to Queue" CTA); fills on hover. */
.cor-rq-fix-all-btn.hanlan-btn {
  background: var(--hanlan-color-accent-subtle);
  color: var(--hanlan-color-accent);
  border: 1px solid var(--hanlan-border-accent, var(--hanlan-color-accent));
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--hanlan-duration-fast, 120ms) var(--hanlan-ease-out, ease),
              color var(--hanlan-duration-fast, 120ms) var(--hanlan-ease-out, ease);
}
.cor-rq-fix-all-btn.hanlan-btn:hover,
.cor-rq-fix-all-btn.hanlan-btn:focus-visible {
  background: var(--hanlan-color-accent);
  color: var(--hanlan-color-text-on-accent, #fff);
}

/* v1.1 redesign — queue total relocated into the footer (next to Add to Queue),
   replacing the orphaned mid-modal "Queue total" block. */
.cor-rq-queue-count {
  font-size: var(--hanlan-font-size-xs, 10.5px);
  color: var(--hanlan-color-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.cor-rq-preview-toggle {
  display: inline-flex;
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius-sm);
  padding: 1px;
}

.cor-rq-preview-toggle-btn {
  background: transparent;
  border: none;
  color: var(--hanlan-color-text-muted);
  padding: 2px var(--cor-v11-action-padding-x);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--hanlan-radius-sm);
  font-family: var(--hanlan-font-family-base);
}

.cor-rq-preview-toggle-btn:hover {
  color: var(--hanlan-color-text);
}

.cor-rq-preview-toggle-btn--active {
  background: var(--hanlan-color-bg-hover);
  color: var(--hanlan-color-text);
}

.cor-rq-preview-view-btn {
  height: 22px;
  margin-left: 2px;
  color: var(--hanlan-color-text-muted);
  background: transparent;
  border-color: var(--hanlan-color-border);
  font-size: 11px;
}

.cor-rq-preview-view-btn:hover {
  color: var(--hanlan-color-text);
  background: var(--hanlan-color-bg-hover);
}

.cor-rq-matrix-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
}

.cor-rq-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, monospace;
}

.cor-rq-matrix thead th {
  background: var(--hanlan-color-bg-header);
  color: var(--hanlan-color-text-label);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--hanlan-font-family-base);
  padding: var(--cor-v11-cell-padding);
  text-align: left;
  border-bottom: var(--hanlan-divider);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.cor-rq-matrix-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--hanlan-color-bg-header-strong) !important;
}

.cor-rq-matrix tbody tr:nth-child(odd) {
  background: var(--hanlan-color-bg-row-alt);
}

.cor-rq-matrix-row-head {
  font-family: var(--hanlan-font-family-base);
  font-size: 11px;
  color: var(--hanlan-color-text);
  font-weight: 500;
  padding: var(--cor-v11-cell-padding);
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--hanlan-color-bg-input);
  border-right: var(--hanlan-divider);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* v1.1 polish — guarantee at least ~8 chars of comp name are readable.
     Without this the sticky column collapses to 1-3 chars at 280px panel,
     showing 'TS' / 'ero' / 'roductShot'. */
  min-width: 88px;
  max-width: 200px;
  z-index: 1;
}

.cor-rq-matrix-cell {
  padding: var(--cor-v11-cell-padding);
  color: var(--hanlan-color-text-muted);
  border-bottom: var(--hanlan-divider);
  vertical-align: middle;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cor-rq-matrix-cell--empty {
  color: var(--hanlan-color-text-dim, var(--hanlan-color-text-muted));
  text-align: center;
  font-style: italic;
}

.cor-rq-matrix-filename {
  margin-left: var(--cor-v11-gap);
  display: inline-block;
  vertical-align: middle;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v1.1 audit slice 2 — clickable cells/rows for blocking errors that ship a
   fix-hint. Hover gives a subtle "you can act on this" affordance.  */
.cor-rq-matrix-cell--fixable,
.cor-rq-preview-output--fixable {
  cursor: pointer;
  position: relative;
}
.cor-rq-matrix-cell--fixable:hover {
  background: rgba(248, 113, 113, 0.06);
}
.cor-rq-preview-output--fixable:hover {
  background: rgba(248, 113, 113, 0.06);
}
/* v1.1 polish — inline preview for 1×1 (1 comp × 1 output). Replaces the
   full preview block with a single "Will create: filename" line so the
   modal doesn't waste vertical space on a 1-cell matrix or 1-row list. */
.cor-rq-inline-preview {
  background: var(--hanlan-color-bg-input);
  border-radius: var(--hanlan-radius);
  padding: var(--cor-v11-section-gap) var(--hanlan-space-md);
  font-size: 12px;
  color: var(--hanlan-color-text);
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-gap);
}
.cor-rq-inline-preview .cor-flow-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--cor-v11-gap);
  vertical-align: middle;
}
.cor-rq-inline-preview code {
  font-family: var(--hanlan-font-family-mono);
  font-size: 11.5px;
  background: var(--hanlan-color-bg-code);
  padding: 1px 6px;
  border-radius: var(--hanlan-radius-sm);
  color: var(--hanlan-plugin-accent);
}
.cor-rq-inline-error {
  font-size: 11px;
  color: var(--hanlan-color-feedback-error, #e35a5a);
  padding-left: 14px;
}

/* v1.1 §3.7 — Compact matrix cell mode: hides filenames so the grid fits
   narrow CEP docks. Status dot + tooltip still convey state. Triggered via
   the Full/Compact toggle in the matrix preview header. */
.cor-rq-matrix-wrap--compact .cor-rq-matrix-cell {
  max-width: 56px;
  text-align: center;
  padding: var(--cor-v11-gap) var(--hanlan-space-xxs);
}
.cor-rq-matrix-wrap--compact .cor-rq-matrix-filename {
  display: none;
}

/* v1.1 polish — auto-compact at narrow panel widths even if user hasn't
   toggled compact mode. Status dot stays, filename hides, tooltip carries
   the value. Matches the qa-notes promise: "Compact mode auto-activates
   below 400px panel width (override-able)." User's explicit Full toggle
   still wins via specificity when manually set. */
@media (max-width: 400px) {
  .cor-rq-matrix-wrap:not(.cor-rq-matrix-wrap--full-explicit) .cor-rq-matrix-cell {
    max-width: 56px;
    text-align: center;
    padding: var(--cor-v11-gap) var(--hanlan-space-xxs);
  }
  .cor-rq-matrix-wrap:not(.cor-rq-matrix-wrap--full-explicit) .cor-rq-matrix-filename {
    display: none;
  }
  .cor-rq-matrix-wrap:not(.cor-rq-matrix-wrap--full-explicit) .cor-rq-matrix thead th {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.cor-rq-matrix-wrap--compact .cor-rq-matrix thead th {
  max-width: 72px;
  font-size: 9.5px;
}

/* v1.1 §3.7 — modal viewport bounds: keep modals usable on narrow docks
   without overflowing the panel. Sticky footer if any. */
.hanlan-modal {
  max-height: 90vh;
  max-width: calc(100vw - 16px);
}

/* v1.1 §3.6 — Default pattern chip palette collapse/expand */
.cor-rq-defaults-field-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cor-v11-gap);
  min-height: 20px;
}
.cor-rq-defaults-field-head .label {
  line-height: 1.2;
  margin: 0;
}
.cor-rq-default-pattern-toggle {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-control-border);
  color: var(--hanlan-color-text-muted);
  font-size: var(--hanlan-font-size-base);
  font-weight: 500;
  cursor: pointer;
  min-height: var(--cor-v11-field-height);
  padding: 0 var(--cor-v11-action-padding-x);
  border-radius: var(--hanlan-radius-sm);
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  font-family: var(--hanlan-font-family-base);
}

.cor-rq-default-pattern-toggle .cor-inline-chevron {
  display: none;
}

.cor-rq-default-pattern-toggle svg {
  display: none;
  flex-shrink: 0;
}
.cor-rq-default-pattern-toggle:hover {
  color: var(--hanlan-color-text);
  background: var(--hanlan-color-bg-hover);
  border-color: var(--hanlan-color-border-strong, var(--hanlan-control-border));
}
/* v1.1 redesign — the Smart Naming chip builder breaks out full-width (span all
   columns) when expanded, matching the Settings → Naming layout instead of being
   pinned to the narrow control column. Expand/collapse animates smoothly. */
.cor-rq-default-row--filename #render-queue-default-pattern-container,
.cor-rq-default-row--filename .cor-rq-pattern-validation {
  grid-column: 1 / -1;
}
#render-queue-default-pattern-container {
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  margin-top: var(--cor-v11-section-gap);
  transition: max-height var(--hanlan-duration-normal, 280ms) var(--hanlan-ease-out, ease),
              opacity var(--hanlan-duration-fast, 160ms) var(--hanlan-ease-out, ease),
              margin-top var(--hanlan-duration-normal, 280ms) var(--hanlan-ease-out, ease);
}
#render-queue-default-pattern-container.cor-rq-default-pattern-collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #render-queue-default-pattern-container { transition: none; }
}

.cor-rq-default-row--filename .cor-rq-pattern-validation:empty {
  display: none;
  min-height: 0;
  margin: 0;
}

.cor-rq-default-row--project {
  grid-column: 2;
  display: flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 400px) {
  .cor-rq-defaults {
    grid-template-columns: 1fr;
    row-gap: var(--cor-v11-gap);
    padding-left: 0;
    padding-right: 0;
  }

  .cor-rq-default-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cor-v11-gap);
    min-width: 0;
  }

  .cor-rq-default-row .label,
  .cor-rq-default-control,
  .cor-rq-default-pattern-toggle,
  .cor-rq-default-row--filename #render-queue-default-pattern-container,
  .cor-rq-default-row--filename .cor-rq-pattern-validation {
    grid-column: 1;
  }

	  .cor-rq-default-pattern-toggle {
	    min-height: 28px;
	  }

  .cor-rq-default-row--project {
    grid-column: 1;
  }
	}

/* v1.1 §3.5 — Inline pattern validation hint below the default-filename editor */
.cor-rq-pattern-validation {
  font-size: 11px;
  line-height: 1.45;
  margin-top: var(--cor-v11-gap);
  min-height: 16px;
}
.cor-rq-pattern-validation-ok {
  color: var(--hanlan-color-text-muted);
}
.cor-rq-pattern-validation-ok code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--hanlan-plugin-accent);
  background: var(--hanlan-color-bg-input);
  padding: 1px 5px;
  border-radius: var(--hanlan-radius-sm);
}
.cor-rq-pattern-validation-ok code em {
  color: var(--hanlan-color-text-muted);
  font-style: italic;
}
.cor-rq-pattern-validation-error { color: #f87171; }
.cor-rq-pattern-validation-warn  { color: #f5a623; }

/* v1.1 §3.3 — Queue status summary card */
.cor-rq-status-card {
  padding: var(--cor-v11-section-gap) var(--hanlan-space-md);
  border-radius: var(--hanlan-radius);
  margin-bottom: var(--cor-v11-section-gap);
  border: 1px solid var(--hanlan-color-border);
  font-size: 13px;
}
.cor-rq-status-card--ok {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.35);
}
.cor-rq-status-card--warn {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.35);
}
/* F1 / DESIGN.md — a control that sits ON a colour-tinted surface inherits a
   subtle tint of that surface (tinted GHOST, never a solid CTA), and lightens on
   hover the standard way (stronger fill + border + brightness 1.1, mirroring
   .hanlan-btn--destructive). Three status tints — good (green) / warn (amber) /
   error (red) — plus reusable `.hanlan-tinted-ghost--*` utilities so any surface
   (and other plugins inheriting this stylesheet's rules) gets the same behaviour.
   See DESIGN.md "Controls on a colour-tinted surface inherit a subtle tint…". */
.cor-rq-status-card--ok #cor-rq-status-dismiss,
.hanlan-tinted-ghost--good {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.5);
  color: var(--hanlan-color-text);
}
.cor-rq-status-card--ok #cor-rq-status-dismiss:hover,
.hanlan-tinted-ghost--good:hover {
  background: rgba(74, 222, 128, 0.22);
  border-color: rgba(74, 222, 128, 0.7);
  filter: brightness(1.1);
}
.cor-rq-status-card--warn #cor-rq-status-dismiss,
.hanlan-tinted-ghost--warn {
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.5);
  color: var(--hanlan-color-text);
}
.cor-rq-status-card--warn #cor-rq-status-dismiss:hover,
.hanlan-tinted-ghost--warn:hover {
  background: rgba(245, 166, 35, 0.22);
  border-color: rgba(245, 166, 35, 0.7);
  filter: brightness(1.1);
}
/* error / red — no COR surface uses it yet; defined now for error banners +
   cross-plugin reuse so the rule exists with identical behaviour. */
.hanlan-tinted-ghost--error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--hanlan-color-text);
}
.hanlan-tinted-ghost--error:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.7);
  filter: brightness(1.1);
}
.cor-rq-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cor-v11-gap);
}
.cor-rq-status-head strong { color: var(--hanlan-color-text); }
.cor-rq-status-body { color: var(--hanlan-color-text); line-height: 1.55; }
.cor-rq-status-fail {
  color: var(--hanlan-plugin-accent);
  font-size: 12px;
  margin-top: var(--cor-v11-gap);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* v1.1 §3.4 — AE Render Queue manager modal */
.cor-aeq-root {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-section-gap);
  width: 100%;
  min-width: 0;
  max-width: 560px;
  box-sizing: border-box;
}
.cor-aeq-loading {
  padding: var(--hanlan-space-lg);
  text-align: center;
  color: var(--hanlan-color-text-muted);
  font-size: 13px;
}
.cor-aeq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cor-v11-gap);
  padding: 18px var(--hanlan-space-sm) 20px;
  color: var(--hanlan-color-text);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.cor-aeq-empty p {
  margin: 0;
}
.cor-aeq-empty .hint {
  max-width: 390px;
  color: var(--hanlan-color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.cor-aeq-list {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-gap);
  max-height: 360px;
  overflow-y: auto;
}
.cor-aeq-row {
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  padding: var(--cor-v11-section-gap);
  display: flex;
  gap: var(--cor-v11-gap);
  align-items: center;
  /* Left-align (the modal root centers its empty-state text, which leaked into rows). */
  text-align: left;
}
.cor-aeq-row-head { flex: 1; min-width: 0; }
.cor-aeq-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--hanlan-color-text);
  font-weight: 500;
}
.cor-aeq-row-meta {
  font-size: 10.5px;
  color: var(--hanlan-color-text-muted);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cor-aeq-row-actions { display: inline-flex; gap: var(--cor-v11-gap); }
.cor-aeq-spacer {
  flex: 1;
  min-width: var(--hanlan-space-xs);
}
.cor-aeq-footer {
  display: flex;
  gap: var(--cor-v11-gap);
}
.cor-aeq-lifted-footer.hanlan-modal-footer {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.cor-aeq-count {
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
}

/* v1.1 §3.2 — Bundle management modal */
.cor-bm-root {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-section-gap);
  width: 100%;
  min-width: 0;
  max-width: 540px;
  box-sizing: border-box;
}
.cor-bm-empty {
  padding: 18px var(--hanlan-space-sm) 20px;
  color: var(--hanlan-color-text-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.cor-bm-empty em { font-style: italic; color: var(--hanlan-color-text); }
.cor-bm-empty strong { color: var(--hanlan-plugin-accent); font-weight: 600; }
.cor-bm-list {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-gap);
  max-height: 340px;
  overflow-y: auto;
}
.cor-bm-row {
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  padding: var(--cor-v11-gap)
    calc(var(--cor-v11-section-gap) + 26px + var(--cor-v11-gap))
    var(--cor-v11-gap)
    var(--cor-v11-section-gap);
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-gap);
  position: relative;
  /* Rows are left-aligned (the modal root centers its empty-state text, which
     was leaking into the populated rows' metadata). */
  text-align: left;
}
.cor-bm-row-head {
  display: flex;
  gap: var(--cor-v11-gap);
  align-items: center;
  min-height: 26px;
}

.cor-bm-row-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
}

.cor-bm-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hanlan-color-text);
  font-size: 12px;
  font-weight: 500;
}

.cor-bm-scope-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--cor-v11-gap);
  border-radius: 999px;
  border: 1px solid var(--hanlan-color-border);
  background: rgba(255, 255, 255, 0.025);
  color: var(--hanlan-color-text-muted);
  font-size: 10px;
  line-height: 1;
}

.cor-bm-scope-pill--project {
  color: var(--hanlan-plugin-accent);
  border-color: rgba(245, 166, 35, 0.34);
  background: rgba(245, 166, 35, 0.08);
}

.hanlan-btn-icon.cor-bm-more {
  --hanlan-icon-button-size: 26px;
  width: var(--hanlan-icon-button-size);
  height: var(--hanlan-icon-button-size);
  min-width: var(--hanlan-icon-button-size);
  min-height: var(--hanlan-icon-button-size);
  max-width: var(--hanlan-icon-button-size);
  max-height: var(--hanlan-icon-button-size);
  flex: 0 0 var(--hanlan-icon-button-size);
  padding: 0;
  border-radius: var(--hanlan-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--hanlan-color-text-muted);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: var(--cor-v11-section-gap);
  top: 50%;
  transform: translateY(-50%);
}

.hanlan-btn-icon.cor-bm-more:hover,
.hanlan-btn-icon.cor-bm-more:focus-visible,
.hanlan-btn-icon.cor-bm-more[aria-expanded="true"] {
  color: var(--hanlan-color-text);
  background: var(--hanlan-color-bg-hover);
  border-color: var(--hanlan-color-border);
}

.cor-bm-row-meta {
  font-size: 10.5px;
  color: var(--hanlan-color-text-muted);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cor-bm-row-meta em { color: var(--hanlan-plugin-accent); font-style: italic; }
.cor-bm-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cor-v11-gap);
}
.cor-bm-lifted-footer.hanlan-modal-footer {
  justify-content: space-between;
  flex-wrap: nowrap;
}
.cor-bm-count {
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
}

.cor-rq-fix-hint-affordance {
  display: inline-block;
  margin-left: var(--cor-v11-gap);
  padding: 0 var(--cor-v11-gap);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hanlan-plugin-accent);
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.4);
  border-radius: var(--hanlan-radius-sm);
  vertical-align: middle;
}

.hanlan-btn--sm {
  height: 22px;
  font-size: 11px;
  padding: 0 8px;
}

/* Bundle bar — optional tools row, visually below the primary queue setup */
.cor-rq-bundle-bar {
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  min-height: 22px;
  padding: 0 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  opacity: 0.82;
}

.cor-rq-bundle-label {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hanlan-color-text-muted);
  font-weight: 500;
}

.cor-rq-bundle-applied {
  display: inline-flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  color: var(--hanlan-plugin-accent);
  font-size: 12px;
  font-weight: 500;
}

/* C7 — "· edited" marker shown when outputs diverge from the applied bundle.
   Muted + lighter than the accent name so it reads as a status note, not a claim. */
.cor-rq-bundle-edited {
  color: var(--hanlan-color-text-secondary);
  font-weight: 400;
  font-style: italic;
  opacity: 0.85;
}

.cor-rq-bundle-spacer {
  flex: 1;
  min-width: var(--hanlan-space-xs);
}

.cor-rq-bundle-apply {
  flex: 1;
  justify-content: space-between;
  text-align: left;
}

.cor-rq-bundle-apply-label {
  color: var(--hanlan-color-text-muted);
  line-height: 1.2;
}

.cor-rq-save-bundle-form {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-section-gap);
  min-width: 320px;
  max-width: 420px;
}

.cor-rq-save-bundle-form .label {
  margin: 0;
}

.cor-rq-save-bundle-form .hanlan-input {
  margin-bottom: 0;
}

.cor-rq-save-scope-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--cor-v11-gap);
  align-items: center;
}

.cor-rq-save-scope {
  display: inline-flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  min-width: 0;
}

.cor-rq-save-scope-btn--active.hanlan-btn {
  color: var(--hanlan-color-text);
  background: var(--hanlan-color-bg-hover);
  border-color: var(--hanlan-color-border-strong, var(--hanlan-control-border));
}

.cor-rq-save-note {
  color: var(--hanlan-color-text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.cor-rq-save-error {
  min-height: 14px;
  color: var(--hanlan-color-error);
  font-size: 11px;
  line-height: 1.3;
}

/* Per-project toggle in the modal footer */
.cor-rq-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cor-v11-section-gap);
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  /* v1.1 polish — pin the Cancel/Add footer to the bottom of the modal's
     scroll area so the primary action stays visible when the outputs list
     or matrix is tall. Scoped to the render-queue footer only; does not
     touch the shared modal-body sizing (the preset-modal-gap fragile bit). */
  position: sticky;
  bottom: calc(-1 * var(--hanlan-modal-padding));
  margin-left: 0;
  margin-right: 0;
  margin-bottom: calc(-1 * var(--hanlan-modal-padding));
  padding: var(--cor-v11-section-gap) 0 var(--hanlan-modal-padding);
  /* Fully opaque + above the matrix's sticky cells (z-index 2), so scrolling
     matrix content can never show through the footer or its buttons. */
  background: var(--hanlan-modal-shelf-bg, var(--hanlan-color-bg-elevated));
  z-index: 8;
  box-shadow:
    0 -10px 18px -12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

.cor-rq-lifted-footer.hanlan-modal-footer {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.cor-rq-lifted-footer .cor-rq-footer-right {
  flex-shrink: 0;
}

.cor-rq-footer-left {
  flex: 0 1 auto;
  min-width: 0;
}

.cor-rq-footer-right {
  display: flex;
  gap: var(--cor-v11-gap);
}

/* When the matrix/list preview hasn't been rendered into it, #render-queue-preview
   is an empty 0-height div that still occupies a flex slot in .cor-list-flow —
   eating two 12px column gaps (before + after itself) and stranding the footer
   ~12px lower than every other modal's footer. Collapse it when empty so the
   footer sits at the shared gap+margin distance; it re-shows the moment the
   preview is populated. Keeps all modal footers visually identical. */
#render-queue-preview:empty {
  display: none;
}

.cor-rq-pp-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  cursor: pointer;
  user-select: none;
  min-height: 22px;
}

.cor-rq-pp-toggle input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 4px;
}

.cor-rq-pp-toggle--active {
  color: var(--hanlan-plugin-accent);
}

/* Manage bundles modal */
.cor-rq-bundle-manage-list {
  display: flex;
  flex-direction: column;
  gap: var(--cor-v11-gap);
  max-height: 320px;
  overflow-y: auto;
}

.cor-rq-bundle-manage-row {
  display: flex;
  align-items: center;
  gap: var(--cor-v11-gap);
  padding: var(--cor-v11-section-gap) var(--hanlan-space-md);
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
}

.cor-rq-bundle-manage-info {
  flex: 1;
  min-width: 0;
}

.cor-rq-bundle-manage-name {
  font-size: 12px;
  color: var(--hanlan-color-text);
  font-weight: 500;
}

.cor-rq-bundle-manage-meta {
  font-size: 10px;
  color: var(--hanlan-color-text-muted);
  margin-top: 2px;
}

/* v1.0.3 — computed-token starter chips + hint shown beneath the
   chip palette in surfaces that opt in via options.showComputedTokenHint. */
.hanlan-token-list--computed {
  margin-top: calc(var(--hanlan-smart-naming-token-gap) / 2);
  margin-bottom: var(--hanlan-smart-naming-token-gap);
  gap: var(--hanlan-smart-naming-token-gap);
}
.hanlan-token--computed {
  font-family: 'SF Mono', Menlo, Consolas, monospace !important;
  font-size: 10.5px !important;
  background: var(--hanlan-color-bg-input) !important;
  border-color: var(--hanlan-color-border) !important;
  border-style: solid !important;
  color: var(--hanlan-color-text-muted) !important;
  letter-spacing: 0;
}
.hanlan-token--computed:hover {
  background: var(--hanlan-token-featured-bg) !important;
  border-color: var(--hanlan-token-featured-border) !important;
  color: var(--hanlan-color-text) !important;
}
.hanlan-naming-computed-hint {
  margin-top: var(--hanlan-space-xs);
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  line-height: 1.55;
  font-style: italic;
}
.hanlan-naming-computed-hint code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-style: normal;
  background: var(--hanlan-token-featured-bg);
  border: 1px solid var(--hanlan-token-featured-border);
  color: var(--hanlan-plugin-accent);
  padding: 1px 5px;
  border-radius: var(--hanlan-radius-sm);
  margin: 0 2px;
}

/* ========================================================================
   First-run onboarding tour (v1.0.2)
   Full-panel backdrop, animated card, accent highlight ring around the
   step target. Single overlay element appended to <body>.
   ======================================================================== */

.cor-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: auto;
  animation: cor-onb-fade-in 200ms ease-out;
}

.cor-onboarding-overlay.cor-onboarding-exiting {
  animation: cor-onb-fade-out 200ms ease-in forwards;
}

@keyframes cor-onb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cor-onb-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.cor-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.cor-onboarding-highlight {
  position: absolute;
  border: 2px solid var(--hanlan-plugin-accent);
  border-radius: var(--hanlan-radius);
  box-shadow:
    0 0 0 2px rgba(245, 166, 35, 0.25),
    0 0 24px 4px rgba(245, 166, 35, 0.35);
  pointer-events: none;
  transition: all 200ms ease-out;
}

/* Match .hanlan-modal visual language (glass bg + blur + standard border /
   shadow) so the tour card reads as a sibling of every other modal in the
   plugin, not a separate component. Keeps its absolute positioning + width
   since it anchors to a target rather than centering. */
.cor-onboarding-card {
  position: absolute;
  background: var(--hanlan-glass-bg);
  backdrop-filter: blur(var(--hanlan-glass-blur));
  -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
  border: 1px solid var(--hanlan-control-border);
  border-radius: var(--hanlan-radius);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: var(--hanlan-space-md) var(--hanlan-space-lg);
  width: 320px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-sm);
}

/* Subtle gray fill at rest (matches the modal close-X pattern) so the
   Skip control reads as a button, not floating text. Brighter on hover. */
.cor-onboarding-skip {
  position: absolute;
  top: 8px;
  right: 10px;
  background: var(--hanlan-color-bg-input);
  border: none;
  color: var(--hanlan-color-text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--hanlan-radius-sm);
}

.cor-onboarding-skip:hover {
  color: var(--hanlan-color-text);
  background: var(--hanlan-color-bg-hover);
}

.cor-onboarding-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hanlan-color-text);
  margin: 0;
  padding-right: 40px;
  /* leave room for the skip button */
}

.cor-onboarding-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hanlan-color-text-muted);
  margin: 0;
}

.cor-onboarding-controls {
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-xs);
  margin-top: var(--hanlan-space-xs);
}

.cor-onboarding-pips {
  display: inline-flex;
  gap: 4px;
}

.cor-onb-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hanlan-color-border-strong);
  display: inline-block;
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.cor-onb-pip--active {
  background: var(--hanlan-plugin-accent);
  transform: scale(1.15);
}

#naming-pattern-container .hanlan-btn-icon[title="Add custom token"]:hover,
#modal-naming-pattern-container .hanlan-btn-icon[title="Add custom token"]:hover,
#bulk-rename-naming-container .hanlan-btn-icon[title="Add custom token"]:hover {
  background: var(--hanlan-color-bg-hover);
  color: var(--hanlan-color-text);
  border-color: var(--hanlan-color-border-strong);
}

.hanlan-smart-list-item--selected,
.hanlan-smart-list-item--selected:hover {
  --hanlan-selection-border-color: var(--hanlan-color-border);
  --hanlan-selection-box-shadow: none;
  --hanlan-selection-border-bottom: 2px solid var(--hanlan-plugin-accent);
}

.search-highlight {
  color: var(--hanlan-plugin-accent);
  font-weight: 600;
  background: rgba(245, 124, 0, 0.15);
  border-radius: 2px;
  padding: 0 2px;
}

.settings-section {
  margin-bottom: var(--hanlan-space-lg);
}

.settings-section + .settings-section {
  margin-top: var(--hanlan-space-lg);
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section > .hanlan_heading {
  margin-bottom: var(--hanlan-space-md);
  display: block;
}

.disabled-section {
  opacity: 0.4;
  pointer-events: none;
}

.multi-value-placeholder {
  font-style: italic;
  color: var(--hanlan-color-text-muted);
}

.hanlan-input.multi-value::placeholder {
  font-style: italic;
  color: var(--hanlan-color-text-muted);
}

.hanlan-color-trigger.multi-value .hanlan-color-label {
  font-style: italic;
  color: var(--hanlan-color-text-muted);
}

.hanlan-scrub-label--multi-value .hanlan-scrub-label__value {
  font-style: italic;
  color: var(--hanlan-color-text-muted);
  font-size: var(--hanlan-font-size-sm, 10px);
}

.hanlan-scrub-label--multi-value .hanlan-scrub-label__chevron {
  visibility: hidden;
}

.modal-advanced-toggle {
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-xs);
  cursor: pointer;
  padding: var(--hanlan-space-xs) 0;
  user-select: none;
  opacity: 0.7;
  transition: opacity var(--hanlan-transition-fast);
}

.modal-advanced-toggle:hover {
  opacity: 1;
}

.modal-advanced-chevron {
  transition: transform var(--hanlan-transition-normal);
  flex-shrink: 0;
}

.modal-advanced-toggle.open .modal-advanced-chevron {
  transform: rotate(90deg);
}

.modal-advanced-content {
  padding-top: var(--hanlan-space-sm);
}

/* Export Project Report uses the canonical .hanlan-modal-tabs / .hanlan-modal-tab
   classes for its format picker — same look as Settings → General/Naming.
   Only the bottom-margin spacing is specific to this modal. */
.export-format-bar {
  margin-bottom: var(--hanlan-space-md);
}

.export-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hanlan-space-sm) var(--hanlan-space-md);
}

.export-field-option {
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-xs);
  font-size: 12px;
  cursor: pointer;
  color: var(--hanlan-color-text);
}

.export-field-option input[disabled] + span {
  opacity: 0.5;
}

.export-document-preview {
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius);
  max-height: 180px;
  overflow-y: auto;
  padding: var(--hanlan-space-sm) var(--hanlan-space-md);
}

.export-document-preview pre {
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--hanlan-color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.export-pdf-note {
  display: block;
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  font-style: italic;
  margin-top: var(--hanlan-space-xs);
}

.modal-settings {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.modal-top-action {
  margin-bottom: var(--hanlan-space-md);
}

.modal-form-section {
  margin-bottom: var(--hanlan-space-md);
}

.modal-form-section:last-child,
.modal-form-section:last-of-type {
  margin-bottom: 0;
}

.validation-errors:not(.hidden) {
  margin-top: var(--hanlan-space-md);
}

.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hanlan-space-md);
}

.modal-form-row > input[type="hidden"] {
  display: none;
}

/* Aspect ratio lock button between width/height */
.modal-aspect-lock {
  width: var(--hanlan-control-height, 26px);
  height: var(--hanlan-control-height, 26px);
  min-width: var(--hanlan-control-height, 26px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hanlan-color-bg-input);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius-sm, 4px);
  color: var(--hanlan-color-text-muted);
  cursor: pointer;
  transition: all 200ms var(--hanlan-ease-in-out, ease);
  flex-shrink: 0;
}

/* Dimensions row: [W field — flex 1] [lock — auto] [H field — flex 1]
   Each field stacks its label above its input; lock aligns with the inputs (bottom). */
.modal-dimensions-row {
  display: flex !important;
  align-items: flex-end;
  gap: var(--hanlan-space-sm);
}

.modal-dimensions-row .modal-dim-field {
  flex: 1;
  min-width: 0;
}

.modal-dimensions-row .modal-dim-field .hanlan-scrub-label,
.modal-dimensions-row .modal-dim-field input,
.modal-dimensions-row .modal-dim-field .hanlan-input {
  width: 100%;
  min-width: 0;
}

/* Multi-value plain inputs in dimensions row: tighten padding so they render at
   the same 26px control-height as the lock button and the single-select scrub
   steppers. Without this, the native input bloats to ~32px and the lock looks
   shorter than its W/H siblings. */
.modal-dimensions-row .modal-dim-field input.multi-value,
.modal-dimensions-row .modal-dim-field .hanlan-input.multi-value {
  height: var(--hanlan-control-height);
  min-height: var(--hanlan-control-height);
  padding: 0 var(--hanlan-space-sm);
}

/* Timeline row: [Frame Rate — flex 1] [Duration — flex 1] full-width */
.modal-form-section .modal-form-row:not(.modal-dimensions-row) {
  display: flex !important;
  gap: var(--hanlan-space-sm);
}

.modal-form-section .modal-form-row:not(.modal-dimensions-row) > .modal-form-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.modal-form-section .modal-form-row:not(.modal-dimensions-row) > .modal-form-field > input,
.modal-form-section .modal-form-row:not(.modal-dimensions-row) > .modal-form-field > .hanlan-input,
.modal-form-section .modal-form-row:not(.modal-dimensions-row) > .modal-form-field > .hanlan-scrub-label,
.modal-form-section .modal-form-row:not(.modal-dimensions-row) > .modal-form-field > .hanlan-dropdown-trigger,
.modal-form-section .modal-form-row:not(.modal-dimensions-row) > .modal-form-field > .hanlan-dropdown {
  width: 100%;
}

/* HanlanCore wraps scrub-upgraded inputs in an unnamed flex div. That wrapper
   fills the field, but the .hanlan-scrub-label inside it is flex:0 1 auto and
   shrinks to content. Force it full-width so Duration matches Frame Rate. */
.modal-form-section .modal-form-row:not(.modal-dimensions-row) > .modal-form-field > div > .hanlan-scrub-label {
  width: 100%;
  flex: 1;
  min-width: 0;
}

/* Dimension field — compound selector to beat .modal-form-field's column rule.
   Both classes coexist on the same element (e.g. "modal-form-field modal-dim-field").
   Specificity 0-2-0 > standalone .modal-form-field 0-1-0. */
.modal-form-field.modal-dim-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

/* Label centered above the input */
.modal-form-field.modal-dim-field > .label {
  margin: 0;
  white-space: nowrap;
  opacity: 0.6;
  text-align: center;
  width: 100%;
  line-height: 1;
}

/* HanlanCore wraps the <input type="number"> in an inline-styled div when upgrading
   to a scrub label. Target that wrapper (any child div that isn't the label) and
   force it to flex: 1 so the scrub fills the remaining horizontal space. */
.modal-form-field.modal-dim-field > div:not(.label) {
  flex: 1;
  min-width: 0;
  display: flex !important;
  align-items: center;
  height: var(--hanlan-control-height);
}

/* Scrub label inside the wrapper must also fill the wrapper */
.modal-form-field.modal-dim-field .hanlan-scrub-label {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: var(--hanlan-control-height);
}

/* Bare inputs (multi-value / data-hanlan-native) — match scrub label height and appearance */
.modal-form-field.modal-dim-field > input,
.modal-form-field.modal-dim-field > .hanlan-input {
  flex: 1;
  min-width: 0;
  height: var(--hanlan-control-height);
  box-sizing: border-box;
  appearance: textfield;
  -webkit-appearance: textfield;
}

/* Global: truncate any input placeholder that exceeds the field width */
input.hanlan-input,
input[type="text"],
input[type="number"] {
  text-overflow: ellipsis;
}

input.hanlan-input::placeholder,
input[type="text"]::placeholder {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Background row: swatch + hex input + alpha toggle, all on uniform control-height baseline */
.modal-bg-row {
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-sm);
  height: var(--hanlan-control-height);
}

.modal-bg-row > .hanlan-color-trigger {
  flex-shrink: 0;
  height: var(--hanlan-control-height);
  width: var(--hanlan-control-height);
  align-self: center;
}

/* Hex input inside the modal bg row — override the modal body's default margin-bottom
   which adds 10px below every input and breaks flex row vertical alignment */
.modal-bg-row .modal-bg-hex {
  flex: 1;
  min-width: 0;
  height: var(--hanlan-control-height);
  margin: 0 !important;
  font-family: var(--hanlan-font-family-mono, 'SF Mono', monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Reset the modal body's default margin-bottom for ALL inputs inside flex rows
   (dimensions, timeline, background) — the margin breaks vertical alignment */
.modal-bg-row .hanlan-input,
.modal-dimensions-row .hanlan-input,
.modal-form-row .hanlan-input {
  margin-bottom: 0 !important;
}

.modal-bg-alpha {
  margin: 0 !important;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-xs);
  flex-shrink: 0;
  height: var(--hanlan-control-height);
  align-self: center;
  line-height: 1;
}

.modal-bg-alpha > input[type="checkbox"] {
  margin: 0;
}

.modal-aspect-lock:hover {
  border-color: var(--hanlan-color-border-hover, var(--hanlan-color-border));
  color: var(--hanlan-color-text);
}

.modal-aspect-lock[data-locked="true"] {
  background: var(--hanlan-plugin-gradient, linear-gradient(135deg, var(--hanlan-color-accent), #8b5cf6));
  border-color: transparent;
  color: #ffffff;
}

.modal-aspect-lock[data-locked="true"]:hover {
  filter: brightness(1.1);
}

/* Legacy :has() rule removed — CEP Chromium doesn't support :has()
   Replaced by .modal-dimensions-row class above */

.modal-form-row > .hanlan-color-trigger,
.modal-form-row > .hanlan-dropdown {
  justify-self: start;
}

.modal-form-row--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--hanlan-space-sm);
}

.modal-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-xxs);
}

/* Modal field labels: zero own margin so the parent's `gap` is the single source of
   vertical spacing between label and input (4px total, halved from the prior ~12px).
   Applies inside both `.modal-form-field` and `.modal-grid-item` containers. */
.modal-form-field > .label,
.modal-grid-item > .label {
  margin-bottom: 0;
}

.modal-form-field .hanlan-input,
.modal-form-field input[type="text"],
.modal-form-field input[type="number"] {
  margin-bottom: 0;
}

/* Hide native browser spin buttons on number inputs flagged as "native"
   (custom fps, custom pixel aspect). The native chrome look doesn't match
   the rest of the panel; values are sanitised on blur instead. */
input[type="number"][data-hanlan-native]::-webkit-inner-spin-button,
input[type="number"][data-hanlan-native]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"][data-hanlan-native] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.modal-form-section > .hanlan_heading {
  margin-bottom: var(--hanlan-space-xs);
  display: block;
}

.modal-form-row--header .hanlan_heading {
  margin-bottom: 0;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--hanlan-space-md);
}

.modal-grid-item {
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-xxs);
}

.modal-dropdown {
  width: 100%;
}

.modal-dropdown .hanlan-dropdown-trigger {
  width: 100%;
}

.modal-dropdown.error .hanlan-dropdown-trigger {
  border-color: var(--hanlan-color-error);
  box-shadow: 0 0 0 1px var(--hanlan-color-error);
}

button.hanlan-color-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  min-width: auto;
  min-height: auto;
  height: auto;
}

.modal-form-section > .hanlan-color-trigger,
.modal-form-section > input[type="hidden"] + .hanlan-color-trigger {
  align-self: flex-start;
}

.hanlan-color-trigger:focus {
  outline: none;
}

.hanlan-color-trigger:focus .hanlan-color-swatch {
  box-shadow: 0 0 0 2px var(--hanlan-plugin-accent);
}

.hanlan-color-swatch {
  width: var(--hanlan-control-height);
  height: var(--hanlan-control-height);
  border-radius: var(--hanlan-radius);
  border: 2px solid var(--hanlan-color-border-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform var(--hanlan-transition-base), box-shadow var(--hanlan-transition-base);
}

.hanlan-color-trigger:hover .hanlan-color-swatch {
  transform: scale(1.08);
  border-color: var(--hanlan-plugin-accent);
}

.hanlan-color-label {
  font-family: var(--hanlan-font-family-mono, monospace);
  font-size: var(--hanlan-font-size-base);
  color: var(--hanlan-color-text);
}

.validation-errors {
  background: rgba(255, 69, 58, 0.15);
  border: 1px solid var(--hanlan-color-error);
  border-radius: var(--hanlan-radius);
  padding: var(--hanlan-space-sm);
  color: var(--hanlan-color-error);
  font-size: var(--hanlan-font-size-base);
}

.validation-error-item {
  margin-bottom: var(--hanlan-space-xs);
  display: flex;
  align-items: flex-start;
  gap: var(--hanlan-space-xs);
}

.validation-error-item:last-child {
  margin-bottom: 0;
}

.validation-error-item::before {
  content: '•';
  color: var(--hanlan-color-error);
  font-weight: bold;
}

.validation-hint {
  font-size: var(--hanlan-font-size-sm);
  color: var(--hanlan-color-error);
  margin-top: var(--hanlan-space-xs);
  padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
  background: rgba(255, 69, 58, 0.1);
  border-radius: var(--hanlan-radius-sm);
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-xs);
}

.validation-hint.hidden {
  display: none;
}

.validation-hint::before {
  content: '⚠';
  font-size: var(--hanlan-font-size-base);
}

.hanlan-input.error {
  border-color: var(--hanlan-color-error);
  background: rgba(255, 69, 58, 0.1);
}

.hanlan-input:focus.error {
  border-color: var(--hanlan-color-error);
  box-shadow: 0 0 0 1px var(--hanlan-color-error);
}

.hanlan-modal:has(.modal-settings) {
  max-width: 520px;
  max-height: 90vh;
}

.hanlan-modal-body:has(.modal-settings) {
  max-height: calc(90vh - 140px);
  overflow-x: hidden;
  padding: 0;
}

.modal-settings {
  padding: var(--hanlan-modal-padding);
}

.hanlan-panel .form-group {
  margin-bottom: var(--hanlan-space-md);
}

.hanlan-panel .form-group:last-child {
  margin-bottom: 0;
}

.hanlan-modal-body .form-group {
  margin-bottom: var(--hanlan-space-xl);
}

.hanlan-modal-body .form-group:last-child {
  margin-bottom: 0;
}

.form-row {
  display: flex;
  gap: var(--hanlan-space-sm);
  align-items: flex-end;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.required-indicator {
  color: var(--hanlan-color-error);
  font-weight: bold;
  margin-left: 2px;
}

.hanlan-switch-label {
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-sm);
  cursor: pointer;
  margin-bottom: var(--hanlan-space-sm);
  font-size: var(--hanlan-font-size-base);
  color: var(--hanlan-color-text);
}

.hanlan-switch-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--hanlan-plugin-accent);
}

#project-list .hanlan-drop-indicator {
  display: none !important;
}

#preset-categories .hanlan-accordion-body,
#project-list .hanlan-accordion-body,
#queue-list .hanlan-accordion-body {
  padding: 0;
  padding-top: var(--hanlan-space-xs);
  gap: var(--hanlan-space-xs);
}

#queue-list .hanlan-accordion-body .hanlan-smart-list-item,
#preset-categories .hanlan-accordion-body .hanlan-smart-list-item,
#project-list .hanlan-accordion-body .hanlan-smart-list-item {
  padding-left: 18px;
  padding-right: 18px;
  margin-bottom: 0;
}

#queue-list .hanlan-accordion-empty,
#preset-categories .hanlan-accordion-empty,
#project-list .hanlan-accordion-empty {
  padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
  margin: var(--hanlan-space-xxs) var(--hanlan-space-xxs);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--hanlan-radius-sm, 4px);
  font-size: 11px;
  opacity: 0.5;
}

.hover-preview-tooltip {
  position: fixed;
  z-index: var(--hanlan-z-tooltip, 10000);
  background: var(--hanlan-tooltip-bg);
  backdrop-filter: blur(var(--hanlan-glass-blur));
  -webkit-backdrop-filter: blur(var(--hanlan-glass-blur));
  border: 1px solid var(--hanlan-tooltip-border);
  border-radius: var(--hanlan-radius-md);
  padding: var(--hanlan-space-md);
  box-shadow: var(--hanlan-shadow-md);
  color: var(--hanlan-tooltip-text);
  pointer-events: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: center top;
  transition:
    opacity var(--hanlan-duration-fast) var(--hanlan-ease-out),
    transform var(--hanlan-duration-fast) var(--hanlan-ease-out);
}

.hover-preview-tooltip.hidden {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(2px) scale(0.985);
}

.preview-rectangle {
  border: 1px solid var(--hanlan-control-border);
  border-radius: var(--hanlan-radius-sm);
  margin-bottom: var(--hanlan-space-sm);
}

.preview-landscape {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.1) 0%, rgba(245, 124, 0, 0.1) 100%);
  border-color: var(--hanlan-plugin-accent);
}

.preview-portrait {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(41, 128, 185, 0.1) 100%);
  border-color: #3498db;
}

.preview-square {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(39, 174, 96, 0.1) 100%);
  border-color: #2ecc71;
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-xs);
}

.preview-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--hanlan-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.preview-specs {
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
}

@keyframes queue-slide-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.queue-item-entering {
  animation: queue-slide-in 200ms ease-out;
}

.project-item-entering {
  animation: queue-slide-in 200ms ease-out;
}

.hanlan-context-menu-toggle {
  margin-left: 0;
  margin-right: 0;
}

.hanlan-btn:focus-visible,
.hanlan-btn-icon:focus-visible,
button:focus-visible {
  outline: 2px solid var(--hanlan-plugin-accent);
  outline-offset: 2px;
}

.hanlan-input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

.hanlan-section--disabled,
.section-disabled {
  filter: grayscale(50%);
  opacity: 0.6;
}

.hanlan-vertical-stepper input,
.hanlan-stepper input[type="number"] {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

#project-name-display {
  position: fixed;
  bottom: var(--hanlan-space-md);
  left: var(--hanlan-space-md);

  height: var(--hanlan-control-height);
  line-height: var(--hanlan-control-height);
  font-size: var(--hanlan-font-size-xs);
  font-style: italic;
  color: var(--hanlan-color-text-secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.5;
  z-index: var(--hanlan-z-toolbar, 1000);
}

.hanlan-empty-state-icon {
  margin-bottom: var(--hanlan-space-md);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--hanlan-transition-base), transform var(--hanlan-transition-base);
}

.hanlan-empty-state-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

.hanlan-smart-list-empty {
  font-size: var(--hanlan-font-size-lg);
  gap: var(--hanlan-space-sm);
}

.hanlan-empty-state-icon svg {
  width: 96px;
  height: 96px;
}

/* ============================================================
   Queue Template Cards — picker modal
   Rich card pattern: icon + name + metadata + preset chips.
   Ported from marketing product-page "Quick Templates" demo.
   ============================================================ */

.cor-tpl-scroll {
  width: 100%;
  align-self: stretch;
  max-height: 400px;
  min-height: 200px;
  overflow-y: auto;
  padding: 0 var(--hanlan-space-xxs);
  box-sizing: border-box;
}

.cor-tpl-list {
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-xs);
  padding: var(--hanlan-space-xxs) 0;
  width: 100%;
}

.cor-tpl-card {
  display: flex;
  align-items: flex-start;
  gap: var(--hanlan-space-md);
  background: var(--hanlan-color-bg-elevated);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius-md);
  padding: var(--hanlan-space-sm) var(--hanlan-space-md);
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.cor-tpl-card:hover {
  background: var(--hanlan-color-bg-hover);
  border-color: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
  box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-color-accent));
}

.cor-tpl-card--selected {
  background: var(--hanlan-color-bg-elevated);
  border-color: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
  box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-color-accent));
}

.cor-tpl-card--selected:hover {
  background: var(--hanlan-color-bg-elevated);
  border-color: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
  box-shadow: inset 0 0 0 1px var(--hanlan-plugin-accent, var(--hanlan-color-accent));
  filter: brightness(1.1);
}

.cor-tpl-icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hanlan-radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--hanlan-color-text-muted);
  transition: background 120ms ease, color 120ms ease;
}

.cor-tpl-card--selected .cor-tpl-icon-wrap {
  background: var(--hanlan-color-accent-subtle);
  color: var(--hanlan-plugin-accent, var(--hanlan-color-accent));
}

.cor-tpl-icon-wrap svg {
  width: 18px;
  height: 18px;
}

.cor-tpl-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}

.cor-tpl-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hanlan-color-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cor-tpl-meta {
  display: flex;
  gap: var(--hanlan-space-xs);
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  line-height: 1.3;
}

.cor-tpl-meta-sep {
  opacity: 0.5;
}

.cor-tpl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--hanlan-space-xxs);
}

.cor-tpl-chip {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--hanlan-color-text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hanlan-color-border);
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}

.cor-tpl-card--selected .cor-tpl-chip {
  border-color: rgba(245, 166, 35, 0.45);
  color: var(--hanlan-color-text);
}

.cor-tpl-chip--more {
  font-style: italic;
  opacity: 0.75;
}

.cor-tpl-empty {
  padding: var(--hanlan-space-xl) var(--hanlan-space-md);
  text-align: center;
  color: var(--hanlan-color-text-muted);
  font-size: 12px;
}

.cor-tpl-footer {
  width: 100%;
  align-self: stretch;
  padding: var(--hanlan-space-sm) 0 0;
  margin-top: var(--hanlan-space-xs);
  box-sizing: border-box;
}

.cor-tpl-footer .hanlan-btn {
  width: 100%;
  font-size: 12px;
  opacity: 0.75;
}

.cor-tpl-footer .hanlan-btn:hover {
  opacity: 1;
}

/* ============================================================
   Queue Template — Edit Modal
   ============================================================ */

.cor-tpl-edit-wrap {
  width: 100%;
  align-self: stretch;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-sm);
  box-sizing: border-box;
}

.cor-tpl-edit-label {
  display: block;
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--hanlan-space-xxs);
}

.cor-tpl-edit-items-header {
  font-size: 11px;
  color: var(--hanlan-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: var(--hanlan-space-xs);
  margin-top: var(--hanlan-space-xs);
  border-top: var(--hanlan-divider);
}

.cor-tpl-edit-items {
  display: flex;
  flex-direction: column;
  gap: var(--hanlan-space-xxs);
  padding: 2px;
}

.cor-tpl-edit-item {
  display: flex;
  align-items: center;
  gap: var(--hanlan-space-sm);
  background: var(--hanlan-color-bg-elevated);
  border: 1px solid var(--hanlan-color-border);
  border-radius: var(--hanlan-radius-sm);
  padding: var(--hanlan-space-xs) var(--hanlan-space-sm);
  text-align: left;
}

.cor-tpl-edit-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cor-tpl-edit-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--hanlan-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cor-tpl-edit-item-meta {
  font-size: 10.5px;
  color: var(--hanlan-color-text-muted);
  font-style: italic;
}

.cor-tpl-edit-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hanlan-radius-sm);
  color: var(--hanlan-color-text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.cor-tpl-edit-remove:hover {
  background: var(--hanlan-color-bg-hover);
  border-color: transparent;
  color: var(--hanlan-color-text);
}

.cor-tpl-edit-remove svg {
  width: 14px;
  height: 14px;
}

.cor-tpl-edit-empty {
  padding: var(--hanlan-space-md);
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  color: var(--hanlan-color-text-muted);
  background: rgba(229, 83, 83, 0.08);
  border: 1px dashed rgba(229, 83, 83, 0.4);
  border-radius: var(--hanlan-radius-sm);
}

/* ========================================
   AESP framework overrides (aescripts channel only)
   Restyle the About tab to match COMP-O-RAMA design tokens.
   AESP injects high-specificity inline styles — !important is required.
   ======================================== */

/* Logo: constrain size + centre, instead of stretching to container width */
.aesp-about-image-container {
  padding: 28px 20px 8px !important;
}
.aesp-about-image {
  max-width: 180px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Body text: use COR's font + colour tokens; tighten typographic rhythm */
.aesp-about-text {
  color: var(--hanlan-color-text-secondary, rgba(255, 255, 255, 0.70)) !important;
  font-family: var(--hanlan-font-family-base) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  padding: 8px 24px 24px !important;
}
.aesp-about-text strong {
  color: var(--hanlan-color-text, rgba(255, 255, 255, 0.94)) !important;
  font-weight: 600 !important;
}
.aesp-about-text p {
  margin: 10px 0 !important;
}

/* Links: brand orange, lighter peach on hover */
.aesp-about-text a,
.aesp-dialog a,
.aesp-dialog-content a {
  color: var(--hanlan-color-accent, #f5a623) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s ease !important;
}
.aesp-about-text a:hover,
.aesp-dialog a:hover,
.aesp-dialog-content a:hover {
  color: #ffc266 !important;
}
