/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.29_@babel+core@7.29.13_@types+node@24.19.2_babel-plugin-react-compiler@1.0.0__0d38aac4dd206ca35864d87f92a8be0e/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.29_@babel+core@7.29.13_@types+node@24.19.2_babel-plugin-react-compiler@1.0.0__0d38aac4dd206ca35864d87f92a8be0e/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/globals.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    /* Vendored in public/fonts/ — webpack cannot resolve a bare package
     * path in a CSS url() (the Vite build resolved it via node_modules).
     * An absolute /fonts/... URL is served as-is from public/. */
    src: url("/fonts/inter-latin-wght-normal.woff2")
        format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Global CSS custom properties - design tokens for the admin/editor UI.
 * The admin chrome uses the Core Framework-style token vocabulary directly.
 */
:root {
    color-scheme: dark;

    --font-sans: "Inter Variable", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        monospace;

    /* Fluid admin type scale. Suffixes mirror Core Framework text steps. */
    --text-3xs-base: clamp(8px, calc(7.629px + 0.095vw), 9px);
    --text-2xs-base: clamp(9px, calc(8.629px + 0.095vw), 10px);
    --text-xs-base: clamp(10px, calc(9.629px + 0.095vw), 11px);
    --text-s-base: clamp(11px, calc(10.629px + 0.095vw), 12px);
    --text-m-base: clamp(12px, calc(11.629px + 0.095vw), 13px);
    --text-l-base: clamp(13px, calc(12.629px + 0.095vw), 14px);
    --text-xl-base: clamp(14px, calc(13.257px + 0.19vw), 16px);
    --text-2xl-base: clamp(16px, calc(15.257px + 0.19vw), 18px);
    --text-3xl-base: clamp(18px, calc(17.257px + 0.19vw), 20px);
    --text-4xl-base: clamp(20px, calc(18.514px + 0.381vw), 24px);
    --text-5xl-base: clamp(24px, calc(22.514px + 0.381vw), 28px);
    --text-6xl-base: clamp(32px, calc(29.029px + 0.762vw), 40px);
    --text-7xl-base: clamp(40px, calc(34.057px + 1.524vw), 56px);
    --text-3xs: clamp(8px, calc(7.629px + 0.095vw), 9px);
    --text-2xs: clamp(9px, calc(8.629px + 0.095vw), 10px);
    --text-xs: clamp(10px, calc(9.629px + 0.095vw), 11px);
    --text-s: clamp(11px, calc(10.629px + 0.095vw), 12px);
    --text-m: clamp(12px, calc(11.629px + 0.095vw), 13px);
    --text-l: clamp(13px, calc(12.629px + 0.095vw), 14px);
    --text-xl: clamp(14px, calc(13.257px + 0.19vw), 16px);
    --text-2xl: clamp(16px, calc(15.257px + 0.19vw), 18px);
    --text-3xl: clamp(18px, calc(17.257px + 0.19vw), 20px);
    --text-4xl: clamp(20px, calc(18.514px + 0.381vw), 24px);
    --text-5xl: clamp(24px, calc(22.514px + 0.381vw), 28px);
    --text-6xl: clamp(32px, calc(29.029px + 0.762vw), 40px);
    --text-7xl: clamp(40px, calc(34.057px + 1.524vw), 56px);

    /* Fluid admin spacing scale. Suffixes mirror Core Framework spacing steps. */
    --space-px: 1px;
    --space-4xs: clamp(2px, calc(1.629px + 0.095vw), 3px);
    --space-3xs: clamp(3px, calc(2.629px + 0.095vw), 4px);
    --space-2xs: clamp(4px, calc(3.629px + 0.095vw), 5px);
    --space-xs: clamp(5px, calc(4.629px + 0.095vw), 6px);
    --space-s: clamp(6px, calc(5.257px + 0.19vw), 8px);
    --space-m: clamp(8px, calc(7.257px + 0.19vw), 10px);
    --space-l: clamp(10px, calc(9.257px + 0.19vw), 12px);
    --space-xl: clamp(12px, calc(11.257px + 0.19vw), 14px);
    --space-2xl: clamp(14px, calc(13.257px + 0.19vw), 16px);
    --space-3xl: clamp(16px, calc(15.257px + 0.19vw), 18px);
    --space-4xl: clamp(18px, calc(17.257px + 0.19vw), 20px);
    --space-5xl: clamp(20px, calc(18.514px + 0.381vw), 24px);
    --space-6xl: clamp(24px, calc(22.514px + 0.381vw), 28px);
    --space-7xl: clamp(28px, calc(26.514px + 0.381vw), 32px);
    --space-8xl: clamp(32px, calc(29.029px + 0.762vw), 40px);
    --space-9xl: clamp(40px, calc(37.029px + 0.762vw), 48px);
    --space-10xl: clamp(48px, calc(45.029px + 0.762vw), 56px);
    --space-11xl: clamp(56px, calc(50.057px + 1.524vw), 72px);
    --space-12xl: clamp(84px, calc(75.086px + 2.286vw), 108px);

    /* Phone hardware in the app canvas, independent of editor light/dark theme. */
    --app-device-bezel: #080808;
    --app-device-screen: #101010;
    --app-device-edge: #292929;
    --app-device-rim: #555555;
    --app-device-foreground: #ffffff;
    --app-device-radius: 54px;

    /* Surfaces */
    --bg-body: #000000;
    --bg-surface: #1b1b1b;
    --bg-surface-2: #282828;
    --bg-surface-3: #323232;
    --bg-surface-4: #4a4a4a;
    --bg-surface-5: #605f5f;

    /* Borders */
    --border-subtle: #1f1f1f;
    --border-muted: #2e2e2e;
    --border: #333333;
    --border-strong: #4a4a4a;

    /* Text */
    --text-bright: #f4f4f5;
    --text: #ededed;
    --text-muted: #a1a1aa;
    --text-subtle: #787878;
    --text-disabled: #52525b;

    /* Primary action: high-contrast inverse pill (white-on-dark). */
    --btn-primary-bg: #ffffff;
    --btn-primary-bg-hover: #e4e4e7;
    --btn-primary-bg-active: #d4d4d8;
    --btn-primary-fg: #111827;

    /* White overlay scale. Suffix = alpha x 100. */
    --overlay: #ffffff;
    --overlay-5: rgba(255, 255, 255, 0.05);
    --overlay-10: rgba(255, 255, 255, 0.1);
    --overlay-20: rgba(255, 255, 255, 0.2);
    --overlay-30: rgba(255, 255, 255, 0.3);
    --overlay-40: rgba(255, 255, 255, 0.4);
    --overlay-50: rgba(255, 255, 255, 0.5);
    --overlay-60: rgba(255, 255, 255, 0.6);
    --overlay-70: rgba(255, 255, 255, 0.7);
    --overlay-80: rgba(255, 255, 255, 0.8);
    --overlay-90: rgba(255, 255, 255, 0.9);

    /* Black scrim scale for shadows and modal backdrops. */
    --scrim: #000000;
    --scrim-10: rgba(0, 0, 0, 0.1);
    --scrim-20: rgba(0, 0, 0, 0.2);
    --scrim-30: rgba(0, 0, 0, 0.3);
    --scrim-40: rgba(0, 0, 0, 0.4);
    --scrim-50: rgba(0, 0, 0, 0.5);
    --scrim-60: rgba(0, 0, 0, 0.6);
    --scrim-70: rgba(0, 0, 0, 0.7);
    --scrim-80: rgba(0, 0, 0, 0.8);
    --scrim-90: rgba(0, 0, 0, 0.9);

    /* Identity accents. Each accent has one standard 10% surface tint. */
    --accent-1: #8ee6c8;
    --accent-1-10: rgba(142, 230, 200, 0.1);
    --accent-1-ink: #0b0f0d;
    --accent-2: #c8b6ff;
    --accent-2-10: rgba(200, 182, 255, 0.1);
    --accent-3: #9bdcff;
    --accent-3-10: rgba(155, 220, 255, 0.1);
    --accent-4: #ffc7a8;
    --accent-4-10: rgba(255, 199, 168, 0.1);
    --accent-5: #ffb6cd;
    --accent-5-10: rgba(255, 182, 205, 0.1);
    --accent-6: #b8f28b;
    --accent-6-10: rgba(184, 242, 139, 0.1);
    --accent-7: #f7df72;
    --accent-7-10: rgba(247, 223, 114, 0.1);
    --accent-8: #83e7ff;
    --accent-8-10: rgba(131, 231, 255, 0.1);
    --accent-9: #f0a6ff;
    --accent-9-10: rgba(240, 166, 255, 0.1);
    --accent-10: #ff9f9f;
    --accent-10-10: rgba(255, 159, 159, 0.1);

    /* Semantic state */
    --danger: #ef4444;
    --danger-light: #f87171;
    --danger-lighter: #fca5a5;
    --danger-text: #fecaca;
    --danger-5: rgba(239, 68, 68, 0.05);
    --danger-10: rgba(239, 68, 68, 0.1);
    --danger-20: rgba(239, 68, 68, 0.2);
    --danger-30: rgba(239, 68, 68, 0.3);
    --danger-40: rgba(239, 68, 68, 0.4);
    --warning: #f59e0b;
    --warning-text: #fde68a;
    --warning-10: rgba(245, 158, 11, 0.1);
    --warning-20: rgba(245, 158, 11, 0.2);
    --warning-30: rgba(245, 158, 11, 0.3);
    --success: #34d399;
    --success-bright: #4ade80;
    --success-text: #d1fae5;
    --success-text-muted: #a7f3d0;
    --success-10: rgba(52, 211, 153, 0.1);
    --success-20: rgba(52, 211, 153, 0.2);
    --success-30: rgba(52, 211, 153, 0.3);
    --success-40: rgba(52, 211, 153, 0.4);
    --info-text: #c4b5fd;

    /* Code syntax - GitHub Dark inspired */
    --syntax-keyword: #ff7b72;
    --syntax-entity: #d2a8ff;
    --syntax-property: #7ee787;
    --syntax-variable: #ffa657;
    --syntax-string: #a5d6ff;
    --syntax-constant: #79c0ff;
    --syntax-comment: #8b949e;
    --syntax-operator: #c9d1d9;
    --syntax-invalid: #ffa198;

    /* Charts */
    --chart-default-tint: var(--accent-4);
    --chart-series-min: #38bdf8; /* sky 400 — bright cyan-blue (mobile) */
    --chart-series-min-glow: rgba(56, 189, 248, 0.4);
    --chart-series-max: #4ade80; /* green 400 — neon green (desktop) */
    --chart-series-max-glow: rgba(74, 222, 128, 0.4);
    --chart-segment-empty: var(--overlay-5);
    --chart-segment-empty-border: var(--overlay-5);
    --chart-track-bg: var(--overlay-5);

    /* Radius */
    --radius-sm: 3px;
    --radius: 6px;
    --card-radius: 16px;
    --panel-radius: 12px;
    --input-radius: 1em;
    --radius-pill: 999px;
    --tooltip-radius: 6px;

    /* Scrollbars */
    --scrollbar-size: 6px;
    --scrollbar-radius: var(--radius-sm);
    --scrollbar-track: transparent;
    --scrollbar-thumb: color-mix(in srgb, var(--text-subtle) 58%, transparent);
    --scrollbar-thumb-hover: color-mix(
        in srgb,
        var(--text-muted) 72%,
        transparent
    );

    /* Shadows and focus */
    --focus-ring: 0 0 0 1px var(--overlay-20);
    --panel-blur: 24px;
    --shadow-panel-inset-bottom: inset 0 -1px 0 var(--scrim-40);
    --shadow-panel-drop: 0 12px 40px rgba(0, 0, 0, 0.65);
    --shadow-panel: var(--shadow-panel-inset-bottom), var(--shadow-panel-drop);
    --shadow-input-focus:
        inset 0 0 5px rgba(255, 255, 255, 0.06),
        inset 0 -5px 8px rgba(255, 255, 255, 0.09),
        0 0 5px rgba(0, 0, 0, 0.24);
    --shadow-tooltip:
        0 4px 16px var(--scrim-50), inset 0 1px 0 var(--overlay-5);

    /* Keycap */
    --kbd-face-top: #434343; /* between surface-3 and surface-4 */
    --kbd-face-bottom: #2f2f2f; /* just below surface-3 */
    --kbd-face-top-hover: #4d4d4d;
    --kbd-face-bottom-hover: #363636;
    --kbd-border: var(--border);
    --kbd-text: var(--text-muted);
    --kbd-highlight: var(--overlay-5);
    --kbd-inner-shadow: var(--scrim-20);
    --kbd-edge: var(--scrim-30);
    --kbd-drop: var(--scrim-30);

    /* Canvas */
    --canvas-chrome-shadow: 0 12px 28px var(--scrim-30);
    --canvas-selection-ring: inset 0 0 0 1px #39ff14;
    --canvas-hover-ring: inset 0 0 0 1px #ff2bd6;
    /* Bare colours for surfaces that need an `outline` / `border-color` / or
       a custom box-shadow geometry rather than the full inset-ring shorthand
       above. Keep the two `*-color` tokens in sync with the shorthands so
       there's no drift. */
    --canvas-selection-ring-color: #39ff14;
    --canvas-hover-ring-color: #ff2bd6;
    --tree-drop-line: #5eead4;
    --tree-drop-line-shadow: rgba(94, 234, 212, 0.18);
    --tree-drop-inside-bg: rgba(94, 234, 212, 0.08);
    --tree-drop-inside-border: rgba(94, 234, 212, 0.65);
    --tree-drop-invalid-bg: rgba(239, 68, 68, 0.06);
    --tree-drop-invalid-border: rgba(239, 68, 68, 0.28);
    /* Selector-affinity ring: drawn over every canvas element that matches a
       selector hovered in the Selectors panel. A third identity colour (neon
       orange) distinct from the green selection ring and pink hover ring, so a
       "show me everything this selector touches" sweep reads as its own thing.
       Two elements can match at once, so the ring is purely an affordance, not
       a selection. */
    --canvas-selector-ring: inset 0 0 0 1px #ff8800;
    --canvas-selector-ring-color: #ff8800;
    /* Shared diagonal-stripe pattern used by every module's canvas empty
       state (image, video, content, loop, container, slot-outlet, VC ref
       placeholders). Strictly achromatic — colours derived from
       --text-subtle via color-mix so it reads neutral on any canvas
       background. Stripe geometry: 45°, 6 px lit + 6 px empty, ~6 %
       contrast over a ~4 % surface tint. Edit here to retune the pattern
       across every module placeholder at once. */
    --canvas-placeholder-bg:
        repeating-linear-gradient(
            -45deg,
            color-mix(in srgb, var(--text-subtle) 6%, transparent) 0 6px,
            transparent 6px 12px
        ),
        color-mix(in srgb, var(--text-subtle) 4%, transparent);

    /* Z-index layers */
    --z-dropdown: 20;

    /* Tooltips are transient hover hints that must sit above every modal layer,
     * including the spotlight-style dialogs (--spotlight-z-index: 9000, used by
     * the module inserter) and the body slash menu (10000). Keep this the
     * topmost interactive layer so a tooltip is never occluded by the surface
     * its trigger lives on. */
    --tooltip-z-index: 10001;

    /* Toasts are non-blocking notifications that must never be occluded — they
     * sit above every modal layer (spotlight dialogs at 9000, body slash menu
     * at 10000; a toast never overlaps the caret-anchored slash menu spatially)
     * and below tooltips, which stay the topmost layer. */
    --toast-z-index: 10000;

    /* Spotlight */
    --backdrop-blur: 8px;
    --spotlight-z-index: 9000;
    --spotlight-width: 640px;
    --progress-shimmer: var(--overlay-40);

    /* Bespoke surface tints */
    --plugins-hero-tint-a: rgba(35, 92, 72, 0.32);
    --plugins-hero-tint-b: rgba(49, 64, 94, 0.24);
    --canvas-live-scrim: rgba(24, 24, 27, 0.82);
}

:root[data-editor-text-scale='small'],
[data-editor-text-scale='small'] {
    --text-3xs: calc(var(--text-3xs-base) - 1px);
    --text-2xs: var(--text-3xs-base);
    --text-xs: var(--text-2xs-base);
    --text-s: var(--text-xs-base);
    --text-m: var(--text-s-base);
    --text-l: var(--text-m-base);
    --text-xl: var(--text-l-base);
    --text-2xl: var(--text-xl-base);
    --text-3xl: var(--text-2xl-base);
    --text-4xl: var(--text-3xl-base);
    --text-5xl: var(--text-4xl-base);
    --text-6xl: var(--text-5xl-base);
    --text-7xl: var(--text-6xl-base);
}

:root[data-editor-text-scale='large'],
[data-editor-text-scale='large'] {
    --text-3xs: var(--text-2xs-base);
    --text-2xs: var(--text-xs-base);
    --text-xs: var(--text-s-base);
    --text-s: var(--text-m-base);
    --text-m: var(--text-l-base);
    --text-l: var(--text-xl-base);
    --text-xl: var(--text-2xl-base);
    --text-2xl: var(--text-3xl-base);
    --text-3xl: var(--text-4xl-base);
    --text-4xl: var(--text-5xl-base);
    --text-5xl: var(--text-6xl-base);
    --text-6xl: var(--text-7xl-base);
    --text-7xl: calc(var(--text-7xl-base) + 8px);
}

:root[data-editor-text-scale='extra-large'],
[data-editor-text-scale='extra-large'] {
    --text-3xs: var(--text-xs-base);
    --text-2xs: var(--text-s-base);
    --text-xs: var(--text-m-base);
    --text-s: var(--text-l-base);
    --text-m: var(--text-xl-base);
    --text-l: var(--text-2xl-base);
    --text-xl: var(--text-3xl-base);
    --text-2xl: var(--text-4xl-base);
    --text-3xl: var(--text-5xl-base);
    --text-4xl: var(--text-6xl-base);
    --text-5xl: var(--text-7xl-base);
    --text-6xl: calc(var(--text-7xl-base) + 12px);
    --text-7xl: calc(var(--text-7xl-base) + 20px);
}

:root[data-editor-theme='light'],
[data-editor-theme='light'] {
    color-scheme: light;

    /* Surfaces */
    --bg-body: #e3e7ed;
    --bg-surface: #ffffff;
    --bg-surface-2: #f6f7f9;
    --bg-surface-3: #eceff3;
    --bg-surface-4: #e1e5ea;
    --bg-surface-5: #d3d9e1;

    /* Borders */
    --border-subtle: #eef0f3;
    --border-muted: #dce1e7;
    --border: #cbd3dc;
    --border-strong: #aeb8c5;

    /* Text */
    --text-bright: #111827;
    --text: #1f2937;
    --text-muted: #4b5563;
    --text-subtle: #6b7280;
    --text-disabled: #9ca3af;

    /* Identity accents tuned as foregrounds for light surfaces. */
    --accent-1: #047857;
    --accent-1-10: rgba(4, 120, 87, 0.1);
    --accent-1-ink: #ffffff;
    --accent-2: #6d28d9;
    --accent-2-10: rgba(109, 40, 217, 0.1);
    --accent-3: #0369a1;
    --accent-3-10: rgba(3, 105, 161, 0.1);
    --accent-4: #9a3412;
    --accent-4-10: rgba(154, 52, 18, 0.1);
    --accent-5: #be123c;
    --accent-5-10: rgba(190, 18, 60, 0.1);
    --accent-6: #3f6212;
    --accent-6-10: rgba(63, 98, 18, 0.1);
    --accent-7: #713f12;
    --accent-7-10: rgba(113, 63, 18, 0.1);
    --accent-8: #0e7490;
    --accent-8-10: rgba(14, 116, 144, 0.1);
    --accent-9: #a21caf;
    --accent-9-10: rgba(162, 28, 175, 0.1);
    --accent-10: #b91c1c;
    --accent-10-10: rgba(185, 28, 28, 0.1);

    /* Primary action: high-contrast inverse pill (ink-on-light). */
    --btn-primary-bg: #111827;
    --btn-primary-bg-hover: #1f2937;
    --btn-primary-bg-active: #374151;
    --btn-primary-fg: #ffffff;

    /* Foreground overlay scale. Suffix = alpha x 100. */
    --overlay: #111827;
    --overlay-5: rgba(17, 24, 39, 0.05);
    --overlay-10: rgba(17, 24, 39, 0.1);
    --overlay-20: rgba(17, 24, 39, 0.2);
    --overlay-30: rgba(17, 24, 39, 0.3);
    --overlay-40: rgba(17, 24, 39, 0.4);
    --overlay-50: rgba(17, 24, 39, 0.5);
    --overlay-60: rgba(17, 24, 39, 0.6);
    --overlay-70: rgba(17, 24, 39, 0.7);
    --overlay-80: rgba(17, 24, 39, 0.8);
    --overlay-90: rgba(17, 24, 39, 0.9);

    /* Semantic state text tuned for light surfaces. */
    --danger-text: #991b1b;
    --warning-text: #92400e;
    --success-text: #047857;
    --success-text-muted: #065f46;
    --info-text: #4338ca;

    /* Shadows and focus */
    --shadow-panel-inset-bottom: inset 0 -1px 0 var(--overlay-10);
    --shadow-panel-drop: 0 16px 42px rgba(15, 23, 42, 0.18);
    --shadow-input-focus:
        inset 0 0 4px rgba(15, 23, 42, 0.06),
        inset 0 -4px 8px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(15, 23, 42, 0.14);

    /* Keycap */
    --kbd-face-top: #ffffff;
    --kbd-face-bottom: #e5e7eb;
    --kbd-face-top-hover: #f8fafc;
    --kbd-face-bottom-hover: #dbe1e8;
    --kbd-border: var(--border);
    --kbd-text: var(--text-muted);
    --kbd-highlight: rgba(255, 255, 255, 0.85);
    --kbd-inner-shadow: rgba(15, 23, 42, 0.1);
    --kbd-edge: rgba(15, 23, 42, 0.18);
    --kbd-drop: rgba(15, 23, 42, 0.16);

    /* Canvas chrome */
    --canvas-chrome-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    --canvas-live-scrim: rgba(248, 250, 252, 0.84);

    /* Bespoke surface tints */
    --plugins-hero-tint-a: rgba(142, 230, 200, 0.18);
    --plugins-hero-tint-b: rgba(155, 220, 255, 0.2);
}

/* Reduced motion support — Constraint from UX Guideline #189 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

html,
body,
#root {
    height: 100%;
    width: 100%;
    overflow: hidden;
    touch-action: pan-x pan-y;
}

body {
    background: var(--bg-body);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Admin chrome scrollbars: achromatic and quiet so rail tint stays dominant. */
* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* ===========================================================================
 * Global skeleton shimmer keyframes.
 *
 * Used by `.skeletonBar` in `Widget.module.css`, `PluginCard.module.css`,
 * `Dialog.module.css`, `AdminPageLayout.module.css`, and the Skeleton
 * primitive's `.skeleton` class. Living here (rather than duplicated in
 * each module) means every skeleton on the page pulses in sync — same
 * 1.4 s loop, same easing — so multiple loading regions read as one
 * coordinated effect rather than independent twitches.
 *
 * The class definitions in those modules each render a shimmering
 * `linear-gradient` with `background-size: 200% 100%`; this keyframe
 * just animates the gradient's `background-position` from one edge to
 * the other.
 * ===========================================================================
 */
@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* `prefers-reduced-motion` opt-out is enforced per-CSS-module on each
 * skeleton class (each `.skeletonBar` rule has a paired `@media` that
 * stops its animation). The static fill still communicates "this region
 * is loading" via its surface tone + the `aria-busy="true"` semantic
 * on the host wrapper. */

/* Root cross-fade between admin pages — moved here from
 * AdminCanvasLayout.module.css (CSS Modules requires every selector to
 * contain a local class, and these view-transition pseudo-elements are
 * global by nature). Sidebars and toolbar share this single page-level
 * fade, no per-region named view transitions. Tweaking this duration
 * tunes the entire admin navigation feel. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 100ms;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.29_@babel+core@7.29.13_@types+node@24.19.2_babel-plugin-react-compiler@1.0.0__0d38aac4dd206ca35864d87f92a8be0e/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.29_@babel+core@7.29.13_@types+node@24.19.2_babel-plugin-react-compiler@1.0.0__0d38aac4dd206ca35864d87f92a8be0e/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/splash.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* "Loading Instatic" splash — copied verbatim from the Vite demo's
   index.html <style data-initial-loader> block. Shown until the SPA
   mounts (see app/[[...path]]/page.tsx). */

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #000;
}

.loading {
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  background: #000;
  color: #ededed;
}

.loader {
  position: relative;
  width: 72px;
  height: 72px;
}

.box {
  float: left;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.box:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.box:nth-child(3n) {
  margin-right: 0;
  margin-bottom: 6px;
}

.box:nth-child(1):before,
.box:nth-child(4):before {
  margin-left: 26px;
}

.box:nth-child(3):before {
  margin-top: 52px;
}

.box:last-child {
  margin-bottom: 0;
}

@keyframes move-1 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }
  18.1818181818% {
    transform: translate(0px, 0);
  }
  27.2727272727% {
    transform: translate(0px, 0);
  }
  36.3636363636% {
    transform: translate(26px, 0);
  }
  45.4545454545% {
    transform: translate(26px, 26px);
  }
  54.5454545455% {
    transform: translate(26px, 26px);
  }
  63.6363636364% {
    transform: translate(26px, 26px);
  }
  72.7272727273% {
    transform: translate(26px, 0px);
  }
  81.8181818182% {
    transform: translate(0px, 0px);
  }
  90.9090909091% {
    transform: translate(-26px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.box:nth-child(1) {
  animation: move-1 4s infinite;
}

@keyframes move-2 {
  9.0909090909% {
    transform: translate(0, 0);
  }
  18.1818181818% {
    transform: translate(26px, 0);
  }
  27.2727272727% {
    transform: translate(0px, 0);
  }
  36.3636363636% {
    transform: translate(26px, 0);
  }
  45.4545454545% {
    transform: translate(26px, 26px);
  }
  54.5454545455% {
    transform: translate(26px, 26px);
  }
  63.6363636364% {
    transform: translate(26px, 26px);
  }
  72.7272727273% {
    transform: translate(26px, 26px);
  }
  81.8181818182% {
    transform: translate(0px, 26px);
  }
  90.9090909091% {
    transform: translate(0px, 26px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.box:nth-child(2) {
  animation: move-2 4s infinite;
}

@keyframes move-3 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }
  18.1818181818% {
    transform: translate(-26px, 0);
  }
  27.2727272727% {
    transform: translate(0px, 0);
  }
  36.3636363636% {
    transform: translate(-26px, 0);
  }
  45.4545454545% {
    transform: translate(-26px, 0);
  }
  54.5454545455% {
    transform: translate(-26px, 0);
  }
  63.6363636364% {
    transform: translate(-26px, 0);
  }
  72.7272727273% {
    transform: translate(-26px, 0);
  }
  81.8181818182% {
    transform: translate(-26px, -26px);
  }
  90.9090909091% {
    transform: translate(0px, -26px);
  }
  100% {
    transform: translate(0px, 0);
  }
}

.box:nth-child(3) {
  animation: move-3 4s infinite;
}

@keyframes move-4 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }
  18.1818181818% {
    transform: translate(-26px, 0);
  }
  27.2727272727% {
    transform: translate(-26px, -26px);
  }
  36.3636363636% {
    transform: translate(0px, -26px);
  }
  45.4545454545% {
    transform: translate(0px, 0px);
  }
  54.5454545455% {
    transform: translate(0px, -26px);
  }
  63.6363636364% {
    transform: translate(0px, -26px);
  }
  72.7272727273% {
    transform: translate(0px, -26px);
  }
  81.8181818182% {
    transform: translate(-26px, -26px);
  }
  90.9090909091% {
    transform: translate(-26px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.box:nth-child(4) {
  animation: move-4 4s infinite;
}

@keyframes move-5 {
  9.0909090909% {
    transform: translate(0, 0);
  }
  18.1818181818% {
    transform: translate(0, 0);
  }
  27.2727272727% {
    transform: translate(0, 0);
  }
  36.3636363636% {
    transform: translate(26px, 0);
  }
  45.4545454545% {
    transform: translate(26px, 0);
  }
  54.5454545455% {
    transform: translate(26px, 0);
  }
  63.6363636364% {
    transform: translate(26px, 0);
  }
  72.7272727273% {
    transform: translate(26px, 0);
  }
  81.8181818182% {
    transform: translate(26px, -26px);
  }
  90.9090909091% {
    transform: translate(0px, -26px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.box:nth-child(5) {
  animation: move-5 4s infinite;
}

@keyframes move-6 {
  9.0909090909% {
    transform: translate(0, 0);
  }
  18.1818181818% {
    transform: translate(-26px, 0);
  }
  27.2727272727% {
    transform: translate(-26px, 0);
  }
  36.3636363636% {
    transform: translate(0px, 0);
  }
  45.4545454545% {
    transform: translate(0px, 0);
  }
  54.5454545455% {
    transform: translate(0px, 0);
  }
  63.6363636364% {
    transform: translate(0px, 0);
  }
  72.7272727273% {
    transform: translate(0px, 26px);
  }
  81.8181818182% {
    transform: translate(-26px, 26px);
  }
  90.9090909091% {
    transform: translate(-26px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.box:nth-child(6) {
  animation: move-6 4s infinite;
}

@keyframes move-7 {
  9.0909090909% {
    transform: translate(26px, 0);
  }
  18.1818181818% {
    transform: translate(26px, 0);
  }
  27.2727272727% {
    transform: translate(26px, 0);
  }
  36.3636363636% {
    transform: translate(0px, 0);
  }
  45.4545454545% {
    transform: translate(0px, -26px);
  }
  54.5454545455% {
    transform: translate(26px, -26px);
  }
  63.6363636364% {
    transform: translate(0px, -26px);
  }
  72.7272727273% {
    transform: translate(0px, -26px);
  }
  81.8181818182% {
    transform: translate(0px, 0px);
  }
  90.9090909091% {
    transform: translate(26px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.box:nth-child(7) {
  animation: move-7 4s infinite;
}

@keyframes move-8 {
  9.0909090909% {
    transform: translate(0, 0);
  }
  18.1818181818% {
    transform: translate(-26px, 0);
  }
  27.2727272727% {
    transform: translate(-26px, -26px);
  }
  36.3636363636% {
    transform: translate(0px, -26px);
  }
  45.4545454545% {
    transform: translate(0px, -26px);
  }
  54.5454545455% {
    transform: translate(0px, -26px);
  }
  63.6363636364% {
    transform: translate(0px, -26px);
  }
  72.7272727273% {
    transform: translate(0px, -26px);
  }
  81.8181818182% {
    transform: translate(26px, -26px);
  }
  90.9090909091% {
    transform: translate(26px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.box:nth-child(8) {
  animation: move-8 4s infinite;
}

@keyframes move-9 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }
  18.1818181818% {
    transform: translate(-26px, 0);
  }
  27.2727272727% {
    transform: translate(0px, 0);
  }
  36.3636363636% {
    transform: translate(-26px, 0);
  }
  45.4545454545% {
    transform: translate(0px, 0);
  }
  54.5454545455% {
    transform: translate(0px, 0);
  }
  63.6363636364% {
    transform: translate(-26px, 0);
  }
  72.7272727273% {
    transform: translate(-26px, 0);
  }
  81.8181818182% {
    transform: translate(-52px, 0);
  }
  90.9090909091% {
    transform: translate(-26px, 0);
  }
  100% {
    transform: translate(0px, 0);
  }
}

.box:nth-child(9) {
  animation: move-9 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .box {
    animation: none !important;
  }
}

