/* ============================================================
   app-pink-page.css — 粉色 Kawaii 页面主题覆盖层
   在 app-common.css 之后引入，将页面重新设计为浅粉白色调
   适用于：wenshengtu / wenshengshipin / tushengshipincommon 等页面
   字体：系统中文无衬线优先 + Noto Sans SC 兜底
   ============================================================ */

/* ========== Theme Variables ========== */
.zib-app {
    --app-primary: #ff6b9d;
    --app-primary-dark: #e91e63;
    --app-primary-rgb: 255, 107, 157;
    --app-accent: #c850c0;
    --app-accent-dark: #a040a0;
    --app-accent-rgb: 200, 80, 192;
    --app-text: #333;
    --app-text-light: #555;
    --app-text-muted: #999;
    --app-bg: transparent;
    --app-bg-card: #ffffff;
    --app-border: #ffd1dc;
    --app-danger: #ff4757;
    --app-success: #2ed573;
    --app-font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Helvetica, Arial, sans-serif;
    --app-font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Helvetica, Arial, sans-serif;
    --app-gradient-primary: linear-gradient(135deg, #ff6b9d 0%, #c850c0 100%);
    --app-gradient-accent: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --app-gradient-btn: linear-gradient(135deg, #ff6b9d 0%, #c850c0 50%, #a855f7 100%);
    --app-shadow-card: 0 4px 24px rgba(255, 107, 157, 0.1), 0 1px 3px rgba(0, 0, 0, 0.04);
    --app-shadow-card-hover: 0 8px 32px rgba(255, 107, 157, 0.18);
    --app-shadow-btn: 0 6px 24px rgba(255, 107, 157, 0.35);
}

/* ========== Main Container ========== */
.zib-app .main-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
    font-family: var(--app-font-body);
    font-size: 15px;
    color: var(--app-text);
}
.zib-app .main-container::before { display: none; }

/* ========== Page Header ========== */
.page-header-pink {
    text-align: center;
    padding: 20px 16px 16px;
    animation: pinkFadeDown 0.6s ease-out;
}
.zib-app #processing {
    text-align: center;
    font-family: var(--app-font-display);
    font-size: 28px;
    font-weight: 700;
    background: var(--app-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px;
    text-shadow: none;
    line-height: 1.3;
    transition: none;
}
.balance-info-pink {
    font-size: 14px;
    color: var(--app-text-muted);
    margin: 0 0 12px;
}
.balance-info-pink p { margin: 0; }

.feature-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-primary-dark);
    background: #fff;
    border: 1px solid #ffd1dc;
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.08);
    transition: all 0.2s ease;
}
.feature-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.15);
}

/* ========== Tab Navigation ========== */
.zib-app .tab-nav {
    background: #fff;
    border: 1px solid rgba(255, 209, 220, 0.5);
    border-radius: 16px;
    padding: 5px;
    margin: 0 0 16px;
    box-shadow: var(--app-shadow-card);
    gap: 4px;
}
.zib-app .main-container .tab-nav .tab-btn {
    border: 1.5px solid rgba(255, 107, 157, 0.25) !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--app-text-light) !important;
    font-size: 14px !important;
    font-weight: 600;
    font-family: var(--app-font-body);
    box-shadow: none !important;
    transition: all 0.3s ease;
    padding: 8px 12px !important;
    min-width: auto !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4;
}
.zib-app .main-container .tab-nav .tab-btn::before { display: none !important; }
.zib-app .main-container .tab-nav .tab-btn:hover {
    background: #fff5f8 !important;
    color: var(--app-primary-dark) !important;
    transform: none !important;
    animation: none !important;
}
.zib-app .main-container .tab-nav .tab-btn.active {
    background: var(--app-gradient-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255, 107, 157, 0.3) !important;
    transform: none !important;
    animation: none !important;
}

/* ========== Prompt Section ========== */
.zib-app .prompt-section {
    background: #fff;
    border: 1px solid rgba(255, 209, 220, 0.5);
    border-radius: 20px;
    box-shadow: var(--app-shadow-card);
    padding: 24px;
    margin: 0 0 16px;
    overflow: visible;
}
.zib-app .prompt-section::before { display: none; }

.zib-app .prompt-section h3 {
    color: var(--app-primary-dark);
    font-family: var(--app-font-display);
    font-size: 20px;
    font-weight: 700;
    text-shadow: none;
    margin-bottom: 12px;
    text-align: left;
}
.zib-app .notice-text {
    color: var(--app-text-light);
    font-size: 13px;
    font-weight: 400;
    text-shadow: none;
    background: #fff5f8;
    border: 1px solid rgba(255, 209, 220, 0.5);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    line-height: 1.65;
}
.zib-app .notice-text a {
    color: var(--app-primary) !important;
    font-weight: 600;
    text-decoration: underline;
}

/* ===== Prompt Fields ===== */
.zib-app .prompt-field label {
    color: var(--app-primary-dark);
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
    font-family: var(--app-font-body);
}
.zib-app .prompt-field textarea {
    border: 1.5px solid #e8e8e8;
    background: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--app-font-body);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.zib-app .prompt-field textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.12);
    outline: none;
}
.zib-app .prompt-row .prompt-field.prompt-main textarea {
    min-height: 240px;
}

.zib-app .prompt-field.prompt-main,
.zib-app .prompt-field.prompt-examples-wrap,
.zib-app .prompt-field.prompt-negative,
.zib-app .prompt-field.prompt-size,
.zib-app .prompt-field.prompt-negative-full {
    background: #fff8fa;
    border: 1px solid rgba(255, 209, 220, 0.3);
    box-shadow: none;
    border-radius: 14px;
}

/* ===== Negative Prompt Full-Width Textarea ===== */
.zib-app .prompt-field.prompt-negative-full textarea {
    border: 1.5px solid #e8e8e8;
    background: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--app-font-body);
    min-height: 72px;
    max-height: none;
    padding: 12px 14px;
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.zib-app .prompt-field.prompt-negative-full textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.12);
    outline: none;
}
.zib-app .prompt-field.prompt-negative-full label {
    color: var(--app-primary-dark);
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
    font-family: var(--app-font-body);
}

/* ===== Secondary Row Textarea (wenshengshipin/tushengshipin) ===== */
.zib-app .prompt-row-secondary .prompt-field.prompt-negative textarea {
    border: 1.5px solid #e8e8e8;
    background: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--app-font-body);
    min-height: 72px;
    max-height: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.zib-app .prompt-row-secondary .prompt-field.prompt-negative textarea:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.12);
    outline: none;
}

/* ===== Prompt Examples ===== */
.zib-app .prompt-example {
    background: #fff;
    border: 1px solid rgba(255, 107, 157, 0.15);
    color: var(--app-text);
    font-size: 13px;
    border-radius: 10px;
    padding: 8px 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.5;
}
.zib-app .prompt-example:hover {
    background: #fff5f8;
    border-color: rgba(255, 107, 157, 0.35);
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.1);
    transform: translateY(-1px);
}

/* ===== Size Options ===== */
.zib-app .size-option {
    background: #fff;
    color: var(--app-text) !important;
    border: 1.5px solid rgba(255, 107, 157, 0.2);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    transition: all 0.2s ease;
}
.zib-app .size-option:hover {
    background: #fff5f8;
    border-color: rgba(255, 107, 157, 0.4);
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.1);
    transform: translateY(-1px);
}
.zib-app .size-option input[type="radio"] {
    accent-color: var(--app-primary);
}
.zib-app .prompt-field label.size-option {
    color: var(--app-text);
    text-shadow: none;
}

/* ========== Upload Section ========== */
.zib-app .upload-section {
    background: #fff;
    border: 1px solid rgba(255, 209, 220, 0.5);
    border-radius: 20px;
    box-shadow: var(--app-shadow-card);
    padding: 24px;
    margin: 0 0 16px;
    overflow: visible;
}
.zib-app .upload-section::before { display: none; }

.zib-app .upload-section h4 {
    color: var(--app-primary-dark);
    font-family: var(--app-font-body);
    font-size: 16px;
    font-weight: 700;
    text-shadow: none;
    margin-bottom: 14px;
    text-align: left;
}

.zib-app .upload-box {
    background: #fff8fa;
    border: 2px dashed #ffb3c6;
    border-radius: 16px;
    transition: all 0.3s ease;
}
.zib-app .upload-box:hover {
    border-color: var(--app-primary);
    background: #fff0f5;
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.1);
    transform: translateY(-2px);
}
.zib-app .upload-box.has-image {
    border-style: solid;
    border-color: var(--app-success);
    background: rgba(46, 213, 115, 0.04);
}
.zib-app .upload-box .upload-icon { font-size: 2.5rem; margin-bottom: 6px; }
.zib-app .upload-box .upload-icon svg { display: block; margin: 0 auto; }
.zib-app .upload-box .upload-label-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text-light);
}
.zib-app .upload-box .upload-hint {
    font-size: 13px;
    color: var(--app-text-muted);
}

/* WSV upload box variant */
.zib-app .upload-box-wsv {
    background: #fff8fa;
    border: 2px dashed #ffb3c6;
    border-radius: 16px;
    transition: all 0.3s ease;
}
.zib-app .upload-box-wsv:hover {
    border-color: var(--app-primary);
    background: #fff0f5;
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.1);
    transform: translateY(-2px);
}
.zib-app .upload-box-wsv.has-image {
    border-style: solid;
    border-color: var(--app-success);
    background: rgba(46, 213, 115, 0.04);
}
.zib-app .upload-icon-wsv { font-size: 2.5rem; }
.zib-app .upload-label-wsv {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text-light);
}
.zib-app .upload-hint-wsv {
    font-size: 13px;
    color: var(--app-text-muted);
}
#face-upload-status-wsv {
    margin-top: 8px;
    font-size: 13px;
    color: var(--app-text-muted);
    text-align: center;
}

/* ========== Actions Section ========== */
.zib-app #actions {
    background: #fff;
    border: 1px solid rgba(255, 209, 220, 0.5);
    border-radius: 20px;
    box-shadow: var(--app-shadow-card);
    padding: 20px 24px;
    margin: 0 0 16px;
    text-align: center;
    overflow: visible;
}
.zib-app #actions::before { display: none; }
.zib-app #actions p {
    color: var(--app-text-light);
    font-size: 14px;
    font-weight: 500;
    text-shadow: none;
    margin: 10px 0 0;
}

/* ========== Buttons ========== */
.zib-app .main-container button#submit-btn,
.zib-app .main-container button#submit-cropped-image {
    font-family: var(--app-font-body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    padding: 14px 36px;
    border-radius: 100px;
    background: var(--app-gradient-btn);
    background-size: 200% 100%;
    color: #fff;
    border: none;
    box-shadow: var(--app-shadow-btn);
    transition: all 0.3s ease;
    text-transform: none;
    min-width: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.zib-app .main-container button#submit-btn::before,
.zib-app .main-container button#submit-cropped-image::before {
    display: none;
}
.zib-app .main-container button#submit-btn:hover:not(:disabled),
.zib-app .main-container button#submit-cropped-image:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(255, 107, 157, 0.45);
    background-position: 100% 0;
    animation: none;
}
.zib-app .main-container button#submit-btn:disabled,
.zib-app .main-container button#submit-cropped-image:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(30%);
    animation: none;
}

/* .btn upload labels */
.zib-app .main-container .btn,
.zib-app .main-container .btn.action-upload-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--app-font-body);
    padding: 10px 24px;
    text-transform: none;
    min-width: auto;
    transition: all 0.25s ease;
}
.zib-app .main-container .btn:hover,
.zib-app .main-container .btn.action-upload-btn:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
    animation: none;
}
.zib-app .main-container .btn::before,
.zib-app .main-container .btn.action-upload-btn::before {
    display: none;
}

/* Upload label (.btn style for label elements) */
.zib-app .main-container .upload-label {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 24px;
    text-transform: none;
    min-width: auto;
}
.zib-app .main-container .upload-label:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    animation: none;
}
.zib-app .main-container .upload-label::before { display: none; }

/* Download button */
.zib-app .main-container .dddown_btn {
    font-family: var(--app-font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 28px;
    border-radius: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff !important;
    text-transform: none;
    min-width: auto;
    margin: 0 4px;
    transition: all 0.25s ease;
    text-decoration: none;
}
.zib-app .main-container .dddown_btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
    animation: none;
}
.zib-app .main-container .dddown_btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(40%);
}

/* ========== Links ========== */
.zib-app a.good_common {
    color: var(--app-primary) !important;
    background: rgba(255, 107, 157, 0.08);
    border: 1px solid rgba(255, 107, 157, 0.2);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}
.zib-app a.good_common:hover {
    background: rgba(255, 107, 157, 0.15);
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.15);
}

/* ========== Result / Preview ========== */
.zib-app .centered { margin: 0 0 16px; }

.zib-app #image-preview-container {
    border: 2px dashed #ffd1dc;
    background: #fff8fa;
    border-radius: 16px;
    box-shadow: none;
}
.zib-app #image-preview-container:hover {
    border-color: #ffb3c6;
    box-shadow: 0 2px 10px rgba(255, 107, 157, 0.08);
}
.zib-app #image-preview-container::before {
    color: var(--app-primary);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--app-font-body);
}
.zib-app #image-to-crop,
.zib-app #output_image {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.zib-app .result-area {
    margin: 0 0 16px;
}
.zib-app .result-area img {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ========== Spinner / Loading ========== */
.zib-app .spinner {
    border-color: rgba(255, 107, 157, 0.15);
    border-top-color: var(--app-primary);
    width: 48px;
    height: 48px;
}
.zib-app #loading {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    border-radius: 14px;
}

/* ========== Tips Section ========== */
.zib-app .tips-section {
    background: #fff;
    border: 1px solid rgba(255, 209, 220, 0.5);
    border-radius: 20px;
    box-shadow: var(--app-shadow-card);
    padding: 24px;
    margin: 0 0 16px;
}
.zib-app .tips-section h4 {
    color: var(--app-primary-dark);
    font-family: var(--app-font-body);
    font-size: 18px;
    font-weight: 700;
    text-shadow: none;
    margin-bottom: 14px;
    text-align: left;
}
.zib-app .tips-section p {
    background: #fff8fa;
    border: 1px solid rgba(255, 209, 220, 0.3);
    border-radius: 12px;
    color: var(--app-text);
    font-size: 14px;
    padding: 12px 16px;
    box-shadow: none;
    line-height: 1.65;
    margin: 0 0 10px;
}
.zib-app .tips-section p:last-child { margin-bottom: 0; }
.zib-app .tips-section p a {
    color: var(--app-primary) !important;
    background: rgba(255, 107, 157, 0.08);
    border: 1px solid rgba(255, 107, 157, 0.15);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.zib-app .tips-section p a:hover {
    background: rgba(255, 107, 157, 0.15);
}

/* ========== Animations ========== */
@keyframes pinkFadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pinkFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .page-header-pink,
    .zib-app .prompt-section,
    .zib-app .upload-section,
    .zib-app #actions,
    .zib-app .tips-section {
        animation: none !important;
    }
}

/* ========== Responsive ========== */
@media screen and (max-width: 768px) {
    .zib-app #processing { font-size: 24px; }
    .zib-app .main-container { padding: 0 4px; }
    .page-header-pink { padding: 14px 10px 12px; }
    .feature-badges { gap: 6px; }
    .feature-badge { padding: 4px 10px; font-size: 12px; }
    .zib-app .prompt-section,
    .zib-app .upload-section,
    .zib-app #actions,
    .zib-app .tips-section { padding: 16px; border-radius: 16px; }
    .zib-app .prompt-section h3 { font-size: 18px; }
    .zib-app .main-container .tab-nav .tab-btn { font-size: 13px !important; padding: 6px 8px !important; }
    .zib-app .prompt-row,
    .zib-app .prompt-row-secondary { flex-direction: column; gap: 10px; }
    .zib-app .upload-boxes { flex-direction: column; align-items: center; }
    .zib-app .upload-box { max-width: 100%; width: 100%; }
    .zib-app .main-container button#submit-btn,
    .zib-app .main-container button#submit-cropped-image { font-size: 15px; padding: 12px 24px; }
    .zib-app .main-container .btn,
    .zib-app .main-container .btn.action-upload-btn { font-size: 14px; padding: 8px 18px; }
    .zib-app .size-option { width: 100%; justify-content: center; }
}
@media screen and (max-width: 480px) {
    .zib-app #processing { font-size: 20px; }
    .zib-app .prompt-section,
    .zib-app .upload-section,
    .zib-app #actions,
    .zib-app .tips-section { padding: 12px; border-radius: 14px; }
    .zib-app .main-container button#submit-btn,
    .zib-app .main-container button#submit-cropped-image { font-size: 14px; padding: 11px 20px; }
    .zib-app .main-container .dddown_btn { font-size: 14px; padding: 8px 20px; }
}