body.ap-gang-sheet-page .apgs-page,
body.ap-gang-sheet-page .apgs-page * {
    box-sizing: border-box;
}

body.ap-gang-sheet-page .tp-header-area,
body.ap-gang-sheet-page footer,
body.ap-gang-sheet-page .tp-footer-area,
body.ap-gang-sheet-page .bottom-to-top-btn {
    display: none !important;
}

body.ap-gang-sheet-page main {
    padding: 0 !important;
}

.apgs-page {
    --apgs-bg:
        radial-gradient(circle at top left, rgba(255, 255, 255, .92), transparent 26%),
        linear-gradient(180deg, #f3f6fa 0%, #f8fafc 54%, #fbfcfd 100%);
    --apgs-panel: #ffffff;
    --apgs-panel-soft: #f7f9fc;
    --apgs-line: #e5eaf0;
    --apgs-line-strong: #d5dde7;
    --apgs-text: #14233b;
    --apgs-muted: #64748b;
    --apgs-accent: #e85d36;
    --apgs-accent-strong: #d94f28;
    --apgs-danger: #c84242;
    --apgs-success: #14835a;
    --apgs-warning: #c6851a;
    --apgs-control-height: 46px;
    --apgs-radius: 16px;
    --apgs-radius-lg: 22px;
    --apgs-shadow: 0 18px 42px rgba(15, 23, 42, .07);
    --apgs-toolbar-size: 44px;
    background: var(--apgs-bg);
    min-height: 100vh;
    padding: 18px 0 24px;
}

.apgs-shell {
    width: min(calc(100vw - 40px), 1880px);
    margin: 0 auto;
}

.apgs-topbar,
.apgs-card,
.apgs-main {
    background: var(--apgs-panel);
    border: 1px solid var(--apgs-line);
    border-radius: var(--apgs-radius-lg);
    box-shadow: var(--apgs-shadow);
}

.apgs-topbar {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 6px 16px;
}

.apgs-topbar h1,
.apgs-card h2 {
    margin: 0;
    color: var(--apgs-text);
}

.apgs-topbar h1 {
    font-size: 1.18rem !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.apgs-topbar p,
.apgs-card p,
.apgs-main-meta,
.apgs-eyebrow {
    margin: 0;
    color: var(--apgs-muted);
}

.apgs-topbar p,
.apgs-card p {
    font-size: .84rem;
    line-height: 1.5;
}

.apgs-eyebrow {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.apgs-topbar-actions {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 96px repeat(4, minmax(96px, 108px));
    gap: 12px;
    align-items: end;
    min-width: min(100%, 980px);
    padding-inline: 4px;
}

.apgs-layout {
    display: grid;
    grid-template-columns: minmax(248px, 280px) minmax(0, 1fr) minmax(216px, 260px);
    gap: 16px;
    align-items: start;
    padding-inline: 6px;
}

.apgs-layout > * {
    min-width: 0;
}

.apgs-panel,
.apgs-panel-right {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.apgs-card {
    padding: 16px;
    min-width: 0;
    overflow: hidden;
}

.apgs-card-head {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.apgs-card-head h2 {
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.apgs-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--apgs-text);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.apgs-field input,
.apgs-field select {
    width: 100%;
    height: var(--apgs-control-height);
    min-height: var(--apgs-control-height);
    padding: 0 15px;
    border: 1px solid var(--apgs-line-strong);
    border-radius: var(--apgs-radius);
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
    color: var(--apgs-text);
    font-size: .95rem;
    box-shadow: none;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.apgs-field input:focus,
.apgs-field select:focus {
    outline: 0;
    background: #fff;
    border-color: #bdc9d8;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .06);
}

.apgs-field input[type="range"] {
    height: auto;
    min-height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.apgs-field-qty {
    width: 88px;
}

.apgs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--apgs-control-height);
    height: var(--apgs-control-height);
    padding: 0 14px;
    border: 1px solid var(--apgs-line-strong);
    border-radius: var(--apgs-radius);
    background: var(--apgs-panel-soft);
    color: var(--apgs-text);
    font-size: .89rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    box-shadow: none;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.apgs-btn:hover {
    background: #fff;
    border-color: #c3cfdd;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.apgs-btn-primary,
.apgs-btn#apgs-save-btn {
    background: linear-gradient(180deg, #ee6e48 0%, var(--apgs-accent) 100%);
    color: #fff;
    border-color: var(--apgs-accent);
}

.apgs-btn-primary:hover,
.apgs-btn#apgs-save-btn:hover {
    background: linear-gradient(180deg, #e2643e 0%, var(--apgs-accent-strong) 100%);
    border-color: var(--apgs-accent-strong);
}

.apgs-btn-secondary {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.apgs-btn-block,
.apgs-preview-actions .apgs-btn {
    width: 100%;
}

.apgs-btn-icon {
    justify-content: center;
}

.apgs-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.apgs-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block;
}

.apgs-upload {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px dashed #cfd8e3;
    border-radius: 16px;
    background: linear-gradient(180deg, #fcfdff 0%, #f5f8fb 100%);
    cursor: pointer;
    margin-bottom: 10px;
}

.apgs-upload input {
    display: none;
}

.apgs-upload-title {
    color: var(--apgs-text);
    font-weight: 700;
    font-size: .9rem;
}

.apgs-upload-subtitle {
    color: var(--apgs-muted);
    font-size: .8rem;
}

.apgs-upload-list,
.apgs-quality-list {
    display: grid;
    gap: 8px;
}

.apgs-upload-item,
.apgs-quality-item {
    border: 1px solid var(--apgs-line);
    border-radius: 14px;
    padding: 10px;
    background: #fcfdff;
    overflow: hidden;
}

.apgs-upload-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: linear-gradient(180deg, #f5f7fa 0%, #eef3f8 100%);
    border-radius: 12px;
    margin-bottom: 8px;
}

.apgs-upload-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.apgs-upload-row strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apgs-upload-row span {
    flex: 0 0 auto;
}

.apgs-upload-meta,
.apgs-quality-meta {
    font-size: .75rem;
    line-height: 1.4;
    color: var(--apgs-muted);
    overflow-wrap: anywhere;
}

.apgs-upload-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.apgs-upload-actions button {
    flex: 1;
    height: 34px;
    min-height: 34px;
    border: 1px solid var(--apgs-line);
    border-radius: 10px;
    background: #fff;
    color: var(--apgs-text);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1;
    appearance: none;
    transition: background-color .16s ease, border-color .16s ease;
}

.apgs-upload-actions button:hover {
    background: #f8fafc;
    border-color: #c8d3df;
}

.apgs-main {
    padding: 18px;
    min-width: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.apgs-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding-inline: 10px;
}

.apgs-main-head strong {
    font-size: .94rem;
    letter-spacing: -.01em;
}

.apgs-stage-wrap {
    min-height: calc(100vh - 116px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 22px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top, rgba(229, 235, 242, .9), transparent 42%),
        linear-gradient(180deg, #f7f9fc 0%, #edf2f7 100%);
    overflow: hidden;
}

.apgs-stage-legend {
    width: min(100%, 1000px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.apgs-stage {
    position: relative;
    width: min(100%, 1000px);
    max-width: 100%;
    border: 1px solid #cfd9e4;
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(221, 229, 237, .38) 1px, transparent 1px),
        linear-gradient(rgba(221, 229, 237, .38) 1px, transparent 1px),
        #ffffff;
    background-size: 32px 32px;
    box-shadow: inset 0 0 0 1px #eef3f8, 0 16px 36px rgba(19, 35, 58, .08);
}

.apgs-safe-zone {
    position: absolute;
    inset: 0;
    border: 1px dashed #8da1b7;
    pointer-events: none;
}

.apgs-stage-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(203, 213, 225, .95);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .1);
    color: #28415a;
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.apgs-stage-badge-print {
    border-color: rgba(148, 163, 184, .8);
}

.apgs-stage-badge-safe {
    border-color: rgba(96, 165, 250, .45);
    background: rgba(239, 246, 255, .95);
}

.apgs-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: var(--apgs-muted);
    font-size: .9rem;
    pointer-events: none;
}

.apgs-item {
    position: absolute;
    transform-origin: center center;
    cursor: move;
    user-select: none;
    z-index: 2;
}

.apgs-item.is-selected {
    outline: 2px solid #214f82;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(33, 79, 130, .08);
    z-index: 3;
}

.apgs-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.apgs-item-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #9eb0c4;
    background: #fff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}

.apgs-item-handle.resize {
    right: -9px;
    bottom: -9px;
    cursor: nwse-resize;
}

.apgs-item-handle.rotate {
    left: 50%;
    top: -24px;
    margin-left: -9px;
    cursor: grab;
}

.apgs-item-quickbar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(203, 213, 225, .95);
    border-radius: 999px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .14);
    transform: translate(-50%, calc(-100% - 10px));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.apgs-item-quickbar[data-position="bottom"] {
    transform: translate(-50%, 10px);
}

.apgs-item-quickbar button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #294158;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.apgs-item-quickbar button:hover {
    background: #e2e8f0;
    color: #172b41;
    transform: translateY(-1px);
}

.apgs-item-quickbar button.is-danger {
    background: #fff1f2;
    color: #c84242;
}

.apgs-item-quickbar button.is-danger:hover {
    background: #ffe4e7;
    color: #b42318;
}

.apgs-item-quickbar svg {
    width: 16px;
    height: 16px;
    display: block;
}

.apgs-item-dimensions {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    transform: translate(-50%, 10px);
    display: inline-block;
    max-width: 160px;
    padding: 0;
    color: #52667a;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .92);
}

.apgs-item-dimensions[data-position="top"] {
    transform: translate(-50%, calc(-100% - 10px));
}

.apgs-item-dimensions.is-selected {
    color: #163a5c;
}

.apgs-item-dimensions.is-hidden {
    display: none;
}

.apgs-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.apgs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--apgs-line);
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafd 0%, #f2f6fa 100%);
    margin-inline: 4px;
}

.apgs-toolbar button {
    width: var(--apgs-toolbar-size);
    height: var(--apgs-toolbar-size);
    min-height: var(--apgs-toolbar-size);
    flex: 0 0 var(--apgs-toolbar-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--apgs-line);
    border-radius: 12px;
    background: #fff;
    color: #30475f;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.apgs-toolbar button svg {
    width: 18px !important;
    height: 18px !important;
    display: block;
}

.apgs-toolbar button:hover {
    background: #fff;
    border-color: #c9d4e0;
    transform: translateY(-1px);
}

.apgs-toolbar .is-danger {
    color: var(--apgs-danger);
    background: #fff7f7;
}

.apgs-quality-overall {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: #f7f9fc;
    color: var(--apgs-text);
    font-size: .84rem;
    font-weight: 700;
}

.apgs-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 700;
}

.apgs-pill.excellent {
    background: rgba(20, 131, 90, .12);
    color: var(--apgs-success);
}

.apgs-pill.good {
    background: rgba(33, 115, 82, .1);
    color: #1e6f50;
}

.apgs-pill.ok {
    background: rgba(198, 133, 26, .12);
    color: var(--apgs-warning);
}

.apgs-pill.low {
    background: rgba(200, 66, 66, .12);
    color: var(--apgs-danger);
}

.apgs-preview-actions {
    display: grid;
    gap: 10px;
}

.apgs-preview-actions .apgs-btn {
    justify-content: center;
}

.apgs-btn.is-disabled {
    pointer-events: none;
    opacity: .45;
}

.apgs-btn:disabled {
    opacity: .55;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.apgs-alert {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #f0d49a;
    border-radius: 12px;
    background: #fff8e8;
    color: #7a5620;
    font-size: .84rem;
    font-weight: 600;
}

@media (max-width: 1480px) {
    .apgs-layout {
        grid-template-columns: minmax(236px, 260px) minmax(0, 1fr);
    }

    .apgs-panel-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .apgs-topbar-actions {
        grid-template-columns: minmax(300px, 1fr) 90px repeat(4, 94px);
    }
}

@media (max-width: 980px) {
    .apgs-shell {
        width: calc(100vw - 18px);
    }

    .apgs-layout {
        grid-template-columns: 1fr;
    }

    .apgs-panel-right {
        grid-template-columns: 1fr;
    }

    .apgs-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .apgs-topbar-actions {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr 92px repeat(4, minmax(88px, 92px));
        padding-inline: 0;
    }

    .apgs-layout {
        padding-inline: 0;
    }

    .apgs-stage-wrap {
        min-height: 520px;
    }
}

@media (max-width: 760px) {
    .apgs-topbar-actions {
        grid-template-columns: 1fr 1fr;
    }

    .apgs-field-qty,
    .apgs-topbar-actions .apgs-btn {
        width: 100%;
    }

    .apgs-layout {
        grid-template-columns: 1fr;
    }

    .apgs-panel-right {
        grid-template-columns: 1fr;
    }

    .apgs-stage {
        width: 100%;
    }

    .apgs-stage-wrap {
        padding: 16px;
        gap: 10px;
    }

    .apgs-stage-legend {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .apgs-stage-badge {
        max-width: 100%;
        padding: 7px 10px;
        font-size: .69rem;
        border-radius: 14px;
    }
}

@media (max-width: 520px) {
    .apgs-page {
        --apgs-control-height: 42px;
        --apgs-toolbar-size: 40px;
    }

    .apgs-shell {
        width: calc(100vw - 12px);
    }

    .apgs-topbar,
    .apgs-card,
    .apgs-main {
        border-radius: 16px;
    }

    .apgs-grid-2 {
        grid-template-columns: 1fr;
    }

    .apgs-item-quickbar {
        gap: 4px;
        padding: 3px;
    }

    .apgs-item-quickbar button {
        width: 30px;
        height: 30px;
        min-height: 30px;
        flex-basis: 30px;
    }

    .apgs-item-dimensions {
        max-width: 132px;
        font-size: .62rem;
    }
}