/* Asset Splitter styles are intentionally isolated to this page. */
        .tool-page.asset-splitter-page {
            --asset-panel-padding: 16px;
            --asset-panel-radius: var(--radius-xl);
            --asset-workspace-height: 470px;
            --asset-accent: #0f766e;
            --asset-accent-text: var(--teal-text);
            --asset-accent-hover: #0b5f58;
            --asset-accent-light: rgba(13, 148, 136, 0.11);
            --asset-accent-mid: rgba(13, 148, 136, 0.24);
            --asset-preset-accent: var(--primary);
            --asset-preset-text: var(--primary-text);
            --asset-preset-fill: var(--primary-fill);
            --asset-preset-light: var(--primary-light);
            --asset-preset-mid: var(--primary-mid);
            --tool-action-accent: var(--asset-accent);
            --tool-action-text: var(--asset-accent-text);
            --tool-action-soft: var(--asset-accent-light);
            --tool-action-border: var(--asset-accent-mid);
        }

        .tool-page.asset-splitter-page .nav-pill.active-split {
            color: var(--asset-accent-text);
            background: var(--asset-accent-light);
            box-shadow: 0 2px 8px rgba(13, 148, 136, 0.16);
        }

        .tool-page.asset-splitter-page .asset-splitter-workspace {
            min-height: 0;
        }

        .tool-page.asset-splitter-page .tool-workspace-grid {
            min-height: 0;
        }

        .tool-page.asset-splitter-page .asset-preview-panel,
        .tool-page.asset-splitter-page .asset-settings-panel {
            min-width: 0;
            background: var(--container-bg);
            border: 1px solid var(--tool-surface-border, var(--border-color));
            border-radius: var(--asset-panel-radius);
            box-shadow: var(--shadow);
        }

        .tool-page.asset-splitter-page .asset-preview-panel {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0;
            min-height: 0;
            padding: var(--asset-panel-padding);
        }

        .tool-page.asset-splitter-page .asset-preview-stage {
            flex: 0 0 auto;
        }

        .tool-page.asset-splitter-page .asset-drop-zone {
            min-height: 300px;
            height: 100%;
            border: 3px dashed var(--tool-surface-border, var(--border-color));
            border-radius: var(--radius-xl);
            gap: 10px;
        }

        .tool-page.asset-splitter-page .asset-drop-zone .drop-zone-icon {
            width: 68px;
            height: 68px;
        }

        .tool-page.asset-splitter-page .asset-drop-zone .asset-split-icon {
            color: var(--asset-accent);
            background: var(--asset-accent-light);
        }

        .tool-page.asset-splitter-page .asset-drop-zone .icon-lg {
            font-size: 34px;
        }

        .tool-page.asset-splitter-page .asset-drop-zone .drop-zone-title {
            font-size: 1rem;
        }

        .tool-page.asset-splitter-page .asset-drop-zone .drop-zone-subtitle {
            font-size: 0.75rem;
        }

        .tool-page.asset-splitter-page .asset-preview-content {
            display: none;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            padding: 0;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background: linear-gradient(135deg, rgba(13, 148, 136, 0.045), rgba(255, 255, 255, 0));
        }

        .tool-page.asset-splitter-page .asset-preview-content.is-visible {
            display: flex;
        }

        .tool-page.asset-splitter-page .asset-image-frame {
            position: relative;
            display: inline-grid;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            line-height: 0;
        }

        .tool-page.asset-splitter-page .asset-image-frame.is-positioning {
            cursor: grab;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }

        .tool-page.asset-splitter-page .asset-image-frame.is-positioning.is-dragging {
            cursor: grabbing;
        }

        .tool-page.asset-splitter-page .asset-image-frame.is-positioning:focus-visible {
            outline: 3px solid var(--asset-accent-mid);
            outline-offset: 3px;
        }

        .tool-page.asset-splitter-page .asset-image-frame img {
            max-height: calc(var(--stage-h-lg) - (var(--tool-panel-gap) * 2));
            border-radius: 0;
            box-shadow: 0 8px 20px rgba(26, 26, 46, 0.08);
            transform: translate(0, 0);
            will-change: transform;
        }

        .tool-page.asset-splitter-page .asset-grid-overlay {
            position: absolute;
            left: var(--crop-left, 0%);
            top: var(--crop-top, 0%);
            width: var(--crop-width, 100%);
            height: var(--crop-height, 100%);
            pointer-events: none;
            outline: 2px solid rgba(0, 0, 0, 0.75);
            outline-offset: -2px;
        }

        .tool-page.asset-splitter-page .asset-grid-overlay::before {
            position: absolute;
            inset: 0;
            box-sizing: border-box;
            border: 1px dashed #fff;
            content: '';
        }

        .tool-page.asset-splitter-page .asset-grid-line {
            position: absolute;
            background: rgba(0, 0, 0, 0.75);
        }

        .tool-page.asset-splitter-page .asset-grid-line::after {
            position: absolute;
            content: '';
        }

        .tool-page.asset-splitter-page .asset-grid-line.is-vertical {
            top: 0;
            bottom: 0;
            width: 2px;
            transform: translateX(-1px);
        }

        .tool-page.asset-splitter-page .asset-grid-line.is-vertical::after {
            top: 0;
            bottom: 0;
            left: 1px;
            width: 1px;
            background: repeating-linear-gradient(to bottom, #fff 0 6px, transparent 6px 12px);
        }

        .tool-page.asset-splitter-page .asset-grid-line.is-horizontal {
            right: 0;
            left: 0;
            height: 2px;
            transform: translateY(-1px);
        }

        .tool-page.asset-splitter-page .asset-grid-line.is-horizontal::after {
            top: 1px;
            right: 0;
            left: 0;
            height: 1px;
            background: repeating-linear-gradient(to right, #fff 0 6px, transparent 6px 12px);
        }

        .tool-page.asset-splitter-page .asset-file-info {
            display: none;
            align-items: center;
            gap: 8px;
            min-width: 0;
            margin-top: 12px;
            padding: 8px 10px;
            color: var(--asset-accent-text);
            background: var(--asset-accent-light);
            border: 1px solid var(--asset-accent-mid);
            border-radius: var(--radius);
            font-size: 0.75rem;
            font-weight: 700;
        }

        .tool-page.asset-splitter-page .asset-file-info.is-visible {
            display: flex;
        }

        .tool-page.asset-splitter-page .asset-file-info .material-symbols-outlined {
            flex: 0 0 auto;
            font-size: 16px;
        }

        .tool-page.asset-splitter-page .asset-file-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tool-page.asset-splitter-page .asset-file-meta {
            flex: 0 0 auto;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .tool-page.asset-splitter-page .asset-file-remove-button {
            display: inline-grid;
            width: 28px;
            height: 28px;
            margin-left: auto;
            padding: 0;
            place-items: center;
            color: var(--red-text);
            background: transparent;
            border: 0;
            border-radius: 50%;
            cursor: pointer;
        }

        .tool-page.asset-splitter-page .asset-file-remove-button:hover {
            background: var(--red-light);
        }

        .tool-page.asset-splitter-page .asset-file-remove-button .material-symbols-outlined {
            font-size: 18px;
        }

        .tool-page.asset-splitter-page .asset-settings-panel {
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: var(--asset-panel-padding);
            overflow: hidden;
        }

        .tool-page.asset-splitter-page .asset-settings-panel h1 {
            margin: 0 0 3px;
            color: var(--text-color);
            font-size: var(--tool-settings-title-size);
            font-weight: var(--tool-settings-title-weight);
            line-height: 1.3;
            letter-spacing: -0.02em;
        }

        .tool-page.asset-splitter-page .asset-settings-subtitle {
            color: var(--text-muted);
            font-size: var(--tool-settings-subtitle-size);
            font-weight: var(--tool-settings-help-weight);
            line-height: 1.45;
        }

        .tool-page.asset-splitter-page .asset-option-group {
            margin-top: 12px;
        }

        .tool-page.asset-splitter-page .asset-option-label {
            display: block;
            margin-bottom: 7px;
            color: var(--text-muted);
            font-size: var(--tool-settings-label-size);
            font-weight: var(--tool-settings-label-weight);
            letter-spacing: 0.04em;
            line-height: 1.3;
        }

        .tool-page.asset-splitter-page .asset-grid-options {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
        }

        .tool-page.asset-splitter-page .asset-grid-option {
            min-width: 0;
            height: 40px;
            padding: 6px 5px;
            color: var(--text-muted);
            background: var(--container-bg);
            border: 1px solid var(--tool-control-border, var(--border-color));
            border-radius: var(--radius);
            font: inherit;
            font-size: var(--tool-settings-control-size);
            font-weight: var(--tool-settings-control-weight);
            cursor: pointer;
            transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
        }

        .tool-page.asset-splitter-page .asset-grid-option[data-custom="true"] {
            grid-column: 1 / -1;
        }

        .tool-page.asset-splitter-page .asset-grid-option:hover:not(.is-active) {
            color: var(--asset-preset-text);
            background: var(--asset-preset-light);
            border-color: var(--asset-preset-mid);
        }

        .tool-page.asset-splitter-page .asset-grid-option.is-active {
            color: #fff;
            background: var(--asset-preset-fill);
            border-color: var(--asset-preset-accent);
        }

        .tool-page.asset-splitter-page .asset-grid-option.is-active:focus-visible {
            outline: 3px solid var(--asset-preset-accent);
            outline-offset: 2px;
        }

        .tool-page.asset-splitter-page .asset-custom-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }

        .tool-page.asset-splitter-page .asset-custom-grid[hidden] {
            display: none;
        }

        .tool-page.asset-splitter-page .asset-custom-field {
            min-width: 0;
        }

        .tool-page.asset-splitter-page .asset-custom-field label {
            display: block;
            margin-bottom: 3px;
            color: var(--text-muted);
            font-size: var(--tool-settings-label-size);
            font-weight: var(--tool-settings-label-weight);
            letter-spacing: 0.04em;
            line-height: 1.3;
        }

        .tool-page.asset-splitter-page .asset-custom-input {
            width: 100%;
            height: 41px;
            padding: 7px 10px;
            color: var(--text-color);
            background: var(--container-bg);
            border: 1px solid var(--tool-control-border, var(--border-color));
            border-radius: var(--radius);
            font: inherit;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .tool-page.asset-splitter-page .asset-custom-input:focus {
            outline: 0;
            border-color: var(--asset-preset-accent);
            box-shadow: 0 0 0 3px var(--asset-preset-light);
        }

        .tool-page.asset-splitter-page .asset-custom-input.is-invalid {
            border-color: var(--red);
        }

        .tool-page.asset-splitter-page .asset-grid-error {
            min-height: 16px;
            margin-top: 4px;
            color: var(--red-text);
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1.35;
        }

        .tool-page.asset-splitter-page .asset-grid-error:empty {
            display: none;
        }

        .tool-page.asset-splitter-page .asset-file-info.compact-file-info {
            overflow: visible !important;
        }

        .tool-page.asset-splitter-page .asset-file-name {
            flex: 1 1 auto;
        }

        .tool-page.asset-splitter-page .asset-position-toolbar {
            position: relative;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 2px;
            width: 40px;
            height: 20px;
            flex: 0 0 40px;
            margin-left: auto;
            padding: 0 3px;
            color: var(--asset-accent-text);
            background: var(--container-bg);
            border: 1px solid var(--asset-accent-mid);
            border-radius: 5px;
            cursor: pointer;
        }

        .tool-page.asset-splitter-page .asset-position-toolbar.is-visible {
            display: inline-flex;
        }

        .tool-page.asset-splitter-page .asset-position-toolbar > .material-symbols-outlined {
            font-size: 14px !important;
        }

        .tool-page.asset-splitter-page .asset-position-toolbar input {
            width: 13px;
            height: 13px;
            flex: 0 0 13px;
            margin: 0;
            accent-color: var(--asset-accent);
        }

        .tool-page.asset-splitter-page .asset-position-toolbar:has(input:checked) {
            background: var(--asset-accent-light);
        }

        .tool-page.asset-splitter-page .asset-position-toolbar:has(input:disabled) {
            cursor: not-allowed;
            opacity: 0.55;
        }

        .tool-page.asset-splitter-page .asset-position-help {
            position: absolute;
            z-index: 20;
            top: calc(100% + 6px);
            right: 0;
            width: max-content;
            max-width: min(250px, calc(100vw - 32px));
            padding: 6px 8px;
            color: var(--text-color);
            background: var(--container-bg);
            border: 1px solid var(--tool-control-border, var(--border-color));
            border-radius: 7px;
            box-shadow: var(--shadow-sm);
            font-size: 0.66rem;
            font-weight: 600;
            line-height: 1.35;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-2px);
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        .tool-page.asset-splitter-page .asset-position-toolbar:hover .asset-position-help,
        .tool-page.asset-splitter-page .asset-position-toolbar:focus-within .asset-position-help {
            opacity: 1;
            transform: translateY(0);
        }

        .tool-page.asset-splitter-page .asset-position-controls {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            margin: 0;
        }

        .tool-page.asset-splitter-page .asset-position-controls[hidden] {
            display: none;
        }

        .tool-page.asset-splitter-page .asset-position-reset {
            color: var(--text-muted);
            background: var(--container-bg);
            border: 1px solid var(--tool-control-border, var(--border-color));
            border-radius: 5px;
            cursor: pointer;
        }

        .tool-page.asset-splitter-page .asset-position-reset .material-symbols-outlined {
            font-size: 14px !important;
        }

        .tool-page.asset-splitter-page .asset-position-reset:hover:not(:disabled) {
            color: var(--asset-accent-text);
            background: var(--asset-accent-light);
            border-color: var(--asset-accent-mid);
        }

        .tool-page.asset-splitter-page .asset-position-reset:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }

        .tool-page.asset-splitter-page .asset-format-options {
            --tool-format-accent: var(--asset-accent);
            --tool-format-text: var(--asset-accent-text);
            --tool-format-soft: var(--asset-accent-light);
            --tool-format-border: var(--asset-accent-mid);
        }

        .tool-page.asset-splitter-page .asset-summary {
            display: grid;
            gap: 3px;
            margin-top: 12px;
            padding: 8px 10px;
            background: var(--asset-accent-light);
            border-radius: var(--radius);
        }

        .tool-page.asset-splitter-page .asset-summary p {
            color: var(--text-muted);
            font-size: var(--tool-settings-help-size);
            font-weight: var(--tool-settings-help-weight);
            line-height: 1.45;
        }

        .tool-page.asset-splitter-page .asset-summary p:first-child {
            color: var(--text-color);
            font-weight: 800;
        }

        .tool-page.asset-splitter-page .asset-download-area {
            margin-top: auto;
            padding-top: 10px;
        }

        .tool-page.asset-splitter-page .asset-download-button {
            display: inline-flex;
            width: 100%;
            min-height: 42px;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 9px 14px;
            color: #fff;
            background: var(--green-fill);
            border: 1px solid var(--green);
            border-radius: var(--radius);
            box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--green) 48%, transparent);
            font: inherit;
            font-size: 0.86rem;
            font-weight: 800;
            cursor: pointer;
            transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
        }

        .tool-page.asset-splitter-page .asset-download-button:hover:not(:disabled) {
            background: var(--green-fill-hover);
            border-color: var(--green);
            box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--green) 52%, transparent);
        }

        .tool-page.asset-splitter-page .asset-download-button:focus-visible {
            outline: 3px solid var(--green);
            outline-offset: 2px;
        }

        .tool-page.asset-splitter-page .asset-download-button:disabled {
            color: rgba(255, 255, 255, 0.78);
            background: rgba(34, 197, 94, 0.38);
            border-color: rgba(34, 197, 94, 0.08);
            box-shadow: none;
            cursor: not-allowed;
        }

        .tool-page.asset-splitter-page .asset-download-button .material-symbols-outlined {
            font-size: 19px;
        }

        .tool-page.asset-splitter-page .asset-download-status {
            min-height: 16px;
            margin-top: 5px;
            color: var(--text-muted);
            text-align: center;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .tool-page.asset-splitter-page .asset-download-status.is-success {
            color: var(--green-text);
        }

        @media (min-width: 769px) {
            body.tool-page.asset-splitter-page .site-header,
            .tool-page.asset-splitter-page .asset-splitter-workspace {
                width: min(
                    calc(100% - (var(--tool-page-gutter) * 2)),
                    var(--tool-page-width)
                ) !important;
                max-width: none !important;
                margin-inline: auto;
                box-sizing: border-box;
            }

            .tool-page.asset-splitter-page .asset-splitter-workspace {
                flex: 0 0 auto;
            }

            .tool-page.asset-splitter-page .main-container {
                display: flex;
                min-height: 0;
            }

            .tool-page.asset-splitter-page .asset-settings-panel {
                gap: 0;
                padding-right: var(--asset-panel-padding);
                padding-bottom: 8px;
                overflow-x: hidden !important;
                overflow-y: auto !important;
            }

            .tool-page.asset-splitter-page .asset-option-group {
                margin-top: 6px;
            }

            .tool-page.asset-splitter-page .asset-option-label {
                margin-bottom: 4px;
            }

            .tool-page.asset-splitter-page .asset-grid-options {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }

            .tool-page.asset-splitter-page .asset-grid-option {
                height: 36px;
                padding-inline: 3px;
                font-size: var(--tool-settings-control-size);
            }

            .tool-page.asset-splitter-page .asset-summary {
                margin-top: 6px;
                padding: 6px 8px;
            }

            .tool-page.asset-splitter-page .asset-summary p {
                font-size: var(--tool-settings-help-size);
            }

            .tool-page.asset-splitter-page .asset-download-area {
                padding-top: 6px;
            }

            .tool-page.asset-splitter-page .asset-download-status {
                margin-top: 3px;
                font-size: 0.64rem;
            }

            .tool-page.asset-splitter-page .tool-workspace-grid {
                height: auto;
                min-height: var(--asset-workspace-height);
                align-items: stretch;
            }

            .tool-page.asset-splitter-page .asset-preview-panel,
            .tool-page.asset-splitter-page .asset-settings-panel {
                height: auto !important;
                min-height: var(--asset-workspace-height);
                box-sizing: border-box;
            }

            .tool-page.asset-splitter-page .asset-drop-zone {
                flex: 1 1 0;
                min-height: 0;
                height: 100%;
            }

            .tool-page.asset-splitter-page .asset-preview-content {
                flex: 1 1 0;
                min-height: 0;
                height: auto;
                overflow: hidden;
            }

            .tool-page.asset-splitter-page .asset-file-info {
                flex: 0 0 auto;
                min-height: 0;
                margin-top: 8px;
            }
        }

        @media (max-width: 768px) {
            .tool-page.asset-splitter-page .asset-download-area {
                margin-top: 18px;
                padding-top: 0;
            }

        }

        @media (max-width: 420px) {
            .tool-page.asset-splitter-page .asset-file-meta {
                display: none;
            }
        }