.ps-hero { padding: 140px 0 40px; background: linear-gradient(180deg, #FFF9FB, #FDF2F8, #FFF9FB); text-align: center; }
.ps-hero h1 { font-size: clamp(2rem,4vw,3rem); margin-bottom:12px; }
.ps-hero p { max-width:520px; margin:0 auto; color:var(--color-text-light); }

.ps-section { padding: 40px 0 80px; background: var(--color-white); }
.ps-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }

/* Upload Area */
.ps-upload-area {
    background: var(--color-card);
    border: 2px dashed rgba(236,72,153,0.2);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    transition: var(--transition-base);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ps-upload-area.dragover { border-color: var(--color-rose-pink); background: var(--color-rose-light); }
.ps-upload-placeholder i { font-size: 3rem; color: var(--color-soft-pink); margin-bottom: 16px; }
.ps-upload-placeholder h3 { font-family: var(--font-body); margin-bottom: 8px; }
.ps-upload-placeholder p { font-size: 0.85rem; color: var(--color-text-lighter); margin-bottom: 20px; }

/* Preview Container */
.ps-preview-container { width: 100%; }
.ps-preview-toolbar { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.ps-preview-toolbar button {
    width: 40px; height: 40px;
    border-radius: 50%; border: 1px solid rgba(236,72,153,0.1);
    background: var(--color-white); color: var(--color-text);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--transition-base);
}
.ps-preview-toolbar button:hover { background: var(--color-rose-light); color: var(--color-rose-pink); }
.ps-image-wrapper {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #f5f5f5;
}
.ps-image-wrapper img { width: 100%; display: block; }
.ps-nail-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.nail-mockup {
    position: absolute;
    border-radius: 50% 50% 40% 40%;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}
.ps-compare { margin-top: 16px; text-align: center; }

/* Design Panel */
.ps-designs { background: var(--color-card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(236,72,153,0.04); }
.ps-design-header { margin-bottom: 16px; }
.ps-design-header h3 { font-family: var(--font-body); font-weight: 600; margin-bottom: 12px; }
.ps-design-search { position: relative; }
.ps-design-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-lighter); }
.ps-design-search input { width: 100%; padding: 10px 14px 10px 40px; border: 1px solid rgba(236,72,153,0.1); border-radius: 50px; font-family: var(--font-body); font-size: 0.85rem; outline: none; background: var(--color-bg); }
.ps-design-search input:focus { border-color: var(--color-rose-pink); }

.ps-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ps-cat { font-size: 0.7rem; padding: 5px 14px; border-radius: 50px; border: 1px solid rgba(236,72,153,0.1); background: var(--color-bg); color: var(--color-text-light); cursor: pointer; transition: var(--transition-base); font-family: var(--font-body); font-weight: 500; }
.ps-cat:hover, .ps-cat.active { background: var(--color-rose-pink); color: white; border-color: var(--color-rose-pink); }

.ps-design-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; max-height: 400px; overflow-y: auto; padding: 4px; }
.ps-design-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-base);
    position: relative;
}
.ps-design-item:hover { border-color: var(--color-rose-pink); }
.ps-design-item.selected { border-color: var(--color-rose-pink); box-shadow: 0 0 0 3px rgba(236,72,153,0.15); }
.ps-design-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ps-design-item span { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,0.5)); color: white; font-size: 0.65rem; font-weight: 500; }

.ps-selected-info { margin-top: 16px; padding: 16px; background: var(--color-bg); border-radius: var(--radius-md); }
.psi-card { display: flex; gap: 12px; margin-bottom: 12px; }
.psi-card img { width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; }
.psi-card strong { display: block; font-size: 0.9rem; }
.psi-card span { display: block; font-size: 0.8rem; }
.psi-actions { display: flex; gap: 8px; }
.psi-actions .btn { flex: 1; }

/* Steps */
.ps-how { background: var(--color-bg); padding: 80px 0; }
.ps-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.ps-step { text-align: center; }
.ps-step-num { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--color-soft-pink), var(--color-rose-pink)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; margin: 0 auto 12px; }
.ps-step h4 { font-family: var(--font-body); margin-bottom: 6px; }
.ps-step p { font-size: 0.8rem; color: var(--color-text-lighter); }

@media (max-width: 900px) { .ps-layout { grid-template-columns: 1fr; } .ps-steps { grid-template-columns: repeat(2,1fr); } .ps-design-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 600px) { .ps-design-grid { grid-template-columns: repeat(3,1fr); } .ps-steps { grid-template-columns: 1fr; gap: 20px; } .ps-upload-area { padding: 24px; min-height: 280px; } }