/* Phase 5D2A — shared border-radius token foundation.
   Exact aliases of the established shape scale; no visual size change intended. */
:root {
    --of-project-accent: #3b82f6;
    --of-radius-sm: 8px;
    --of-radius-md: 10px;
    --of-radius-lg: 12px;
    --of-radius-xl: 14px;
    --of-radius-2xl: 16px;
    --of-radius-panel: 18px;
    --of-radius-control-compact: 7px;
    --of-radius-control-dense: 6px;
    --of-radius-control: 9px;
    --of-radius-control-large: 13px;
    --of-radius-control-workflow: 11px;
    --of-radius-pill: 999px;
    /* Phase 5D3E1 — exact dark subtle top-highlight shadow alias. */
    --of-shadow-dark-top-highlight-subtle: inset 0 1px 0 rgba(255,255,255,.025);
    /* Phase 5D3E2 — exact dark medium top-highlight shadow alias.
       Kept separate from the subtler .025 highlight; no visual change intended. */
    --of-shadow-dark-top-highlight-medium: inset 0 1px 0 rgba(255,255,255,.04);
    /* Phase 5D3F1 — exact dark soft top-highlight shadow alias.
       Sits between the .025 subtle and .04 medium families; no visual change intended. */
    --of-shadow-dark-top-highlight-soft: inset 0 1px 0 rgba(255,255,255,.035);
    /* Phase 5D3F2 — exact dark strong top-highlight shadow alias.
       Kept separate from the .035/.04 families and light-theme .045 elevations. */
    --of-shadow-dark-top-highlight-strong: inset 0 1px 0 rgba(255,255,255,.045);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #2d2d2d; }
        ::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #777; }
        body { background-color: #383838; color: #ffffff; font-family: sans-serif; overflow: hidden; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
        input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; }
        .assignment-stage-assignee-select { background-color: #202020 !important; color: #e5e7eb !important; color-scheme: dark; }
        .assignment-stage-assignee-select option { background-color: #2d2d2d !important; color: #f3f4f6 !important; }
        .assignment-stage-assignee-select:focus { outline: none; box-shadow: none; }

        /* artist_assign_custom_dropdown_v2: attached dark assignee picker matching the dashboard UI. */
        .assignment-stage-assignee-picker {
            position: relative;
            width: 100%;
            min-width: 0;
            z-index: 4;
        }
        .assignment-stage-assignee-picker.is-open { z-index: 4; }
        /* artist_assign_geometry_lock_v1: the assignee list is painted in a fixed body-level overlay.
           Never change assignment-card containment/overflow/z-index when the picker opens; doing so
           makes Chrome rebuild the whole card and can cause a visible row/shape nudge. */
        #assignment-assignee-overlay-root {
            position: fixed;
            inset: 0;
            z-index: 1400;
            pointer-events: none;
        }
        .assignment-stage-assignee-trigger {
            width: 100%;
            height: 36px;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 0 9px 0 7px;
            border: 1px solid #59616c;
            border-radius: var(--of-radius-control);
            background: #202224;
            color: #eef2f7;
            box-shadow: var(--of-shadow-dark-top-highlight-subtle);
            cursor: pointer;
            transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
        }
        .assignment-stage-assignee-trigger:hover {
            border-color: #6c7682;
            background: #242628;
        }
        .assignment-stage-assignee-trigger:focus-visible {
            outline: none;
            border-color: #568bd4;
            box-shadow: 0 0 0 2px rgba(59,130,246,.18);
        }
        .assignment-stage-assignee-picker.is-open .assignment-stage-assignee-trigger {
            border-color: #65717e;
            border-bottom-color: #3d444c;
            border-radius: 9px 9px 0 0;
            background: #242628;
        }
        .assignment-stage-assignee-avatar {
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            border-radius: var(--of-radius-pill);
            object-fit: cover;
            border: 1px solid #505965;
            background: #17191b;
        }
        .assignment-stage-assignee-avatar-fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #8b5cf6;
            background: #252034;
            border-color: #4b3b6f;
        }
        .assignment-stage-assignee-avatar-fallback svg { width: 14px; height: 14px; }
        .assignment-stage-assignee-trigger-summary {
            display: flex;
            align-items: center;
            min-width: 0;
            flex: 1 1 auto;
            gap: 7px;
        }
        .assignment-stage-assignee-trigger-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11px;
            line-height: 1;
            font-weight: 750;
            color: #f1f5f9;
        }
        .assignment-stage-assignee-chevron {
            width: 15px;
            height: 15px;
            flex: 0 0 15px;
            color: #c7ced8;
            transition: transform .14s ease;
        }
        .assignment-stage-assignee-picker.is-open .assignment-stage-assignee-chevron { transform: rotate(180deg); }
        .assignment-stage-assignee-dot {
            width: 10px;
            height: 10px;
            flex: 0 0 10px;
            border-radius: var(--of-radius-pill);
            border: 1px solid rgba(255,255,255,.13);
            box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.18);
        }
        .assignment-stage-assignee-dot.is-free { background: #39d98a; }
        .assignment-stage-assignee-dot.is-busy { background: #ff7a45; }
        .assignment-stage-assignee-dot.is-unassigned { background: #717782; }
        .assignment-stage-assignee-menu {
            position: absolute;
            top: calc(100% - 1px);
            left: 0;
            right: 0;
            display: none;
            max-height: 252px;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 4px 0 5px;
            border: 1px solid #65717e;
            border-top-color: #3d444c;
            border-radius: 0 0 9px 9px;
            background: #202224;
            box-shadow: 0 18px 34px rgba(0,0,0,.46), 0 2px 6px rgba(0,0,0,.38);
            z-index: 1002;
        }
        /* The source menu stays permanently out of layout/paint. A cloned menu is shown in
           #assignment-assignee-overlay-root so the assignment card remains pixel-locked. */
        .assignment-stage-assignee-picker.is-open > .assignment-stage-assignee-menu { display: none; }
        #assignment-assignee-overlay-root .assignment-stage-assignee-menu {
            display: block;
            position: fixed;
            top: auto;
            right: auto;
            bottom: auto;
            pointer-events: auto;
            z-index: 1;
        }
        #assignment-assignee-overlay-root .assignment-stage-assignee-menu.is-dropup {
            border-top-color: #65717e;
            border-bottom-color: #3d444c;
            border-radius: 9px 9px 0 0;
        }
        .assignment-stage-assignee-option {
            width: 100%;
            min-height: 37px;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 0 11px;
            border: 0;
            background: transparent;
            color: #f1f5f9;
            text-align: left;
            cursor: pointer;
            transition: background .1s ease, color .1s ease;
        }
        .assignment-stage-assignee-option:hover,
        .assignment-stage-assignee-option:focus-visible {
            outline: none;
            background: #303438;
        }
        .assignment-stage-assignee-option.is-selected {
            background: #76a9e6;
            color: #101923;
        }
        .assignment-stage-assignee-option.is-selected:hover,
        .assignment-stage-assignee-option.is-selected:focus-visible { background: #83b4ed; }
        .assignment-stage-assignee-option-unassigned {
            border-bottom: 1px solid #3d444c;
            color: #cbd5e1;
        }
        .assignment-stage-assignee-option-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11px;
            line-height: 1.1;
            font-weight: 700;
        }
        .assignment-stage-assignee-option-label strong { font-weight: 850; }
        .assignment-stage-assignee-option-separator { opacity: .75; }
        .assignment-stage-assignee-empty {
            padding: 11px 12px;
            color: #8f98a4;
            font-size: 10px;
            font-weight: 700;
        }
        .assignment-stage-assignee-picker.is-dropup .assignment-stage-assignee-menu {
            top: auto;
            bottom: calc(100% - 1px);
            border-top-color: #65717e;
            border-bottom-color: #3d444c;
            border-radius: 9px 9px 0 0;
        }
        .assignment-stage-assignee-picker.is-dropup .assignment-stage-assignee-trigger {
            border-radius: 0 0 9px 9px;
            border-top-color: #3d444c;
            border-bottom-color: #65717e;
        }
        @media (max-width: 760px) {
            .assignment-stage-assignee-picker.is-compact .assignment-stage-assignee-trigger { height: 36px; }
            .assignment-stage-assignee-trigger-label,
            .assignment-stage-assignee-option-label { font-size: 10px; }
            .assignment-stage-assignee-menu { max-height: min(252px, 42vh); }
        }
        .company-date-picker { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

        /* fixed_team_code_copy_animation: visible feedback when access code is copied */
        @keyframes code-copy-success-pop {
            0% { transform: scale(1); box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
            38% { transform: scale(1.035); box-shadow: 0 0 18px rgba(34, 197, 94, 0.55); }
            100% { transform: scale(1); box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
        }
        @keyframes code-copy-card-flash {
            0% { border-color: rgba(34, 197, 94, 0.35); background-color: rgba(20, 83, 45, 0.18); }
            35% { border-color: rgba(74, 222, 128, 0.95); background-color: rgba(22, 163, 74, 0.22); }
            100% { border-color: rgba(34, 197, 94, 0.30); background-color: rgba(20, 83, 45, 0.20); }
        }
        .code-copy-success-pop { animation: code-copy-success-pop .55s ease-out 1; }
        .code-copy-card-flash { animation: code-copy-card-flash .9s ease-out 1; }

        /* Fixed v24: Compact company subscription notification bar */
        .subscription-nav-wrap { position: relative; flex-shrink: 0; }
        .subscription-nav-pill {
            min-width: 180px;
            max-width: 260px;
            height: 42px;
            border-radius: var(--of-radius-lg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 3px;
            padding: 6px 10px;
            cursor: pointer;
            box-shadow: 0 8px 22px rgba(0,0,0,.28);
            border: 1px solid rgba(255,255,255,.11);
            user-select: none;
        }
        .subscription-nav-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; }
        .subscription-nav-title span:first-child { overflow: hidden; text-overflow: ellipsis; }
        .subscription-progress-track { width: 100%; height: 4px; border-radius: var(--of-radius-pill); background: rgba(0,0,0,.35); overflow: hidden; }
        .subscription-progress-fill { height: 100%; border-radius: var(--of-radius-pill); background: rgba(255,255,255,.85); }
        .subscription-details-panel {
            position: absolute;
            right: 0;
            top: calc(100% + 8px);
            width: min(330px, calc(100vw - 24px));
            border-radius: var(--of-radius-2xl);
            border: 1px solid rgba(255,255,255,.11);
            background: rgba(38,38,38,.98);
            backdrop-filter: blur(10px);
            box-shadow: 0 18px 45px rgba(0,0,0,.45);
            padding: 12px;
            z-index: 95;
        }
        /* subscription_upgrade_button_v1: UI hook for the upcoming plan/payment flow. */
        .subscription-upgrade-button {
            width: 100%;
            min-height: 38px;
            margin-top: 12px;
            border: 1px solid rgba(96,165,250,.6);
            border-radius: var(--of-radius-md);
            background: rgba(37,99,235,.92);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .01em;
            cursor: pointer;
            transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
        }
        .subscription-upgrade-button:hover {
            background: rgba(59,130,246,.98);
            border-color: rgba(147,197,253,.9);
        }
        .subscription-upgrade-button:active { transform: translateY(1px); }
        .subscription-upgrade-button:focus-visible {
            outline: 2px solid rgba(147,197,253,.95);
            outline-offset: 2px;
        }
        /* mobile_subscription_slim_progress_v1:
           Company admins keep a subscription indication on mobile, but it no longer
           consumes a full dashboard row. The remaining-time percentage becomes a
           thin status strip directly beneath the mobile top bar. */
        .subscription-mobile-row {
            position: relative;
            /* Stay below mobile side-drawer backdrops (46) and panels (48). */
            z-index: 40;
            flex-shrink: 0;
            width: 100%;
            height: 5px;
            padding: 0;
            border: 0;
            background: rgba(255,255,255,.92);
            overflow: visible;
        }
        .subscription-mobile-row .subscription-nav-wrap {
            width: 100%;
            height: 5px;
        }
        .subscription-mobile-row .subscription-nav-pill {
            width: 100%;
            max-width: none;
            min-width: 0;
            height: 5px;
            min-height: 0;
            padding: 0;
            gap: 0;
            border: 0 !important;
            border-radius: 0;
            background: transparent !important;
            box-shadow: none;
            display: block;
            overflow: hidden;
        }
        .subscription-mobile-row .subscription-nav-title { display: none; }
        .subscription-mobile-row .subscription-progress-track {
            width: 100%;
            height: 5px;
            background: rgba(255,255,255,.94);
            overflow: hidden;
        }
        .subscription-mobile-row .subscription-progress-fill {
            height: 100%;
        }
        .subscription-mobile-row .subscription-progress-track,
        .subscription-mobile-row .subscription-progress-fill { border-radius: 0; }
        .subscription-mobile-row .subscription-nav-pill.bg-emerald-700 .subscription-progress-fill { background: #059669; }
        .subscription-mobile-row .subscription-nav-pill.bg-yellow-500 .subscription-progress-fill { background: #eab308; }
        .subscription-mobile-row .subscription-nav-pill.bg-red-600 .subscription-progress-fill,
        .subscription-mobile-row .subscription-nav-pill.bg-red-700 .subscription-progress-fill { background: #dc2626; }
        .subscription-mobile-row .subscription-details-panel {
            position: absolute;
            right: 12px;
            top: calc(100% + 8px);
            width: min(330px, calc(100vw - 24px));
            margin-top: 0;
            box-shadow: 0 18px 45px rgba(0,0,0,.45);
        }
        @media (max-width: 760px) {
            .subscription-nav-pill { min-width: 0; max-width: none; }
            .subscription-nav-title { font-size: 11px; }
        }

        /* notification_window_stretch_effect: soft elastic stretch only when the bell panel opens.
           Transform-only animation keeps the panel geometry and surrounding layout fixed. */
        @keyframes notification-window-stretch-open {
            0% { opacity: 0; transform: scaleX(.955) scaleY(.88); }
            58% { opacity: 1; transform: scaleX(1.012) scaleY(1.022); }
            80% { transform: scaleX(.997) scaleY(.994); }
            100% { opacity: 1; transform: scaleX(1) scaleY(1); }
        }
        .notification-window-stretch-open {
            transform-origin: top right;
            animation: notification-window-stretch-open .28s cubic-bezier(.22,.82,.28,1.08) both;
            will-change: transform, opacity;
        }
        @media (max-width: 767px) {
            .notification-window-stretch-open { transform-origin: top center; }
        }
        @media (prefers-reduced-motion: reduce) {
            .notification-window-stretch-open { animation: none !important; }
        }

        @keyframes bell-ring {
            0%, 20%, 100% { transform: rotate(0deg); }
            5% { transform: rotate(25deg); }
            10% { transform: rotate(-20deg); }
            15% { transform: rotate(10deg); }
        }
        .animate-bell {
            animation: bell-ring 2.5s ease-in-out infinite;
            transform-origin: top center;
        }

        /* desktop_header_action_size_lock: Asset, Animation, AI Movie and Animatics
           must keep the notification bell and Logout control at identical dimensions. */
        .portal-desktop-header-actions {
            min-height: 40px;
        }
        .portal-desktop-notification-bell,
        .portal-desktop-notification-bell > div,
        .portal-desktop-notification-bell > div > button {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            min-height: 40px !important;
            flex: 0 0 40px !important;
            box-sizing: border-box;
        }
        .portal-desktop-notification-bell svg {
            width: 22px !important;
            height: 22px !important;
            min-width: 22px !important;
            min-height: 22px !important;
        }
        .portal-desktop-logout-button {
            width: 84px !important;
            height: 40px !important;
            min-width: 84px !important;
            min-height: 40px !important;
            flex: 0 0 84px !important;
            padding: 0 16px !important;
            box-sizing: border-box;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 16px !important;
            line-height: 1 !important;
            white-space: nowrap;
        }
        .mobile-bottom-nav {
            justify-content: space-evenly !important;
            gap: 0 !important;
            overflow-x: hidden !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
        }
        .mobile-bottom-nav > button {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            height: 100%;
            justify-content: center;
        }
        .mobile-bottom-nav > button span {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @media (max-width: 380px) {
            .mobile-bottom-nav > button span { font-size: 9px; }
            .mobile-bottom-nav svg { width: 20px; height: 20px; }
        }

        /* Fixed v20: Mobile UI optimization */
        :root { --mobile-nav-h: 76px; }
        @media (max-width: 1299px) {
            html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
            body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
            #app { height: 100dvh; width: 100vw; overflow: hidden; }
            #toast-container { bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 10px) !important; right: 10px !important; left: 10px !important; align-items: stretch !important; }
            #transfer-container { bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 10px) !important; left: 10px !important; width: calc(100vw - 20px) !important; }
            .mobile-shell { height: 100dvh !important; padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important; background: #2b2b2b; }
            .mobile-topbar { min-height: 58px; padding: 10px 12px !important; gap: 8px; }
            .mobile-topbar .mobile-user-name { max-width: 42vw; }
            .mobile-project-strip { padding: 10px 12px 12px !important; gap: 10px !important; scroll-snap-type: x proximity; }
            .mobile-project-card { width: 58px !important; scroll-snap-align: start; }
            .mobile-project-thumb { width: 54px !important; height: 54px !important; border-radius: var(--of-radius-xl) !important; }
            .mobile-add-project { width: 54px !important; height: 54px !important; border-radius: var(--of-radius-xl) !important; }
            /* fixed_project_plus_size: keep the project + button identical in Asset / Ai movie / Animation views */
            .project-add-button {
                width: 54px !important;
                height: 54px !important;
                min-width: 54px !important;
                max-width: 54px !important;
                flex: 0 0 54px !important;
                padding: 0 !important;
                border-radius: var(--of-radius-xl) !important;
                font-size: 32px !important;
                line-height: 1 !important;
                transform: none !important;
            }
            .mobile-filterbar { padding: 10px 12px !important; gap: 8px !important; display: grid !important; grid-template-columns: minmax(78px, .75fr) minmax(98px, .95fr) minmax(0, 1.1fr); }
            .mobile-filterbar select, .mobile-filterbar input:not([type="checkbox"]) { width: 100% !important; max-width: none !important; height: 38px; border-radius: var(--of-radius-md) !important; font-size: 13px !important; }
            /* Keep the assignment search field clearly visible on mobile, especially
               in Light mode where the white input otherwise blends into the toolbar. */
            .mobile-filterbar input[type="search"] {
                background: #fff !important;
                color: #111827 !important;
                border: 1px solid #94a3b8 !important;
                box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .05) !important;
            }
            .mobile-filterbar input[type="search"]:focus {
                border-color: #3b82f6 !important;
                box-shadow: 0 0 0 2px rgba(59, 130, 246, .18) !important;
            }
            /* Mobile Asset list boundary: keep the controls in their existing positions,
               but make only the assignment list scroll. Its viewport starts below the
               Add Assignment control, so cards are clipped at that line and can never
               paint into the controls area above it. */
            .mobile-content {
                padding: 10px 10px 0 !important;
                display: flex !important;
                flex-direction: column !important;
                min-height: 0;
                overflow: hidden !important;
            }
            .mobile-add-assignment {
                height: 44px;
                border-radius: var(--of-radius-lg) !important;
                position: relative;
                z-index: 1;
                flex: 0 0 auto;
                background: #3b3b3b !important;
                box-shadow: 0 10px 18px rgba(0,0,0,.28);
                isolation: isolate;
            }
            .mobile-assignment-list-scroll {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
            }
            .mobile-assignment-card { position: relative; z-index: 1; border-radius: var(--of-radius-2xl) !important; margin-bottom: 12px !important; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
            .mobile-assignment-header { padding: 10px !important; gap: 10px; }
            .mobile-assignment-thumb { width: 56px !important; height: 56px !important; border-radius: var(--of-radius-lg) !important; }
            .mobile-assignment-title { font-size: 15px !important; line-height: 1.2 !important; max-width: 48vw; }

            /* Fixed mobile assignment header: Photoshop-style row layout */
            .mobile-assignment-header-layout {
                display: grid;
                grid-template-columns: 64px minmax(55px, 1fr) auto minmax(112px, 170px) 30px;
                align-items: center;
                gap: 12px;
                width: 100%;
            }
            .mobile-assignment-title-actions {
                display: flex;
                align-items: center;
                gap: 8px;
                min-width: 0;
            }
            .mobile-assignment-header-layout.mobile-assignment-header-stage-panel {
                grid-template-columns: 64px minmax(0, 1fr) 30px;
                align-items: start;
            }
            .assignment-identity-stack-mobile {
                padding: 2px 0 1px;
            }
            .assignment-identity-stack-mobile .assignment-identity-topline {
                align-items: center;
                gap: 8px;
            }
            .mobile-assignment-name-category-line {
                min-width: 0;
                flex: 1 1 auto;
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .mobile-assignment-name-category-line .mobile-assignment-title {
                min-width: 0;
                flex: 0 1 auto;
                max-width: none !important;
                padding-top: 0;
            }
            .assignment-identity-stack-mobile .mobile-assignment-category-inline {
                min-width: 0;
                max-width: 84px;
                flex: 0 0 auto;
                align-self: center;
                margin-top: 0;
            }
            .assignment-identity-stack-mobile .mobile-assignment-category-inline > span {
                display: flex !important;
                max-width: 84px;
                margin-top: 0 !important;
            }
            .assignment-identity-stack-mobile .assignment-identity-mandays {
                margin-top: 8px;
            }
            .assignment-identity-stack-mobile [data-mobile-assignment-actions-menu="true"] {
                right: 0;
                left: auto;
            }
            .mobile-assignment-status-pill {
                justify-self: center;
                display: flex;
                align-items: center;
                gap: 6px;
                min-width: 66px;
                white-space: nowrap;
            }
            .mobile-assignment-assignee-cell {
                justify-self: end;
                width: 100%;
                min-width: 0;
            }
            .mobile-assignment-arrow-cell {
                justify-self: end;
            }
            @media (max-width: 430px) {
                .mobile-assignment-header-layout {
                    grid-template-columns: 56px minmax(45px, 1fr) auto minmax(96px, 125px) 28px;
                    gap: 6px;
                }
                .mobile-assignment-title-actions { gap: 6px; }
                .mobile-assignment-status-pill { min-width: 52px; font-size: 10px; }
                .mobile-assignment-assignee-cell select { font-size: 9px !important; }
            }
            .mobile-assignment-body { padding: 10px !important; gap: 10px !important; }
            .mobile-action-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; overflow-x: visible !important; }
            .mobile-action-row > button, .mobile-action-row > div { width: 100% !important; min-height: 38px; padding: 8px 10px !important; border-radius: var(--of-radius-md) !important; font-size: 11px !important; justify-content: center; margin-right: 0 !important; }
            .mobile-bottom-nav { height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important; align-items: stretch !important; background: rgba(31,31,31,.98) !important; backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.08) !important; }
            .mobile-bottom-nav > button { border-radius: var(--of-radius-xl); min-height: 58px; padding: 5px 2px !important; color: #a9b0bb; }
            .mobile-bottom-nav > button:active { transform: scale(.96); background: rgba(255,255,255,.06); }
            .mobile-bottom-nav > button svg { width: 22px !important; height: 22px !important; margin-bottom: 2px; }
            .mobile-bottom-nav > button span { font-size: 10px !important; line-height: 1.1; }
            .mobile-bottom-nav .mobile-nav-active { color: #60a5fa !important; background: rgba(59,130,246,.12); }
            .mobile-page-shell { height: 100dvh !important; max-height: 100dvh !important; padding: 14px !important; border-radius: 0 !important; }
            .mobile-page-header { position: sticky; top: 0; z-index: 20; background: #383838; margin: -14px -14px 12px !important; padding: 14px 48px 12px 14px !important; }
            .mobile-page-scroll { padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 20px); }

            /* Fixed v22: Better mobile Companies page and compact company controls */
            .company-page-shell { padding: 0 !important; overflow: hidden; }
            .company-page-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #383838; padding: calc(10px + env(safe-area-inset-top)) 12px 12px; border-bottom: 1px solid rgba(156,163,175,.28); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
            .company-page-title h2 { font-size: 20px !important; line-height: 1.15; }
            .company-page-title p { display: none; }
            .company-back-btn, .company-close-btn { min-width: 44px; height: 44px; border-radius: var(--of-radius-xl); border: 1px solid rgba(156,163,175,.32); background: rgba(17,17,17,.55); color: white; display: flex; align-items: center; justify-content: center; }
            .company-back-btn span { display: none; }
            .company-content-wrap { padding: 12px; overflow-y: auto; flex: 1; padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 18px); }
            .company-add-form { border-radius: var(--of-radius-panel) !important; padding: 14px !important; margin-bottom: 14px !important; }
            .company-add-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
            .company-form-input { height: 48px !important; border-radius: var(--of-radius-xl) !important; font-size: 15px !important; padding-left: 12px !important; padding-right: 12px !important; }
            .company-submit-btn { height: 50px !important; border-radius: var(--of-radius-xl) !important; font-size: 15px !important; }
            .company-add-open-btn { width: 100%; min-height: 50px; }
            .company-small-close-btn { display: flex; align-items: center; justify-content: center; font-size: 20px; }
            .company-card { border-radius: var(--of-radius-panel) !important; padding: 14px !important; gap: 12px !important; }
            .company-card-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100%; }
            .company-card-actions button { width: 100% !important; min-height: 42px !important; border-radius: var(--of-radius-lg) !important; padding: 8px 6px !important; font-size: 11px !important; }
            .company-expiry-preview { display: block !important; border-radius: var(--of-radius-lg) !important; }
            input, select, textarea, button { font-size: 16px; }
        }
        @media (max-width: 390px) {
            .mobile-bottom-nav > button span { font-size: 9px !important; }
            .mobile-bottom-nav > button svg { width: 20px !important; height: 20px !important; }
            .mobile-assignment-title { max-width: 42vw; }
        }

        @media (min-width: 1300px) {
            .company-page-shell { padding: 0 !important; }
            .company-page-header { display: flex; align-items: center; gap: 14px; background: #383838; padding: 22px 28px; border-bottom: 1px solid rgba(156,163,175,.25); }
            .company-page-title { flex: 1; }
            .company-back-btn { min-width: 42px; height: 42px; padding: 0 14px; gap: 8px; border-radius: var(--of-radius-lg); border: 1px solid rgba(156,163,175,.32); background: #2d2d2d; color: #d1d5db; display: flex; align-items: center; justify-content: center; }
            .company-back-btn span { display: inline; font-size: 13px; font-weight: 700; }
            .company-close-btn { min-width: 42px; height: 42px; border-radius: var(--of-radius-pill); border: 1px solid rgba(156,163,175,.32); background: #2d2d2d; color: #d1d5db; display: flex; align-items: center; justify-content: center; font-size: 20px; }
            .company-content-wrap { padding: 22px 28px; overflow-y: auto; flex: 1; }
            .company-add-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr 160px 180px !important; gap: 14px !important; align-items: end; }
            .company-add-open-btn { width: auto; min-width: 180px; }
            .company-card-actions { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 8px !important; width: auto; justify-content: flex-end; }
            .company-card-actions button { width: auto !important; min-height: 34px !important; font-size: 12px !important; padding: 7px 12px !important; }
            .project-add-button {
                width: 72px !important;
                height: 72px !important;
                min-width: 72px !important;
                max-width: 72px !important;
                flex: 0 0 72px !important;
                border-radius: var(--of-radius-lg) !important;
                font-size: 38px !important;
            }
        }

        /* dashboard_stage_status_accents: stage top accents now represent workflow status */
        .assignment-stage-track {
            display: flex;
            align-items: center;
            gap: 0;
            max-width: 100%;
            overflow-x: auto;
            padding: 4px 3px 6px;
            scrollbar-width: none;
            overscroll-behavior-inline: contain;
        }
        .assignment-stage-track::-webkit-scrollbar { display: none; }
        .assignment-stage-step {
            --stage-status-accent: transparent;
            /* Keep the selected-stage connector tied to the stage's status color. */
            --stage-selection-accent: var(--stage-state);
            --stage-state: #6b7280;
            appearance: none;
            position: relative;
            isolation: isolate;
            flex: 0 0 auto;
            width: 88px;
            min-width: 88px;
            height: 50px;
            padding: 7px 9px 6px;
            border: 1px solid #565656;
            border-radius: var(--of-radius-sm);
            background: #303030;
            color: #e5e7eb;
            display: grid;
            grid-template-rows: 1fr 9px;
            align-items: center;
            gap: 3px;
            overflow: hidden;
            box-shadow: inset 0 3px 0 var(--stage-status-accent);
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: background-color .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
        }
        .assignment-stage-step:hover {
            background: #393939;
            border-color: #818181;
            transform: translateY(-2px);
        }
        .assignment-stage-step:focus-visible {
            outline: 2px solid #93c5fd;
            outline-offset: 2px;
        }
        .assignment-stage-slide-state-dot {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 7px;
            height: 7px;
            border: 2px solid rgba(255, 255, 255, .18);
            border-radius: var(--of-radius-pill);
            background: var(--stage-state);
            flex: 0 0 auto;
        }
        /* dashboard_active_stage_dot_pulse: pulse only the status circle for graph-active stages. */
        .assignment-stage-active .assignment-stage-slide-state-dot {
            animation: assignment-stage-active-dot-pulse 1.35s ease-in-out infinite;
            will-change: opacity, box-shadow, transform;
        }
        @keyframes assignment-stage-active-dot-pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
                box-shadow: 0 0 0 0 var(--stage-state);
            }
            50% {
                opacity: .48;
                transform: scale(.82);
                box-shadow: 0 0 0 5px transparent;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .assignment-stage-active .assignment-stage-slide-state-dot { animation: none; }
        }
        .assignment-stage-slide-name {
            min-width: 0;
            overflow: hidden;
            color: #f3f4f6;
            font-size: 11px;
            line-height: 1.05;
            font-weight: 900;
            letter-spacing: .01em;
            padding-right: 13px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .assignment-stage-slide-meta {
            min-width: 0;
            overflow: hidden;
            color: #aaaeb5;
            font-size: 6.5px;
            line-height: 1;
            font-weight: 800;
            letter-spacing: .055em;
            text-overflow: ellipsis;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .assignment-stage-connector {
            width: 18px;
            min-width: 18px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #686868;
            font-size: 19px;
            line-height: 1;
            font-weight: 300;
            user-select: none;
        }
        .assignment-stage-connector.is-complete { color: #4ade80; }

        .assignment-stage-state-locked {
            --stage-state: #6b7280;
            --stage-status-accent: transparent;
            background: #292929;
            border-color: #444;
            opacity: .6;
        }
        .assignment-stage-state-locked .assignment-stage-slide-meta { color: #737780; }
        .assignment-stage-state-ready { --stage-state: #6b7280; --stage-status-accent: transparent; }
        .assignment-stage-state-assigned { --stage-state: #9ca3af; --stage-status-accent: transparent; }
        .assignment-stage-state-hold { --stage-state: #6b7280; --stage-status-accent: #9ca3af; }
        .assignment-stage-state-wip { --stage-state: #facc15; --stage-status-accent: #facc15; }
        .assignment-stage-state-published { --stage-state: #fb923c; --stage-status-accent: #fb923c; }
        .assignment-stage-state-retake { --stage-state: #ef4444; --stage-status-accent: #ef4444; }
        .assignment-stage-state-approved { --stage-state: #22c55e; --stage-status-accent: #22c55e; }

        .assignment-stage-owner-unassigned { border-style: dashed; }
        .assignment-stage-owner-assigned .assignment-stage-slide-meta { color: #aaaeb5; }
        .assignment-stage-owned-by-you .assignment-stage-slide-meta { color: #d1d5db; }
        .assignment-stage-selected {
            z-index: 2;
            border-color: rgba(255, 255, 255, .9);
            outline: 2px solid rgba(255, 255, 255, .68);
            outline-offset: 2px;
            transform: translateY(-2px);
        }
        .assignment-stage-selected:hover { transform: translateY(-2px); }

        @media (max-width: 760px) {
            /* dashboard_mobile_stage_spaced_arrows: compact cards with a small arrow gap */
            .assignment-stage-track {
                gap: 0;
                padding-inline: 3px;
            }
            .assignment-stage-step {
                width: 52px;
                min-width: 52px;
                height: 46px;
                padding: 6px 5px 5px;
                grid-template-rows: 1fr 8px;
                border-radius: 6px;
            }
            .assignment-stage-slide-state-dot {
                top: 6px;
                right: 5px;
                width: 6px;
                height: 6px;
            }
            .assignment-stage-slide-name {
                padding-right: 8px;
                font-size: 10px;
            }
            .assignment-stage-slide-meta {
                font-size: 6px;
                letter-spacing: .025em;
            }
            .assignment-stage-connector {
                display: flex;
                flex: 0 0 8px;
                width: 8px;
                min-width: 8px;
                height: 46px;
                font-size: 13px;
            }
        }

        /* dashboard_selected_stage_panel: the selected slide owns the workspace directly underneath it */
        .assignment-desktop-row {
            display: grid;
            grid-template-columns: 112px minmax(185px, 240px) minmax(0, 1fr) 38px;
            min-height: 154px;
            align-items: stretch;
        }
        .assignment-desktop-thumb { min-height: 154px; }
        .assignment-desktop-summary { min-width: 0; }
        /* dashboard_assignment_identity_stack: name, options, category and total read top-to-bottom */
        .assignment-identity-stack {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
        }
        .assignment-desktop-summary.assignment-identity-stack {
            padding-top: 22px;
            padding-bottom: 18px;
        }
        .assignment-identity-topline {
            width: 100%;
            min-width: 0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }
        .assignment-identity-name {
            min-width: 0;
            flex: 1 1 auto;
        }
        .assignment-identity-category {
            align-self: flex-start;
            max-width: 100%;
            min-width: 0;
            margin-top: 14px;
        }
        .assignment-identity-category > span { margin-top: 0 !important; }
        .assignment-identity-mandays {
            align-self: flex-start;
            max-width: 100%;
            min-width: 0;
            margin-top: 14px;
        }
        .assignment-identity-mandays > span { margin-top: 0 !important; }
        .assignment-stage-workspace-shell {
            min-width: 0;
            padding: 10px 12px 9px;
            border-left: 1px solid rgba(107, 114, 128, .5);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .assignment-stage-track-wrap { min-width: 0; }
        .assignment-stage-workspace-shell .assignment-stage-track,
        .mobile-assignment-body .assignment-stage-track { padding-bottom: 10px; }
        .assignment-stage-step { overflow: visible; }
        .assignment-stage-step > * { min-width: 0; }
        .assignment-stage-selected::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -11px;
            width: 2px;
            height: 11px;
            background: var(--stage-selection-accent);
            transform: translateX(-50%);
            pointer-events: none;
        }
        .assignment-selected-stage-panel {
            --stage-state: #6b7280;
            /* Match the options-panel top edge/pointer to the selected stage color. */
            --stage-selection-accent: var(--stage-state);
            position: relative;
            display: grid;
            grid-template-columns: minmax(260px, 440px) 160px minmax(180px, 230px) minmax(300px, 1fr);
            align-items: stretch;
            margin-top: 0;
            min-height: 62px;
            overflow: visible;
            border: 1px solid #555;
            border-top: 2px solid var(--stage-selection-accent);
            border-radius: var(--of-radius-md);
            background: #292929;
            box-shadow: var(--of-shadow-dark-top-highlight-subtle);
            cursor: default;
        }
        .assignment-selected-stage-panel.assignment-selected-stage-panel-no-assignee {
            grid-template-columns: minmax(260px, 440px) 160px minmax(300px, 1fr);
        }
        .assignment-selected-stage-pointer {
            position: absolute;
            z-index: 2;
            left: calc(var(--selected-stage-anchor) - 8px);
            top: -9px;
            width: 16px;
            height: 16px;
            border-left: 2px solid var(--stage-selection-accent);
            border-top: 2px solid var(--stage-selection-accent);
            background: #292929;
            transform: rotate(45deg);
            pointer-events: none;
        }
        .assignment-selected-stage-cell {
            position: relative;
            min-width: 0;
            padding: 8px 11px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
        }
        .assignment-selected-stage-cell + .assignment-selected-stage-cell { border-left: 1px solid rgba(107,114,128,.34); }
        .assignment-selected-stage-label {
            color: #7f858f;
            font-size: 7px;
            line-height: 1;
            font-weight: 900;
            letter-spacing: .12em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .assignment-selected-stage-progress-body {
            width: 100%;
            max-width: 420px;
            min-width: 0;
        }
        .assignment-selected-stage-progress-body > div { width: 100%; }
        .assignment-selected-stage-status-body {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            color: #e5e7eb;
            font-size: 11px;
            white-space: nowrap;
        }
        .assignment-selected-stage-status-body strong {
            min-width: max-content;
            overflow: visible;
            text-overflow: clip;
            white-space: nowrap;
        }
        .assignment-selected-stage-status-dot {
            width: 8px;
            height: 8px;
            border: 2px solid rgba(255,255,255,.18);
            border-radius: var(--of-radius-pill);
            background: var(--stage-state);
            flex: 0 0 auto;
        }
        .assignment-selected-stage-play {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .assignment-selected-stage-play button {
            width: 26px;
            height: 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #565656;
            border-radius: var(--of-radius-control-compact);
            background: #202020;
        }
        .assignment-selected-stage-assignee { min-width: 0; }
        .assignment-stage-assignee-control { max-width: none !important; min-width: 0 !important; }
        .assignment-selected-stage-assignee-readonly {
            display: flex;
            align-items: center;
            min-width: 0;
            gap: 7px;
            color: #d1d5db;
            font-size: 10px;
            font-weight: 700;
        }
        .assignment-selected-stage-assignee-readonly span:last-child {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .assignment-selected-stage-avatar {
            width: 24px;
            height: 24px;
            border: 1px solid #565656;
            border-radius: var(--of-radius-pill);
            background: #202020;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            color: #9ca3af;
            font-size: 11px;
        }
        .assignment-selected-stage-actions { min-width: 0; }
        .assignment-selected-stage-actions-body {
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .assignment-selected-stage-actions-body::-webkit-scrollbar { display: none; }
        .assignment-selected-stage-actions-body > * { flex: 0 0 auto; }
        .assignment-selected-stage-empty {
            color: #737780;
            font-size: 9px;
            font-style: italic;
            white-space: nowrap;
        }
        .assignment-selected-stage-state-locked { --stage-state: #6b7280; }
        .assignment-selected-stage-state-ready { --stage-state: #6b7280; }
        .assignment-selected-stage-state-assigned { --stage-state: #9ca3af; }
        .assignment-selected-stage-state-hold { --stage-state: #6b7280; }
        .assignment-selected-stage-state-wip { --stage-state: #facc15; }
        .assignment-selected-stage-state-published { --stage-state: #fb923c; }
        .assignment-selected-stage-state-retake { --stage-state: #ef4444; }
        .assignment-selected-stage-state-approved { --stage-state: #22c55e; }

        @media (max-width: 1500px) and (min-width: 761px) {
            .assignment-desktop-row { grid-template-columns: 96px minmax(160px, 205px) minmax(0, 1fr) 36px; }
            .assignment-desktop-thumb { min-height: 196px; }
            .assignment-selected-stage-panel {
                grid-template-columns: minmax(180px, 1fr) 160px minmax(180px, 240px);
            }
            .assignment-selected-stage-panel.assignment-selected-stage-panel-no-assignee {
                grid-template-columns: minmax(180px, 1fr) 160px;
            }
            .assignment-selected-stage-actions {
                grid-column: 1 / -1;
                border-left: 0 !important;
                border-top: 1px solid rgba(107,114,128,.34);
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            .assignment-selected-stage-actions-body { flex: 1; }
        }

        @media (max-width: 760px) {
            .mobile-assignment-header-stage-panel {
                grid-template-columns: 56px minmax(0, 1fr) 30px !important;
                align-items: start;
            }
            .assignment-selected-stage-panel {
                grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
                min-height: 0;
                margin-top: 0;
            }
            .assignment-selected-stage-panel.assignment-selected-stage-panel-no-assignee {
                grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
            }
            .assignment-selected-stage-pointer { left: calc(var(--selected-stage-anchor-mobile) - 8px); }
            .assignment-selected-stage-cell { padding: 9px 10px; }
            .assignment-selected-stage-status {
                border-left: 1px solid rgba(107,114,128,.34) !important;
            }
            .assignment-selected-stage-assignee,
            .assignment-selected-stage-actions {
                grid-column: 1 / -1;
                border-left: 0 !important;
                border-top: 1px solid rgba(107,114,128,.34);
            }
            .assignment-selected-stage-actions-body {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: 100%;
                gap: 7px;
                overflow: visible;
            }
            .assignment-selected-stage-panel.has-mobile-review-action .assignment-selected-stage-actions-body {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .assignment-selected-stage-actions-body > button,
            .assignment-selected-stage-actions-body > div {
                width: 100% !important;
                min-height: 36px;
                justify-content: center;
                margin: 0 !important;
            }
            .assignment-selected-stage-progress { order: 1; }
            .assignment-selected-stage-status { order: 2; }
            .assignment-selected-stage-assignee { order: 3; }
            .assignment-selected-stage-actions { order: 4; }
        }

        /* fixed_workflow_main_canvas_preview: show selected saved workflow in the main canvas without applying it */
        .assignment-workflow-preview-active svg {
            pointer-events: auto;
            cursor: grab;
            filter: saturate(1.15) brightness(1.04);
        }
        .assignment-workflow-preview-active svg:active { cursor: grabbing; }
        .assignment-workflow-preview-active::after {
            content: '';
            position: absolute;
            inset: 0;
            border: 2px solid rgba(96, 165, 250, 0.42);
            border-radius: 0.75rem;
            pointer-events: none;
            box-shadow: inset 0 0 35px rgba(37, 99, 235, 0.12);
        }

        /* fixed_mobile_workflow_sync: mobile optimized assignment node pipeline editor */
        .assignment-pipeline-modal { overscroll-behavior: contain; }
        .assignment-pipeline-canvas svg { width: 100%; height: 100%; }
        .assignment-workflow-card button, .assignment-quick-stage-row button { touch-action: manipulation; }
        @media (max-width: 1023px) {
            .assignment-pipeline-modal {
                padding: 10px !important;
                height: 100dvh !important;
                max-height: 100dvh !important;
            }
            /* fixed_mobile_pipeline_close_icon_overlap: keep the close X out of the stage/node button hit area on mobile */
            .assignment-pipeline-close-btn {
                position: relative !important;
                top: auto !important;
                right: auto !important;
                align-self: flex-end !important;
                flex: 0 0 auto !important;
                width: 42px !important;
                height: 42px !important;
                min-width: 42px !important;
                min-height: 42px !important;
                margin: 0 0 8px auto !important;
                z-index: 5 !important;
                touch-action: manipulation;
            }
            .assignment-pipeline-modal > .flex.items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0.pr-12 {
                padding-right: 0 !important;
            }
            .assignment-pipeline-main {
                display: flex !important;
                flex-direction: column !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                padding-right: 2px;
                -webkit-overflow-scrolling: touch;
            }
            .assignment-pipeline-toolbar {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px !important;
            }
            .assignment-pipeline-toolbar input {
                grid-column: 1 / -1;
                width: 100% !important;
                min-width: 0 !important;
                min-height: 44px;
                font-size: 16px !important;
            }
            .assignment-pipeline-toolbar button {
                width: 100% !important;
                min-height: 42px;
                padding: 8px 6px !important;
                border-radius: var(--of-radius-lg) !important;
                font-size: 10.5px !important;
                line-height: 1.15 !important;
            }

            /* fixed_mobile_pipeline_node_delete_overlap: the reusable-node delete X was being stretched by the mobile toolbar button rule.
               Hide it on mobile so it cannot sit over the stage/node buttons or steal taps. Desktop delete stays unchanged. */
            .assignment-pipeline-toolbar .assignment-node-tray-remove,
            .assignment-pipeline-bottom-toolbar .assignment-node-tray-remove,
            .assignment-node-tray-item .assignment-node-tray-remove,
            .assignment-node-tray-item:hover .assignment-node-tray-remove {
                display: none !important;
                pointer-events: none !important;
                position: absolute !important;
                top: -6px !important;
                right: -6px !important;
                width: 20px !important;
                min-width: 20px !important;
                max-width: 20px !important;
                height: 20px !important;
                min-height: 20px !important;
                max-height: 20px !important;
                padding: 0 !important;
                border-radius: var(--of-radius-pill) !important;
                font-size: 13px !important;
                line-height: 1 !important;
                z-index: 4 !important;
            }
            .assignment-pipeline-canvas {
                /* fixed_pipeline_mobile_canvas_bigger: use the empty mobile area for the node graph instead of leaving a large blank gap */
                flex: 1 1 auto !important;
                height: clamp(420px, 58dvh, 680px) !important;
                min-height: 420px !important;
                max-height: none !important;
                border-radius: var(--of-radius-2xl) !important;
            }
            .assignment-pipeline-help {
                display: none !important;
            }
            .assignment-pipeline-side {
                display: none !important;
            }
            .assignment-pipeline-mobile-actions {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px !important;
                width: 100%;
            }
            .assignment-pipeline-mobile-actions button {
                min-height: 46px;
                border-radius: var(--of-radius-lg) !important;
                font-size: 12px !important;
            }
            .assignment-pipeline-desktop-note {
                display: none !important;
            }
            .assignment-quick-stage-row {
                min-height: 46px;
            }
            .assignment-quick-stage-row button,
            .assignment-workflow-card button {
                min-height: 40px;
                font-size: 11px !important;
            }
            .assignment-workflow-card {
                padding: 14px !important;
                border-radius: var(--of-radius-2xl) !important;
            }
            .assignment-workflow-actions {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 8px !important;
            }
            .assignment-pipeline-footer {
                display: none !important;
            }

            /* fixed_pipeline_mobile_buttons_bottom: use mobile empty space by pushing toolbar actions to lower area */
            .assignment-pipeline-main > .flex.flex-col.min-h-0 {
                flex: 1 1 auto !important;
                min-height: 100% !important;
            }
            .assignment-pipeline-bottom-toolbar {
                margin-top: auto !important;
                padding-top: 12px !important;
            }
            .assignment-pipeline-bottom-toolbar button:nth-last-child(-n+2) {
                min-height: 48px !important;
                font-size: 11.5px !important;
            }
            .assignment-pipeline-footer-actions {
                width: 100%;
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px !important;
            }
            .assignment-pipeline-footer-actions button {
                min-height: 46px;
                border-radius: var(--of-radius-lg) !important;
            }
        }
        @media (max-width: 1023px) and (max-height: 740px) {
            .assignment-pipeline-canvas {
                height: clamp(330px, 48dvh, 480px) !important;
                min-height: 330px !important;
                max-height: none !important;
            }
            .assignment-pipeline-toolbar input { min-height: 42px; }
            .assignment-pipeline-toolbar button { min-height: 40px; padding-top: 8px !important; padding-bottom: 8px !important; }
        }

        /* fixed_new_assignment_create_button_visible: prevent sticky submit button from being clipped by the scroll container */
        .new-assignment-modal-fit {
            padding-bottom: 1.25rem !important;
            max-height: calc(100dvh - 1rem) !important;
        }
        .new-assignment-create-submit {
            flex: 0 0 auto;
            min-height: 42px;
        }

        /* fixed_new_assignment_window_height: taller Create Assignment window so the submit button fits inside */
        @media (min-width: 768px) {
            .new-assignment-modal-fit {
                max-height: min(1080px, calc(100dvh - 24px)) !important;
                width: min(680px, calc(100vw - 32px)) !important;
            }
        }
        @media (min-width: 768px) and (max-height: 900px) {
            .new-assignment-modal-fit {
                padding: 1rem 1.25rem !important;
                gap: 0.7rem !important;
            }
            .new-assignment-modal-fit h2 {
                font-size: 1.35rem !important;
                line-height: 1.2 !important;
            }
            .new-assignment-modal-fit label {
                margin-bottom: 0.35rem !important;
            }
            .new-assignment-modal-fit #new-assignment-name,
            .new-assignment-modal-fit #new-assignment-mandays,
            .new-assignment-modal-fit #new-shot-number,
            .new-assignment-modal-fit #new-assignment-assignee,
            .new-assignment-modal-fit input[type="text"],
            .new-assignment-modal-fit input[type="number"],
            .new-assignment-modal-fit select {
                padding-top: 0.55rem !important;
                padding-bottom: 0.55rem !important;
            }
            .new-assignment-modal-fit .new-assignment-thumb-upload {
                width: 3.5rem !important;
                height: 3.5rem !important;
                border-radius: 0.9rem !important;
            }
            .new-assignment-modal-fit .new-assignment-input-box {
                padding: 0.85rem !important;
            }
            .new-assignment-modal-fit .new-assignment-input-box .text-center.text-gray-500 {
                margin-top: 0.45rem !important;
                margin-bottom: 0.45rem !important;
            }
            .new-assignment-modal-fit .new-assignment-create-submit {
                padding-top: 0.7rem !important;
                padding-bottom: 0.7rem !important;
                margin-top: 0 !important;
                margin-bottom: 0.35rem !important;
                position: sticky;
                bottom: 0.35rem;
                z-index: 25;
                box-shadow: 0 -10px 24px rgba(56, 56, 56, 0.95);
            }
        }

        @media (max-width: 340px) {
            .mobile-bottom-nav > button span { display: none; }
            .mobile-bottom-nav > button svg { margin-bottom: 0; }
            .mobile-bottom-nav > button { min-height: 52px; }
            :root { --mobile-nav-h: 64px; }
        }

        /* fixed_pipeline_bottom_plus_restore: bottom node tray for reusable pipeline nodes */
        .assignment-node-tray-list {
            min-height: 44px;
            align-items: center;
            flex: 0 1 auto;
            max-width: calc(100% - 360px);
        }
        .assignment-node-tray-spacer { min-width: 12px; }
        .assignment-node-tray-item {
            position: relative;
            min-width: 82px;
            max-width: 170px;
        }
        .assignment-node-tray-item-main {
            width: 100%;
            min-height: 42px;
            padding: 0 16px;
            border-radius: var(--of-radius-md);
            background: #2f3135;
            border: 1px solid #4b5563;
            color: #ffffff;
            font-weight: 900;
            font-size: 16px;
            line-height: 1;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 14px rgba(0,0,0,0.2);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .assignment-node-tray-item-main:hover { background: #3a3d43; border-color: #64748b; }
        .assignment-node-tray-remove {
            position: absolute;
            top: -7px;
            right: -7px;
            width: 20px;
            height: 20px;
            border-radius: var(--of-radius-pill);
            background: #ef4444;
            color: #fff;
            border: 1px solid rgba(255,255,255,.45);
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 4px 10px rgba(0,0,0,.35);
        }
        .assignment-node-tray-item:hover .assignment-node-tray-remove { display: flex; }
        .assignment-node-tray-add {
            min-width: 54px;
            min-height: 42px;
            border-radius: var(--of-radius-md);
            background: #2f3135;
            border: 1px solid #4b5563;
            color: #93c5fd;
            font-size: 24px;
            font-weight: 900;
            line-height: 1;
        }
        .assignment-node-tray-add:hover { background: #3a3d43; border-color: #60a5fa; color: #bfdbfe; }
        @media (max-width: 1023px) {
            .assignment-node-tray-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: none; grid-column: 1 / -1; }
            .assignment-node-tray-item { min-width: 0; max-width: none; width: 100%; }
            .assignment-node-tray-item-main { min-height: 44px; font-size: 12px; padding: 0 10px; }
            .assignment-node-tray-add { width: 100%; min-height: 48px; font-size: 22px; }
        }

/* =========================================================
   Sidebar Professional Buttons Update
   Scope: only left sidebar navigation buttons.
   ========================================================= */
@media (min-width: 768px) {
    /* Left sidebar shell */
    aside,
    nav[class*="w-28"],
    nav[class*="md:w-32"],
    aside[class*="w-28"],
    aside[class*="md:w-32"] {
        background: linear-gradient(180deg, #343434 0%, #2f2f2f 100%) !important;
        border-right: 1px solid rgba(148, 163, 184, 0.18) !important;
    }

    /* Main sidebar nav buttons: Pipeline / Team / Records / Monitor / Companies / Activity */
    aside button,
    nav[class*="w-28"] button,
    nav[class*="md:w-32"] button,
    aside[class*="w-28"] button,
    aside[class*="md:w-32"] button {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: var(--of-radius-control-large) !important;
        background: linear-gradient(135deg, rgba(55, 65, 81, 0.95), rgba(31, 41, 55, 0.92)) !important;
        border: 1px solid rgba(148, 163, 184, 0.24) !important;
        color: #f8fafc !important;
        font-weight: 800 !important;
        font-size: 13px !important;
        letter-spacing: 0.01em !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.18) !important;
        transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease !important;
    }

    aside button:hover,
    nav[class*="w-28"] button:hover,
    nav[class*="md:w-32"] button:hover,
    aside[class*="w-28"] button:hover,
    aside[class*="md:w-32"] button:hover {
        transform: translateY(-1px) !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(30, 41, 59, 0.98)) !important;
        border-color: rgba(96, 165, 250, 0.55) !important;
        color: #ffffff !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 26px rgba(37, 99, 235, 0.18) !important;
    }

    aside button:active,
    nav[class*="w-28"] button:active,
    nav[class*="md:w-32"] button:active,
    aside[class*="w-28"] button:active,
    aside[class*="md:w-32"] button:active {
        transform: translateY(0) !important;
    }

    /* Active/selected project thumbnail should still read clearly */
    aside .ring-2,
    nav[class*="w-28"] .ring-2,
    nav[class*="md:w-32"] .ring-2 {
        box-shadow: 0 0 0 2px rgba(59,130,246,0.95), 0 12px 26px rgba(59,130,246,0.25) !important;
    }

    /* Keep small circular edit/upload buttons compact, not stretched by the sidebar button rule */
    aside button.absolute,
    nav[class*="w-28"] button.absolute,
    nav[class*="md:w-32"] button.absolute,
    aside button[class*="rounded-full"],
    nav[class*="w-28"] button[class*="rounded-full"],
    nav[class*="md:w-32"] button[class*="rounded-full"] {
        width: auto !important;
        min-height: 0 !important;
        border-radius: var(--of-radius-pill) !important;
        padding: inherit;
    }

    /* Add a subtle professional section separation for bottom root-admin buttons */
    aside > div:last-child button,
    nav[class*="w-28"] > div:last-child button,
    nav[class*="md:w-32"] > div:last-child button {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(17, 24, 39, 0.95)) !important;
    }
}

/* =========================================================
   Pipeline Asset Category List Height Fix
   Makes the category list use the available empty space in
   the pipeline preset panel instead of staying very short.
   ========================================================= */
.pipeline-asset-category-list {
    min-height: clamp(260px, 48vh, 560px) !important;
    max-height: clamp(300px, 58vh, 680px) !important;
    padding-bottom: 8px !important;
}
@media (max-width: 768px) {
    .pipeline-asset-category-list {
        min-height: 220px !important;
        max-height: 46vh !important;
    }
}
@media (max-height: 760px) and (min-width: 769px) {
    .pipeline-asset-category-list {
        min-height: 220px !important;
        max-height: 44vh !important;
    }
}

/* =========================================================
   Upload Progress Overlay
   Keep file upload percentage visible above full-screen workspaces
   such as Animation > Animatics (modal container uses z-index 1000).
   ========================================================= */
#transfer-container {
    z-index: 2600 !important;
}

/* =========================================================
   Animation Animatics Fullscreen Window
   ========================================================= */
.animation-animatics-modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}
@media (max-width: 1023px) {
    .animation-animatics-modal {
        overflow: hidden !important;
    }
    .animation-animatics-modal aside {
        max-height: none !important;
        border-bottom: 0 !important;
    }
    .animation-animatics-mobile-list {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .animation-animatics-mobile-actions button {
        min-width: 0;
        touch-action: manipulation;
    }
}

/* Mobile Animatics player: MX-style gestures with a visible seek bar only. */
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-player-controls {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#animation-animatics-mobile-player-overlay #animation-animatics-mobile-gesture-surface {
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
}
#animation-animatics-mobile-player-overlay .animation-animatics-control-slider {
    appearance: none;
    -webkit-appearance: none;
    height: 24px;
    background: transparent;
    touch-action: pan-x;
    accent-color: var(--of-project-accent);
}
#animation-animatics-mobile-player-overlay .animation-animatics-control-slider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: var(--of-radius-pill);
    background: #3f3f46;
}
#animation-animatics-mobile-player-overlay .animation-animatics-control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7.5px;
    border-radius: var(--of-radius-pill);
    border: 2px solid #0f172a;
    background: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}
#animation-animatics-mobile-player-overlay .animation-animatics-control-slider::-moz-range-track {
    height: 5px;
    border-radius: var(--of-radius-pill);
    background: #3f3f46;
}
#animation-animatics-mobile-player-overlay .animation-animatics-control-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: var(--of-radius-pill);
    border: 2px solid #0f172a;
    background: #60a5fa;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.96);
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    transition: opacity .12s ease, transform .12s ease;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-meter {
    display: none;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-copy {
    min-width: 112px;
    max-width: 72vw;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--of-radius-xl);
    background: rgba(12,12,14,.62);
    box-shadow: 0 12px 38px rgba(0,0,0,.34);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    color: #151515;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-icon svg {
    width: 29px;
    height: 29px;
    fill: currentColor;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-label {
    color: #a1a1aa;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-value {
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* MX-style vertical glass meter for mobile brightness / volume gestures. */
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"],
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] {
    width: 22px;
    height: 226px;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] {
    left: 26px !important;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] {
    left: calc(100% - 26px) !important;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] .animation-animatics-mobile-gesture-meter,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] .animation-animatics-mobile-gesture-meter {
    position: absolute;
    inset: 0 0 0 0;
    display: block;
    overflow: hidden;
    border-radius: var(--of-radius-xl);
    border: 1.5px solid rgba(255,255,255,.20);
    background: rgba(72,79,84,.10);
    box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.025);
    backdrop-filter: blur(7px) saturate(108%);
    -webkit-backdrop-filter: blur(7px) saturate(108%);
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-level-zone {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 48px;
    overflow: hidden;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--gesture-level, 0%);
    background: rgba(255,255,255,.46);
    box-shadow: 0 -6px 14px rgba(255,255,255,.035);
    transition: height .04s linear;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-icon-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] .animation-animatics-mobile-gesture-copy,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] .animation-animatics-mobile-gesture-copy {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    min-width: 0;
    max-width: none;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: var(--of-radius-pill);
    background: rgba(0,0,0,.15);
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] .animation-animatics-mobile-gesture-label,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] .animation-animatics-mobile-gesture-label {
    display: none;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] .animation-animatics-mobile-gesture-value,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] .animation-animatics-mobile-gesture-value {
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 8px;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] .animation-animatics-mobile-gesture-copy,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] .animation-animatics-mobile-gesture-copy {
    top: 8px;
    padding: 3px 2px;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] .animation-animatics-mobile-gesture-icon,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] .animation-animatics-mobile-gesture-icon {
    width: 18px;
    height: 18px;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="brightness"] .animation-animatics-mobile-gesture-icon svg,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="volume"] .animation-animatics-mobile-gesture-icon svg {
    width: 18px;
    height: 18px;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="seek"] .animation-animatics-mobile-gesture-icon-cap,
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="seek"] .animation-animatics-mobile-gesture-icon {
    display: none;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-gesture-hud[data-mode="seek"] .animation-animatics-mobile-gesture-copy {
    border-color: rgba(255,255,255,.09);
    background: rgba(12,12,14,.20);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* Selected episode should be unmistakable in the Animatics list. */
.animation-animatics-episode-card {
    position: relative;
    isolation: isolate;
}
.animation-animatics-episode-card.is-selected {
    border-color: #3b82f6 !important;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.30), rgba(30, 64, 175, 0.12)) !important;
    box-shadow: inset 4px 0 0 #3b82f6, 0 0 0 1px rgba(96, 165, 250, 0.42), 0 0 18px rgba(37, 99, 235, 0.20) !important;
}
.animation-animatics-episode-card.is-selected .animation-animatics-episode-thumb {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.30) !important;
}
.animation-animatics-episode-card.is-selected::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: var(--of-radius-pill);
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    pointer-events: none;
}

/* =========================================================
   Sidebar Button Alignment Fix
   Keeps all left-side navigation buttons neatly aligned,
   same width, same height, centered text, and consistent gaps.
   ========================================================= */
@media (min-width: 768px) {
    #app > div.w-20.md\:w-28,
    #app > div[class*="w-20"][class*="md:w-28"] {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
        align-items: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    #app > div.w-20.md\:w-28 > .w-full,
    #app > div[class*="w-20"][class*="md:w-28"] > .w-full {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #app > div.w-20.md\:w-28 button,
    #app > div[class*="w-20"][class*="md:w-28"] button {
        width: 96px !important;
        min-height: 42px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        border-radius: var(--of-radius-sm) !important;
        box-sizing: border-box !important;
    }

    #app > div.w-20.md\:w-28 .space-y-2,
    #app > div[class*="w-20"][class*="md:w-28"] .space-y-2 {
        width: 100% !important;
    }

    #app > div.w-20.md\:w-28 > div:not(.relative),
    #app > div[class*="w-20"][class*="md:w-28"] > div:not(.relative) {
        display: flex !important;
        justify-content: center !important;
    }

    #app > div.w-20.md\:w-28 .mt-auto,
    #app > div[class*="w-20"][class*="md:w-28"] .mt-auto {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #app > div.w-20.md\:w-28 .mt-auto button,
    #app > div[class*="w-20"][class*="md:w-28"] .mt-auto button {
        width: 96px !important;
    }
}

@media (max-width: 767px) {
    #app > div.w-20,
    #app > div[class*="w-20"] {
        align-items: center !important;
    }
    #app > div.w-20 button,
    #app > div[class*="w-20"] button {
        text-align: center !important;
        line-height: 1.12 !important;
    }
}

/* =========================================================
   Root Admin Bottom Buttons Vertical Fix
   Companies / Activity must stay stacked vertically at bottom.
   ========================================================= */
@media (min-width: 768px) {
    #app > div.w-20.md\:w-28 > .mt-auto.order-last,
    #app > div[class*="w-20"][class*="md:w-28"] > .mt-auto.order-last,
    #app > div.w-20.md\:w-28 > div.mt-auto,
    #app > div[class*="w-20"][class*="md:w-28"] > div.mt-auto {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #app > div.w-20.md\:w-28 > .mt-auto.order-last button,
    #app > div[class*="w-20"][class*="md:w-28"] > .mt-auto.order-last button,
    #app > div.w-20.md\:w-28 > div.mt-auto button,
    #app > div[class*="w-20"][class*="md:w-28"] > div.mt-auto button {
        width: 96px !important;
        min-height: 42px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Records Monitor: All People shows Total + settled/received + pending directional amounts. */
.records-monitor-stats-grid-all-people {
    grid-template-columns: minmax(110px, .55fr) minmax(110px, .55fr) minmax(110px, .55fr) minmax(360px, 2.65fr) minmax(360px, 2.65fr) !important;
}

/* Records Monitor quick filters: Visible / Pending / Settled act like buttons. */
.records-monitor-stat-filter {
    appearance: none;
    cursor: pointer;
    font: inherit;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, filter .16s ease;
}

.records-monitor-stat-filter:hover {
    filter: brightness(1.08);
    border-color: rgba(96, 165, 250, .48) !important;
}

.records-monitor-stat-filter:active {
    transform: translateY(1px);
}

.records-monitor-stat-filter:focus-visible {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .55);
}

.records-monitor-stat-filter-active {
    border-color: rgba(59, 130, 246, .9) !important;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .38), 0 0 0 1px rgba(59, 130, 246, .12);
}

/* Keep Total / Received(or Paid) / Pending on one horizontal line. */
.records-monitor-stat-direction {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.records-monitor-stat-direction-half {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.records-monitor-stat-direction-half .records-monitor-stat-label,
.records-monitor-stat-direction-half .records-monitor-stat-value {
    white-space: nowrap !important;
}

/* =========================================================
   Mobile Records Monitor Edit View
   Converts the unusable wide table into stacked editable cards.
   ========================================================= */
@media (max-width: 767px) {
    .records-monitor-view {
        gap: 12px !important;
        padding-bottom: 90px !important;
    }

    .records-monitor-view > div:first-child,
    #records-monitor-stats-container > div {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .records-monitor-view > div:first-child > div,
    #records-monitor-stats-container > div > div {
        padding: 12px !important;
        border-radius: var(--of-radius-2xl) !important;
        min-height: 78px !important;
    }

    .records-monitor-view > div:first-child > div .text-2xl,
    #records-monitor-stats-container .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.4rem !important;
        word-break: break-word !important;
    }

    .records-monitor-view .rounded-2xl.border.border-gray-700.bg-\[\#202020\].p-3 {
        padding: 10px !important;
        border-radius: var(--of-radius-2xl) !important;
    }

    .records-monitor-view input,
    .records-monitor-view select,
    .records-monitor-view textarea,
    .records-monitor-view button {
        min-height: 40px;
    }

    .records-monitor-mobile-list img {
        width: 42px !important;
        height: 42px !important;
    }
}

/* Reserve the adjacent project slot so the first filter stays in place. */
.records-project-filter-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 408px;
    max-width: 100%;
    flex-shrink: 0;
}

.records-project-filter-wrap:empty {
    display: none;
}

.records-project-filter-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* =========================================================
   Records Mobile Compact Header / Stats / Bottom Actions
   ========================================================= */
@media (max-width: 767px) {
    .records-modal .records-close-button {
        top: 16px;
        right: 16px;
    }

    .records-header {
        /* Reserve the close button's full height above the project filter. */
        min-height: 48px;
        justify-content: center !important;
        margin-bottom: 10px !important;
        padding-right: 54px !important;
    }

    .records-header h2 {
        font-size: 1.45rem !important;
        line-height: 1.8rem !important;
    }

    .records-tabs-filter-row {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .records-tabs {
        flex: 1 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 16px !important;
        overflow-x: auto !important;
    }

    .records-tab-btn {
        font-size: 0.72rem !important;
        padding-bottom: 10px !important;
        letter-spacing: 0.01em !important;
    }

    .records-project-filter-wrap {
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start !important;
    }

    .records-project-filter-select {
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        padding: 0 28px 0 12px !important;
        font-size: 0.78rem !important;
        border-radius: var(--of-radius-lg) !important;
    }

    .records-monitor-stats-grid,
    #records-monitor-stats-container > .records-monitor-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .records-monitor-stats-grid-all-people,
    #records-monitor-stats-container > .records-monitor-stats-grid-all-people {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .records-monitor-stats-grid-all-people .records-monitor-stat-visible,
    .records-monitor-stats-grid-all-people .records-monitor-stat-pending,
    .records-monitor-stats-grid-all-people .records-monitor-stat-settled {
        grid-column: span 2 !important;
    }

    .records-monitor-stats-grid-all-people .records-monitor-stat-receive,
    .records-monitor-stats-grid-all-people .records-monitor-stat-pay {
        grid-column: span 6 !important;
    }

    .records-monitor-stat-card {
        min-height: 62px !important;
        padding: 8px 7px !important;
        border-radius: 13px !important;
        overflow: hidden !important;
    }

    .records-monitor-stat-direction {
        padding: 0 !important;
    }

    .records-monitor-stat-direction-half {
        padding: 8px 7px !important;
    }

    .records-monitor-stat-label {
        font-size: 0.47rem !important;
        line-height: 0.65rem !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
    }

    .records-monitor-stat-value {
        font-size: 0.95rem !important;
        line-height: 1.1rem !important;
        margin-top: 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .records-monitor-filter-panel {
        padding: 9px !important;
        border-radius: 15px !important;
    }

    .records-monitor-filter-line {
        gap: 7px !important;
    }

    .records-monitor-status-select {
        flex: 1 1 118px !important;
        min-width: 118px !important;
        height: 40px !important;
        padding: 0 12px !important;
        font-size: 0.78rem !important;
    }

    .records-role-filter-btn {
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 0.58rem !important;
        border-radius: var(--of-radius-md) !important;
    }

    .records-person-filter-wrap {
        flex: 1 1 100% !important;
    }

    .records-person-filter-wrap > div {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .records-person-filter-wrap select {
        min-width: 0 !important;
        width: 100% !important;
    }

    .records-scroll-body {
        padding-right: 0 !important;
    }

    .records-monitor-view {
        padding-bottom: 76px !important;
    }

    .records-monitor-bottom-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 0 0 !important;
        background: linear-gradient(to top, #181818 80%, rgba(24,24,24,0)) !important;
    }

    .records-monitor-bottom-actions button {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: var(--of-radius-control-large) !important;
    }
}

/* =========================================================
   Records Mobile Bottom Bar Flush Fix
   Keep Export / Refresh fixed at the real bottom, no empty gap below.
   ========================================================= */
@media (max-width: 767px) {
    .records-scroll-body:has(.records-monitor-view) {
        padding-bottom: 0 !important;
    }

    .records-monitor-view {
        padding-bottom: 72px !important;
        min-height: 100% !important;
    }

    .records-monitor-bottom-actions {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 0 !important;
        z-index: 80 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
        background: #181818 !important;
        border-top: 1px solid rgba(75, 85, 99, 0.45) !important;
        box-shadow: 0 -14px 26px rgba(0, 0, 0, 0.45) !important;
    }

    .records-monitor-bottom-actions button {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: var(--of-radius-control-large) !important;
    }
}

/* =========================================================
   Mobile Records Monitor Stats Hide
   Hide Visible/Pending/Settled/Total cards only on mobile.
   ========================================================= */
@media (max-width: 767px) {
    .records-monitor-view #records-monitor-stats-container {
        display: none !important;
    }

    .records-monitor-view {
        gap: 10px !important;
    }
}

/* =========================================================
   Modern Originfly App Loading Splash
   ========================================================= */
.of-splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 78% 12%, rgba(35, 120, 198, 0.30), transparent 52%),
        radial-gradient(ellipse at 18% 82%, rgba(39, 166, 176, 0.10), transparent 46%),
        linear-gradient(155deg, #132c5b 0%, #101c49 44%, #0b1030 100%);
    transition: opacity 420ms ease, visibility 420ms ease, transform 420ms ease;
}

.of-splash-screen.of-splash-hide {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.025);
    pointer-events: none;
}

.of-splash-grid {
    position: absolute;
    inset: -20%;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(135, 173, 231, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(135, 173, 231, 0.12) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(700px) rotateX(58deg) translateY(13%);
    animation: ofSplashGrid 4.8s linear infinite;
}

.of-splash-orb {
    position: absolute;
    width: 270px;
    height: 270px;
    border-radius: var(--of-radius-pill);
    filter: blur(24px);
    opacity: 0.55;
    animation: ofSplashFloat 5.2s ease-in-out infinite;
}

.of-splash-orb-a {
    left: -80px;
    top: 15%;
    background: rgba(75, 107, 219, 0.26);
}

.of-splash-orb-b {
    right: -90px;
    bottom: 15%;
    background: rgba(41, 191, 213, 0.18);
    animation-delay: -2s;
}

.of-splash-card {
    position: relative;
    width: min(86vw, 330px);
    min-height: 360px;
    border-radius: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 28px;
    background: linear-gradient(160deg, #182f61, #0d1437);
    border: 1px solid rgba(129, 181, 239, 0.30);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    animation: ofSplashCardIn 720ms cubic-bezier(.2, .9, .2, 1) both;
}

.of-splash-logo-wrap {
    position: relative;
    width: 138px;
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.of-splash-logo {
    width: 96px;
    height: 96px;
    border-radius: 28px;
    object-fit: cover;
    position: relative;
    z-index: 3;
}

.of-splash-title {
    font-size: 29px;
    line-height: 1;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.04em;
    text-shadow: 0 0 24px rgba(105, 201, 250, 0.22);
}

.of-splash-subtitle {
    margin-top: 9px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #a9d7f5;
}

.of-splash-progress {
    width: 100%;
    height: 5px;
    margin-top: 30px;
    border-radius: var(--of-radius-pill);
    overflow: hidden;
    background: rgba(147, 190, 242, 0.18);
    border: 1px solid rgba(147, 190, 242, 0.18);
}

.of-splash-progress span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #5dbaf9, #57e4dd, #83d985, #ffc56a, transparent);
    box-shadow: 0 0 20px rgba(87, 228, 221, 0.40);
    animation: ofSplashProgress 1.25s ease-in-out infinite;
}

.of-splash-status {
    margin-top: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #bdcce8;
}

@keyframes ofSplashCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ofSplashProgress {
    0% { transform: translateX(-115%); }
    100% { transform: translateX(230%); }
}

@keyframes ofSplashGrid {
    from { background-position: 0 0, 0 0; }
    to { background-position: 56px 56px, 56px 56px; }
}

@keyframes ofSplashFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(20px, -18px, 0) scale(1.08); }
}

@media (max-width: 767px) {
    .of-splash-card {
        width: min(86vw, 300px);
        min-height: 330px;
        border-radius: 30px;
        padding: 30px 24px;
    }

    .of-splash-logo-wrap {
        width: 126px;
        height: 126px;
        margin-bottom: 22px;
    }

    .of-splash-logo {
        width: 88px;
        height: 88px;
        border-radius: 25px;
    }

    .of-splash-title {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .of-splash-grid,
    .of-splash-orb,
    .of-splash-card,
    .of-splash-progress span {
        animation: none !important;
    }
}

/* =========================================================
   Mobile Work Monitor Compatibility
   Desktop keeps the full spreadsheet table. Mobile gets compact cards.
   ========================================================= */
.work-monitor-mobile-cards {
    display: none;
}

@media (max-width: 767px) {
    .work-monitor-page {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        background: #181818 !important;
    }

    .work-monitor-header {
        padding: 14px 14px 10px !important;
    }

    .work-monitor-header button[onclick="closeModal()"] {
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 1.35rem !important;
        background: rgba(0,0,0,.42) !important;
    }

    .work-monitor-header h2 {
        font-size: 1.15rem !important;
        line-height: 1.4rem !important;
        padding-right: 46px !important;
    }

    .work-monitor-header p {
        display: none !important;
    }

    .work-monitor-header .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 12px !important;
        padding-right: 0 !important;
    }

    .work-monitor-header .grid > div {
        padding: 8px 7px !important;
        border-radius: var(--of-radius-lg) !important;
        min-height: 58px !important;
        overflow: hidden !important;
    }

    .work-monitor-header .grid > div > div:first-child {
        font-size: 0.48rem !important;
        line-height: 0.65rem !important;
        letter-spacing: .07em !important;
        white-space: nowrap !important;
    }

    .work-monitor-header .grid > div > div:last-child {
        font-size: 1rem !important;
        line-height: 1.15rem !important;
        margin-top: 3px !important;
    }

    .work-monitor-controls {
        padding: 10px 14px !important;
        gap: 8px !important;
        max-height: 44dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .work-monitor-type-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 2px !important;
    }

    .work-monitor-type-tabs button {
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
        border-radius: var(--of-radius-lg) !important;
        font-size: 0.72rem !important;
        min-height: 38px !important;
    }

    .work-monitor-type-tabs button span:last-child {
        min-width: 20px !important;
        height: 20px !important;
        font-size: 0.62rem !important;
    }

    .work-monitor-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .work-monitor-filter-grid input[type="search"] {
        grid-column: 1 / -1 !important;
    }

    .work-monitor-filter-grid input,
    .work-monitor-filter-grid select,
    .work-monitor-filter-grid button {
        min-height: 40px !important;
        border-radius: var(--of-radius-lg) !important;
        font-size: 0.76rem !important;
        padding: 0 10px !important;
    }

    .work-monitor-filter-grid button {
        font-size: 0.72rem !important;
        font-weight: 900 !important;
    }

    .work-monitor-controls .rounded-xl.border.border-gray-700.bg-black\/15 {
        overflow-x: auto !important;
        border-radius: var(--of-radius-xl) !important;
        padding: 8px !important;
    }

    .work-monitor-controls .rounded-xl.border.border-gray-700.bg-black\/15 > div {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 7px !important;
        padding-bottom: 2px !important;
    }

    .work-monitor-controls .rounded-xl.border.border-gray-700.bg-black\/15 button,
    .work-monitor-controls .rounded-xl.border.border-gray-700.bg-black\/15 span {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .work-monitor-option-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 7px !important;
        padding-bottom: 2px !important;
    }

    .work-monitor-option-chips span,
    .work-monitor-option-chips button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .work-monitor-option-chips span.text-\[10px\] {
        display: none !important;
    }

    .work-monitor-option-chips button {
        min-height: 34px !important;
        border-radius: var(--of-radius-md) !important;
        padding: 0 10px !important;
        font-size: 0.62rem !important;
    }

    .work-monitor-desktop-table {
        display: none !important;
    }

    .work-monitor-mobile-cards {
        display: block !important;
        padding: 12px 14px 92px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .work-monitor-card-list {
        padding-bottom: 18px !important;
    }

    .work-monitor-mobile-card {
        border-radius: var(--of-radius-panel) !important;
    }

    .work-monitor-mobile-card img {
        object-fit: cover !important;
    }
}

/* =========================================================
   Records Monitor Mobile Robust Card Mode
   Uses CSS switching instead of JS viewport detection, so mobile/PWA always works.
   ========================================================= */
.records-monitor-mobile-cards-wrap {
    display: none;
}

@media (max-width: 900px) {
    .records-monitor-desktop-table-wrap {
        display: none !important;
    }

    .records-monitor-mobile-cards-wrap {
        display: block !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 92px !important;
    }

    #records-monitor-table-container {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .records-monitor-mobile-list {
        padding: 0 0 8px 0 !important;
    }

    .records-monitor-view {
        min-height: 0 !important;
        height: 100% !important;
    }
}

/* =========================================================
   Mobile Pipeline Full Access Layout
   Keeps the desktop pipeline amazing, but makes mobile usable:
   canvas + actions + presets/category/options all visible and scrollable.
   ========================================================= */
.assignment-pipeline-mobile-canvas-tools {
    display: none;
}

@media (max-width: 1023px) {
    .assignment-pipeline-modal {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 8px !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: #181818 !important;
    }

    .assignment-pipeline-close-btn {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        z-index: 60 !important;
        background: rgba(0,0,0,.42) !important;
        backdrop-filter: blur(10px) !important;
    }

    .assignment-pipeline-modal > .flex.items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0,
    .assignment-pipeline-modal > .flex.flex-col.md\:flex-row.md\:items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0 {
        min-height: 54px !important;
        padding: 4px 48px 8px 2px !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }

    .assignment-pipeline-modal > .flex.items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0 img,
    .assignment-pipeline-modal > .flex.flex-col.md\:flex-row.md\:items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0 .w-11 {
        width: 38px !important;
        height: 38px !important;
    }

    .assignment-pipeline-modal h2 {
        font-size: 0.95rem !important;
        line-height: 1.15rem !important;
        max-width: calc(100vw - 110px) !important;
    }

    .assignment-pipeline-modal .text-\[9px\],
    .assignment-pipeline-modal .md\:text-\[10px\] {
        font-size: 0.48rem !important;
        letter-spacing: 0.12em !important;
    }

    .assignment-pipeline-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 2px 92px 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        flex: 0 0 auto !important;
        min-height: auto !important;
    }

    .assignment-pipeline-canvas {
        flex: none !important;
        width: 100% !important;
        height: clamp(310px, 44dvh, 470px) !important;
        min-height: 310px !important;
        max-height: 470px !important;
        border-radius: var(--of-radius-2xl) !important;
        background: radial-gradient(circle at 50% 10%, rgba(59,130,246,.08), rgba(0,0,0,0) 38%), #202020 !important;
        touch-action: none !important;
    }

    .assignment-pipeline-mobile-canvas-tools {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .assignment-pipeline-mobile-canvas-tools button {
        min-height: 36px !important;
        border-radius: var(--of-radius-control-workflow) !important;
        border: 1px solid rgba(96,165,250,.35) !important;
        background: rgba(30,41,59,.92) !important;
        color: #dbeafe !important;
        font-size: 0.65rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.02em !important;
    }

    .assignment-pipeline-bottom-toolbar {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 35 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 8px !important;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
        background: linear-gradient(to top, #181818 86%, rgba(24,24,24,0)) !important;
        border-top: 1px solid rgba(75,85,99,.55) !important;
        box-shadow: 0 -12px 24px rgba(0,0,0,.35) !important;
    }

    .assignment-pipeline-bottom-toolbar .assignment-node-tray-list {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 7px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        min-width: 0 !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .assignment-node-tray-item,
    .assignment-quick-stage-row {
        flex: 0 0 auto !important;
        min-width: 88px !important;
        max-width: 150px !important;
        min-height: 38px !important;
        border-radius: var(--of-radius-control-workflow) !important;
        white-space: nowrap !important;
    }

    .assignment-pipeline-bottom-toolbar .assignment-node-tray-add {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: var(--of-radius-lg) !important;
        font-size: 1.2rem !important;
    }

    .assignment-pipeline-bottom-toolbar .assignment-node-tray-spacer {
        display: none !important;
    }

    .assignment-pipeline-bottom-toolbar button {
        width: 100% !important;
        min-height: 42px !important;
        padding: 8px 7px !important;
        border-radius: var(--of-radius-lg) !important;
        font-size: 0.66rem !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        white-space: normal !important;
    }

    .assignment-pipeline-side {
        display: flex !important;
        flex: 0 0 auto !important;
        min-height: 320px !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: var(--of-radius-2xl) !important;
        padding: 12px !important;
        margin-top: 2px !important;
        background: #202020 !important;
        border-color: rgba(75,85,99,.9) !important;
    }

    .assignment-pipeline-side > div {
        min-width: 0 !important;
        width: 100% !important;
    }

    .assignment-pipeline-side .grid.grid-cols-2.gap-2.mb-3 {
        position: sticky !important;
        top: -1px !important;
        z-index: 15 !important;
        background: #202020 !important;
        padding-bottom: 8px !important;
    }

    .assignment-pipeline-side [data-assignment-workflow-tab-btn] {
        min-height: 40px !important;
        border-radius: var(--of-radius-lg) !important;
        font-size: 0.58rem !important;
        letter-spacing: 0.11em !important;
        padding: 8px 7px !important;
    }

    .assignment-pipeline-side [data-assignment-workflow-tab-panel] {
        min-height: 220px !important;
    }

    .assignment-workflow-card,
    .assignment-quick-stage-row {
        padding: 10px !important;
        border-radius: var(--of-radius-xl) !important;
    }

    .assignment-workflow-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .assignment-workflow-actions button,
    .assignment-workflow-card button {
        min-height: 38px !important;
        border-radius: var(--of-radius-control-workflow) !important;
        font-size: 0.64rem !important;
    }

    #assignment-workflow-template-list,
    #assignment-workflow-template-list-global,
    [data-assignment-workflow-template-list] {
        max-height: none !important;
        overflow: visible !important;
    }

    .assignment-pipeline-footer {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .assignment-pipeline-canvas {
        height: 300px !important;
        min-height: 300px !important;
    }

    .assignment-pipeline-bottom-toolbar button {
        font-size: 0.6rem !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .assignment-pipeline-mobile-canvas-tools button {
        font-size: 0.58rem !important;
    }
}

/* =========================================================
   Mobile Pipeline 3 Window Switcher
   Node Connector / Saved Workflows / Asset Category are separated into
   mobile-friendly panels instead of one long crowded layout.
   ========================================================= */
.assignment-pipeline-mobile-window-tabs {
    display: none;
}

@media (max-width: 1023px) {
    .assignment-pipeline-mobile-window-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        padding: 7px !important;
        border-radius: var(--of-radius-2xl) !important;
        border: 1px solid rgba(75,85,99,.85) !important;
        background: rgba(17, 24, 39, .72) !important;
        box-shadow: var(--of-shadow-dark-top-highlight-medium) !important;
    }

    .assignment-pipeline-mobile-window-tabs button {
        min-height: 50px !important;
        border-radius: var(--of-radius-control-large) !important;
        border: 1px solid rgba(75,85,99,.85) !important;
        background: rgba(0,0,0,.22) !important;
        color: #9ca3af !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        font-size: .58rem !important;
        line-height: .75rem !important;
        font-weight: 900 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
        padding: 6px 4px !important;
        touch-action: manipulation !important;
    }

    .assignment-pipeline-mobile-window-tabs button.is-active,
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="workflows"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="categories"] {
        background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.70)) !important;
        color: #fff !important;
        border-color: rgba(125,211,252,.8) !important;
        box-shadow: 0 0 0 1px rgba(56,189,248,.2), 0 10px 24px rgba(37,99,235,.22) !important;
    }

    .assignment-pipeline-tab-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: var(--of-radius-pill) !important;
        background: rgba(255,255,255,.10) !important;
        font-size: .55rem !important;
        line-height: 1 !important;
    }

    /* Default mobile window = Node Connector */
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        display: grid !important;
        position: relative !important;
        bottom: auto !important;
        z-index: 12 !important;
        margin-top: 0 !important;
        padding: 10px !important;
        border: 1px solid rgba(75,85,99,.82) !important;
        border-radius: var(--of-radius-2xl) !important;
        background: #202020 !important;
        box-shadow: none !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-bottom-toolbar,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-bottom-toolbar {
        display: none !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-side {
        display: none !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        display: flex !important;
        flex: 0 0 auto !important;
        min-height: 300px !important;
        max-height: 42dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: var(--of-radius-2xl) !important;
        padding: 12px !important;
        background: #202020 !important;
        border: 1px solid rgba(75,85,99,.88) !important;
        box-shadow: var(--of-shadow-dark-top-highlight-medium) !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side::before {
        content: 'Saved Workflows';
        display: block;
        color: #bfdbfe;
        font-size: .62rem;
        font-weight: 900;
        letter-spacing: .18em;
        text-transform: uppercase;
        margin: 0 0 8px 0;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side::before {
        content: 'Asset Category';
        display: block;
        color: #bbf7d0;
        font-size: .62rem;
        font-weight: 900;
        letter-spacing: .18em;
        text-transform: uppercase;
        margin: 0 0 8px 0;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side [data-assignment-workflow-tab-btn],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side [data-assignment-workflow-tab-btn] {
        display: none !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="workflows"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="categories"] {
        display: block !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="categories"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="workflows"] {
        display: none !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] #assignment-workflow-template-list,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] #assignment-workflow-template-list-global {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        max-height: none !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .pipeline-asset-category-list {
        max-height: 220px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Node connector window is now a compact panel instead of a sticky bottom bar. */
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar .assignment-node-tray-list,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar .assignment-node-tray-list {
        grid-column: 1 / -1 !important;
        max-height: 54px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 2px !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar::before,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar::before {
        content: 'Node Connector';
        grid-column: 1 / -1;
        display: block;
        color: #bfdbfe;
        font-size: .62rem;
        font-weight: 900;
        letter-spacing: .18em;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .assignment-pipeline-main {
        padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .assignment-pipeline-mobile-window-tabs button {
        font-size: .52rem !important;
        min-height: 46px !important;
        letter-spacing: .02em !important;
    }

    .assignment-pipeline-tab-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* =========================================================
   Mobile Pipeline Window Tabs Bottom Placement
   Move Node Connector / Saved Workflows / Asset Category buttons
   to the real bottom of the mobile pipeline screen.
   ========================================================= */
@media (max-width: 1023px) {
    .assignment-pipeline-modal {
        position: relative !important;
        padding-bottom: 0 !important;
    }

    .assignment-pipeline-main {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    .assignment-pipeline-mobile-window-tabs {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 0 !important;
        z-index: 95 !important;
        margin: 0 !important;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        border-radius: 18px 18px 0 0 !important;
        border: 1px solid rgba(75, 85, 99, 0.95) !important;
        border-bottom: 0 !important;
        background: rgba(17, 24, 39, 0.98) !important;
        box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,.06) !important;
        backdrop-filter: blur(16px) !important;
    }

    .assignment-pipeline-mobile-window-tabs button {
        min-height: 48px !important;
        border-radius: var(--of-radius-control-large) !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        max-height: calc(100dvh - 520px) !important;
        min-height: 260px !important;
        margin-bottom: 6px !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        margin-bottom: 6px !important;
    }
}

@media (max-width: 1023px) and (max-height: 760px) {
    .assignment-pipeline-canvas {
        height: clamp(250px, 37dvh, 360px) !important;
        min-height: 250px !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        max-height: calc(100dvh - 455px) !important;
        min-height: 230px !important;
    }
}

@media (max-width: 380px) {
    .assignment-pipeline-mobile-window-tabs {
        left: 7px !important;
        right: 7px !important;
        gap: 5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .assignment-pipeline-mobile-window-tabs button {
        min-height: 44px !important;
    }
}

/* =========================================================
   Mobile Pipeline Clean Panel Mode
   Node graph/connector appears only in Node Connector.
   Saved Workflows and Asset Category use the screen as their own window.
   ========================================================= */
@media (max-width: 1023px) {
    /* When Saved Workflows or Asset Category is selected, hide the whole canvas/node connector column. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        display: none !important;
    }

    /* Node Connector selected: show canvas + connector tools, hide presets side. */
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        display: flex !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-side {
        display: none !important;
    }

    /* Saved Workflows / Asset Category selected: make the side panel become the main mobile window. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        display: flex !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: calc(100dvh - 230px) !important;
        height: calc(100dvh - 230px) !important;
        max-height: none !important;
        margin: 0 0 calc(72px + env(safe-area-inset-bottom)) 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: var(--of-radius-panel) !important;
        padding: 14px !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-main,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-main {
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side > div,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side > div {
        width: 100% !important;
        min-height: 100% !important;
    }

    /* Remove the internal old two-tab strip when using the bottom 3-button navigation. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side .grid.grid-cols-2.gap-2.mb-3,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side .grid.grid-cols-2.gap-2.mb-3 {
        display: none !important;
    }

    /* The panel title should be clean and close to the content. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side::before,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side::before {
        margin-bottom: 12px !important;
    }

    /* Saved workflow panel: use full width and more usable list height. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] #assignment-workflow-template-list,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] #assignment-workflow-template-list-global {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Category panel: keep add field visible and let the list scroll naturally. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .pipeline-asset-category-list {
        max-height: calc(100dvh - 430px) !important;
        min-height: 160px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .pipeline-asset-category-list:empty {
        min-height: 160px !important;
    }
}

@media (max-width: 1023px) and (max-height: 760px) {
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        min-height: calc(100dvh - 205px) !important;
        height: calc(100dvh - 205px) !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .pipeline-asset-category-list {
        max-height: calc(100dvh - 390px) !important;
    }
}

/* =========================================================
   Mobile Pipeline Panel Visibility Fix
   Keep bottom 3 buttons visible and force selected panel content visible.
   ========================================================= */
@media (max-width: 1023px) {
    /* Do NOT hide the whole first column, because the bottom 3 navigation buttons live inside it. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        display: flex !important;
        flex: 0 0 auto !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: visible !important;
    }

    /* Hide only the graph/tools/connector content when a non-node panel is active. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-canvas,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-mobile-canvas-tools,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-bottom-toolbar,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-canvas,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-mobile-canvas-tools,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-bottom-toolbar {
        display: none !important;
    }

    /* The bottom 3 buttons must always be visible. */
    .assignment-pipeline-mobile-window-tabs {
        display: grid !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 0 !important;
        z-index: 999 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force selected panel content visible even if the old internal tab left a hidden class. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: calc(100dvh - 170px) !important;
        height: calc(100dvh - 170px) !important;
        max-height: none !important;
        margin-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: calc(100dvh - 170px) !important;
        height: calc(100dvh - 170px) !important;
        max-height: none !important;
        margin-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="workflows"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="workflows"].hidden {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="categories"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="categories"].hidden {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="categories"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side [data-assignment-workflow-tab-panel="workflows"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-main,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-main {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 1023px) and (max-height: 760px) {
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        min-height: calc(100dvh - 150px) !important;
        height: calc(100dvh - 150px) !important;
    }
}

/* =========================================================
   Mobile Pipeline Node Connector Cleanup
   Node Connector should only show node connection controls.
   Preset/workflow controls belong in Saved Workflows panel.
   ========================================================= */
@media (max-width: 1023px) {
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar .pipeline-preset-action-btn,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar .pipeline-preset-action-btn {
        display: none !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar::before,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar::before {
        content: 'Node Connector' !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-node-tray-list,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-list {
        grid-column: 1 / -1 !important;
    }
}

/* =========================================================
   Mobile Pipeline Node Connector Final Presets Hide
   In Node Connector view, remove Pipeline Presets/Saved Workflow side panel completely.
   ========================================================= */
@media (max-width: 1023px) {
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-side {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-side *,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-side * {
        display: none !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main {
        overflow-y: auto !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
}

/* =========================================================
   Mobile Pipeline Bottom Tabs UI Match
   Make Node Connector / Saved Workflows / Asset Category match the portal style.
   ========================================================= */
@media (max-width: 1023px) {
    .assignment-pipeline-mobile-window-tabs {
        left: 8px !important;
        right: 8px !important;
        bottom: 0 !important;
        gap: 6px !important;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
        border-radius: 14px 14px 0 0 !important;
        border: 1px solid rgba(55, 65, 81, 0.95) !important;
        border-bottom: 0 !important;
        background: #111827 !important;
        box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(14px) !important;
    }

    .assignment-pipeline-mobile-window-tabs button {
        min-height: 42px !important;
        border-radius: var(--of-radius-md) !important;
        border: 1px solid rgba(75, 85, 99, 0.85) !important;
        background: #0b111b !important;
        color: #9ca3af !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
        font-size: 0.56rem !important;
        line-height: 0.72rem !important;
        letter-spacing: 0.08em !important;
        gap: 3px !important;
        padding: 5px 4px !important;
    }

    .assignment-pipeline-mobile-window-tabs button.is-active,
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="workflows"],
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="categories"] {
        background: #12304a !important;
        color: #e0f2fe !important;
        border-color: rgba(56, 189, 248, 0.72) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            0 0 0 1px rgba(14,165,233,.14) !important;
    }

    .assignment-pipeline-tab-icon {
        width: 14px !important;
        height: 14px !important;
        background: rgba(148, 163, 184, 0.16) !important;
        color: #94a3b8 !important;
        font-size: 0.45rem !important;
        opacity: 0.95 !important;
    }

    .assignment-pipeline-mobile-window-tabs button.is-active .assignment-pipeline-tab-icon,
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"] .assignment-pipeline-tab-icon,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"] .assignment-pipeline-tab-icon,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="workflows"] .assignment-pipeline-tab-icon,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="categories"] .assignment-pipeline-tab-icon {
        background: rgba(125, 211, 252, 0.16) !important;
        color: #bae6fd !important;
    }

    .assignment-pipeline-main {
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .assignment-pipeline-mobile-window-tabs {
        left: 6px !important;
        right: 6px !important;
        gap: 5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .assignment-pipeline-mobile-window-tabs button {
        min-height: 40px !important;
        font-size: 0.50rem !important;
        letter-spacing: 0.05em !important;
    }
}

/* =========================================================
   Desktop Pipeline Presets Restore
   Mobile panel switcher must not hide desktop Pipeline Presets.
   ========================================================= */
@media (min-width: 1024px) {
    .assignment-pipeline-side {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0.75rem !important;
        border-width: 1px !important;
        overflow-y: auto !important;
    }

    .assignment-pipeline-side * {
        display: revert;
    }

    .assignment-pipeline-side .grid {
        display: grid !important;
    }

    .assignment-pipeline-side .flex {
        display: flex !important;
    }

    .assignment-pipeline-side [data-assignment-workflow-tab-panel].hidden {
        display: none !important;
    }

    .assignment-pipeline-side #assignment-workflow-template-list,
    .assignment-pipeline-side #assignment-workflow-template-list-global {
        display: grid !important;
    }
}

/* =========================================================
   Records Desktop Actions In Filter Box
   Desktop: Export CSV / Refresh sit inside the monitor filter box.
   Mobile: bottom bar remains.
   ========================================================= */
@media (min-width: 768px) {
    .records-monitor-filter-line {
        align-items: center !important;
    }

    .records-monitor-desktop-actions {
        margin-left: auto !important;
        display: flex !important;
    }

    .records-monitor-desktop-actions button {
        min-height: 36px !important;
        border-radius: var(--of-radius-md) !important;
        padding: 0 14px !important;
        letter-spacing: 0.02em !important;
    }

    .records-monitor-bottom-actions {
        display: none !important;
    }

    .records-monitor-view {
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   Mobile Pipeline 3 Button Restore
   Keep the bottom mobile panel buttons visible/clickable in mobile/PWA.
   ========================================================= */
@media (max-width: 1023px) {
    .assignment-pipeline-mobile-window-tabs {
        display: grid !important;
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 0 !important;
        z-index: 10000 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .assignment-pipeline-mobile-window-tabs button {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   Common Pipeline From Project Button
   Project Pipeline now opens the shared Workflow Presets builder, not a project-only editor.
   ========================================================= */
.global-pipeline-type-switch {
    align-self: center;
}

/* =========================================================
   Root Admin Global Pipeline Library
   Companies choose saved root workflows; only root admin edits pipeline presets.
   ========================================================= */
.company-workflow-picker-page {
    background: #181818 !important;
}

.company-workflow-picker-card {
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

@media (max-width: 767px) {
    .company-workflow-picker-page {
        padding: 12px !important;
    }

    .company-workflow-picker-page h2 {
        font-size: 1.1rem !important;
    }

    .company-workflow-picker-card {
        padding: 12px !important;
        border-radius: var(--of-radius-2xl) !important;
    }

    .company-workflow-picker-card button {
        width: 100% !important;
        margin-top: 8px !important;
    }

    .company-workflow-picker-card .flex.items-start.justify-between {
        flex-direction: column !important;
    }
}

/* =========================================================
   Freelancer Assign Budget Summary
   Shows assignment total, stage allotted amount and pending balance.
   ========================================================= */
.freelancer-budget-summary {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.18);
}

@media (max-width: 640px) {
    .freelancer-budget-summary {
        padding: 12px !important;
    }

    .freelancer-budget-summary .grid {
        gap: 8px !important;
    }

    .freelancer-budget-summary .text-lg {
        font-size: 1rem !important;
    }
}

/* =========================================================
   Freelancer Assign Mandays + Amount Stage Summary
   Shows each stage mandays/amount and balance mandays/amount in assign popup.
   ========================================================= */
.freelancer-budget-stage-table {
    box-shadow: var(--of-shadow-dark-top-highlight-soft);
}

.freelancer-budget-stage-table .custom-scrollbar::-webkit-scrollbar {
    width: 7px;
}

@media (max-width: 640px) {
    .freelancer-budget-stage-table {
        border-radius: var(--of-radius-xl) !important;
    }

    .freelancer-budget-stage-table .grid {
        grid-template-columns: minmax(0, 1fr) 70px 90px !important;
        gap: 6px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .freelancer-budget-stage-table .text-sm {
        font-size: 0.78rem !important;
    }
}

/* =========================================================
   Mobile Assign Artist Budget Window
   Desktop view unchanged. Mobile uses a full-screen scrollable layout.
   ========================================================= */
@media (max-width: 767px) {
    .freelancer-budget-modal {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        padding: 14px !important;
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        background: #181818 !important;
    }

    .freelancer-budget-modal > button[onclick="cancelFreelancerBudgetAssignment()"] {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 60 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: var(--of-radius-pill) !important;
        background: rgba(0, 0, 0, 0.48) !important;
        backdrop-filter: blur(12px) !important;
        border-color: rgba(107, 114, 128, 0.75) !important;
    }

    .freelancer-budget-modal > .pr-9.mb-5 {
        padding-right: 46px !important;
        margin-bottom: 12px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 25 !important;
        background: linear-gradient(to bottom, #181818 78%, rgba(24,24,24,0)) !important;
        padding-top: 2px !important;
        padding-bottom: 10px !important;
    }

    .freelancer-budget-modal h2 {
        font-size: 1.18rem !important;
        line-height: 1.35rem !important;
        letter-spacing: 0.01em !important;
    }

    .freelancer-budget-modal h2 + p {
        font-size: 0.72rem !important;
        line-height: 1rem !important;
        margin-top: 4px !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-3.mb-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-3.mb-5 > div {
        padding: 9px !important;
        border-radius: var(--of-radius-xl) !important;
        gap: 8px !important;
        min-height: 82px !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-3.mb-5 img,
    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-3.mb-5 .w-14,
    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-3.mb-5 .w-16 {
        width: 42px !important;
        height: 42px !important;
        border-radius: var(--of-radius-lg) !important;
        flex-shrink: 0 !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-3.mb-5 .text-base {
        font-size: 0.78rem !important;
        line-height: 1rem !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary {
        padding: 10px !important;
        border-radius: var(--of-radius-2xl) !important;
        margin-bottom: 10px !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary > .flex {
        gap: 8px !important;
        margin-bottom: 9px !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary button {
        width: 100% !important;
        min-height: 36px !important;
        border-radius: var(--of-radius-control-workflow) !important;
        font-size: 0.62rem !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary .grid.grid-cols-2.lg\:grid-cols-4 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary .grid.grid-cols-2.lg\:grid-cols-4 > div {
        padding: 9px !important;
        border-radius: var(--of-radius-lg) !important;
        min-height: 66px !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary .text-lg {
        font-size: 0.95rem !important;
        line-height: 1.15rem !important;
        margin-top: 4px !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary .text-\[9px\],
    .freelancer-budget-modal .freelancer-budget-summary .text-\[10px\] {
        font-size: 0.52rem !important;
        line-height: 0.7rem !important;
        letter-spacing: 0.08em !important;
    }

    .freelancer-budget-modal .freelancer-budget-stage-table {
        margin-bottom: 10px !important;
        border-radius: var(--of-radius-2xl) !important;
        max-height: none !important;
    }

    .freelancer-budget-modal .freelancer-budget-stage-table > .px-3.py-2 {
        padding: 8px 10px !important;
    }

    .freelancer-budget-modal .freelancer-budget-stage-table .max-h-\[190px\] {
        max-height: 170px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .freelancer-budget-modal .freelancer-budget-stage-table .grid {
        grid-template-columns: minmax(0, 1fr) 70px 92px !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }

    .freelancer-budget-modal .freelancer-budget-stage-table .text-sm {
        font-size: 0.74rem !important;
        line-height: 0.95rem !important;
    }

    .freelancer-budget-modal .freelancer-budget-stage-table .text-\[9px\] {
        font-size: 0.48rem !important;
        line-height: 0.65rem !important;
        letter-spacing: 0.06em !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-5 > div {
        padding: 10px !important;
        border-radius: 15px !important;
    }

    .freelancer-budget-modal label {
        font-size: 0.52rem !important;
        letter-spacing: 0.09em !important;
        margin-bottom: 7px !important;
    }

    .freelancer-budget-modal input {
        height: 42px !important;
        min-height: 42px !important;
        border-radius: var(--of-radius-lg) !important;
        font-size: 1rem !important;
    }

    .freelancer-budget-modal #freelancer-budget-amount {
        padding-left: 32px !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-5 p {
        display: none !important;
    }

    .freelancer-budget-modal > .flex.flex-col.sm\:flex-row.sm\:justify-end.gap-3 {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 55 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        background: rgba(17, 24, 39, 0.98) !important;
        border-top: 1px solid rgba(75, 85, 99, 0.9) !important;
        box-shadow: 0 -14px 28px rgba(0,0,0,0.45) !important;
        backdrop-filter: blur(14px) !important;
    }

    .freelancer-budget-modal > .flex.flex-col.sm\:flex-row.sm\:justify-end.gap-3 button {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: var(--of-radius-control-large) !important;
        padding: 9px 10px !important;
        font-size: 0.78rem !important;
        font-weight: 900 !important;
        margin: 0 !important;
    }
}

@media (max-width: 380px) {
    .freelancer-budget-modal {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .freelancer-budget-modal .grid.grid-cols-1.sm\:grid-cols-2.gap-3.mb-5 {
        grid-template-columns: 1fr !important;
    }

    .freelancer-budget-modal .freelancer-budget-summary .grid.grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
    }

    .freelancer-budget-modal .freelancer-budget-stage-table .grid {
        grid-template-columns: minmax(0, 1fr) 58px 82px !important;
        gap: 4px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .freelancer-budget-modal > .flex.flex-col.sm\:flex-row.sm\:justify-end.gap-3 button {
        font-size: 0.7rem !important;
    }
}

/* heavy_ui_render_optimization: reduce layout/paint cost for large assignment and shot lists. */
#assignments-container > [id^="assignment-card-"],
.mobile-assignment-card,
.animation-shot-card,
.records-monitor-row,
.work-monitor-row {
    content-visibility: auto;
    contain-intrinsic-size: 128px 420px;
}
#assignments-container img,
.mobile-project-strip img {
    content-visibility: auto;
}
@media (max-width: 1299px) {
    #assignments-container > [id^="assignment-card-"],
    .mobile-assignment-card { contain-intrinsic-size: 168px 360px; }
}

/* artist_availability_assignment_dropdown: small legend for assign dropdown workload colors */
.artist-availability-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #9ca3af;
}
.artist-availability-free { color: #86efac; }
.artist-availability-busy { color: #fdba74; }
.assignment-stage-assignee-select option { font-weight: 800; }

/* company_window_two_panel_split_20260706: split Companies into list/add panel and admin controls panel */
.company-two-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.company-panel-card {
    min-width: 0;
}
.company-panel-heading {
    border-bottom: 1px solid rgba(75, 85, 99, 0.55);
    padding-bottom: 12px;
}
.company-admin-section + .company-admin-section {
    margin-top: 14px;
}
@media (min-width: 1300px) {
    .company-two-panel-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.72fr);
        gap: 18px;
    }
    .company-admin-panel {
        position: sticky;
        top: 0;
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
    }
    .company-list-panel .company-add-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .company-admin-panel .xl\:flex-row {
        flex-direction: column !important;
    }
    .company-admin-panel .xl\:items-start {
        align-items: stretch !important;
    }
    .company-admin-panel .xl\:grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1680px) {
    .company-two-panel-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(430px, 0.65fr);
    }
    .company-list-panel .company-add-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 767px) {
    .company-panel-card {
        border-radius: var(--of-radius-panel) !important;
        padding: 12px !important;
    }
    .company-admin-panel {
        margin-bottom: 18px;
    }
}

/* company_window_button_tabs_20260706: show either company list/add OR admin controls, not both at once */
.company-window-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.company-window-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    min-height: 74px;
    padding: 14px 16px;
    border-radius: var(--of-radius-panel);
    border: 1px solid rgba(75, 85, 99, 0.85);
    background: rgba(17, 17, 17, 0.38);
    color: #d1d5db;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.company-window-tab-btn:hover {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(31, 41, 55, 0.6);
    transform: translateY(-1px);
}
.company-window-tab-btn.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(16, 185, 129, 0.14));
    border-color: rgba(96, 165, 250, 0.8);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.16), 0 12px 30px rgba(0,0,0,0.22);
}
.company-window-tab-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(156, 163, 175, 0.18);
    flex: 0 0 auto;
    font-size: 20px;
}
.company-window-tab-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.company-window-tab-text strong {
    font-size: 13px;
    line-height: 1.05;
    letter-spacing: .02em;
    font-weight: 900;
}
.company-window-tab-text small {
    font-size: 10px;
    line-height: 1.25;
    color: #9ca3af;
    font-weight: 700;
}
.company-window-tab-btn.active .company-window-tab-text small { color: #bfdbfe; }
.company-single-panel-wrap {
    max-width: 1280px;
    margin: 0 auto;
}
.company-single-tab-panel {
    width: 100%;
}
@media (min-width: 1300px) {
    .company-single-panel-wrap {
        max-width: 1360px;
    }
    .company-single-tab-panel.company-admin-panel {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
        position: static;
        max-height: none;
        overflow: visible;
    }
    .company-single-tab-panel.company-list-panel .company-add-grid {
        grid-template-columns: 1fr 1fr 1fr 160px 180px !important;
    }
    .company-single-tab-panel.company-admin-panel .xl\:flex-row {
        flex-direction: row !important;
    }
    .company-single-tab-panel.company-admin-panel .xl\:items-start {
        align-items: flex-start !important;
    }
    .company-single-tab-panel.company-admin-panel .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 767px) {
    .company-window-tabs {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }
    .company-window-tab-btn {
        min-height: 62px;
        padding: 11px 12px;
        border-radius: var(--of-radius-2xl);
    }
    .company-window-tab-icon {
        width: 36px;
        height: 36px;
        border-radius: 13px;
        font-size: 18px;
    }
    .company-window-tab-text strong { font-size: 12px; }
    .company-window-tab-text small { font-size: 9px; }
}

/* company_window_button_tabs_ui_polish_20260706: cleaner two-button layout and improved list/admin tab pages */
.company-button-tab-content {
    scroll-behavior: smooth;
}
.company-tab-switch-wrap {
    max-width: 1180px;
    margin: 0 auto 18px;
}
.company-window-tabs {
    margin-bottom: 0;
    padding: 6px;
    border: 1px solid rgba(75, 85, 99, 0.65);
    border-radius: 22px;
    background: rgba(17, 24, 39, 0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 36px rgba(0,0,0,0.18);
}
.company-window-tab-btn {
    min-height: 66px;
    border-radius: 17px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
}
.company-window-tab-btn.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(59,130,246,0.18), rgba(16,185,129,0.10));
    pointer-events: none;
}
.company-window-tab-btn > * { position: relative; z-index: 1; }
.company-window-tab-status {
    margin-left: auto;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 9px;
    border-radius: var(--of-radius-pill);
    border: 1px solid rgba(156, 163, 175, 0.22);
    background: rgba(0,0,0,0.22);
    color: #cbd5e1;
}
.company-window-tab-btn.active .company-window-tab-status {
    color: #dbeafe;
    border-color: rgba(147,197,253,0.35);
    background: rgba(37,99,235,0.20);
}
.company-single-panel-wrap.company-list-wrap {
    max-width: 1320px;
}
.company-single-panel-wrap.company-admin-wrap {
    max-width: 1220px;
}
.company-list-ui-card,
.company-admin-ui-card {
    background: linear-gradient(180deg, rgba(36,36,36,0.95), rgba(31,31,31,0.92)) !important;
    border-color: rgba(75, 85, 99, 0.72) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
.company-list-topbar,
.company-admin-topbar {
    align-items: center;
}
.company-count-pill,
.company-admin-mini-status span {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.company-admin-topbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.company-admin-mini-status {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.company-admin-mini-status span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--of-radius-pill);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #d1d5db;
    background: rgba(17,17,17,0.44);
    border: 1px solid rgba(75,85,99,0.7);
}
.company-list-workflow {
    display: grid;
    gap: 14px;
}
.company-results-card {
    border-top: 1px solid rgba(75,85,99,0.42);
    padding-top: 12px;
}
.company-admin-control-grid {
    display: grid;
    gap: 16px;
    align-items: start;
}
.company-admin-control-grid > .company-admin-section,
.company-admin-control-grid > .trial-signup-card {
    margin-bottom: 0 !important;
    height: 100%;
}
.company-admin-control-grid .trial-signup-card {
    border-color: rgba(249,115,22,0.32);
}
.company-admin-control-grid .company-admin-section,
.company-admin-control-grid .trial-signup-card,
.company-list-ui-card .company-add-form,
.company-list-ui-card .company-add-collapsed,
.company-list-ui-card .company-results-card,
.company-list-ui-card .company-add-collapsed + * {
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.company-admin-control-grid .company-admin-section:hover,
.company-admin-control-grid .trial-signup-card:hover {
    border-color: rgba(96, 165, 250, 0.38) !important;
}
.company-admin-control-grid .trial-setting-grid input,
.company-admin-control-grid #root-total-storage-gb,
.company-list-ui-card input,
.company-list-ui-card select {
    min-height: 42px;
}
@media (min-width: 1300px) {
    .company-tab-switch-wrap {
        max-width: 1260px;
    }
    .company-window-tabs {
        grid-template-columns: repeat(2, minmax(360px, 1fr));
    }
    .company-window-tab-btn {
        min-height: 64px;
    }
    .company-admin-control-grid {
        grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.25fr);
    }
    .company-admin-control-grid .company-admin-section .xl\:grid-cols-1 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .company-admin-control-grid .trial-setting-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    .company-admin-control-grid .trial-project-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 1299px) {
    .company-tab-switch-wrap {
        position: sticky;
        top: 0;
        z-index: 15;
        margin-bottom: 12px;
        background: linear-gradient(180deg, rgba(56,56,56,0.98), rgba(56,56,56,0.82));
        padding-bottom: 8px;
        backdrop-filter: blur(10px);
    }
    .company-window-tabs {
        border-radius: var(--of-radius-panel);
        padding: 5px;
        gap: 7px;
    }
    .company-window-tab-status { display: none; }
    .company-list-ui-card,
    .company-admin-ui-card {
        padding: 12px !important;
    }
    .company-admin-topbar {
        align-items: flex-start;
    }
}
@media (max-width: 767px) {
    .company-window-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .company-window-tab-btn {
        min-height: 58px;
        gap: 8px;
        padding: 9px;
        text-align: center;
        justify-content: center;
    }
    .company-window-tab-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .company-window-tab-text {
        align-items: flex-start;
        text-align: left;
    }
    .company-window-tab-text small {
        display: none;
    }
    .company-admin-topbar {
        flex-direction: column;
    }
    .company-admin-mini-status span {
        min-height: 26px;
        padding: 0 10px;
        font-size: 9px;
    }
    .company-admin-control-grid,
    .company-list-workflow {
        gap: 12px;
    }
    .company-admin-control-grid .trial-setting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .company-admin-control-grid .trial-setting-grid > div:last-child {
        grid-column: 1 / -1;
    }
}

/* mobile_companies_header_no_back_v1_20260830: phone Companies/Admin Controls header uses only title + close; desktop keeps Back. */
@media (max-width: 767px) {
    .company-page-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    .company-page-header > .company-back-btn {
        display: none !important;
    }
}

/* company_window_desktop_compact_20260706: reduce wasted desktop space while keeping tabs/mobile unchanged */
@media (min-width: 1024px) {
    .company-page-header {
        padding: 12px 22px !important;
        min-height: 62px;
    }
    .company-page-title h2 {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }
    .company-page-title p {
        margin-top: 2px !important;
        font-size: 11px !important;
    }
    .company-back-btn,
    .company-close-btn {
        min-width: 38px !important;
        height: 38px !important;
    }
    .company-content-wrap.company-button-tab-content {
        padding: 14px 18px 22px !important;
    }
    .company-tab-switch-wrap {
        max-width: min(1880px, calc(100vw - 36px)) !important;
        margin: 0 auto 12px !important;
    }
    .company-window-tabs {
        padding: 5px !important;
        gap: 10px !important;
        border-radius: var(--of-radius-panel) !important;
    }
    .company-window-tab-btn {
        min-height: 54px !important;
        padding: 9px 12px !important;
        border-radius: var(--of-radius-xl) !important;
        gap: 10px !important;
    }
    .company-window-tab-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: var(--of-radius-lg) !important;
        font-size: 17px !important;
    }
    .company-window-tab-text {
        gap: 2px !important;
    }
    .company-window-tab-text strong {
        font-size: 12px !important;
    }
    .company-window-tab-text small {
        font-size: 9px !important;
    }
    .company-window-tab-status {
        font-size: 9px !important;
        padding: 6px 8px !important;
    }
    .company-single-panel-wrap.company-list-wrap {
        max-width: min(1880px, calc(100vw - 36px)) !important;
    }
    .company-single-panel-wrap.company-admin-wrap {
        max-width: min(1640px, calc(100vw - 36px)) !important;
    }
    .company-list-ui-card,
    .company-admin-ui-card {
        padding: 14px !important;
        border-radius: var(--of-radius-panel) !important;
    }
    .company-panel-heading {
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }
    .company-list-topbar .text-base,
    .company-admin-topbar .text-base {
        font-size: 14px !important;
    }
    .company-list-workflow,
    .company-admin-control-grid {
        gap: 10px !important;
    }
    .company-list-ui-card .company-add-collapsed,
    .company-list-ui-card .company-add-form,
    .company-list-ui-card .company-results-card,
    .company-list-ui-card .mb-4,
    .company-admin-control-grid > .company-admin-section,
    .company-admin-control-grid > .trial-signup-card {
        margin-bottom: 0 !important;
    }
    .company-list-ui-card .company-add-collapsed,
    .company-list-ui-card .company-add-form,
    .company-admin-control-grid > .company-admin-section,
    .company-admin-control-grid > .trial-signup-card {
        padding: 12px !important;
        border-radius: var(--of-radius-xl) !important;
    }
    .company-results-card {
        padding-top: 8px !important;
    }
    .company-form-input,
    .company-list-ui-card input,
    .company-list-ui-card select,
    .company-admin-control-grid input,
    .company-admin-control-grid select,
    .company-admin-control-grid #root-total-storage-gb {
        min-height: 36px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        border-radius: var(--of-radius-md) !important;
    }
    .company-submit-btn,
    .company-add-open-btn {
        min-height: 38px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        border-radius: var(--of-radius-control-workflow) !important;
    }
    .company-card {
        padding: 12px !important;
        border-radius: var(--of-radius-xl) !important;
    }
    .company-card-actions {
        gap: 6px !important;
    }
    .company-card-actions button {
        min-height: 30px !important;
        padding: 6px 9px !important;
        font-size: 10px !important;
        border-radius: var(--of-radius-control) !important;
    }
}

@media (min-width: 1300px) {
    .company-single-tab-panel.company-list-panel .company-add-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .company-list-ui-card .company-add-collapsed > div {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .company-list-ui-card #company-list-results {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .company-list-ui-card #company-list-results > * {
        margin-top: 0 !important;
    }
    .company-list-ui-card #company-list-results > .text-center,
    .company-list-ui-card #company-list-results > .border-dashed {
        grid-column: 1 / -1;
    }
    .company-list-ui-card .company-card {
        height: 100%;
    }
    .company-admin-control-grid {
        grid-template-columns: minmax(420px, 0.82fr) minmax(0, 1.45fr) !important;
        gap: 12px !important;
    }
    .company-admin-control-grid .company-admin-section .mt-3.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .company-admin-control-grid .company-admin-section .bg-black\/25,
    .company-admin-control-grid .company-admin-section .bg-black\/20 {
        padding: 10px !important;
        border-radius: var(--of-radius-md) !important;
    }
    .company-admin-control-grid .trial-setting-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .company-admin-control-grid .trial-project-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (min-width: 1800px) {
    .company-list-ui-card #company-list-results {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .company-single-panel-wrap.company-list-wrap,
    .company-tab-switch-wrap {
        max-width: min(2140px, calc(100vw - 44px)) !important;
    }
    .company-single-panel-wrap.company-admin-wrap {
        max-width: min(1780px, calc(100vw - 44px)) !important;
    }
}

/* subscription_plan_responsive_layout_v1_20260830: keep plan editor cards readable across desktop and mobile */
.company-admin-control-grid > .subscription-plans-workspace {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}
.subscription-plans-layout {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(180px, 1fr);
    align-items: stretch;
    gap: 18px;
    width: 100%;
    min-width: 0;
}
.subscription-plans-grid {
    display: grid;
    grid-template-columns: minmax(0, 520px);
    gap: 16px;
    align-items: start;
    width: 100%;
    min-width: 0;
}
.subscription-plan-editor-card {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
.subscription-plan-active-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px !important;
}
.subscription-plan-active-btn {
    min-width: 142px;
    white-space: nowrap;
}
.subscription-plan-primary-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(120px, .9fr) !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}
.subscription-plan-field,
.subscription-plan-limit-field {
    min-width: 0;
}
.subscription-plan-input,
.subscription-plan-limit-field input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
.subscription-plan-limit-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0;
}
.subscription-plan-limit-field label {
    font-size: 9px !important;
    line-height: 1.15;
    letter-spacing: .07em !important;
    white-space: nowrap;
}
.subscription-plan-types-panel {
    min-width: 0;
}
.subscription-plan-project-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
.subscription-plan-type-btn {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}
.subscription-plan-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.subscription-plan-add-btn {
    align-self: center;
    justify-self: center;
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 1023px) {
    .subscription-plans-layout {
        grid-template-columns: minmax(0, 520px);
        gap: 12px;
    }
    .subscription-plans-grid {
        width: 100%;
        grid-template-columns: minmax(0, 520px);
    }
    .subscription-plan-add-btn {
        width: auto;
        margin: 0;
        align-self: auto;
        justify-self: center;
    }
}
@media (max-width: 767px) {
    .company-admin-control-grid > .subscription-plans-workspace {
        grid-column: auto;
    }
    .subscription-plans-grid {
        display: block;
        width: 100%;
    }
    .subscription-plan-editor-card {
        max-width: none !important;
        padding: 12px !important;
        border-radius: var(--of-radius-xl) !important;
        margin-bottom: 12px;
    }
    .subscription-plan-active-row {
        margin-bottom: 12px !important;
    }
    .subscription-plan-active-btn {
        min-width: 126px;
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
    .subscription-plan-primary-grid {
        grid-template-columns: minmax(0, 1fr) minmax(105px, .62fr) !important;
        gap: 10px !important;
    }
    .subscription-plan-limit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    .subscription-plan-storage-field {
        grid-column: 1 / -1;
    }
    .subscription-plan-limit-field label {
        font-size: 9px !important;
        letter-spacing: .06em !important;
    }
    .subscription-plan-types-panel {
        padding: 10px !important;
    }
    .subscription-plan-project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .subscription-plan-type-btn {
        padding: 10px 6px !important;
        font-size: 11px !important;
    }
    .subscription-plan-actions {
        margin-top: 12px !important;
    }
    .subscription-plan-actions button:last-child {
        min-width: 118px !important;
    }
    .subscription-plan-add-btn {
        width: auto;
        min-width: 120px;
        min-height: 42px;
        justify-self: center;
    }
}
@media (max-width: 420px) {
    .subscription-plan-primary-grid {
        grid-template-columns: 1fr !important;
    }
    .subscription-plan-project-grid {
        grid-template-columns: 1fr !important;
    }
}

/* fixed_planning_workspace: Excel-like planning sheet for admin/supervisor */
.planning-modal-shell { color-scheme: dark; }
.planning-label { display:block; margin-bottom:0.35rem; font-size:10px; line-height:1; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:#9ca3af; }
.planning-input, .planning-cell-input { width:100%; background:#111; border:1px solid #4b5563; color:#f8fafc; border-radius:0.75rem; padding:0.72rem 0.85rem; font-size:0.875rem; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.planning-cell-input { border-radius:0.45rem; padding:0.55rem 0.65rem; background:#151515; }
.planning-input:focus, .planning-cell-input:focus { border-color:#60a5fa; box-shadow:0 0 0 1px rgba(96,165,250,.25); background:#0d1118; }
.planning-readonly { min-height:43px; display:flex; align-items:center; background:#141414; border:1px solid #374151; color:#d1d5db; border-radius:0.75rem; padding:0.72rem 0.85rem; font-size:0.875rem; font-weight:800; }
.planning-toggle { border:1px solid #4b5563; background:#151515; color:#9ca3af; border-radius:0.75rem; padding:0.75rem 0.85rem; font-size:0.75rem; font-weight:900; transition:all .15s ease; }
.planning-toggle:hover { color:#fff; border-color:#6b7280; background:#1f2937; }
.planning-toggle.active { color:#fff; border-color:#60a5fa; background:linear-gradient(135deg, rgba(37,99,235,.7), rgba(16,185,129,.35)); box-shadow:0 0 0 1px rgba(96,165,250,.25) inset; }
.planning-table { border-collapse:separate; border-spacing:0; }
.planning-table th { position:sticky; top:0; z-index:1; background:#18202c; border-bottom:1px solid #374151; color:#bfdbfe; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:.65rem .75rem; text-align:left; font-weight:900; }
.planning-table td { border-bottom:1px solid #2d3748; padding:.5rem .65rem; background:#1d1d1d; vertical-align:middle; }
.planning-table tr:hover td { background:#242424; }
.planning-table tbody tr:last-child td { border-bottom:0; }
.planning-summary span { display:inline-flex; align-items:center; gap:.25rem; border:1px solid rgba(75,85,99,.8); background:rgba(0,0,0,.22); border-radius:var(--of-radius-pill); padding:.35rem .65rem; }
@media (min-width: 1280px) {
  .planning-content { max-width: 1680px; margin:0 auto; width:100%; }
  .planning-control-card, .planning-assignment-card { border-radius:var(--of-radius-panel); }
}
@media (max-width: 767px) {
  .planning-topbar { padding:0.75rem; }
  .planning-content { padding:0.75rem; }
  .planning-input { padding:0.65rem 0.75rem; }
  .planning-assignment-head { padding:0.75rem; }
}

/* fixed_planning_uploads_filter: thumbnail/input upload controls in Planning */
.planning-file-picker { display:flex; align-items:center; gap:.45rem; min-width:0; }
.planning-file-btn { flex:1; min-height:42px; border:1px solid rgba(96,165,250,.38); background:rgba(37,99,235,.18); color:#dbeafe; border-radius:var(--of-radius-lg); padding:.62rem .75rem; font-size:.72rem; font-weight:900; letter-spacing:.02em; transition:background .15s ease,border-color .15s ease,color .15s ease; white-space:nowrap; }
.planning-file-btn:hover { background:rgba(37,99,235,.32); border-color:rgba(96,165,250,.72); color:#fff; }
.planning-file-clear { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(248,113,113,.45); background:rgba(127,29,29,.35); color:#fecaca; border-radius:var(--of-radius-lg); font-size:1.15rem; line-height:1; font-weight:900; }
.planning-file-clear:hover { background:rgba(185,28,28,.55); color:#fff; }
.planning-file-caption { min-height:18px; margin-top:.25rem; font-size:10px; line-height:1.25; color:#9ca3af; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planning-file-name { color:#bbf7d0; }
.planning-file-empty { color:#6b7280; }
@media (min-width: 1280px) {
  .planning-assignment-head { grid-template-columns:minmax(180px,1.1fr) minmax(140px,.75fr) 115px 130px minmax(160px,.85fr) minmax(180px,.95fr) auto; }
}

/* fixed_planning_grid_ui: compact project-planner spreadsheet UI inspired by production planning tools */
.planning-sheet-wrap {
  background: #202020;
}
.planning-sheet-toolbar {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-bottom: 1px solid #3f3f46;
  background: linear-gradient(180deg, #f5f5f5 0%, #e9e9e9 100%);
  color: #1f2937;
}
.planning-toolbar-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  border-right: 1px solid #d1d5db;
  color: #4b5563;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.planning-toolbar-icons span {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.planning-toolbar-icons span:hover { background: #dbeafe; color:#111827; }
.planning-toolbar-title h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .02em;
  color: #111827;
}
.planning-toolbar-title p {
  margin: 1px 0 0;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
}
.planning-toolbar-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}
.planning-toolbar-btn {
  min-height: 28px;
  padding: 5px 11px;
  border-radius: var(--of-radius-control-compact);
  border: 1px solid rgba(0,0,0,.18);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.planning-toolbar-btn.primary { background:#2563eb; }
.planning-toolbar-btn.info { background:#0284c7; }
.planning-toolbar-btn.success { background:#059669; }
.planning-toolbar-btn:hover { filter: brightness(1.12); }
.planning-grid-board { border-radius: 0 0 14px 14px; }
.planning-grid-scroll {
  width: 100%;
  overflow: auto;
  max-height: min(62vh, 760px);
  background: #f8fafc;
}
.planning-grid-table {
  width: 100%;
  min-width: 1380px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  color: #111827;
}
.planning-grid-table th,
.planning-grid-table td {
  border-right: 1px solid #d8dde5;
  border-bottom: 1px solid #d8dde5;
  padding: 3px 6px;
  height: 32px;
  vertical-align: middle;
}
.planning-grid-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg,#ffffff,#ebeff5);
  color: #374151;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 1px 0 #cbd5e1;
}
.planning-grid-table th:nth-child(1) { width: 330px; }
.planning-grid-table th:nth-child(2) { width: 230px; }
.planning-grid-table th:nth-child(3) { width: 110px; }
.planning-grid-table th:nth-child(4) { width: 130px; }
.planning-grid-table th:nth-child(5) { width: 170px; }
.planning-grid-table th:nth-child(6) { width: 190px; }
.planning-grid-table th:nth-child(7) { width: 245px; }
.planning-grid-table th:nth-child(8) { width: 75px; }
.planning-sticky-task {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 1px 0 0 #cbd5e1;
}
.planning-grid-table thead .planning-sticky-task { z-index: 6; }
.planning-task-cell { background: inherit; }
.planning-grid-assignment-row td {
  background: #ffffff;
  font-weight: 800;
}
.planning-grid-stage-row td {
  background: #f4f8fc;
}
.planning-grid-stage-row:nth-child(even) td { background: #eef5fb; }
.planning-grid-group:hover .planning-grid-assignment-row td,
.planning-grid-table tr:hover td {
  background-color: #e0f2fe;
}
.planning-grid-input {
  width: 100%;
  height: 25px;
  min-height: 25px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 5px;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  outline: none;
}
select.planning-grid-input {
  background-color: transparent;
  color: #111827;
}
.planning-grid-input:hover { border-color: #cbd5e1; background: rgba(255,255,255,.55); }
.planning-grid-input:focus { border-color:#3b82f6; background:#fff; box-shadow: 0 0 0 1px rgba(59,130,246,.25); }
.planning-assignment-name { font-weight: 950; color: #ea580c; }
.planning-stage-name { color: #f97316; }
.planning-task-root,
.planning-task-indent {
  display:flex;
  align-items:center;
  min-width:0;
  gap:5px;
}
.planning-task-indent { padding-left: 31px; position: relative; }
.planning-drag-dots { color:#9ca3af; font-size:12px; letter-spacing:-3px; width:18px; text-align:center; flex:0 0 18px; }
.planning-tree-caret { color:#6b7280; font-size:11px; width:12px; flex:0 0 12px; }
.planning-row-check {
  width: 12px;
  height: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 2px;
  background: #fff;
  flex: 0 0 12px;
}
.planning-tree-line {
  position:absolute;
  left: 31px;
  top: -8px;
  bottom: 16px;
  width: 12px;
  border-left: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
}
.planning-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--of-radius-pill);
  border:1px solid #cbd5e1;
  background:#fff;
  flex: 0 0 10px;
  z-index:1;
}
.planning-file-mini { display:flex; align-items:center; gap:4px; }
.planning-mini-file-btn,
.planning-mini-btn,
.planning-delete-row-btn,
.planning-mini-clear {
  min-height: 22px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #1f2937;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 7px;
  line-height: 1;
  white-space: nowrap;
}
.planning-mini-file-btn:hover,
.planning-mini-btn:hover { background:#dbeafe; border-color:#93c5fd; }
.planning-mini-clear {
  width:22px;
  padding:0;
  color:#b91c1c;
  background:#fee2e2;
  border-color:#fecaca;
  font-size:14px;
}
.planning-delete-row-btn { color:#b91c1c; background:#fff1f2; border-color:#fecdd3; }
.planning-delete-row-btn:hover { background:#ffe4e6; }
.planning-grid-file-name {
  max-width: 150px;
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 800;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-grid-summary {
  color:#374151;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 800;
}
.planning-grid-summary .planning-summary,
.planning-grid-summary span {
  display: inline-flex;
  align-items:center;
  gap:2px;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 7px 0 0 !important;
  color: #374151;
}
.planning-grid-muted { color:#9ca3af; font-size: 10px; font-weight: 800; }
.planning-grid-row-num { color:#6b7280; font-size: 10px; font-weight:900; text-align:center; }
.planning-file-name { color:#047857; }
.planning-file-empty { color:#9ca3af; }
@media (min-width: 1280px) {
  .planning-content { max-width: min(2180px, calc(100vw - 42px)) !important; padding: 12px 16px !important; }
  .planning-topbar { padding-top: 8px !important; padding-bottom: 8px !important; }
  .planning-draft-bar,
  .planning-control-card { border-radius: var(--of-radius-lg) !important; padding: 10px !important; }
  .planning-control-card .planning-input,
  .planning-control-card .planning-readonly { min-height: 34px; padding: 7px 10px; border-radius: var(--of-radius-control); }
  .planning-control-card .planning-file-btn,
  .planning-control-card .planning-file-clear { min-height: 34px; height:34px; border-radius: var(--of-radius-control); }
}
@media (max-width: 900px) {
  .planning-sheet-toolbar { grid-template-columns: 1fr; gap: 7px; background:#202020; color:#e5e7eb; }
  .planning-toolbar-icons { overflow-x:auto; border-right:0; padding-right:0; color:#d1d5db; }
  .planning-toolbar-title h3 { color:#fff; }
  .planning-toolbar-actions { justify-content:flex-start; flex-wrap:wrap; }
  .planning-grid-scroll { max-height: 58vh; }
  .planning-grid-table { min-width: 1180px; }
}

/* planning_project_sheets_ui: project sheet tabs + stage-group spreadsheet arrangement */
.planning-project-sheets {
  border: 1px solid #4b5563;
  background: #202020;
  border-radius: var(--of-radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.planning-project-sheets-head {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #343a46;
  background: linear-gradient(180deg,#242424,#1d1d1d);
}
.planning-project-sheets-title {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.planning-project-sheets-sub {
  color: #8f98a8;
  font-size: 10px;
  font-weight: 800;
  margin-top: 1px;
}
.planning-project-sheet-mode {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.planning-sheet-mode-btn {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: var(--of-radius-control);
  border: 1px solid #4b5563;
  background: #151515;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 950;
}
.planning-sheet-mode-btn.active {
  background: #1d4ed8;
  border-color: #60a5fa;
  color: #fff;
}
.planning-sheet-tabs-scroll {
  display: flex;
  align-items: stretch;
  gap: 7px;
  padding: 9px;
  overflow-x: auto;
  background: #151515;
}
.planning-sheet-tab {
  min-width: 168px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 11px;
  border-radius: 10px 10px 4px 4px;
  border: 1px solid #374151;
  background: #222;
  color: #d1d5db;
  box-shadow: var(--of-shadow-dark-top-highlight-medium);
}
.planning-sheet-tab:hover { border-color:#60a5fa; background:#263143; }
.planning-sheet-tab.active {
  border-color: #38bdf8;
  background: linear-gradient(135deg,#12324a,#1f3b31);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.planning-sheet-tab.new-sheet {
  border-color:#f97316;
  background: linear-gradient(135deg,#3b2413,#1f2f26);
}
.planning-sheet-tab-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 950;
}
.planning-sheet-tab-type {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af;
  font-weight: 950;
}
.planning-sheet-tab.active .planning-sheet-tab-type { color:#bae6fd; }
.planning-sheet-tab-empty {
  width: 100%;
  padding: 10px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  border: 1px dashed #374151;
  border-radius: var(--of-radius-md);
  text-align: center;
}
.planning-plan-board { border-radius: 0 0 14px 14px; }
.planning-plan-scroll {
  width: 100%;
  overflow: auto;
  max-height: min(62vh, 760px);
  background: #171717;
}
.planning-plan-table {
  width: 100%;
  min-width: 1680px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #e5e7eb;
  font-size: 11px;
}
.planning-plan-table th,
.planning-plan-table td {
  border-right: 1px solid #242832;
  border-bottom: 1px solid #262b35;
  height: 34px;
  padding: 3px 5px;
  vertical-align: middle;
}
.planning-plan-table thead th {
  position: sticky;
  z-index: 8;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 950;
  color: #dbe4f0;
  text-align: center;
  box-shadow: 0 1px 0 #10131a;
}
.planning-plan-main-head th { top: 0; height: 34px; }
.planning-plan-sub-head th { top: 34px; height: 30px; background:#202124; }
.planning-plan-assignment-head {
  width: 300px;
  text-align: left !important;
  background: #263446 !important;
}
.planning-plan-stage-head { height: 34px; }
.planning-stage-group-blue.planning-plan-stage-head,
.planning-plan-main-head .planning-stage-group-blue { background:#172544; }
.planning-stage-group-green.planning-plan-stage-head,
.planning-plan-main-head .planning-stage-group-green { background:#16331f; }
.planning-plan-sub-head .planning-stage-group-blue { background:#222833; color:#cbd5e1; }
.planning-plan-sub-head .planning-stage-group-green { background:#222823; color:#cbd5e1; }
.planning-plan-client-head,
.planning-plan-main-head .planning-plan-client-head { background:#4b3213 !important; color:#fdecc8 !important; }
.planning-plan-action-head,
.planning-plan-main-head .planning-plan-action-head { background:#303030 !important; color:#e5e7eb !important; }
.planning-client-group { background:#2b241c; }
.planning-action-group { background:#202020; }
.planning-plan-row td { background:#f8fafc; color:#111827; }
.planning-plan-row:nth-child(even) td { background:#eef3f8; }
.planning-plan-row:hover td { background:#dff0ff; }
.planning-plan-row td.planning-stage-group-blue { background:#f5f8ff; }
.planning-plan-row td.planning-stage-group-green { background:#f3fbf4; }
.planning-plan-row:nth-child(even) td.planning-stage-group-blue { background:#edf3ff; }
.planning-plan-row:nth-child(even) td.planning-stage-group-green { background:#eaf7ed; }
.planning-plan-row:hover td.planning-stage-group-blue,
.planning-plan-row:hover td.planning-stage-group-green { background:#dff0ff; }
.planning-plan-assignment {
  width: 300px;
  background: #ffffff !important;
  box-shadow: 1px 0 0 #cbd5e1;
}
.planning-plan-table .planning-sticky-task {
  position: sticky;
  left: 0;
  z-index: 5;
}
.planning-plan-table thead .planning-sticky-task { z-index: 12; }
.planning-plan-task-line { display:flex; align-items:center; gap:6px; min-width:0; }
.planning-plan-row-index {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 5px;
  background:#e5e7eb;
  color:#475569;
  font-size: 10px;
  font-weight: 950;
}
.planning-plan-input {
  width: 100%;
  height: 25px;
  min-height: 25px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 5px;
  background: rgba(255,255,255,.55);
  color: #111827;
  font-size: 11px;
  font-weight: 800;
  outline: none;
}
.planning-plan-select { background: rgba(255,255,255,.72); }
.planning-plan-input:hover { border-color:#b7c4d4; background:#fff; }
.planning-plan-input:focus { border-color:#2563eb; background:#fff; box-shadow:0 0 0 1px rgba(37,99,235,.18); }
.planning-plan-name { color:#ea580c; font-weight: 950; font-size: 12px; }
.planning-plan-file-line {
  margin-top: 4px;
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.planning-plan-file-btn,
.planning-plan-clear-btn,
.planning-plan-delete-btn {
  min-height: 21px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background:#f8fafc;
  color:#1f2937;
  font-size: 9px;
  font-weight: 950;
  padding: 3px 6px;
  line-height: 1;
  white-space: nowrap;
}
.planning-plan-file-btn:hover { background:#dbeafe; border-color:#93c5fd; }
.planning-plan-clear-btn {
  width: 21px;
  padding:0;
  color:#b91c1c;
  background:#fee2e2;
  border-color:#fecaca;
  font-size: 13px;
}
.planning-plan-delete-btn { width:100%; color:#b91c1c; background:#fff1f2; border-color:#fecdd3; }
.planning-plan-delete-btn:hover { background:#ffe4e6; }
.planning-plan-total-chip {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width: 54px;
  color:#475569;
  font-size: 9px;
  font-weight: 950;
}
.planning-plan-empty {
  height: 60px;
  text-align: center;
  color:#6b7280;
  font-size: 12px;
  font-weight: 900;
  background:#f8fafc !important;
}
@media (min-width: 1280px) {
  .planning-plan-scroll { max-height: calc(100vh - 390px); }
  .planning-plan-table th:nth-child(n+2),
  .planning-plan-table td:nth-child(n+2) { width: 112px; }
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment { width: 310px; }
}
@media (max-width: 900px) {
  .planning-project-sheets-head { align-items:flex-start; flex-direction:column; }
  .planning-project-sheet-mode { justify-content:flex-start; }
  .planning-sheet-tab { min-width: 145px; }
  .planning-plan-table { min-width: 1500px; }
  .planning-plan-scroll { max-height: 58vh; }
  .planning-plan-assignment-head,
  .planning-plan-assignment { width: 260px; }
}

/* fixed_planning_gray_nav_order: planning sheet and sidebar keep Originfly gray tone */
.desktop-sidebar-button-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .5rem !important;
  width: 100% !important;
}
.desktop-sidebar-button-group .desktop-sidebar-btn {
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #444 !important;
  border-color: #4b5563 !important;
  color: #fff !important;
}
.desktop-sidebar-button-group .desktop-sidebar-btn:hover,
.desktop-sidebar-button-group .desktop-sidebar-btn.is-planning:hover {
  background: #555 !important;
  border-color: #6b7280 !important;
}
.desktop-sidebar-button-group .desktop-sidebar-btn.is-planning {
  background: #444 !important;
  border-color: #4b5563 !important;
}
.planning-modal-shell,
.planning-project-sheets,
.planning-sheet-wrap,
.planning-plan-board,
.planning-grid-board {
  background: #202020 !important;
}
.planning-sheet-toolbar {
  background: linear-gradient(180deg, #303030, #242424) !important;
  color: #e5e7eb !important;
  border-bottom-color: #4b5563 !important;
}
.planning-toolbar-icons {
  color: #d1d5db !important;
  border-right-color: #4b5563 !important;
}
.planning-toolbar-icons span {
  background: #3b3b3b !important;
  border: 1px solid #4b5563 !important;
  color: #e5e7eb !important;
}
.planning-toolbar-icons span:hover {
  background: #555 !important;
  color: #fff !important;
}
.planning-toolbar-title h3 { color:#fff !important; }
.planning-toolbar-title p { color:#a1a1aa !important; }
.planning-toolbar-btn.primary,
.planning-toolbar-btn.info,
.planning-toolbar-btn.success {
  background: #444 !important;
  border-color: #6b7280 !important;
  color:#fff !important;
}
.planning-toolbar-btn:hover { background:#555 !important; filter:none !important; }
.planning-project-sheets-head,
.planning-sheet-tabs-scroll {
  background: #202020 !important;
  border-color: #3f3f46 !important;
}
.planning-sheet-mode-btn.active,
.planning-sheet-tab.active,
.planning-sheet-tab.new-sheet {
  background: #444 !important;
  border-color: #6b7280 !important;
  color:#fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.planning-sheet-tab:hover { background:#333 !important; border-color:#6b7280 !important; }
.planning-sheet-tab.active .planning-sheet-tab-type { color:#d1d5db !important; }
.planning-plan-scroll { background:#191919 !important; }
.planning-plan-table {
  color:#e5e7eb !important;
  background:#191919 !important;
}
.planning-plan-table th,
.planning-plan-table td {
  border-right-color:#343a40 !important;
  border-bottom-color:#343a40 !important;
}
.planning-plan-table thead th,
.planning-plan-main-head th,
.planning-plan-sub-head th,
.planning-plan-assignment-head,
.planning-plan-stage-head,
.planning-stage-group-blue.planning-plan-stage-head,
.planning-stage-group-green.planning-plan-stage-head,
.planning-plan-main-head .planning-stage-group-blue,
.planning-plan-main-head .planning-stage-group-green,
.planning-plan-sub-head .planning-stage-group-blue,
.planning-plan-sub-head .planning-stage-group-green,
.planning-plan-client-head,
.planning-plan-main-head .planning-plan-client-head,
.planning-plan-action-head,
.planning-plan-main-head .planning-plan-action-head {
  background: #2b2b2b !important;
  color:#e5e7eb !important;
}
.planning-plan-main-head th { border-bottom-color:#444 !important; }
.planning-plan-sub-head th { background:#242424 !important; color:#cbd5e1 !important; }
.planning-plan-row td,
.planning-plan-row td.planning-stage-group-blue,
.planning-plan-row td.planning-stage-group-green,
.planning-plan-row:nth-child(even) td,
.planning-plan-row:nth-child(even) td.planning-stage-group-blue,
.planning-plan-row:nth-child(even) td.planning-stage-group-green,
.planning-client-group,
.planning-action-group {
  background:#202020 !important;
  color:#e5e7eb !important;
}
.planning-plan-row:nth-child(even) td,
.planning-plan-row:nth-child(even) td.planning-stage-group-blue,
.planning-plan-row:nth-child(even) td.planning-stage-group-green { background:#242424 !important; }
.planning-plan-row:hover td,
.planning-plan-row:hover td.planning-stage-group-blue,
.planning-plan-row:hover td.planning-stage-group-green { background:#303030 !important; }
.planning-plan-assignment {
  background:#242424 !important;
  box-shadow: 1px 0 0 #3f3f46 !important;
}
.planning-plan-row-index {
  background:#3b3b3b !important;
  color:#d1d5db !important;
}
.planning-plan-input,
.planning-plan-select,
select.planning-plan-input {
  background:#111 !important;
  border-color:#3f3f46 !important;
  color:#f9fafb !important;
}
.planning-plan-input:hover,
.planning-plan-input:focus {
  background:#171717 !important;
  border-color:#6b7280 !important;
  box-shadow: 0 0 0 1px rgba(107,114,128,.25) !important;
}
.planning-plan-input option,
.planning-plan-select option { background:#111 !important; color:#f9fafb !important; }
.planning-plan-name { color:#fff !important; }
.planning-plan-file-btn,
.planning-plan-clear-btn,
.planning-plan-delete-btn {
  background:#333 !important;
  border-color:#555 !important;
  color:#f3f4f6 !important;
}
.planning-plan-file-btn:hover { background:#444 !important; border-color:#6b7280 !important; }
.planning-plan-clear-btn,
.planning-plan-delete-btn { color:#fecaca !important; background:#3b2323 !important; border-color:#7f1d1d !important; }
.planning-plan-total-chip { color:#d1d5db !important; }
.planning-plan-empty { background:#202020 !important; color:#9ca3af !important; }

/* Planning: per-assignment pipeline selector */
.planning-row-pipeline-line {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}
.planning-row-pipeline-select {
    min-width: 170px;
    height: 28px;
    font-size: 10px !important;
    border-color: #555 !important;
    background: #242424 !important;
}
.planning-row-pipeline-select:disabled {
    cursor: not-allowed;
    opacity: .55;
    color: #9ca3af !important;
    border-color: #3f3f46 !important;
    background: #1b1b1b !important;
}
.planning-row-pipeline-btn {
    height: 28px;
    padding: 0 8px;
    border-radius: var(--of-radius-control-compact);
    border: 1px solid #5c5c5c;
    background: #333;
    color: #e5e5e5;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}
.planning-row-pipeline-btn:hover { background: #404040; }
.planning-row-pipeline-btn.danger {
    border-color: rgba(234, 88, 12, .45);
    background: rgba(154, 52, 18, .32);
    color: #fed7aa;
}
.planning-row-stage-caption {
    margin-top: 5px;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .03em;
}
.planning-row-stage-caption.is-waiting {
    color: #a3a3a3;
}
.planning-plan-disabled-stage {
    text-align: center;
    vertical-align: middle;
    background: #1f1f1f !important;
    color: #737373;
    font-size: 10px;
    font-weight: 900;
    border-left: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
}
.planning-plan-disabled-stage span {
    display: inline-block;
    opacity: .75;
}
@media (max-width: 900px) {
    .planning-row-pipeline-line { grid-template-columns: 1fr auto; }
    .planning-row-pipeline-btn.danger { display: none; }
}

/* Planning: simplified project sheet controls + amount labels update */
.planning-selected-project-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.85fr);
  gap: 12px;
  align-items: center;
}
.planning-strip-left,
.planning-strip-right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.planning-strip-right { justify-content: flex-end; }
.planning-strip-label {
  color: #8b8b8b;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.planning-strip-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 900;
}
.planning-strip-pipeline {
  max-width: 280px;
  height: 30px;
}
.planning-project-compact-create {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px);
  gap: 8px;
  padding: 8px 9px 0;
  background: #202020;
  border-top: 1px solid #333;
}
.planning-project-compact-input,
.planning-project-compact-select {
  min-height: 34px !important;
  height: 34px !important;
  padding: 7px 10px !important;
  border-radius: var(--of-radius-sm) !important;
  font-size: 12px !important;
}
.planning-sheet-toolbar.planning-sheet-toolbar-compact {
  grid-template-columns: minmax(240px, 1fr) auto !important;
  gap: 10px !important;
  min-height: 46px !important;
}
.planning-sheet-toolbar.planning-sheet-toolbar-compact .planning-toolbar-title {
  min-width: 0;
}
@media (min-width: 1280px) {
  .planning-content { max-width: none !important; padding-left: 18px !important; padding-right: 18px !important; }
  .planning-draft-bar { padding: 10px !important; }
  .planning-project-sheets { border-radius: var(--of-radius-lg) !important; }
  .planning-sheet-tabs-scroll { padding: 6px 8px !important; }
  .planning-sheet-tab { min-width: 150px !important; padding: 7px 10px !important; }
}
@media (max-width: 900px) {
  .planning-selected-project-strip { grid-template-columns: 1fr; }
  .planning-strip-left,
  .planning-strip-right { justify-content: flex-start; flex-wrap: wrap; }
  .planning-strip-pipeline { max-width: none; width: 100%; }
  .planning-project-compact-create { grid-template-columns: 1fr; }
  .planning-sheet-toolbar.planning-sheet-toolbar-compact { grid-template-columns: 1fr !important; }
}

/* Planning stage compact layout: colored stage headers + two-column mandays/amount with merged artist picker */
.planning-plan-stage-head.planning-stage-tone-0,
.planning-plan-main-head .planning-stage-tone-0 { background: linear-gradient(180deg, #334155, #273241) !important; color:#e5edf7 !important; }
.planning-plan-stage-head.planning-stage-tone-1,
.planning-plan-main-head .planning-stage-tone-1 { background: linear-gradient(180deg, #26413a, #20362f) !important; color:#dcfce7 !important; }
.planning-plan-stage-head.planning-stage-tone-2,
.planning-plan-main-head .planning-stage-tone-2 { background: linear-gradient(180deg, #42365a, #342b47) !important; color:#ede9fe !important; }
.planning-plan-stage-head.planning-stage-tone-3,
.planning-plan-main-head .planning-stage-tone-3 { background: linear-gradient(180deg, #4d3b24, #3a2f20) !important; color:#fef3c7 !important; }
.planning-plan-stage-head.planning-stage-tone-4,
.planning-plan-main-head .planning-stage-tone-4 { background: linear-gradient(180deg, #24424b, #203741) !important; color:#cffafe !important; }
.planning-plan-stage-head.planning-stage-tone-5,
.planning-plan-main-head .planning-stage-tone-5 { background: linear-gradient(180deg, #4a2f3a, #3b2731) !important; color:#fce7f3 !important; }

.planning-plan-sub-head .planning-stage-tone-0 { background:#202a36 !important; color:#dbeafe !important; }
.planning-plan-sub-head .planning-stage-tone-1 { background:#1f2c27 !important; color:#d1fae5 !important; }
.planning-plan-sub-head .planning-stage-tone-2 { background:#292438 !important; color:#ede9fe !important; }
.planning-plan-sub-head .planning-stage-tone-3 { background:#302719 !important; color:#fde68a !important; }
.planning-plan-sub-head .planning-stage-tone-4 { background:#1e2d33 !important; color:#cffafe !important; }
.planning-plan-sub-head .planning-stage-tone-5 { background:#30232a !important; color:#fbcfe8 !important; }

.planning-plan-row td.planning-stage-tone-0 { background: rgba(51, 65, 85, .26) !important; }
.planning-plan-row td.planning-stage-tone-1 { background: rgba(31, 72, 55, .25) !important; }
.planning-plan-row td.planning-stage-tone-2 { background: rgba(76, 59, 112, .24) !important; }
.planning-plan-row td.planning-stage-tone-3 { background: rgba(91, 67, 35, .24) !important; }
.planning-plan-row td.planning-stage-tone-4 { background: rgba(31, 73, 85, .24) !important; }
.planning-plan-row td.planning-stage-tone-5 { background: rgba(85, 48, 65, .24) !important; }
.planning-plan-row:hover td.planning-stage-tone-0,
.planning-plan-row:hover td.planning-stage-tone-1,
.planning-plan-row:hover td.planning-stage-tone-2,
.planning-plan-row:hover td.planning-stage-tone-3,
.planning-plan-row:hover td.planning-stage-tone-4,
.planning-plan-row:hover td.planning-stage-tone-5 { background:#303030 !important; }

.planning-stage-compact-cell {
  padding: 4px !important;
  min-width: 154px;
}
.planning-stage-cell-compact {
  display: grid;
  grid-template-rows: auto auto;
  gap: 4px;
  min-width: 0;
}
.planning-stage-num-grid {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) minmax(52px, 1fr);
  gap: 4px;
  min-width: 0;
}
.planning-stage-mini-input {
  height: 22px !important;
  min-height: 22px !important;
  font-size: 10px !important;
  padding: 1px 5px !important;
}
.planning-stage-artist-merged {
  grid-column: 1 / -1;
  height: 23px !important;
  min-height: 23px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-align: center;
}
.planning-plan-disabled-stage[colspan="2"] {
  min-width: 154px;
}
@media (min-width: 1280px) {
  .planning-plan-table { min-width: 1360px !important; }
  .planning-plan-table th:nth-child(n+2),
  .planning-plan-table td:nth-child(n+2) { width: 82px; }
  .planning-stage-compact-cell { min-width: 150px; }
}
@media (max-width: 900px) {
  .planning-plan-table { min-width: 1180px !important; }
  .planning-stage-compact-cell { min-width: 144px; }
}

/* fixed_planning_client_category_compact: client selector merged below totals; assignment category in task cell */
.planning-row-category-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 5px;
}
.planning-row-category-select {
  height: 23px !important;
  min-height: 23px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}
.planning-client-compact-cell {
  padding: 4px !important;
  min-width: 154px;
}
.planning-client-cell-compact {
  display: grid;
  grid-template-rows: auto auto;
  gap: 4px;
  min-width: 0;
}
.planning-client-name-merged {
  grid-column: 1 / -1;
  height: 23px !important;
  min-height: 23px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-align: center;
}
.planning-plan-table thead th.planning-plan-action-head[rowspan="2"] {
  vertical-align: middle;
}
@media (min-width: 1280px) {
  .planning-client-compact-cell { min-width: 150px; }
  .planning-plan-table { min-width: 1280px !important; }
}
@media (max-width: 900px) {
  .planning-client-compact-cell { min-width: 144px; }
}

/* fixed_planning_thumbnail_preview: show project and assignment thumbnails in Planning */
.planning-sheet-tab-with-thumb {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.planning-sheet-tab-thumb {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--of-radius-sm);
  border: 1px solid #4b5563;
  background: #2b2b2b;
  color: #d1d5db;
  font-size: 11px;
  font-weight: 950;
  overflow: hidden;
}
.planning-sheet-tab-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.planning-sheet-tab-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.planning-project-compact-create-with-thumb {
  grid-template-columns: minmax(230px, .75fr) minmax(220px, 1fr) minmax(150px, 220px) !important;
  align-items: center;
}
.planning-project-thumb-box {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.planning-project-thumb-preview {
  width: 46px;
  height: 36px;
  border-radius: var(--of-radius-sm);
  border: 1px dashed #6b7280;
  background: #151515;
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.planning-project-thumb-preview:hover {
  border-color: #9ca3af;
  background: #242424;
}
.planning-project-thumb-preview.has-image {
  border-style: solid;
  border-color: #52525b;
}
.planning-project-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.planning-project-thumb-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.planning-project-thumb-label {
  color: #9ca3af;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.planning-project-thumb-name {
  color: #f3f4f6;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-project-thumb-clear {
  width: 24px;
  height: 24px;
  border-radius: var(--of-radius-control-compact);
  border: 1px solid #7f1d1d;
  background: #3b2323;
  color: #fecaca;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}
.planning-strip-left-with-thumb {
  align-items: center !important;
}
.planning-strip-left-with-thumb .planning-project-thumb-box.strip-thumb {
  grid-template-columns: 48px minmax(96px, 160px) auto;
  max-width: 260px;
  flex: 0 1 260px;
}
.planning-strip-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.planning-plan-task-line-with-thumb {
  gap: 8px !important;
  align-items: stretch !important;
}
.planning-assignment-thumb-preview {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 64px;
  border-radius: var(--of-radius-sm);
  border: 1px dashed #5f6672;
  background: #191919;
  color: #d1d5db;
  font-size: 8px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
  overflow: hidden;
}
.planning-assignment-thumb-preview:hover {
  background: #2b2b2b;
  border-color: #9ca3af;
}
.planning-assignment-thumb-preview.has-image {
  border-style: solid;
  border-color: #6b7280;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.planning-assignment-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.planning-plan-task-line-with-thumb .planning-plan-name {
  min-height: 28px;
}
@media (max-width: 900px) {
  .planning-assignment-thumb-preview {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    min-height: 54px;
  }
}
@media (min-width: 1280px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment { width: 340px !important; }
}
@media (max-width: 900px) {
  .planning-project-compact-create-with-thumb { grid-template-columns: 1fr !important; }
  .planning-strip-left-with-thumb .planning-project-thumb-box.strip-thumb { max-width: none; width: 100%; grid-template-columns: 46px minmax(0, 1fr) auto; }
}

/* Planning project thumbnail cropper */
.planning-crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(3px);
}
.planning-crop-panel {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 52px);
  overflow: auto;
  border: 1px solid #5b6270;
  border-radius: var(--of-radius-panel);
  background: #252525;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: #e5e7eb;
}
.planning-crop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #3f3f46;
  background: #2f2f2f;
}
.planning-crop-head h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .04em;
}
.planning-crop-head p {
  margin: 3px 0 0;
  color: #aeb4bf;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.planning-crop-close {
  width: 30px;
  height: 30px;
  border-radius: var(--of-radius-md);
  border: 1px solid #575b63;
  background: #1d1d1d;
  color: #fca5a5;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}
.planning-crop-body {
  padding: 16px;
  display: grid;
  gap: 14px;
}
.planning-crop-preview {
  width: min(320px, 72vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 2px solid #737373;
  border-radius: var(--of-radius-2xl);
  background: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.planning-crop-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform .12s ease;
}
.planning-crop-controls {
  display: grid;
  gap: 8px;
}
.planning-crop-controls label {
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.planning-crop-controls input[type="range"] {
  width: 100%;
  accent-color: #6b7280;
}
.planning-crop-tip {
  padding: 9px 10px;
  border-radius: var(--of-radius-md);
  border: 1px solid #414141;
  background: #191919;
  color: #aeb4bf;
  font-size: 11px;
  font-weight: 700;
}
.planning-crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #3f3f46;
  background: #202020;
}
.planning-crop-btn {
  border-radius: var(--of-radius-control-workflow);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid #555;
}
.planning-crop-btn.muted {
  background: #333;
  color: #e5e7eb;
}
.planning-crop-btn.primary {
  background: #4b5563;
  color: #fff;
  border-color: #818cf8;
}
.planning-crop-btn.primary:hover { background: #5b6573; }

@media (max-width: 640px) {
  .planning-crop-overlay { align-items: flex-start; padding-top: 70px; }
  .planning-crop-actions { flex-direction: column-reverse; }
  .planning-crop-btn { width: 100%; }
}

/* planning_project_picker_strip_fix: dashboard-like project thumbnail strip inside Planning */
.planning-project-picker-strip-wrap {
  border: 1px solid #444b55;
  background: #2f2f2f;
  border-radius: var(--of-radius-xl);
  padding: 10px 12px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 20px rgba(0,0,0,.14);
}
.planning-project-picker-strip {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  overflow-x: auto;
  /* Keep the selected card's scale + blue ring inside the scroll viewport.
     Without this inset, the first project's left edge is clipped. */
  padding: 7px 8px 8px;
  scroll-padding-inline: 8px;
  min-height: 90px;
}
.planning-project-picker-tile {
  width: 72px;
  flex: 0 0 72px;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: .74;
  transition: transform .18s ease, opacity .18s ease;
}
.planning-project-picker-tile:hover { opacity: 1; transform: translateY(-1px); }
.planning-project-picker-tile.active { opacity: 1; }
.planning-project-picker-thumb {
  width: 68px;
  height: 68px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.10);
  background: #3a3a3a;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 7px 16px rgba(0,0,0,.22);
}
.planning-project-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.planning-project-picker-tile.active .planning-project-picker-thumb {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,.70), 0 0 0 4px #383838, 0 8px 18px rgba(0,0,0,.28);
}
.planning-project-picker-name {
  width: 92px;
  max-width: 92px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #cbd5e1;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: lowercase;
}
.planning-project-picker-add {
  width: 72px;
  height: 68px;
  flex: 0 0 72px;
  margin-top: 0;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.12);
  background: #3b3b3b;
  color: #b9c1cc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 300;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  box-shadow: 0 7px 16px rgba(0,0,0,.18);
}
.planning-project-picker-add:hover {
  background: #474747;
  color: #fff;
  transform: translateY(-1px);
}
.planning-project-picker-empty {
  min-width: 120px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 900;
  border: 1px dashed #555;
  border-radius: 13px;
  padding: 0 14px;
}
@media (max-width: 700px) {
  .planning-project-picker-strip-wrap { padding: 8px 9px 6px; border-radius: var(--of-radius-lg); }
  .planning-project-picker-strip { gap: 9px; min-height: 82px; }
  .planning-project-picker-tile, .planning-project-picker-add { width: 62px; flex-basis: 62px; }
  .planning-project-picker-thumb, .planning-project-picker-add { width: 60px; height: 60px; border-radius: var(--of-radius-lg); }
  .planning-project-picker-name { width: 76px; max-width: 76px; font-size: 9px; }
}

/* Planning project create overlay: keeps Planning open when using the + project tile */
.planning-project-create-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(8px);
}
.planning-project-create-panel {
  width: min(440px, calc(100vw - 28px));
  border-radius: var(--of-radius-panel);
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(56,56,56,0.98), rgba(38,38,38,0.98));
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  padding: 18px;
  position: relative;
}
.planning-project-create-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: var(--of-radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(25,25,25,0.85);
  color: #cbd5e1;
  font-size: 20px;
  line-height: 1;
}
.planning-project-create-close:hover { background: rgba(70,70,70,0.95); color: white; }
.planning-project-create-head h3 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.planning-project-create-head p {
  margin: 4px 36px 0 0;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
}
.planning-project-create-body {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  margin-top: 18px;
  align-items: start;
}
.planning-project-create-thumb-wrap { display: flex; justify-content: center; }
.planning-project-create-thumb {
  width: 104px;
  height: 104px;
  border-radius: var(--of-radius-panel);
  border: 2px dashed rgba(148, 163, 184, 0.42);
  background: rgba(17,17,17,0.42);
  color: #9ca3af;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.planning-project-create-thumb:hover { border-color: rgba(96, 165, 250, 0.82); color: #fff; background: rgba(59, 130, 246, 0.11); }
.planning-project-create-thumb.has-image { border-style: solid; padding: 0; }
.planning-project-create-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.planning-project-create-plus { font-size: 34px; font-weight: 300; line-height: 1; }
.planning-project-create-fields { display: flex; flex-direction: column; gap: 8px; }
.planning-project-create-fields label {
  color: #9ca3af;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.planning-project-create-input {
  width: 100%;
  border-radius: var(--of-radius-md);
  border: 1px solid rgba(107,114,128,0.85);
  background: rgba(10,10,10,0.68);
  color: #fff;
  padding: 11px 12px;
  outline: none;
  font-size: 13px;
  font-weight: 700;
}
.planning-project-create-input:focus { border-color: rgba(96,165,250,0.95); box-shadow: 0 0 0 1px rgba(96,165,250,0.35); }
.planning-project-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.planning-project-create-btn {
  border-radius: var(--of-radius-md);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,0.22);
  color: #fff;
}
.planning-project-create-btn.muted { background: rgba(75,85,99,0.72); }
.planning-project-create-btn.primary { background: rgba(37,99,235,0.95); border-color: rgba(96,165,250,0.55); }
.planning-project-create-btn:hover { filter: brightness(1.12); }
@media (max-width: 560px) {
  .planning-project-create-body { grid-template-columns: 1fr; }
  .planning-project-create-thumb { width: 112px; height: 112px; }
  .planning-project-create-actions { flex-direction: column; }
}

/* Planning per-project sheet indicator */
.planning-active-sheet-name {
  display: inline-flex;
  align-items: center;
  max-width: 320px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: var(--of-radius-pill);
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(30, 64, 175, 0.20);
  color: #bfdbfe;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .planning-active-sheet-name { max-width: 180px; margin-left: 4px; }
}

/* Assignment 3-dot menu fix
   Desktop assignment actions now open as a compact horizontal flyout beside
   the 3-dot button, so the Pipeline/Hold/Delete list does not drop down over
   the next assignment row. Mobile keeps the existing vertical popup. */
@media (min-width: 768px) {
  [data-mobile-assignment-actions-menu="true"] {
    top: 50% !important;
    left: calc(100% + 8px) !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: calc(100vw - 160px) !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border-radius: var(--of-radius-md) !important;
    z-index: 120 !important;
  }

  [data-mobile-assignment-actions-menu="true"] button {
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    border-bottom-width: 0 !important;
    border-right: 1px solid rgba(75, 85, 99, 0.85) !important;
    padding: 8px 12px !important;
    min-height: 38px !important;
    line-height: 1 !important;
  }

  [data-mobile-assignment-actions-menu="true"] button:last-child {
    border-right-width: 0 !important;
  }
}

/* planning_project_delete_and_empty_sheet_fix */
.planning-project-picker-tile-wrap {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.planning-project-picker-tile-wrap .planning-project-picker-tile {
  width: 72px;
  flex: 0 0 auto;
}
.planning-project-picker-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: var(--of-radius-pill);
  border: 1px solid rgba(248,113,113,.55);
  background: rgba(60,20,20,.92);
  color: #fecaca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
  z-index: 4;
}
.planning-project-picker-tile-wrap:hover .planning-project-picker-delete,
.planning-project-picker-tile-wrap.active .planning-project-picker-delete {
  opacity: 1;
  transform: scale(1);
}
.planning-project-picker-delete:hover {
  background: rgba(127,29,29,.98);
  color: #fff;
}
@media (max-width: 640px) {
  .planning-project-picker-tile-wrap,
  .planning-project-picker-tile-wrap .planning-project-picker-tile {
    width: 62px;
    flex-basis: 62px;
  }
  .planning-project-picker-delete {
    opacity: 1;
    top: -6px;
    right: -6px;
  }
}

/* Planning create project modal - match main New Project window style */
.planning-project-create-panel-main-style {
  width: min(600px, calc(100vw - 32px));
  padding: 44px 48px 48px;
  border-radius: var(--of-radius-panel);
  background: #242424;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 28px 90px rgba(0,0,0,0.58);
}
.planning-project-create-panel-main-style .planning-project-create-close {
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(32,32,32,0.92);
  color: #9ca3af;
  font-size: 24px;
  font-weight: 800;
}
.planning-project-create-panel-main-style .planning-project-create-close:hover {
  background: #333;
  color: #fff;
}
.planning-project-create-head-centered {
  text-align: center;
  max-width: 430px;
  margin: 0 auto;
}
.planning-project-create-head-centered h3 {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: none;
}
.planning-project-create-head-centered p {
  margin: 12px auto 0;
  color: #a7adb7;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 800;
  max-width: 410px;
}
.planning-project-create-body-main-style {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px;
}
.planning-project-create-body-main-style .planning-project-create-thumb-wrap {
  justify-content: center;
}
.planning-project-create-body-main-style .planning-project-create-thumb {
  width: 142px;
  height: 142px;
  border-radius: var(--of-radius-panel);
  border: 2px dashed rgba(156, 163, 175, 0.5);
  background: rgba(32,32,32,0.92);
  color: #9ca3af;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .08em;
  box-shadow: none;
  position: relative;
}
.planning-project-create-body-main-style .planning-project-create-thumb:hover {
  border-color: rgba(96, 165, 250, 0.8);
  background: rgba(42,42,42,0.98);
}
.planning-project-create-icon {
  width: 38px;
  height: 38px;
  opacity: .92;
}
.planning-project-thumb-change {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.56);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transition: opacity .18s ease;
}
.planning-project-create-thumb:hover .planning-project-thumb-change { opacity: 1; }
.planning-project-create-body-main-style .planning-project-create-fields {
  gap: 24px;
}
.planning-project-create-body-main-style .planning-project-create-fields label {
  margin-bottom: -14px;
  padding-left: 6px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}
.planning-project-create-body-main-style .planning-project-create-fields label span {
  color: #60a5fa;
}
.planning-project-create-body-main-style .planning-project-create-input {
  min-height: 66px;
  border-radius: var(--of-radius-control-large);
  padding: 0 24px;
  border-color: rgba(107, 114, 128, .85);
  background: rgba(16, 16, 16, .84);
  color: #f3f4f6;
  font-size: 19px;
  font-weight: 800;
}
.planning-project-create-body-main-style .planning-project-create-input:focus {
  border-color: rgba(59, 130, 246, .95);
  box-shadow: 0 0 0 1px rgba(59,130,246,.35);
}
.planning-project-create-submit {
  width: 100%;
  min-height: 68px;
  margin-top: 34px;
  border-radius: var(--of-radius-lg);
  background: #2563eb !important;
  border: 1px solid rgba(96, 165, 250, 0.55) !important;
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 640px) {
  .planning-project-create-panel-main-style {
    width: min(94vw, 560px);
    padding: 36px 28px 34px;
  }
  .planning-project-create-panel-main-style .planning-project-create-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .planning-project-create-body-main-style .planning-project-create-thumb {
    width: 132px;
    height: 132px;
  }
  .planning-project-create-body-main-style .planning-project-create-input,
  .planning-project-create-submit {
    min-height: 62px;
    font-size: 17px;
  }
}

/* Planning create project modal alignment fix - match main New Project modal */
.planning-project-create-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(6px);
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.planning-project-create-panel-main-style {
  width: min(610px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 36px) !important;
  overflow-y: auto !important;
  padding: 48px 44px 42px !important;
  border-radius: var(--of-radius-panel) !important;
  background: #242424 !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.62) !important;
  box-sizing: border-box !important;
  transform: none !important;
}
.planning-project-create-panel-main-style .planning-project-create-close {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--of-radius-pill) !important;
  border: 0 !important;
  background: rgba(31, 31, 31, 0.94) !important;
  color: #9ca3af !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.planning-project-create-head-centered {
  text-align: center !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
}
.planning-project-create-head-centered h3 {
  font-size: clamp(28px, 3vw, 34px) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  color: #f5f5f5 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
.planning-project-create-head-centered p {
  margin: 14px auto 0 !important;
  max-width: 420px !important;
  color: #a8adb6 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
}
.planning-project-create-body-main-style {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 30px !important;
  margin-top: 28px !important;
}
.planning-project-create-body-main-style .planning-project-create-thumb-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}
.planning-project-create-body-main-style .planning-project-create-thumb {
  width: 142px !important;
  height: 142px !important;
  flex: 0 0 142px !important;
  border-radius: var(--of-radius-panel) !important;
  border: 2px dashed rgba(156, 163, 175, 0.48) !important;
  background: rgba(31,31,31,0.94) !important;
  color: #9ca3af !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}
.planning-project-create-body-main-style .planning-project-create-fields {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}
.planning-project-create-body-main-style .planning-project-create-fields label {
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.planning-project-create-body-main-style .planning-project-create-fields label:not(:first-child) {
  margin-top: 18px !important;
}
.planning-project-create-body-main-style .planning-project-create-input {
  width: 100% !important;
  min-height: 66px !important;
  border-radius: var(--of-radius-control-large) !important;
  padding: 0 24px !important;
  border: 1px solid rgba(107, 114, 128, .85) !important;
  background: rgba(16, 16, 16, .84) !important;
  color: #f3f4f6 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}
.planning-project-create-submit {
  width: 100% !important;
  min-height: 68px !important;
  margin-top: 28px !important;
  border-radius: var(--of-radius-lg) !important;
  background: #2563eb !important;
  border: 1px solid rgba(96, 165, 250, 0.55) !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}
.planning-project-create-body-main-style .planning-project-create-fields .planning-project-records-toggle {
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(107, 114, 128, .7) !important;
  border-radius: var(--of-radius-lg) !important;
  background: rgba(16, 16, 16, .7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}
.planning-project-create-body-main-style .planning-project-create-fields .planning-project-records-toggle span {
  display: block !important;
  min-width: 0 !important;
  color: #f3f4f6 !important;
}
.planning-project-create-body-main-style .planning-project-create-fields .planning-project-records-toggle strong {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  color: #f9fafb !important;
}
.planning-project-create-body-main-style .planning-project-create-fields .planning-project-records-toggle small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
}
.planning-project-create-body-main-style .planning-project-create-fields .planning-project-records-toggle input {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  accent-color: #3b82f6 !important;
}
@media (max-width: 640px) {
  .planning-project-create-overlay {
    align-items: flex-start !important;
    padding: 14px !important;
  }
  .planning-project-create-panel-main-style {
    width: min(94vw, 560px) !important;
    padding: 44px 28px 34px !important;
  }
  .planning-project-create-head-centered {
    padding: 0 28px !important;
  }
  .planning-project-create-body-main-style .planning-project-create-thumb {
    width: 132px !important;
    height: 132px !important;
    flex-basis: 132px !important;
  }
  .planning-project-create-body-main-style .planning-project-create-input,
  .planning-project-create-submit {
    min-height: 62px !important;
    font-size: 17px !important;
  }
}

/* planning_mobile_new_project_fullscreen_v1_20261005:
   Planning owns a separate project-create overlay from the main dashboard.
   Make only the Planning New Project form a true edge-to-edge phone workspace;
   workspace choice / group creation keep their existing compact dialogs. */
@media (max-width: 767px) {
  .planning-project-create-overlay-project {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background: #242424 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .planning-project-create-overlay-project .planning-project-create-panel-main-style {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column !important;
  }

  .planning-project-create-overlay-project .planning-project-create-close {
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 14px !important;
  }

  .planning-project-create-overlay-project .planning-project-create-submit {
    margin-top: auto !important;
    flex: 0 0 auto !important;
    min-height: 50px !important;
  }
}

/* fixed_planning_required_rows: block create until rows are complete, but keep missing feedback text-only */
.planning-plan-row.planning-row-invalid td,
.planning-field-missing,
.planning-file-missing,
.planning-stage-missing {
  box-shadow: none !important;
  outline: none !important;
}
.planning-row-invalid-pulse td {
  animation: none !important;
}
.planning-row-validation-note {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(248, 113, 113, .45);
  border-radius: var(--of-radius-sm);
  background: rgba(127, 29, 29, .28);
  color: #fecaca;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 800;
}
.planning-row-validation-note strong {
  color: #ffffff;
  margin-right: 4px;
}

/* planning_assignment_thumbnail_crop_pro_fix: use the main thumbnail cropper style inside Planning */
.planning-crop-overlay-pro {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10080 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  background: rgba(0,0,0,.62) !important;
  backdrop-filter: blur(5px) !important;
}
.planning-crop-modal-pro {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,.24);
  background: linear-gradient(145deg, rgba(15,23,42,.92), rgba(38,38,38,.94));
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  color: #e5e7eb;
}
.planning-crop-header-pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148,163,184,.14);
  background: radial-gradient(circle at 12% 0%, rgba(14,165,233,.20), transparent 42%), rgba(2,6,23,.25);
}
.planning-crop-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.planning-crop-icon-pro {
  width: 44px;
  height: 44px;
  border-radius: var(--of-radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(125,211,252,.25);
  color: #bae6fd;
  font-size: 20px;
  box-shadow: 0 14px 36px rgba(14,165,233,.10);
}
.planning-crop-header-pro h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: .02em;
}
.planning-crop-header-pro p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}
.planning-crop-close-pro {
  width: 38px;
  height: 38px;
  border-radius: var(--of-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.18);
  font-size: 20px;
  font-weight: 950;
}
.planning-crop-close-pro:hover {
  color: #fff;
  background: rgba(51,65,85,.75);
}
.planning-crop-body-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
  max-height: calc(100dvh - 150px);
}
.planning-crop-stage-pro {
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.36);
  padding: 12px;
  box-shadow: var(--of-shadow-dark-top-highlight-medium);
}
.planning-crop-canvas-pro {
  height: min(440px, 52dvh);
  min-height: 320px;
  border-radius: var(--of-radius-panel);
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(148,163,184,.12);
}
.planning-crop-canvas-pro img {
  display: block;
  max-width: 100%;
}
.planning-crop-toolbar-pro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.planning-crop-tool-pro {
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--of-radius-control-large);
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.62);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 1000;
  transition: .18s;
}
.planning-crop-tool-pro:hover {
  transform: translateY(-1px);
  background: rgba(30,41,59,.82);
  border-color: rgba(125,211,252,.28);
  color: #fff;
}
.planning-crop-side-pro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.planning-crop-preview-card-pro {
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.30);
  padding: 16px;
  text-align: center;
}
.planning-crop-preview-title-pro {
  color: #64748b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 950;
}
.planning-crop-live-preview {
  width: 126px;
  height: 126px;
  margin: 10px auto 0;
  overflow: hidden;
  border: 1px solid rgba(125,211,252,.30);
  background: #111827;
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  border-radius: 22px;
}
.planning-crop-preview-caption-pro {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
  margin-top: 12px;
}
.planning-crop-tip-pro {
  border-radius: var(--of-radius-panel);
  border: 1px solid rgba(125,211,252,.18);
  background: rgba(14,165,233,.08);
  color: #bfdbfe;
  padding: 12px;
  font-size: 11px;
  line-height: 1.55;
  font-weight: 750;
}
.planning-crop-tip-pro div {
  color: #fff;
  font-weight: 950;
  margin-bottom: 4px;
}
.planning-crop-footer-pro {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(148,163,184,.12);
  background: rgba(2,6,23,.18);
}
.planning-crop-secondary-pro,
.planning-crop-primary-pro {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 1000;
  transition: .18s;
}
.planning-crop-secondary-pro {
  background: rgba(71,85,105,.66);
  border: 1px solid rgba(148,163,184,.22);
  color: #fff;
}
.planning-crop-primary-pro {
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.80));
  border: 1px solid rgba(125,211,252,.35);
  color: #fff;
  box-shadow: 0 16px 36px rgba(14,165,233,.20);
}
.planning-crop-primary-pro:hover,
.planning-crop-secondary-pro:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.planning-crop-modal-pro .cropper-view-box {
  outline: 2px solid rgba(56,189,248,.85);
  border-radius: var(--of-radius-panel);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.48);
}
.planning-crop-modal-pro .cropper-line,
.planning-crop-modal-pro .cropper-point {
  background-color: #38bdf8;
}
.planning-crop-modal-pro .cropper-face {
  background: transparent;
}
@media (max-width: 760px) {
  .planning-crop-modal-pro { width: calc(100vw - 16px); border-radius: 22px; }
  .planning-crop-body-pro {
    display: block;
    padding: 10px;
    max-height: calc(100dvh - 148px);
  }
  /* Mobile cropper stays focused on the image itself. Desktop keeps these helpers. */
  .planning-crop-toolbar-pro,
  .planning-crop-side-pro {
    display: none !important;
  }
  .planning-crop-stage-pro { padding: 8px; }
  .planning-crop-canvas-pro {
    height: min(62dvh, 620px);
    min-height: 260px;
  }
  .planning-crop-footer-pro { padding: 12px; }
  .planning-crop-secondary-pro, .planning-crop-primary-pro { flex: 1; }
}

/* Planning assignment left cell: large thumbnail + fields, based on main assignment card style */
.planning-plan-table th.planning-plan-assignment-head,
.planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
  min-width: 620px !important;
  width: 620px !important;
  max-width: 620px !important;
}
.planning-assignment-card-layout {
  display: grid;
  grid-template-columns: 210px minmax(300px, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 172px;
}
.planning-assignment-thumb-large-wrap {
  position: relative;
  display: flex;
  min-height: 168px;
}
.planning-thumb-row-index {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, .82);
  border: 1px solid rgba(148, 163, 184, .45);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.planning-assignment-thumb-preview.planning-assignment-thumb-large {
  width: 100%;
  height: auto;
  min-height: 168px;
  flex: 1 1 auto;
  border-radius: var(--of-radius-panel);
  border: 2px dashed #4b5563;
  background: linear-gradient(145deg, #111315, #25282c);
  font-size: 10px;
  letter-spacing: .08em;
}
.planning-assignment-thumb-preview.planning-assignment-thumb-large.has-image {
  border: 1px solid #374151;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.35);
}
.planning-assignment-thumb-preview.planning-assignment-thumb-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.planning-assignment-fields-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: flex-start;
}
.planning-assignment-name-large {
  min-height: 36px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .02em;
}
.planning-row-pipeline-line-large {
  grid-template-columns: minmax(0, 1fr) 32px 58px;
  gap: 8px;
}
.planning-plan-file-line-large {
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.planning-plan-file-line-large .planning-plan-file-btn,
.planning-plan-file-line-large .planning-plan-clear-btn {
  min-height: 27px;
}
@media (min-width: 1500px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 700px !important;
    width: 700px !important;
    max-width: 700px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 255px minmax(350px, 1fr);
    min-height: 210px;
  }
  .planning-assignment-thumb-large-wrap,
  .planning-assignment-thumb-preview.planning-assignment-thumb-large {
    min-height: 205px;
  }
}
@media (max-width: 900px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 460px !important;
    width: 460px !important;
    max-width: 460px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 132px minmax(250px, 1fr);
    gap: 10px;
    min-height: 126px;
  }
  .planning-assignment-thumb-large-wrap,
  .planning-assignment-thumb-preview.planning-assignment-thumb-large {
    min-height: 124px;
  }
  .planning-assignment-name-large {
    min-height: 32px !important;
  }
  .planning-row-pipeline-line-large {
    grid-template-columns: minmax(0, 1fr) 28px 48px;
  }
}

/* planning_crop_above_project_modal_fix: keep thumbnail crop window above Planning New Project popup */
.planning-crop-overlay-pro,
.planning-crop-overlay {
  z-index: 10080 !important;
}
.planning-crop-modal-pro,
.planning-crop-panel {
  position: relative;
  z-index: 10081 !important;
}

/* Planning auto-save badge */
.planning-autosave-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:var(--of-radius-lg);
    border:1px solid rgba(148,163,184,.28);
    background:rgba(31,41,55,.55);
    color:#cbd5e1;
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
    white-space:nowrap;
}
.planning-autosave-badge.is-saving,
.planning-autosave-badge.is-queued {
    border-color:rgba(245,158,11,.45);
    background:rgba(120,53,15,.25);
    color:#fde68a;
}
.planning-autosave-badge.is-saved {
    border-color:rgba(16,185,129,.35);
    background:rgba(6,78,59,.22);
    color:#bbf7d0;
}
.planning-autosave-badge.is-error {
    border-color:rgba(248,113,113,.45);
    background:rgba(127,29,29,.25);
    color:#fecaca;
}
@media (max-width: 768px) {
    .planning-autosave-badge { width:100%; }
}

/* planning_assignment_panel_compact_fix: tighter assignment cell layout in Planning */
.planning-plan-table th.planning-plan-assignment-head,
.planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
  min-width: 520px !important;
  width: 520px !important;
  max-width: 520px !important;
}
.planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
  padding: 6px !important;
  vertical-align: top !important;
}
.planning-assignment-card-layout {
  grid-template-columns: 150px minmax(330px, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  min-height: 118px !important;
}
.planning-assignment-thumb-large-wrap {
  min-height: 118px !important;
  height: 118px !important;
}
.planning-assignment-thumb-preview.planning-assignment-thumb-large {
  min-height: 118px !important;
  height: 118px !important;
  border-radius: var(--of-radius-xl) !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}
.planning-assignment-fields-panel {
  gap: 6px !important;
}
.planning-assignment-name-category-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 7px;
  align-items: center;
}
.planning-assignment-name-large {
  min-height: 31px !important;
  height: 31px !important;
  font-size: 12px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.planning-row-category-compact {
  min-height: 31px !important;
  height: 31px !important;
  font-size: 10px !important;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 22px !important;
}
.planning-row-pipeline-line-large.planning-row-pipeline-line-no-reset {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
.planning-row-pipeline-line-large.planning-row-pipeline-line-no-reset .planning-row-pipeline-select {
  min-height: 31px !important;
  height: 31px !important;
  font-size: 11px !important;
}
.planning-row-stage-caption {
  margin-top: -1px !important;
  line-height: 1.15 !important;
  min-height: 14px !important;
  font-size: 10px !important;
}
.planning-plan-file-line-large {
  gap: 5px !important;
  margin-top: 0 !important;
}
.planning-plan-file-line-large .planning-plan-file-btn,
.planning-plan-file-line-large .planning-plan-clear-btn {
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
}
.planning-plan-file-line-large .planning-plan-total-chip {
  min-height: 24px !important;
  padding: 3px 6px !important;
}
@media (min-width: 1500px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 560px !important;
    width: 560px !important;
    max-width: 560px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 165px minmax(365px, 1fr) !important;
    min-height: 126px !important;
  }
  .planning-assignment-thumb-large-wrap,
  .planning-assignment-thumb-preview.planning-assignment-thumb-large {
    min-height: 126px !important;
    height: 126px !important;
  }
  .planning-assignment-name-category-line {
    grid-template-columns: minmax(0, 1fr) 142px;
  }
}
@media (max-width: 900px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 390px !important;
    width: 390px !important;
    max-width: 390px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 104px minmax(260px, 1fr) !important;
    gap: 8px !important;
    min-height: 104px !important;
  }
  .planning-assignment-thumb-large-wrap,
  .planning-assignment-thumb-preview.planning-assignment-thumb-large {
    min-height: 104px !important;
    height: 104px !important;
  }
  .planning-assignment-name-category-line {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 5px;
  }
}

/* planning_use_bottom_space_fix: let assignment list/table use empty bottom area */
.planning-modal-shell > .planning-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 10px !important;
  padding-bottom: 8px !important;
}
.planning-modal-shell > .planning-content > * + * {
  margin-top: 0 !important;
}
.planning-project-picker-strip-wrap {
  flex: 0 0 auto !important;
}
.planning-sheet-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.planning-sheet-toolbar.planning-sheet-toolbar-compact {
  flex: 0 0 auto !important;
}
.planning-grid-board.planning-plan-board,
.planning-grid-board.planning-animation-plan-board {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.planning-grid-scroll.planning-plan-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
@media (min-width: 1024px) {
  .planning-modal-shell .planning-topbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .planning-modal-shell > .planning-content {
    padding-top: 10px !important;
  }
  .planning-project-picker-strip-wrap {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }
  .planning-project-picker-strip {
    min-height: 80px !important;
    padding-bottom: 4px !important;
  }
}

/* company_list_excel_sheet_20260709: compact spreadsheet-style company table */
.company-list-ui-card #company-list-results.company-sheet-scroll {
    display: block !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid rgba(75, 85, 99, 0.72);
    border-radius: var(--of-radius-2xl);
    background: rgba(10, 10, 10, 0.26);
    box-shadow: var(--of-shadow-dark-top-highlight-soft);
}
.company-sheet-table {
    width: 100%;
    min-width: 1320px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 11px;
}
.company-sheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(31,41,55,0.98), rgba(17,24,39,0.98));
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
    text-align: left;
    padding: 10px 9px;
    border-bottom: 1px solid rgba(96, 165, 250, 0.25);
    border-right: 1px solid rgba(75, 85, 99, 0.52);
    white-space: nowrap;
}
.company-sheet-table thead th:first-child,
.company-sheet-index { width: 44px; text-align: center; }
.company-sheet-table thead th:nth-child(2) { width: 220px; }
.company-sheet-table thead th:nth-child(3) { width: 118px; }
.company-sheet-table thead th:nth-child(4) { width: 116px; }
.company-sheet-table thead th:nth-child(5) { width: 150px; }
.company-sheet-table thead th:nth-child(6),
.company-sheet-table thead th:nth-child(7) { width: 94px; text-align: center; }
.company-sheet-table thead th:nth-child(8) { width: 140px; }
.company-sheet-table thead th:nth-child(9) { width: 180px; }
.company-sheet-table thead th:nth-child(10) { width: 260px; }
.company-sheet-row {
    background: rgba(31, 31, 31, 0.92);
    transition: background .14s ease, transform .14s ease;
}
.company-sheet-row:nth-child(even) {
    background: rgba(38, 38, 38, 0.84);
}
.company-sheet-row:hover {
    background: rgba(45, 55, 72, 0.72);
}
.company-sheet-row.company-row-red-500 .company-sheet-cell:first-child,
.company-sheet-row.company-row-orange-500 .company-sheet-cell:first-child,
.company-sheet-row.company-row-yellow-500 .company-sheet-cell:first-child {
    border-left: 3px solid currentColor;
}
.company-sheet-row.company-row-red-500 .company-sheet-cell:first-child { color: #f87171; }
.company-sheet-row.company-row-orange-500 .company-sheet-cell:first-child { color: #fb923c; }
.company-sheet-row.company-row-yellow-500 .company-sheet-cell:first-child { color: #facc15; }
.company-sheet-cell {
    padding: 8px 9px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(75, 85, 99, 0.42);
    border-right: 1px solid rgba(75, 85, 99, 0.36);
    color: #d1d5db;
    overflow: hidden;
}
.company-sheet-company-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.company-sheet-avatar {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    flex: 0 0 34px;
    font-size: 13px;
}
.company-sheet-name {
    color: #fff;
    font-weight: 900;
    line-height: 1.15;
    max-width: 150px;
}
.company-sheet-sub,
.company-sheet-muted {
    color: #9ca3af;
    font-size: 10px;
    line-height: 1.25;
}
.company-sheet-strong {
    color: #f9fafb;
    font-weight: 900;
    line-height: 1.2;
}
.company-sheet-center {
    text-align: center;
}
.company-sheet-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: var(--of-radius-pill);
    border: 1px solid rgba(75,85,99,0.7);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 1px 2px 1px 0;
}
.company-sheet-status.active { background: rgba(16,185,129,0.16); color: #bbf7d0; border-color: rgba(16,185,129,0.35); }
.company-sheet-status.warning { background: rgba(245,158,11,0.16); color: #fde68a; border-color: rgba(245,158,11,0.35); }
.company-sheet-status.danger { background: rgba(239,68,68,0.16); color: #fecaca; border-color: rgba(239,68,68,0.35); }
.company-sheet-status.trial { background: rgba(249,115,22,0.16); color: #fed7aa; border-color: rgba(249,115,22,0.35); }
.company-sheet-progress {
    height: 5px;
    width: 100%;
    border-radius: var(--of-radius-pill);
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(75,85,99,0.55);
    overflow: hidden;
}
.company-sheet-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.company-sheet-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.company-sheet-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 0 6px;
    border-radius: var(--of-radius-pill);
    border: 1px solid rgba(75,85,99,0.65);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.company-sheet-type-pill.allowed { color: #bbf7d0; background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.34); }
.company-sheet-type-pill.blocked { color: #fca5a5; background: rgba(127,29,29,0.18); border-color: rgba(239,68,68,0.28); text-decoration: line-through; }
.company-sheet-actions-cell {
    overflow: visible;
}
.company-sheet-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}
.company-sheet-action {
    min-height: 24px;
    padding: 4px 6px;
    border-radius: var(--of-radius-control-compact);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
    transition: transform .12s ease, filter .12s ease;
}
.company-sheet-action:hover { filter: brightness(1.12); transform: translateY(-1px); }
.company-sheet-action.green { background: #16a34a; border-color: #22c55e; }
.company-sheet-action.emerald { background: #059669; border-color: #10b981; }
.company-sheet-action.blue { background: #2563eb; border-color: #3b82f6; }
.company-sheet-action.purple { background: #7c3aed; border-color: #8b5cf6; }
.company-sheet-action.indigo { background: #4f46e5; border-color: #6366f1; }
.company-sheet-action.orange { background: #ea580c; border-color: #f97316; }
.company-sheet-action.red { background: #dc2626; border-color: #ef4444; }

@media (min-width: 1400px) {
    .company-sheet-table { min-width: 100%; }
}
@media (max-width: 767px) {
    .company-list-ui-card #company-list-results.company-sheet-scroll {
        border-radius: 13px;
        margin-left: -2px;
        margin-right: -2px;
    }
    .company-sheet-table {
        min-width: 1180px;
        font-size: 10px;
    }
    .company-sheet-table thead th,
    .company-sheet-cell {
        padding: 7px 7px;
    }
    .company-sheet-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .company-sheet-action {
        min-height: 28px;
        font-size: 9px;
    }
}

/* company_list_use_empty_space_20260709: make company sheet use the full window area */
.company-page-shell .company-button-tab-content {
    width: 100% !important;
    max-width: none !important;
}
.company-page-shell .company-single-panel-wrap.company-list-wrap,
.company-page-shell .company-tab-switch-wrap {
    width: 100% !important;
    max-width: min(2140px, calc(100vw - 36px)) !important;
}
.company-list-ui-card {
    width: 100% !important;
    max-width: none !important;
}
.company-list-ui-card .company-results-card,
.company-list-ui-card .company-list-results-wrap,
.company-list-ui-card .company-sheet-scroll,
.company-list-ui-card .company-list-empty-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: block !important;
}
.company-list-ui-card .company-sheet-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
    border: 1px solid rgba(75, 85, 99, 0.72);
    border-radius: var(--of-radius-2xl);
    background: rgba(10, 10, 10, 0.26);
    box-shadow: var(--of-shadow-dark-top-highlight-soft);
    max-height: calc(100dvh - 360px);
}
.company-list-ui-card .company-sheet-table {
    width: 100% !important;
    min-width: 1420px;
}
.company-list-ui-card .company-results-card {
    min-height: calc(100dvh - 360px);
}
.company-list-ui-card .company-list-workflow {
    width: 100% !important;
}
@media (min-width: 1600px) {
    .company-page-shell .company-single-panel-wrap.company-list-wrap,
    .company-page-shell .company-tab-switch-wrap {
        max-width: calc(100vw - 36px) !important;
    }
    .company-list-ui-card .company-sheet-table {
        min-width: 100% !important;
    }
    .company-list-ui-card .company-results-card {
        min-height: calc(100dvh - 340px);
    }
    .company-list-ui-card .company-sheet-scroll {
        max-height: calc(100dvh - 340px);
    }
}
@media (max-width: 767px) {
    .company-page-shell .company-single-panel-wrap.company-list-wrap,
    .company-page-shell .company-tab-switch-wrap {
        max-width: calc(100vw - 16px) !important;
    }
    .company-list-ui-card .company-sheet-scroll {
        max-height: calc(100dvh - 390px);
    }
    .company-list-ui-card .company-sheet-table {
        min-width: 1180px !important;
    }
}

/* Planning: inactive pipeline stages stay blank, not as disabled input blocks */
.planning-plan-empty-stage {
  background: #171717 !important;
  border-left: 1px solid #232832 !important;
  border-right: 1px solid #232832 !important;
  color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.planning-plan-empty-stage::after {
  content: "";
  display: block;
  height: 22px;
}

/* planning_toolbar_save_status_move_20260710: replace title/subtitle text with autosave badge */
.planning-toolbar-save-status {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width: 0;
}
.planning-toolbar-save-status .planning-autosave-badge {
  min-width: 138px;
}

/* planning_asset_category_row_filter_20260710: filter visible planning rows by assignment asset category */
/* planning_filter_heading_remove_20260710: keep toolbar clean by removing visible filter heading */
.planning-sheet-toolbar.planning-sheet-toolbar-compact {
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 430px) auto !important;
  align-items: center !important;
}
.planning-toolbar-filters {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  justify-self: stretch;
}
.planning-filter-label {
  font-size: 9px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9ca3af;
  font-weight: 900;
}
.planning-filter-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.planning-category-filter-select {
  min-height: 31px !important;
  height: 31px !important;
  border-color: rgba(59, 130, 246, .38) !important;
  background: #111827 !important;
  color: #e5e7eb !important;
}
.planning-filter-count {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(59, 130, 246, .28);
  background: rgba(37, 99, 235, .12);
  color: #bfdbfe;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .planning-sheet-toolbar.planning-sheet-toolbar-compact {
    grid-template-columns: 1fr !important;
  }
  .planning-toolbar-filters,
  .planning-toolbar-actions {
    width: 100%;
  }
}

/* company_window_add_popup_ui_fix_20260710: move Add Company into search bar and show create form as popup */
.company-add-popup-backdrop {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(6px);
}
.company-add-popup-wrap {
    width: min(1180px, calc(100vw - 36px));
    max-height: min(720px, calc(100dvh - 64px));
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.48);
}
.company-add-popup-wrap .company-add-form {
    margin-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(42,42,42,0.98), rgba(31,31,31,0.98)) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
}
.company-list-panel .company-list-workflow {
    gap: 10px !important;
}
.company-list-panel .company-results-card {
    border-top: 0 !important;
    padding-top: 0 !important;
}
@media (min-width: 1300px) {
    .company-add-popup-wrap .company-add-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .company-add-popup-wrap .xl\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }
}
@media (max-width: 767px) {
    .company-add-popup-backdrop {
        align-items: flex-start;
        padding: 12px;
    }
    .company-add-popup-wrap {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: var(--of-radius-2xl);
    }
}

/* company_button_inside_filter_row_fix_20260710: keep Add Company button inside the Companies toolbar */
.company-list-ui-card .company-list-controls-grid {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) minmax(0, 160px) !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.company-list-ui-card .company-list-controls-grid > * {
    min-width: 0;
}
.company-list-ui-card .company-list-controls-grid .company-add-open-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    white-space: nowrap;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
@media (max-width: 767px) {
    .company-list-ui-card .company-list-controls-grid {
        grid-template-columns: 1fr !important;
        overflow: visible;
    }
    .company-list-ui-card .company-list-controls-grid .company-add-open-btn {
        min-height: 46px !important;
    }
}

/* planning_close_near_totals_fix: remove Back button and place close beside totals */
.planning-topbar-right {
  flex: 0 1 auto;
}
.planning-topbar-stats {
  justify-content: flex-end;
}
.planning-top-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--of-radius-pill);
  border: 1px solid rgba(75, 85, 99, .85);
  background: #202020;
  color: #d1d5db;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.planning-top-close:hover {
  background: #2b2b2b;
  color: #fff;
  border-color: rgba(107, 114, 128, .95);
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .planning-topbar-right {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
  }
  .planning-topbar-stats {
    justify-content: flex-start;
  }
}

/* planning_row_clutter_cleanup_fix: remove thumbnail/summary clutter from Planning rows */
.planning-plan-table th.planning-plan-assignment-head,
.planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
  min-width: 500px !important;
  width: 500px !important;
  max-width: 500px !important;
}
.planning-assignment-card-layout.planning-assignment-card-layout-clean {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 94px !important;
}
.planning-assignment-card-layout-clean .planning-assignment-fields-panel {
  width: 100% !important;
}
.planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 128px !important;
  gap: 7px !important;
  align-items: center !important;
}
.planning-inline-row-index {
  position: static !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--of-radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(17, 24, 39, .82) !important;
  border: 1px solid rgba(148, 163, 184, .45) !important;
  color: #e5e7eb !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}
.planning-plan-file-line-clean {
  min-height: 24px !important;
}
@media (min-width: 1500px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 540px !important;
    width: 540px !important;
    max-width: 540px !important;
  }
  .planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
    grid-template-columns: 30px minmax(0, 1fr) 142px !important;
  }
}
@media (max-width: 900px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 360px !important;
    width: 360px !important;
    max-width: 360px !important;
  }
  .planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
    grid-template-columns: 26px minmax(0, 1fr) 104px !important;
    gap: 5px !important;
  }
}

/* planning_name_input_width_restore_fix_20260710: keep restored thumbnail box and make assignment name field wide again */
.planning-plan-table th.planning-plan-assignment-head,
.planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
  min-width: 900px !important;
  width: 900px !important;
  max-width: 900px !important;
}
.planning-assignment-card-layout {
  display: grid !important;
  grid-template-columns: 150px minmax(730px, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}
.planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
  grid-template-columns: minmax(0, 1fr) 142px !important;
  gap: 7px !important;
}
@media (min-width: 1500px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 930px !important;
    width: 930px !important;
    max-width: 930px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 150px minmax(760px, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 560px !important;
    width: 560px !important;
    max-width: 560px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 132px minmax(408px, 1fr) !important;
  }
  .planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 6px !important;
  }
}

/* planning_stage_space_rebalance_fix_20260710: reduce empty assignment-column length and give more room to stage/client boxes */
.planning-plan-table th.planning-plan-assignment-head,
.planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
  min-width: 700px !important;
  width: 700px !important;
  max-width: 700px !important;
}
.planning-assignment-card-layout {
  grid-template-columns: 150px minmax(520px, 1fr) !important;
}
.planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
  grid-template-columns: minmax(0, 1fr) 142px !important;
}
.planning-plan-table th:nth-child(n+2),
.planning-plan-table td:nth-child(n+2) {
  width: 88px !important;
}
.planning-stage-compact-cell,
.planning-client-compact-cell,
.planning-plan-disabled-stage[colspan="2"] {
  min-width: 176px !important;
}
.planning-plan-table th.planning-plan-action-head,
.planning-plan-table td.planning-action-group {
  width: 118px !important;
  min-width: 118px !important;
}
@media (min-width: 1500px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 720px !important;
    width: 720px !important;
    max-width: 720px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 150px minmax(550px, 1fr) !important;
  }
  .planning-plan-table th:nth-child(n+2),
  .planning-plan-table td:nth-child(n+2) {
    width: 92px !important;
  }
  .planning-stage-compact-cell,
  .planning-client-compact-cell,
  .planning-plan-disabled-stage[colspan="2"] {
    min-width: 184px !important;
  }
}
@media (max-width: 900px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 520px !important;
    width: 520px !important;
    max-width: 520px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 132px minmax(368px, 1fr) !important;
  }
  .planning-stage-compact-cell,
  .planning-client-compact-cell,
  .planning-plan-disabled-stage[colspan="2"] {
    min-width: 150px !important;
  }
}

/* planning_stage_space_shorten_again_fix_20260710: shorten assignment column again and pass space to stage/client boxes */
.planning-plan-table th.planning-plan-assignment-head,
.planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
  min-width: 600px !important;
  width: 600px !important;
  max-width: 600px !important;
}
.planning-assignment-card-layout {
  grid-template-columns: 150px minmax(430px, 1fr) !important;
}
.planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
  grid-template-columns: minmax(0, 1fr) 132px !important;
}
.planning-plan-table th:nth-child(n+2),
.planning-plan-table td:nth-child(n+2) {
  width: 98px !important;
}
.planning-stage-compact-cell,
.planning-client-compact-cell,
.planning-plan-disabled-stage[colspan="2"] {
  min-width: 196px !important;
}
@media (min-width: 1500px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 610px !important;
    width: 610px !important;
    max-width: 610px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 150px minmax(440px, 1fr) !important;
  }
  .planning-plan-table th:nth-child(n+2),
  .planning-plan-table td:nth-child(n+2) {
    width: 102px !important;
  }
  .planning-stage-compact-cell,
  .planning-client-compact-cell,
  .planning-plan-disabled-stage[colspan="2"] {
    min-width: 204px !important;
  }
}
@media (max-width: 900px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 490px !important;
    width: 490px !important;
    max-width: 490px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 132px minmax(338px, 1fr) !important;
  }
  .planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
    grid-template-columns: minmax(0, 1fr) 104px !important;
  }
  .planning-stage-compact-cell,
  .planning-client-compact-cell,
  .planning-plan-disabled-stage[colspan="2"] {
    min-width: 156px !important;
  }
}

/* planning_mobile_tablet_responsive_fix_20260711
   Responsive Planning layout only. Desktop (1200px and wider) is intentionally unchanged. */
@media (max-width: 1199px) {
  .planning-modal-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .planning-modal-shell .planning-topbar {
    padding: 14px 16px !important;
    gap: 10px !important;
  }
  .planning-modal-shell > .planning-content {
    padding: 12px !important;
    gap: 12px !important;
    overflow-x: hidden !important;
  }
  .planning-project-picker-strip-wrap,
  .planning-sheet-wrap,
  .planning-grid-board.planning-plan-board,
  .planning-grid-board.planning-animation-plan-board {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .planning-project-picker-strip-wrap {
    overflow: hidden !important;
  }
  .planning-project-picker-strip {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .planning-project-picker-strip > * {
    scroll-snap-align: start;
  }
  .planning-sheet-toolbar.planning-sheet-toolbar-compact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .planning-toolbar-save-status,
  .planning-toolbar-save-status .planning-autosave-badge {
    width: 100% !important;
    max-width: none !important;
  }
  .planning-toolbar-actions.planning-toolbar-actions-with-filter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 9px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .planning-category-filter-control {
    min-width: 0 !important;
    width: 100% !important;
  }
  .planning-category-filter-control > span {
    display: none !important;
  }
  .planning-category-filter-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
  }
  .planning-filter-count-chip {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .planning-toolbar-btn {
    min-height: 44px !important;
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  .planning-toolbar-actions.planning-toolbar-actions-with-filter .planning-toolbar-btn {
    grid-column: auto !important;
  }
  .planning-grid-scroll.planning-plan-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .planning-plan-table {
    width: max-content !important;
    min-width: 100% !important;
  }
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: 430px !important;
    width: 430px !important;
    max-width: 430px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 116px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 112px !important;
    width: 100% !important;
  }
  .planning-assignment-thumb-large-wrap,
  .planning-assignment-thumb-preview.planning-assignment-thumb-large {
    width: 116px !important;
    min-width: 116px !important;
    height: 112px !important;
    min-height: 112px !important;
  }
  .planning-assignment-name-category-line.planning-assignment-name-category-line-clean {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  .planning-row-category-select.planning-row-category-compact,
  .planning-assignment-name-large,
  .planning-row-pipeline-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .planning-row-stage-caption {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .planning-stage-compact-cell,
  .planning-client-compact-cell,
  .planning-plan-disabled-stage[colspan="2"] {
    min-width: 148px !important;
  }
  .planning-plan-table th:nth-child(n+2),
  .planning-plan-table td:nth-child(n+2) {
    width: 74px !important;
  }
  .planning-plan-table th.planning-plan-action-head,
  .planning-plan-table td.planning-action-group {
    min-width: 92px !important;
    width: 92px !important;
  }
}

@media (max-width: 767px) {
  .planning-modal-shell .planning-topbar {
    padding: 12px !important;
  }
  .planning-modal-shell .planning-topbar h2 {
    font-size: 22px !important;
  }
  .planning-topbar-right {
    width: 100% !important;
    align-items: center !important;
  }
  .planning-topbar-stats {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .planning-topbar-stats > span {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .planning-top-close {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }
  .planning-modal-shell > .planning-content {
    padding: 10px !important;
  }
  .planning-sheet-wrap {
    border-radius: var(--of-radius-2xl) !important;
  }
  .planning-toolbar-actions.planning-toolbar-actions-with-filter {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .planning-toolbar-actions.planning-toolbar-actions-with-filter .planning-toolbar-btn {
    grid-column: 1 / -1 !important;
  }
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: min(340px, calc(100vw - 34px)) !important;
    width: min(340px, calc(100vw - 34px)) !important;
    max-width: min(340px, calc(100vw - 34px)) !important;
  }
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    padding: 8px !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 104px !important;
  }
  .planning-assignment-thumb-large-wrap,
  .planning-assignment-thumb-preview.planning-assignment-thumb-large {
    width: 94px !important;
    min-width: 94px !important;
    height: 104px !important;
    min-height: 104px !important;
    border-radius: 13px !important;
  }
  .planning-assignment-fields-panel {
    gap: 5px !important;
  }
  .planning-assignment-name-large,
  .planning-row-category-select.planning-row-category-compact,
  .planning-row-pipeline-select {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11px !important;
  }
  .planning-row-stage-caption {
    font-size: 10px !important;
  }
  .planning-plan-file-btn,
  .planning-plan-clear-btn {
    min-height: 32px !important;
  }
  .planning-stage-compact-cell,
  .planning-client-compact-cell,
  .planning-plan-disabled-stage[colspan="2"] {
    min-width: 140px !important;
  }
  .planning-plan-table th.planning-plan-action-head,
  .planning-plan-table td.planning-action-group {
    min-width: 82px !important;
    width: 82px !important;
  }
}

@media (max-width: 420px) {
  .planning-plan-table th.planning-plan-assignment-head,
  .planning-plan-table td.planning-plan-assignment.planning-assignment-cell-wide {
    min-width: calc(100vw - 28px) !important;
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }
  .planning-assignment-card-layout {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
  .planning-assignment-thumb-large-wrap,
  .planning-assignment-thumb-preview.planning-assignment-thumb-large {
    width: 82px !important;
    min-width: 82px !important;
    height: 100px !important;
    min-height: 100px !important;
  }
}

/* planning_mobile_card_ui_fix_20260712 — mobile only; desktop/tablet desktop layout unchanged */
@media (max-width: 767px) {
  .planning-grid-board.planning-plan-board { border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
  .planning-mobile-cards { display: grid; gap: 12px; width: 100%; }
  .planning-mobile-card { border: 1px solid #475569; border-radius: var(--of-radius-2xl); background: #202020; padding: 12px; display: grid; gap: 12px; min-width: 0; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .planning-mobile-card-head { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; }
  .planning-mobile-card-number { width: 34px; height: 34px; border-radius: var(--of-radius-md); display: grid; place-items: center; background: #3f4650; border: 1px solid #64748b; font-weight: 800; }
  .planning-mobile-card-head strong { font-size: 14px; }
  .planning-mobile-delete { min-height: 36px; border-radius: var(--of-radius-md); padding: 0 12px; background: #3b2024; border: 1px solid #7f1d1d; color: #fecaca; font-weight: 800; }
  .planning-mobile-main { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 10px; align-items: stretch; }
  .planning-mobile-thumb { width: 96px !important; min-width: 96px !important; height: 112px !important; min-height: 112px !important; border-radius: var(--of-radius-xl) !important; overflow: hidden; }
  .planning-mobile-main-fields { display: grid; gap: 8px; min-width: 0; }
  .planning-mobile-field, .planning-mobile-two-col label { display: grid; gap: 5px; min-width: 0; }
  .planning-mobile-field > span, .planning-mobile-two-col label > span { color: #aeb7c4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
  .planning-mobile-card .planning-plan-input { width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; font-size: 13px !important; border-radius: var(--of-radius-md) !important; padding: 0 10px !important; }
  .planning-mobile-input-row { display: flex; gap: 8px; }
  .planning-mobile-input-row .planning-plan-file-btn { flex: 1 1 auto; min-height: 42px; justify-content: center; }
  .planning-modal-shell .planning-plan-file-btn.has-input {
    background: var(--of-status-success-text) !important;
    border-color: var(--of-status-success-border) !important;
    color: var(--of-status-success-bg) !important;
  }
  .planning-mobile-input-row .planning-plan-clear-btn { min-width: 72px; min-height: 42px; border-radius: var(--of-radius-md); }
  .planning-mobile-details { border: 1px solid #3f4855; border-radius: var(--of-radius-lg); background: #181818; overflow: hidden; }
  .planning-mobile-details > summary { list-style: none; min-height: 46px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 800; color: #f3f4f6; }
  .planning-mobile-details > summary::-webkit-details-marker { display:none; }
  .planning-mobile-details > summary::after { content: '⌄'; font-size: 18px; transition: transform .18s ease; }
  .planning-mobile-details[open] > summary::after { transform: rotate(180deg); }
  .planning-mobile-details > summary span { margin-left: auto; color: #94a3b8; font-size: 11px; font-weight: 700; }
  .planning-mobile-stage-list, .planning-mobile-client-block { border-top: 1px solid #343b46; padding: 10px; display: grid; gap: 10px; }
  .planning-mobile-stage { border: 1px solid #394351; border-radius: var(--of-radius-lg); padding: 10px; display: grid; gap: 9px; background: #22252a; }
  .planning-mobile-stage-title { font-size: 13px; font-weight: 900; color: #e5e7eb; }
  .planning-mobile-two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .planning-mobile-empty, .planning-mobile-no-stage { padding: 24px 14px; border: 1px dashed #475569; border-radius: var(--of-radius-xl); text-align: center; color: #cbd5e1; background: #1c1c1c; }
  .planning-sheet-toolbar.planning-sheet-toolbar-compact { position: sticky; top: 0; z-index: 20; background: #262626 !important; border-bottom: 1px solid #414141; }
  .planning-toolbar-actions.planning-toolbar-actions-with-filter { grid-template-columns: minmax(0,1fr) auto !important; }
  .planning-toolbar-actions.planning-toolbar-actions-with-filter .planning-toolbar-btn { grid-column: auto !important; }
  .planning-toolbar-actions.planning-toolbar-actions-with-filter .planning-toolbar-btn:last-child { grid-column: 1 / -1 !important; }
}

/* planning_mobile_whole_window_scroll_fix_20260712
   Mobile only: scroll the complete Planning workspace so the project strip,
   autosave/filter controls and assignment list move together. Desktop/tablet
   layout is intentionally unchanged. */
@media (max-width: 767px) {
  .planning-modal-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Keep Close reachable while the mobile Planning workspace scrolls. */
  .planning-modal-shell > .planning-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    flex-shrink: 0;
    background: #303030;
  }

  .planning-modal-shell > .planning-content {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .planning-project-picker-strip-wrap,
  .planning-sheet-wrap,
  .planning-grid-board.planning-plan-board,
  .planning-grid-board.planning-animation-plan-board {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .planning-sheet-toolbar.planning-sheet-toolbar-compact {
    position: static !important;
    top: auto !important;
  }

  /* Fallback table layout: keep horizontal swipe, but let the outer Planning
     window handle all vertical scrolling so the assignment list gets full room. */
  .planning-grid-scroll.planning-plan-scroll {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .planning-plan-table thead th {
    position: static !important;
    top: auto !important;
  }

  .planning-mobile-cards {
    padding-bottom: 4px;
  }
}

/* planning_mobile_assignment_accordion_20260712
   Mobile only: keep each assignment compact. Tapping the assignment summary
   reveals pipeline, input files, stage planning and client totals. */
@media (max-width: 767px) {
  .planning-mobile-card {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .planning-mobile-card-summary {
    display: grid;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease;
  }

  .planning-mobile-card-summary:active {
    background: rgba(255,255,255,.035);
  }

  .planning-mobile-card.is-expanded .planning-mobile-card-summary {
    background: #242424;
    border-bottom: 1px solid #3f4855;
  }

  .planning-mobile-card-head {
    grid-template-columns: 34px minmax(0, 1fr) 36px auto !important;
  }

  .planning-mobile-card-head.planning-mobile-card-head-with-create {
    grid-template-columns: 34px minmax(0, 1fr) auto 32px auto !important;
  }

  .planning-mobile-create-summary {
    width: auto !important;
    min-width: 52px;
    min-height: 32px;
    padding: 0 9px;
    font-size: 10px;
  }

  .planning-mobile-card-title {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .planning-mobile-card-title strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .planning-mobile-card-title span {
    color: #94a3b8;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em;
  }

  .planning-mobile-expand-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--of-radius-md);
    border: 1px solid #536173;
    background: #303741;
    color: #f8fafc;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    transition: transform .18s ease, background-color .18s ease;
  }

  .planning-mobile-card.is-expanded .planning-mobile-expand-toggle {
    transform: rotate(180deg);
    background: #3b4654;
  }

  .planning-mobile-card-expandable {
    padding: 12px;
    display: grid;
    gap: 12px;
    background: #1d1d1d;
  }

  .planning-mobile-card-expandable[hidden] {
    display: none !important;
  }

  .planning-mobile-card.is-collapsed {
    box-shadow: 0 5px 16px rgba(0,0,0,.18);
  }
}

@media (max-width: 420px) {
  .planning-mobile-card-head {
    grid-template-columns: 32px minmax(0, 1fr) 34px auto !important;
    gap: 6px !important;
  }

  .planning-mobile-card-number {
    width: 32px !important;
    height: 32px !important;
  }

  .planning-mobile-expand-toggle {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .planning-mobile-delete {
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
}

/* planning_mobile_complete_card_status_20260712
   Mobile only: refined chevron control and a light green state when every
   required planning field for an assignment is complete. */
@media (max-width: 767px) {
  .planning-mobile-expand-toggle {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: var(--of-radius-pill) !important;
    border: 1px solid #596779 !important;
    background: rgba(51, 65, 85, .58) !important;
    color: #e5edf7 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    padding: 0 !important;
  }

  .planning-mobile-expand-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: transform .18s ease;
  }

  .planning-mobile-card.is-expanded .planning-mobile-expand-toggle {
    transform: none !important;
    background: rgba(71, 85, 105, .72) !important;
  }

  .planning-mobile-card.is-expanded .planning-mobile-expand-toggle svg {
    transform: rotate(180deg);
  }

  .planning-mobile-card.is-complete {
    border-color: #3f946d !important;
    background: #203029 !important;
    box-shadow: 0 6px 20px rgba(21, 128, 85, .14) !important;
  }

  .planning-mobile-card.is-complete .planning-mobile-card-summary {
    background: linear-gradient(180deg, rgba(65, 139, 101, .18), rgba(42, 91, 70, .10));
  }

  .planning-mobile-card.is-complete.is-expanded .planning-mobile-card-summary {
    border-bottom-color: rgba(91, 177, 132, .42);
  }

  .planning-mobile-card.is-complete .planning-mobile-card-number {
    background: #315b48 !important;
    border-color: #5ca37e !important;
    color: #ecfff5 !important;
  }

  .planning-mobile-card.is-complete .planning-mobile-card-title strong,
  .planning-mobile-card.is-complete .planning-mobile-card-title span {
    color: #c8f2dc;
  }

  .planning-mobile-card.is-complete .planning-mobile-expand-toggle {
    border-color: #5ca37e !important;
    background: rgba(49, 91, 72, .82) !important;
    color: #eafff3 !important;
  }

  .planning-mobile-card.is-complete .planning-mobile-card-expandable {
    background: #1c2621;
  }
}

/* planning_mobile_bottom_action_bar_20260714
   Mobile only: keep Planning creation actions reachable at the bottom while
   the project strip, filters and assignment cards scroll behind them. */
.planning-mobile-bottom-actions {
  display: none;
}

@media (max-width: 767px) {
  .planning-toolbar-actions.planning-toolbar-actions-with-filter .planning-desktop-action-btn {
    display: none !important;
  }

  .planning-mobile-bottom-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 9px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #4b5563;
    background: rgba(31, 31, 31, 0.97);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .planning-mobile-bottom-btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: var(--of-radius-lg);
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 900;
    white-space: normal;
    touch-action: manipulation;
    transition: transform .14s ease, filter .14s ease, opacity .14s ease;
  }

  .planning-mobile-bottom-btn:active:not(:disabled) {
    transform: scale(.98);
  }

  .planning-mobile-bottom-btn.primary {
    border: 1px solid #475569;
    background: #374151;
    color: #f8fafc;
  }

  .planning-mobile-bottom-btn.success {
    border: 1px solid #16a34a;
    background: #15803d;
    color: #ffffff;
  }

  .planning-mobile-bottom-btn:disabled {
    cursor: not-allowed;
    opacity: .48;
    filter: saturate(.55);
  }

  .planning-modal-shell > .planning-content {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .planning-mobile-cards {
    padding-bottom: 8px !important;
  }
}

@media (max-width: 380px) {
  .planning-mobile-bottom-actions {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 7px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .planning-mobile-bottom-btn {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 11px;
  }
}

/* planning_desktop_complete_assignment_panel_20260714
   Desktop/tablet only: use the same strict row-completion rules as mobile,
   but highlight only the left assignment-information panel requested by the user. */
@media (min-width: 768px) {
  .planning-plan-row > td.planning-plan-assignment.planning-assignment-cell-wide {
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .planning-plan-row.is-complete > td.planning-plan-assignment.planning-assignment-cell-wide {
    background: linear-gradient(135deg, #20352a 0%, #1d2f27 58%, #1a2922 100%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(84, 181, 126, .56),
      inset 5px 0 0 #42a36f,
      1px 0 0 rgba(84, 181, 126, .34),
      0 0 18px rgba(39, 140, 88, .11) !important;
  }

  .planning-plan-row.is-complete > td.planning-plan-assignment .planning-plan-row-index {
    background: #315d48 !important;
    border-color: #62ad86 !important;
    color: #effff6 !important;
  }

  .planning-plan-row.is-complete > td.planning-plan-assignment .planning-assignment-thumb-preview {
    border-color: #4d9e73 !important;
    box-shadow: 0 0 0 1px rgba(76, 175, 125, .20), 0 8px 20px rgba(0, 0, 0, .20);
  }

  .planning-plan-row.is-complete > td.planning-plan-assignment .planning-row-stage-caption {
    color: #a9e3c2 !important;
  }

  .planning-plan-row.is-complete > td.planning-plan-assignment .planning-plan-file-btn {
    border-color: #4d9e73 !important;
    background: #284b39 !important;
    color: #eafff3 !important;
  }
}

/* review_workspace_v1: comparison, drawing markup, old retakes, approve/retake */
.review-workspace-root{position:fixed;inset:0;z-index:1500;background:#111;color:#fff;font-family:inherit}
.review-workspace{height:100%;display:flex;flex-direction:column;background:#171717;overflow:hidden}
.review-workspace-header{height:74px;min-height:74px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid #3d4652;background:#25282c;box-shadow:0 8px 26px rgba(0,0,0,.28);z-index:5}
.review-header-identity{display:flex;align-items:center;gap:12px;min-width:0}.review-header-thumb{width:48px;height:48px;border-radius:var(--of-radius-lg);overflow:hidden;background:#111;border:1px solid #566171;display:flex;align-items:center;justify-content:center;font-weight:900;color:#8bb9ff;flex:none}.review-header-thumb img{width:100%;height:100%;object-fit:cover}.review-header-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#94a3b8;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-header-identity h2{font-size:21px;line-height:1.2;font-weight:900;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-close-btn{width:44px;height:44px;border-radius:50%;border:1px solid #53606f;background:#16191d;color:#fff;font-size:29px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.2s;flex:none}.review-close-btn:hover{background:#b4232e;border-color:#ef4444}
.review-workspace-body{min-height:0;flex:1;display:grid;grid-template-columns:270px minmax(420px,1fr) 330px;overflow:hidden}.review-history-panel,.review-details-panel{background:#202226;min-width:0;display:flex;flex-direction:column;overflow:hidden}.review-history-panel{border-right:1px solid #3b414b}.review-details-panel{border-left:1px solid #3b414b}.review-panel-title,.review-side-title{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#d7dde7}.review-panel-title small{background:#303640;border:1px solid #505967;border-radius:99px;padding:2px 8px;color:#aab7c8}.review-history-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 10px 10px}.review-history-filters button{height:31px;border-radius:var(--of-radius-sm);border:1px solid #454c57;background:#2b2e33;color:#aeb8c6;font-size:10px;font-weight:800}.review-history-filters button.is-active{background:#275a9e;border-color:#4b8ee8;color:#fff}.review-history-list{overflow:auto;padding:0 8px 14px;display:flex;flex-direction:column;gap:7px}.review-history-item{display:flex;gap:9px;width:100%;text-align:left;border:1px solid #3c424c;background:#292c31;border-radius:11px;padding:8px;color:#fff;transition:.18s}.review-history-item:hover{background:#30343a;border-color:#596474}.review-history-item.is-selected{background:#213a5a;border-color:#4d91eb;box-shadow:inset 3px 0 #61a5ff}.review-history-item.is-retake{border-color:#663840}.review-history-item.is-retake.is-selected{background:#4b2229;border-color:#d24b5a;box-shadow:inset 3px 0 #ff6677}.review-history-thumb{width:45px;height:45px;min-width:45px;border-radius:var(--of-radius-sm);background:#131518;border:1px solid #424954;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#8ba4c5;font-size:20px}.review-history-thumb img{width:100%;height:100%;object-fit:cover}.review-history-copy{min-width:0;flex:1}.review-history-title{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:12px}.review-history-title strong{white-space:nowrap}.review-history-title span,.review-version-summary span[class^=review-status-]{font-size:8px;text-transform:uppercase;letter-spacing:.06em;padding:3px 6px;border-radius:99px;font-weight:900;white-space:nowrap}.review-status-neutral{background:#343b45;color:#c6d0dc;border:1px solid #596370}.review-status-published{background:#283a66;color:#93bdff;border:1px solid #4773bb}.review-status-retake{background:#561f29;color:#ff9eaa;border:1px solid #b33647}.review-status-approved{background:#173e2e;color:#75e2ae;border:1px solid #2b8b60}.review-status-reference{background:#4a3d1a;color:#f1cd77;border:1px solid #8e7130}.review-history-file{margin-top:3px;color:#c7cfda;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-history-note{margin-top:4px;color:#f4b0b8;font-size:9px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.review-history-meta{margin-top:4px;color:#747f8f;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-history-counts{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.review-history-counts span{font-size:8px;color:#b7c7da;background:#1b1d20;border:1px solid #3b4652;border-radius:5px;padding:2px 4px}
.review-viewer-panel{min-width:0;display:flex;flex-direction:column;background:#101214;overflow:hidden}.review-compare-toolbar{background:#25282c;border-bottom:1px solid #3a414c;padding:9px 12px;display:flex;flex-direction:column;gap:7px}.review-select-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.review-version-select{min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px}.review-version-select span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#99a5b5;font-weight:900}.review-version-select select{min-width:0;height:34px;border-radius:var(--of-radius-sm);background:#15171a;border:1px solid #4b535f;color:#fff;padding:0 9px;font-size:11px;font-weight:700}.review-mode-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.review-mode-row>button,.review-tool-btn{height:31px;padding:0 11px;border-radius:var(--of-radius-sm);background:#30343a;border:1px solid #4c5561;color:#c6cfdb;font-size:10px;font-weight:800}.review-mode-row>button.is-active{background:#2862ad;border-color:#4b91e8;color:#fff}.review-mode-row>button:disabled,.review-tool-btn:disabled{opacity:.35;cursor:not-allowed}.review-opacity-control{display:flex;align-items:center;gap:7px;margin-left:auto;color:#aab5c4;font-size:9px;font-weight:800}.review-opacity-control input{width:110px}.review-media-shell{position:relative;min-height:0;flex:1;background:radial-gradient(circle at center,#24282d 0,#111417 65%);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10px}.review-retake-preview-strip{position:absolute;left:18px;right:18px;bottom:18px;z-index:26;display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:1px solid rgba(111,126,145,.72);border-radius:var(--of-radius-md);background:rgba(20,23,27,.9);backdrop-filter:blur(7px);box-shadow:0 4px 14px rgba(0,0,0,.22)}.review-retake-preview-strip>strong{flex:none;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#ff9aa6;padding:0 3px}.review-retake-timeline-main{min-width:0;flex:1;display:grid;grid-template-columns:minmax(90px,1fr) auto;align-items:center;gap:10px}.review-retake-timeline-range{position:relative;z-index:1;width:100%;min-width:0;accent-color:#d24b5a;cursor:pointer;pointer-events:auto}.review-retake-timeline-range:disabled{cursor:default;opacity:.62}.review-retake-timeline-always{display:flex!important;visibility:visible!important;opacity:1!important}.review-retake-timeline-meta{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#cbd4df}.review-retake-timeline-meta span{flex:none;font-size:9px;font-weight:900;color:#ff9aa6}.review-retake-timeline-meta b{min-width:0;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:800}.review-media-stage{position:relative;width:100%;height:100%;min-height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--of-radius-md);background:#070809;border:1px solid #343b44}.review-media-single-slot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.review-media-image,.review-media-video,.review-media-model{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:#050506}.review-media-model{min-height:300px}.review-pdf-view-slot{position:relative;width:100%;height:100%;min-height:300px;background:#d7d9dc;overflow:hidden}.review-media-pdf{display:block;width:100%;height:100%;min-height:300px;border:0;background:#fff}.review-pdf-loading,.review-pdf-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#171a1e;color:#cfd6df;font-size:12px;font-weight:800;z-index:2}.review-pdf-fallback{display:none;flex-direction:column;gap:10px;padding:24px;text-align:center}.review-pdf-fallback strong{font-size:15px;color:#fff}.review-pdf-fallback span{max-width:360px;color:#9da8b6;font-size:11px;line-height:1.45}.review-pdf-actions{position:absolute;right:10px;bottom:10px;z-index:4;display:flex;gap:6px;padding:5px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(18,21,25,.88);backdrop-filter:blur(6px)}.review-pdf-actions button{height:32px;padding:0 11px;border-radius:var(--of-radius-control-compact);border:1px solid #4d91e8;background:#2868bd;color:#fff;font-size:10px;font-weight:900}.review-pdf-actions button+button{border-color:#596370;background:#30343a}.review-pdf-view-slot.is-loaded .review-pdf-loading{display:none}.review-pdf-view-slot.is-failed .review-media-pdf,.review-pdf-view-slot.is-failed .review-pdf-loading{display:none}.review-pdf-view-slot.is-failed .review-pdf-fallback{display:flex}.review-media-model.is-markup-locked{pointer-events:none!important}.review-model-view-slot{position:relative}.review-model-view-slot.is-frozen-markup-view{background:#050506}.review-media-model.is-markup-frozen{visibility:hidden!important}.review-model-markup-snapshot{position:absolute!important;z-index:2;max-width:none!important;max-height:none!important;pointer-events:none;user-select:none;-webkit-user-select:none;will-change:left,top,width,height}.review-markup-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none;z-index:3}.review-markup-canvas.is-drawing{pointer-events:auto;cursor:crosshair}.review-side-by-side{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:260px}.review-side-by-side>div{min-width:0;min-height:0;display:flex;flex-direction:column;background:#070809;border:1px solid #343b44;border-radius:var(--of-radius-md);overflow:hidden}.review-compare-label{height:28px;min-height:28px;display:flex;align-items:center;padding:0 10px;background:#262a2f;border-bottom:1px solid #3f4650;color:#cbd6e4;font-size:10px;font-weight:900}.review-media-compare-slot{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.review-side-image-nav{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;overscroll-behavior:contain}.review-side-image-nav.is-dragging{cursor:grabbing}.review-side-image-nav .review-media-image{position:absolute;max-width:none;max-height:none;will-change:left,top,width,height;pointer-events:none}.review-overlay-stage{position:relative}.review-overlay-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.review-overlay-base{z-index:1}.review-overlay-top{z-index:2}.review-overlay-label{position:absolute;z-index:4;top:10px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:5px 8px;font-size:9px;font-weight:900}.review-overlay-label.label-a{left:10px;color:#8bc1ff}.review-overlay-label.label-b{right:10px;color:#ffcf72}.review-overlay-label.is-shortcut-active{border-color:#fff;outline:2px solid rgba(255,255,255,.82);outline-offset:2px}.review-markup-canvas.is-overlay-shortcut:not(.is-drawing){pointer-events:auto;cursor:grab}.review-markup-canvas.is-overlay-shortcut:not(.is-drawing).is-dragging{cursor:grabbing}.review-file-preview,.review-note-preview{max-width:440px;min-height:220px;border:1px dashed #525c69;border-radius:var(--of-radius-xl);background:#171a1e;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.review-file-icon{font-size:42px}.review-file-name{color:#d4dbe4;font-size:13px;line-height:1.45;word-break:break-word}.review-file-preview button{background:#2868bd;color:#fff;border:1px solid #4d91e8;border-radius:var(--of-radius-control);padding:9px 15px;font-size:11px;font-weight:800}.review-note-target{font-size:10px;color:#9eabbc}.review-markup-toolbar{min-height:48px;background:#24272b;border-top:1px solid #3a414a;padding:7px 10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.review-draw-toggle,.review-smooth-toggle,.review-save-markup{height:34px;border-radius:var(--of-radius-sm);padding:0 12px;font-size:10px;font-weight:900}.review-draw-toggle,.review-smooth-toggle{background:#353a41;border:1px solid #596370;color:#e1e6ed}.review-draw-toggle.is-active{background:#8d2c35;border-color:#ff6271;color:#fff}.review-smooth-toggle.is-active{background:#225f64;border-color:#4fd5df;color:#fff}.review-save-markup{margin-left:auto;background:#2868bd;border:1px solid #4f95ec;color:#fff}.review-save-markup:disabled{opacity:.4}.review-color-row{display:flex;align-items:center;gap:5px}.review-color-dot{width:24px;height:24px;border-radius:50%;background:var(--review-color);border:2px solid #141618;box-shadow:0 0 0 1px #626d7a}.review-color-dot.is-active{box-shadow:0 0 0 2px #fff}.review-custom-color{position:relative;width:24px;height:24px;flex:none;border-radius:50%;overflow:visible;box-shadow:0 0 0 1px #626d7a;background:#17191c;cursor:pointer}.review-custom-color.is-active{box-shadow:0 0 0 2px #fff}.review-custom-color input[type="color"]{display:block;width:24px;height:24px;padding:0;border:2px solid #141618;border-radius:50%;background:transparent;cursor:pointer;overflow:hidden}.review-custom-color input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.review-custom-color input[type="color"]::-webkit-color-swatch{border:0;border-radius:50%}.review-custom-color input[type="color"]::-moz-color-swatch{border:0;border-radius:50%}.review-custom-color>span{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2b3036;border:1px solid #778291;color:#fff;font-size:10px;line-height:1;font-weight:900;pointer-events:none}
.review-custom-color-mobile{display:none;border:0;padding:0;background:var(--review-custom-current,#ff3b30)}
.review-mobile-color-picker-overlay{position:fixed;inset:0;z-index:1800;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.58);backdrop-filter:blur(4px);opacity:0;transition:opacity .16s ease}
.review-mobile-color-picker-overlay.is-open{opacity:1}
.review-mobile-color-sheet{width:min(100%,520px);max-height:92dvh;overflow:auto;padding:14px 14px max(14px,env(safe-area-inset-bottom));border:1px solid #4b5563;border-bottom:0;border-radius:22px 22px 0 0;background:#202328;box-shadow:0 -20px 60px rgba(0,0,0,.52);transform:translateY(16px);transition:transform .16s ease;color:#fff}
.review-mobile-color-picker-overlay.is-open .review-mobile-color-sheet{transform:translateY(0)}
.review-mobile-color-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.review-mobile-color-head>div{display:flex;flex-direction:column;gap:2px}.review-mobile-color-head strong{font-size:18px;font-weight:950}.review-mobile-color-head span{font-size:11px;color:#9ca3af;font-weight:700}.review-mobile-color-head button{width:38px;height:38px;border-radius:50%;border:1px solid #515966;background:#30343a;color:#fff;font-size:24px;line-height:1}
.review-mobile-color-sv{position:relative;width:100%;height:210px;border-radius:var(--of-radius-2xl);overflow:hidden;border:1px solid #5b6470;background:var(--review-picker-hue,#f00);touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.review-mobile-color-sv::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0));pointer-events:none}.review-mobile-color-sv::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000,rgba(0,0,0,0));pointer-events:none}
.review-mobile-color-marker{position:absolute;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--review-picker-current,#fff);border:3px solid #fff;box-shadow:0 1px 0 2px rgba(0,0,0,.7),0 2px 12px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none}
.review-mobile-color-hue{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;margin:14px 2px 12px;color:#d1d5db;font-size:11px;font-weight:900}.review-mobile-color-hue input{width:100%;height:28px;margin:0;accent-color:#fff;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border-radius:99px}
.review-mobile-color-quick-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;margin:6px 0 14px}.review-mobile-color-quick{aspect-ratio:1;border-radius:50%;background:var(--quick-color);border:2px solid #17191d;box-shadow:0 0 0 1px #5a6470;min-width:0}.review-mobile-color-quick.is-active{box-shadow:0 0 0 3px #fff}
.review-mobile-color-current{display:grid;grid-template-columns:42px auto 1fr;align-items:center;gap:10px;padding:10px;border-radius:13px;background:#181b1f;border:1px solid #424a55}.review-mobile-color-current-swatch{width:42px;height:42px;border-radius:11px;border:2px solid #697482}.review-mobile-color-current strong{font-size:14px;letter-spacing:.04em}.review-mobile-color-current>span:last-child{font-size:10px;color:#9ca3af;text-align:right}
.review-mobile-color-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:9px;margin-top:12px}.review-mobile-color-actions button{height:48px;border-radius:var(--of-radius-lg);font-size:13px;font-weight:950}.review-mobile-color-cancel{background:#343940;border:1px solid #596370;color:#fff}.review-mobile-color-use{background:#2468bd;border:1px solid #4b91e8;color:#fff}
.review-brush-size,.review-saved-toggle{display:flex;align-items:center;gap:5px;color:#aeb8c5;font-size:9px;font-weight:800}.review-brush-size input{width:70px}.review-brush-preview-wrap{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--of-radius-md);background:#181b1f;border:1px solid #495260;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}.review-brush-preview{width:var(--brush-preview,12px);height:var(--brush-preview,12px);border-radius:50%;background:var(--brush-color,#ff3b30);border:1px solid rgba(255,255,255,.45);box-shadow:0 0 0 1px rgba(0,0,0,.35)}.review-saved-toggle{margin-left:2px}.review-markup-disabled{min-height:38px;display:flex;align-items:center;justify-content:center;background:#22252a;border-top:1px solid #3a414a;color:#7f8997;font-size:10px}
.review-version-summary{padding:12px;border-bottom:1px solid #3a414a;background:#272a2f}.review-version-summary>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.review-version-summary>div:first-child strong{font-size:15px}.review-summary-file{margin-top:7px;color:#d5dce5;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-summary-meta{margin-top:4px;color:#8995a5;font-size:9px}.review-retake-note{margin-top:10px;padding:9px;border-radius:9px;background:#401e24;border:1px solid #77333e;display:flex;flex-direction:column;gap:4px}.review-retake-note strong{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#ff9aa6}.review-retake-note span{font-size:11px;line-height:1.4;color:#ffd4d9}.review-retake-note small{font-size:8px;color:#bd8790}.review-attachments{margin-top:9px;display:flex;flex-direction:column;gap:5px}.review-attachments strong{font-size:9px;text-transform:uppercase;color:#a8b3c1}.review-attachments button{border:1px solid #4a596b;background:#1d232a;color:#9ec9ff;border-radius:var(--of-radius-control-compact);padding:6px 8px;font-size:9px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-side-section{min-height:0;display:flex;flex-direction:column;border-bottom:1px solid #343a43}.review-side-section:nth-of-type(2){flex:1}.review-side-section:nth-of-type(3){max-height:32%}.review-side-title{padding:10px 12px 7px;font-size:10px}.review-comments-list,.review-markups-list{overflow:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:7px}.review-comment-card,.review-markup-card{position:relative;background:#181a1d;border:1px solid #383f49;border-radius:9px;padding:9px}.review-comment-head,.review-markup-card>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center}.review-comment-head strong,.review-markup-card strong{font-size:10px;color:#f2f5f8}.review-comment-head span,.review-markup-card span{font-size:8px;color:#788493}.review-comment-text{margin-top:6px;color:#c9d1dc;font-size:11px;line-height:1.45;white-space:pre-wrap}.review-frame-chip{margin-top:5px;background:#243b5e;border:1px solid #3f679e;color:#9cc8ff;border-radius:5px;padding:3px 6px;font-size:8px;font-weight:800}.review-markup-summary{margin-top:6px;font-size:9px;color:#aeb8c5}.review-delete-markup{position:absolute;right:8px;bottom:7px;background:transparent;border:0;color:#e66b78;font-size:8px;font-weight:800}.review-retake-compose{padding:10px;background:#25282c;border-top:1px solid #3e4651;display:flex;flex-direction:column;gap:7px}.review-retake-compose-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.review-retake-compose-title strong{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#f3c2c8}.review-retake-compose-title span{font-size:8px;color:#7e8997;text-align:right}.review-retake-compose textarea{height:66px;resize:none;border-radius:var(--of-radius-sm);border:1px solid #4a535f;background:#15171a;color:#fff;padding:8px;font-size:10px;line-height:1.4}.review-retake-compose textarea:focus{outline:none;border-color:#cf4857;box-shadow:0 0 0 2px rgba(207,72,87,.13)}.review-retake-upload-row{display:flex;align-items:center;gap:7px}.review-retake-upload-row>span{font-size:9px;color:#8793a2;flex:1}.review-retake-upload-btn{height:33px;border-radius:var(--of-radius-sm);border:1px solid #596574;background:#343941;color:#e3e9f0;padding:0 11px;font-size:9px;font-weight:900}.review-retake-upload-btn:hover{background:#3d444d}.review-retake-upload-btn:disabled{opacity:.45}.review-retake-clear-files{border:0;background:transparent;color:#e36d79;font-size:9px;font-weight:900}.review-retake-file-list{display:flex;flex-direction:column;gap:5px;max-height:90px;overflow:auto}.review-retake-file-item{display:flex;align-items:center;gap:6px;background:#181b1f;border:1px solid #3d4651;border-radius:7px;padding:6px 7px}.review-retake-file-item span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bdc8d5;font-size:9px}.review-retake-file-item button{width:20px;height:20px;border:1px solid #633842;background:#3f2228;color:#ff9ca7;font-size:14px;line-height:16pxborder-radius:50%;}.review-retake-compose-hint{font-size:8px;line-height:1.4;color:#74808e}.review-empty-small{border:1px dashed #414953;border-radius:9px;color:#717c8b;font-size:10px;text-align:center;padding:18px 8px;margin:3px}.review-empty-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#838f9e}.review-empty-main strong{font-size:18px;color:#cad2dc}.review-empty-main span{font-size:11px}
/* review_desktop_footer_to_details_dock_20260730: remove the full-width desktop footer and keep decision actions inside the right details panel. */
.review-details-actions{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:9px 10px 10px;background:#25282c;border-top:1px solid #414955}
.review-details-actions button{height:40px;min-width:0;border-radius:var(--of-radius-sm);padding:0 8px;color:#fff;font-size:10px;font-weight:900;border:1px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-details-actions button:disabled{opacity:.5;cursor:not-allowed}
.review-details-actions .review-approve-btn:only-child,.review-details-actions .review-download-btn:only-child{grid-column:1/-1}
.review-action-footer{height:62px;min-height:62px;background:#25282c;border-top:1px solid #414955;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;box-shadow:0 -8px 24px rgba(0,0,0,.28);z-index:5}.review-footer-info{display:flex;align-items:center;gap:8px}.review-footer-info span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#8f9baa;font-weight:900}.review-footer-info strong{font-size:13px}.review-footer-actions{display:flex;gap:8px}.review-footer-actions button{height:40px;border-radius:var(--of-radius-control);padding:0 18px;color:#fff;font-size:11px;font-weight:900;border:1px solid}.review-footer-actions button:disabled{opacity:.5;cursor:not-allowed}.review-download-btn{background:#343940;border-color:#5a6471!important}.review-retake-btn{background:#a32632;border-color:#e24d5c!important}.review-approve-btn{background:#168249;border-color:#3db978!important}

@media (max-width:1100px){.review-workspace-body{grid-template-columns:220px minmax(320px,1fr) 285px}.review-history-thumb{width:38px;height:38px;min-width:38px}.review-version-select{grid-template-columns:1fr}.review-version-select span{display:none}}
@media (max-width:767px){.review-workspace-header{height:64px;min-height:64px;padding:8px 10px}.review-header-thumb{width:40px;height:40px;border-radius:9px}.review-header-identity h2{font-size:16px}.review-header-kicker{font-size:8px}.review-close-btn{width:40px;height:40px}.review-workspace-body{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.review-history-panel{order:1;min-height:148px;max-height:148px;border-right:0;border-bottom:1px solid #3b414b;overflow:hidden}.review-panel-title{padding:7px 10px 5px}.review-history-filters{grid-template-columns:repeat(3,90px);justify-content:start;padding:0 8px 6px}.review-history-list{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:0 8px 8px;gap:7px}.review-history-item{min-width:210px;width:210px;height:76px;padding:6px}.review-history-thumb{width:42px;height:42px;min-width:42px}.review-history-note{display:none}.review-history-counts{margin-top:3px}.review-viewer-panel{order:2;min-height:520px;overflow:visible;flex:none}.review-compare-toolbar{padding:7px}.review-select-row{grid-template-columns:1fr;gap:5px}.review-version-select{grid-template-columns:68px 1fr}.review-version-select span{display:block}.review-version-select select{height:36px}.review-mode-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.review-mode-row>button{white-space:nowrap}.review-opacity-control{min-width:170px;margin-left:0}.review-media-shell{height:320px;min-height:320px;padding:6px}.review-media-stage{min-height:300px}.review-side-by-side{grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:620px}.review-media-shell:has(.review-side-by-side){height:640px;min-height:640px}.review-markup-toolbar{align-items:center;gap:6px;padding:7px}.review-save-markup{margin-left:0;flex:1}.review-brush-size{display:flex;min-width:150px}.review-saved-toggle{margin-left:auto}.review-details-panel{order:3;min-height:520px;max-height:none;border-left:0;border-top:1px solid #3b414b;overflow:visible;flex:none}.review-side-section:nth-of-type(2){min-height:190px}.review-side-section:nth-of-type(3){max-height:none;min-height:130px}.review-comments-list,.review-markups-list{max-height:220px}.review-retake-compose{position:sticky;bottom:0;z-index:2}.review-retake-compose-title{align-items:flex-start}.review-retake-compose textarea{height:78px}.review-action-footer{height:66px;min-height:66px;padding:7px 8px;position:sticky;bottom:0}.review-footer-info{display:none}.review-footer-actions{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:6px}.review-footer-actions button{padding:0 6px;height:44px}.review-footer-actions button:only-child{grid-column:1/-1}.review-empty-main{min-height:400px}.review-file-preview,.review-note-preview{min-height:270px;margin:10px}.review-markup-disabled{padding:8px;text-align:center}.review-color-dot,.review-custom-color,.review-custom-color input[type="color"]{width:22px;height:22px}}

/* Review image zoom and pan controls */
.review-media-single-slot{position:relative}
.review-media-stage.has-image-navigation{touch-action:none}
.review-markup-canvas.is-image-navigation{pointer-events:auto;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;overscroll-behavior:contain}
.review-markup-canvas.is-panning{cursor:grab}
.review-markup-canvas.is-panning.is-dragging{cursor:grabbing}
.review-markup-canvas.is-model-navigation{pointer-events:auto;cursor:grab!important}
.review-markup-canvas.is-model-navigation.is-dragging{cursor:grabbing!important}

/* Review markup shape tools: freehand, smooth, line, arrow, circle, square and draft eraser. */
.review-markup-mode-strip{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:1px 2px 3px;scrollbar-width:thin}
.review-markup-mode-strip>button{flex:0 0 40px;width:40px;height:34px;border-radius:var(--of-radius-sm);padding:0;display:inline-flex;align-items:center;justify-content:center;gap:0;font-size:10px;font-weight:900;white-space:nowrap}
.review-markup-mode-strip>button span{font-size:17px;line-height:1;font-weight:700}
.review-model-navigation-controls{display:flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid #434c58;border-radius:9px;background:#1c2025;white-space:nowrap}
.review-model-navigation-controls .review-tool-btn{height:32px;min-width:34px;padding:0 9px}
.review-model-pan-toggle{display:inline-flex;align-items:center;gap:5px}
.review-model-pan-toggle span{font-size:15px;line-height:1}
.review-model-pan-toggle b{font-size:9px}
.review-model-zoom-btn{font-size:18px!important;line-height:1}
.review-model-navigation-hint{font-size:8px;font-weight:800;color:#9da8b6;padding:0 2px}
.review-shape-toggle,.review-eraser-toggle{background:#353a41;border:1px solid #596370;color:#e1e6ed}
.review-shape-toggle.is-active{background:#294e7d;border-color:#65a9f5;color:#fff;box-shadow:0 0 0 1px rgba(101,169,245,.2) inset}
.review-eraser-toggle.is-active{background:#76451f;border-color:#ff9a4d;color:#fff;box-shadow:0 0 0 1px rgba(255,154,77,.2) inset}
.review-markup-canvas.is-erasing{cursor:cell}
.review-markup-canvas.is-color-picking{cursor:copy!important}
.review-markup-canvas.is-drawing.is-brush-cursor{cursor:none!important}
.review-markup-canvas.is-drawing.is-brush-cursor.is-erasing{cursor:none!important}
.review-brush-canvas-cursor{position:absolute;left:0;top:0;width:var(--review-brush-cursor-size,4px);height:var(--review-brush-cursor-size,4px);box-sizing:border-box;border:1px solid rgba(255,255,255,.98);background:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.92),inset 0 0 0 1px rgba(0,0,0,.28);transform:translate(-50%,-50%);pointer-events:none;z-index:6;opacity:0;visibility:hidden}
.review-brush-canvas-cursor.is-visible{opacity:1;visibility:visible}

.review-markup-canvas.is-erasing.is-drawing{pointer-events:auto}

@media (max-width:767px){
  .review-markup-toolbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px}
  .review-markup-mode-strip{grid-column:1/-1;width:100%;padding-bottom:5px}
  .review-model-navigation-controls{grid-column:1/-1;width:100%;justify-content:center}
  .review-markup-mode-strip>button{flex-basis:40px;width:40px;height:40px;padding:0}
  .review-color-row{grid-column:1/2}
  .review-tool-btn{min-width:58px}
  .review-save-markup{grid-column:1/3;width:100%;margin:0}
  .review-saved-toggle{grid-column:3/4;margin-left:0;justify-self:end}
}

.review-overlay-controls{padding-top:4px;padding-bottom:1px}
.review-overlay-inline-row{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0;overflow-x:auto;padding-bottom:2px}
.review-overlay-layer-picks{display:flex;gap:6px;flex:0 0 auto}
.review-overlay-target{height:31px;padding:0 10px;border-radius:var(--of-radius-sm);background:#2d3137;border:1px solid #4c5561;color:#c7d1dc;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.review-overlay-target.is-active{background:#255e63;border-color:#4fd5df;color:#fff}
.review-tool-btn.is-active{background:#2862ad;border-color:#4b91e8;color:#fff}
.review-overlay-inline-row>.review-tool-btn{flex:0 0 auto;white-space:nowrap}
.review-overlay-precision-control{min-width:190px;max-width:270px;flex:1 1 220px;display:grid;grid-template-columns:auto minmax(80px,1fr) 30px;align-items:center;gap:7px;padding:4px 7px;border-radius:var(--of-radius-sm);background:#1d2126;border:1px solid #414a56;color:#aeb9c7;font-size:9px;font-weight:800}
.review-overlay-precision-control>span{white-space:nowrap}
.review-overlay-precision-control input{min-width:70px;width:100%;accent-color:#4fd5df}
.review-overlay-precision-control b{height:22px;border-radius:6px;background:#2c3239;border:1px solid #4c5663;color:#e5edf6;display:flex;align-items:center;justify-content:center;font-size:9px}
@media (max-width:900px){.review-overlay-inline-row{flex-wrap:wrap;overflow-x:visible}.review-overlay-precision-control{min-width:220px;max-width:none}}
@media (max-width:767px){.review-overlay-inline-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.review-overlay-layer-picks{grid-column:1/-1}.review-overlay-layer-picks .review-overlay-target{flex:1}.review-overlay-inline-row>.review-tool-btn{width:100%}.review-overlay-precision-control{grid-column:1/-1;min-width:0;width:100%;max-width:none;grid-template-columns:48px minmax(80px,1fr) 30px}}

/* Direct-on-image Review text editor (Photoshop-style click-to-type). */
.review-inline-text-editor{
  position:absolute;
  z-index:8;
  min-width:120px;
  min-height:30px;
  margin:0;
  padding:2px 5px;
  resize:none;
  overflow:hidden;
  white-space:pre;
  background:rgba(8,10,13,.22);
  border:1px dashed var(--review-inline-text-color,#ff3b30);
  border-radius:4px;
  outline:none;
  color:var(--review-inline-text-color,#ff3b30);
  caret-color:var(--review-inline-text-color,#ff3b30);
  font-family:Arial,Helvetica,sans-serif;
  font-weight:400;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  box-shadow:0 0 0 1px rgba(0,0,0,.32),0 4px 14px rgba(0,0,0,.22);
  transform-origin:top left;
  touch-action:manipulation;
}
.review-inline-text-editor:focus{
  background:rgba(8,10,13,.38);
  border-style:solid;
  box-shadow:0 0 0 1px var(--review-inline-text-color,#ff3b30),0 5px 18px rgba(0,0,0,.3);
}
.review-inline-text-editor::placeholder{color:rgba(255,255,255,.62);text-shadow:none}
@media (max-width:767px){
  .review-inline-text-editor{min-width:105px;padding:3px 5px}
}

/* Review draft object move/select tool */
.review-markup-canvas.is-drawing.is-moving{cursor:grab}
.review-markup-canvas.is-drawing.is-moving.is-dragging{cursor:grabbing}

/* Compact Review version history: thumbnail + version name + status only. */
.review-history-item.review-history-item-compact{align-items:center;min-height:62px;padding:8px}
.review-history-item-compact .review-history-copy{display:flex;align-items:center;min-width:0}
.review-history-item-compact .review-history-title{width:100%;min-width:0}
.review-history-item-compact .review-history-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.review-history-item.review-history-item-compact{height:58px;min-height:58px}.review-history-item-compact .review-history-thumb{width:42px;height:42px;min-width:42px}}

/* Work Monitor company-shared saved views */
.work-monitor-saved-views-panel{border:1px solid #3f4854;background:#20242a;border-radius:var(--of-radius-lg);padding:6px 8px;display:flex;align-items:center;gap:7px;min-height:44px;overflow:hidden}
.work-monitor-view-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex:none}
.work-monitor-view-actions button,.work-monitor-view-editor button{height:30px;padding:0 10px;border-radius:var(--of-radius-sm);border:1px solid #596473;background:#30353c;color:#d7dfe9;font-size:10px;font-weight:900;white-space:nowrap}
.work-monitor-view-actions button:hover,.work-monitor-view-editor button:hover{background:#3a424c;color:#fff}
.work-monitor-view-actions button.is-primary{background:#245e9f;border-color:#3985d1;color:#fff}
.work-monitor-view-actions button.is-danger{background:#5b252a;border-color:#8c3941;color:#ffd7da}
.work-monitor-view-actions button:disabled,.work-monitor-view-editor button:disabled{opacity:.45;cursor:not-allowed}
.work-monitor-view-tabs{display:flex;align-items:center;gap:7px;overflow-x:auto;min-width:0;min-height:30px;flex:1}
.work-monitor-view-tab{height:30px;max-width:220px;padding:0 10px;border-radius:var(--of-radius-sm);border:1px solid #4a5461;background:#15191e;color:#aeb9c7;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:900;white-space:nowrap;flex:none}
.work-monitor-view-tab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-monitor-view-tab small{font-size:8px;color:#ffd36c;text-transform:uppercase;letter-spacing:.06em}
.work-monitor-view-tab.is-active{background:#1f5e68;border-color:#49c8d8;color:#fff;box-shadow:0 0 0 1px rgba(73,200,216,.18)}
.work-monitor-view-editor{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 420px}
.work-monitor-view-editor input{height:30px;min-width:150px;flex:1;border-radius:var(--of-radius-sm);border:1px solid #4d5866;background:#101317;color:#fff;padding:0 10px;font-size:10px;font-weight:700;outline:none}
.work-monitor-view-editor input:focus{border-color:#3e91e7;box-shadow:0 0 0 2px rgba(62,145,231,.12)}
@media (max-width:767px){.work-monitor-saved-views-panel{overflow-x:auto}.work-monitor-view-tabs{flex:0 1 auto;min-width:0}.work-monitor-view-actions{margin-left:auto}.work-monitor-view-editor{flex:0 0 320px}.work-monitor-view-tab{max-width:180px}}

/* Asset Review compact mobile/tablet workspace: floating tools opened from the footer + button. */
.review-compact-header-selects,
.review-mobile-tools-toggle,
.review-mobile-upload-btn,
.review-compact-tools-backdrop,
.review-compact-tools-popover,
.review-compact-brush-preview{display:none}

@media (max-width:1100px){
  .review-workspace-root.review-compact-asset-layout .review-workspace{height:100dvh;min-height:100dvh;overflow:hidden;background:#111315}
  .review-workspace-root.review-compact-asset-layout .review-workspace-header{
    height:68px;min-height:68px;padding:7px 10px;display:grid;grid-template-columns:minmax(160px,250px) minmax(0,1fr) 42px;align-items:center;gap:9px;background:#25282c
  }
  .review-workspace-root.review-compact-asset-layout .review-header-identity{gap:9px;min-width:0}
  .review-workspace-root.review-compact-asset-layout .review-header-thumb{width:46px;height:46px;border-radius:var(--of-radius-md)}
  .review-workspace-root.review-compact-asset-layout .review-header-kicker{font-size:8px;letter-spacing:.11em}
  .review-workspace-root.review-compact-asset-layout .review-header-identity h2{font-size:18px;line-height:1.1;margin-top:3px}
  .review-workspace-root.review-compact-asset-layout .review-close-btn{width:40px;height:40px;border:0;background:transparent;color:#7d8289;font-size:34px}
  .review-workspace-root.review-compact-asset-layout .review-close-btn:hover{background:transparent;color:#fff}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:10px;min-width:0}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;min-width:0}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select span{display:block;font-size:8px;white-space:nowrap}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select select{height:43px;min-width:0;border-radius:var(--of-radius-control);font-size:11px;padding:0 9px;text-overflow:ellipsis}

  .review-workspace-root.review-compact-asset-layout .review-workspace-body{min-height:0;flex:1;display:block;overflow:hidden}
  .review-workspace-root.review-compact-asset-layout .review-history-panel,
  .review-workspace-root.review-compact-asset-layout .review-details-panel{display:none!important}
  .review-workspace-root.review-compact-asset-layout .review-viewer-panel{height:100%;min-height:0!important;overflow:hidden!important;display:flex;order:initial;flex:1}
  .review-workspace-root.review-compact-asset-layout .review-compare-toolbar{display:none}
  .review-workspace-root.review-compact-asset-layout .review-media-shell,
  .review-workspace-root.review-compact-asset-layout .review-media-shell:has(.review-side-by-side){position:relative;height:100%!important;min-height:0!important;padding:0;overflow:hidden;flex:1;background:#f4f4f4}
  .review-workspace-root.review-compact-asset-layout .review-media-stage{height:100%;min-height:0;border:0;border-radius:0;background:#070809}
  .review-workspace-root.review-compact-asset-layout .review-media-single-slot{height:100%}
  .review-workspace-root.review-compact-asset-layout .review-media-image,
  .review-workspace-root.review-compact-asset-layout .review-media-video,
  .review-workspace-root.review-compact-asset-layout .review-media-model{height:100%;max-height:100%;object-fit:contain}.review-workspace-root.review-compact-asset-layout .review-pdf-view-slot,.review-workspace-root.review-compact-asset-layout .review-media-pdf{height:100%;min-height:0}
  .review-workspace-root.review-compact-asset-layout .review-side-by-side{height:100%;min-height:0;gap:4px}

  .review-workspace-root.review-compact-asset-layout .review-compact-tools-backdrop{
    display:block;position:absolute;inset:0;z-index:30;width:100%;height:100%;padding:0;border:0;background:rgba(0,0,0,.08);opacity:0;visibility:hidden;pointer-events:none;cursor:default;transition:opacity .16s ease,visibility 0s linear .16s
  }
  .review-workspace-root.review-compact-asset-layout.review-compact-tools-open .review-compact-tools-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover{
    display:flex;position:absolute;left:50%;top:50%;z-index:31;width:min(790px,calc(100% - 28px));max-height:calc(100% - 28px);transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;pointer-events:none;flex-direction:column;align-items:center;gap:8px;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s
  }
  .review-workspace-root.review-compact-asset-layout.review-compact-tools-open .review-compact-tools-popover{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:0s}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover>.review-markup-toolbar,
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover>.review-markup-disabled{
    width:100%;max-height:calc(100dvh - 210px);overflow:auto;border:1px solid #39414b;border-radius:0;background:#202428;box-shadow:0 18px 48px rgba(0,0,0,.52)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover>.review-markup-toolbar{
    min-height:0;padding:14px 16px;display:grid;grid-template-columns:auto minmax(130px,1fr) 58px;align-items:center;gap:12px
  }
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip{grid-column:1/-1;width:100%;max-width:100%;justify-content:flex-start;gap:10px;padding:0 0 6px;overflow-x:auto}
  .review-workspace-root.review-compact-asset-layout .review-model-navigation-controls{grid-column:1/-1;width:100%;justify-content:center;padding:7px}
  .review-workspace-root.review-compact-asset-layout .review-model-navigation-controls .review-tool-btn{height:42px;min-width:48px}
  .review-workspace-root.review-compact-asset-layout .review-model-navigation-hint{font-size:10px}
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button{width:48px;height:48px;padding:0;border-radius:0;background:#30353b;border-color:#30353b}
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button span{font-size:23px}
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button.is-active{border-color:#5d9fe9;box-shadow:inset 0 0 0 1px rgba(93,159,233,.45)}
  .review-workspace-root.review-compact-asset-layout .review-color-row{grid-column:1/2;display:flex;align-items:center;gap:9px;white-space:nowrap}
  .review-workspace-root.review-compact-asset-layout .review-color-dot,.review-workspace-root.review-compact-asset-layout .review-custom-color,.review-workspace-root.review-compact-asset-layout .review-custom-color input[type="color"]{width:38px;height:38px}.review-workspace-root.review-compact-asset-layout .review-color-dot{border-width:3px;box-shadow:0 0 0 2px #101317}
  .review-workspace-root.review-compact-asset-layout .review-color-dot.is-active{box-shadow:0 0 0 3px #f2f4f6}
  .review-workspace-root.review-compact-asset-layout .review-brush-size{grid-column:2/3;display:grid;grid-template-columns:auto minmax(70px,1fr);align-items:center;gap:9px;min-width:0;font-size:12px;color:#d2d9e2}
  .review-workspace-root.review-compact-asset-layout .review-brush-size input{width:100%;min-width:70px;accent-color:#1878ef}
  .review-workspace-root.review-compact-asset-layout .review-brush-preview-wrap{display:none}
  .review-workspace-root.review-compact-asset-layout #review-undo-markup-btn,
  .review-workspace-root.review-compact-asset-layout #review-clear-markup-btn,
  .review-workspace-root.review-compact-asset-layout .review-saved-toggle{display:none}
  .review-workspace-root.review-compact-asset-layout .review-save-markup{grid-column:3/4;width:58px;height:58px;margin:0;padding:0;border-radius:var(--of-radius-xl);background:#171b20;border-color:#4a535f;font-size:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .review-workspace-root.review-compact-asset-layout .review-save-markup-label{display:none}
  .review-workspace-root.review-compact-asset-layout .review-compact-brush-preview{display:block;flex:none;width:var(--brush-preview,12px);height:var(--brush-preview,12px);max-width:32px;max-height:32px;border-radius:50%;background:var(--brush-color,#ff3b30);border:2px solid rgba(255,255,255,.52);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
  .review-workspace-root.review-compact-asset-layout .review-save-markup:disabled{opacity:.72}
  .review-workspace-root.review-compact-asset-layout .review-markup-disabled{min-height:70px;padding:16px;text-align:center;display:flex;align-items:center;justify-content:center;color:#aeb8c5}

  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock{max-width:100%;display:flex;flex-direction:column;align-items:center;gap:7px}
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-mode-row{width:max-content;max-width:100%;padding:6px;background:#25282c;border:1px solid #3f4752;border-radius:7px;box-shadow:0 12px 28px rgba(0,0,0,.42);display:flex;flex-wrap:nowrap;overflow-x:auto}
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-mode-row>button{height:42px;min-width:96px;padding:0 14px;font-size:11px;white-space:nowrap}
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-opacity-control{min-width:180px;margin-left:0;padding:0 8px}
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-overlay-controls{width:min(720px,calc(100vw - 36px));padding:8px;background:#202428;border:1px solid #3f4752;border-radius:var(--of-radius-sm);box-shadow:0 12px 28px rgba(0,0,0,.42)}

  .review-workspace-root.review-compact-asset-layout .review-action-footer{height:72px;min-height:72px;padding:7px 9px;position:relative;bottom:auto;background:#30343a}
  .review-workspace-root.review-compact-asset-layout .review-footer-info{display:none}
  .review-workspace-root.review-compact-asset-layout .review-compact-footer-actions{width:100%;height:100%;display:grid;grid-template-columns:72px minmax(150px,1.55fr) minmax(105px,.85fr) minmax(105px,.85fr);gap:9px}
  .review-workspace-root.review-compact-asset-layout .review-compact-footer-actions button{height:100%;min-width:0;padding:0 10px;border-radius:var(--of-radius-lg);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .review-workspace-root.review-compact-asset-layout .review-mobile-tools-toggle{display:flex;align-items:center;justify-content:center;border:0!important;background:#30343a;color:#fff;font-size:0}
  .review-workspace-root.review-compact-asset-layout .review-mobile-tools-toggle span{font-size:38px;font-weight:300;line-height:1;transform:translateY(-1px);transition:transform .16s ease,color .16s ease}
  .review-workspace-root.review-compact-asset-layout .review-mobile-tools-toggle.is-active{background:#25292e;box-shadow:inset 0 0 0 1px #4f5966}
  .review-workspace-root.review-compact-asset-layout .review-mobile-tools-toggle.is-active span{color:#fff;transform:translateY(-1px)}
  .review-workspace-root.review-compact-asset-layout .review-mobile-upload-btn{display:block;background:#13233a;border-color:#334b6b!important;color:#fff}
}

@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-workspace-header{height:66px;min-height:66px;grid-template-columns:minmax(118px,1.05fr) minmax(0,2.35fr) 34px;gap:6px;padding:6px 7px}
  .review-workspace-root.review-compact-asset-layout .review-header-identity{gap:6px}
  .review-workspace-root.review-compact-asset-layout .review-header-thumb{width:39px;height:39px;border-radius:var(--of-radius-sm)}
  .review-workspace-root.review-compact-asset-layout .review-header-kicker{font-size:7px}
  .review-workspace-root.review-compact-asset-layout .review-header-identity h2{font-size:14px}
  .review-workspace-root .review-header-review-label{display:none}
  .review-workspace-root.review-compact-asset-layout .review-close-btn{width:34px;height:34px;font-size:29px}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects{gap:5px}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects.is-mobile-single-image{grid-template-columns:1fr}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select{grid-template-columns:1fr;gap:2px}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select span{font-size:7px}
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select select{height:42px;padding:0 7px;font-size:10px}
  .review-workspace-root.review-compact-asset-layout .review-side-by-side{grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:0}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover{width:calc(100% - 18px);max-height:calc(100% - 18px);gap:6px}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover>.review-markup-toolbar{padding:10px;grid-template-columns:auto minmax(90px,1fr) 48px;gap:8px}
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip{gap:7px}
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button{width:43px;height:43px}
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button span{font-size:20px}
  .review-workspace-root.review-compact-asset-layout .review-color-row{gap:6px}
  .review-workspace-root.review-compact-asset-layout .review-color-dot,.review-workspace-root.review-compact-asset-layout .review-custom-color,.review-workspace-root.review-compact-asset-layout .review-custom-color input[type="color"]{width:31px;height:31px}
  .review-workspace-root.review-compact-asset-layout .review-brush-size{grid-template-columns:auto minmax(54px,1fr);gap:6px;font-size:10px;min-width:0}
  .review-workspace-root.review-compact-asset-layout .review-save-markup{width:48px;height:48px;border-radius:var(--of-radius-lg)}
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-mode-row>button{height:38px;min-width:82px;padding:0 10px;font-size:10px}
  .review-workspace-root.review-compact-asset-layout .review-action-footer{height:66px;min-height:66px;padding:6px}
  .review-workspace-root.review-compact-asset-layout .review-compact-footer-actions{grid-template-columns:52px minmax(90px,1.45fr) minmax(70px,.8fr) minmax(70px,.8fr);gap:6px}
  .review-workspace-root.review-compact-asset-layout .review-compact-footer-actions button{height:100%;padding:0 5px;border-radius:var(--of-radius-md);font-size:10px}
  .review-workspace-root.review-compact-asset-layout .review-mobile-tools-toggle span{font-size:32px}
}

/* Asset Review compact Overlay: persistent alignment controls above footer actions. */
.review-compact-overlay-dock{display:none}
@media (max-width:1100px){
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.has-overlay-dock{
    height:130px;min-height:130px;padding:7px 9px;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;gap:7px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-dock{
    width:100%;height:44px;min-height:44px;padding:4px 6px;display:grid;grid-template-columns:minmax(300px,1fr) minmax(210px,.72fr);align-items:center;gap:8px;
    background:#202428;border:1px solid #3f4752;border-radius:9px;box-shadow:0 -5px 16px rgba(0,0,0,.2)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-actions{
    min-width:0;display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));align-items:center;gap:6px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-actions button{
    width:100%;height:34px;min-width:0;padding:0 8px;border-radius:var(--of-radius-control-compact);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-opacity{
    min-width:0;height:34px;padding:0 7px;display:grid;grid-template-columns:auto minmax(70px,1fr) 34px;align-items:center;gap:7px;
    border-radius:7px;background:#1a1e22;border:1px solid #39424d;color:#c5ced9;font-size:9px;font-weight:900
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-opacity span{white-space:nowrap}
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-opacity input{width:100%;min-width:70px;accent-color:#1878ef}
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-opacity b{font-size:9px;color:#f1f5f9;text-align:right}
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.has-overlay-dock .review-compact-footer-actions{
    height:65px;min-height:65px;flex:1 1 auto
  }
}
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.has-overlay-dock{
    height:145px;min-height:145px;padding:5px 6px 6px;gap:5px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-dock{
    height:68px;min-height:68px;padding:4px 5px;grid-template-columns:1fr;grid-template-rows:32px 27px;gap:4px;border-radius:7px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-actions button{height:32px;padding:0 3px;border-radius:var(--of-radius-control-dense);font-size:8px}
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-opacity{
    height:27px;padding:0 6px;grid-template-columns:auto minmax(55px,1fr) 30px;gap:5px;border-radius:6px;font-size:8px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-opacity input{min-width:55px}
  .review-workspace-root.review-compact-asset-layout .review-compact-overlay-opacity b{font-size:8px}
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.has-overlay-dock .review-compact-footer-actions{height:60px;min-height:60px}
}

/* planning_client_balance_pill_fix_20260725: use two compact auto-save-style boxes above client totals. */
.planning-client-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
  align-items: stretch;
  margin-bottom: 3px;
}
.planning-client-balance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 27px;
  padding: 5px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(16,185,129,.45);
  border-radius: var(--of-radius-md);
  background: rgba(6,78,59,.24);
  color: #bbf7d0;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  box-shadow: var(--of-shadow-dark-top-highlight-subtle);
}
.planning-client-balance-pill.is-over {
  border-color: rgba(248,113,113,.48);
  background: rgba(127,29,29,.26);
  color: #fecaca;
}
@media (max-width: 767px) {
  .planning-mobile-client-block .planning-client-balance-grid {
    gap: 8px;
    margin-bottom: 2px;
  }
  .planning-mobile-client-block .planning-client-balance-pill {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: var(--of-radius-lg);
    font-size: 11px;
  }
}

/* planning_stage_client_vertical_alignment_fix_20260725:
   The Client column has a balance-pill row above its inputs. Shift active stage
   controls down by the matching visual offset so Mandays, Amount and Artist
   align with the Client totals and selector. */
.planning-plan-row .planning-stage-cell-compact {
  transform: translateY(18px);
}

/* popup_window_shadow_removal_20260728:
   Keep modal borders/backdrops intact, but remove the large exterior drop
   shadow from every top-level and nested popup/window surface. */
#modal-container > *,
#modal-container .animation-animatics-modal,
#modal-container .assignment-pipeline-modal,
#modal-container .assignment-workflow-picker-modal,
#modal-container .freelancer-budget-modal,
#modal-container .new-assignment-modal-fit,
#modal-container .of-crop-modal,
#modal-container .planning-crop-modal-pro,
#modal-container .planning-modal-shell,
#modal-container .planning-project-create-panel,
#modal-container .planning-project-create-panel-main-style,
#modal-container .company-add-popup-wrap {
  box-shadow: none !important;
}

/* planning_single_assignment_create_20260729
   Add a per-row Create action without changing the existing batch-create flow. */
.planning-row-action-stack {
  width: 100%;
  display: grid;
  gap: 8px;
  align-content: center;
}
.planning-plan-create-btn {
  width: 100%;
  min-height: 24px;
  border-radius: 4px;
  border: 1px solid #166534;
  background: #153b27;
  color: #bbf7d0;
  font-size: 9px;
  font-weight: 950;
  padding: 4px 6px;
  line-height: 1;
  white-space: nowrap;
}
.planning-plan-create-btn:hover:not(:disabled) {
  background: #1b4d33;
  border-color: #22c55e;
}
.planning-plan-create-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (max-width: 767px) {
  .planning-mobile-create-one {
    width: 100%;
    min-height: 44px;
    border-radius: var(--of-radius-control-workflow);
    border: 1px solid #166534;
    background: #153b27;
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 900;
    padding: 0 14px;
  }
  .planning-mobile-create-one:active:not(:disabled) { background: #1b4d33; }
  .planning-mobile-create-one:disabled { opacity: .55; cursor: not-allowed; }
}

/* Work Monitor reference arrangement: categories left, filters right, compact one-line toolbar. */
.work-monitor-main-filter-line{display:grid;grid-template-columns:minmax(460px,1.08fr) minmax(720px,.92fr);gap:12px;align-items:center;min-width:0}
.work-monitor-main-filter-line .work-monitor-asset-category-slot{min-width:0;overflow:hidden}
.work-monitor-main-filter-line .work-monitor-filter-grid{display:grid;grid-template-columns:minmax(300px,1fr) 190px 160px auto;gap:8px;align-items:center;min-width:0}
.work-monitor-main-filter-line .work-monitor-filter-grid>*{min-width:0}
.work-monitor-basic-filter-grid{display:grid;grid-template-columns:minmax(300px,1fr) 190px 160px auto;gap:8px;align-items:center;margin-left:auto}
@media (max-width:1399px){
  .work-monitor-main-filter-line{grid-template-columns:1fr}
  .work-monitor-main-filter-line .work-monitor-filter-grid{grid-template-columns:minmax(220px,1fr) 190px 160px auto}
}
@media (max-width:767px){
  .work-monitor-main-filter-line{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .work-monitor-main-filter-line .work-monitor-filter-grid,.work-monitor-basic-filter-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-left:0}
  .work-monitor-main-filter-line .work-monitor-filter-grid input[type="search"],.work-monitor-basic-filter-grid input[type="search"]{grid-column:1/-1}
  .work-monitor-main-filter-line .work-monitor-filter-grid button,.work-monitor-basic-filter-grid button{min-height:40px}
}

/* client_planning_private_stage_layout_20260730: client Planning shows request fields only. */
.planning-client-plan-table {
  min-width: 1000px !important;
  table-layout: fixed;
}
.planning-client-plan-table .planning-plan-assignment-head,
.planning-client-plan-table .planning-client-assignment-cell {
  width: auto !important;
  min-width: 620px !important;
}
.planning-client-public-mandays-head,
.planning-client-public-mandays-cell,
.planning-client-public-amount-head,
.planning-client-public-amount-cell {
  width: 190px;
  min-width: 190px;
  background: #242424 !important;
  border-left: 1px solid #343a40 !important;
  border-right: 1px solid #343a40 !important;
}
.planning-client-public-mandays-head,
.planning-client-public-amount-head {
  color: #e5e7eb !important;
  text-align: center !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 950;
}
.planning-client-public-total-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
}
.planning-client-public-total-wrap > span {
  color: #9ca3af;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.planning-plan-delete-btn.planning-client-inline-delete {
  width: auto;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 64px;
}
.planning-client-plan-row.is-complete .planning-client-assignment-cell,
.planning-client-plan-row.is-complete .planning-client-public-mandays-cell,
.planning-client-plan-row.is-complete .planning-client-public-amount-cell {
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.22);
}
.planning-client-mobile-card .planning-client-mobile-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px;
}
.planning-client-mobile-card .planning-mobile-card-head {
  cursor: default;
}
.planning-client-mobile-card .planning-mobile-card-title span {
  color: #94a3b8;
}
.planning-client-mobile-total-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
@media (max-width: 767px) {
  .planning-client-card-list { padding-bottom: 4px; }
  .planning-client-mobile-card .planning-mobile-main { margin-top: 0; }

  /* Keep the mobile header compact and the delete control inside each card. */
  .planning-modal-shell .planning-topbar-stats,
  .planning-modal-shell .planning-client-plan-note {
    display: none !important;
  }
  .planning-modal-shell .planning-topbar {
    flex-direction: row !important;
    align-items: center !important;
  }
  .planning-modal-shell .planning-topbar-right {
    width: auto !important;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .planning-client-mobile-card .planning-client-mobile-head {
    grid-template-columns: 34px minmax(0, 1fr) 36px !important;
  }
  .planning-modal-shell .planning-mobile-delete {
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1;
  }
}
@media (max-width: 420px) {
  .planning-client-mobile-total-grid { grid-template-columns: 1fr; }
}

/* review_partial_eraser_20260731: brush-style eraser removes only touched markup portions */
.review-partial-eraser-toggle.is-active {
  background:#4a3d67;
  border-color:#b59cff;
  color:#fff;
  box-shadow:0 0 0 1px rgba(181,156,255,.18) inset;
}

/* review_mobile_custom_color_sheet_20260731: touch-friendly custom picker replaces native mobile color input */
@media (max-width:767px){
  .review-custom-color-native{display:none!important}
  .review-custom-color-mobile{display:inline-flex!important;align-items:center;justify-content:center;background:var(--review-custom-current,#ff3b30)!important}
  .review-mobile-color-sheet{width:100%;max-width:none}
  .review-mobile-color-sv{height:min(230px,31dvh)}
  .review-mobile-color-quick-grid{grid-template-columns:repeat(5,1fr);gap:10px;padding:0 4px}
  .review-mobile-color-quick{width:42px;height:42px;justify-self:center}
  .review-workspace-root.review-compact-asset-layout .review-custom-color-mobile{width:31px;height:31px}
}

/* dashboard_control_popups_no_blink_20260804
   Keep assignment option and subscription detail popups mounted, then toggle
   only their visibility so opening them never rebuilds/flashes the dashboard. */
[data-mobile-assignment-actions-menu="true"].assignment-actions-menu-closed,
[data-subscription-details-panel="true"].subscription-details-panel-closed {
  display: none !important;
}

.assignment-actions-open {
  z-index: 90 !important;
  overflow: visible !important;
}

@media (max-width:767px){.review-retake-preview-strip{left:10px;right:10px;bottom:10px;padding:7px 8px}.review-retake-preview-strip>strong{display:none}.review-retake-timeline-main{grid-template-columns:minmax(80px,1fr) auto;gap:7px}.review-retake-timeline-meta{gap:5px}.review-retake-timeline-meta b{display:none}}
.review-workspace-root.review-compact-asset-layout .review-retake-preview-strip{left:10px;right:10px;bottom:10px}

/* Review markup toolbar: keep drawing tools mounted and visible in every review state. */
.review-markup-toolbar-always{display:flex!important;visibility:visible!important;opacity:1!important}
.review-markup-toolbar-status{flex:1 1 100%;min-width:100%;padding:5px 8px;border-radius:7px;border:1px solid #4b535e;background:#1a1d21;color:#aeb8c5;font-size:9px;font-weight:800;line-height:1.35;text-align:center}
.review-markup-toolbar.is-disabled .review-markup-mode-strip button:disabled,
.review-markup-toolbar.is-disabled .review-color-row button:disabled,
.review-markup-toolbar.is-disabled .review-color-row input:disabled,
.review-markup-toolbar.is-disabled .review-brush-size input:disabled{opacity:.38;cursor:not-allowed}
.review-compact-always-tools{display:none}

@media (max-width:1100px){
  .review-workspace-root.review-compact-asset-layout .review-compact-always-tools{display:block;flex:none;min-height:0;background:#24272b;border-top:1px solid #3a414a}
  .review-workspace-root.review-compact-asset-layout .review-compact-always-tools>.review-markup-toolbar{
    width:100%;min-height:0;padding:8px 10px;display:grid!important;grid-template-columns:auto minmax(130px,1fr) 58px;align-items:center;gap:8px;border-top:0;background:#202428
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-always-tools .review-markup-toolbar-status{grid-column:1/-1;min-width:0;width:100%;margin:0;padding:4px 7px;font-size:9px}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover{width:min(420px,calc(100% - 28px))}
}

@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-compact-always-tools>.review-markup-toolbar{padding:6px 7px;grid-template-columns:auto minmax(90px,1fr) 48px;gap:6px}
  .review-workspace-root.review-compact-asset-layout .review-compact-always-tools .review-markup-toolbar-status{padding:3px 6px;font-size:8px}
}

/* Review mobile tools popup: compact glass surface matching the portal UI. */
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-backdrop{
    background:rgba(4,7,11,.16);
    -webkit-backdrop-filter:none;
    backdrop-filter:none
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover{
    width:min(440px,calc(100% - 22px));
    max-height:calc(100% - 22px);
    gap:10px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover>.review-markup-toolbar{
    width:100%;
    max-height:min(68dvh,560px);
    overflow:auto;
    padding:12px;
    display:grid!important;
    grid-template-columns:1fr;
    align-items:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--of-radius-panel);
    background:linear-gradient(145deg,rgba(35,39,46,.82),rgba(16,19,24,.76));
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
    box-shadow:0 20px 54px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.07)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip{
    grid-column:1;
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(9,minmax(0,1fr));
    gap:5px;
    padding:1px 0;
    overflow:visible;
    overscroll-behavior-x:none;
    scrollbar-width:none
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip::-webkit-scrollbar{display:none}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip>button{
    min-width:0;
    width:100%;
    height:43px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--of-radius-lg);
    background:rgba(255,255,255,.065);
    color:#edf3fa;
    box-shadow:var(--of-shadow-dark-top-highlight-strong);
    transition:transform .12s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip>button span{font-size:clamp(16px,4.5vw,20px)}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip>button:active{transform:scale(.96)}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-markup-mode-strip>button.is-active{
    background:linear-gradient(180deg,rgba(54,126,216,.78),rgba(35,91,164,.72));
    border-color:rgba(113,180,255,.88);
    box-shadow:0 0 0 1px rgba(62,139,231,.22),inset 0 1px 0 rgba(255,255,255,.12)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-color-row{
    grid-column:1;
    width:100%;
    min-width:0;
    gap:7px;
    padding:9px 10px;
    overflow-x:auto;
    border:1px solid rgba(255,255,255,.075);
    border-radius:var(--of-radius-xl);
    background:rgba(6,9,13,.24);
    scrollbar-width:none
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-color-row::-webkit-scrollbar{display:none}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-color-dot,
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-custom-color,
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-custom-color input[type="color"]{width:30px;height:30px}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-color-dot{
    border:2px solid rgba(5,8,12,.88);
    box-shadow:0 0 0 1px rgba(255,255,255,.20)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-color-dot.is-active{box-shadow:0 0 0 2px #f7f9fc,0 0 0 4px rgba(0,0,0,.42)}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-brush-size{
    grid-column:1;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) 34px;
    align-items:center;
    gap:9px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:var(--of-radius-xl);
    background:rgba(6,9,13,.24);
    color:#d8e0e9;
    font-size:10px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-brush-size-label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-brush-size-value{min-width:19px;height:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.10);border-radius:7px;background:rgba(255,255,255,.07);color:#fff;font-size:10px;font-weight:900;font-variant-numeric:tabular-nums}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-brush-size input{min-width:0;width:100%;accent-color:#3d8fe9}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-brush-preview-wrap{display:inline-flex!important;width:34px;height:34px;border-color:rgba(255,255,255,.09);border-radius:var(--of-radius-md);background:rgba(255,255,255,.055)}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-save-markup{display:none!important}
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-markup-toolbar-status{
    grid-column:1;
    min-width:0;
    width:100%;
    margin:0;
    padding:8px 10px;
    border-color:rgba(255,255,255,.08);
    border-radius:var(--of-radius-lg);
    background:rgba(5,8,12,.28)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover .review-model-navigation-controls{
    grid-column:1;
    width:100%;
    border-color:rgba(255,255,255,.08);
    border-radius:13px;
    background:rgba(5,8,12,.28)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock{width:100%;gap:7px}
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-mode-row{
    width:min(100%,360px);
    max-width:360px;
    padding:5px;
    gap:5px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(31,35,42,.78),rgba(16,19,24,.72));
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 14px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-mode-row>button{
    flex:1 1 0;
    min-width:0;
    height:39px;
    padding:0 8px;
    border-color:transparent;
    border-radius:var(--of-radius-md);
    background:rgba(255,255,255,.055);
    color:#cbd4df;
    font-size:10px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mode-dock .review-mode-row>button.is-active{
    background:linear-gradient(180deg,#2e73c8,#245eaa);
    border-color:rgba(106,172,250,.70);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12)
  }
}

/* review_mobile_actions_in_tools_20260813: move mobile Upload/Retake/Approve into the glass tools popover and reclaim viewer height. */
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-compact-mobile-action-dock{
    width:min(100%,360px);
    max-width:360px;
    padding:5px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
    gap:5px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(31,35,42,.78),rgba(16,19,24,.72));
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 14px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mobile-action-dock button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    height:40px;
    padding:0 8px;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:var(--of-radius-md);
    color:#f4f7fb;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mobile-action-dock .review-compact-popover-upload{
    background:linear-gradient(180deg,rgba(37,92,157,.82),rgba(24,63,108,.78));
    border-color:rgba(82,145,220,.48)!important
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mobile-action-dock .review-compact-popover-retake{
    background:linear-gradient(180deg,rgba(171,46,58,.82),rgba(114,31,40,.78));
    border-color:rgba(229,89,103,.48)!important
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mobile-action-dock .review-approve-btn{
    background:linear-gradient(180deg,rgba(32,132,78,.82),rgba(22,91,56,.78));
    border-color:rgba(76,186,125,.45)!important
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-mobile-action-dock button:disabled{opacity:.46;cursor:not-allowed}

  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools{
    height:50px;
    min-height:50px;
    padding:4px 7px;
    background:#292d32
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools .review-compact-footer-actions{
    width:42px;
    height:42px;
    min-height:42px;
    display:grid;
    grid-template-columns:42px;
    gap:0
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools .review-compact-footer-actions button{
    width:42px;
    height:42px;
    padding:0;
    border-radius:var(--of-radius-md)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools .review-mobile-tools-toggle span{font-size:29px}

  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools.has-overlay-dock{
    height:126px;
    min-height:126px;
    padding:5px 6px;
    gap:4px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools.has-overlay-dock .review-compact-footer-actions{
    width:42px;
    height:42px;
    min-height:42px;
    flex:0 0 42px
  }
}

/* review_mobile_footer_inline_timeline_20260813: keep + launcher and review file slider on one compact mobile row. */
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools.has-inline-mobile-timeline{
    height:50px;
    min-height:50px;
    padding:4px 7px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools.has-inline-mobile-timeline .review-compact-footer-actions{
    width:100%;
    height:42px;
    min-height:42px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    gap:6px
  }
  .review-workspace-root.review-compact-asset-layout .review-retake-preview-strip.review-retake-timeline-inline-mobile{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:42px;
    min-width:0;
    margin:0;
    padding:5px 8px;
    gap:0;
    border-radius:var(--of-radius-md);
    background:#1b1f23;
    border-color:#4d5966;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none
  }
  .review-workspace-root.review-compact-asset-layout .review-retake-preview-strip.review-retake-timeline-inline-mobile .review-retake-timeline-main{
    width:100%;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px
  }
  .review-workspace-root.review-compact-asset-layout .review-retake-preview-strip.review-retake-timeline-inline-mobile .review-retake-timeline-meta{
    min-width:29px
  }
  .review-workspace-root.review-compact-asset-layout .review-retake-preview-strip.review-retake-timeline-inline-mobile .review-retake-timeline-meta span{
    font-size:9px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools.has-inline-mobile-timeline.has-overlay-dock{
    height:124px;
    min-height:124px;
    padding:5px 6px;
    gap:5px
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools.has-inline-mobile-timeline.has-overlay-dock .review-compact-footer-actions{
    width:100%;
    height:42px;
    min-height:42px;
    flex:0 0 42px
  }
}

/* review_mobile_header_footer_glass_20260813: match compact Review header/footer to the mobile tools glass UI without blurring the reviewed image. */
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-workspace-header{
    background:linear-gradient(145deg,rgba(39,44,52,.84),rgba(18,21,26,.78));
    border-bottom:1px solid rgba(255,255,255,.13);
    -webkit-backdrop-filter:blur(18px) saturate(138%);
    backdrop-filter:blur(18px) saturate(138%);
    box-shadow:0 10px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select select{
    background:linear-gradient(180deg,rgba(24,28,34,.82),rgba(14,17,21,.78));
    border-color:rgba(255,255,255,.16);
    box-shadow:var(--of-shadow-dark-top-highlight-strong);
    color:#f2f5f8
  }
  .review-workspace-root.review-compact-asset-layout .review-close-btn{
    border-radius:var(--of-radius-md);
    background:rgba(255,255,255,.025);
    box-shadow:var(--of-shadow-dark-top-highlight-soft)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools{
    background:linear-gradient(145deg,rgba(39,44,52,.84),rgba(18,21,26,.80));
    border-top:1px solid rgba(255,255,255,.13);
    -webkit-backdrop-filter:blur(18px) saturate(138%);
    backdrop-filter:blur(18px) saturate(138%);
    box-shadow:0 -10px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools .review-mobile-tools-toggle{
    background:linear-gradient(180deg,rgba(50,56,65,.76),rgba(31,35,42,.72));
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07)
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-action-footer.is-mobile-actions-in-tools .review-mobile-tools-toggle.is-active{
    background:linear-gradient(180deg,rgba(56,126,211,.72),rgba(35,84,146,.68));
    border-color:rgba(112,173,241,.46)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)
  }
  .review-workspace-root.review-compact-asset-layout .review-retake-preview-strip.review-retake-timeline-inline-mobile{
    background:linear-gradient(180deg,rgba(29,34,40,.76),rgba(17,20,25,.72));
    border-color:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(14px) saturate(130%);
    backdrop-filter:blur(14px) saturate(130%);
    box-shadow:var(--of-shadow-dark-top-highlight-strong)
  }
}

/* review_mobile_version_dropdown_dark_20260813: keep compact mobile Review native Version A/B option menus readable on dark UI. */
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select select{
    color-scheme:dark;
    background-color:#15191e
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select select option{
    background-color:#15191e;
    color:#f2f5f8
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select select option:checked{
    background-color:#2862ad;
    color:#fff
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-header-selects .review-version-select select option:disabled{
    background-color:#15191e;
    color:#7f8996
  }
}

/* review_modern_markup_tool_icons_20260813: crisp inline SVG tool icons shared by desktop and mobile Review. */
.review-markup-mode-strip>button .review-tool-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
  font-size:0;
  line-height:0;
  color:currentColor;
  pointer-events:none
}
.review-markup-mode-strip>button .review-tool-icon svg{
  width:20px;
  height:20px;
  display:block;
  overflow:visible
}
.review-markup-mode-strip>button .review-tool-icon-eraser svg,
.review-markup-mode-strip>button .review-tool-icon-brush-eraser svg{width:21px;height:21px}
.review-markup-mode-strip>button:hover:not(:disabled) .review-tool-icon{transform:translateY(-.5px)}
.review-markup-mode-strip>button.is-active .review-tool-icon{filter:drop-shadow(0 1px 3px rgba(0,0,0,.22))}
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button .review-tool-icon,
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button .review-tool-icon svg{
    width:19px;
    height:19px
  }
  .review-workspace-root.review-compact-asset-layout .review-markup-mode-strip>button .review-tool-icon{flex-basis:19px}
}

/* attendance_analytics_desktop_column_separation_20260817: subtle column lanes and continuous dividers for desktop Work Analytics. */
.attendance-analytics-desktop-head>div{padding:12px 16px}
.attendance-analytics-desktop-head>div:nth-child(1),
.attendance-analytics-desktop-row>div:nth-child(1){
  background:#202328;
  border-right:1px solid #343b45
}
.attendance-analytics-desktop-head>div:nth-child(2),
.attendance-analytics-desktop-row>div:nth-child(2){
  background:#1b242e;
  border-right:1px solid #3a4655
}
.attendance-analytics-desktop-head>div:nth-child(3),
.attendance-analytics-desktop-row>div:nth-child(3){
  background:#211f2a;
  border-right:1px solid #413b50
}
.attendance-analytics-desktop-head>div:nth-child(4),
.attendance-analytics-desktop-row>div:nth-child(4){background:#1d2024}
.attendance-analytics-desktop-head>div:nth-child(1),
.attendance-analytics-desktop-head>div:nth-child(4){background:#25282d}
.attendance-analytics-desktop-head>div:nth-child(2){background:#222b36}
.attendance-analytics-desktop-head>div:nth-child(3){background:#292631}

/* attendance_analytics_manday_overrun_indicator_20260825: plain day values with a simple within/over planned mandays signal. */
.attendance-analytics-worked-days-value,
.attendance-analytics-total-mandays-value{
  display:inline-block;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:16px;
  line-height:1.15;
  font-weight:900;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.attendance-analytics-worked-days-value{color:#bfdbfe}
.attendance-analytics-total-mandays-value{color:#ddd6fe}
.attendance-analytics-total-mandays-value.is-empty{color:#68707c}
.attendance-analytics-worked-days-cell{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}
.attendance-analytics-manday-status-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  margin-top:1px;
  border-radius:var(--of-radius-pill);
  box-shadow:0 0 0 2px rgba(255,255,255,.025)
}
.attendance-analytics-manday-status-dot.is-within{
  background:#10b981;
  box-shadow:0 0 10px rgba(16,185,129,.28)
}
.attendance-analytics-manday-status-dot.is-over{
  background:#ef4444;
  box-shadow:0 0 10px rgba(239,68,68,.30)
}

/* attendance_analytics_stage_manday_status_v9_20260825:
   Show the same within/over planned-mandays signal beside every stage badge. */
.attendance-analytics-stage-manday-status-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:var(--of-radius-pill);
  box-shadow:0 0 0 2px rgba(255,255,255,.025)
}
.attendance-analytics-stage-manday-status-dot.is-within{
  background:#10b981;
  box-shadow:0 0 9px rgba(16,185,129,.26)
}
.attendance-analytics-stage-manday-status-dot.is-over{
  background:#ef4444;
  box-shadow:0 0 9px rgba(239,68,68,.28)
}

/* attendance_analytics_stage_colors_20260817: desktop stage label + total-days accents only; card body and artist progress retain the original neutral styling. */
.attendance-analytics-desktop-stage-unit{
  --aa-stage-rgb:139,92,246;
  --aa-stage-text:#ddd6fe
}
.attendance-analytics-desktop-stage-unit:nth-child(6n+2){--aa-stage-rgb:6,182,212;--aa-stage-text:#a5f3fc}
.attendance-analytics-desktop-stage-unit:nth-child(6n+3){--aa-stage-rgb:236,72,153;--aa-stage-text:#fbcfe8}
.attendance-analytics-desktop-stage-unit:nth-child(6n+4){--aa-stage-rgb:245,158,11;--aa-stage-text:#fde68a}
.attendance-analytics-desktop-stage-unit:nth-child(6n+5){--aa-stage-rgb:16,185,129;--aa-stage-text:#a7f3d0}
.attendance-analytics-desktop-stage-unit:nth-child(6n+6){--aa-stage-rgb:59,130,246;--aa-stage-text:#bfdbfe}
.attendance-analytics-desktop-stage[data-stage^="mod" i]{--aa-stage-rgb:139,92,246;--aa-stage-text:#ddd6fe}
.attendance-analytics-desktop-stage[data-stage^="uv" i]{--aa-stage-rgb:6,182,212;--aa-stage-text:#a5f3fc}
.attendance-analytics-desktop-stage[data-stage^="bs" i],
.attendance-analytics-desktop-stage[data-stage*="blend" i]{--aa-stage-rgb:236,72,153;--aa-stage-text:#fbcfe8}
.attendance-analytics-desktop-stage[data-stage^="tex" i]{--aa-stage-rgb:245,158,11;--aa-stage-text:#fde68a}
.attendance-analytics-desktop-stage[data-stage^="rig" i]{--aa-stage-rgb:16,185,129;--aa-stage-text:#a7f3d0}
.attendance-analytics-desktop-stage[data-stage^="fin" i]{--aa-stage-rgb:59,130,246;--aa-stage-text:#bfdbfe}
.attendance-analytics-desktop-stage[data-stage^="ani" i]{--aa-stage-rgb:249,115,22;--aa-stage-text:#fed7aa}
.attendance-analytics-desktop-stage[data-stage^="light" i],
.attendance-analytics-desktop-stage[data-stage^="lgt" i]{--aa-stage-rgb:234,179,8;--aa-stage-text:#fef08a}
.attendance-analytics-desktop-stage[data-stage^="comp" i]{--aa-stage-rgb:20,184,166;--aa-stage-text:#99f6e4}
.attendance-analytics-desktop-stage[data-stage^="render" i]{--aa-stage-rgb:217,70,239;--aa-stage-text:#f5d0fe}

/* Keep the attached Mandays header on the same stage accent as its Stage header. */
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="mod" i]){--aa-stage-rgb:139,92,246;--aa-stage-text:#ddd6fe}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="uv" i]){--aa-stage-rgb:6,182,212;--aa-stage-text:#a5f3fc}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="bs" i]),
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage*="blend" i]){--aa-stage-rgb:236,72,153;--aa-stage-text:#fbcfe8}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="tex" i]){--aa-stage-rgb:245,158,11;--aa-stage-text:#fde68a}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="rig" i]){--aa-stage-rgb:16,185,129;--aa-stage-text:#a7f3d0}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="fin" i]){--aa-stage-rgb:59,130,246;--aa-stage-text:#bfdbfe}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="ani" i]){--aa-stage-rgb:249,115,22;--aa-stage-text:#fed7aa}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="light" i]),
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="lgt" i]){--aa-stage-rgb:234,179,8;--aa-stage-text:#fef08a}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="comp" i]){--aa-stage-rgb:20,184,166;--aa-stage-text:#99f6e4}
.attendance-analytics-desktop-stage-unit:has(.attendance-analytics-desktop-stage[data-stage^="render" i]){--aa-stage-rgb:217,70,239;--aa-stage-text:#f5d0fe}
.attendance-analytics-desktop-stage>div:first-child>span:first-child{
  color:var(--aa-stage-text)!important;
  background:rgba(var(--aa-stage-rgb),.12)!important;
  border-color:rgba(var(--aa-stage-rgb),.34)!important
}
.attendance-analytics-desktop-stage>div:first-child>span:last-child{
  color:var(--aa-stage-text)!important
}

/* attendance_analytics_stage_header_separator_20260817: stage-colored header strip + divider; artist rows keep the original neutral styling. */
.attendance-analytics-desktop-stage>div:first-child{
  position:relative;
  margin:-10px -10px 8px!important;
  padding:10px 10px 8px;
  border-radius:11px 11px 0 0;
  background:linear-gradient(90deg,rgba(var(--aa-stage-rgb),.14),rgba(var(--aa-stage-rgb),.055))
}
.attendance-analytics-desktop-stage>div:first-child::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(var(--aa-stage-rgb),.48);
  pointer-events:none
}

/* attendance_analytics_stage_group_separators_20260822: desktop-only stage lanes. Each Stage + Mandays pair stays one visual unit. Dividers are centered in the 10px inter-group gap so they never run through the Mandays card border. */
@media (min-width:1280px){
  .attendance-analytics-desktop-row>div:nth-child(4){
    --attendance-stage-lane-pitch:311px;
    --attendance-stage-divider-x:306px;
    background-image:repeating-linear-gradient(
      to right,
      transparent 0,
      transparent var(--attendance-stage-divider-x),
      rgba(88,101,119,.34) var(--attendance-stage-divider-x),
      rgba(88,101,119,.34) 307px,
      transparent 307px,
      transparent var(--attendance-stage-lane-pitch)
    );
    background-position:12px 0;
    background-repeat:repeat-x
  }
  .attendance-analytics-desktop-stage-unit{
    position:relative
  }
}

/* Photopea-matched Saturday/Sunday bands for multi-person Attendance sheets.
   Empty weekend cells use darker neutral tones, while marked status cells keep their original colours. */
.attendance-weekend-saturday {
  background-color: #202020 !important;
}
.attendance-weekend-sunday {
  background-color: #1a1a1a !important;
}

/* admin_login_modal_modern_v1_20260825: compact dark credential editor matching the Originfly UI. */
.admin-credentials-modal{
  width:min(560px,calc(100vw - 32px));
  margin:auto;
  overflow:hidden;
  border:1px solid #343a44;
  border-radius:var(--of-radius-panel);
  background:#171a1f;
  color:#f4f7fb;
  box-shadow:0 16px 40px rgba(0,0,0,.28)
}
.admin-credentials-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:21px 22px 18px;
  border-bottom:1px solid #2b3038;
  background:linear-gradient(180deg,#1b1f25 0%,#181b20 100%)
}
.admin-credentials-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:13px
}
.admin-credentials-symbol{
  display:flex;
  width:42px;
  height:42px;
  flex:0 0 42px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(59,130,246,.42);
  border-radius:var(--of-radius-lg);
  background:rgba(37,99,235,.12);
  color:#8ab8ff
}
.admin-credentials-symbol svg{width:21px;height:21px}
.admin-credentials-symbol-warning{
  border-color:rgba(245,158,11,.42);
  background:rgba(245,158,11,.1);
  color:#fbbf24
}
.admin-credentials-heading-copy{min-width:0}
.admin-credentials-kicker{
  margin-bottom:3px;
  color:#7f8a99;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase
}
.admin-credentials-heading-copy h2{
  margin:0;
  color:#f8fafc;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25
}
.admin-credentials-heading-copy p{
  margin:4px 0 0;
  max-width:390px;
  color:#8f99a7;
  font-size:11px;
  font-weight:600;
  line-height:1.45
}
.admin-credentials-close{
  display:flex;
  width:34px;
  height:34px;
  flex:0 0 34px;
  align-items:center;
  justify-content:center;
  border:1px solid #333944;
  border-radius:var(--of-radius-md);
  background:#20242a;
  color:#8f99a7;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}
.admin-credentials-close svg{width:16px;height:16px}
.admin-credentials-close:hover{
  border-color:#4b5563;
  background:#282d35;
  color:#fff
}
.admin-credentials-body{padding:20px 22px 22px}
.admin-credentials-verify{
  margin:0 0 20px;
  padding:15px;
  border:1px solid #2c323b;
  border-radius:13px;
  background:#12151a
}
.admin-credentials-new-login{margin:0}
.admin-credentials-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
  color:#dbe2ea;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em
}
.admin-credentials-required{
  padding:3px 7px;
  border:1px solid rgba(59,130,246,.25);
  border-radius:var(--of-radius-pill);
  background:rgba(59,130,246,.09);
  color:#8ab8ff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.admin-credential-control{min-width:0}
.admin-credential-username-control{margin-bottom:14px}
.admin-credential-label{
  display:block;
  margin:0 0 6px 1px;
  color:#aeb7c3;
  font-size:11px;
  font-weight:700;
  line-height:1.25
}
.admin-credential-field{position:relative}
.admin-credential-input{
  width:100%;
  height:43px;
  border:1px solid #343b46;
  border-radius:var(--of-radius-md);
  outline:none;
  background:#0f1216;
  padding:0 12px;
  color:#f7f9fc;
  font-size:13px;
  font-weight:600;
  caret-color:#60a5fa;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}
.admin-credential-input-password{padding-right:45px}
.admin-credential-input::placeholder{
  color:#626b78;
  font-weight:500
}
.admin-credential-input:hover{border-color:#424b58}
.admin-credential-input:focus{
  border-color:#3b82f6;
  background:#11151b;
  box-shadow:0 0 0 3px rgba(59,130,246,.12)
}
.admin-credentials-password-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px
}
.admin-credential-eye{
  position:absolute;
  top:50%;
  right:7px;
  display:flex;
  width:31px;
  height:31px;
  transform:translateY(-50%);
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--of-radius-sm);
  background:transparent;
  color:#737e8c;
  transition:background .15s ease,color .15s ease
}
.admin-credential-eye:hover{
  background:#202630;
  color:#dbe6f5
}
.admin-credential-eye svg{width:17px;height:17px}
.admin-credential-eye-off{display:none}
.admin-credential-eye.is-visible .admin-credential-eye-open{display:none}
.admin-credential-eye.is-visible .admin-credential-eye-off{display:block}
.admin-credentials-note{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:13px;
  color:#6f7a88;
  font-size:10px;
  font-weight:600;
  line-height:1.35
}
.admin-credentials-note svg{width:14px;height:14px;flex:0 0 14px;color:#667488}
.admin-credentials-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:15px 22px;
  border-top:1px solid #2b3038;
  background:#14171b
}
.admin-credentials-btn{
  display:inline-flex;
  min-height:39px;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:var(--of-radius-md);
  padding:0 15px;
  font-size:12px;
  font-weight:800;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease
}
.admin-credentials-btn:active{transform:translateY(1px)}
.admin-credentials-btn-secondary{
  border-color:#373e48;
  background:#242930;
  color:#d6dce4
}
.admin-credentials-btn-secondary:hover{
  border-color:#4b5563;
  background:#2c323a;
  color:#fff
}
.admin-credentials-btn-primary{
  border-color:#3478e5;
  background:#2563d9;
  color:#fff
}
.admin-credentials-btn-primary:hover{background:#2f70e7}
.admin-credentials-btn-primary svg{width:15px;height:15px}
.admin-credentials-disabled-message{
  padding:15px;
  border:1px solid rgba(245,158,11,.22);
  border-radius:var(--of-radius-lg);
  background:rgba(245,158,11,.055);
  color:#c8d0da;
  font-size:12px;
  font-weight:600;
  line-height:1.55
}
/* account_settings_mobile_backdrop_blur_v1_20260825: give Account Settings the same phone-only backdrop treatment. */
@media (max-width:767px){
  #modal-container:has(.admin-credentials-disabled),
  #modal-container:has(.account-settings-modal){
    background:rgba(7,9,12,.52)!important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px)
  }
  #modal-container:has(> #change-credentials-form){
    padding:0!important;
    overflow:hidden
  }
  #change-credentials-form{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none
  }
  #change-credentials-form > :is(.admin-credentials-header,.admin-credentials-body,.admin-credentials-footer){
    padding-left:calc(17px + env(safe-area-inset-left,0px));
    padding-right:calc(17px + env(safe-area-inset-right,0px))
  }
  #change-credentials-form > .admin-credentials-header{
    flex-shrink:0;
    align-items:center;
    padding-top:calc(17px + env(safe-area-inset-top,0px))
  }
  #change-credentials-form > .admin-credentials-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain
  }
  #change-credentials-form > .admin-credentials-footer{
    flex-shrink:0;
    padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))
  }
  #change-credentials-form .admin-credential-input{font-size:16px}
}

@media (max-width:600px){
  .admin-credentials-disabled{
    width:min(100% - 20px,520px);
    border-radius:var(--of-radius-2xl)
  }
  .admin-credentials-header{padding:17px 17px 15px}
  .admin-credentials-symbol{width:38px;height:38px;flex-basis:38px;border-radius:11px}
  .admin-credentials-heading-copy h2{font-size:18px}
  .admin-credentials-heading-copy p{font-size:10px}
  .admin-credentials-body{padding:17px}
  .admin-credentials-verify{margin-bottom:17px;padding:13px}
  .admin-credentials-password-grid{grid-template-columns:1fr;gap:13px}
  .admin-credentials-footer{padding:13px 17px}
  .admin-credentials-btn{flex:1}
}

/* attendance_analytics_mandays_header_cell_v3_20260825:
   Match the user's reference: Mandays is the right header cell of the Stage/Artists card,
   with the planned value centered in the body below it. */
@media (min-width:1280px){
  .attendance-analytics-desktop-stage-unit{
    gap:0!important;
    border-color:#343b45!important;
    background:#202328!important;
    box-shadow:none
  }
  .attendance-analytics-desktop-stage-unit>.attendance-analytics-desktop-stage{
    border:0!important;
    border-radius:0!important;
    background-color:#202328
  }
  .attendance-analytics-desktop-stage>div:first-child{
    min-height:40px;
    box-sizing:border-box
  }
  .attendance-analytics-desktop-stage-unit>.attendance-analytics-desktop-stage-mandays{
    border:0!important;
    border-left:1px solid #343b45!important;
    border-radius:0!important;
    background:#1d2024!important;
    min-height:100%;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    padding:0!important
  }
  .attendance-analytics-desktop-stage-mandays-head{
    min-height:40px;
    padding:0 12px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(var(--aa-stage-rgb),.48);
    background:linear-gradient(90deg,rgba(var(--aa-stage-rgb),.12),rgba(var(--aa-stage-rgb),.045));
    color:#e5e7eb;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:0;
    white-space:nowrap
  }
  .attendance-analytics-desktop-stage-mandays-value{
    flex:1;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    color:#f3f4f6;
    font-size:24px;
    line-height:1;
    font-weight:600;
    font-variant-numeric:tabular-nums
  }
  .attendance-analytics-desktop-stage-mandays-value.is-empty{
    color:#5f6875
  }
  .attendance-analytics-desktop-row>div:nth-child(4){
    --attendance-stage-lane-pitch:286px;
    --attendance-stage-divider-x:281px
  }
}

/* attendance_analytics_stage_lane_thin_dividers_v4_20260825:
   Replace the wide Work Analytics stage-lane bands with a single subtle 1px divider line. */
@media (min-width:1280px){
  .attendance-analytics-desktop-row>div:nth-child(4){
    background-image:repeating-linear-gradient(
      to right,
      transparent 0,
      transparent var(--attendance-stage-divider-x),
      rgba(88,101,119,.34) var(--attendance-stage-divider-x),
      rgba(88,101,119,.34) calc(var(--attendance-stage-divider-x) + 1px),
      transparent calc(var(--attendance-stage-divider-x) + 1px),
      transparent var(--attendance-stage-lane-pitch)
    )!important;
  }
}

/* asset_category_multiselect_v1_20260826:
   Hide the native <details> marker so the Asset category filter keeps the
   same compact dark control appearance while using checkbox multi-select. */
.asset-category-filter-menu > summary{
  list-style:none
}
.asset-category-filter-menu > summary::-webkit-details-marker{
  display:none
}
.asset-category-filter-menu[open] > summary{
  background-color:#555
}

/* asset_category_multiselect_width_match_v2_20260826:
   On the desktop Asset toolbar, make the category trigger exactly as wide as
   its checkbox dropdown so both edges line up cleanly. Mobile stays compact. */
@media (min-width: 768px){
  .asset-category-filter-menu > summary{
    width:200px;
    max-width:200px;
  }
  .asset-category-filter-menu > div{
    width:200px;
    min-width:200px;
    max-width:200px;
  }
}

/* asset_category_multiselect_mobile_fix_v4_20260826:
   Keep the mobile Asset category trigger inside its filter-grid cell and keep
   checkbox controls at normal checkbox size. The general mobile filter input
   sizing must never stretch category checkboxes into full-width blocks. */
@media (max-width: 767px){
  .mobile-filterbar .asset-category-filter-menu{
    width:100%;
    min-width:0;
  }
  .mobile-filterbar .asset-category-filter-menu > summary{
    width:100%;
    max-width:100%;
    height:38px;
    box-sizing:border-box;
    border-radius:var(--of-radius-md)!important;
    font-size:13px!important;
  }
  .mobile-filterbar .asset-category-filter-menu > div{
    width:200px;
    min-width:200px;
    max-width:calc(100vw - 24px);
    overflow-x:hidden;
  }
  .mobile-filterbar .asset-category-filter-menu input[type="checkbox"]{
    width:14px!important;
    min-width:14px!important;
    max-width:14px!important;
    height:14px!important;
    min-height:14px!important;
    max-height:14px!important;
    border-radius:2px!important;
    flex:0 0 14px!important;
  }
  .mobile-filterbar .asset-category-filter-menu label > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* asset_status_multiselect_v1_20260826:
   Match the Asset Category checkbox menu behavior for the assignment Status
   filter. The trigger and dropdown align on desktop; mobile checkboxes remain
   compact instead of inheriting full-width filter input sizing. */
.asset-status-filter-menu > summary{
  list-style:none
}
.asset-status-filter-menu > summary::-webkit-details-marker{
  display:none
}
.asset-status-filter-menu[open] > summary{
  background-color:#555
}
@media (min-width: 768px){
  .asset-status-filter-menu > summary{
    width:180px;
    max-width:180px;
  }
  .asset-status-filter-menu > div{
    width:180px;
    min-width:180px;
    max-width:180px;
  }
}
@media (max-width: 767px){
  .mobile-filterbar .asset-status-filter-menu{
    width:100%;
    min-width:0;
  }
  .mobile-filterbar .asset-status-filter-menu > summary{
    width:100%;
    max-width:100%;
    height:38px;
    box-sizing:border-box;
    border-radius:var(--of-radius-md)!important;
    font-size:13px!important;
  }
  .mobile-filterbar .asset-status-filter-menu > div{
    width:180px;
    min-width:180px;
    max-width:calc(100vw - 24px);
    overflow-x:hidden;
  }
  .mobile-filterbar .asset-status-filter-menu input[type="checkbox"]{
    width:14px!important;
    min-width:14px!important;
    max-width:14px!important;
    height:14px!important;
    min-height:14px!important;
    max-height:14px!important;
    border-radius:2px!important;
    flex:0 0 14px!important;
  }
  .mobile-filterbar .asset-status-filter-menu label > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* mobile_new_assignment_fullscreen_v1_20260827:
   The Asset New Assignment form uses the whole phone viewport so the dashboard
   behind it does not compete visually with the creation form. Desktop remains unchanged. */
@media (max-width: 767px) {
  #modal-container[data-modal-type="assignment"] {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background: #242424 !important;
  }

  #modal-container[data-modal-type="assignment"] .new-assignment-modal-fit {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #242424 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  #modal-container[data-modal-type="assignment"] .new-assignment-modal-fit > button[onclick="closeModal()"] {
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 14px !important;
  }
}

/* mobile_upload_version_professional_ui_v2_20260827:
   Full-screen mobile upload workspace with compact assignment context, clear
   upload sections, and a persistent action bar. */
@media (max-width: 767px) {
  #modal-container[data-modal-type="upload-version"] {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background: #1f2124 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-modal-fit {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #1f2124 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    overscroll-behavior: contain;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-heading {
    flex: 0 0 auto;
    min-height: calc(58px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #202225;
    border-bottom: 1px solid #34383e;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-heading h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-mobile-close {
    position: static !important;
    inset: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: #2a2d31 !important;
    border: 1px solid #484e56 !important;
    color: #d7dce2 !important;
    box-shadow: none !important;
    z-index: 20;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-mobile-close:active {
    transform: scale(.95);
    background: #34383d !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 14px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Assignment summary: smaller, flatter, and easier to scan. */
  #modal-container[data-modal-type="upload-version"] .upload-version-context > div {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border-radius: var(--of-radius-xl) !important;
    border: 1px solid #3a3f46 !important;
    background: #26292d !important;
    box-shadow: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:first-child {
    gap: 10px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:first-child > div:first-child {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #464c54 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(2) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(2) > div {
    min-width: 0;
    padding: 8px 10px !important;
    border-radius: 9px !important;
  }

  /* Stage is already visible above; hide the internal stage code on phones. */
  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(3) {
    display: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block,
  #modal-container[data-modal-type="upload-version"] .upload-version-source-block {
    border: 1px solid #373c43;
    border-radius: var(--of-radius-xl);
    background: #26292d;
    box-shadow: none;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block {
    margin-bottom: 12px !important;
    padding: 14px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "label label"
      "picker name";
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-field-label {
    margin: 0 0 10px !important;
    color: #aeb6c1 !important;
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block .upload-version-field-label {
    grid-area: label;
    margin-bottom: 0 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-picker {
    grid-area: picker;
    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    border-radius: 11px !important;
    border: 1px dashed #59616b !important;
    background: #30343a !important;
    color: #8f99a6 !important;
    box-shadow: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-name {
    grid-area: name;
    min-width: 0;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: hidden;
    color: #c8cfd8 !important;
    font-size: 12px !important;
    line-height: 1.45;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-name:empty::before {
    content: "Tap the image box to add a thumbnail";
    color: #7f8995;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-source-block {
    margin-bottom: 0 !important;
    padding: 14px;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker {
    min-height: 48px;
    padding: 0 14px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #4a515a !important;
    background: #30343a !important;
    box-shadow: none !important;
    font-weight: 600;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    text-align: left;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-source-block > .mt-2 {
    margin-top: 10px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #41474f !important;
    background: #222529 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-or {
    margin: 12px 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #717b87 !important;
    font-size: 9px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-or::before,
  #modal-container[data-modal-type="upload-version"] .upload-version-or::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: #3b4047;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-link-input {
    height: 48px;
    padding: 0 13px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #474e57 !important;
    background: #222529 !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-link-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15) !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-actions {
    flex: 0 0 auto;
    width: 100%;
    display: grid !important;
    grid-template-columns: .8fr 1.2fr;
    gap: 10px !important;
    margin: 0 !important;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    background: #202225;
    border-top: 1px solid #34383e;
    box-shadow: 0 -10px 26px rgba(0,0,0,.14);
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-actions > button {
    width: 100%;
    min-width: 0;
    height: 46px;
    margin-left: 0 !important;
    padding: 0 14px !important;
    border-radius: var(--of-radius-md) !important;
    font-size: 13px;
    font-weight: 750;
    box-shadow: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-cancel {
    background: #2d3136 !important;
    border: 1px solid #454b53 !important;
    color: #d8dde4 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-submit {
    background: #2563eb !important;
    border: 1px solid #3b82f6 !important;
    color: #fff !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-submit:disabled {
    opacity: .42 !important;
    filter: saturate(.65);
  }
}

/* desktop_upload_version_professional_ui_v3_20260827:
   Reuse the polished Upload File visual language on desktop while preserving
   a centered, bounded popup instead of the mobile full-screen workspace. */
@media (min-width: 768px) {
  #modal-container[data-modal-type="upload-version"] .upload-version-modal-fit {
    width: 580px !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid #40464e !important;
    border-radius: var(--of-radius-2xl) !important;
    background: #1f2124 !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-heading {
    flex: 0 0 auto;
    min-height: 60px;
    padding: 12px 14px 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #202225;
    border-bottom: 1px solid #34383e;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-heading h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-mobile-close {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: #2a2d31 !important;
    border: 1px solid #484e56 !important;
    color: #d7dce2 !important;
    box-shadow: none !important;
    align-items: center;
    justify-content: center;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-mobile-close:hover {
    background: #34383d !important;
    color: #fff !important;
    border-color: #5a626c !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div {
    margin: 0 0 14px !important;
    padding: 13px !important;
    border-radius: var(--of-radius-xl) !important;
    border: 1px solid #3a3f46 !important;
    background: #26292d !important;
    box-shadow: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:first-child {
    gap: 11px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:first-child > div:first-child {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #464c54 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(2) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 11px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(2) > div {
    min-width: 0;
    padding: 9px 11px !important;
    border-radius: 9px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(3) {
    display: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block,
  #modal-container[data-modal-type="upload-version"] .upload-version-source-block {
    border: 1px solid #373c43;
    border-radius: var(--of-radius-xl);
    background: #26292d;
    box-shadow: none;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block {
    margin-bottom: 14px !important;
    padding: 15px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-areas:
      "label label"
      "picker name";
    column-gap: 14px;
    row-gap: 10px;
    align-items: center;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-field-label {
    margin: 0 0 10px !important;
    color: #aeb6c1 !important;
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block .upload-version-field-label {
    grid-area: label;
    margin-bottom: 0 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-picker {
    grid-area: picker;
    width: 82px !important;
    height: 82px !important;
    margin: 0 !important;
    border-radius: 11px !important;
    border: 1px dashed #59616b !important;
    background: #30343a !important;
    color: #8f99a6 !important;
    box-shadow: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-picker:hover {
    background: #363b41 !important;
    border-color: #6b7580 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-name {
    grid-area: name;
    min-width: 0;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: hidden;
    color: #c8cfd8 !important;
    font-size: 12px !important;
    line-height: 1.45;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-name:empty::before {
    content: "Click the image box to add a thumbnail";
    color: #7f8995;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-source-block {
    margin-bottom: 0 !important;
    padding: 15px;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker {
    min-height: 48px;
    padding: 0 14px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #4a515a !important;
    background: #30343a !important;
    box-shadow: none !important;
    font-weight: 600;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker:hover {
    background: #363b41 !important;
    border-color: #5a636e !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    text-align: left;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-source-block > .mt-2 {
    margin-top: 10px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #41474f !important;
    background: #222529 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-or {
    margin: 12px 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #717b87 !important;
    font-size: 9px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-or::before,
  #modal-container[data-modal-type="upload-version"] .upload-version-or::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: #3b4047;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-link-input {
    height: 48px;
    padding: 0 13px !important;
    border-radius: var(--of-radius-md) !important;
    border-color: #474e57 !important;
    background: #222529 !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-link-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15) !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-actions {
    flex: 0 0 auto;
    width: 100%;
    display: grid !important;
    grid-template-columns: 130px minmax(180px, 1fr);
    justify-content: end;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 16px;
    background: #202225;
    border-top: 1px solid #34383e;
    box-shadow: 0 -10px 26px rgba(0,0,0,.10);
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-actions > button {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin-left: 0 !important;
    padding: 0 16px !important;
    border-radius: var(--of-radius-md) !important;
    font-size: 13px;
    font-weight: 750;
    box-shadow: none !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-cancel {
    background: #2d3136 !important;
    border: 1px solid #454b53 !important;
    color: #d8dde4 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-cancel:hover {
    background: #373c42 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-submit {
    background: #2563eb !important;
    border: 1px solid #3b82f6 !important;
    color: #fff !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-submit:hover:not(:disabled) {
    background: #2f6df0 !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-submit:disabled {
    opacity: .42 !important;
    filter: saturate(.65);
  }
}

/* upload_version_new_assignment_tone_v4_20260827:
   Keep the polished Upload File layout, but reuse the warmer neutral charcoal
   palette from New Assignment. Blue remains only for active stage/action cues. */
#modal-container[data-modal-type="upload-version"] .upload-version-heading,
#modal-container[data-modal-type="upload-version"] .upload-version-actions {
  border-color: rgba(107, 114, 128, .36) !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-mobile-close {
  background: rgba(45, 45, 45, .88) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #c7cbd1 !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-mobile-close:hover,
#modal-container[data-modal-type="upload-version"] .upload-version-mobile-close:active {
  background: #444 !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-context > div,
#modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-block,
#modal-container[data-modal-type="upload-version"] .upload-version-source-block {
  background: rgba(42, 42, 42, .72) !important;
  border-color: rgba(75, 85, 99, .52) !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(2) > div {
  background: rgba(34, 34, 34, .82) !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-context > div > div:nth-child(2) > div:first-child {
  border-color: rgba(59, 130, 246, .72) !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-picker,
#modal-container[data-modal-type="upload-version"] .upload-version-file-picker,
#modal-container[data-modal-type="upload-version"] .upload-version-link-input,
#modal-container[data-modal-type="upload-version"] .upload-version-source-block > .mt-2 {
  background: rgba(34, 34, 34, .88) !important;
  border-color: rgba(75, 85, 99, .78) !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-thumbnail-picker:hover,
#modal-container[data-modal-type="upload-version"] .upload-version-file-picker:hover {
  background: rgba(51, 51, 51, .90) !important;
  border-color: rgba(96, 106, 120, .90) !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-or::before,
#modal-container[data-modal-type="upload-version"] .upload-version-or::after {
  background: rgba(75, 85, 99, .55) !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-cancel {
  background: #444 !important;
  border-color: rgba(107, 114, 128, .75) !important;
  color: #f3f4f6 !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-cancel:hover {
  background: #505050 !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-submit {
  background: #255dd7 !important;
  border-color: #3473eb !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-submit:hover:not(:disabled) {
  background: #2d67df !important;
}

@media (max-width: 767px) {
  #modal-container[data-modal-type="upload-version"],
  #modal-container[data-modal-type="upload-version"] .upload-version-modal-fit,
  #modal-container[data-modal-type="upload-version"] .upload-version-heading,
  #modal-container[data-modal-type="upload-version"] .upload-version-actions {
    background: #242424 !important;
  }
}

@media (min-width: 768px) {
  #modal-container[data-modal-type="upload-version"] .upload-version-modal-fit,
  #modal-container[data-modal-type="upload-version"] .upload-version-heading,
  #modal-container[data-modal-type="upload-version"] .upload-version-actions {
    background: #2c2d2d !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-modal-fit {
    border-color: rgba(156, 163, 175, .22) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34) !important;
  }
}

/* mobile_thumbnail_crop_fullscreen_v1_20260827:
   Use the full phone viewport for thumbnail/profile crop so the underlying Asset
   workspace and mobile navigation do not compete visually with the crop task.
   Desktop crop windows remain unchanged. */
@media (max-width: 767px) {
  #modal-container[data-modal-type="crop-profile"] {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background: #242424 !important;
  }

  #modal-container[data-modal-type="crop-profile"] .of-crop-modal {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #242424 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #modal-container[data-modal-type="crop-profile"] .of-crop-header {
    flex: 0 0 auto !important;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px !important;
    background: #242424 !important;
  }

  #modal-container[data-modal-type="crop-profile"] .of-crop-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: hidden !important;
    display: flex !important;
  }

  #modal-container[data-modal-type="crop-profile"] .of-crop-stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: var(--of-radius-panel) !important;
    display: flex !important;
    background: #1f2020 !important;
  }

  #modal-container[data-modal-type="crop-profile"] .of-crop-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: var(--of-radius-xl) !important;
  }

  #modal-container[data-modal-type="crop-profile"] .of-crop-footer {
    flex: 0 0 auto !important;
    gap: 10px !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #242424 !important;
  }

  #modal-container[data-modal-type="crop-profile"] .of-crop-secondary,
  #modal-container[data-modal-type="crop-profile"] .of-crop-primary {
    flex: 1 1 0 !important;
    min-height: 46px !important;
  }
}

/* mobile_stage_workspace_tight_join_v1_20260827:
   Keep the selected workflow stage visually attached to its mobile workspace.
   Remove the old vertical stem and the stacked bottom padding that created the
   large empty band between the stage badge and the selected-stage pointer. */
@media (max-width: 760px) {
  .mobile-assignment-body {
    gap: 7px !important;
  }

  .mobile-assignment-body .assignment-stage-track-wrap {
    padding-bottom: 0 !important;
  }

  .mobile-assignment-body .assignment-stage-track {
    padding-bottom: 0 !important;
  }

  .mobile-assignment-body .assignment-stage-selected::after {
    display: none !important;
    content: none !important;
  }
}

/* review_mobile_tools_stable_overlay_v1_20260827: keep the Review image pixel-stable while the floating tools open/close on phones. */
@media (max-width:767px){
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-backdrop,
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover{
    transition:none!important;
  }
  .review-workspace-root.review-compact-asset-layout .review-compact-tools-popover,
  .review-workspace-root.review-compact-asset-layout.review-compact-tools-open .review-compact-tools-popover{
    transform:translate(-50%,-50%)!important;
  }
}

/* mobile_assignment_review_actions_single_row_v1_20260827: when Review is available on a mobile assignment, keep Input / Download / Review in one compact three-column row. */

/* subscription_upgrade_plan_picker_v1_20260830:
   Company-admin Upgrade opens a responsive, ChatGPT-inspired plan-card chooser.
   Choosing a non-current plan now continues into the explicit TEST checkout flow. */
#modal-container[data-modal-type="subscription-upgrade"] {
    padding: 18px !important;
    background: rgba(0,0,0,.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center !important;
    justify-content: center !important;
}
.subscription-upgrade-picker {
    width: min(1160px, calc(100vw - 36px));
    max-height: min(900px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    color: #f5f5f5;
    background: #111;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    box-shadow: 0 28px 90px rgba(0,0,0,.64);
}
.subscription-upgrade-picker-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 16px;
}
.subscription-upgrade-picker-header h2 {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.025em;
}
.subscription-upgrade-current-label {
    margin-top: 7px;
    color: #9ca3af;
    font-size: 12px;
}
.subscription-upgrade-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--of-radius-pill);
    background: #292929;
    color: #e5e7eb;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.subscription-upgrade-close:hover { background: #353535; color: #fff; }
.subscription-upgrade-picker-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 6px 24px 26px;
    scrollbar-width: thin;
}
.subscription-choice-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.subscription-choice-card {
    min-width: 0;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    border: 1px solid #444;
    border-radius: var(--of-radius-2xl);
    background: #242424;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.subscription-choice-card:hover {
    border-color: #5f6368;
    transform: translateY(-1px);
}
.subscription-choice-card.is-selected {
    border-color: #60a5fa;
    background: linear-gradient(180deg, rgba(30,64,95,.82), rgba(31,41,55,.92));
    box-shadow: 0 0 0 1px rgba(96,165,250,.18), 0 18px 42px rgba(0,0,0,.22);
}
.subscription-choice-card.is-current {
    border-color: rgba(255,255,255,.18);
}
.subscription-choice-card-head {
    min-height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.subscription-choice-card-head h3 {
    margin: 0;
    color: #f5f5f5;
    font-size: 25px;
    line-height: 1.12;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.subscription-choice-current-badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--of-radius-pill);
    background: rgba(255,255,255,.07);
    color: #cbd5e1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}
.subscription-choice-price-row {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
}
.subscription-choice-price {
    color: #f8fafc;
    font-size: clamp(38px, 3.5vw, 52px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.045em;
}
.subscription-choice-price-meta {
    max-width: 90px;
    color: #d1d5db;
    font-size: 11px;
    line-height: 1.25;
}
.subscription-choice-summary {
    min-height: 44px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 16px;
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 700;
}
.subscription-choice-select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #60a5fa;
    border-radius: var(--of-radius-pill);
    background: #49a7f7;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease, background-color .15s ease;
}
.subscription-choice-select.is-renew {
    border-color: #f59e0b;
    background: #fbbf24;
    color: #2a1a00;
    box-shadow: 0 0 0 1px rgba(245,158,11,.10);
}
.subscription-choice-select.is-renew:hover:not(:disabled) {
    background: #fcd34d;
    filter: none;
}
.subscription-choice-select:hover:not(:disabled) { filter: brightness(1.08); }
.subscription-choice-select:active:not(:disabled) { transform: translateY(1px); }
.subscription-choice-select.is-selected { background: #2563eb; }
.subscription-choice-select.is-current,
.subscription-choice-select:disabled {
    border-color: rgba(255,255,255,.10);
    background: #292929;
    color: #8b8b8b;
    cursor: default;
}
.subscription-choice-divider {
    height: 1px;
    margin: 18px 0;
    background: rgba(255,255,255,.08);
}
.subscription-choice-features {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-bottom: 6px;
}
.subscription-choice-feature {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1.35;
}
.subscription-choice-check {
    color: #dbeafe;
    font-size: 13px;
    font-weight: 900;
}
.subscription-choice-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    text-align: center;
    color: #9ca3af;
}
.subscription-choice-empty-title { color: #f3f4f6; font-size: 18px; font-weight: 800; }
.subscription-choice-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #60a5fa;
    border-radius: var(--of-radius-pill);
    animation: subscription-choice-spin .75s linear infinite;
}
@keyframes subscription-choice-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
    .subscription-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    #modal-container[data-modal-type="subscription-upgrade"] {
        padding: 0 !important;
        align-items: stretch !important;
    }
    .subscription-upgrade-picker {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        background: #111;
    }
    .subscription-upgrade-picker-header {
        padding: calc(16px + env(safe-area-inset-top)) 16px 12px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .subscription-upgrade-picker-header h2 { font-size: 24px; }
    .subscription-upgrade-picker-body {
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    }
    .subscription-choice-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .subscription-choice-card {
        min-height: 0;
        padding: 18px 16px;
        border-radius: var(--of-radius-xl);
    }
    .subscription-choice-price-row { min-height: 82px; }
    .subscription-choice-summary { min-height: 0; margin: 0 0 14px; }
    .subscription-choice-divider { margin: 16px 0; }
}

/* mobile-admin-controls-change-scroll-lock-v2-20260830 */
@media (max-width: 767px) {
    .company-content-wrap.company-button-tab-content,
    .company-single-panel-wrap.company-admin-wrap,
    .company-admin-wrap .company-admin-panel,
    .company-admin-wrap .subscription-plans-workspace {
        overflow-anchor: none !important;
    }
    .company-content-wrap.company-button-tab-content {
        scroll-behavior: auto !important;
    }
}

/* admin-controls-desktop-workspace-v1-20260830: wide storage strip + trial/plan card row */
@media (min-width: 1300px) {
    .company-single-panel-wrap.company-admin-wrap {
        max-width: min(1880px, calc(100vw - 36px)) !important;
    }

    .company-admin-control-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    /* Use the full top row for storage instead of leaving unused desktop space. */
    .company-admin-control-grid > .company-storage-control-panel {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(220px, .72fr) minmax(520px, 1.7fr) minmax(340px, .95fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 14px !important;
        row-gap: 10px !important;
        align-items: center !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;
    }
    .company-storage-control-header {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
    }
    .company-storage-control-progress {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin-top: 0 !important;
    }
    .company-storage-control-metrics {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        margin-top: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .company-storage-control-metrics > div {
        min-height: 76px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .company-storage-control-editor {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: stretch;
        margin-top: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 12px !important;
    }

    /* Trial is the first card in the lower row; plans fill the remaining three columns. */
    .company-admin-control-grid > .trial-signup-card {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: auto !important;
    }
    .company-admin-control-grid > .subscription-plans-workspace {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        align-self: start !important;
    }
    .subscription-plans-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }
    .subscription-plans-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        align-items: start !important;
    }
    .subscription-plan-editor-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 14px !important;
    }
    .subscription-plan-active-row {
        margin-bottom: 12px !important;
    }
    .subscription-plan-active-btn {
        min-width: 128px !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
    .subscription-plan-primary-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(92px, .75fr) !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }
    .subscription-plan-primary-grid label {
        font-size: 12px !important;
    }
    .subscription-plan-limit-grid {
        gap: 7px !important;
    }
    .subscription-plan-limit-grid input,
    .subscription-plan-input {
        min-height: 38px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .subscription-plan-types-panel {
        padding: 10px !important;
        margin-top: 10px !important;
    }
    .subscription-plan-project-grid {
        gap: 6px !important;
    }
    .subscription-plan-type-btn {
        padding: 9px 6px !important;
        font-size: 11px !important;
    }
    .subscription-plan-actions {
        margin-top: 12px !important;
    }
    .subscription-plan-add-btn {
        justify-self: center !important;
        align-self: auto !important;
        margin: 2px auto 0 !important;
    }
}

@media (min-width: 1300px) and (max-width: 1599px) {
    .company-admin-control-grid {
        grid-template-columns: minmax(330px, .9fr) repeat(2, minmax(0, 1fr)) !important;
    }
    .company-storage-control-panel {
        grid-template-columns: minmax(190px, .65fr) minmax(430px, 1.5fr) minmax(300px, .9fr) !important;
    }
    .company-admin-control-grid > .trial-signup-card {
        grid-column: 1 !important;
    }
    .company-admin-control-grid > .subscription-plans-workspace {
        grid-column: 2 / -1 !important;
    }
    .subscription-plans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* admin-controls-desktop-full-canvas-v2-20260830: remove legacy 980px cap and use the real desktop canvas */
@media (min-width: 1024px) {
    .company-page-shell .company-single-panel-wrap.company-admin-wrap {
        width: 100% !important;
        max-width: calc(100vw - 36px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .company-single-panel-wrap.company-admin-wrap > .company-single-tab-panel.company-admin-panel,
    .company-single-tab-panel.company-admin-panel.company-admin-ui-card {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .company-admin-control-grid {
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .company-admin-control-grid > .company-storage-control-panel {
        width: 100% !important;
        max-width: none !important;
    }

    .company-admin-control-grid > .trial-signup-card,
    .company-admin-control-grid > .subscription-plans-workspace,
    .subscription-plans-layout,
    .subscription-plans-grid,
    .subscription-plan-editor-card {
        min-width: 0 !important;
    }

    .subscription-plan-limit-field label,
    .trial-setting-grid label {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 1600px) {
    .company-admin-control-grid {
        grid-template-columns: minmax(360px, .95fr) repeat(3, minmax(300px, 1fr)) !important;
        gap: 16px !important;
    }

    .company-admin-control-grid > .company-storage-control-panel {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(280px, 1.1fr) minmax(660px, 2.3fr) minmax(400px, 1.25fr) !important;
        column-gap: 18px !important;
        padding: 16px 18px !important;
    }

    .company-storage-control-metrics {
        gap: 12px !important;
    }

    .company-storage-control-metrics > div {
        min-height: 82px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .company-storage-control-editor {
        padding: 14px !important;
    }

    .company-admin-control-grid > .trial-signup-card {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
    }

    .company-admin-control-grid > .subscription-plans-workspace {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .subscription-plans-layout {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .subscription-plans-grid {
        grid-template-columns: repeat(3, minmax(300px, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .subscription-plan-editor-card {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        padding: 16px !important;
    }

    .subscription-plan-primary-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(120px, .75fr) !important;
        gap: 12px !important;
    }

    .subscription-plan-limit-grid {
        grid-template-columns: repeat(5, minmax(72px, 1fr)) !important;
        gap: 9px !important;
    }

    .subscription-plan-project-grid,
    .trial-project-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .subscription-plan-type-btn {
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
    }

    .subscription-plan-add-btn {
        justify-self: center !important;
        margin: 4px auto 0 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .company-admin-control-grid {
        grid-template-columns: minmax(340px, .9fr) repeat(2, minmax(300px, 1fr)) !important;
        gap: 14px !important;
    }

    .company-admin-control-grid > .company-storage-control-panel {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(230px, .9fr) minmax(500px, 1.9fr) minmax(330px, 1.05fr) !important;
    }

    .company-admin-control-grid > .trial-signup-card {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .company-admin-control-grid > .subscription-plans-workspace {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .subscription-plans-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
        gap: 14px !important;
    }

    .subscription-plan-editor-card {
        max-width: none !important;
        width: 100% !important;
    }
}

/* admin-controls-trial-card-height-match-v1-20260830:
   Keep the desktop trial/create-account card aligned with the subscription plan cards.
   The parent plans workspace also contains the Add Plan row, so do not let grid stretching
   make the trial card inherit that extra height. */
@media (min-width: 1600px) {
    .company-admin-control-grid > .trial-signup-card {
        align-self: start !important;
        height: 405px !important;
        min-height: 405px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .company-admin-control-grid > .trial-signup-card {
        align-self: start !important;
        height: auto !important;
        min-height: 405px !important;
    }
}

/* admin-controls-trial-card-natural-height-v2-20260830:
   Let the desktop Trial/Create Account card size to its own content.
   This removes the forced 405px/min-height that left a blank strip below the Save button. */
@media (min-width: 1200px) {
    .company-admin-control-grid > .trial-signup-card {
        align-self: start !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

/* mobile_new_project_fullscreen_v1_20260831:
   Match the Asset New Assignment mobile treatment: New Project becomes an
   edge-to-edge phone workspace while desktop keeps the existing compact modal. */
@media (max-width: 767px) {
  #modal-container[data-modal-type="project"] {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background: #242424 !important;
  }

  #modal-container[data-modal-type="project"] .new-project-modal-fit {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #242424 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  #modal-container[data-modal-type="project"] .new-project-modal-fit > button[onclick="closeModal()"] {
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 14px !important;
  }

  #modal-container[data-modal-type="project"] .new-project-create-submit {
    margin-top: auto !important;
    flex: 0 0 auto;
    min-height: 50px;
  }
}

/* subscription_test_checkout_v1_20260901:
   Explicit TEST-only subscription checkout. No card/bank fields and no real provider. */
#modal-container[data-modal-type="subscription-test-checkout"] {
    padding: 18px !important;
    background: rgba(0,0,0,.84) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    align-items: center !important;
    justify-content: center !important;
}
.subscription-test-checkout {
    width: min(760px, calc(100vw - 36px));
    max-height: min(900px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    color: #f5f5f5;
    background: #111;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    box-shadow: 0 28px 90px rgba(0,0,0,.66);
}
.subscription-test-checkout-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.subscription-test-mode-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    margin-bottom: 9px;
    border: 1px solid rgba(250,204,21,.28);
    border-radius: var(--of-radius-pill);
    background: rgba(234,179,8,.10);
    color: #fde68a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}
.subscription-test-checkout-header h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: -.025em;
}
.subscription-test-subtitle {
    max-width: 590px;
    margin-top: 7px;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.45;
}
.subscription-test-checkout-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px 24px 22px;
    scrollbar-width: thin;
}
.subscription-test-plan-summary {
    padding: 18px;
    border: 1px solid rgba(96,165,250,.25);
    border-radius: var(--of-radius-2xl);
    background: linear-gradient(180deg, rgba(30,41,59,.58), rgba(24,24,27,.92));
}
.subscription-test-plan-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.subscription-test-plan-name {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.subscription-test-plan-duration {
    margin-top: 5px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
}
.subscription-test-plan-price {
    flex: 0 0 auto;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}
.subscription-test-plan-price span {
    color: #9ca3af;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}
.subscription-test-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.subscription-test-plan-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
}
.subscription-test-plan-grid span,
.subscription-test-plan-grid strong { display: block; }
.subscription-test-plan-grid span {
    color: #9ca3af;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.subscription-test-plan-grid strong {
    margin-top: 4px;
    color: #f8fafc;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.subscription-test-project-types {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.subscription-test-project-types span {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--of-radius-pill);
    background: rgba(255,255,255,.05);
    color: #d1d5db;
    font-size: 10px;
    font-weight: 700;
}
.subscription-test-actions {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
.subscription-test-action {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--of-radius-lg);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease, opacity .15s ease;
}
.subscription-test-action:hover:not(:disabled) { filter: brightness(1.08); }
.subscription-test-action:active:not(:disabled) { transform: translateY(1px); }
.subscription-test-action:disabled { opacity: .5; cursor: wait; }
.subscription-test-action.is-success { background: #1677ff; border-color: #3991ff; }
.subscription-test-action.is-failed { background: rgba(185,28,28,.78); border-color: rgba(248,113,113,.42); }
.subscription-test-action.is-cancelled { background: #292929; border-color: rgba(255,255,255,.14); }
.subscription-test-safety-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(250,204,21,.06);
    border: 1px solid rgba(250,204,21,.15);
    color: #d1d5db;
    font-size: 10px;
    line-height: 1.45;
}
.subscription-test-safety-note strong { color: #fde68a; }
.subscription-test-result {
    margin-top: 14px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}
.subscription-test-result.is-success { border-color: rgba(52,211,153,.30); background: rgba(5,150,105,.08); }
.subscription-test-result.is-failed { border-color: rgba(248,113,113,.28); background: rgba(185,28,28,.08); }
.subscription-test-result.is-cancelled { border-color: rgba(156,163,175,.20); }
.subscription-test-result-title { font-size: 13px; font-weight: 850; }
.subscription-test-result-text { margin-top: 4px; color: #cbd5e1; font-size: 11px; line-height: 1.45; }
.subscription-test-result-ref { margin-top: 7px; color: #94a3b8; font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.subscription-test-history {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.subscription-test-history-title {
    margin-bottom: 9px;
    color: #f3f4f6;
    font-size: 11px;
    font-weight: 850;
}
.subscription-test-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid rgba(255,255,255,.055);
}
.subscription-test-history-row:first-of-type { border-top: 0; }
.subscription-test-history-plan { color: #e5e7eb; font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.subscription-test-history-ref { margin-top: 2px; color: #6b7280; font-size: 8.5px; overflow-wrap: anywhere; }
.subscription-test-history-status {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: var(--of-radius-pill);
    background: rgba(255,255,255,.06);
    color: #cbd5e1;
    font-size: 8.5px;
    font-weight: 850;
}
.subscription-test-history-status.is-success { background: rgba(16,185,129,.13); color: #6ee7b7; }
.subscription-test-history-status.is-failed { background: rgba(239,68,68,.12); color: #fca5a5; }
.subscription-test-history-status.is-cancelled { background: rgba(148,163,184,.10); color: #cbd5e1; }
.subscription-test-history-empty { color: #6b7280; font-size: 10px; padding: 7px 0; }
.subscription-test-checkout-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 24px calc(13px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(17,17,17,.96);
}
.subscription-test-checkout-footer button {
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--of-radius-md);
    background: #292929;
    color: #e5e7eb;
    font-size: 10px;
    font-weight: 800;
}
.subscription-test-checkout-footer button.is-primary { background: #1677ff; border-color: #3991ff; color: #fff; }

@media (max-width: 680px) {
    #modal-container[data-modal-type="subscription-test-checkout"] {
        padding: 0 !important;
        align-items: stretch !important;
    }
    .subscription-test-checkout {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .subscription-test-checkout-header {
        padding: calc(15px + env(safe-area-inset-top)) 15px 12px;
    }
    .subscription-test-checkout-header h2 { font-size: 23px; }
    .subscription-test-subtitle { font-size: 10px; }
    .subscription-test-checkout-body { padding: 14px 14px 18px; }
    .subscription-test-plan-summary { padding: 15px; }
    .subscription-test-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subscription-test-actions { grid-template-columns: 1fr; }
    .subscription-test-action { min-height: 46px; }
    .subscription-test-checkout-footer { padding-left: 14px; padding-right: 14px; }
}

/* subscription_manage_lifecycle_test_v1_20260901:
   Company-admin Manage Subscription + root-admin TEST lifecycle controls. */
.subscription-details-actions {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 8px;
    margin-top: 12px;
}
.subscription-details-actions .subscription-upgrade-button { margin-top: 0; }
.subscription-manage-button {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--of-radius-md);
    background: rgba(255,255,255,.075);
    color: #f3f4f6;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.subscription-manage-button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.subscription-manage-button:active { transform: translateY(1px); }

#modal-container[data-modal-type="subscription-manage"] {
    padding: 18px !important;
    background: rgba(0,0,0,.84) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    align-items: center !important;
    justify-content: center !important;
}
.subscription-manage-shell {
    width: min(820px, calc(100vw - 36px));
    max-height: min(920px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    color: #f5f5f5;
    background: #111;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    box-shadow: 0 28px 90px rgba(0,0,0,.66);
}
.subscription-manage-header,
.company-subscription-test-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.subscription-manage-header h2,
.company-subscription-test-header h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: -.025em;
}
.subscription-manage-subtitle {
    margin-top: 7px;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.45;
}
.subscription-manage-body,
.company-subscription-test-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px 24px 22px;
    scrollbar-width: thin;
}
.subscription-manage-loading {
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #9ca3af;
    font-size: 12px;
}
.subscription-manage-hero {
    padding: 18px;
    border: 1px solid rgba(96,165,250,.24);
    border-radius: var(--of-radius-2xl);
    background: linear-gradient(180deg, rgba(30,41,59,.58), rgba(24,24,27,.92));
}
.subscription-manage-plan-block {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.subscription-manage-plan-block > span,
.subscription-manage-date-grid span,
.subscription-manage-limit-grid span,
.company-subscription-test-summary span {
    color: #94a3b8;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.subscription-manage-plan-block > strong {
    color: #f8fafc;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.1;
}
.subscription-manage-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: var(--of-radius-pill);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}
.subscription-manage-status.is-active { color: #86efac; background: rgba(22,163,74,.12); border-color: rgba(74,222,128,.22); }
.subscription-manage-status.is-warning { color: #fde68a; background: rgba(217,119,6,.12); border-color: rgba(251,191,36,.22); }
.subscription-manage-status.is-danger { color: #fca5a5; background: rgba(185,28,28,.12); border-color: rgba(248,113,113,.22); }
.subscription-manage-date-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.subscription-manage-date-grid > div,
.subscription-manage-limit-grid > div,
.company-subscription-test-summary > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
}
.subscription-manage-date-grid strong,
.subscription-manage-limit-grid strong,
.company-subscription-test-summary strong {
    display: block;
    margin-top: 4px;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.subscription-manage-note {
    margin-top: 12px;
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.45;
}
.subscription-manage-section-title {
    margin: 18px 0 9px;
    color: #f3f4f6;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .01em;
}
.subscription-manage-limit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.subscription-manage-project-types {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}
.subscription-manage-project-types span {
    padding: 5px 8px;
    border-radius: var(--of-radius-pill);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #d1d5db;
    font-size: 10px;
    font-weight: 750;
}
.subscription-manage-history {
    margin-top: 2px;
}
.subscription-manage-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.055);
}
.subscription-manage-history-row:first-of-type { border-top: 0; }
.subscription-manage-history-plan { color: #e5e7eb; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.subscription-manage-history-meta { margin-top: 2px; color: #9ca3af; font-size: 9px; }
.subscription-manage-history-ref { margin-top: 2px; color: #596273; font-size: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.subscription-manage-history-empty { color: #6b7280; font-size: 10px; padding: 10px 0; }

/* subscription-audit-log-v1-20260903 */
.subscription-manage-audit { margin-top: 4px; }
.subscription-audit-list {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.018);
}
.subscription-audit-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border-top: 1px solid rgba(255,255,255,.055);
}
.subscription-audit-row:first-child { border-top: 0; }
.subscription-audit-dot {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: var(--of-radius-pill);
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,.10);
}
.subscription-audit-row.is-success .subscription-audit-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.10); }
.subscription-audit-row.is-warning .subscription-audit-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.10); }
.subscription-audit-row.is-danger .subscription-audit-dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.10); }
.subscription-audit-content { min-width: 0; }
.subscription-audit-title { color: #f3f4f6; font-size: 11px; font-weight: 850; line-height: 1.35; }
.subscription-audit-detail { margin-top: 3px; color: #cbd5e1; font-size: 10px; line-height: 1.42; overflow-wrap: anywhere; }
.subscription-audit-meta { margin-top: 4px; color: #6b7280; font-size: 8.5px; line-height: 1.35; overflow-wrap: anywhere; }
.subscription-manage-safety {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(250,204,21,.06);
    border: 1px solid rgba(250,204,21,.15);
    color: #d1d5db;
    font-size: 10px;
    line-height: 1.45;
}
.subscription-manage-safety strong { color: #fde68a; }
.subscription-manage-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 13px 24px calc(13px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(17,17,17,.96);
}
.subscription-manage-footer button {
    min-height: 39px;
    padding: 8px 15px;
    border-radius: var(--of-radius-md);
    border: 1px solid rgba(255,255,255,.12);
    background: #292929;
    color: #e5e7eb;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}
.subscription-manage-footer button.is-primary { background: #1677ff; border-color: #3991ff; color: #fff; }

.company-sheet-action.cyan { background: #087f8c; border-color: #14b8a6; }

/* Companies: the same rows become labelled cards on phones, preserving filters/actions. */
.company-mobile-cell-label { display: none; }
@media (max-width: 767px) {
    .company-page-shell .company-content-wrap.company-button-tab-content {
        padding: 10px 10px calc(20px + env(safe-area-inset-bottom)) !important;
        min-height: 0;
    }
    .company-page-shell .company-tab-switch-wrap {
        margin-bottom: 10px;
        padding-bottom: 0;
    }
    .company-page-shell .company-window-tab-btn { min-height: 46px; padding: 7px; gap: 6px; }
    .company-page-shell .company-window-tab-icon { width: 26px; height: 26px; font-size: 15px; }
    .company-page-shell .company-list-ui-card {
        padding: 0 !important;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .company-page-shell .company-list-toolbar { margin-bottom: 0; padding: 10px; }
    .company-page-shell .company-list-controls-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px;
    }
    .company-page-shell .company-list-controls-grid > .relative { grid-column: 1 / -1; }
    .company-page-shell .company-list-toolbar :is(input, select, button) {
        min-width: 0;
        min-height: 44px;
        font-size: 13px;
    }
    .company-page-shell .company-list-toolbar .company-add-open-btn { padding: 8px; }
    .company-page-shell .company-results-card { min-height: 0; }
    .company-page-shell .company-list-ui-card .company-sheet-scroll {
        overflow: visible !important;
        max-height: none;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .company-page-shell .company-list-ui-card .company-sheet-table {
        display: block;
        min-width: 0 !important;
        table-layout: auto;
        font-size: 13px;
    }
    .company-page-shell .company-sheet-table thead { display: none; }
    .company-page-shell .company-sheet-table tbody { display: grid; gap: 12px; }
    .company-page-shell .company-sheet-row {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px 10px;
        padding: 14px;
        border: 1px solid #4b5563;
        border-radius: 14px;
    }
    /* Explicitly retain filtering when row display changes from table-row to grid. */
    .company-page-shell .company-sheet-row.hidden { display: none; }
    .company-page-shell .company-sheet-cell {
        display: block;
        grid-column: span 3;
        min-width: 0;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .company-page-shell .company-sheet-index { display: none; }
    .company-page-shell .company-sheet-cell:is(.company-sheet-company, :nth-child(3), .company-sheet-access, .company-sheet-actions-cell) { grid-column: 1 / -1; }
    .company-page-shell .company-sheet-cell:is(:nth-child(6), :nth-child(7), :nth-child(8)) { grid-column: span 2; }
    .company-page-shell .company-sheet-cell:nth-child(3) .company-mobile-cell-label { display: none; }
    .company-page-shell .company-mobile-cell-label {
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 600;
        color: #9ca3af;
    }
    .company-page-shell .company-sheet-name { max-width: none; white-space: normal; font-size: 16px; }
    .company-page-shell .company-sheet-sub { overflow-wrap: anywhere; white-space: normal; }
    .company-page-shell :is(.company-sheet-sub, .company-sheet-muted) { font-size: 12px; line-height: 1.4; }
    .company-page-shell .company-sheet-avatar { width: 40px; height: 40px; flex-basis: 40px; }
    .company-page-shell .company-sheet-status { min-height: 24px; font-size: 10px; }
    .company-page-shell .company-sheet-type-pill { min-height: 24px; font-size: 10px; line-height: 1.3; white-space: normal; }
    .company-page-shell .company-sheet-actions-cell { padding-top: 10px; border-top: 1px solid #4b5563; }
    .company-page-shell .company-sheet-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .company-page-shell .company-sheet-action { min-height: 44px; font-size: 11px; padding: 6px 2px; }
    html[data-theme="light"] .company-page-shell .company-sheet-row { border-color: var(--of-light-border); }
    html[data-theme="light"] .company-page-shell .company-mobile-cell-label { color: #475569; }
}
.company-subscription-test-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.74);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.company-subscription-test-panel {
    width: min(780px, calc(100vw - 36px));
    max-height: min(900px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    color: #f5f5f5;
    background: #111;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    box-shadow: 0 28px 90px rgba(0,0,0,.72);
}
.company-subscription-test-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.company-subscription-test-summary .subscription-manage-status { margin-top: 5px; }
.company-subscription-test-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}
.company-subscription-test-actions button {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--of-radius-lg);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease, opacity .15s ease;
}
.company-subscription-test-actions button:hover:not(:disabled) { filter: brightness(1.08); }
.company-subscription-test-actions button:disabled { opacity: .5; cursor: wait; }
.company-subscription-test-actions .is-renew { background: #1677ff; border-color: #3991ff; }
.company-subscription-test-actions .is-expire { background: rgba(185,28,28,.82); border-color: rgba(248,113,113,.42); }
.company-subscription-test-actions .is-cancel { background: #7c3aed; border-color: #8b5cf6; }
.company-subscription-test-actions .is-failed { background: #a16207; border-color: #ca8a04; }
.company-subscription-test-result {
    margin-top: 13px;
    padding: 11px 12px;
    border: 1px solid rgba(96,165,250,.20);
    border-radius: 11px;
    background: rgba(30,64,175,.08);
    color: #dbeafe;
    font-size: 10px;
    line-height: 1.45;
}
.company-subscription-test-result small { display: block; margin-top: 5px; color: #64748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

@media (max-width: 680px) {
    #modal-container[data-modal-type="subscription-manage"] { padding: 0 !important; align-items: stretch !important; }
    .subscription-manage-shell {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .subscription-manage-header,
    .company-subscription-test-header { padding: calc(15px + env(safe-area-inset-top)) 15px 12px; }
    .subscription-manage-header h2,
    .company-subscription-test-header h2 { font-size: 23px; }
    .subscription-manage-body,
    .company-subscription-test-body { padding: 14px 14px 18px; }
    .subscription-manage-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subscription-manage-date-grid > div:last-child { grid-column: 1 / -1; }
    .subscription-manage-limit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subscription-manage-footer { padding-left: 14px; padding-right: 14px; }
    .company-subscription-test-overlay { padding: 0; align-items: stretch; }
    .company-subscription-test-panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .company-subscription-test-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .company-subscription-test-actions { grid-template-columns: 1fr; }
    .company-subscription-test-actions button { min-height: 47px; }
    .subscription-audit-row { padding: 11px 10px; gap: 9px; }
    .subscription-audit-title { font-size: 11px; }
    .subscription-audit-detail { font-size: 9.5px; }
}

/* subscription-limit-warning-v1-20260902: persistent hard-limit warning dialog */\n.subscription-limit-warning-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 260;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    background: rgba(0, 0, 0, .66);\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    opacity: 0;\n    transition: opacity .16s ease;\n}\n.subscription-limit-warning-overlay.is-visible { opacity: 1; }\n.subscription-limit-warning-dialog {\n    width: min(430px, 100%);\n    border: 1px solid rgba(248, 113, 113, .35);\n    border-radius: 20px;\n    background: linear-gradient(180deg, rgba(31, 31, 35, .98), rgba(18, 18, 21, .99));\n    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);\n    padding: 22px;\n    color: #fff;\n}\n.subscription-limit-warning-icon {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    margin-bottom: 14px;\n    border: 1px solid rgba(248, 113, 113, .45);\n    background: rgba(239, 68, 68, .14);\n    color: #fca5a5;\n    font-size: 21px;\n    font-weight: 900;\n}\n.subscription-limit-warning-title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; }\n.subscription-limit-warning-message { margin: 10px 0 0; color: #e5e7eb; font-size: 13px; line-height: 1.55; }\n.subscription-limit-warning-note { margin: 10px 0 0; color: #9ca3af; font-size: 11px; line-height: 1.45; }\n.subscription-limit-warning-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }\n.subscription-limit-warning-actions button { min-height: 38px; border-radius: var(--of-radius-md); padding: 8px 15px; font-size: 12px; font-weight: 800; transition: transform .14s ease, background .14s ease, border-color .14s ease; }\n.subscription-limit-warning-actions button:active { transform: scale(.98); }\n.subscription-limit-warning-close { border: 1px solid rgba(156, 163, 175, .35); background: rgba(255, 255, 255, .055); color: #d1d5db; }\n.subscription-limit-warning-close:hover { background: rgba(255, 255, 255, .09); border-color: rgba(209, 213, 219, .48); }\n.subscription-limit-warning-upgrade { border: 1px solid rgba(59, 130, 246, .62); background: #2563eb; color: #fff; }\n.subscription-limit-warning-upgrade:hover { background: #1d4ed8; }\n@media (max-width: 767px) {\n    .subscription-limit-warning-overlay { align-items: flex-end; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }\n    .subscription-limit-warning-dialog { width: 100%; border-radius: var(--of-radius-panel); padding: 20px 18px; }\n    .subscription-limit-warning-actions { display: grid; grid-template-columns: 1fr; }\n    .subscription-limit-warning-actions button { width: 100%; min-height: 44px; }\n    .subscription-limit-warning-upgrade { order: -1; }\n}\n
/* subscription-plan-version-snapshot-v1-20260902 */
.subscription-plan-version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    border-radius: var(--of-radius-pill);
    background: rgba(37, 99, 235, 0.12);
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.subscription-manage-plan-version {
    display: block;
    margin-top: 5px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 700;
}
.subscription-history-plan-version {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 1px 6px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: var(--of-radius-pill);
    color: #93c5fd;
    font-size: 9px;
    font-weight: 800;
    vertical-align: middle;
}
.subscription-choice-catalog-version {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: var(--of-radius-pill);
    color: #93c5fd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.subscription-choice-version-note {
    margin-top: -2px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 9px;
    background: rgba(37, 99, 235, 0.08);
    color: #bfdbfe;
    font-size: 11px;
    line-height: 1.4;
}

/* subscription-next-plan-schedule-v1-20260903:
   Preserve the current paid period, show the prepaid Next Plan, and let root
   admin end the current plan early only through an explicit TEST override. */
.subscription-upgrade-next-label {
    margin-top: 5px;
    color: #fcd34d;
    font-size: 11px;
    font-weight: 750;
}
.subscription-choice-card.is-next {
    border-color: rgba(245, 158, 11, .48);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .08);
}
.subscription-choice-current-badge.is-next {
    border-color: rgba(245, 158, 11, .38);
    background: rgba(245, 158, 11, .12);
    color: #fde68a;
}
.subscription-choice-select.is-next {
    background: rgba(161, 98, 7, .38);
    border-color: rgba(245, 158, 11, .45);
    color: #fde68a;
}
.subscription-test-history-status.is-scheduled {
    background: rgba(245,158,11,.13);
    color: #fcd34d;
}
.subscription-manage-next-plan {
    margin-top: 12px;
    padding: 15px 16px;
    border: 1px solid rgba(245,158,11,.28);
    border-radius: var(--of-radius-xl);
    background: linear-gradient(180deg, rgba(120,53,15,.13), rgba(39,39,42,.46));
}
.subscription-manage-next-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.subscription-manage-next-head > div { min-width: 0; }
.subscription-manage-next-head span,
.subscription-manage-next-grid span,
.company-subscription-next-title > span,
.company-subscription-balance-estimate > span {
    display: block;
    color: #fbbf24;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.subscription-manage-next-head strong {
    display: block;
    margin-top: 4px;
    color: #fff7ed;
    font-size: 18px;
    line-height: 1.12;
    font-weight: 850;
}
.subscription-manage-next-head small {
    display: block;
    margin-top: 4px;
    color: #fcd34d;
    font-size: 9px;
    font-weight: 700;
}
.subscription-manage-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.subscription-manage-next-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--of-radius-md);
    background: rgba(0,0,0,.16);
}
.subscription-manage-next-grid strong {
    display: block;
    margin-top: 4px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.subscription-manage-next-note {
    margin-top: 10px;
    color: #d6d3d1;
    font-size: 10px;
    line-height: 1.45;
}
.company-subscription-next-summary {
    margin-top: 13px;
    padding: 13px 14px;
    border: 1px solid rgba(245,158,11,.26);
    border-radius: var(--of-radius-lg);
    background: rgba(120,53,15,.10);
}
.company-subscription-next-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.company-subscription-next-title strong {
    color: #fff7ed;
    font-size: 14px;
    font-weight: 850;
}
.company-subscription-next-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}
.company-subscription-next-meta span {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--of-radius-pill);
    background: rgba(0,0,0,.18);
    color: #e7e5e4;
    font-size: 9px;
    font-weight: 750;
}
.company-subscription-balance-estimate {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(245,158,11,.16);
}
.company-subscription-balance-estimate strong {
    display: block;
    margin-top: 4px;
    color: #fde68a;
    font-size: 16px;
    font-weight: 900;
}
.company-subscription-balance-estimate small {
    display: block;
    margin-top: 3px;
    color: #a8a29e;
    font-size: 9px;
    line-height: 1.4;
}
.company-subscription-test-actions .is-switch {
    background: #b45309;
    border-color: #f59e0b;
    color: #fff7ed;
}

@media (max-width: 680px) {
    .subscription-manage-next-grid { grid-template-columns: 1fr; }
    .subscription-manage-next-head { align-items: center; }
    .company-subscription-next-title { align-items: flex-start; flex-direction: column; }
    .company-subscription-test-actions .is-switch { min-height: 50px; }
}
.company-subscription-result-balance {
    margin-top: 8px;
    color: #d6d3d1;
    font-size: 10px;
    line-height: 1.4;
}
.company-subscription-result-balance strong { color: #fde68a; }

/* Subscription TEST checkout proration / renewal pricing */
.subscription-test-pricing {
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(96,165,250,.22);
    border-radius: 13px;
    background: rgba(59,130,246,.055);
}
.subscription-test-pricing.is-upgrade {
    border-color: rgba(245,158,11,.34);
    background: rgba(245,158,11,.075);
}
.subscription-test-pricing.is-scheduled {
    border-color: rgba(168,85,247,.26);
    background: rgba(126,34,206,.055);
}
.subscription-test-pricing.is-loading,
.subscription-test-pricing.is-error {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
}
.subscription-test-pricing.is-error { border-color: rgba(248,113,113,.28); background: rgba(185,28,28,.07); color: #fecaca; }
.subscription-test-pricing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #e5e7eb;
    font-size: 11px;
    font-weight: 800;
}
.subscription-test-pricing-head strong { color: #f8fafc; font-size: 10px; }
.subscription-test-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.subscription-test-pricing-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--of-radius-md);
    background: rgba(0,0,0,.14);
}
.subscription-test-pricing-grid span,
.subscription-test-pricing-grid strong { display: block; }
.subscription-test-pricing-grid span { color: #94a3b8; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.subscription-test-pricing-grid strong { margin-top: 4px; color: #f8fafc; font-size: 14px; overflow-wrap: anywhere; }
.subscription-test-pricing-grid strong.is-credit { color: #86efac; }
.subscription-test-pricing-grid .is-due { border-color: rgba(96,165,250,.22); }
.subscription-test-pricing.is-upgrade .subscription-test-pricing-grid .is-due { border-color: rgba(245,158,11,.32); }
.subscription-test-pricing.is-upgrade .subscription-test-pricing-grid .is-due strong { color: #fbbf24; }
.subscription-test-pricing-note { margin-top: 9px; color: #cbd5e1; font-size: 10px; line-height: 1.45; }
@media (max-width: 767px) {
    .subscription-test-pricing-grid { grid-template-columns: 1fr; }
    .subscription-test-pricing-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* Provider-neutral pending checkout/payment intent */
.subscription-test-intent-strip {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(168,85,247,.24);
    border-radius: 11px;
    background: rgba(126,34,206,.055);
}
.subscription-test-intent-strip > div { min-width: 0; }
.subscription-test-intent-strip span:first-child {
    display: block;
    color: #94a3b8;
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.subscription-test-intent-strip strong {
    display: block;
    margin-top: 3px;
    color: #e9d5ff;
    font-size: 9.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}
@media (max-width: 767px) {
    .subscription-test-intent-strip { align-items: flex-start; }
}

/* subscription-provider-adapter-webhook-inbox-v1-20260904 */
.company-admin-control-grid > .billing-provider-admin-workspace {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
    margin: 0;
}
.billing-provider-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.billing-provider-mode-badge,
.billing-provider-state,
.billing-webhook-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--of-radius-pill);
    border: 1px solid rgba(148,163,184,.28);
    padding: 3px 8px;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .05em;
}
.billing-provider-mode-badge { background: rgba(8,145,178,.14); border-color: rgba(34,211,238,.3); color: #a5f3fc; }
.billing-provider-state.billing-provider-off { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.28); color: #fde68a; }
.billing-provider-state.billing-provider-warn { background: rgba(59,130,246,.1); border-color: rgba(96,165,250,.3); color: #bfdbfe; }
.billing-provider-state.billing-provider-ok { background: rgba(16,185,129,.12); border-color: rgba(52,211,153,.32); color: #a7f3d0; }
.billing-provider-refresh-btn,
.billing-provider-test-btn {
    min-height: 36px;
    border-radius: var(--of-radius-md);
    padding: 0 13px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(148,163,184,.3);
    background: #2b3038;
    color: #e5e7eb;
}
.billing-provider-refresh-btn:hover { background: #343a44; }
.billing-provider-test-btn { background: rgba(8,145,178,.16); border-color: rgba(34,211,238,.34); color: #cffafe; }
.billing-provider-test-btn:hover { background: rgba(8,145,178,.25); }
.billing-provider-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
    margin-top: 14px;
}
.billing-provider-summary-grid > div {
    min-width: 0;
    border: 1px solid rgba(75,85,99,.72);
    border-radius: 11px;
    background: rgba(0,0,0,.16);
    padding: 10px 12px;
}
.billing-provider-summary-grid span { display: block; color: #6b7280; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.billing-provider-summary-grid strong { display: block; margin-top: 5px; color: #f3f4f6; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-provider-security-note {
    margin-top: 9px;
    border-left: 2px solid rgba(34,211,238,.45);
    background: rgba(8,145,178,.05);
    color: #9ca3af;
    padding: 8px 10px;
    font-size: 10px;
    line-height: 1.45;
}
.billing-webhook-list {
    border: 1px solid rgba(75,85,99,.68);
    border-radius: var(--of-radius-lg);
    overflow: hidden;
    background: rgba(0,0,0,.14);
}
.billing-webhook-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(75,85,99,.45);
}
.billing-webhook-row:last-child { border-bottom: 0; }
.billing-webhook-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 2px; color: #6b7280; font-size: 9px; white-space: nowrap; }
.billing-webhook-status.is-received { color: #bfdbfe; background: rgba(59,130,246,.1); border-color: rgba(96,165,250,.3); }
.billing-webhook-status.is-processed { color: #a7f3d0; background: rgba(16,185,129,.1); border-color: rgba(52,211,153,.3); }
.billing-webhook-status.is-ignored { color: #fde68a; background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.28); }
.billing-webhook-status.is-failed { color: #fecaca; background: rgba(239,68,68,.1); border-color: rgba(248,113,113,.3); }
.billing-webhook-empty { color: #6b7280; font-size: 11px; text-align: center; padding: 18px 12px; }
@media (max-width: 767px) {
    .billing-provider-admin-workspace { padding: 13px !important; }
    .billing-provider-admin-head { align-items: stretch; flex-direction: column; }
    .billing-provider-admin-head > .flex { width: 100%; }
    .billing-provider-refresh-btn, .billing-provider-test-btn { flex: 1; }
    .billing-provider-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .billing-webhook-row { grid-template-columns: 1fr; gap: 7px; }
    .billing-webhook-meta { align-items: flex-start; white-space: normal; }
}

/* upload_file_drag_drop_v1_20260907:
   Desktop Upload File picker accepts drag-and-drop while keeping the existing
   click-to-browse path and upload validation. Mobile remains tap-first. */
#modal-container[data-modal-type="upload-version"] .upload-version-file-picker-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}

#modal-container[data-modal-type="upload-version"] .upload-version-file-picker-label {
  display: block;
  width: 100%;
  max-width: none !important;
}

#modal-container[data-modal-type="upload-version"] .upload-version-drop-hint {
  display: none;
  color: #7f8995;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

@media (min-width: 768px) {
  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker {
    min-height: 58px;
    cursor: pointer;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-drop-hint {
    display: block;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker.is-dragover {
    border-style: dashed !important;
    border-color: #3b82f6 !important;
    background: rgba(37, 99, 235, .14) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .16) inset !important;
  }

  #modal-container[data-modal-type="upload-version"] .upload-version-file-picker.is-dragover .upload-version-drop-hint {
    color: #93c5fd;
  }
}

/* Upload File selected-file list: show filename once and allow per-file removal. */
#modal-container[data-modal-type="upload-version"] .upload-version-selected-file-row {
  min-height: 32px;
  padding: 4px 6px;
  border-radius: 6px;
}
#modal-container[data-modal-type="upload-version"] .upload-version-selected-file-row:hover {
  background: rgba(255, 255, 255, 0.035);
}
#modal-container[data-modal-type="upload-version"] .upload-version-selected-file-remove {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--of-radius-control-dense);
  border: 1px solid rgba(248, 113, 113, 0.38);
  background: rgba(127, 29, 29, 0.18);
  color: #fca5a5;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#modal-container[data-modal-type="upload-version"] .upload-version-selected-file-remove:hover {
  background: rgba(220, 38, 38, 0.28);
  border-color: rgba(248, 113, 113, 0.72);
  color: #fff;
}

/* Mobile Animatics: compact icon transport controls + fullscreen action. */
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-icon-button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #3f3f46;
    border-radius: var(--of-radius-control);
    background: #282828;
    color: #f8fafc;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-icon-button:active {
    background: #3f3f46;
    transform: scale(.96);
}
#animation-animatics-mobile-player-overlay .animation-animatics-mobile-icon-button svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    pointer-events: none;
}
#animation-animatics-mobile-player-overlay:fullscreen,
#animation-animatics-mobile-player-overlay:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
}

/* Mobile Animatics fullscreen: immersive MX-style chrome. The video always stays
   fitted to the full fullscreen canvas; header/footer are overlays that auto-hide. */
#animation-animatics-mobile-player-overlay:fullscreen .animation-animatics-mobile-player-header,
#animation-animatics-mobile-player-overlay:-webkit-full-screen .animation-animatics-mobile-player-header {
    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(21, 21, 21, 0.72) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity .18s ease, transform .18s ease;
}
#animation-animatics-mobile-player-overlay:fullscreen .animation-animatics-mobile-player-controls,
#animation-animatics-mobile-player-overlay:-webkit-full-screen .animation-animatics-mobile-player-controls {
    position: absolute;
    z-index: 12;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(21, 21, 21, 0.72) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity .18s ease, transform .18s ease;
}
#animation-animatics-mobile-player-overlay:fullscreen #animation-animatics-mobile-gesture-surface,
#animation-animatics-mobile-player-overlay:-webkit-full-screen #animation-animatics-mobile-gesture-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#animation-animatics-mobile-player-overlay:fullscreen.animation-animatics-mobile-controls-hidden .animation-animatics-mobile-player-header,
#animation-animatics-mobile-player-overlay:-webkit-full-screen.animation-animatics-mobile-controls-hidden .animation-animatics-mobile-player-header {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}
#animation-animatics-mobile-player-overlay:fullscreen.animation-animatics-mobile-controls-hidden .animation-animatics-mobile-player-controls,
#animation-animatics-mobile-player-overlay:-webkit-full-screen.animation-animatics-mobile-controls-hidden .animation-animatics-mobile-player-controls {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* planning_filter_rounded_ui_v1_20260913
   Mobile Planning: make the category filter/count row match the portal's
   rounded neutral controls without changing filter behavior. */
@media (max-width: 767px) {
  .planning-sheet-toolbar.planning-sheet-toolbar-compact {
    padding: 10px !important;
    gap: 8px !important;
    background: #242424 !important;
    border-bottom-color: #3f4650 !important;
  }

  .planning-toolbar-actions.planning-toolbar-actions-with-filter {
    gap: 8px !important;
    align-items: center !important;
  }

  .planning-category-filter-control {
    display: block !important;
  }

  .planning-category-filter-select {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 42px 0 14px !important;
    border: 1px solid #4b5563 !important;
    border-radius: 15px !important;
    background-color: #252525 !important;
    color: #f3f4f6 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .planning-category-filter-select:focus {
    border-color: #64748b !important;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, .16) !important;
  }

  .planning-filter-count-chip {
    min-height: 48px !important;
    padding: 0 11px !important;
    border: 1px solid #4b5563 !important;
    border-radius: 15px !important;
    background: #252525 !important;
    color: #e5e7eb !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }
}

/* planning_animation_episode_selector_v1_20260913
   Animation Planning: require an episode context before adding shots/assignments. */
.planning-animation-episode-strip-wrap {
  border: 1px solid #444b55;
  background: #252525;
  border-radius: var(--of-radius-xl);
  padding: 8px 10px;
  box-shadow: var(--of-shadow-dark-top-highlight-subtle);
}
.planning-animation-episode-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  overflow-x: auto;
  padding: 3px 4px 5px;
  scroll-padding-inline: 4px;
}
.planning-animation-episode-tile {
  flex: 0 0 auto;
  min-width: 126px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 5px;
  border: 1px solid #49515d;
  border-radius: 13px;
  background: #202020;
  color: #d8dee8;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.planning-animation-episode-tile:hover { border-color: #64748b; background: #292929; }
.planning-animation-episode-tile.is-selected {
  border-color: #3b82f6;
  background: rgba(30,64,175,.18);
  box-shadow: inset 3px 0 0 #3b82f6, 0 0 0 1px rgba(59,130,246,.12);
}
.planning-animation-episode-thumb {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #4b5563;
  border-radius: var(--of-radius-md);
  background: #343434;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
}
.planning-animation-episode-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.planning-animation-episode-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
  color: #f3f4f6;
}
@media (max-width: 767px) {
  .planning-animation-episode-strip-wrap { border-radius: var(--of-radius-xl); padding: 7px 8px; }
  .planning-animation-episode-strip { min-height: 58px; gap: 8px; }
  .planning-animation-episode-tile { min-width: 112px; height: 50px; border-radius: var(--of-radius-lg); padding: 4px 9px 4px 4px; }
  .planning-animation-episode-thumb { width: 40px; height: 40px; flex-basis: 40px; border-radius: 9px; }
  .planning-animation-episode-name { max-width: 105px; font-size: 11px; }
}

/* planning_animation_shot_form_v1_20260913 */
.planning-animation-toolbar{justify-content:flex-end}
.planning-animation-plan-table{min-width:1180px}
.planning-animation-plan-table th,.planning-animation-plan-table td{vertical-align:middle}
.planning-animation-plan-table td{padding:8px;border-bottom:1px solid rgba(75,85,99,.38)}
.planning-animation-shot-name-cell{display:grid;grid-template-columns:auto minmax(170px,1fr);gap:8px;align-items:center;min-width:230px}
.planning-animation-shot-name-cell .planning-row-validation-note{grid-column:1/-1}
.planning-animation-file-cell{display:flex;align-items:center;gap:6px;min-width:145px}
.planning-animation-file-cell .planning-plan-file-btn{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planning-animation-number{min-width:88px;text-align:right}
.planning-animation-shot-row.is-complete{background:rgba(16,185,129,.035)}
.planning-animation-mobile-fields{display:flex;flex-direction:column;gap:10px;padding:12px}
.planning-animation-mobile-file-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.planning-animation-file-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.planning-animation-file-control>span{grid-column:1/-1;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af}
.planning-animation-file-control .planning-plan-file-btn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:767px){
  .planning-animation-toolbar{display:none}
  .planning-animation-shot-card{border-radius:var(--of-radius-2xl)}
  .planning-animation-mobile-file-grid{grid-template-columns:1fr 1fr}
}

/* planning_ai_movie_shot_form_v1_20260913 */
/* planning_ai_movie_table_align_v1_20260913
   Keep the AI Movie desktop shot planner on a predictable column grid. The
   global Planning table rules give every column after the first a tiny fixed
   width; without explicit AI Movie widths that leaves all spare room in the
   Thumbnail column and crushes the real shot controls to the right. */
.planning-ai-movie-plan-table{min-width:1520px}
.planning-ai-movie-audio-cell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;min-width:220px}
@media (min-width:768px){
  .planning-ai-movie-plan-table{table-layout:fixed!important;min-width:1580px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-thumb,.planning-ai-movie-plan-table td.planning-ai-col-thumb{width:96px!important;min-width:96px!important;max-width:96px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-shot,.planning-ai-movie-plan-table td.planning-ai-col-shot{width:250px!important;min-width:250px!important;max-width:250px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-number,.planning-ai-movie-plan-table td.planning-ai-col-number{width:82px!important;min-width:82px!important;max-width:82px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-frame,.planning-ai-movie-plan-table td.planning-ai-col-frame{width:118px!important;min-width:118px!important;max-width:118px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-audio,.planning-ai-movie-plan-table td.planning-ai-col-audio{width:240px!important;min-width:240px!important;max-width:240px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-mandays,.planning-ai-movie-plan-table td.planning-ai-col-mandays{width:92px!important;min-width:92px!important;max-width:92px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-amount,.planning-ai-movie-plan-table td.planning-ai-col-amount{width:112px!important;min-width:112px!important;max-width:112px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-person,.planning-ai-movie-plan-table td.planning-ai-col-person{width:165px!important;min-width:165px!important;max-width:165px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-action,.planning-ai-movie-plan-table td.planning-ai-col-action{width:108px!important;min-width:108px!important;max-width:108px!important}
  .planning-ai-movie-plan-table .planning-animation-shot-name-cell{min-width:0;width:100%;grid-template-columns:auto minmax(0,1fr)}
  .planning-ai-movie-plan-table .planning-animation-file-cell:not(.planning-ai-movie-audio-cell){min-width:0;justify-content:center}
  .planning-ai-movie-plan-table .planning-animation-file-cell:not(.planning-ai-movie-audio-cell) .planning-plan-file-btn{max-width:94px}
  .planning-ai-movie-plan-table .planning-ai-movie-audio-cell{min-width:0;width:100%;grid-template-columns:minmax(0,1fr) auto}
  .planning-ai-movie-plan-table th,.planning-ai-movie-plan-table td{box-sizing:border-box;vertical-align:middle}
}

/* planning_animation_shot_name_compact_v1_20260913 */
/* planning_animation_thumbnail_first_v2_20260913 */
@media (min-width: 768px) {
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) {
    table-layout: fixed;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) th:first-child,
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:first-child {
    width: 96px;
    max-width: 96px;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) th:nth-child(2),
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:nth-child(2) {
    width: clamp(260px, 18vw, 360px);
    max-width: 360px;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) .planning-animation-shot-name-cell {
    min-width: 0;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* planning_shot_thumbnail_v1_20260913 */
.planning-shot-thumb-cell{display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px}
.planning-shot-thumb-button{width:56px;height:44px;min-width:56px;border-radius:9px;border:1px dashed #596273;background:#232323;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#9ca3af;font-size:9px;font-weight:800;line-height:1.1;text-align:center;transition:border-color .15s ease,background .15s ease}
.planning-shot-thumb-button:hover{border-color:#60a5fa;background:#2a2a2a;color:#fff}
.planning-shot-thumb-button.has-image{border-style:solid;border-color:#4b5563}
.planning-shot-thumb-button img{width:100%;height:100%;object-fit:cover;display:block}
.planning-shot-mobile-identity{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;align-items:end}
.planning-shot-thumb-control{min-width:0}
.planning-shot-thumb-control>span{display:block;margin-bottom:4px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af}
.planning-shot-thumb-actions{display:flex;align-items:center;gap:5px}
.planning-shot-mobile-identity .planning-shot-thumb-button{width:62px;height:52px;min-width:62px}
.planning-shot-mobile-name-number{align-items:end}
@media(max-width:767px){
  .planning-shot-mobile-identity{grid-template-columns:80px minmax(0,1fr)}
}

/* planning_episode_create_from_planning_v1_20260913 */
.planning-animation-episode-add{
  flex:0 0 54px;width:54px;height:54px;display:grid;place-items:center;border:1px dashed #596270;border-radius:13px;background:#202020;color:#aab2bf;font-size:25px;font-weight:400;line-height:1;cursor:pointer;transition:.16s ease
}
.planning-animation-episode-add:hover{border-color:#7c8796;background:#292929;color:#fff}
.planning-episode-create-overlay{z-index:35}
.planning-episode-create-panel{position:relative;width:min(420px,calc(100vw - 28px));background:#383838;border:1px solid #59606b;border-radius:var(--of-radius-panel);padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.46)}
.planning-episode-create-panel h3{margin:0 36px 22px;text-align:center;color:#fff;font-size:21px;font-weight:900}
.planning-episode-create-media{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px}
.planning-episode-create-tile{position:relative;width:82px;height:82px;border:2px dashed #646d79;border-radius:var(--of-radius-xl);background:#292929;color:#aeb6c2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;overflow:hidden;cursor:pointer;transition:.16s ease}
.planning-episode-create-tile:hover{border-color:#60a5fa;color:#fff;background:#303030}
.planning-episode-create-tile svg{width:25px;height:25px}
.planning-episode-create-tile span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.planning-episode-create-tile.has-image{border-style:solid}
.planning-episode-create-tile.has-image img{width:100%;height:100%;object-fit:cover}
.planning-episode-tile-change{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.48);opacity:0;color:#fff!important;font-size:10px!important}
.planning-episode-create-tile.has-image:hover .planning-episode-tile-change{opacity:1}
.planning-episode-create-tile.has-file{border-style:solid;border-color:#60a5fa;background:rgba(30,64,175,.22);color:#bfdbfe}
.planning-episode-create-tile .planning-episode-check{color:#93c5fd;width:29px;height:29px}
.planning-episode-create-label{display:block;margin:0 0 7px 3px;color:#aeb6c2;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
.planning-episode-create-label span{color:#fca5a5}
.planning-episode-create-input{width:100%;height:46px;padding:0 14px;border:1px solid #59606b;border-radius:var(--of-radius-lg);background:#242424;color:#fff;outline:none;font-size:14px;box-shadow:inset 0 1px 3px rgba(0,0,0,.24)}
.planning-episode-create-input:focus{border-color:#3b82f6}
.planning-episode-create-submit{width:100%;margin-top:20px;border-radius:var(--of-radius-lg)!important;min-height:46px}
@media(max-width:767px){.planning-animation-episode-add{flex-basis:50px;width:50px;height:50px;border-radius:var(--of-radius-lg)}.planning-episode-create-panel{padding:22px 18px;border-radius:var(--of-radius-2xl)}}

/* planning_ai_movie_audio_upload_only_v1_20260913 */

/* planning_shot_input_preview_v1_20260914
   Episode-level preview for Animation/AI Movie Planning inputs. */
.planning-preview-btn{border-color:#6366f1!important;background:#312e81!important;color:#eef2ff!important}
.planning-preview-btn:hover:not(:disabled){background:#3730a3!important;border-color:#818cf8!important}
.planning-shot-row-preview{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 8px;border:1px solid;border-radius:var(--of-radius-md,8px);font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}
.planning-shot-row-preview:disabled{opacity:.45;cursor:not-allowed}
.planning-shot-row-preview:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.planning-animation-plan-table th.planning-shot-row-preview-cell,.planning-animation-plan-table td.planning-shot-row-preview-cell{width:70px;min-width:70px;text-align:center;padding-left:6px;padding-right:6px}
@media(max-width:767px){.planning-mobile-card-head.planning-shot-card-head-with-preview{grid-template-columns:34px minmax(0,1fr) auto 36px!important}.planning-shot-card-head-with-preview .planning-shot-row-preview{min-height:36px;padding:0 10px}}
.planning-shot-preview-overlay{position:fixed;inset:0;z-index:5200;background:rgba(0,0,0,.84);display:flex;align-items:stretch;justify-content:center;padding:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.planning-shot-preview-shell{width:min(1440px,100%);height:100%;min-height:0;display:flex;flex-direction:column;border:1px solid #424a55;border-radius:var(--of-radius-panel);overflow:hidden;background:#151515;box-shadow:0 30px 90px rgba(0,0,0,.62)}
.planning-shot-preview-header{height:58px;flex:0 0 58px;display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:12px;padding:0 12px 0 18px;border-bottom:1px solid #343b45;background:#242424}
.planning-shot-preview-title{min-width:0;display:flex;align-items:baseline;gap:10px}.planning-shot-preview-title strong{color:#fff;font-size:18px}.planning-shot-preview-title span{color:#9ca3af;font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planning-shot-preview-counter{color:#cbd5e1;font-size:11px;font-weight:900;padding:5px 9px;border:1px solid #46505e;border-radius:var(--of-radius-pill);background:#1d232b}
.planning-shot-preview-close{width:38px;height:38px;border:1px solid #4b5563;border-radius:50%;background:#2b2b2b;color:#fff;font-size:24px;line-height:1;display:grid;place-items:center}
.planning-shot-preview-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:#000}
.planning-shot-preview-video,.planning-shot-preview-image,.planning-shot-preview-frame-stack{width:100%;height:100%;object-fit:contain;display:block}
.planning-shot-preview-frame-stack{position:relative}.planning-shot-preview-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .08s linear}.planning-shot-preview-frame.end{opacity:1}
.planning-shot-preview-empty{display:grid;place-items:center;width:100%;height:100%;color:#6b7280;font-size:13px;font-weight:800}
.planning-shot-preview-stage audio{display:none}
.planning-shot-preview-shot-meta{min-height:38px;display:flex;align-items:center;gap:10px;padding:7px 16px;border-top:1px solid #2f3640;background:#1d1d1d;color:#d1d5db}.planning-shot-preview-shot-meta span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#818cf8}.planning-shot-preview-shot-meta strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planning-shot-preview-controls{min-height:58px;display:grid;grid-template-columns:40px 46px 48px minmax(120px,1fr) 48px 40px;align-items:center;gap:9px;padding:8px 14px 10px;border-top:1px solid #343b45;background:rgba(25,25,25,.98)}
.planning-shot-preview-play,.planning-shot-preview-skip{height:40px;border:1px solid #4b5563;border-radius:var(--of-radius-control-workflow);background:#292929;color:#fff;display:grid;place-items:center}.planning-shot-preview-play{width:46px;background:#3730a3;border-color:#6366f1}.planning-shot-preview-play svg{width:18px;height:18px;fill:currentColor}.planning-shot-preview-skip{font-size:28px;line-height:1}.planning-shot-preview-skip:disabled{opacity:.32}
.planning-shot-preview-time{font-size:11px;font-weight:900;color:#d1d5db;text-align:center;font-variant-numeric:tabular-nums}
.planning-shot-preview-timeline{position:relative;width:100%;min-width:0;height:28px;display:flex;align-items:center}
.planning-shot-preview-progress{position:relative;z-index:2;width:100%;margin:0;accent-color:#6366f1}
.planning-shot-preview-markers{position:absolute;z-index:3;inset:0 7px;pointer-events:none}
.planning-shot-preview-boundary{position:absolute;top:50%;width:2px;height:13px;transform:translate(-1px,-50%);border-radius:2px;background:rgba(255,255,255,.58);box-shadow:0 0 0 1px rgba(15,23,42,.34)}
/* planning-shot-preview-master-timeline-v2-20260914 */
@media(max-width:767px){
  .planning-mobile-bottom-actions.has-shot-preview{grid-template-columns:68px minmax(0,.82fr) minmax(0,1.18fr)}
  .planning-mobile-bottom-actions.has-shot-preview.is-client{grid-template-columns:72px minmax(0,1fr)}
  .planning-mobile-bottom-btn.preview{border:1px solid #6366f1;background:#312e81;color:#eef2ff;font-size:10px;padding-left:5px;padding-right:5px}
  .planning-shot-preview-overlay{padding:0;background:#000}.planning-shot-preview-shell{border:0;border-radius:0;width:100%;height:100%}
  .planning-shot-preview-header{height:54px;flex-basis:54px;padding-left:13px;grid-template-columns:minmax(0,1fr) auto 40px}.planning-shot-preview-title strong{font-size:16px}.planning-shot-preview-title span{font-size:10px}.planning-shot-preview-close{width:36px;height:36px}
  .planning-shot-preview-shot-meta{min-height:35px;padding:6px 12px}.planning-shot-preview-controls{grid-template-columns:34px 42px 42px minmax(70px,1fr) 42px 34px;gap:5px;padding:7px 8px calc(7px + env(safe-area-inset-bottom))}.planning-shot-preview-play{width:42px;height:40px}.planning-shot-preview-skip{height:40px;font-size:24px}.planning-shot-preview-time{font-size:10px}
}

/* planning_animation_thumbnail_left_no_index_v1_20260914 */
@media (min-width:768px){
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) th:first-child,
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:first-child{
    width:96px!important;min-width:96px!important;max-width:96px!important;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) th:nth-child(2),
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:nth-child(2){
    width:clamp(260px,18vw,360px)!important;min-width:260px!important;max-width:360px!important;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) .planning-shot-thumb-cell{
    justify-content:flex-start;min-width:0;padding-left:4px;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) .planning-animation-shot-name-cell{
    display:block;min-width:0;width:100%;
  }
}

/* planning_shot_row_number_first_v1_20260914
   Keep the visual assignment row number as the first desktop column for
   Animation and AI Movie Planning. */
@media (min-width:768px){
  .planning-row-number-head,.planning-row-number-cell{
    width:44px!important;min-width:44px!important;max-width:44px!important;
    text-align:center!important;padding-left:6px!important;padding-right:6px!important;
  }
  .planning-row-number-cell .planning-plan-row-index{margin:0 auto}

  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) th:first-child,
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:first-child{
    width:44px!important;min-width:44px!important;max-width:44px!important;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) th:nth-child(2),
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:nth-child(2){
    width:96px!important;min-width:96px!important;max-width:96px!important;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) th:nth-child(3),
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:nth-child(3){
    width:clamp(260px,18vw,360px)!important;min-width:260px!important;max-width:360px!important;
  }
  .planning-animation-plan-table:not(.planning-ai-movie-plan-table) td:nth-child(2) .planning-shot-thumb-cell{
    justify-content:flex-start;min-width:0;padding-left:4px;
  }

  .planning-ai-movie-plan-table{min-width:1624px!important}
  .planning-ai-movie-plan-table th.planning-ai-col-index,
  .planning-ai-movie-plan-table td.planning-ai-col-index{
    width:44px!important;min-width:44px!important;max-width:44px!important;
  }
  .planning-ai-movie-plan-table .planning-animation-shot-name-cell{display:block;min-width:0;width:100%}
}

/* planning_crop_simple_ui_v1_20260914 */
.planning-crop-modal-pro.planning-crop-simple-pro {
  width: min(720px, calc(100vw - 24px));
}
.planning-crop-simple-pro .planning-crop-body-pro {
  display: block;
  grid-template-columns: none;
  padding: 16px;
}
.planning-crop-simple-pro .planning-crop-stage-pro {
  padding: 10px;
}
.planning-crop-simple-pro .planning-crop-canvas-pro {
  height: min(560px, 64dvh);
  min-height: 320px;
}
@media (max-width: 760px) {
  .planning-crop-modal-pro.planning-crop-simple-pro {
    width: calc(100vw - 16px);
  }
  .planning-crop-simple-pro .planning-crop-body-pro {
    padding: 10px;
  }
  .planning-crop-simple-pro .planning-crop-canvas-pro {
    height: min(64dvh, 620px);
    min-height: 260px;
  }
}

/* planning_episode_delete_from_planning_v1_20260914
   Staff episode management in Animation/AI Movie Planning. */
.planning-animation-episode-card{position:relative;flex:0 0 auto}
.planning-animation-episode-card .planning-animation-episode-tile{width:100%}
.planning-animation-episode-card.has-delete .planning-animation-episode-tile{padding-right:32px}
.planning-animation-episode-delete{position:absolute;right:5px;top:50%;transform:translateY(-50%) scale(.92);z-index:2;width:23px;height:23px;border-radius:var(--of-radius-pill);border:1px solid rgba(248,113,113,.38);background:rgba(127,29,29,.72);color:#fecaca;display:grid;place-items:center;font-size:16px;font-weight:900;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease}
.planning-animation-episode-card:hover .planning-animation-episode-delete,.planning-animation-episode-card:focus-within .planning-animation-episode-delete{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.planning-animation-episode-delete:hover{background:#b91c1c;border-color:#ef4444;color:#fff}
@media(max-width:767px){.planning-animation-episode-card.has-delete .planning-animation-episode-tile{padding-right:30px}.planning-animation-episode-delete{right:4px;width:22px;height:22px;font-size:15px;opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}}

/* planning_shot_insert_between_v1_20260914
   Animation / AI Movie Planning only: the boundary between two shot rows is
   an explicit insert target. Asset Planning is untouched. */
.planning-shot-insert-row > td {
  height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #111 !important;
}
.planning-shot-insert-separator {
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
}
.planning-shot-insert-separator::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  background: rgba(100,116,139,.55);
  transform: translateY(-50%);
  transition: background .14s ease, box-shadow .14s ease;
}
.planning-shot-insert-separator span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #475569;
  border-radius: var(--of-radius-pill);
  background: #171717;
  color: #dbeafe;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
  opacity: .42;
  transition: opacity .14s ease, border-color .14s ease, background .14s ease, transform .14s ease;
}
.planning-shot-insert-separator-desktop { height: 16px; }
.planning-shot-insert-separator:hover::before,
.planning-shot-insert-separator:focus-visible::before {
  background: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59,130,246,.14);
}
.planning-shot-insert-separator:hover span,
.planning-shot-insert-separator:focus-visible span {
  opacity: 1;
  border-color: #3b82f6;
  background: #172554;
  transform: translate(-50%, -50%) scale(1.08);
}
.planning-shot-insert-separator:focus-visible { outline: none; }
.planning-shot-insert-separator-mobile { display: none; }
@media (max-width: 767px) {
  .planning-animation-shot-cards { gap: 0 !important; }
  .planning-animation-shot-cards > .planning-animation-shot-card { margin: 0; }
  .planning-shot-insert-separator-mobile {
    display: block;
    height: 28px;
    flex: 0 0 28px;
  }
  .planning-shot-insert-separator-mobile::before { left: 18px; right: 18px; }
  .planning-shot-insert-separator-mobile span {
    width: 22px;
    height: 22px;
    opacity: .9;
    border-color: #3b82f6;
    background: #172554;
  }
}

/* Planning Animation / AI Movie: compact freelancer amount + artist group */
.planning-plan-table .planning-plan-artist-head,
.planning-plan-table .planning-artist-group { border-color: rgba(148,163,184,.22); }
.planning-artist-cell-compact { display:grid; grid-template-columns:1fr; gap:6px; min-width:0; }
.planning-artist-cell-compact .planning-stage-mini-input,
.planning-artist-cell-compact .planning-artist-name-merged { width:100%; min-width:0; }
.planning-shot-artist-compact-cell { vertical-align:middle; }

/* =========================================================
   Root Admin Workflow Presets — Mobile UI Polish (2026-09-17)
   Mobile-only visual/layout refinement. Desktop is intentionally unchanged.
   ========================================================= */
@media (max-width: 767px) {
    .assignment-pipeline-modal {
        padding: 8px 8px 0 !important;
        background: #161616 !important;
    }

    /* Compact two-row header: title first, pipeline type selector second. */
    .assignment-pipeline-modal > .flex.flex-col.md\:flex-row.md\:items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        gap: 6px 8px !important;
        min-height: 0 !important;
        margin-bottom: 8px !important;
        padding: 2px 0 8px !important;
        padding-right: 0 !important;
        border-color: rgba(75, 85, 99, .72) !important;
    }

    .assignment-pipeline-modal > .flex.flex-col.md\:flex-row.md\:items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0 > .flex.items-center.gap-3.min-w-0 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        padding-left: 2px !important;
    }

    .assignment-pipeline-modal .assignment-pipeline-close-btn {
        top: 7px !important;
        right: 8px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-color: rgba(100, 116, 139, .72) !important;
        background: #202020 !important;
    }

    .assignment-pipeline-modal h2 {
        font-size: 1rem !important;
        line-height: 1.1rem !important;
        letter-spacing: .015em !important;
        max-width: calc(100vw - 70px) !important;
    }

    .assignment-pipeline-modal h2 + div {
        margin-top: 2px !important;
        font-size: .48rem !important;
        line-height: .62rem !important;
        letter-spacing: .18em !important;
        color: #94a3b8 !important;
    }

    .assignment-pipeline-modal .global-pipeline-type-switch {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
    }

    .assignment-pipeline-modal .global-pipeline-type-switch button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 7px 4px !important;
        border-radius: var(--of-radius-control-workflow) !important;
        font-size: .58rem !important;
        line-height: .72rem !important;
        letter-spacing: .10em !important;
        white-space: nowrap !important;
    }

    /* Keep the node window compact enough that connector controls stay visible. */
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main {
        gap: 8px !important;
        padding: 0 0 calc(72px + env(safe-area-inset-bottom)) !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        min-height: 0 !important;
        height: auto !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        height: clamp(260px, 36dvh, 360px) !important;
        min-height: 260px !important;
        max-height: 360px !important;
        border-radius: var(--of-radius-xl) !important;
        border-color: rgba(71, 85, 105, .86) !important;
        background:
            radial-gradient(circle at 50% 20%, rgba(59,130,246,.07), rgba(0,0,0,0) 42%),
            #1f1f1f !important;
    }

    /* Mobile canvas gestures are enough; keep desktop/tablet Fit/Zoom/Arrange controls untouched. */
    .assignment-pipeline-mobile-canvas-tools {
        display: none !important;
    }

    /* Node Connector becomes a compact card with a real grid instead of a clipped horizontal strip. */
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 0 !important;
        padding: 10px !important;
        border-radius: var(--of-radius-xl) !important;
        border: 1px solid rgba(71, 85, 105, .86) !important;
        background: #1d1d1d !important;
        box-shadow: var(--of-shadow-dark-top-highlight-subtle) !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar::before,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar::before {
        margin: 0 0 1px !important;
        color: #bfdbfe !important;
        font-size: .59rem !important;
        line-height: .75rem !important;
        letter-spacing: .16em !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-node-tray-list,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        max-height: 108px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0 !important;
        scrollbar-width: thin !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-node-tray-item,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-item,
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-quick-stage-row,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-quick-stage-row {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 40px !important;
        margin: 0 !important;
        border-radius: var(--of-radius-md) !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-node-tray-item-main,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-item-main {
        width: 100% !important;
        min-height: 40px !important;
        padding: 0 6px !important;
        border-radius: var(--of-radius-md) !important;
        font-size: .65rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-node-tray-add,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-add {
        grid-column: 1 / -1 !important;
        min-height: 40px !important;
        border-radius: var(--of-radius-md) !important;
        font-size: 1.15rem !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-bottom-toolbar > button,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar > button {
        min-height: 40px !important;
        border-radius: var(--of-radius-md) !important;
        font-size: .61rem !important;
        padding: 7px 6px !important;
    }

    /* Bottom window switcher: smaller footprint, clearer labels, no giant footer card. */
    .assignment-pipeline-mobile-window-tabs {
        left: 6px !important;
        right: 6px !important;
        gap: 5px !important;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
        border-radius: 13px 13px 0 0 !important;
        background: rgba(15, 20, 28, .97) !important;
        box-shadow: 0 -8px 20px rgba(0,0,0,.34) !important;
    }

    .assignment-pipeline-mobile-window-tabs button {
        min-height: 40px !important;
        padding: 4px 3px !important;
        border-radius: var(--of-radius-control) !important;
        font-size: .50rem !important;
        line-height: .64rem !important;
        letter-spacing: .055em !important;
        gap: 2px !important;
    }

    .assignment-pipeline-tab-icon {
        width: 13px !important;
        height: 13px !important;
        font-size: .40rem !important;
    }

    /* Saved Workflows / Asset Category become clean full-height mobile panels. */
    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        min-height: calc(100dvh - 154px) !important;
        height: calc(100dvh - 154px) !important;
        margin: 0 0 calc(62px + env(safe-area-inset-bottom)) !important;
        padding: 10px !important;
        border-radius: var(--of-radius-xl) !important;
        background: #1d1d1d !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side::before,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side::before {
        margin-bottom: 7px !important;
        font-size: .59rem !important;
        letter-spacing: .16em !important;
    }

    .assignment-pipeline-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-main,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-main {
        padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        height: clamp(235px, 33dvh, 310px) !important;
        min-height: 235px !important;
        max-height: 310px !important;
    }

    .assignment-pipeline-modal:not([data-mobile-pipeline-panel]) .assignment-node-tray-list,
    .assignment-pipeline-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: 98px !important;
    }

    .assignment-pipeline-modal .global-pipeline-type-switch button {
        font-size: .52rem !important;
        letter-spacing: .065em !important;
    }
}

/* Workflow Presets type-aware category heading (2026-09-17) */
@media (max-width: 767px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side::before {
        content: attr(data-category-label) !important;
    }
}

/* =========================================================
   Root Admin Workflow Presets — Mobile Bottom Nav Match (2026-09-17)
   Match the Workflow Presets switcher to Originfly's regular mobile nav.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        gap: 2px !important;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 0 !important;
        background: rgba(31,31,31,.98) !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,.46) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button {
        min-height: 58px !important;
        padding: 5px 2px !important;
        gap: 2px !important;
        border: 0 !important;
        border-radius: var(--of-radius-xl) !important;
        background: transparent !important;
        color: #a9b0bb !important;
        box-shadow: none !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        transition: transform .14s ease, background-color .14s ease, color .14s ease !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button:active {
        transform: scale(.96) !important;
        background: rgba(255,255,255,.06) !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button.is-active,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"],
    .workflow-presets-global-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="workflows"],
    .workflow-presets-global-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="categories"] {
        border: 0 !important;
        background: rgba(59,130,246,.12) !important;
        color: #60a5fa !important;
        box-shadow: none !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-tab-icon {
        width: 22px !important;
        height: 22px !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: currentColor !important;
        font-size: 0 !important;
        opacity: 1 !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-tab-icon svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button > span:last-child {
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-main,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-main,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-main {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        margin-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button {
        min-height: 54px !important;
        font-size: 9px !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-tab-icon,
    .workflow-presets-global-modal .assignment-pipeline-tab-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* =========================================================
   Root Admin Workflow Presets — Mobile Add / Save dock (2026-09-17)
   Add toggles the Node Connector panel; Save Workflow is a direct action.
   Asset reusable quick-node buttons stay Asset-only on mobile.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-action="save"] {
        color: #a9b0bb !important;
        background: transparent !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-action="save"]:active {
        color: #86efac !important;
        background: rgba(34,197,94,.12) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-main,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        min-height: 0 !important;
        height: auto !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas {
        height: clamp(260px, 36dvh, 360px) !important;
        min-height: 260px !important;
        max-height: 360px !important;
        border-radius: var(--of-radius-xl) !important;
        border-color: rgba(71,85,105,.86) !important;
        background: radial-gradient(circle at 50% 20%, rgba(59,130,246,.07), rgba(0,0,0,0) 42%), #1f1f1f !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-bottom-toolbar,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-side {
        display: none !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-main {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    /* Pipeline-type-specific reusable nodes: Animation / AI Movie start empty and
       keep their own + button instead of inheriting Asset buttons. */
}

@media (max-width: 380px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas {
        height: clamp(235px, 33dvh, 310px) !important;
        min-height: 235px !important;
        max-height: 310px !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button {
        font-size: 8px !important;
    }
}

/* =========================================================
   Root Admin Workflow Presets — Mobile Node Connector Popup (2026-09-17)
   Add opens the Node Connector as a large modal-style sheet with its own close button.
   Desktop/tablet workflow controls remain unchanged.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal .assignment-node-connector-mobile-backdrop,
    .workflow-presets-global-modal .assignment-node-connector-mobile-header {
        display: none !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 997 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,.7) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
        box-shadow: none !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        display: grid !important;
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: max(84px, calc(env(safe-area-inset-top) + 72px)) !important;
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        z-index: 998 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(96,165,250,.34) !important;
        border-radius: 22px !important;
        background: linear-gradient(180deg, #242424 0%, #1b1b1b 100%) !important;
        box-shadow: 0 24px 70px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.05) !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        animation: workflowNodeConnectorPopupIn .18s ease-out both;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar::before {
        display: none !important;
        content: none !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-header {
        display: flex !important;
        grid-column: 1 / -1 !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 52px !important;
        padding: 0 0 12px !important;
        margin: 0 0 2px !important;
        border-bottom: 1px solid rgba(255,255,255,.09) !important;
    }

    .workflow-presets-global-modal .assignment-node-connector-mobile-title-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .workflow-presets-global-modal .assignment-node-connector-mobile-title-wrap strong {
        color: #f8fafc !important;
        font-size: .92rem !important;
        line-height: 1.05rem !important;
        font-weight: 850 !important;
        letter-spacing: .01em !important;
    }

    .workflow-presets-global-modal .assignment-node-connector-mobile-kicker {
        color: #60a5fa !important;
        font-size: .52rem !important;
        line-height: .65rem !important;
        font-weight: 900 !important;
        letter-spacing: .18em !important;
    }

    .workflow-presets-global-modal .assignment-node-connector-mobile-close {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: var(--of-radius-pill) !important;
        border: 1px solid rgba(148,163,184,.42) !important;
        background: rgba(255,255,255,.06) !important;
        color: #e5e7eb !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    .workflow-presets-global-modal .assignment-node-connector-mobile-close:active {
        transform: scale(.94) !important;
        background: rgba(255,255,255,.12) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-list {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        max-height: min(46dvh, 410px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 2px 0 !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-item,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-quick-stage-row,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-item-main {
        min-height: 48px !important;
        border-radius: var(--of-radius-control-large) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-add {
        grid-column: 1 / -1 !important;
        min-height: 48px !important;
        border-radius: var(--of-radius-control-large) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar > button:not(.assignment-node-connector-mobile-close) {
        min-height: 48px !important;
        border-radius: var(--of-radius-control-large) !important;
    }

    /* The canvas remains behind the popup; do not let the inline connector reserve space. */
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        min-height: 0 !important;
        height: auto !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        left: 8px !important;
        right: 8px !important;
        top: max(76px, calc(env(safe-area-inset-top) + 66px)) !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        padding: 12px !important;
        border-radius: var(--of-radius-panel) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: min(48dvh, 390px) !important;
    }
}

@keyframes workflowNodeConnectorPopupIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   Root Admin Workflow Presets — Mobile Full Canvas (2026-09-17)
   The node graph fills all available mobile space between the header/type switch
   and the bottom Workflow Presets dock. Other panels and desktop stay unchanged.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-main,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        display: flex !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: var(--of-radius-lg) !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* =========================================================
   Root Admin Workflow Presets — Mobile Canvas Screen Fit (2026-09-18)
   Force the actual graph surface to occupy the full usable mobile viewport
   between the compact header/type switch and the fixed bottom action dock.
   This intentionally overrides the older content-height/grid sizing rules.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-main,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-main > .flex.flex-col.min-h-0,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-main > .flex.flex-col.min-h-0 {
        display: flex !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        position: absolute !important;
        top: 96px !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: var(--of-radius-lg) !important;
        z-index: 1 !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        top: 94px !important;
        bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
}

/* =========================================================
   Root Admin Workflow Presets — Mobile Node Popup Footer (2026-09-18)
   Keep reusable Asset nodes fully scrollable in the popup while anchoring
   + / Clear Lines / Delete Node to a dedicated action area at the bottom.
   Desktop/tablet behavior remains unchanged.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        align-content: stretch !important;
        overflow: hidden !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-list {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        align-self: stretch !important;
        align-content: start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 4px 2px 10px !important;
        margin: 0 !important;
        scrollbar-gutter: stable !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-add {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        align-self: end !important;
        margin: 0 !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-clear {
        grid-column: 1 !important;
        grid-row: 4 !important;
        align-self: end !important;
        margin: 0 !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-delete {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        grid-column: 2 !important;
        grid-row: 4 !important;
        align-self: end !important;
        margin: 0 !important;
    }

    /* Keep desktop-only/preset toolbar actions out of the mobile popup footer. */
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-spacer,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .pipeline-preset-action-btn {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-tray-list {
        max-height: none !important;
    }
}

/* workflow-presets-type-node-lists-v1-20260918 */

/* =========================================================
   Root Admin Workflow Presets — Mobile Node Connector Full Screen (2026-09-19)
   Node Connector fills the usable mobile viewport while keeping the fixed
   Workflow Presets bottom dock visible and clickable.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-backdrop {
        inset: 0 0 calc(70px + env(safe-area-inset-bottom)) 0 !important;
        width: 100vw !important;
        height: auto !important;
        z-index: 9997 !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        width: 100vw !important;
        max-width: none !important;
        padding: calc(12px + env(safe-area-inset-top)) 14px 14px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 9998 !important;
        background: linear-gradient(180deg, #222 0%, #1b1b1b 100%) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-header {
        min-height: 58px !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-backdrop {
        bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: calc(66px + env(safe-area-inset-bottom)) !important;
        padding: calc(10px + env(safe-area-inset-top)) 12px 12px !important;
        border-radius: 0 !important;
    }
}

/* workflow-presets-mobile-node-popup-fullscreen-v1-20260919 */

/* =========================================================
   Root Admin Workflow Presets — Mobile Edge-to-Edge Canvas (2026-09-19)
   Remove the rounded side box around the node workspace on mobile and let
   the canvas fill the usable width/height right up to the fixed bottom dock.
   Desktop/tablet remain unchanged.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        left: 0 !important;
        right: 0 !important;
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    }
}

/* workflow-presets-mobile-edge-to-edge-canvas-v1-20260919 */

/* =========================================================
   Root Admin Workflow Presets — Mobile Compact Labels (2026-09-19)
   Remove the marked mobile-only helper labels and reclaim the height for
   the graph workspace. Add keeps its label; the other dock actions are icons.
   ========================================================= */
@media (max-width: 767px) {
    /* The selected type is already obvious from the highlighted Asset / Animation / AI Movie tab. */
    .workflow-presets-global-modal h2 + div {
        display: none !important;
    }

    .workflow-presets-global-modal > .flex.flex-col.md\:flex-row.md\:items-center.gap-3.mb-3.border-b.border-gray-700.pb-3.shrink-0 {
        gap: 3px 8px !important;
        margin-bottom: 4px !important;
        padding: 2px 0 5px !important;
    }

    .workflow-presets-global-modal .global-pipeline-type-switch {
        margin-top: 0 !important;
    }

    /* Save / Saved / Category are icon-only on mobile; Add stays labelled. */
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-action="save"] > span:last-child,
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="workflows"] > span:last-child,
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="categories"] > span:last-child {
        display: none !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs {
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button {
        min-height: 46px !important;
        padding: 3px 2px !important;
        gap: 1px !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-action="save"],
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="workflows"],
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="categories"] {
        align-items: center !important;
        justify-content: center !important;
    }

    /* Use the reclaimed top/bottom space for the canvas. */
    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        top: 84px !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    }

    /* Full-screen Add popup stops above the shorter dock. */
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-backdrop,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="workflows"] .assignment-pipeline-side,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="categories"] .assignment-pipeline-side {
        margin-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs button {
        min-height: 44px !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="canvas"] .assignment-pipeline-canvas,
    .workflow-presets-global-modal:not([data-mobile-pipeline-panel]) .assignment-pipeline-canvas,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-canvas {
        top: 82px !important;
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-node-connector-mobile-backdrop,
    .workflow-presets-global-modal[data-mobile-pipeline-panel="nodes"] .assignment-pipeline-bottom-toolbar {
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }
}

/* workflow-presets-mobile-compact-labels-v1-20260919 */

/* =========================================================
   Root Admin Workflow Presets — Mobile Icon-Only Add + Asset Tray Reconcile (2026-09-19)
   Keep the Add action icon-only, but never hide its sole + SVG icon. Data
   reconciliation is handled in quick-stage tooling so the mobile Asset popup
   preserves the richest tray.
   ========================================================= */
@media (max-width: 767px) {
    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"] {
        align-items: center !important;
        justify-content: center !important;
    }

    .workflow-presets-global-modal .assignment-pipeline-mobile-window-tabs [data-mobile-pipeline-tab="nodes"] > .assignment-pipeline-tab-icon {
        display: inline-flex !important;
    }
}

/* workflow-presets-mobile-add-plus-icon-v1-20260919 */
/* workflow-presets-mobile-asset-node-dom-reconcile-v1-20260919 */

/* project_groups_v1_20260922 */
.project-group-cluster { align-items:flex-start; }
/* Enclose the folder, child projects and inner Add action as one group. */
.project-group-cluster.is-expanded {
  align-items:center;
  align-self:flex-start;
  gap:10px;
  padding:12px 8px 8px;
  border:1px solid rgba(96,165,250,.5);
  border-radius:var(--of-radius-xl);
  background:rgba(30,41,59,.52);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 20px rgba(0,0,0,.16);
}
.project-group-cluster.is-expanded > .project-group-card { margin-top:0; }
.project-group-cluster.is-expanded > .project-group-card > .project-group-name { display:none; }
.project-group-folder-thumb {
  position:relative;
  overflow:visible;
  border-radius:var(--of-radius-xl);
  border:1px solid rgba(148,163,184,.32);
  background:#303846;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  padding:5px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.project-group-folder-thumb::before {
  content:"";
  position:absolute;
  left:8px;
  top:-7px;
  width:30px;
  height:11px;
  border-radius:7px 7px 2px 2px;
  background:#3b82f6;
  border:1px solid rgba(147,197,253,.6);
  z-index:0;
}
.project-group-folder-thumb img {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--of-radius-md);
  filter:saturate(.9);
}
.project-group-folder-thumb:hover,
.project-group-folder-thumb.is-expanded { transform:translateY(-2px); border-color:#60a5fa; box-shadow:0 10px 24px rgba(37,99,235,.22); }
.project-group-folder-thumb.is-active { box-shadow:0 0 0 2px var(--of-project-accent), 0 10px 24px rgba(37,99,235,.22); }
.project-group-folder-badge {
  position:absolute;
  z-index:3;
  left:5px;
  right:5px;
  bottom:5px;
  height:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0 0 8px 8px;
  background:rgba(15,23,42,.76);
  color:#dbeafe;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.project-group-folder-badge.project-type-badge {
  left:0;
  right:0;
  bottom:0;
  height:auto;
  min-height:17px;
  padding:2px 3px;
  font-size:7px;
  line-height:9px;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
}
.project-group-folder-badge.project-gallery-type-badge {
  min-height:26px;
  padding:4px 8px;
  font-size:11px;
  line-height:15px;
  letter-spacing:.08em;
}
.project-group-name { color:#cbd5e1; font-weight:700; }
.project-group-inline-projects {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:max-content;
  padding:0;
  margin-top:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.project-group-inline-projects[hidden] { display:none; }
.project-group-inline-label { display:none; }
.project-group-inline-items { display:flex; align-items:flex-start; gap:8px; }
.project-group-child-card { width:60px; }
.project-group-child-type {
  max-width:100%;
  margin-top:2px;
  padding:1px 5px;
  border-radius:var(--of-radius-pill);
  border:1px solid rgba(148,163,184,.32);
  color:#94a3b8;
  font-size:7px;
  line-height:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-group-add-project {
  border:1px dashed rgba(96,165,250,.62);
  background:rgba(37,99,235,.08);
  color:#93c5fd;
  transition:.18s ease;
}
.project-group-add-project:hover { background:rgba(37,99,235,.18); color:#fff; border-color:#60a5fa; }
.project-create-inside-group {
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:4px 9px;
  border-radius:var(--of-radius-pill);
  border:1px solid rgba(96,165,250,.42);
  background:rgba(37,99,235,.12);
  color:#bfdbfe;
  font-size:10px;
  font-weight:800;
}
.project-create-choice-icon {
  width:46px;
  height:42px;
  border-radius:var(--of-radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,.36);
  background:#111827;
  color:#93c5fd;
  font-size:28px;
  font-weight:300;
}
.project-create-choice-folder,
.project-group-create-folder-icon { position:relative; }
.project-create-choice-folder::before,
.project-group-create-folder-icon::before {
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:5px;
  height:25px;
  border-radius:6px;
  background:#3b82f6;
}
.project-create-choice-folder::after,
.project-group-create-folder-icon::after {
  content:"";
  position:absolute;
  left:7px;
  top:7px;
  width:17px;
  height:8px;
  border-radius:5px 5px 0 0;
  background:#60a5fa;
}
.project-group-create-folder-icon { width:52px; height:44px; }
.project-group-create-folder-icon::before { left:2px; right:2px; bottom:2px; height:31px; }
.project-group-create-folder-icon::after { left:5px; top:2px; width:22px; height:10px; }

@media (min-width:768px) {
  .project-group-child-card { width:72px; }
}

/* Grouped project thumbnails match standalone desktop projects.
   Compact captions keep the expanded group within the project strip. */
@media (min-width:768px) {
  .project-group-inline-items { gap:5px; }
  .project-group-inline-projects .project-group-child-card {
    width:72px !important;
    margin-top:0 !important;
  }
  .project-group-inline-projects .project-group-child-card .mobile-project-thumb {
    width:72px !important;
    height:72px !important;
    border-radius:var(--of-radius-md) !important;
  }
  .project-group-inline-projects .project-group-child-card > div:nth-child(2) {
    margin-top:3px !important;
    padding-left:1px !important;
    padding-right:1px !important;
    font-size:9px !important;
    line-height:10px !important;
  }
  .project-group-inline-projects .project-group-child-type {
    margin-top:1px;
    padding:0 4px;
    font-size:6px;
    line-height:8px;
  }
  .project-group-inline-projects .project-group-add-project {
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    flex:0 0 72px !important;
    margin-top:0 !important;
    border-radius:var(--of-radius-md) !important;
    font-size:24px !important;
    line-height:1 !important;
  }
}

/* Grouped project thumbnails and Add match the standard mobile icons. */
@media (max-width:767px) {
  .project-group-cluster.is-expanded {
    gap:8px;
    padding:10px 7px 6px;
    border-radius:var(--of-radius-lg);
  }
  .project-group-inline-items { gap:4px; }
  .project-group-inline-projects .project-group-child-card {
    width:58px !important;
    margin-top:0 !important;
  }
  .project-group-inline-projects .project-group-child-card .mobile-project-thumb {
    width:54px !important;
    height:54px !important;
    border-radius:9px !important;
  }
  .project-group-inline-projects .project-group-child-card > div:nth-child(2) {
    margin-top:3px !important;
    padding-left:0 !important;
    padding-right:0 !important;
    font-size:8px !important;
    line-height:9px !important;
  }
  .project-group-inline-projects .project-group-child-type {
    margin-top:1px;
    padding:0 3px;
    font-size:5.5px;
    line-height:7px;
  }
  .project-group-inline-projects .project-group-child-card > button {
    width:16px !important;
    height:16px !important;
    top:-5px !important;
    right:-5px !important;
    font-size:10px !important;
    line-height:1 !important;
  }
  .project-group-inline-projects .project-group-add-project {
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    flex:0 0 54px !important;
    margin-top:0 !important;
    border-radius:var(--of-radius-control) !important;
    font-size:32px !important;
    line-height:1 !important;
  }
  #modal-container[data-modal-type="project-group"] {
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
    background:#242424 !important;
  }
  #modal-container[data-modal-type="project-group"] .new-project-group-modal-fit {
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-width:none !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    border:0 !important;
    border-radius:0 !important;
    background:#242424 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow-y:auto !important;
  }
  #modal-container[data-modal-type="project-group"] .new-project-group-create-submit { margin-top:auto !important; min-height:50px; }
}

/* =========================================================
   Script project workspace v2 — WriterDuet-inspired workflow
   Originfly-native layout: menu + line-type widget + Page/Cards + tools.
   ========================================================= */
.script-workspace {
    --script-bg:#1d2127; --script-panel:#242a31; --script-panel-2:#2d343d; --script-panel-3:#171b20;
    --script-border:#3f4854; --script-text:#edf2f7; --script-muted:#9aa6b5; --script-accent:#3b82f6;
    --script-paper:#fbfaf6; --script-paper-text:#15171a; --script-paper-edge:#d6d1c7;
    display:flex; flex-direction:column; height:100%; min-height:0; min-width:0; overflow:hidden;
    background:var(--script-bg); color:var(--script-text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.script-workspace.script-maximized {
    position:fixed; inset:0; z-index:2850; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none;
    background:var(--script-bg); box-shadow:0 0 0 1px var(--script-border),0 30px 90px rgba(0,0,0,.48);
}
.script-menubar { min-height:36px; display:flex; align-items:center; gap:5px; padding:0 10px; border-bottom:1px solid var(--script-border); background:#20252b; flex:0 0 auto; position:relative; z-index:70; }
.script-doc-title { min-width:170px; max-width:260px; display:flex; align-items:center; gap:7px; margin-right:5px; }
.script-doc-title b { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.script-save-state { color:var(--script-muted); font-size:8px; font-weight:800; white-space:nowrap; }
.script-save-state.is-dirty { color:#fbbf24; }
.script-online-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.13); }
.script-online-dot.is-pending { background:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.12); }
.script-online-dot.is-error { background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.12); }
.script-menu-buttons { display:flex; align-items:center; gap:1px; height:100%; }
.script-menu-wrap { height:100%; position:relative; display:flex; align-items:center; }
.script-menu-wrap>button,.script-mobile-menu-button,.script-header-action { height:28px; padding:0 8px; border:0; border-radius:5px; background:transparent; color:var(--script-text); font-size:9px; font-weight:750; }
.script-menu-wrap>button:hover,.script-menu-wrap>button.active,.script-header-action:hover { background:var(--script-panel-2); }
.script-file-actions { display:flex; align-items:center; gap:3px; height:100%; }
.script-file-action { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid transparent; border-radius:var(--of-radius-control-dense); background:transparent; color:var(--script-text); cursor:pointer; }
.script-file-action:hover,.script-file-action:focus-visible { background:var(--script-panel-2); border-color:var(--script-border); outline:none; }
.script-file-action:disabled { opacity:.38; cursor:not-allowed; }
.script-file-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.script-header-action { display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--script-border); background:var(--script-panel-2); white-space:nowrap; flex:0 0 auto; }
.script-header-action.is-icon { width:30px; padding:0; font-size:15px; line-height:1; }
.script-close-version-action { min-width:30px; width:30px; padding:0; font-size:17px; line-height:1; }
.script-close-version-action:hover { color:#fecaca; border-color:#7f1d1d; background:#3b1f23; }
.script-menubar-spacer { flex:1; }
.script-menu-dropdown { position:absolute; z-index:200; top:33px; left:0; width:190px; padding:5px; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); background:#252b32; box-shadow:0 15px 38px rgba(0,0,0,.42); display:flex; flex-direction:column; gap:2px; }
.script-menu-dropdown button { width:100%; min-height:29px; text-align:left; padding:5px 9px; border:0; border-radius:var(--of-radius-control-dense); background:transparent; color:var(--script-text); font-size:9px; font-weight:650; }
.script-menu-dropdown button:hover { background:var(--script-panel-2); }
.script-menu-dropdown button:disabled { opacity:.42; }

.script-toolbar { min-height:48px; display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--script-border); background:var(--script-panel); flex:0 0 auto; z-index:45; }
.script-toolbar-scroll { display:flex; align-items:center; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:none; width:100%; }
.script-toolbar-scroll::-webkit-scrollbar { display:none; }
.script-toolbar button,.script-element-select { height:32px; padding:0 10px; border-radius:var(--of-radius-control-compact); border:1px solid var(--script-border); background:var(--script-panel-2); color:var(--script-text); font-size:9px; font-weight:800; white-space:nowrap; outline:none; }
.script-toolbar button:hover,.script-element-select:hover { border-color:#64748b; }
.script-toolbar button:disabled,.script-element-select:disabled { opacity:.42; cursor:not-allowed; }
.script-view-switch { display:flex; border:1px solid var(--script-border); border-radius:7px; overflow:hidden; flex:0 0 auto; }
.script-view-switch button { border:0;  background:transparent; height:30px; }
.script-view-switch button.active { background:#2563eb; color:#fff; }
.script-toolbar .script-title-page-btn { background:var(--script-panel-2); border-color:var(--script-border); color:var(--script-text); }
.script-toolbar .script-save-btn { background:#2563eb; border-color:#3b82f6; color:#fff; }
.script-toolbar .script-file-actions.is-toolbar { height:32px; flex:0 0 auto; gap:3px; }
.script-toolbar .script-file-action { width:32px; height:32px; padding:0; border:1px solid transparent; background:transparent; color:var(--script-text); }
.script-toolbar .script-file-action:hover,.script-toolbar .script-file-action:focus-visible { background:var(--script-panel-2); border-color:#64748b; }
.script-toolbar .script-conflict-btn { background:#991b1b; border-color:#ef4444; color:#fff; }
.script-read-btn.active { background:#14532d!important; border-color:#22c55e!important; color:#dcfce7!important; }

.script-line.is-reading { background:rgba(59,130,246,.10); box-shadow:inset 3px 0 #3b82f6; border-radius:4px; }
.script-read-modal { width:min(500px,100%); }
.script-read-modal-body { gap:12px; }
.script-read-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.script-read-modal-body select { width:100%; min-height:38px; border:1px solid #4b5563; border-radius:var(--of-radius-control-compact); background:#171b20; color:#fff; padding:7px 9px; font-size:11px; outline:none; text-transform:none; letter-spacing:normal; }
.script-read-toggle { flex-direction:row!important; align-items:center; gap:8px!important; min-height:34px; text-transform:none!important; letter-spacing:normal!important; font-size:10px!important; }
.script-read-toggle input { width:16px!important; height:16px; padding:0!important; flex:0 0 16px; accent-color:#3b82f6; }
.script-read-toggle span { color:inherit; }
.script-read-language-status { display:flex; flex-direction:column; gap:2px; padding:9px 10px; border:1px solid #374151; border-radius:var(--of-radius-sm); background:#111827; font-size:10px; line-height:1.35; }
.script-read-language-status b { font-size:10px; }
.script-read-language-status span { color:#9ca3af; text-transform:none; letter-spacing:normal; }
.script-read-language-status.ok { border-color:#166534; background:#0f2419; }
.script-read-language-status.ok b { color:#86efac; }
.script-read-language-status.missing { border-color:#7f1d1d; background:#2a1515; }
.script-read-language-status.missing b { color:#fca5a5; }
@media (max-width:767px) {
    .script-read-grid { grid-template-columns:1fr; }
    .script-read-modal { width:100%; }
}

.script-layout { flex:1; min-height:0; display:grid; grid-template-columns:44px 230px minmax(0,1fr) 290px; overflow:hidden; }
.script-left-hidden .script-layout { grid-template-columns:44px minmax(0,1fr) 290px; }
.script-right-hidden .script-layout { grid-template-columns:44px 230px minmax(0,1fr); }
.script-left-hidden.script-right-hidden .script-layout { grid-template-columns:44px minmax(0,1fr); }
.script-focus-mode .script-layout { grid-template-columns:minmax(0,1fr); }
.script-focus-mode .script-widget-rail,.script-focus-mode .script-left-panel,.script-focus-mode .script-right-panel { display:none; }
.script-widget-rail { min-width:0; background:#1f242a; border-right:1px solid var(--script-border); display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 5px; }
.script-widget-rail button { width:32px; height:32px; border:1px solid transparent; border-radius:var(--of-radius-control-compact); background:transparent; color:var(--script-muted); display:grid; place-items:center; font-size:11px; font-weight:900; }
.script-widget-rail button:hover { color:var(--script-text); background:var(--script-panel-2); }
.script-widget-rail button.active { color:#bfdbfe; border-color:#3b82f6; background:#172554; }
.script-rail-spacer { flex:1; }
.script-left-panel,.script-right-panel { min-width:0; min-height:0; overflow:auto; background:var(--script-panel); }
.script-left-panel { border-right:1px solid var(--script-border); }
.script-right-panel { border-left:1px solid var(--script-border); }
.script-panel-heading { height:43px; display:flex; align-items:center; justify-content:space-between; padding:0 11px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--script-border); position:sticky; top:0; background:var(--script-panel); z-index:5; }
.script-panel-heading button { width:27px; height:27px; border-radius:var(--of-radius-control-compact); border:1px solid var(--script-border); background:var(--script-panel-2); color:var(--script-text); font-size:17px; }
.script-widget-help { font-size:8px; color:var(--script-muted); line-height:1.45; padding:10px 10px 6px; }
.script-line-types-widget { padding:4px 0 16px; }
.script-type-group { display:grid; grid-template-columns:repeat(4, 44px); justify-content:center; gap:8px; padding:7px 8px; overflow:visible; }
.script-type-group.is-secondary { border-top:1px solid var(--script-border); padding-top:11px; margin-top:4px; }
.script-type-button { position:relative; width:44px; height:44px; min-height:44px; display:grid; place-items:center; border:1px solid var(--script-border); border-radius:var(--of-radius-md); background:var(--script-panel-2); color:var(--script-text); padding:0; font-size:9px; font-weight:760; text-align:center; overflow:visible; }
.script-type-button:hover { background:#27313d; border-color:#64748b; color:#fff; transform:translateY(-1px); }
.script-type-button.active { border-color:#3b82f6; background:#172554; color:#dbeafe; box-shadow:0 0 0 1px rgba(59,130,246,.22); }
.script-type-icon { width:21px; height:21px; display:grid; place-items:center; pointer-events:none; }
.script-type-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.script-type-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.script-type-tooltip { position:absolute; z-index:40; left:50%; top:calc(100% + 6px); transform:translate(-50%, -2px); min-width:max-content; max-width:150px; padding:5px 7px; border:1px solid var(--script-border); border-radius:6px; background:#0f172a; color:#f8fafc; box-shadow:0 8px 20px rgba(0,0,0,.32); font-size:8px; font-weight:800; line-height:1.15; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease,transform .12s ease,visibility .12s; white-space:nowrap; }
.script-type-button:hover .script-type-tooltip,.script-type-button:focus-visible .script-type-tooltip { opacity:1; visibility:visible; transform:translate(-50%, 0); }

@media (min-width:768px) {
    .script-type-group {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:7px;
        padding:7px 8px;
    }
    .script-type-group.is-secondary { padding-top:11px; }
    .script-type-tooltip {
        left:calc(100% + 8px);
        top:50%;
        transform:translate(-2px,-50%);
    }
    .script-type-button:hover .script-type-tooltip,
    .script-type-button:focus-visible .script-type-tooltip {
        transform:translate(0,-50%);
    }
}
.script-search-wrap { padding:9px; }
.script-search-wrap input { width:100%; height:32px; border:1px solid var(--script-border); border-radius:var(--of-radius-control-compact); background:var(--script-panel-3); color:var(--script-text); padding:0 9px; font-size:9px; outline:none; }
.script-search-wrap input:focus { border-color:var(--script-accent); }
.script-scenes-list { padding:0 7px 12px; display:flex; flex-direction:column; gap:4px; }
.script-scene-card { width:100%; min-height:45px; display:flex; gap:7px; align-items:center; text-align:left; padding:6px 7px; border:1px solid transparent; border-radius:var(--of-radius-sm); background:transparent; color:var(--script-text); }
.script-scene-card:hover { background:var(--script-panel-2); border-color:var(--script-border); }
.script-scene-card-num { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:6px; background:#172033; border:1px solid #2f4f7d; color:#93c5fd; font-size:9px; font-weight:900; }
.script-scene-card-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.script-scene-card-copy b { font-size:9px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.script-scene-card-copy small { font-size:8px; color:var(--script-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.script-outline-panel { padding:10px; }
.script-outline-sequence { width:100%; min-height:31px; margin-bottom:5px; border:1px solid var(--script-border); border-radius:7px; background:var(--script-panel-2); color:var(--script-text); text-align:left; padding:5px 8px; font-size:9px; font-weight:800; }
.script-panel-divider { height:1px; background:var(--script-border); margin:13px 0; }
.script-pad-wrap { padding:10px; }
.script-pad-wrap p { margin:0 0 8px; color:var(--script-muted); font-size:8px; line-height:1.45; }
.script-pad-wrap textarea { width:100%; min-height:360px; resize:vertical; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); padding:9px; background:var(--script-panel-3); color:var(--script-text); font-size:10px; line-height:1.5; outline:none; }

.script-editor-scroll { min-width:0; min-height:0; overflow:auto; background:#12161b; padding:24px; overscroll-behavior:contain; }
.script-editor-scroll.is-cards { padding:16px; background:#191e24; }
.script-paper-wrap { min-height:100%; display:flex; justify-content:center; align-items:flex-start; }
.script-paper { width:min(816px,100%); min-height:0; box-sizing:border-box; color:var(--script-paper-text); font-family:"Courier New",Courier,monospace; position:relative; display:flex; flex-direction:column; gap:22px; padding-bottom:24px; }
.script-page { width:100%; height:1056px; flex:0 0 auto; box-sizing:border-box; padding:68px 78px 90px; background:var(--script-paper); color:var(--script-paper-text); border:1px solid var(--script-paper-edge); box-shadow:0 13px 36px rgba(0,0,0,.38); position:relative; }
.script-page-content { height:100%; min-height:0; position:relative; }
.script-page-number { position:absolute; top:31px; right:58px; z-index:3; color:#6b7280; font:700 9pt/1 "Courier New",Courier,monospace; pointer-events:none; user-select:none; }
.script-page-title { margin-bottom:34px; text-align:center; font-size:10px; font-weight:700; color:#6b7280; letter-spacing:.08em; text-transform:uppercase; }
.script-line { position:relative; margin:0 0 9px; border-radius:4px; transition:background .12s ease,outline .12s ease; }
.script-line.is-selected { background:rgba(59,130,246,.07); outline:1px solid rgba(59,130,246,.2); }
.script-line.is-outline-hidden { display:none; }
.script-line textarea { display:block; width:100%; min-height:24px; resize:none; overflow:hidden; border:0; outline:0; padding:2px 4px; background:transparent; color:var(--script-paper-text); font:12pt/1.25 "Courier New",Courier,monospace; box-sizing:border-box; }
.script-line textarea::placeholder { color:#a8a29e; opacity:.6; }
.script-line-type-tag { position:absolute; right:calc(100% + 10px); top:3px; min-width:45px; text-align:right; color:#94a3b8; font:700 7px/1.2 Inter,system-ui,sans-serif; opacity:0; transition:opacity .12s; }
.script-line:hover .script-line-type-tag,.script-line.is-selected .script-line-type-tag { opacity:1; }
.script-comment-marker { position:absolute; left:calc(100% + 9px); top:0; width:24px; height:24px; border:1px solid transparent; border-radius:50%; background:transparent; color:#94a3b8; opacity:0; font:800 9px/1 Inter,system-ui,sans-serif; }
.script-line:hover .script-comment-marker,.script-line.is-selected .script-comment-marker,.script-comment-marker.has-comments { opacity:1; }
.script-comment-marker.has-comments { background:#dbeafe; color:#1d4ed8; border-color:#93c5fd; }
.script-line-scene_heading { margin-top:18px; margin-bottom:9px; }
.script-line-scene_heading textarea { font-weight:700; text-transform:uppercase; }
.script-line-character { width:48%; margin-left:37%; margin-top:12px; margin-bottom:0; }
.script-line-character textarea { text-transform:uppercase; }
.script-line-parenthetical { width:42%; margin-left:28%; margin-bottom:0; }
.script-line-dialogue { width:55%; margin-left:22%; margin-bottom:9px; }
.script-line-transition { width:42%; margin-left:auto; margin-top:12px; }
.script-line-transition textarea { text-align:right; text-transform:uppercase; }
.script-line-shot textarea { font-weight:700; text-transform:uppercase; }
.script-line-text textarea { font-family:Inter,system-ui,sans-serif; font-size:10.5pt; }
.script-line-note { margin:7px 0; background:#fff7d6; border-left:3px solid #eab308; }
.script-line-note textarea { color:#713f12; font-style:italic; font-size:10.5pt; }
.script-line-outline { margin:7px 0; background:#eef2f7; border-left:3px solid #94a3b8; }
.script-line-outline textarea { color:#475569; font:italic 10pt/1.3 Inter,system-ui,sans-serif; }
.script-line-sequence { margin:19px 0 10px; border-top:1px solid #cbd5e1; border-bottom:1px solid #cbd5e1; background:#f8fafc; }
.script-line-sequence textarea { color:#334155; font:bold 10pt/1.3 Inter,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.script-line-new_act,.script-line-end_act { margin:18px 0; text-align:center; }
.script-line-new_act textarea,.script-line-end_act textarea { text-align:center; font-weight:700; text-decoration:underline; text-transform:uppercase; }
.script-line-lyrics { width:55%; margin-left:22%; }
.script-line-lyrics textarea { font-style:italic; text-transform:uppercase; }
.script-scene-number { position:absolute; left:-36px; top:4px; width:26px; text-align:right; font:700 9pt/1 "Courier New",monospace; color:#64748b; }
.script-add-line { display:block; margin:22px auto 0; border:1px dashed #94a3b8; background:transparent; color:#64748b; border-radius:var(--of-radius-control-compact); padding:7px 12px; font:700 9px/1 Inter,system-ui,sans-serif; }
.script-inline-suggestions { display:none; position:absolute; z-index:40; top:100%; left:0; min-width:240px; max-width:380px; max-height:285px; background:#fff; border:1px solid #cbd5e1; border-radius:var(--of-radius-sm); box-shadow:0 12px 30px rgba(15,23,42,.24); overflow-x:hidden; overflow-y:auto; font-family:Inter,system-ui,sans-serif; }
.script-inline-suggestions.is-open { display:flex; flex-direction:column; }
.script-suggestion-heading { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 9px; background:#f8fafc; color:#475569; border-bottom:1px solid #e2e8f0; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.script-suggestion-heading span { display:inline-flex; min-width:18px; height:18px; align-items:center; justify-content:center; padding:0 5px; border-radius:var(--of-radius-pill); background:#e2e8f0; color:#334155; font-size:8px; letter-spacing:0; }
.script-inline-suggestions button { border:0; border-bottom:1px solid #f1f5f9; background:#fff; color:#1f2937; text-align:left; padding:7px 9px; font-size:9px; font-weight:700; flex:0 0 auto; }
.script-inline-suggestions button:last-child { border-bottom:0; }
.script-inline-suggestions button:hover { background:#eff6ff; }
.script-loading { min-height:260px; display:grid; place-items:center; align-content:center; gap:12px; color:#64748b; font-size:11px; }
.script-spinner { width:26px; height:26px; border:3px solid #cbd5e1; border-top-color:#2563eb; border-radius:50%; animation:script-spin .7s linear infinite; }
@keyframes script-spin { to { transform:rotate(360deg); } }

.script-cards-view { min-height:100%; color:var(--script-text); }
.script-cards-view-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 4px 14px; }
.script-cards-view-head>div { display:flex; flex-direction:column; gap:2px; }
.script-cards-view-head b { font-size:15px; }
.script-cards-view-head span { font-size:8px; color:var(--script-muted); }
.script-cards-view-head button,.script-add-card { min-height:32px; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); background:var(--script-panel-2); color:var(--script-text); font-size:9px; font-weight:800; padding:0 10px; }
.script-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; align-items:start; }
.script-card-sequence { grid-column:1/-1; margin-top:5px; padding:8px 10px; border-left:3px solid #3b82f6; background:#1e293b; color:#bfdbfe; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.script-story-card { min-height:150px; display:flex; flex-direction:column; border:1px solid var(--script-border); border-radius:9px; background:var(--script-panel); box-shadow:0 5px 16px rgba(0,0,0,.18); overflow:hidden; }
.script-story-card[draggable="true"] { cursor:grab; }
.script-story-card-head { display:grid; grid-template-columns:25px minmax(0,1fr) auto; gap:6px; align-items:center; padding:7px; border-bottom:1px solid var(--script-border); }
.script-story-card-head>span { width:23px; height:23px; border-radius:6px; display:grid; place-items:center; background:#172554; color:#bfdbfe; font-size:8px; font-weight:900; }
.script-story-card-head input { min-width:0; border:0; background:transparent; color:var(--script-text); outline:none; font-size:9px; font-weight:900; text-transform:uppercase; }
.script-story-card-head button { height:25px; border:1px solid var(--script-border); border-radius:var(--of-radius-control-dense); background:var(--script-panel-2); color:var(--script-muted); font-size:8px; }
.script-story-card-body { flex:1; padding:10px; color:#cbd5e1; font:10px/1.45 Inter,system-ui,sans-serif; }
.script-story-card-foot { display:flex; justify-content:space-between; gap:8px; padding:7px 10px; border-top:1px solid var(--script-border); color:var(--script-muted); font-size:7.5px; }
.script-add-card { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-style:dashed; font-size:24px; color:#93c5fd; background:transparent; }
.script-add-card span { font-size:9px; color:var(--script-muted); }
.script-cards-empty { min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--script-muted); }
.script-cards-empty b { color:var(--script-text); font-size:15px; }
.script-cards-empty span { font-size:9px; }
.script-cards-empty button { min-height:34px; border:1px solid #3b82f6; border-radius:var(--of-radius-sm); background:#2563eb; color:#fff; padding:0 11px; font-size:9px; font-weight:800; }

.script-tool-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:7px; border-bottom:1px solid var(--script-border); position:sticky; top:0; z-index:5; background:var(--script-panel); }
.script-tool-tabs button { height:30px; border:1px solid var(--script-border); background:transparent; color:var(--script-muted); border-radius:var(--of-radius-control-compact); font-size:8px; font-weight:900; }
.script-tool-tabs button.active { background:#1d4ed8; color:#fff; border-color:#3b82f6; }
.script-tool-body { padding:11px; }
.script-tool-caption { color:var(--script-text); font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; }
.script-tool-caption-gap { margin-top:17px; }
.script-tool-row { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:7px; }
.script-tool-row .script-tool-caption { margin:0; }
.script-mini-btn { height:26px; padding:0 8px; border-radius:var(--of-radius-control-dense); border:1px solid var(--script-border); background:var(--script-panel-2); color:var(--script-text); font-size:8px; font-weight:900; }
.script-notes-input { width:100%; min-height:105px; resize:vertical; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); background:var(--script-panel-3); color:var(--script-text); padding:9px; outline:none; font-size:9px; line-height:1.45; }
.script-selected-line-preview { display:flex; flex-direction:column; gap:3px; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); background:var(--script-panel-3); padding:8px; color:var(--script-muted); font-size:8px; line-height:1.35; margin-bottom:7px; }
.script-selected-line-preview span { color:#93c5fd; font-size:7px; font-weight:900; text-transform:uppercase; }
.script-comment-list { display:flex; flex-direction:column; gap:6px; }
.script-comment-card { border:1px solid var(--script-border); border-radius:var(--of-radius-sm); background:#1d2228; padding:8px; }
.script-comment-card.is-resolved { opacity:.56; }
.script-comment-card>div { display:flex; justify-content:space-between; gap:7px; align-items:center; }
.script-comment-card b { font-size:8px; }.script-comment-card small { font-size:7px; color:var(--script-muted); }
.script-comment-card p { margin:6px 0; color:var(--script-text); font-size:9px; line-height:1.4; white-space:pre-wrap; }
.script-comment-card button { border:0; padding:0; background:transparent; color:#93c5fd; font-size:7px; font-weight:800; }
.script-add-comment { margin-top:7px; display:grid; gap:5px; }
.script-add-comment textarea { min-height:58px; resize:vertical; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); background:var(--script-panel-3); color:var(--script-text); padding:8px; font-size:9px; outline:none; }
.script-add-comment button { height:28px; border:1px solid #3b82f6; border-radius:var(--of-radius-control-compact); background:#2563eb; color:#fff; font-size:8px; font-weight:900; }
.script-all-comments { display:flex; flex-direction:column; gap:5px; }
.script-all-comments button { display:flex; flex-direction:column; gap:2px; text-align:left; border:1px solid var(--script-border); border-radius:var(--of-radius-control-compact); background:var(--script-panel-3); color:var(--script-text); padding:7px; }
.script-all-comments b { font-size:8px; }.script-all-comments span { font-size:8px; color:var(--script-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.script-beat-list,.script-draft-list { display:flex; flex-direction:column; gap:7px; }
.script-beat-card { border:1px solid var(--script-border); border-radius:var(--of-radius-sm); padding:7px; background:#1d2228; }
.script-beat-card.is-done { opacity:.58; }
.script-beat-top { display:flex; gap:6px; align-items:center; }
.script-beat-top>input { flex:1; min-width:0; background:transparent; border:0; color:var(--script-text); font-size:8px; font-weight:900; outline:none; }
.script-beat-top label { display:flex; align-items:center; gap:3px; color:var(--script-muted); font-size:7px; }
.script-beat-card textarea { width:100%; min-height:52px; margin-top:5px; resize:vertical; background:var(--script-panel-3); color:var(--script-text); border:1px solid var(--script-border); border-radius:var(--of-radius-control-compact); padding:6px; font-size:8px; outline:none; }
.script-beat-delete { margin-top:4px; border:0; background:transparent; color:#fca5a5; font-size:7px; font-weight:800; }
.script-draft-card { display:flex; align-items:center; justify-content:space-between; gap:7px; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); padding:8px; background:#1d2228; }
.script-draft-card>div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.script-draft-card b { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.script-draft-card small { font-size:7px; color:var(--script-muted); }
.script-draft-card button,.script-export-grid button { border:1px solid var(--script-border); background:var(--script-panel-2); color:var(--script-text); border-radius:var(--of-radius-control-dense); min-height:28px; padding:4px 7px; font-size:7px; font-weight:900; }
.script-export-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.script-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.script-stat-grid>div { min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--script-border); border-radius:var(--of-radius-sm); background:var(--script-panel-3); }
.script-stat-grid b { font-size:18px; color:#bfdbfe; }.script-stat-grid span { color:var(--script-muted); font-size:7px; text-transform:uppercase; font-weight:800; }
.script-report-list { display:flex; flex-direction:column; gap:4px; }
.script-report-list>div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 7px; border-bottom:1px solid var(--script-border); font-size:8px; }
.script-report-list span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.script-report-list b { color:var(--script-muted); font-size:7px; white-space:nowrap; }
.script-empty-small { color:var(--script-muted); border:1px dashed var(--script-border); border-radius:var(--of-radius-sm); padding:10px; font-size:8px; line-height:1.45; text-align:center; }

.script-footer { min-height:28px; display:flex; align-items:center; gap:12px; padding:0 10px; border-top:1px solid var(--script-border); background:#20252b; color:var(--script-muted); font-size:7.5px; font-weight:750; flex:0 0 auto; }
.script-footer span:last-child { margin-left:auto; }
.script-mobile-sheet { position:absolute; z-index:180; inset:84px 0 28px; background:var(--script-panel); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.script-mobile-sheet-head { height:43px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border-bottom:1px solid var(--script-border); flex:0 0 auto; }
.script-mobile-sheet-head b { font-size:11px; }
.script-mobile-sheet-head button { width:30px; height:30px; border:1px solid var(--script-border); border-radius:50%; background:var(--script-panel-2); color:var(--script-text); font-size:18px; }
.script-mobile-widget-body { flex:1; min-height:0; overflow:auto; padding:8px; }
.script-mobile-tool-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:9px; }
.script-mobile-tool-tabs button,.script-mobile-menu-grid button { min-height:35px; border:1px solid var(--script-border); border-radius:var(--of-radius-control-compact); background:var(--script-panel-2); color:var(--script-text); font-size:8px; font-weight:800; }
.script-mobile-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.script-modal-overlay { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.script-modal { width:min(560px,100%); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; border-radius:13px; border:1px solid #4b5563; background:#242a31; color:#f8fafc; box-shadow:0 24px 70px rgba(0,0,0,.52); }
.script-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid #3f4752; }
.script-modal-head>div { display:flex; flex-direction:column; gap:2px; }.script-modal-head b { font-size:15px; }.script-modal-head span { color:#94a3b8; font-size:9px; }
.script-modal-head button { width:32px; height:32px; border-radius:50%; border:1px solid #4b5563; background:#30363f; color:#fff; font-size:18px; }
.script-modal-body { padding:14px 16px; overflow:auto; display:grid; gap:11px; }
.script-modal-body label { display:flex; flex-direction:column; gap:5px; color:#cbd5e1; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.script-modal-body input,.script-modal-body textarea { width:100%; border:1px solid #4b5563; border-radius:var(--of-radius-control-compact); background:#171b20; color:#fff; padding:9px; font-size:11px; outline:none; text-transform:none; letter-spacing:normal; }
.script-modal-body textarea { min-height:86px; resize:vertical; }
.script-modal-actions { display:flex; justify-content:flex-end; gap:7px; padding:11px 16px; border-top:1px solid #3f4752; }
.script-modal-actions button { min-height:32px; padding:0 11px; border:1px solid #4b5563; border-radius:var(--of-radius-control-compact); background:#30363f; color:#fff; font-size:9px; font-weight:900; }
.script-modal-actions button.primary { background:#2563eb; border-color:#3b82f6; }
.script-print-root { display:none; }

@media (max-width:1100px) and (min-width:768px) {
    .script-layout { grid-template-columns:40px 190px minmax(0,1fr) 240px; }
    .script-left-hidden .script-layout { grid-template-columns:40px minmax(0,1fr) 240px; }
    .script-right-hidden .script-layout { grid-template-columns:40px 190px minmax(0,1fr); }
    .script-left-hidden.script-right-hidden .script-layout { grid-template-columns:40px minmax(0,1fr); }
    .script-page { padding-left:64px; padding-right:64px; }
}

@media (max-width:767px) {
    /* Script mobile viewport: keep a definite flex/height chain from the portal shell to the editor.
       This avoids the Script workspace collapsing to 0px on mobile browsers/WebViews. */
    .script-mobile-shell {
        height:100vh !important;
        height:100dvh !important;
        min-height:100vh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;
        display:flex !important;
        flex-direction:column !important;
        overflow:hidden !important;
    }
    .script-mobile-host {
        display:flex !important;
        flex:1 1 auto !important;
        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        overflow:hidden !important;
    }
    .script-workspace.script-mobile-workspace {
        position:relative;
        display:flex !important;
        flex:1 1 auto !important;
        flex-direction:column !important;
        width:100% !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        max-height:100% !important;
        overflow:hidden !important;
        visibility:visible !important;
        opacity:1 !important;
    }
    .script-workspace.script-mobile-workspace.script-maximized {
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100vh !important;
        height:100dvh !important;
        max-height:100dvh !important;
    }
    .script-workspace { position:relative; }
    .script-menubar { min-height:42px; padding:0 8px; }
    .script-doc-title { min-width:0; flex:1; max-width:none; }
    .script-doc-title b { font-size:10px; }.script-save-state { font-size:7px; }
    .script-mobile-menu-button { border:1px solid var(--script-border); background:var(--script-panel-2); }
    .script-menubar.is-mobile { gap:6px; }
    .script-menubar.is-mobile .script-doc-title { min-width:0; margin-right:0; }
    .script-menubar.is-mobile .script-header-action { width:34px; min-width:34px; height:34px; padding:0; }
    .script-menubar.is-mobile .script-mobile-menu-button { height:34px; min-width:58px; padding:0 8px; font-size:9px; }

    /* Mobile Script top actions: reviewers get Retake / Approve / Save together.
       Scene navigation and Read stay anchored at the bottom for thumb access. */
    .script-toolbar.is-mobile { min-height:56px; padding:6px; display:block; }
    .script-mobile-quickbar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; width:100%; }
    .script-mobile-quickbar.is-save-only { grid-template-columns:1fr; }
    .script-toolbar.is-mobile .script-mobile-quick-action { width:100%; min-width:0; height:44px; padding:0 2px; border-radius:var(--of-radius-control-compact); font-size:9px; line-height:1.05; white-space:nowrap; }
    .script-toolbar.is-mobile .script-mobile-quick-action.script-review-retake { background:#991b1b; border-color:#ef4444!important; color:#fff; }
    .script-toolbar.is-mobile .script-mobile-quick-action.script-review-approve { background:#15803d; border-color:#22c55e!important; color:#fff; }
    .script-toolbar.is-mobile .script-mobile-quick-action.script-save-btn { background:#2563eb; border-color:#3b82f6; color:#fff; }
    .script-toolbar.is-mobile .script-mobile-conflict-btn { width:100%; height:44px; margin-top:6px; }
    /* Bottom mobile bar keeps the high-frequency reading and scene navigation actions.
       The compact stats/status footer is intentionally omitted on mobile to preserve canvas height. */
    .script-mobile-bottom-actions { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; width:100%; padding:6px 7px; border-top:1px solid var(--script-border); background:var(--script-panel); box-shadow:0 -6px 18px rgba(0,0,0,.14); z-index:24; }
    .script-mobile-bottom-actions .script-mobile-bottom-action { width:100%; min-width:0; height:42px; padding:0 8px; border-radius:var(--of-radius-control-compact); border:1px solid var(--script-border); background:var(--script-panel-2); color:var(--script-text); font-size:10px; font-weight:850; touch-action:manipulation; }
    .script-mobile-bottom-actions .script-mobile-bottom-read { background:#1f2937; border-color:#4b5563; color:#f8fafc; }
    .script-mobile-bottom-actions .script-mobile-bottom-read.active { background:#14532d!important; border-color:#22c55e!important; color:#dcfce7!important; }
    .script-layout,.script-left-hidden .script-layout,.script-right-hidden .script-layout,.script-left-hidden.script-right-hidden .script-layout {
        display:flex !important;
        flex:1 1 auto !important;
        flex-direction:row !important;
        width:100% !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        overflow:hidden !important;
    }
    .script-layout { position:relative; }
    .script-mobile-type-rail {
        flex:0 0 56px;
        width:56px;
        min-width:56px;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        padding:6px 5px 58px;
        border-right:1px solid var(--script-border);
        background:linear-gradient(180deg,var(--script-panel) 0%,var(--script-panel-3) 100%);
        scrollbar-width:none;
        z-index:8;
        transition:flex-basis .18s ease,width .18s ease,min-width .18s ease,padding .18s ease,border-color .18s ease;
    }
    .script-mobile-type-rail.is-hidden {
        flex-basis:0;
        width:0;
        min-width:0;
        padding-left:0;
        padding-right:0;
        border-right-color:transparent;
        overflow:hidden;
    }
    .script-mobile-type-rail::-webkit-scrollbar { display:none; }
    .script-mobile-type-rail-toggle {
        position:absolute;
        left:7px;
        bottom:7px;
        z-index:18;
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;
        display:grid;
        place-items:center;
        padding:0;
        border:1px solid var(--script-border);
        border-radius:var(--of-radius-lg);
        background:var(--script-panel-2);
        color:var(--script-text);
        box-shadow:0 4px 12px rgba(0,0,0,.24);
        touch-action:manipulation;
    }
    .script-mobile-type-rail-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
    .script-mobile-type-rail-toggle.is-collapsed { background:var(--script-panel); }
    .script-mobile-type-rail-toggle.is-collapsed svg { transform:rotate(180deg); }
    .script-mobile-type-group { display:flex; flex-direction:column; align-items:center; gap:5px; }
    .script-mobile-type-group.is-secondary { margin-top:7px; padding-top:7px; border-top:1px solid var(--script-border); }
    .script-mobile-type-action {
        position:relative;
        width:44px;
        height:44px;
        min-width:44px;
        min-height:44px;
        display:grid;
        place-items:center;
        padding:0;
        border:1px solid var(--script-border);
        border-radius:var(--of-radius-md);
        background:var(--script-panel-2);
        color:var(--script-text);
        touch-action:manipulation;
    }
    .script-mobile-type-action .script-type-icon { width:21px; height:21px; }
    .script-mobile-type-action.active { border-color:#3b82f6; background:#172554; color:#dbeafe; box-shadow:0 0 0 1px rgba(59,130,246,.22); }
    .script-mobile-type-action:disabled { opacity:.45; }
    .script-editor-scroll {
        display:block !important;
        flex:1 1 0 !important;
        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        overflow:auto !important;
        -webkit-overflow-scrolling:touch;
        padding:9px 7px 22px;
    }
    .script-paper-wrap { width:100%; min-width:0; min-height:100%; }
    .script-editor-scroll.is-cards { padding:8px; }
    .script-paper { width:100%; min-height:0; padding:0 0 14px; gap:14px; }
    .script-page { width:100%; height:760px; padding:40px 28px 65px 34px; box-shadow:0 8px 24px rgba(0,0,0,.28); }
    .script-page-number { top:18px; right:20px; font-size:8pt; }
    .script-page-title { margin-bottom:22px; font-size:8px; }
    .script-line textarea { font-size:10.5pt; }
    .script-line-type-tag { display:none; }
    .script-comment-marker { left:auto; right:-25px; opacity:.45; }
    .script-comment-marker.has-comments { opacity:1; }
    .script-line-character { width:56%; margin-left:32%; }
    .script-line-parenthetical { width:52%; margin-left:24%; }
    .script-line-dialogue,.script-line-lyrics { width:64%; margin-left:17%; }
    .script-line-transition { width:52%; }
    .script-scene-number { left:-26px; width:18px; font-size:7.5pt; }
    .script-inline-suggestions { left:-10px; right:0; min-width:0; max-width:none; max-height:240px; }
    .script-cards-view-head { padding:3px 2px 9px; }.script-cards-view-head b { font-size:12px; }.script-cards-view-head span { display:none; }
    .script-cards-grid { grid-template-columns:1fr; gap:7px; }
    .script-story-card { min-height:118px; }
    .script-add-card { min-height:92px; }
    .script-card-sequence { margin-top:2px; }
    .script-mobile-sheet { inset:42px 0 27px; }
    /* Scene navigator is a true mobile full-screen surface so the editor chrome and bottom actions do not compete for space. */
    .script-mobile-sheet.is-scenes {
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100vh !important;
        height:100dvh !important;
        max-width:none !important;
        max-height:100dvh !important;
        z-index:3200 !important;
    }
    .script-mobile-sheet-head { height:50px; padding:0 12px; }
    .script-mobile-sheet-head b { font-size:13px; }
    .script-mobile-sheet-head button { width:36px; height:36px; font-size:20px; }
    .script-mobile-widget-body { padding:10px; }
    .script-mobile-tool-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
    .script-mobile-tool-tabs button,.script-mobile-menu-grid button { min-height:48px; padding:7px 9px; font-size:10px; line-height:1.2; }
    .script-mobile-tool-tabs button.active,.script-mobile-menu-grid button.active { background:#2563eb; border-color:#3b82f6; color:#fff; }
    .script-mobile-tool-tabs .script-mobile-tool-wide { grid-column:1 / -1; }
    .script-mobile-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .script-mobile-menu-grid .script-mobile-menu-save { grid-column:1 / -1; background:#2563eb; border-color:#3b82f6; color:#fff; }
    .script-mobile-sheet .script-type-group { grid-template-columns:1fr 1fr; justify-content:stretch; gap:8px; }
    .script-mobile-sheet .script-type-button { width:100%; height:48px; min-height:48px; display:flex; justify-content:flex-start; gap:8px; padding:0 9px; text-align:left; transform:none!important; }
    .script-mobile-sheet .script-type-icon { width:21px; height:21px; flex:0 0 21px; }
    .script-mobile-sheet .script-type-label { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:nowrap; }
    .script-mobile-sheet .script-type-tooltip { display:none!important; }
    .script-mobile-widget-body .script-tool-body { padding:4px; }
    .script-modal-overlay { padding:0; align-items:stretch; }
    .script-modal { width:100%; max-height:none; height:100%; border-radius:0; border:0; }
}

@media print {
    body>*:not(#script-print-root) { display:none!important; }
    #script-print-root { display:block!important; color:#000; background:#fff; font-family:"Courier New",Courier,monospace; }
    .script-print-title { height:95vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; page-break-after:always; padding:1in; box-sizing:border-box; }
    .script-print-title h1 { font-size:18pt; text-transform:uppercase; margin:0 0 2in; }
    .script-print-title p,.script-print-title pre { font:12pt/1.4 "Courier New",monospace; white-space:pre-wrap; }
    .script-print-pages { width:6.8in; margin:0 auto; font:12pt/1.25 "Courier New",monospace; }
    .script-print-line { position:relative; white-space:pre-wrap; margin:0 0 9pt; min-height:12pt; }
    .script-print-scene_heading { margin-top:18pt; font-weight:bold; text-transform:uppercase; }.script-print-scene_heading>span { position:absolute; left:-.45in; }
    .script-print-character { width:45%; margin-left:38%; margin-bottom:0; text-transform:uppercase; }
    .script-print-parenthetical { width:38%; margin-left:31%; margin-bottom:0; }
    .script-print-dialogue,.script-print-lyrics { width:52%; margin-left:24%; }
    .script-print-transition { width:40%; margin-left:auto; text-align:right; text-transform:uppercase; }
    .script-print-shot { font-weight:bold; text-transform:uppercase; }
    .script-print-new_act,.script-print-end_act { text-align:center; font-weight:bold; text-decoration:underline; }
    .script-print-note,.script-print-outline,.script-print-sequence { display:none; }
    @page { size:Letter; margin:.75in .8in .8in 1.1in; }
}

/* Script desktop scene heading side rail: keep the Scene type label and scene number in separate slots. */
@media (min-width: 768px) {
    .script-line-scene_heading .script-line-type-tag {
        right: calc(100% + 44px);
        min-width: 46px;
    }
    .script-line-scene_heading .script-scene-number {
        left: -31px;
        width: 22px;
        text-align: center;
    }
}

/* Script desktop Line Types: narrow vertical tool rail without shrinking other left widgets. */
@media (min-width: 768px) {
    .script-workspace:not(.script-focus-mode):not(.script-left-hidden):has(.script-line-types-widget) .script-layout {
        grid-template-columns: 44px 76px minmax(0,1fr) 290px;
    }
    .script-workspace.script-right-hidden:not(.script-focus-mode):not(.script-left-hidden):has(.script-line-types-widget) .script-layout {
        grid-template-columns: 44px 76px minmax(0,1fr);
    }
    .script-workspace:not(.script-focus-mode):has(.script-line-types-widget) .script-left-panel {
        overflow: visible;
    }
    .script-workspace:not(.script-focus-mode):has(.script-line-types-widget) .script-panel-heading {
        justify-content: center;
        padding: 0 4px;
        font-size: 8px;
        letter-spacing: .04em;
        white-space: nowrap;
    }
    .script-workspace:not(.script-focus-mode):has(.script-line-types-widget) .script-widget-help {
        display: none;
    }
    .script-workspace:not(.script-focus-mode):has(.script-line-types-widget) .script-type-group {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* Script project container -> multiple script assignments / versions */
.script-project-dashboard{padding:16px 18px 32px;min-height:100%;background:#383838;color:#f8fafc}
.script-add-assignment{width:100%;min-height:48px;border:1px dashed #64748b;border-radius:var(--of-radius-md);background:#2d2d2d;color:#e2e8f0;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;transition:.16s ease}
.script-add-assignment:hover{border-color:#60a5fa;background:#323b49;color:#fff}.script-add-assignment span{color:#60a5fa;font-size:20px}
.script-assignment-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.script-list-empty{padding:44px 20px;text-align:center;color:#94a3b8;border:1px dashed #4b5563;border-radius:var(--of-radius-lg);background:#303030}.script-list-empty.is-error{color:#fca5a5}
.script-assignment-card{border:1px solid #52525b;border-radius:var(--of-radius-lg);background:#444;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.script-assignment-main{display:grid;grid-template-columns:78px minmax(180px,1fr) minmax(180px,260px) auto;gap:14px;align-items:center;padding:12px}
.script-assignment-thumb{width:68px;height:68px;border-radius:9px;overflow:hidden;border:1px solid #6b7280;background:#18181b;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#cbd5e1}.script-assignment-thumb img{width:100%;height:100%;object-fit:cover}
.script-assignment-identity{min-width:0}.script-assignment-name{font-size:15px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.script-assignment-sub{font-size:11px;color:#aeb8c6;margin-top:5px;text-transform:capitalize}
.script-assignment-writer{min-width:0}.script-item-writer{height:36px;border:1px solid #5b6470;border-radius:var(--of-radius-sm);background:#292d33;display:flex;align-items:center;gap:8px;padding:0 11px;color:#e5e7eb;font-size:12px}.script-writer-dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
.script-assignment-summary{cursor:pointer;transition:background .16s ease;outline:none}.script-assignment-summary:hover{background:rgba(255,255,255,.018)}.script-assignment-summary:focus-visible{box-shadow:inset 0 0 0 2px #3b82f6}.script-assignment-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}.script-assignment-action{height:34px;padding:0 11px;border:1px solid #586273;border-radius:var(--of-radius-control-compact);background:#262c33;color:#e2e8f0;font-size:10px;font-weight:800;transition:.16s ease}.script-assignment-action:hover:not(:disabled){background:#323a45;border-color:#708096;color:#fff}.script-assignment-action:disabled{opacity:.38;cursor:not-allowed}.script-input-action{border-color:#3f5d82;color:#bfdbfe}.script-download-action{border-color:#166534;color:#86efac}.script-view-action{border-color:#7c3aed;background:#4c1d95;color:#fff}.script-view-action:hover:not(:disabled){background:#6d28d9;border-color:#8b5cf6}.script-assignment-expand{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid #586273;background:#262c33;color:#cbd5e1;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:.18s ease}.script-assignment-expand.is-expanded{transform:rotate(180deg);background:#303946;color:#fff}.script-assignment-card.is-collapsed .script-assignment-summary{border-radius:var(--of-radius-lg)}.script-assignment-card.is-expanded .script-assignment-summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.script-item-writer-select{width:100%;height:36px;border:1px solid #5b6470;border-radius:var(--of-radius-sm);background:#292d33;color:#fff;padding:0 10px;font-size:12px;outline:none}.script-item-writer-select:focus{border-color:#3b82f6}
.script-assignment-versions{border-top:1px solid #52525b;background:#2e2e2e;padding:9px 12px}
.script-version-list{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}.script-version-row{min-width:170px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #4b5563;border-radius:var(--of-radius-sm);background:#252a30;padding:7px 8px}.script-version-meta{display:flex;flex-direction:column;min-width:0}.script-version-meta b{font-size:12px;color:#fff}.script-version-meta span{font-size:9px;color:#94a3b8;margin-top:2px}.script-version-open{height:28px;padding:0 10px;border-radius:var(--of-radius-control-dense);border:1px solid #7c3aed;background:#6d28d9;color:#fff;font-size:10px;font-weight:800}.script-version-open:hover{background:#7c3aed}.script-version-actions{display:flex;align-items:center;gap:6px}.script-version-delete{width:28px;height:28px;border-radius:var(--of-radius-control-dense);border:1px solid #7f1d1d;background:#3b1518;color:#fecaca;font-size:18px;line-height:1;font-weight:900;display:inline-flex;align-items:center;justify-content:center;transition:.16s ease}.script-version-delete:hover{background:#7f1d1d;border-color:#ef4444;color:#fff}.script-version-add{min-width:128px;min-height:46px;padding:7px 13px;border:1px dashed #3b82f6;border-radius:var(--of-radius-sm);background:#1c2a3f;color:#bfdbfe;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:800;transition:.16s ease}.script-version-add span{font-size:18px;line-height:1;color:#60a5fa}.script-version-add:hover{background:#233956;border-color:#60a5fa;color:#fff}.script-version-empty{font-size:11px;color:#94a3b8}
.script-item-modal-backdrop{position:fixed;inset:0;z-index:10080;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:18px}.script-item-modal{position:relative;width:min(420px,100%);border:1px solid #5b6470;border-radius:var(--of-radius-xl);background:#262a30;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.42);color:#fff}.script-item-modal h2{margin:0 0 18px;text-align:center;font-size:20px}.script-item-modal-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid #596273;background:#313742;color:#fff;font-size:20px}.script-item-modal label:not(.script-item-thumb-picker):not(.script-item-input-picker){display:block;font-size:11px;font-weight:800;color:#aeb8c6;text-transform:uppercase;letter-spacing:.06em;margin:13px 0}.script-item-modal input[type=text],.script-item-modal input[type=number],.script-item-modal select{display:block;width:100%;height:42px;margin-top:7px;border:1px solid #596273;border-radius:var(--of-radius-sm);background:#171b20;color:#fff;padding:0 11px;font-size:13px;text-transform:none;letter-spacing:normal}.script-item-thumb-picker{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;color:#aeb8c6;font-size:11px}.script-item-thumb-picker>div{width:82px;height:82px;border:1px dashed #748094;border-radius:var(--of-radius-lg);background:#171b20;display:flex;align-items:center;justify-content:center;overflow:hidden}.script-item-thumb-picker img{width:100%;height:100%;object-fit:cover}.script-item-thumb-picker span{font-size:26px;color:#60a5fa}.script-item-create{width:100%;height:44px;margin-top:10px;border:0;border-radius:var(--of-radius-sm);background:#2563eb;color:white;font-weight:800}.script-item-create:disabled{opacity:.55}

@media(max-width:767px){.script-project-dashboard{padding:10px 9px 90px}.script-add-assignment{min-height:48px}.script-assignment-card{border-radius:var(--of-radius-xl)}.script-assignment-main{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:11px}.script-assignment-thumb{width:56px;height:56px;grid-row:1/4}.script-assignment-writer{grid-column:2}.script-assignment-actions{grid-column:2;justify-content:flex-start;gap:6px;flex-wrap:wrap}.script-assignment-action{height:32px;padding:0 9px;font-size:9px}.script-assignment-expand{width:32px;height:32px;flex-basis:32px}.script-assignment-versions{padding:9px}.script-version-list{display:flex;flex-direction:column}.script-version-row,.script-version-add{width:100%;min-width:0}.script-item-modal-backdrop{align-items:stretch;padding:0}.script-item-modal{width:100%;max-width:none;border-radius:0;border:0;padding:24px 18px;overflow-y:auto}.script-item-modal h2{font-size:22px}}

.script-work-row{display:flex;align-items:center;gap:10px;padding:0 12px 10px}.script-work-toggle{width:32px;height:32px;flex:0 0 32px;border-radius:var(--of-radius-sm);border:1px solid #4b5563;background:#252a30;color:#4ade80;display:flex;align-items:center;justify-content:center;transition:.18s ease}.script-work-toggle:hover{background:#303740;border-color:#64748b}.script-work-toggle.is-running{color:#facc15}.script-work-toggle svg{width:15px;height:15px}.script-work-progress{min-width:0;flex:1}.script-work-progress-labels{display:flex;justify-content:space-between;gap:12px;color:#aeb8c6;font-size:10px;line-height:1.1;margin-bottom:5px;font-weight:700}.script-work-progress-labels .is-overdue{color:#f87171}.script-work-track{height:7px;border-radius:var(--of-radius-pill);overflow:hidden;border:1px solid #4b5563;background:#20242a}.script-work-fill{height:100%;min-width:0;border-radius:inherit;background:#3b82f6;transition:width .35s ease}.script-work-fill.is-overdue{background:#ef4444}.script-work-status{flex:0 0 auto;min-width:52px;text-align:center;padding:4px 7px;border-radius:var(--of-radius-pill);border:1px solid #52525b;background:#292d33;color:#cbd5e1;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.script-work-status.is-running{border-color:#166534;background:#052e16;color:#86efac}.script-work-status.is-retake{border-color:#991b1b;background:#450a0a;color:#fca5a5}
@media(max-width:767px){.script-work-row{padding:0 10px 10px;gap:8px}.script-work-toggle{width:34px;height:34px;flex-basis:34px}.script-work-status{min-width:48px}.script-work-progress-labels{font-size:9px}}

/* Script assignment Mandays + input/reference files */
.script-item-input-section{margin:14px 0 4px}.script-item-input-label{font-size:11px;font-weight:800;color:#aeb8c6;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}.script-item-input-picker{min-height:44px;border:1px dashed #64748b;border-radius:var(--of-radius-control);background:#171b20;color:#dbeafe;display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 12px;cursor:pointer;font-size:12px;font-weight:700;text-transform:none;letter-spacing:normal}.script-item-input-picker:hover{border-color:#60a5fa;background:#1d2633}.script-item-input-icon{font-size:19px;color:#60a5fa;line-height:1}.script-item-input-list{margin-top:7px;display:flex;flex-direction:column;gap:5px;color:#94a3b8;font-size:10px}.script-item-input-file{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #454d59;border-radius:7px;background:#20242a;padding:7px 9px;min-width:0}.script-item-input-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e2e8f0}.script-item-input-file small{flex:none;color:#94a3b8}.script-item-input-button{margin-top:7px;height:26px;padding:0 9px;border:1px solid #3b82f6;border-radius:var(--of-radius-control-dense);background:#172b49;color:#bfdbfe;font-size:10px;font-weight:800}.script-item-input-button:hover{background:#1d4f91;color:#fff}.script-input-download-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}.script-input-download-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #4b5563;border-radius:9px;background:#1b2026;padding:10px}.script-input-download-row>div{min-width:0;display:flex;flex-direction:column;gap:3px}.script-input-download-row b{font-size:12px;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.script-input-download-row small{font-size:9px;color:#94a3b8}.script-input-download-row button{height:31px;padding:0 10px;border:1px solid #3b82f6;border-radius:var(--of-radius-control-dense);background:#1d4ed8;color:#fff;font-size:10px;font-weight:800}
.script-version-badge{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--of-radius-pill);border:1px solid #475569;background:#18202c;color:#93c5fd;font-size:9px;font-weight:800;margin-left:6px}

/* Script assignment cards — Asset-style layout */
.script-assignment-card.is-desktop{
    border:1px solid #59616c;border-radius:var(--of-radius-sm);background:#3a3a3a;overflow:visible;box-shadow:0 4px 12px rgba(0,0,0,.18)
}
.script-desktop-assignment-row{
    display:grid;grid-template-columns:96px minmax(170px,205px) minmax(0,1fr) 36px;min-height:118px;background:#444;border-radius:var(--of-radius-sm);cursor:pointer;transition:background .16s ease;overflow:visible
}
.script-desktop-assignment-row:hover{background:#494949}
.script-assignment-card.is-desktop.is-expanded .script-desktop-assignment-row{border-bottom-left-radius:0;border-bottom-right-radius:0}
.script-assignment-card.is-desktop .script-assignment-thumb{
    width:96px;height:auto;min-height:118px;align-self:stretch;border:0;border-right:1px solid #59616c;border-radius:8px 0 0 8px;background:#050505
}
.script-assignment-card.is-desktop.is-expanded .script-assignment-thumb{border-bottom-left-radius:0}
.script-assignment-card.is-desktop .script-assignment-identity{padding:16px 14px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.script-assignment-card.is-desktop .script-assignment-name{font-size:15px;line-height:1.2;font-weight:800;letter-spacing:.01em;color:#fff;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.script-assignment-category{margin-top:10px}
.script-type-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--of-radius-pill);border:1px solid #3568a8;background:#18365e;color:#a9d0ff;font-size:9px;font-weight:900;letter-spacing:.04em}
.script-identity-mandays{display:inline-flex;align-items:center;gap:4px;margin-top:9px;padding:3px 7px;border-radius:4px;border:1px solid #315f9f;background:#17345d;color:#9dc8ff;font-size:9px;font-weight:800;white-space:nowrap}
.script-mandays-clock{font-size:12px;line-height:1}
.script-stage-workspace-shell{min-width:0;padding:9px 8px 9px 0;display:flex;flex-direction:column;justify-content:center;overflow:visible}
.script-stage-track{height:36px;display:flex;align-items:flex-end;overflow:visible;padding-left:8px}
.script-stage-badge{position:relative;min-width:72px;height:39px;padding:6px 10px;border:1px solid #6a7482;border-radius:7px 7px 5px 5px;background:#30363d;color:#fff;display:grid;grid-template-columns:auto 8px;grid-template-rows:auto auto;column-gap:6px;align-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2);z-index:2}
.script-stage-badge::after{content:"";position:absolute;left:22px;bottom:-7px;width:12px;height:12px;background:#30363d;border-right:1px solid #6a7482;border-bottom:1px solid #6a7482;transform:rotate(45deg)}
.script-stage-badge b{font-size:10px;line-height:1;text-transform:uppercase;grid-column:1;grid-row:1}
.script-stage-badge small{font-size:7px;line-height:1.1;color:#9aa7b6;text-transform:uppercase;grid-column:1/3;grid-row:2;margin-top:3px;white-space:nowrap}
.script-stage-dot{width:7px;height:7px;border-radius:50%;background:#9ca3af;grid-column:2;grid-row:1;align-self:center}
.script-stage-badge.is-running{border-color:#d6a61e}.script-stage-badge.is-running .script-stage-dot{background:#facc15}
.script-stage-badge.is-retake{border-color:#ef4444;box-shadow:inset 0 3px 0 #ef4444,0 1px 4px rgba(0,0,0,.2)}.script-stage-badge.is-retake::after{border-right-color:#ef4444;border-bottom-color:#ef4444}.script-stage-badge.is-retake .script-stage-dot{background:#ef4444}
.script-stage-panel{border:1px solid #59616c;border-radius:7px;background:#292929;overflow:visible;min-width:0}
.script-stage-panel.is-running{border-color:#8a7224}.script-stage-panel.is-retake{border-color:#ef4444}
.script-stage-panel .script-work-row{padding:8px 10px 7px;gap:9px;border-bottom:1px solid #434b55}
.script-stage-panel .script-work-toggle{width:28px;height:28px;flex-basis:28px;border-radius:var(--of-radius-control-dense)}
.script-stage-panel .script-work-toggle svg{width:14px;height:14px}
.script-stage-panel .script-work-track{height:6px}
.script-stage-panel .script-work-status{min-width:58px;padding:4px 7px}
.script-stage-bottom-row{display:flex;align-items:center;gap:10px;padding:8px 10px;min-width:0}
.script-stage-writer{min-width:180px;max-width:240px;flex:0 1 240px}
.script-writer-picker{height:36px;border:1px solid #586273;border-radius:var(--of-radius-sm);background:#242a31;display:flex;align-items:center;gap:7px;padding:0 10px;min-width:0;color:#e5e7eb;position:relative}
.script-writer-avatar{width:22px;height:22px;flex:0 0 22px;border-radius:50%;overflow:hidden;border:1px solid #64748b;background:#374151;display:flex;align-items:center;justify-content:center;color:#e2e8f0;font-size:9px;font-weight:800}
.script-writer-avatar img{width:100%;height:100%;object-fit:cover}
.script-writer-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#22c55e}.script-writer-dot.is-unassigned{background:#94a3b8}
.script-writer-name{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:800}
.script-writer-chevron{color:#cbd5e1;font-size:14px}
.script-writer-picker .script-item-writer-select{height:34px;min-width:0;flex:1;border:0!important;background:transparent!important;color:#e5e7eb!important;padding:0 18px 0 0!important;font-size:10px;font-weight:800;outline:none;box-shadow:none!important}
.script-assignment-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}
.script-assignment-action{height:32px;padding:0 10px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:9px;font-weight:800}
.script-action-icon{display:flex;align-items:center;justify-content:center}.script-action-icon svg{width:13px;height:13px}
.script-input-action{background:#252b32;border-color:#536579;color:#cbd5e1}
.script-download-action{background:#25302a;border-color:#315b42;color:#7ee2a8}
.script-view-action{background:#7e22ce;border-color:#9333ea;color:#fff}
.script-desktop-arrow{display:flex;align-items:center;justify-content:center;padding-right:8px}
.script-desktop-arrow .script-assignment-expand{width:26px;height:26px;flex-basis:26px;background:#22272d;border-color:#59616c;color:#aeb8c6}
.script-desktop-arrow .script-assignment-expand svg{width:14px;height:14px}
.script-assignment-card.is-desktop .script-assignment-versions{margin-left:301px;border-top:1px solid #525a64;background:#383838;padding:10px 46px 12px 12px;box-shadow:inset 0 8px 14px rgba(0,0,0,.08)}

@media(max-width:767px){
    .script-assignment-card.is-mobile{border:1px solid #59616c;border-radius:var(--of-radius-2xl);background:#3a3a3a;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.22);margin-bottom:12px}
    .script-mobile-assignment-header{display:grid;grid-template-columns:64px minmax(0,1fr) 36px;gap:12px;align-items:center;padding:12px;background:#444;cursor:pointer}
    .script-assignment-card.is-mobile .script-assignment-thumb{width:64px;height:64px;border-radius:9px;border:1px solid #66717f;background:#050505;grid-row:auto}
    .script-assignment-card.is-mobile .script-assignment-identity{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
    .script-mobile-name-line{display:flex;align-items:center;gap:7px;min-width:0}.script-mobile-name-line .script-assignment-name{font-size:15px;font-weight:800;color:#fff;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .script-mobile-name-line .script-type-badge{height:18px;padding:0 7px;font-size:8px;flex:0 0 auto}
    .script-assignment-card.is-mobile .script-identity-mandays{margin-top:8px;width:max-content;max-width:100%}
    .script-mobile-arrow{display:flex;align-items:center;justify-content:center}.script-mobile-arrow .script-assignment-expand{width:30px;height:30px;flex-basis:30px;background:#252a30;border-color:#5c6570;color:#cbd5e1}
    .script-mobile-arrow .script-assignment-expand svg{width:15px;height:15px}
    .script-mobile-assignment-body{padding:10px 12px 12px;background:#383838;border-top:1px solid rgba(255,255,255,.025)}
    .script-mobile-assignment-body .script-stage-track{height:46px;padding-left:2px;overflow:visible}
    .script-mobile-assignment-body .script-stage-badge{height:42px;min-width:70px}
    .script-mobile-assignment-body .script-stage-panel{border-radius:11px;background:#303030}
    .script-mobile-assignment-body .script-stage-panel .script-work-row{padding:10px 10px 9px;gap:8px}
    .script-mobile-assignment-body .script-stage-panel .script-work-toggle{width:34px;height:34px;flex-basis:34px}
    .script-mobile-assignment-body .script-stage-panel .script-work-status{min-width:54px}
    .script-mobile-assignment-body .script-stage-writer{min-width:0;max-width:none;width:auto;padding:10px;border-top:1px solid #49515b}
    .script-mobile-assignment-body .script-writer-picker{width:100%;height:40px;background:#252a30}
    .script-mobile-assignment-body .script-assignment-actions{margin:0;padding:10px;border-top:1px solid #49515b;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
    .script-mobile-assignment-body .script-assignment-action{height:40px;width:100%;padding:0 8px;font-size:10px;border-radius:5px}
    .script-mobile-assignment-body .script-input-action{background:#2d3238;color:#dbeafe}
    .script-mobile-assignment-body .script-download-action{background:#2a332e;color:#86efac}
    .script-mobile-assignment-body .script-view-action{background:#7e22ce;color:#fff}
    .script-assignment-card.is-mobile .script-assignment-versions{margin:0;padding:10px;background:#2a2a2a;border-top:1px solid #515862}

    /* Script mobile cards intentionally reuse the Asset mobile assignment geometry. */
    .script-mobile-assignment-header.mobile-assignment-header{display:block}
    .script-assignment-card.is-mobile .script-assignment-thumb.mobile-assignment-thumb{width:56px!important;height:56px!important;border-radius:var(--of-radius-lg)!important;grid-row:auto}
    .script-assignment-card.is-mobile .assignment-identity-stack-mobile{min-width:0;padding:2px 0 1px}
    .script-assignment-card.is-mobile .mobile-assignment-category-inline{margin-top:0;align-self:center}
    .script-assignment-card.is-mobile .script-type-badge{height:auto;min-height:16px;padding:2px 7px;font-size:8px}
    .script-mobile-assignment-body.mobile-assignment-body{padding:10px!important;gap:7px!important;background:#383838;border-top:1px solid rgba(255,255,255,.025)}
    .script-mobile-assignment-body .assignment-stage-track-wrap,.script-mobile-assignment-body .assignment-stage-track{padding-bottom:0!important}
    .script-mobile-assignment-body .assignment-stage-selected::after{display:none!important;content:none!important}
    .script-selected-stage-panel.is-mobile .script-mobile-writer-control{width:100%;min-width:0}
    .script-selected-stage-panel.is-mobile .script-mobile-writer-control .assignment-stage-assignee-picker{width:100%;max-width:none}
    .script-selected-stage-panel.is-mobile .assignment-selected-stage-actions-body{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
    .script-selected-stage-panel.is-mobile .script-assignment-action{width:100%!important;min-height:36px;height:36px;padding:0 6px;font-size:9px;border-radius:4px;margin:0!important}
}

/* Script desktop assignment row: reuse the real Asset assignment geometry. */
@media (min-width: 768px) {
    .script-assignment-card.is-desktop {
        background:#3a3a3a;
        border-color:#4b5563;
        border-radius:.5rem;
        box-shadow:0 4px 12px rgba(0,0,0,.18);
    }
    .script-assignment-card.is-desktop .assignment-desktop-row { min-height:154px; }
    .script-assignment-card.is-desktop .assignment-desktop-thumb { min-height:154px; }
    .script-assignment-card.is-desktop .script-type-badge { margin:0; }
    .script-assignment-card.is-desktop .script-desktop-writer-control { width:100%; min-width:0; }
    .script-assignment-card.is-desktop .script-desktop-writer-control .script-writer-picker {
        width:100%; height:36px; min-width:0; gap:7px; padding:0 9px 0 7px;
        border:1px solid #59616c; border-radius:var(--of-radius-control); background:#202224;
        box-shadow:var(--of-shadow-dark-top-highlight-subtle);
    }
    .script-assignment-card.is-desktop .script-desktop-writer-control .script-writer-avatar {
        width:24px; height:24px; flex-basis:24px;
    }
    .script-assignment-card.is-desktop .script-desktop-writer-control .script-writer-dot { width:10px; height:10px; flex-basis:10px; }
    .script-assignment-card.is-desktop .script-desktop-writer-control .script-item-writer-select {
        height:34px; font-size:11px; font-weight:750;
    }
    .script-assignment-card.is-desktop .script-assignment-action {
        height:30px; padding:0 10px; border-radius:4px; font-size:10px;
    }
    .script-assignment-card.is-desktop .script-desktop-version-shell { border-radius:0 0 .5rem .5rem; }
}

/* Script version review decisions — Approve / Retake */
.script-review-actions{display:flex;align-items:center;gap:6px;margin-left:4px}
.script-review-actions button{height:32px;padding:0 13px;border-radius:5px;border:1px solid transparent;font-size:11px;font-weight:800;transition:.15s ease}
.script-review-approve{background:#15803d;border-color:#22c55e!important;color:#fff}.script-review-approve:hover{background:#166534}
.script-review-retake{background:#991b1b;border-color:#ef4444!important;color:#fff}.script-review-retake:hover{background:#7f1d1d}
.script-review-banner{display:flex;align-items:center;gap:10px;padding:7px 14px;border-bottom:1px solid;font-size:11px;line-height:1.35;flex:0 0 auto}
.script-review-banner b{font-size:10px;letter-spacing:.08em;text-transform:uppercase}.script-review-banner.is-approved{background:#052e1b;border-color:#166534;color:#bbf7d0}.script-review-banner.is-retake{background:#3f1111;border-color:#991b1b;color:#fecaca}
.script-version-status{display:inline-flex;width:max-content;margin-top:3px;padding:2px 6px;border-radius:var(--of-radius-pill);border:1px solid;font-size:7px;font-style:normal;font-weight:900;letter-spacing:.08em;line-height:1.2}
.script-version-status.status-approved{color:#86efac;border-color:#22c55e;background:#052e1b}.script-version-status.status-retake{color:#fca5a5;border-color:#ef4444;background:#3f1111}
.script-version-row.status-approved{border-color:#166534}.script-version-row.status-retake{border-color:#991b1b}
.script-retake-review-modal textarea{width:100%;min-height:132px;resize:vertical;border:1px solid #59616c;border-radius:var(--of-radius-sm);background:#171a1f;color:#f8fafc;padding:10px 12px;font:inherit;outline:none}.script-retake-review-modal textarea:focus{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.15)}
.script-retake-review-help{margin:-4px 0 10px;color:#94a3b8;font-size:11px}.script-retake-submit{width:100%;margin-top:12px;height:42px;border:1px solid #ef4444;border-radius:var(--of-radius-control-compact);background:#991b1b;color:#fff;font-weight:850}.script-retake-submit:hover{background:#7f1d1d}
@media(max-width:767px){.script-review-actions{gap:5px}.script-review-actions button{height:34px;padding:0 11px;font-size:10px}.script-review-banner{padding:7px 10px;font-size:10px}}

/* planning_script_form_v1_20260924
   Script Planning reuses the compact Animation planning geometry, but replaces
   Animatic/Audio with one Asset-style multi-file input control. */
.planning-script-plan-table{min-width:1040px}
.planning-script-input-cell{min-width:170px}
.planning-script-input-cell .planning-plan-file-btn{max-width:210px}
.planning-script-mobile-file-grid{grid-template-columns:1fr}
@media (min-width:768px){
  .planning-script-plan-table th:nth-child(4),
  .planning-script-plan-table td:nth-child(4){width:220px;min-width:180px}
}

/* Animation video review: frame-by-frame retake navigation (desktop and phone). */
.review-frame-stepper{display:flex;align-items:center;flex-wrap:wrap;gap:6px;max-width:100%;padding:4px 6px;border:1px solid #596370;border-radius:var(--of-radius-sm);background:#20262e;color:#dbe7f6;font-size:10px;font-weight:800}
.review-frame-stepper label{font-size:9px;letter-spacing:.04em}
.review-frame-stepper select{min-height:29px;background:#303a47;border:1px solid #65798c;border-radius:var(--of-radius-control-dense);color:#fff;padding:2px 6px}
.review-frame-stepper button{min-height:29px;border-radius:var(--of-radius-control-dense);border:1px solid #537cac;background:#2c4e77;color:#fff;padding:3px 8px;white-space:nowrap}
.review-frame-stepper button:focus-visible,.review-frame-stepper select:focus-visible{outline:2px solid #82bdff;outline-offset:2px}
.review-frame-stepper #review-frame-position-label{min-width:65px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:767px){.review-frame-stepper{flex:1 1 100%;justify-content:center}.review-frame-stepper button{flex:1 1 auto}}

/* Keep expanded project folders paint-only: adding borders/padding to the flex
   item changed both project-strip height and horizontal scroll snapping. */
/* Pre-disable snapping in browsers supporting :has(), including on the
   first tap; the JS class is the fallback for older mobile browsers. */
.portal-project-strip:has(> .project-group-cluster),
.mobile-project-strip:has(> .project-group-cluster),
.planning-project-picker-strip:has(> .project-group-cluster),
.portal-project-strip.project-group-strip,
.mobile-project-strip.project-group-strip,
.planning-project-picker-strip.project-group-strip {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}
/* Reserve the same outer breathing room whether a folder is open or closed.
   The expanded frame paints outside the cluster with a negative inset, so this
   prevents that frame from sitting on top of the neighboring project tile in
   both the dashboard and Planning project strips without adding toggle-time
   layout changes. */
.project-group-cluster {
    position: relative;
    isolation: isolate;
    margin-inline: 8px;
}
.project-group-cluster.is-expanded {
    align-items: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.project-group-cluster.is-expanded::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -7px -8px;
    pointer-events: none;
    border: 0;
    border-radius: 12px;
    background: rgba(0,0,0,.16);
    box-shadow: none;
}
html[data-theme="light"] .project-group-cluster.is-expanded::before {
    background: rgba(15,23,42,.06);
}
.project-group-cluster.is-expanded > .project-group-card { margin-top: 4px; }
.project-group-cluster.is-expanded > .project-group-card > .project-group-name {
    display: block; /* keep the collapsed height to prevent whole-page flashes */
    visibility: hidden;
}
.project-group-folder-thumb,
.project-group-folder-thumb:hover,
.project-group-folder-thumb.is-expanded { transform: none; }
.mobile-project-strip .project-group-cluster img { content-visibility: visible; }
@media (max-width: 767px) {
    .project-group-cluster { margin-inline: 6px; }
    .project-group-cluster.is-expanded { padding: 0; }
    .project-group-cluster.is-expanded::before { inset: -6px -6px; }
}

/* planning_project_group_compact_frame_v1_20260927
   Planning's picker is vertically tighter than the dashboard strip. Keep the
   expanded group enclosure paint-only, but pull its lower edge upward so the
   frame does not hang below the neighboring project cards. Layout dimensions
   stay unchanged, so opening/closing a group does not introduce a new jump. */
.planning-project-picker-strip .project-group-cluster.is-expanded::before {
    inset: -5px -8px 3px;
}
@media (max-width: 767px) {
    .planning-project-picker-strip .project-group-cluster.is-expanded::before {
        inset: -4px -6px 3px;
    }
}

/* Closed desktop folders use the same gaps as standalone project tiles.
   Expanded folders retain the space around their frame and thumbnail rings. */
@media (min-width: 768px) {
    .portal-project-strip > .project-group-cluster:not(.is-expanded) {
        margin-inline: 8px 0 !important;
    }
    .portal-project-strip > .project-group-cluster:not(.is-expanded):first-child {
        margin-inline: 0 !important;
    }
    .portal-project-strip > .project-group-cluster.is-expanded {
        margin-inline: 24px !important;
        column-gap: 16px;
    }
    .portal-project-strip .project-group-inline-items {
        gap: 12px;
    }
}

/* animation-inline-player-draw-v1-20260927 */
.animation-inline-draw-root {
    position: absolute;
    inset: 0;
    z-index: 45;
    pointer-events: none;
}
.animation-inline-draw-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: none;
    cursor: crosshair;
}
.animation-inline-draw-root.is-drawing .animation-inline-draw-canvas { pointer-events: auto; }
.animation-inline-draw-root.is-playing .animation-inline-draw-canvas {
    pointer-events: none;
    opacity: 0;
}
.animation-inline-frame-list {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 40px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 2px;
    pointer-events: auto;
}
.animation-inline-frame-list:empty { display: none; }
.animation-inline-frame-list button {
    flex-shrink: 0;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid #64748b;
    border-radius: var(--of-radius-control-dense);
    background: rgba(15, 23, 42, .94);
    color: #e2e8f0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.animation-inline-frame-list button:disabled { opacity: .5; }
.animation-inline-draw-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    pointer-events: none;
    padding: 4px 8px;
    border-radius: var(--of-radius-pill);
    border: 1px solid rgba(96, 165, 250, .7);
    background: rgba(10, 18, 30, .82);
    color: #bfdbfe;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
    backdrop-filter: blur(8px);
}
/* Animation inline draw controls are part of the native player control row, not a floating review card. */
.animation-inline-draw-toolbar-host {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    align-items: center;
    justify-content: flex-end;
}
.animation-inline-draw-toolbar-host:empty { display: none; }
.animation-inline-draw-tools {
    position: relative;
    min-width: 0;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.animation-inline-markup-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    width: auto;
    flex: 0 1 auto;
}
.animation-inline-markup-toolbar .review-markup-mode-strip {
    flex: 0 1 auto;
    max-width: none;
    padding: 0;
    gap: 5px;
    scrollbar-width: none;
}
.animation-inline-markup-toolbar .review-markup-mode-strip::-webkit-scrollbar { display: none; }
.animation-inline-markup-toolbar .review-markup-mode-strip > button {
    flex: 0 0 34px;
    width: 34px;
    height: 30px;
    border-radius: 5px;
    background: #333;
    border-color: #4b5563;
    color: #d1d5db;
    box-shadow: none;
}
.animation-inline-markup-toolbar .review-markup-mode-strip > button:hover:not(:disabled) {
    background: #444;
    border-color: #6b7280;
    color: #fff;
}
.animation-inline-markup-toolbar .review-markup-mode-strip > button.is-active {
    background: #374151;
    border-color: #60a5fa;
    color: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
}
.animation-inline-markup-toolbar .review-markup-mode-strip > button.review-eraser-toggle.is-active {
    background: #3f352d;
    border-color: #f59e0b;
    color: #fde68a;
}
.animation-inline-color-row {
    flex: 0 0 auto;
    gap: 4px;
    padding-left: 2px;
}
.animation-inline-color-row .review-color-dot,
.animation-inline-custom-color,
.animation-inline-custom-color input[type="color"] { width: 21px; height: 21px; }
.animation-inline-color-row .review-color-dot { border-width: 1px; }
.animation-inline-brush-size {
    flex: 0 0 auto;
    gap: 5px;
    color: #9ca3af;
}
.animation-inline-brush-size input { width: 58px; accent-color: #60a5fa; }
.animation-inline-brush-size .review-brush-preview-wrap { display: none; }
.animation-inline-action-row {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    padding-left: 8px;
    margin-left: 1px;
    border-left: 1px solid #3f4650;
}
.animation-inline-action-row button {
    min-height: 28px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid #4b5563;
    border-radius: 5px;
    background: #333;
    color: #d1d5db;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
}
.animation-inline-action-row button:hover { background: #444; color: #fff; }
.animation-inline-action-row button:disabled { opacity: .45; cursor: default; }
.animation-inline-action-row button.is-retake {
    border-color: #7f1d1d;
    background: rgba(69,10,10,.32);
    color: #fca5a5;
}
.animation-inline-action-row button.is-retake:hover { background: rgba(127,29,29,.42); }
.animation-inline-action-row button.is-cancel {
    border-color: #6b3030;
    background: #302727;
    color: #fca5a5;
}
.animation-inline-draw-root.is-move-tool .animation-inline-draw-canvas { cursor: move; }
.animation-inline-draw-root.is-eraser-tool .animation-inline-draw-canvas { cursor: cell; }
.animation-inline-draw-root.is-text-tool .animation-inline-draw-canvas { cursor: text; }

/* Coloured Play All tracks stay below the native range interaction and shot markers. */
#video-slider[data-animation-status-track] { appearance: none; background: transparent !important; }
#video-slider[data-animation-status-track]::-webkit-slider-runnable-track {
    height: 6px; border-radius: var(--of-radius-pill); background: var(--animation-shot-gradient, #374151);
}
#video-slider[data-animation-status-track]::-moz-range-track {
    height: 6px; border: 0; border-radius: var(--of-radius-pill); background: var(--animation-shot-gradient, #374151);
}
#video-slider[data-animation-status-track]::-moz-range-progress { height: 6px; background: transparent; }
#video-slider[data-animation-status-track]::-webkit-slider-thumb {
    appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: -5px;
    border: 2px solid #dbeafe; border-radius: 50%; background: #3b82f6;
}
#video-slider[data-animation-status-track]::-moz-range-thumb {
    box-sizing: border-box; width: 16px; height: 16px; border: 2px solid #dbeafe;
    border-radius: 50%; background: #3b82f6;
}
#video-slider[data-animation-status-track]:focus-visible { outline: 2px solid #60a5fa; outline-offset: 5px; }
.animation-shot-status-legend {
    display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 8px; padding: 0 2px;
    color: #cbd5e1; font-size: 10px; line-height: 1.4;
}
.animation-shot-status-legend:empty { display: none; }
.animation-shot-status-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.animation-shot-status-legend i { width: 8px; height: 8px;  flex-shrink: 0; }

/* animation_mobile_main_preview_compact_v1_20261008 */
@media (max-width: 767px) {
    .mobile-shell #ai-movie-wrapper.animation-mobile-main-preview {
        height: clamp(160px, 44vw, 220px);
        min-height: 0;
        aspect-ratio: auto;
    }
}

/* Expanded Animation keeps the real player, timeline and controls together. */
#animation-expanded-player {
    position: fixed; inset: 0; z-index: 1800; box-sizing: border-box;
    width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none;
    display: flex; flex-direction: column; overflow: hidden; background: #222; color: #e2e8f0;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.animation-expanded-header {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    min-height: 48px; padding: 6px 12px; border-bottom: 1px solid #475569; background: #20252d;
}
.animation-expanded-header > strong { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.animation-expanded-header > button { flex: 0 0 auto; min-height: 34px; }
.animation-expanded-close { width: 36px; border: 1px solid #64748b; border-radius: 5px; background: #303843; color: #fff; font-size: 23px; }
.animation-expanded-close:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.animation-expanded-body { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
#animation-expanded-player #ai-movie-wrapper {
    flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto; width: 100%; border: 0; border-radius: 0;
}
#animation-expanded-player #ai-movie-wrapper > button[onclick="toggleFullscreen(event)"] { display: none; }
#animation-expanded-player button[onclick*="toggleMute"] { display: none !important; }
# Hide the small divider that belonged to the legacy audio control if cached markup still contains it.
# Use the utility-class selector only inside the mode slot and only when it immediately follows toggleMute.
# Escaped dot syntax is required for the Tailwind-like class names.
#animation-expanded-player .animation-desktop-mode-slot > button[onclick*="toggleMute"] + .w\-px { display: none !important; }
#animation-expanded-player [data-animation-player-part="timeline"] { flex-shrink: 0; padding: 10px 16px; margin: 0; }
#animation-expanded-player [data-animation-player-part="legend"] { flex-shrink: 0; padding: 0 16px; margin-bottom: 6px; }
#animation-expanded-player [data-animation-player-part="controls"] {
    flex-shrink: 0; padding: 8px 12px; margin: 0; max-height: 45vh; overflow-y: auto;
}
#animation-expanded-player .animation-expanded-compare-button {
    flex: 0 0 auto;
    margin-left: auto;
}
#animation-expanded-player .animation-player-control-row { flex-wrap: wrap; gap: 8px 20px; }
#animation-expanded-player #video-time { flex-shrink: 0; width: auto; min-width: 86px; white-space: nowrap; }

@media (max-height: 500px) {
    .animation-expanded-header { min-height: 40px; padding-top: 3px; padding-bottom: 3px; }
    #animation-expanded-player [data-animation-player-part="controls"] { padding-top: 4px; padding-bottom: 4px; }
}

/* Animation side-by-side video comparison. */
.animation-compare-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 26px; padding: 4px 10px; border: 1px solid #64748b;
    border-radius: 4px; background: #222; color: #dbeafe; font-size: 11px; font-weight: 700;
}
.animation-compare-button.is-mobile { flex: 1; min-height: 38px; font-size: 12px; }
.animation-compare-button[aria-pressed="true"] { background: #1e40af; border-color: #60a5fa; color: #fff; }
.animation-compare-button:disabled { opacity: .45; cursor: not-allowed; }
.animation-inline-compare-button { min-height: 30px; white-space: nowrap; text-transform: none; }
#animation-expanded-player .animation-inline-compare-button { display: none; }
/* Keep comparison controls inside the player's layer, below page drawers. */
#ai-movie-wrapper.animation-compare-open { --comparison-header-height: 42px; min-height: 220px; isolation: isolate; }
#ai-movie-wrapper.animation-compare-open > #ai-movie-player {
    position: absolute; left: 50%; top: var(--comparison-header-height);
    width: 50%; height: calc(100% - var(--comparison-header-height)); object-fit: contain;
}
#ai-movie-wrapper.animation-compare-open > button {
    top: auto; right: 8px; bottom: 8px; opacity: 1; z-index: 60;
}
.animation-compare-header {
    position: absolute; inset: 0 0 auto; height: var(--comparison-header-height); z-index: 60;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
    background: #20252d; color: #f1f5f9; border-bottom: 1px solid #475569;
}
.animation-compare-header > div { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px; }
.animation-compare-header strong { flex: 1; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.animation-compare-header button, .animation-compare-header select {
    min-width: 0; height: 30px; padding: 3px 6px; border: 1px solid #64748b;
    border-radius: 4px; color: #f1f5f9; background: #303843; font-size: 11px;
}
.animation-compare-header select { flex: 1; width: 100%; text-overflow: ellipsis; }
.animation-compare-header button { flex-shrink: 0; min-width: 30px; }
.animation-compare-header button:focus-visible, .animation-compare-header select:focus-visible {
    outline: 2px solid #60a5fa; outline-offset: 1px;
}
.animation-compare-reference {
    position: absolute; left: 0; right: 50%; top: var(--comparison-header-height); bottom: 0;
    min-width: 0; border-right: 1px solid #64748b; background: #000;
}
.animation-compare-reference video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.animation-compare-status {
    position: absolute; bottom: 6px; left: 6px; right: 42px; pointer-events: none;
    padding: 3px 5px; border-radius: 4px; background: rgba(15, 23, 42, .85); color: #e2e8f0;
    font-size: 10px; line-height: 1.4;
}
#ai-movie-wrapper.animation-compare-open .animation-inline-draw-root {
    top: var(--comparison-header-height); left: 50%; right: 0;
}

@media (max-width: 767px) {
    #ai-movie-wrapper.animation-compare-open { --comparison-header-height: 44px; }
    .animation-compare-header > div { gap: 4px; padding: 5px; }
    .animation-compare-status { font-size: 9px; }
}

.animation-inline-action-draw.is-active {
    border-color: #60a5fa !important;
    background: rgba(30, 64, 175, .4) !important;
    color: #dbeafe !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, .18);
}
.animation-retake-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.animation-retake-image {
    margin: 10px 0 0;
    overflow: hidden;
    border: 1px solid #7f4545;
    border-radius: 7px;
    background: #181b21;
}
.animation-retake-image figcaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    color: #fecaca;
    font-size: 11px;
    overflow-wrap: anywhere;
}
.animation-retake-image figcaption span { color: #cbd5e1; font-variant-numeric: tabular-nums; }
.animation-retake-image-preview { display: block; width: 100%; padding: 0; background: #07090c; }
.animation-retake-image-preview img { display: block; width: 100%; max-height: 220px; object-fit: contain; }
.animation-retake-image-preview span { display: block; padding: 6px; font-size: 11px; color: #bfdbfe; }
.animation-retake-image-download {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border-top: 1px solid #4b5563;
    color: #e5e7eb;
    background: #27303b;
    font-size: 11px;
}
.animation-retake-image button:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }

.animation-image-notes { padding: 10px; border-top: 1px solid #4b5563; color: #e5e7eb; font-size: 12px; }
.animation-image-notes h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.animation-image-note { padding: 8px 0; border-bottom: 1px solid #374151; overflow-wrap: anywhere; }
.animation-image-note:first-child { padding-top: 0; }
.animation-image-note-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.animation-image-note-author span, .animation-image-note time, .animation-image-note-empty { color: #9ca3af; font-size: 11px; }
.animation-image-note time { display: block; margin-top: 2px; }
.animation-image-note p { margin: 5px 0 0; white-space: pre-wrap; }
.animation-image-note-form { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin-top: 10px; }
.animation-image-note-form label { display: block; font-size: 11px; font-weight: 600; }
.animation-image-note-form textarea {
    display: block; width: 100%; min-height: 64px; margin-top: 5px; padding: 8px;
    resize: vertical; border: 1px solid #64748b; border-radius: 5px;
    background: #10141b; color: #f3f4f6; font: inherit; font-size: 12px; font-weight: 400;
}
.animation-image-note-form textarea::placeholder { color: #9ca3af; }
.animation-image-note-form textarea:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
.animation-image-note-form button { min-height: 36px; padding: 7px 10px; border-radius: 5px; background: #1d4ed8; color: #fff; font-size: 12px; font-weight: 600; }
.animation-image-note-form button:hover { background: #2563eb; }
.animation-image-note-form button:disabled, .animation-image-note-form textarea:disabled { opacity: .6; cursor: wait; }

@media (max-width: 1280px) and (min-width: 768px) {
    .animation-player-control-row { gap: 14px 20px !important; flex-wrap: wrap; }
    .animation-inline-draw-toolbar-host { flex: 1 1 100%; width: 100%; max-width: none; justify-content: center; }
    .animation-inline-draw-tools { width: 100%; max-width: 100%; justify-content: center; padding: 2px 0; }
    .animation-inline-markup-toolbar { gap: 5px; }
    .animation-inline-markup-toolbar .review-markup-mode-strip > button { flex-basis: 34px; width: 34px; }
    .animation-inline-brush-size input { width: 52px; }
}

@media (max-width: 767px) {
    .animation-image-note-form textarea { font-size: 16px; }
    .animation-image-note-form button { min-height: 44px; }
}

/* Animation desktop transport: compact three-zone control bar. */
@media (min-width: 768px) {
    .animation-desktop-transport-layout.animation-player-control-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 18px !important;
        row-gap: 8px !important;
        padding: 0 8px;
        margin-bottom: 12px !important;
    }
    .animation-desktop-transport-layout > .animation-desktop-mode-slot {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
    }
    .animation-desktop-transport-layout > .animation-desktop-transport-nav {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    .animation-desktop-transport-layout > .animation-inline-compare-button {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
    #animation-expanded-player .animation-desktop-transport-layout > .animation-expanded-compare-button {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        margin-left: 0;
    }
    /* Expanded review: on wide screens keep modes, draw tools, transport,
       Retake/Approve and Side by side in one compact bottom row. */
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 2fr) minmax(0, 1fr);
        column-gap: 12px !important;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-desktop-mode-slot {
        grid-column: 1;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-inline-draw-toolbar-host,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-draw-tools {
        display: contents;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-markup-toolbar {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-desktop-transport-nav {
        grid-column: 3;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-action-row {
        grid-column: 4;
        grid-row: 1;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-action-row .is-cancel {
        display: none;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-expanded-compare-button {
        grid-column: 5;
    }
    .animation-desktop-transport-layout > .animation-inline-draw-toolbar-host {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        justify-content: center;
    }
}
.animation-inline-retake-composer {
    position: absolute;
    z-index: 65;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(430px, calc(100% - 28px));
    padding: 12px;
    max-height: calc(100% - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(239, 68, 68, .62);
    border-radius: var(--of-radius-md);
    background: rgba(24, 28, 34, .96);
    color: #f3f4f6;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    backdrop-filter: blur(12px);
}
.animation-inline-retake-title {
    display: block;
    margin-bottom: 7px;
    color: #fecaca;
    font-size: 12px;
    font-weight: 800;
}
.animation-inline-retake-composer textarea {
    display: block;
    width: 100%;
    min-height: 56px;
    resize: vertical;
    padding: 8px 9px;
    border: 1px solid #4b5563;
    border-radius: var(--of-radius-control-compact);
    outline: none;
    background: #111827;
    color: #f9fafb;
    font-size: 12px;
}
.animation-inline-retake-composer textarea:focus { border-color: #ef4444; }
.animation-inline-retake-hint {
    margin-top: 6px;
    color: #9ca3af;
    font-size: 10px;
}
.animation-inline-retake-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 10px;
}
.animation-inline-retake-actions button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #4b5563;
    border-radius: var(--of-radius-control-compact);
    background: #27303b;
    color: #e5e7eb;
    font-size: 11px;
    font-weight: 800;
}
.animation-inline-retake-actions button.is-send {
    border-color: #ef4444;
    background: #b91c1c;
    color: #fff;
}
.animation-inline-retake-actions button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 767px) {
    .animation-inline-draw-badge { bottom: 7px; left: 7px; font-size: 9px; }
    .animation-inline-draw-toolbar-host,
    .animation-inline-draw-toolbar-host-mobile { width: 100%; max-width: none; flex: 1 1 100%; justify-content: stretch; }
    .animation-inline-draw-tools { width: 100%; max-width: none; gap: 5px; padding: 3px 0; flex-direction: column; align-items: stretch; background: transparent; border: 0; box-shadow: none; }
    .animation-inline-markup-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 5px 7px; }
    .animation-inline-markup-toolbar .review-markup-mode-strip { grid-column: 1 / -1; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .animation-inline-markup-toolbar .review-markup-mode-strip > button { flex: 0 0 38px; width: 38px; height: 36px; }
    .animation-inline-color-row { grid-column: 1 / 2; overflow-x: auto; min-width: 0; }
    .animation-inline-brush-size { grid-column: 2 / 3; min-width: 118px; }
    .animation-inline-brush-size input { width: 58px; }
    .animation-inline-brush-size .review-brush-preview-wrap { display: none; }
    .animation-inline-action-row { gap: 4px; padding-left: 0; margin-left: 0; border-left: 0; }
    .animation-inline-action-row button { min-height: 32px; padding: 0 7px; font-size: 10px; }
    .animation-inline-retake-composer { bottom: 8px; width: calc(100% - 16px); padding: 10px; }
    .animation-inline-retake-composer textarea { min-height: 52px; font-size: 16px; }
}
/* Animation review uses the Asset-style floating palette on phones, including
   landscape phones whose width would otherwise select the desktop toolbar. */
.animation-inline-tools-panel { display: contents; }
.animation-inline-tools-toggle,
.animation-inline-tools-backdrop,
.animation-inline-tools-heading,
.animation-inline-tools-history { display: none; }

@media (max-width: 767px), (pointer: coarse) and (max-height: 600px) {
    #animation-expanded-player.animation-expanded-review-active .animation-expanded-header { min-height: 42px; padding: 3px 10px; }
    #animation-expanded-player.animation-expanded-review-active [data-animation-player-part="timeline"] { padding: 4px 10px; }
    #animation-expanded-player.animation-expanded-review-active [data-animation-player-part="controls"] {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px; padding: 4px 10px; margin: 0 !important; max-height: none;
    }
    #animation-expanded-player.animation-expanded-review-active [data-animation-player-part="controls"] > :first-child:not(.animation-desktop-transport-nav) { grid-column: 1 / -1; }
    #animation-expanded-player.animation-expanded-review-active [data-animation-mobile-transport-layout] {
        grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    }
    #animation-expanded-player.animation-expanded-review-active [data-animation-mobile-transport-layout] > :last-child { display: none; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout.animation-player-control-row {
        grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px !important; row-gap: 4px !important;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-desktop-mode-slot { grid-column: 1; grid-row: 1; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-desktop-transport-nav { grid-column: 2; grid-row: 1; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-inline-draw-toolbar-host { display: flex; grid-column: 1; grid-row: 2; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-expanded-compare-button { grid-column: 2; grid-row: 2; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-nav { gap: 8px; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-nav > button,
    #animation-expanded-player.animation-expanded-review-active [data-animation-mobile-transport-layout] > :nth-child(2) > button { min-width: 36px; min-height: 36px; }
    #animation-expanded-player.animation-expanded-review-active #desktop-play-btn,
    #animation-expanded-player.animation-expanded-review-active #mobile-play-btn { width: 36px; height: 36px; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-mode-slot button { padding: 6px; font-size: 9px; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-draw-toolbar-host,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-draw-tools {
        display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
        width: auto; min-width: 0; max-width: none; gap: 6px; padding: 0;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-action-row { gap: 5px; border: 0; padding: 0; margin: 0; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-action-row button,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-toggle,
    #animation-expanded-player.animation-expanded-review-active .animation-expanded-compare-button {
        min-height: 36px; height: 36px; padding: 0 9px; font-size: 11px;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-action-row .animation-inline-clear,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-action-row .is-cancel { display: none; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-toggle {
        display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none;
        border: 1px solid #64748b; border-radius: 5px; background: #303843; color: #e2e8f0;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-toggle .review-tool-icon { width: 18px; height: 18px; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-toggle:disabled { opacity: .45; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-panel { display: none; }
    #animation-expanded-player.animation-expanded-review-active .is-tools-open .animation-inline-tools-backdrop {
        display: block; position: fixed; inset: 0; z-index: 110;
        width: 100%; height: 100%; border: 0; background: rgba(4, 7, 11, .3);
    }
    #animation-expanded-player.animation-expanded-review-active .is-tools-open .animation-inline-tools-panel {
        display: flex; flex-direction: column; gap: 10px; position: fixed; z-index: 111;
        left: 50%; top: 50%; transform: translate(-50%, -50%);
        width: min(420px, calc(100% - 24px)); max-height: calc(100% - 24px);
        padding: 12px; overflow-y: auto; overscroll-behavior: contain;
        border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--of-radius-panel, 14px);
        background: linear-gradient(145deg, rgba(35, 39, 46, .96), rgba(16, 19, 24, .94)); color: #f3f4f6;
        backdrop-filter: blur(22px); box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-heading,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-history { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-heading strong { font-size: 13px; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-heading button,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-history button {
        min-height: 36px; padding: 0 12px; border: 1px solid #64748b; border-radius: 6px;
        background: #303843; color: #f3f4f6; font-size: 12px;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-history { justify-content: flex-end; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-history button:disabled { opacity: .45; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-markup-toolbar {
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; width: 100%;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-markup-toolbar .review-markup-mode-strip {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
        grid-column: 1; width: 100%; overflow: visible;
    }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-markup-toolbar .review-markup-mode-strip > button { width: 100%; height: 40px; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-color-row { grid-column: 1; justify-content: space-between; gap: 8px; padding: 3px; overflow: visible; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-color-row .review-color-dot,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-custom-color,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-custom-color input[type="color"] { width: 32px; height: 32px; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-brush-size { grid-column: 1; width: 100%; min-width: 0; gap: 10px; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-brush-size input { flex: 1; min-width: 0; width: auto; min-height: 28px; }
}

@media (min-width: 760px) and (pointer: coarse) and (max-height: 600px) {
    #animation-expanded-player.animation-expanded-review-active [data-animation-player-part="controls"],
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout.animation-player-control-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
    #animation-expanded-player.animation-expanded-review-active [data-animation-mobile-transport-layout] { display: contents; }
    #animation-expanded-player.animation-expanded-review-active [data-animation-mobile-transport-layout] > :first-child { grid-column: 1; grid-row: 2; }
    /* Span the entire bar so unequal left/right controls cannot shift playback. */
    #animation-expanded-player.animation-expanded-review-active [data-animation-mobile-transport-layout] > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
    #animation-expanded-player.animation-expanded-review-active [data-animation-player-part="controls"] > .animation-inline-draw-toolbar-host { grid-column: 2; grid-row: 2; }
    #animation-expanded-player.animation-expanded-review-active [data-animation-player-part="controls"] > .animation-expanded-compare-button { grid-column: 3; grid-row: 2; }
    #animation-expanded-player.animation-expanded-review-active .animation-inline-draw-toolbar-host { justify-content: flex-end; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-desktop-transport-nav { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-inline-draw-toolbar-host { grid-column: 2; grid-row: 1; }
    #animation-expanded-player.animation-expanded-review-active .animation-desktop-transport-layout > .animation-expanded-compare-button { grid-column: 3; grid-row: 1; }
}

@media (min-width: 760px) and (max-width: 860px) and (pointer: coarse) and (max-height: 600px) {
    /* Preserve the centre slot when all review actions are available. */
    #animation-expanded-player.animation-expanded-review-active .animation-inline-action-row button,
    #animation-expanded-player.animation-expanded-review-active .animation-inline-tools-toggle,
    #animation-expanded-player.animation-expanded-review-active .animation-expanded-compare-button { padding-right: 5px; padding-left: 5px; }
}

/* Project folders open a responsive gallery in the main dashboard panel. */
.project-group-gallery-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.project-group-gallery { padding:8px; color:inherit; }
.project-group-gallery-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px; }
.project-group-gallery-header > div { min-width:0; }
.project-group-gallery-eyebrow { display:block; color:inherit; opacity:.65; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }
.project-group-gallery-header h1 { margin:0; font-size:22px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.project-group-gallery-count { flex:none; border:1px solid #4b5563; padding:5px 10px; color:inherit; opacity:.85; font-size:12px; }
.project-group-gallery-empty { margin:0 0 18px; color:inherit; opacity:.85; font-size:14px; }
.project-group-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); align-items:start; gap:18px; padding-bottom:12px; }
.project-gallery-card { display:flex; flex-direction:column; width:100%; min-width:0; padding:0; text-align:left; cursor:pointer; overflow:hidden; border:1px solid #4b5563; background:#383838; color:inherit; transition:border-color .15s, box-shadow .15s; }
.project-gallery-card:hover { border-color:var(--of-project-accent); }
.project-gallery-card:focus-visible { outline:3px solid var(--of-project-accent); outline-offset:3px; }
.project-gallery-thumbnail { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:4/3; overflow:hidden; background:#28364a; }
.project-gallery-thumbnail img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-gallery-initials { font-size:36px; font-weight:700; color:inherit; opacity:.85; }
.project-gallery-info { display:flex; flex-direction:column; gap:6px; padding:13px; min-width:0; width:100%; box-sizing:border-box; }
.project-gallery-name { color:inherit; font-size:14px; line-height:1.35; font-weight:650; overflow-wrap:anywhere; }
.project-gallery-type { color:#b8c8dd; font-size:11px; line-height:1.4; }
.project-gallery-create { border-style:dashed; background:color-mix(in srgb, var(--of-project-accent) 7%, transparent); }
.project-gallery-create .project-gallery-thumbnail { background:color-mix(in srgb, var(--of-project-accent) 7%, transparent); }
.project-gallery-create .project-gallery-info { text-align:center; }
.project-gallery-plus { color:var(--of-project-accent); font-size:52px; line-height:1; font-weight:300; }
@media (min-width:768px) and (max-width:1299px) {
    .project-group-gallery-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
}
@media (max-width:767px) {
    .project-group-gallery { padding:6px 2px; }
    .project-group-gallery-header { margin-bottom:18px; gap:10px; }
    .project-group-gallery-header h1 { font-size:20px; }
    .project-group-gallery-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
    .project-gallery-info { padding:8px; }
    .project-gallery-name { font-size:12px; }
    .project-group-folder-badge.project-gallery-type-badge { min-height:20px; padding:3px 4px; font-size:9px; line-height:11px; letter-spacing:.03em; }
}

/* animation_new_shot_desktop_dark_ui_v1_20261007:
   Match the Animation New Shot popup to the solid dark dashboard/player UI.
   Keep mobile and Light mode untouched. */
@media (min-width: 768px) {
  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal {
    background: #1f2124 !important;
    border-color: #40464e !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal > button[onclick="closeModal()"] {
    background: #2a2d31 !important;
    border-color: #484e56 !important;
    color: #d7dce2 !important;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal > button[onclick="closeModal()"]:hover {
    background: #34383d !important;
    border-color: #5a626c !important;
  }


  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal label {
    color: #aeb6c1 !important;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal :is(
    #new-assignment-name,
    #new-shot-number,
    #new-assignment-assignee,
    #new-assignment-mandays,
    input[type="text"],
    input[type="number"],
    select
  ) {
    background: #26292d !important;
    border-color: #454b53 !important;
    color: #f3f4f6 !important;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal input::placeholder {
    color: #7f8995 !important;
    opacity: 1;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal .new-assignment-thumb-upload {
    background: #30343a !important;
    border-color: #59616b !important;
    color: #aeb6c1 !important;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal .new-assignment-input-box {
    background: #26292d !important;
    border-color: #3a3f46 !important;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal .new-assignment-input-box button {
    background: #222529 !important;
    border-color: #4a515a !important;
    color: #d7dce2 !important;
  }

  html[data-theme="dark"] #modal-container[data-modal-type="assignment"] .animation-new-shot-modal .new-assignment-input-box button:hover {
    background: #30343a !important;
    border-color: #5a626c !important;
  }

}


/* Work Monitor phone layout: one page scroll, readable cards, optional controls. */
.work-monitor-mobile-toolbar { display: none; }
@media (max-width: 767px) {
    .work-monitor-page {
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain;
    }
    .work-monitor-header {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 12px 14px 8px !important;
    }
    .work-monitor-heading {
        display: block !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }
    .work-monitor-header h2 {
        min-height: 38px;
        display: flex;
        align-items: center;
        font-size: 1rem !important;
        padding-right: 48px !important;
    }
    .work-monitor-tabs-scroll {
        width: 100%;
        margin: 6px 0 0 !important;
    }
    .work-monitor-type-tabs {
        gap: 6px !important;
        scroll-snap-type: x proximity;
    }
    .work-monitor-type-tabs button {
        min-height: 44px !important;
        scroll-snap-align: start;
    }
    .work-monitor-controls {
        display: flex;
        flex-direction: column;
        max-height: none !important;
        overflow: visible !important;
    }
    .work-monitor-controls > * { margin-top: 0 !important; }
    .work-monitor-basic-table { display: none !important; }
    .work-monitor-main-filter-line,
    .work-monitor-basic-filter-grid { order: 0; width: 100%; }
    .work-monitor-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .work-monitor-filter-grid input,
    .work-monitor-filter-grid select,
    .work-monitor-filter-grid button {
        width: 100%;
        min-width: 0;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    .work-monitor-export { grid-column: 1 / -1; }
    .work-monitor-mobile-toolbar {
        display: flex;
        order: 1;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
    }
    .work-monitor-mobile-toolbar button {
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid currentColor;
        border-radius: var(--of-radius-lg);
        font-weight: 700;
    }
    .work-monitor-controls:not(.is-expanded) .work-monitor-saved-views-panel,
    .work-monitor-controls:not(.is-expanded) .work-monitor-option-chips,
    .work-monitor-controls:not(.is-expanded) .work-monitor-export {
        display: none !important;
    }
    .work-monitor-saved-views-panel {
        order: 2;
        flex-wrap: wrap;
        overflow: visible;
    }
    .work-monitor-view-tabs { flex: 1 0 100%; }
    .work-monitor-view-tabs:empty { display: none; }
    .work-monitor-view-actions { flex-wrap: wrap; margin-left: 0; }
    .work-monitor-view-actions button,
    .work-monitor-view-editor button,
    .work-monitor-view-tab { min-height: 44px; height: auto; font-size: 12px; }
    .work-monitor-view-editor { flex: 1 0 100%; flex-wrap: wrap; }
    .work-monitor-view-editor input { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
    .work-monitor-option-chips {
        order: 3;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    .work-monitor-column-toggle,
    .work-monitor-column-label { display: none !important; }
    .work-monitor-option-chips button {
        min-height: 44px !important;
        font-size: 12px !important;
    }
    .work-monitor-mobile-cards {
        overflow: visible !important;
        padding: 12px 14px max(24px, env(safe-area-inset-bottom)) !important;
    }
    .work-monitor-mobile-card { min-width: 0; }
    .work-monitor-mobile-card button {
        min-height: 44px;
        min-width: 44px;
        font-size: 12px;
    }
    .work-monitor-mobile-card > div:first-child > div:first-child { flex-wrap: wrap; }
    .work-monitor-mobile-card .truncate { white-space: normal; overflow-wrap: anywhere; }
    .work-monitor-mobile-card [class~="text-[9px]"],
    .work-monitor-mobile-card [class~="text-[10px]"] { font-size: 11px; line-height: 1.45; }
    .work-monitor-card-actions > button { flex: 1; }
    .work-monitor-card-facts dd { margin: 3px 0 0; }
    .work-monitor-card-details > summary { padding: 12px 0; cursor: pointer; }
    .work-monitor-card-details[open] > div { margin-top: 8px; }
}

/* Shared structural circle shape; preserve the existing sizes and appearance. */
.review-brush-canvas-cursor, .animation-shot-status-legend i { border-radius:50%; }
.script-view-switch button, .review-workspace-root.review-compact-asset-layout .review-compact-tools-backdrop { border-radius:0; }


/* Company support login confirmation, shared by phone and desktop layouts. */
.company-support-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
}
.company-support-confirm-dialog {
    width: 100%;
    max-width: 400px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid #4b5563;
    border-radius: 16px;
    background: #242424;
    color: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.company-support-confirm-dialog h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.company-support-confirm-dialog p { margin: 14px 0 20px; color: #d1d5db; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.company-support-confirm-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.company-support-confirm-actions button { min-height: 44px; padding: 10px; border: 1px solid #4b5563; border-radius: 10px; background: #333; color: #e5e7eb; font-size: 13px; font-weight: 700; }
.company-support-confirm-actions [data-action="open"] { border-color: #3b82f6; background: #2563eb; color: #fff; }
.company-support-confirm-actions button:hover { filter: brightness(1.12); }
.company-support-confirm-actions button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
html[data-theme="light"] .company-support-confirm-dialog { background: var(--of-light-surface, #fff); color: #0f172a; border-color: #cbd5e1; }
html[data-theme="light"] .company-support-confirm-dialog p { color: #475569; }
html[data-theme="light"] .company-support-confirm-actions [data-action="cancel"] { background: #e7edf4; color: #334155; border-color: #94a3b8; }

/* Mobile company details: two subscription tiles and three aligned usage tiles. */
@media (max-width: 767px) {
    .company-page-shell .company-sheet-cell:nth-child(3) {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }
    .company-page-shell .company-sheet-cell:nth-child(3) .company-sheet-muted {
        margin-top: 0;
        margin-left: auto;
    }
    .company-page-shell .company-sheet-cell:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        border: 1px solid #3d4653;
        border-radius: 10px;
        background: rgba(15, 23, 42, .28);
        min-height: 108px;
    }
    .company-page-shell .company-sheet-cell:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) .company-mobile-cell-label {
        margin-bottom: 2px;
        color: #aebaca;
        font-size: 11px;
        line-height: 1.3;
    }
    .company-page-shell .company-sheet-cell:is(:nth-child(4), :nth-child(5)) .company-sheet-strong {
        font-size: 15px;
        line-height: 1.3;
    }
    .company-page-shell .company-sheet-cell:is(:nth-child(6), :nth-child(7), :nth-child(8)) {
        min-height: 114px;
        gap: 5px;
    }
    .company-page-shell .company-sheet-cell:is(:nth-child(6), :nth-child(7), :nth-child(8)) .company-sheet-strong {
        font-size: 13px;
        line-height: 1.3;
    }
    .company-page-shell .company-sheet-cell:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) .company-sheet-muted {
        font-size: 11px;
        line-height: 1.4;
    }
    .company-page-shell .company-sheet-cell .company-sheet-progress {
        order: 4;
        margin-top: auto;
        height: 5px;
        flex-shrink: 0;
    }
    .company-page-shell .company-sheet-access {
        padding-top: 2px;
    }
    html[data-theme="light"] .company-page-shell .company-sheet-cell:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }
    html[data-theme="light"] .company-page-shell .company-sheet-cell .company-mobile-cell-label { color: #475569; }
}

/* Mobile company cards start minimized; desktop retains the complete table. */
.company-mobile-expand-toggle, .company-mobile-plan-summary { display: none; }
@media (max-width: 767px) {
    .company-page-shell .company-sheet-row:not(.is-expanded) > .company-sheet-cell:nth-child(n+4) { display: none; }
    .company-page-shell .company-sheet-company-wrap > .min-w-0 { flex: 1; }
    .company-page-shell .company-mobile-expand-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        margin-left: auto;
        border: 1px solid #4b5563;
        border-radius: 10px;
        background: #2c3440;
        color: #cbd5e1;
    }
    .company-page-shell .company-mobile-expand-toggle:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
    .company-page-shell .company-sheet-row.is-expanded .company-mobile-expand-toggle svg { transform: rotate(180deg); }
    .company-page-shell .company-mobile-plan-summary {
        display: block;
        margin-top: 5px;
        color: #d1d5db;
        font-size: 11px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    .company-page-shell .company-mobile-plan-summary span { color: #9ca3af; }
    .company-page-shell .company-sheet-row.is-expanded .company-mobile-plan-summary { display: none; }
    html[data-theme="light"] .company-page-shell .company-mobile-expand-toggle { background: #e7edf4; color: #334155; border-color: #94a3b8; }
    html[data-theme="light"] .company-page-shell .company-mobile-plan-summary { color: #334155; }
    html[data-theme="light"] .company-page-shell .company-mobile-plan-summary span { color: #475569; }
}

/* Compact company identity, inline badges, and visible space between mobile cards. */
.company-mobile-header-badges { display: none; }
@media (max-width: 767px) {
    .company-page-shell .company-list-wrap .company-list-ui-card.company-list-panel {
        background: transparent !important;
        box-shadow: none !important;
    }
    .company-page-shell .company-sheet-table tbody { gap: 14px; }
    .company-page-shell .company-sheet-row {
        padding: 10px 12px;
        gap: 10px;
        background: #242424;
        border-color: #566171;
    }
    .company-page-shell .company-mobile-expand-toggle { border-radius: 50%; }
    .company-page-shell .company-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
    .company-page-shell .company-name-line .company-sheet-name {
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
    }
    .company-page-shell .company-mobile-header-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
    .company-page-shell .company-mobile-header-badges .company-sheet-status { min-height: 20px; margin: 0; padding: 1px 5px; font-size: 9px; }
    .company-page-shell .company-sheet-status.plan { background: rgba(59,130,246,.14); border-color: rgba(96,165,250,.4); color: #bfdbfe; }
    .company-page-shell .company-mobile-plan-summary { display: inline; margin: 0; font-size: inherit; color: inherit; }
    .company-page-shell .company-sheet-company-wrap .company-sheet-sub { margin-top: 4px; font-size: 11px; }
    .company-page-shell .company-sheet-row:not(.is-expanded) > .company-sheet-cell:nth-child(3) { display: none; }
    .company-page-shell .company-sheet-row.is-expanded > .company-sheet-cell:nth-child(3) > .company-sheet-status { display: none; }
    .company-page-shell .company-sheet-cell:nth-child(3) .company-sheet-muted { margin-left: 0; }
    html[data-theme="light"] .company-page-shell .company-sheet-status.plan { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
}

/* Desktop layers: assignment cards < filters < notifications < dialogs. */
@media (min-width: 768px) {
  .portal-main-shell > .portal-desktop-header-actions {
    z-index: 300;
  }
  .portal-main-shell > .portal-filterbar {
    position: relative;
    z-index: 200;
    overflow: visible;
  }
  .portal-filterbar .asset-stage-filter-menu[open] {
    z-index: 1;
  }
}
.asset-stage-filter-menu > summary {
  list-style: none;
}
.asset-stage-filter-menu > summary::-webkit-details-marker {
  display: none;
}

/* Mobile Animation: reserve a full row for playback version selection. */
@media (max-width: 767px) {
    .animation-shot-stage-workspace .assignment-selected-stage-panel.is-mobile .assignment-selected-stage-actions-body > label:has(select[aria-label="Shot playback version"]) {
        grid-column: 1 / -1;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
    }
}

/* Mobile Animation: assignee and playback version share one compact row. */
@media (max-width: 767px) {
    .animation-mobile-assignee-version-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }
    .animation-mobile-assignee-version-row > :first-child {
        flex: 1 1 0;
        min-width: 0;
        max-width: none !important;
    }
    .animation-mobile-assignee-version-row > label {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 44%;
    }
    .animation-mobile-assignee-version-row select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 36px;
    }
}

/* Animation feedback: expandable retake versions, shared by desktop and mobile. */
.animation-retake-group-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 22px 5px 2px;
    cursor: pointer;
    list-style: none;
}
.animation-retake-group-header::-webkit-details-marker { display: none; }
.animation-retake-group-header::after {
    content: '›';
    position: absolute;
    right: 3px;
    top: 6px;
    font-size: 20px;
    line-height: 1;
    color: #9ca3af;
    transition: transform .15s ease;
}
.animation-retake-group[open] > .animation-retake-group-header::after { transform: rotate(90deg); }
.animation-retake-group-header:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.animation-retake-group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.animation-retake-group-title strong { color: #f87171; font-size: 12px; overflow-wrap: anywhere; }
.animation-retake-group-title > span { color: #d1d5db; font-size: 10px; }
.animation-retake-group-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: #9ca3af; font-size: 10px; }
.animation-retake-group-body { padding-top: 9px; }
html[data-theme="light"] .animation-retake-group-title strong { color: #b91c1c; }
html[data-theme="light"] .animation-retake-group-title > span { color: #374151; }
html[data-theme="light"] .animation-retake-group-meta { color: #6b7280; }