.compare-page {
    justify-content: flex-start;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-3xl);
}

.compare-page-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
}

.compare-page-title {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 0.98;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.compare-page-subtitle {
    margin: var(--spacing-sm) auto 0;
    max-width: 48rem;
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.35vw, 1.125rem);
    line-height: 1.6;
    text-wrap: balance;
}

.compare-stage-layout,
.compare-summary-layout {
    display: grid;
    gap: var(--spacing-base);
}

.compare-stage-layout {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
}

.compare-summary-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compare-stage-swap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-stage-panel.is-resolved {
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.compare-stage-panel:not(.is-resolved) {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.compare-stage-input-shell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-inline: auto;
}

.compare-stage-input-shell .dc-input-container,
.compare-stage-input-shell .dc-input {
    width: 100%;
}

.compare-stage-input-shell .dc-input-container:has(.compare-stage-picker-btn) .dc-input {
    padding-right: 2.5rem;
}

.compare-stage-card {
    min-height: 22rem;
    overflow: hidden;
}

.compare-stage-card[data-compare-side="left"] {
    border-color: rgba(11, 165, 233, 0.55);
}

.compare-stage-card[data-compare-side="left"]::after {
    background: linear-gradient(135deg, rgba(11, 165, 233, 0.95), rgba(103, 232, 249, 0.9));
}

.compare-stage-card[data-compare-side="right"] {
    border-color: rgba(94, 251, 120, 0.45);
}

.compare-stage-card[data-compare-side="right"]::after {
    background: linear-gradient(135deg, rgba(94, 251, 120, 0.95), rgba(187, 247, 208, 0.9));
}

.compare-stage-card:hover,
.compare-stage-card:focus,
.compare-stage-card:focus-visible,
.compare-stage-card:focus-within {
    transform: none;
    background-color: var(--dark-tr-0-bg);
    box-shadow: var(--shadow-standard);
    outline: none;
}

.compare-stage-card[data-compare-side="left"]:hover,
.compare-stage-card[data-compare-side="left"]:focus,
.compare-stage-card[data-compare-side="left"]:focus-visible,
.compare-stage-card[data-compare-side="left"]:focus-within {
    border-color: rgba(11, 165, 233, 0.55);
}

.compare-stage-card[data-compare-side="right"]:hover,
.compare-stage-card[data-compare-side="right"]:focus,
.compare-stage-card[data-compare-side="right"]:focus-visible,
.compare-stage-card[data-compare-side="right"]:focus-within {
    border-color: rgba(94, 251, 120, 0.45);
}

.compare-stage-card:hover::after,
.compare-stage-card:focus::after,
.compare-stage-card:focus-visible::after,
.compare-stage-card:focus-within::after {
    opacity: 0;
}

.compare-stage-card .deck-card-bg img {
    opacity: 0.5;
    filter: saturate(0.8) contrast(1.02);
}

.compare-stage-title {
    margin: 0;
    max-width: min(100%, 30rem);
}

.compare-side-label {
    font-weight: var(--font-weight-semibold);
}

.compare-side-label--left {
    color: var(--accent-color);
}

.compare-side-label--right {
    color: var(--accent-emerald);
}

.compare-stage-companion {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.compare-stage-companion span {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.compare-stage-reset-btn {
    width: 2rem;
    height: 2rem;
    background: var(--dark-tr-0-bg);
}

.compare-stage-reset-btn svg {
    width: 1rem;
    height: 1rem;
}

.compare-stage-stats-shell {
    margin-top: auto;
}

.compare-stage-stats-shell .dc-stat-item {
    background: rgba(8, 10, 14, 0.58);
}

.compare-section-stack,
.compare-section-panel {
    display: flex;
    flex-direction: column;
}

.compare-section-stack {
    gap: var(--spacing-4xl);
}

.compare-section-panel {
    gap: var(--spacing-sm);
}

@media (min-width: 640px) {
    .compare-section-stack.list-view .dc-sections-wrapper {
        display: block;
        column-count: 2;
        column-gap: var(--spacing-sm);
    }

    .compare-section-stack.list-view .dc-type-section {
        display: inline-block;
        width: 100%;
        margin-bottom: var(--spacing-sm);
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@media (min-width: 1024px) {
    .compare-section-stack.list-view .dc-sections-wrapper {
        column-count: 2;
    }
}

.compare-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-base);
    flex-wrap: wrap;
}

.compare-panel-title,
.compare-panel-meta {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.compare-add-cut-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-base);
}

.compare-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    text-align: center;
}

.compare-state-error {
    align-items: flex-start;
    color: var(--text-danger-color);
    text-align: left;
}

.compare-deck-stats,
.compare-summary-grid {
    width: 100%;
    max-width: none;
}

.compare-deck-stats.dc-builder-stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.compare-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: var(--spacing-sm);
}

.compare-summary-controls {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.compare-copy-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 0 0 auto;
    white-space: nowrap;
}

.compare-copy-button svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.compare-copy-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.compare-difference-export-textarea {
    width: 100%;
    min-height: 40vh;
    resize: vertical;
    font-family: var(--font-monospace);
    line-height: 1.5;
}

.compare-section-stack .dc-card-qty-input {
    width: 1.25rem;
    pointer-events: none;
}

.compare-row-actions {
    display: none;
}

.pp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color-dark-1);
    margin-bottom: var(--spacing-base);
}

.pp-tab {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.pp-tab:hover {
    color: var(--text-primary);
}

.pp-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.pp-tab-panel {
    display: none;
}

.pp-tab-panel.active {
    display: block;
}

.pp-deck-search {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(15, 16, 21, 0.5);
    border: var(--border-width-base) solid var(--border-color-dark-1);
    border-radius: var(--border-radius-base);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
}

.pp-deck-search:focus {
    border-color: var(--accent-color);
    outline: none;
}

.pp-deck-search::placeholder {
    color: var(--text-placeholder);
}

.pp-modal-deck-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-base);
    max-height: 55vh;
    overflow-y: auto;
    padding: var(--spacing-xs);
}

@media (min-width: 768px) {
    .pp-modal-deck-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pp-modal-deck-grid .dc-card {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                outline-color 0.3s ease,
                outline-offset 0.3s ease;
}

.pp-modal-bookmark-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 55vh;
    overflow-y: auto;
    border: var(--border-width-base) solid var(--border-color-dark-0);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xs);
}

.pp-modal-bookmark-list .deck-list-item {
    background-color: var(--dark-tr-0-bg);
    border-radius: var(--border-radius-base);
    border: var(--border-width-base) solid var(--border-color-dark-0);
    padding: var(--spacing-sm);
    cursor: pointer;
}

.pp-modal-bookmark-list .deck-list-item:hover {
    background-color: var(--input-tr-bg);
}

.pp-bm-header {
    padding-left: var(--spacing-base);
    padding-right: var(--spacing-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

@media (min-width: 768px) {
    .pp-modal-bookmark-list .deck-list-item .deck-metadata-col {
        display: flex !important;
    }
}

.pp-modal-selectable {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.2s ease, border-color 0.3s ease;
}

.pp-modal-selectable.pp-selected {
    outline-color: var(--accent-color);
    border-color: var(--accent-color) !important;
}

.pp-url-input {
    width: 100%;
    padding: var(--spacing-sm);
    background: rgba(15, 16, 21, 0.5);
    border: var(--border-width-base) solid var(--border-color-dark-1);
    border-radius: var(--border-radius-base);
    color: var(--text-primary);
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
}

.pp-url-input:focus {
    border-color: var(--accent-color);
    outline: none;
}

.pp-url-hint {
    font-size: var(--font-size-xs);
    color: var(--text-inactive);
    margin-top: var(--spacing-xs);
}

.pp-deck-empty {
    text-align: center;
    padding: var(--spacing-2xl) 0;
    color: var(--text-inactive);
    font-size: var(--font-size-sm);
}

.pp-not-analyzed {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
}

.pp-loading {
    text-align: center;
    padding: var(--spacing-xl) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.dc-quantity-badge--add {
    background: var(--accent-emerald);
    color: #fff;
}

.dc-quantity-badge--cut {
    background: var(--danger-color);
    color: #fff;
}

.is-delta-add .dc-stat-value,
.card-entry-list.is-delta-add .dc-card-qty-input {
    color: rgba(94, 251, 120, 0.95);
}

.is-delta-cut .dc-stat-value,
.card-entry-list.is-delta-cut .dc-card-qty-input {
    color: rgba(255, 85, 85, 0.95);
}

.is-delta-qty .dc-stat-value,
.card-entry-list.is-delta-qty .dc-card-qty-input {
    color: rgba(255, 215, 0, 0.95);
}

.is-delta-move .dc-stat-value,
.card-entry-list.is-delta-move .dc-card-qty-input {
    color: rgba(11, 165, 233, 0.95);
}

@media (max-width: 960px) {
    .compare-stage-layout,
    .compare-summary-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-add-cut-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-summary-controls {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .compare-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .compare-deck-stats.dc-builder-stats-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .compare-deck-stats.dc-builder-stats-grid > .dc-stat-item:nth-child(-n + 3) {
        grid-column: span 2;
    }

    .compare-deck-stats.dc-builder-stats-grid > .dc-stat-item:nth-child(n + 4) {
        grid-column: span 3;
    }

    .compare-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-copy-button {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .dc-main-panel {
        min-height: 0;
    }
}