.pp-page { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); }

   
   .pp-ad-zone {
       margin: var(--space-3) 0;
       text-align: center;
       overflow: hidden;
       min-height: 1px;
   }
   .pp-ad-zone:empty { display: none; }
   .pp-ad-zone__wrap {
       display: inline-block;
       max-width: 100%;
       overflow: hidden;
   }
   .pp-ad-zone__wrap:empty { display: none; }
   .pp-ad--728 { display: block; }
   .pp-ad--300 { display: none; }
   @media (max-width: 768px) {
       .pp-ad--728 { display: none; }
       .pp-ad--300 { display: block; }
   }
   
   
   .pp-ad--sidebar {
       margin-top: var(--space-4);
       padding: 10px;
       background: var(--bg-primary);
       border: 1px dashed var(--gray-200);
       border-radius: 10px;
       min-height: 90px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .pp-ad--sidebar:empty::before {
       content: "Advertisement";
       font-size: 10px;
       color: var(--text-tertiary);
       letter-spacing: 0.5px;
       text-transform: uppercase;
       opacity: 0.4;
   }
   
   
   .pp-ad--inline {
       margin: var(--space-4) 0;
       padding: 12px;
       background: var(--bg-tertiary);
       border-radius: 10px;
       border: 1px solid var(--gray-100);
       min-height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .pp-ad--inline:empty::before {
       content: "Advertisement";
       font-size: 10px;
       color: var(--text-tertiary);
       letter-spacing: 0.5px;
       text-transform: uppercase;
       opacity: 0.4;
   }
   
   
   .pp-ad--bottom {
       max-width: 1180px;
       margin: var(--space-5) auto var(--space-4);
       text-align: center;
   }
   
   
   .pp-ad--processing {
       margin-top: var(--space-4);
       min-height: 90px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   
   .pp-ad--result {
       margin: var(--space-4) 0;
       padding: 12px;
       background: linear-gradient(135deg, rgba(99,102,241,0.03), rgba(99,102,241,0.01));
       border-radius: 10px;
       border: 1px solid var(--gray-100);
       min-height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   
   .pp-steps {
       display: flex;
       gap: 4px;
       margin-bottom: var(--space-5);
       padding: 6px;
       background: var(--bg-secondary);
       border-radius: 14px;
       border: 1px solid var(--gray-100);
   }
   .pp-step {
       flex: 1;
       text-align: center;
       padding: 10px 4px;
       font-size: 12px;
       font-weight: 600;
       color: var(--text-tertiary);
       background: transparent;
       border-radius: 10px;
       border: 2px solid transparent;
       transition: all 0.25s ease;
       cursor: default;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
   }
   .pp-step span {
       display: inline-flex;
       width: 22px; height: 22px;
       border-radius: 50%;
       background: var(--gray-200);
       color: var(--text-secondary);
       font-size: 11px;
       font-weight: 700;
       align-items: center;
       justify-content: center;
       transition: all 0.25s ease;
       flex-shrink: 0;
   }
   .pp-step.active {
       color: var(--primary-700);
       background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.02));
       border-color: var(--primary-300);
   }
   .pp-step.active span {
       background: linear-gradient(135deg, #7c3aed, #6366f1);
       color: #fff;
       box-shadow: 0 2px 6px rgba(99,102,241,0.3);
   }
   .pp-step.done { color: var(--text-secondary); }
   .pp-step.done span {
       background: #16a34a;
       color: #fff;
       box-shadow: 0 2px 4px rgba(22,163,74,0.2);
   }
   
   
   .pp-panel {
       background: var(--bg-secondary);
       border: 1px solid var(--gray-100);
       border-radius: 16px;
       padding: var(--space-5);
       margin-bottom: var(--space-4);
       box-shadow: 0 1px 4px rgba(0,0,0,0.03);
   }
   .pp-panel.hidden { display: none; }
   .pp-panel__head { margin-bottom: var(--space-4); }
   .pp-panel__head h2 {
       font-size: 20px;
       font-weight: 700;
       margin: 0;
       color: var(--text-primary);
       letter-spacing: -0.3px;
   }
   .pp-panel__head p {
       font-size: 13px;
       color: var(--text-secondary);
       margin: 4px 0 0;
   }
   
   .pp-nav {
       display: flex;
       justify-content: space-between;
       margin-top: var(--space-5);
       padding-top: var(--space-4);
       border-top: 1px solid var(--gray-100);
       gap: 10px;
   }
   .pp-nav .btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       border-radius: 10px;
   }
   .pp-nav .btn svg { flex-shrink: 0; }
   
   
   .pp-panel--split { padding: var(--space-5); }
   .pp-split {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
       gap: var(--space-5);
       align-items: start;
   }
   .pp-split__main { min-width: 0; }
   .pp-split__side { min-width: 0; }
   
   .pp-side-panel {
       background: var(--bg-tertiary);
       border: 1px solid var(--gray-100);
       border-radius: 12px;
       padding: var(--space-4);
       position: sticky;
       top: var(--space-4);
       display: flex;
       flex-direction: column;
       gap: var(--space-4);
   }
   .pp-side-section:last-child { margin-bottom: 0; }
   .pp-side-label {
       font-size: 11px;
       font-weight: 700;
       color: var(--text-tertiary);
       text-transform: uppercase;
       letter-spacing: 0.6px;
       margin-bottom: 10px;
   }
   .pp-side-hint {
       font-size: 11px;
       color: var(--text-tertiary);
       margin-top: 8px;
       display: flex;
       align-items: center;
       gap: 4px;
   }
   .pp-side-info {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       color: var(--text-secondary);
       padding: 10px 12px;
       background: var(--bg-primary);
       border-radius: 8px;
       border: 1px solid var(--gray-100);
   }
   .pp-side-info svg { flex-shrink: 0; }
   
   
   .pp-upload-intro {
       display: grid;
       grid-template-columns: 1fr auto;
       gap: 16px;
       align-items: center;
       margin-bottom: var(--space-4);
       padding: 14px 18px;
       background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(99,102,241,0.01));
       border: 1px solid rgba(99,102,241,0.12);
       border-radius: 12px;
   }
   .pp-upload-intro__features {
       display: flex;
       gap: 14px;
       flex-wrap: wrap;
       font-size: 12px;
       color: var(--text-secondary);
   }
   .pp-upload-intro__features span {
       display: inline-flex;
       align-items: center;
       gap: 4px;
   }
   .pp-upload-intro__features svg {
       color: #16a34a;
       flex-shrink: 0;
   }
   
   .pp-upload-grid {
       display: flex;
       gap: 14px;
       flex-wrap: wrap;
       justify-content: center;
   }
   .pp-upload-slot {
       width: 170px;
       height: 200px;
       border: 2.5px dashed var(--gray-200);
       border-radius: 14px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       position: relative;
       cursor: pointer;
       background: var(--bg-tertiary);
       overflow: hidden;
       font-size: 12px;
       font-weight: 500;
       color: var(--text-tertiary);
       transition: all 0.2s ease;
   }
   .pp-upload-slot:hover {
       border-color: var(--primary-300);
       background: rgba(99,102,241,0.02);
       transform: translateY(-1px);
   }
   .pp-upload-slot:hover .pp-upload-icon { color: var(--primary-500); }
   .pp-upload-slot.has-img {
       border-style: solid;
       border-color: var(--primary-400);
       box-shadow: 0 4px 12px rgba(99,102,241,0.12);
   }
   .pp-upload-slot--add {
       border-style: dashed;
       border-color: var(--gray-300);
   }
   .pp-upload-input {
       position: absolute;
       inset: 0;
       opacity: 0;
       cursor: pointer;
       z-index: 2;
   }
   .pp-upload-icon {
       margin-bottom: 8px;
       color: var(--text-tertiary);
       transition: color 0.15s;
   }
   
   .pp-upload-thumb {
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       inset: 0;
       width: 100%;
       height: 100%;
       min-height: 100%;
       object-fit: cover;
       z-index: 1;
       border-radius: 11px;
   }
   .pp-upload-thumb.hidden { display: none; }
   .pp-upload-placeholder { text-align: center; z-index: 1; }
   .pp-upload-remove {
       position: absolute;
       top: 8px; right: 8px;
       width: 26px; height: 26px;
       border-radius: 50%;
       background: rgba(239,68,68,0.95);
       color: #fff;
       border: none;
       cursor: pointer;
       font-size: 15px;
       line-height: 26px;
       z-index: 3;
       transition: all 0.15s;
       box-shadow: 0 2px 6px rgba(239,68,68,0.3);
   }
   .pp-upload-remove:hover {
       background: #dc2626;
       transform: scale(1.1);
   }
   .pp-upload-remove.hidden { display: none; }
   
   
   .pp-crop-wrap {
       background: #0f0f1a;
       border-radius: 12px;
       padding: 12px;
       border: 1px solid var(--gray-100);
   }
   
   .pp-crop-box {
       min-height: 240px;
       max-height: min(460px, 60vh);
       display: flex;
       align-items: center;
       justify-content: center;
       background: #0f0f1a;
       border-radius: 10px;
       overflow: hidden;
   }
   
   .pp-crop-box img {
       display: block;
       max-width: 100%;
       height: auto;
       max-height: min(460px, 60vh);
       object-fit: contain;
   }
   
   
   .pp-crop-tip {
       margin-top: 10px;
       padding: 8px 12px;
       background: var(--bg-tertiary);
       border-radius: 8px;
       font-size: 12px;
       color: var(--text-secondary);
       text-align: center;
       border: 1px solid var(--gray-100);
   }
   
   
   .pp-side-select {
       width: 100%;
       padding: 11px 12px;
       border: 1.5px solid var(--gray-200);
       border-radius: 8px;
       font-size: 13px;
       font-weight: 600;
       background: var(--bg-primary);
       color: var(--text-primary);
       cursor: pointer;
       transition: border-color 0.15s;
   }
   .pp-side-select:focus {
       border-color: var(--primary-400);
       outline: none;
   }
   .pp-side-select:hover { border-color: var(--primary-300); }
   
   .pp-side-custom {
       display: flex;
       align-items: center;
       gap: 6px;
       margin-top: 8px;
       padding: 8px;
       background: var(--bg-primary);
       border-radius: 8px;
       border: 1px solid var(--gray-100);
   }
   .pp-side-custom.hidden { display: none; }
   .pp-side-custom input[type="number"] {
       width: 50px;
       padding: 6px;
       text-align: center;
       border: 1.5px solid var(--gray-200);
       border-radius: 6px;
       font-size: 12px;
       background: var(--bg-primary);
   }
   .pp-side-custom input:focus {
       border-color: var(--primary-400);
       outline: none;
   }
   .pp-side-custom select {
       padding: 6px 8px;
       border: 1.5px solid var(--gray-200);
       border-radius: 6px;
       font-size: 12px;
       background: var(--bg-primary);
       flex: 1;
   }
   .pp-side-custom span {
       font-size: 12px;
       font-weight: 700;
       color: var(--text-secondary);
   }
   
   
   .pp-crop-tools {
       display: flex;
       gap: 4px;
       padding: 6px;
       background: var(--bg-primary);
       border-radius: 8px;
       border: 1px solid var(--gray-100);
   }
   .pp-crop-tools button {
       flex: 1;
       height: 38px;
       border: 1.5px solid var(--gray-200);
       border-radius: 7px;
       background: var(--bg-primary);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--text-secondary);
       transition: all 0.15s;
   }
   .pp-crop-tools button:hover {
       background: rgba(99,102,241,0.06);
       border-color: var(--primary-400);
       color: var(--primary-600);
   }
   
   
   .pp-sliders {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   .pp-sliders label {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 12px;
       color: var(--text-secondary);
       padding: 9px 10px;
       background: var(--bg-primary);
       border-radius: 8px;
       border: 1px solid var(--gray-100);
   }
   .pp-sliders label svg {
       flex-shrink: 0;
       color: var(--text-tertiary);
   }
   .pp-slider-name {
       font-size: 11px;
       min-width: 62px;
       font-weight: 500;
   }
   .pp-sliders input[type="range"] {
       flex: 1;
       height: 4px;
       accent-color: var(--primary-500);
   }
   .pp-sliders span:not(.pp-slider-name) {
       font-size: 11px;
       width: 40px;
       text-align: right;
       color: var(--text-tertiary);
       font-weight: 600;
   }
   
   
   .pp-bg-persons {
       display: flex;
       gap: 12px;
       justify-content: center;
       flex-wrap: wrap;
   }
   .pp-bg-person-card {
       border: 2px solid var(--gray-200);
       border-radius: 14px;
       overflow: hidden;
       text-align: center;
       width: 170px;
       position: relative;
       background: var(--bg-primary);
       box-shadow: 0 2px 8px rgba(0,0,0,0.04);
       transition: all 0.2s;
   }
   .pp-bg-person-card:hover {
       border-color: var(--primary-300);
       transform: translateY(-2px);
       box-shadow: 0 6px 14px rgba(0,0,0,0.08);
   }
   .pp-bg-person-card__label {
       font-size: 11px;
       font-weight: 600;
       padding: 7px;
       background: var(--bg-tertiary);
       border-bottom: 1px solid var(--gray-100);
       color: var(--text-secondary);
       letter-spacing: 0.3px;
   }
   .pp-bg-person-card__preview {
       width: 100%;
       height: 210px;
       object-fit: contain;
       display: block;
       background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50%/10px 10px;
   }
   .pp-bg-person-card__spinner {
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255,255,255,0.85);
       border-radius: 12px;
   }
   .pp-bg-person-card__spinner.hidden { display: none; }
   
   
   .pp-colors {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 10px;
       padding: 12px;
       background: var(--bg-primary);
       border-radius: 10px;
       border: 1px solid var(--gray-100);
   }
   .pp-color-btn {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
       cursor: pointer;
   }
   .pp-color-btn span {
       font-size: 10px;
       color: var(--text-tertiary);
       font-weight: 500;
   }
   .pp-color-btn.active .pp-color-swatch {
       border-color: var(--primary-600);
       box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
   }
   .pp-color-swatch {
       width: 38px; height: 38px;
       border-radius: 50%;
       border: 3px solid var(--gray-200);
       transition: all 0.15s;
   }
   .pp-color-swatch:hover {
       border-color: var(--primary-400);
       transform: scale(1.08);
   }
   .pp-color-swatch--checker {
       background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50%/8px 8px;
   }
   .pp-color-swatch--rainbow {
       background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) !important;
   }
   
   
   .pp-hex-panel {
       margin-top: 12px;
       padding: 12px;
       background: var(--bg-primary);
       border: 1px solid var(--gray-100);
       border-radius: 10px;
       display: none;
   }
   .pp-hex-panel.show { display: block; }
   
   .pp-hex-tabs {
       display: flex;
       gap: 4px;
       padding: 3px;
       background: var(--bg-tertiary);
       border-radius: 8px;
       margin-bottom: 10px;
   }
   .pp-hex-tab {
       flex: 1;
       padding: 6px 10px;
       border: none;
       background: transparent;
       border-radius: 6px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.5px;
       color: var(--text-tertiary);
       cursor: pointer;
       transition: all 0.15s;
   }
   .pp-hex-tab.active {
       background: var(--bg-primary);
       color: var(--primary-700);
       box-shadow: 0 1px 3px rgba(0,0,0,0.06);
   }
   
   .pp-hex-content { display: none; }
   .pp-hex-content.active { display: block; }
   
   .pp-hex-row {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 10px;
   }
   .pp-hex-preview {
       width: 36px; height: 36px;
       border-radius: 8px;
       border: 2px solid var(--gray-200);
       flex-shrink: 0;
       transition: background 0.15s;
   }
   .pp-hex-input-wrap {
       flex: 1;
       display: flex;
       align-items: center;
       background: var(--bg-tertiary);
       border: 1.5px solid var(--gray-200);
       border-radius: 8px;
       overflow: hidden;
       transition: border-color 0.15s;
   }
   .pp-hex-input-wrap:focus-within {
       border-color: var(--primary-400);
   }
   .pp-hex-input-wrap .pp-hex-hash {
       padding: 0 10px;
       color: var(--text-tertiary);
       font-weight: 700;
       font-size: 13px;
       border-right: 1px solid var(--gray-200);
       height: 32px;
       display: flex;
       align-items: center;
   }
   .pp-hex-input-wrap input {
       flex: 1;
       border: none;
       padding: 7px 10px;
       background: transparent;
       font-family: 'SF Mono', Monaco, monospace;
       font-size: 13px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: var(--text-primary);
       outline: none;
   }
   
   .pp-hex-presets {
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       gap: 6px;
   }
   .pp-hex-presets button {
       aspect-ratio: 1;
       border: 2px solid var(--gray-200);
       border-radius: 7px;
       cursor: pointer;
       transition: all 0.15s;
       padding: 0;
   }
   .pp-hex-presets button:hover {
       border-color: var(--primary-400);
       transform: scale(1.08);
   }
   
   .pp-hex-native {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;
   }
   .pp-hex-native input[type="color"] {
       width: 100%;
       height: 80px;
       border: 1.5px solid var(--gray-200);
       border-radius: 8px;
       cursor: pointer;
       background: var(--bg-tertiary);
       padding: 4px;
   }
   
   
   .pp-bg-status {
       font-size: 12px;
       color: var(--text-secondary);
       text-align: center;
       padding: 10px 14px;
       background: var(--bg-tertiary);
       border-radius: 10px;
       margin-top: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       border: 1px solid var(--gray-100);
   }
   .pp-inline-spin {
       display: inline-block;
       width: 14px; height: 14px;
       border: 2px solid var(--gray-200);
       border-top-color: var(--primary-600);
       border-radius: 50%;
       animation: pp-spin 0.7s linear infinite;
       vertical-align: middle;
   }
   
   
   .pp-print-persons {
       display: flex;
       gap: 10px;
       margin-bottom: 14px;
       flex-wrap: wrap;
   }
   .pp-print-person {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       background: var(--bg-tertiary);
       border-radius: 12px;
       border: 1px solid var(--gray-100);
       flex: 1;
       min-width: 180px;
   }
   .pp-print-person img {
       width: 44px; height: 56px;
       object-fit: cover;
       border-radius: 6px;
       border: 1px solid var(--gray-200);
       box-shadow: 0 1px 4px rgba(0,0,0,0.06);
   }
   .pp-print-person__info {
       font-size: 12px;
       font-weight: 600;
       color: var(--text-primary);
       margin-bottom: 4px;
   }
   .pp-print-copies {
       display: flex;
       align-items: center;
       gap: 4px;
   }
   .pp-print-copies button {
       width: 26px; height: 26px;
       border: 1.5px solid var(--gray-200);
       border-radius: 6px;
       background: var(--bg-primary);
       cursor: pointer;
       font-weight: 700;
       font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.12s;
   }
   .pp-print-copies button:hover {
       border-color: var(--primary-400);
       background: rgba(99,102,241,0.04);
   }
   .pp-print-copies input {
       width: 36px; height: 26px;
       text-align: center;
       border: 1.5px solid var(--gray-200);
       border-radius: 6px;
       font-size: 13px;
       font-weight: 600;
       background: var(--bg-primary);
   }
   
   
   .pp-paper-row {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 8px;
   }
   .pp-paper-btn {
       padding: 12px 10px 10px;
       border: 2px solid var(--gray-200);
       border-radius: 10px;
       background: var(--bg-primary);
       cursor: pointer;
       font-size: 12px;
       font-weight: 600;
       transition: all 0.15s;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
   }
   .pp-paper-btn:hover {
       border-color: var(--primary-300);
       transform: translateY(-1px);
   }
   .pp-paper-btn.active {
       border-color: var(--primary-500);
       background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.02));
       color: var(--primary-700);
       box-shadow: 0 2px 6px rgba(99,102,241,0.1);
   }
   .pp-paper-btn__icon {
       width: 22px;
       height: 28px;
       border: 1.5px solid currentColor;
       border-radius: 2px;
       opacity: 0.55;
       position: relative;
   }
   .pp-paper-btn__icon--4x6 { width: 20px; height: 30px; }
   .pp-paper-btn__icon--5x7 { width: 22px; height: 30px; }
   .pp-paper-btn__icon--a4 { width: 20px; height: 28px; }
   .pp-paper-btn__icon--a3 { width: 22px; height: 32px; }
   .pp-paper-btn__icon--custom::before {
       content: "?";
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       font-weight: 700;
   }
   .pp-paper-btn.active .pp-paper-btn__icon { opacity: 1; }
   
   
   .pp-var-group {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 6px;
   }
   .pp-var-btn {
       padding: 12px 8px;
       border: 2px solid var(--gray-200);
       border-radius: 8px;
       background: var(--bg-primary);
       cursor: pointer;
       font-size: 13px;
       font-weight: 700;
       transition: all 0.15s;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 2px;
   }
   .pp-var-btn:hover { border-color: var(--primary-300); }
   .pp-var-btn.active {
       border-color: var(--primary-500);
       background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.02));
       color: var(--primary-700);
   }
   .pp-var-btn small {
       font-size: 9px;
       font-weight: 500;
       color: var(--text-tertiary);
       letter-spacing: 0.3px;
   }
   .pp-var-btn.active small { color: var(--primary-600); }
   
   
   .pp-summary-card {
       display: grid;
       grid-template-columns: auto 1fr;
       gap: 12px;
       align-items: center;
       padding: 14px 16px;
       background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(99,102,241,0.01));
       border: 1px solid rgba(99,102,241,0.12);
       border-radius: 12px;
       margin-bottom: 14px;
   }
   .pp-summary-card__icon {
       width: 44px;
       height: 44px;
       border-radius: 10px;
       background: linear-gradient(135deg, #7c3aed, #6366f1);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       flex-shrink: 0;
       box-shadow: 0 4px 10px rgba(99,102,241,0.25);
   }
   .pp-summary-card__text { min-width: 0; }
   .pp-summary-card__title {
       font-size: 15px;
       font-weight: 700;
       color: var(--text-primary);
       margin-bottom: 2px;
       letter-spacing: -0.2px;
   }
   .pp-summary-card__meta {
       font-size: 11px;
       color: var(--text-secondary);
       line-height: 1.5;
   }
   
   
   .btn--generate {
       width: 100%;
       padding: 14px 20px;
       font-size: 15px;
       font-weight: 700;
       border-radius: 12px;
       background: linear-gradient(135deg, #7c3aed, #6366f1);
       color: #fff;
       border: none;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       transition: all 0.2s;
       box-shadow: 0 4px 14px rgba(99,102,241,0.3);
   }
   .btn--generate:hover {
       transform: translateY(-1px);
       box-shadow: 0 6px 20px rgba(99,102,241,0.4);
   }
   .btn--generate:active { transform: translateY(0); }
   
   
   .pp-output-wrap {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 16px;
       background: repeating-linear-gradient(45deg, #f6f6fa 0 10px, #f0f0f5 10px 20px);
       border-radius: 14px;
       margin-bottom: 14px;
       overflow: hidden;
       min-height: 300px;
       border: 1px solid var(--gray-100);
   }
   .pp-sheet-img {
       max-width: 100%;
       max-height: 520px;
       border-radius: 6px;
       box-shadow: 0 10px 30px rgba(0,0,0,0.15);
       display: block;
       transition: transform 0.3s ease;
       background: #fff;
   }
   .pp-sheet-img--rotated {
       transform: rotate(-90deg);
       max-height: 340px;
       max-width: 340px;
   }
   
   
   .pp-success-banner {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 16px;
       background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(22,163,74,0.02));
       border: 1px solid rgba(22,163,74,0.2);
       border-radius: 10px;
       margin-bottom: 12px;
       color: #15803d;
       font-size: 13px;
       font-weight: 600;
   }
   .pp-success-banner svg { flex-shrink: 0; }
   
   
   .pp-dl-row {
       display: flex;
       gap: 10px;
       justify-content: center;
       margin-bottom: 8px;
   }
   .pp-dl-row .btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       border-radius: 10px;
       flex: 1;
       justify-content: center;
   }
   .pp-dl-row .btn svg { flex-shrink: 0; }
   
   

   .pp-gen-overlay {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: var(--space-4);
       margin: var(--space-6) 0;
       background: var(--gray-50, #f8fafc);
       border: 1px solid var(--gray-200, #e2e8f0);
       border-radius: 20px;
       scroll-margin-top: 90px;   
   }
   .pp-gen-overlay.hidden { display: none; }
   .pp-gen-overlay__content {
       background: var(--bg-primary);
       border-radius: 20px;
       padding: 28px 24px;
       text-align: center;
       max-width: 380px;
       width: 100%;
       
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 14px;
   }
   .pp-gen-overlay__content > span {
       font-size: 15px;
       font-weight: 600;
       color: var(--text-primary);
   }
   
   
   .pp-spin {
       width: 30px;
       height: 30px;
       border: 3px solid var(--gray-200);
       border-top-color: var(--primary-600);
       border-radius: 50%;
       animation: pp-spin 0.7s linear infinite;
   }
   @keyframes pp-spin { to { transform: rotate(360deg); } }
   
   
   .hidden { display: none !important; }
   
   
   @media (max-width: 960px) {
       .pp-split {
           grid-template-columns: 1fr;
           gap: var(--space-4);
       }
       .pp-split__side { order: 2; }
       .pp-side-panel { position: static; }
       .pp-upload-intro {
           grid-template-columns: 1fr;
           text-align: center;
       }
       .pp-upload-intro__features { justify-content: center; }
   }
 
.pp-bg-mode {
    display: flex;
    gap: 12px;
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
}
.pp-bg-mode-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 12px;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    color: #fff;
}
.pp-bg-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.pp-bg-mode-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


.pp-bg-mode-btn--normal {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 3px 10px rgba(22,163,74,0.3);
}
.pp-bg-mode-btn--normal.active {
    border-color: #064e3b;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.35), 0 3px 10px rgba(22,163,74,0.3);
}


.pp-bg-mode-btn--hd {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    box-shadow: 0 3px 10px rgba(99,102,241,0.3);
}
.pp-bg-mode-btn--hd.active {
    border-color: #312e81;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.35), 0 3px 10px rgba(99,102,241,0.3);
}

.pp-bg-mode-btn__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.pp-bg-mode-btn__sub {
    font-size: 11px;
    opacity: 0.92;
    font-weight: 500;
}

@media (max-width: 600px) {
    .pp-bg-mode { flex-direction: column; gap: 8px; }
}
   @media (max-width: 600px) {
       
       .pp-split { grid-template-columns: 1fr; }
       .pp-page { padding: 0 var(--space-2); }
       .pp-steps {
           flex-wrap: wrap;
           gap: 3px;
           padding: 4px;
       }
       .pp-step {
           font-size: 10px;
           padding: 8px 2px;
       }
       .pp-step span {
           width: 18px; height: 18px;
           font-size: 9px;
       }
       .pp-upload-slot {
           width: 130px;
           height: 160px;
       }
       .pp-nav {
           flex-direction: column;
           gap: 8px;
       }
       .pp-nav .btn {
           width: 100%;
           justify-content: center;
       }
       .pp-panel { padding: var(--space-4); }
       .pp-panel__head h2 { font-size: 18px; }
       .pp-sliders label {
           font-size: 11px;
           padding: 7px 8px;
       }
       .pp-slider-name { min-width: 54px; }
       .pp-sheet-img--rotated {
           max-height: 280px;
           max-width: 280px;
       }
       .pp-output-wrap { min-height: 240px; }
       .pp-colors { grid-template-columns: repeat(4, 1fr); gap: 8px; }
       .pp-color-swatch { width: 34px; height: 34px; }
       .pp-paper-row { grid-template-columns: 1fr 1fr; }
       .pp-dl-row { flex-direction: column; }
       .pp-print-person { min-width: 100%; }
   }