/* ==== 荣誉证书样式表 v2.0 ==== */
/* 从 app-core-v16.js buildCertHTML 中提取，独立维护 */

/* 字体加载 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&display=swap");

/* 离线字体回退 - P14 */
@font-face {
    font-family: 'CertSerif';
    src: local('Noto Serif SC'), local('STSong'), local('SimSun'), local('KaiTi'), local('serif');
    font-display: swap;
}

/* 字体回退计时器：3秒后若Noto Serif SC未加载，自动切换到系统字体 */
@keyframes fontFallback {
    0%, 99% { font-family: "Noto Serif SC", "STSong", "SimSun", "KaiTi", serif; }
    100% { font-family: "STSong", "SimSun", "KaiTi", serif; }
}

.cert-font-fallback {
    animation: fontFallback 3s forwards;
}

@page {
    size: A4 landscape;
    margin: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: radial-gradient(ellipse at 50% 30%, #efe0c5 0%, #d4b896 40%, #c0a078 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Serif SC", "STSong", "SimSun", "KaiTi", serif;
    padding: 30px;
}

.certificate {
    width: 950px;
    max-width: 100%;
    aspect-ratio: 297 / 210;
    background: linear-gradient(135deg, #FFFEF9 0%, #FDF5E0 25%, #FFF8EC 50%, #FDF3E0 75%, #FFFAF2 100%);
    position: relative;
    padding: 40px 48px 36px;
    box-shadow:
        0 18px 60px rgba(0,0,0,0.35),
        0 0 140px rgba(139,90,30,0.10);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139,105,20,0.02) 3px, rgba(139,105,20,0.02) 6px),
        radial-gradient(ellipse at 50% 6%, rgba(255,215,0,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 94%, rgba(139,105,20,0.04) 0%, transparent 50%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 风格色彩变量 */
.certificate.style-0 {
    --cert-main-color: #8B6914;
    --cert-accent-color: #6A1B9A;
    --cert-bg-tint: rgba(139,105,20,0.04);
    --cert-border-color: #DAA520;
    --cert-border-style: double;
}
.certificate.style-1 {
    --cert-main-color: #E65100;
    --cert-accent-color: #FF8F00;
    --cert-bg-tint: rgba(230,81,0,0.04);
    --cert-border-color: #FFAB40;
    --cert-border-style: solid;
}
.certificate.style-2 {
    --cert-main-color: #1565C0;
    --cert-accent-color: #0D47A1;
    --cert-bg-tint: rgba(21,101,192,0.04);
    --cert-border-color: #42A5F5;
    --cert-border-style: solid;
}
.certificate.style-3 {
    --cert-main-color: #6A1B9A;
    --cert-accent-color: #4A148C;
    --cert-bg-tint: rgba(106,27,154,0.04);
    --cert-border-color: #CE93D8;
    --cert-border-style: dashed;
}
.certificate.style-4 {
    --cert-main-color: #00838F;
    --cert-accent-color: #006064;
    --cert-bg-tint: rgba(0,131,143,0.04);
    --cert-border-color: #4DD0E1;
    --cert-border-style: dotted;
}
.certificate.style-5 {
    --cert-main-color: #2E7D32;
    --cert-accent-color: #1B5E20;
    --cert-bg-tint: rgba(46,125,50,0.04);
    --cert-border-color: #66BB6A;
    --cert-border-style: solid;
}
.certificate.style-6 {
    --cert-main-color: #BF360C;
    --cert-accent-color: #870000;
    --cert-bg-tint: rgba(191,54,12,0.04);
    --cert-border-color: #FF7043;
    --cert-border-style: solid;
}
.certificate.style-7 {
    --cert-main-color: #6D4C41;
    --cert-accent-color: #4E342E;
    --cert-bg-tint: rgba(109,76,65,0.04);
    --cert-border-color: #A1887F;
    --cert-border-style: double;
}
.certificate.style-8 {
    --cert-main-color: #558B2F;
    --cert-accent-color: #33691E;
    --cert-bg-tint: rgba(85,139,47,0.04);
    --cert-border-color: #AED581;
    --cert-border-style: dotted;
}
.certificate.style-9 {
    --cert-main-color: #D84315;
    --cert-accent-color: #BF360C;
    --cert-bg-tint: rgba(216,67,21,0.04);
    --cert-border-color: #FF8A65;
    --cert-border-style: double;
}

.cert-border-outer {
    position: absolute;
    inset: 12px;
    border: 4px solid #7A4A1E;
    pointer-events: none;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.10), 0 0 0 1px rgba(212,175,55,0.25);
}

.cert-border-outer-dash {
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(212,175,55,0.45);
    pointer-events: none;
}

.cert-border-inner {
    position: absolute;
    inset: 22px;
    border: 2px solid rgba(212,175,55,0.55);
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(139,69,19,0.06), 0 0 0 1px rgba(212,175,55,0.15);
}

.corner-diamond {
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #FFD700 0%, #DAA520 40%, #B8860B 100%);
    transform: rotate(45deg);
    pointer-events: none;
    border: 1.5px solid rgba(139,69,19,0.45);
    box-shadow: 0 2px 5px rgba(0,0,0,0.20), 0 0 8px rgba(255,215,0,0.25);
}
.corner-diamond.tl { top: 16px; left: 16px; }
.corner-diamond.tr { top: 16px; right: 16px; }
.corner-diamond.bl { bottom: 16px; left: 16px; }
.corner-diamond.br { bottom: 16px; right: 16px; }

.cert-header {
    text-align: center;
    position: relative;
    z-index: 1;
    padding-top: 2px;
    flex-shrink: 0;
}

/* P8: Logo 占位区 */
.cert-logo {
    display: inline-block;
    margin-bottom: 2px;
    max-height: 50px;
    vertical-align: middle;
}
.cert-logo img {
    max-height: 50px;
    width: auto;
}

.cert-wheat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 3px;
}
.cert-wheat-row .wheat {
    font-size: 18px;
    letter-spacing: 5px;
    color: #B8860B;
    text-shadow: 0 0 8px rgba(255,215,0,0.35);
}
.cert-wheat-bar {
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37 20%, #FFD700 50%, #D4AF37 80%, transparent);
    border-radius: 1px;
}

.cert-subtitle {
    font-family: "KaiTi", "楷体", "STKaiti", serif;
    font-size: 14px;
    color: #8B6914;
    letter-spacing: 6px;
    margin-bottom: 2px;
}

.cert-title {
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(180deg, #B8860B 0%, #E6C84C 20%, #FFD700 40%, #FFF8DC 55%, #FFD700 70%, #DAA520 85%, #8B6914 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #B8860B;
    letter-spacing: 14px;
    margin: 2px 0 2px;
    filter:
        drop-shadow(0 1px 0 #FFF8DC)
        drop-shadow(0 3px 0 #DAA520)
        drop-shadow(0 5px 2px rgba(139,105,20,0.50))
        drop-shadow(0 8px 6px rgba(139,105,20,0.35))
        drop-shadow(0 10px 14px rgba(139,105,20,0.25))
        drop-shadow(0 0 12px rgba(255,215,0,0.35));
}

.cert-star-divider {
    font-size: 13px;
    color: #DAA520;
    letter-spacing: 10px;
    margin: 0;
}

.cert-style-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 0 4px;
    border-top: 1px dotted rgba(212,175,55,0.3);
    border-bottom: 1px dotted rgba(212,175,55,0.3);
    margin: 6px 12px 8px;
    flex-shrink: 0;
    display: none !important;
}
.cert-style-bar .style-label {
    font-size: 12px;
    color: #8B7355;
    font-family: "KaiTi", "楷体", serif;
    letter-spacing: 1px;
    white-space: nowrap;
}
.cert-style-select {
    font-family: "KaiTi", "楷体", "STKaiti", serif;
    font-size: 12px;
    padding: 3px 28px 3px 8px;
    border: 1px solid #D4AF37;
    border-radius: 4px;
    background: rgba(255,248,236,0.9);
    color: #5A3E0B;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23D4AF37'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.cert-style-select:hover {
    border-color: #B8860B;
    background: rgba(255,252,240,1);
}
.cert-style-select:focus {
    box-shadow: 0 0 0 2px rgba(212,175,55,0.25);
}

.cert-body-wrap {
    display: flex;
    gap: 22px;
    padding: 0 6px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
}

.cert-left {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.cert-right {
    flex: 0.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cert-greeting {
    font-size: 18px;
    color: #4A3828;
    margin-bottom: 4px;
    line-height: 1.6;
    letter-spacing: 1px;
}
.cert-greeting .sname {
    font-weight: 900;
    font-size: 30px;
    color: #3A1800;
    border-bottom: 3px solid #D4AF37;
    padding-bottom: 3px;
}

.cert-encouragement {
    font-size: 22px;
    color: #3A3028;
    line-height: 1.8;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    text-indent: 2em;
    padding: 10px 0;
    border-top: 1px solid rgba(212,175,55,0.30);
    border-bottom: 1px solid rgba(212,175,55,0.30);
}

.cert-closing-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.cert-gold-bar {
    width: 3px;
    height: 30px;
    background: linear-gradient(180deg, #FFD700, #D4AF37, #B8860B);
    border-radius: 1px;
    flex-shrink: 0;
}

.cert-closing {
    font-size: 15px;
    color: #C0392B;
    font-weight: 700;
    letter-spacing: 2px;
}

.cert-pet-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cert-pet-circle {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 3px solid rgba(212,175,55,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 40% 35%, #fffef5 0%, #fef9e7 55%, rgba(255,220,160,0.35) 100%);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.20),
        0 0 80px rgba(255,180,80,0.30),
        inset 0 -6px 12px rgba(0,0,0,0.08),
        inset 0 3px 6px rgba(255,255,255,0.55),
        0 3px 0 rgba(139,69,19,0.12);
    position: relative;
}
.cert-pet-circle img {
    width: 92%;
    height: 92%;
    max-width: 240px;
    max-height: 240px;
    object-fit: contain;
    filter: brightness(1.08) contrast(1.05);
    border-radius: 50%;
    image-rendering: auto;
}
.cert-pet-circle .cert-pet-fallback {
    font-size: 160px;
    display: none;
}

.cert-pet-name-box {
    background: rgba(255,252,240,0.90);
    border: 1.5px solid #D4AF37;
    border-radius: 6px;
    padding: 4px 16px;
    text-align: center;
    box-shadow: 0 0 8px rgba(212,175,55,0.15);
}
.cert-pet-name-box .pet-name {
    font-size: 15px;
    font-weight: 700;
    color: #5A3E0B;
}
.cert-pet-name-box .pet-race {
    font-size: 11px;
    color: #8B7355;
}

.cert-seal {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 38% 38%, rgba(255,215,0,0.13) 0%, rgba(218,165,32,0.06) 45%, rgba(139,69,19,0.03) 100%);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(139,69,19,0.25), 0 0 50px rgba(255,215,0,0.22), inset 0 -3px 6px rgba(139,69,19,0.08);
}
.cert-seal-ring-outer {
    position: absolute;
    inset: 0;
    border: 4px solid #8B6914;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(139,69,19,0.35), 0 0 70px rgba(218,165,32,0.25), 0 2px 4px rgba(255,215,0,0.18), inset 0 2px 4px rgba(255,215,0,0.30), inset 0 -3px 8px rgba(139,69,19,0.28), inset 0 0 14px rgba(184,134,11,0.35);
}
.cert-seal-ring-mid {
    position: absolute;
    inset: 6px;
    border: 1.5px solid rgba(212,175,55,0.58);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(212,175,55,0.22);
}
.cert-seal-ring-inner {
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(218,165,32,0.72);
    border-radius: 50%;
}
.cert-seal-text {
    font-family: "KaiTi", "楷体", serif;
    font-size: 32px;
    font-weight: 900;
    color: #8B6914;
    letter-spacing: 8px;
    text-align: center;
    line-height: 1.04;
    z-index: 1;
    text-shadow:
        0 1px 0 #FFF8DC,
        0 3px 1px rgba(0,0,0,0.20),
        -1px -1px 0 rgba(255,255,255,0.30),
        1px 1px 0 rgba(0,0,0,0.12),
        0 5px 10px rgba(0,0,0,0.15);
}
.cert-seal-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,215,0,0.65);
    z-index: 2;
}
.cert-seal-unique {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    line-height: 1;
    gap: 0;
}
.cert-seal-unique span {
    font-family: "KaiTi", "楷体", serif;
    font-size: 12px;
    font-weight: 700;
    color: #B8860B;
    text-shadow: -1px -1px 0 rgba(255,248,220,0.7), 1px 1px 0 rgba(139,69,19,0.4), 0 2px 4px rgba(139,69,19,0.30), 0 0 6px rgba(255,215,0,0.2);
}
.cert-seal-year {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cert-seal-year svg {
    width: 100%;
    height: 100%;
}

.cert-stamp {
    position: relative;
    margin-top: -58px;
    right: -6px;
    width: 120px;
    height: 120px;
    z-index: 2;
    transform: rotate(-13deg);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cert-stamp-bg {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,30,58,0.04) 0%, rgba(196,30,58,0.08) 50%, rgba(196,30,58,0.02) 100%);
    pointer-events: none;
}
.cert-stamp-ring {
    position: absolute;
    inset: 0;
    border: 3px solid #C41E3A;
    border-radius: 50%;
    opacity: 0.72;
    box-shadow: 0 0 8px rgba(196,30,58,0.2), inset 0 0 4px rgba(196,30,58,0.06);
}
.cert-stamp-inner {
    position: absolute;
    inset: 16px;
    border: 1.5px solid #C41E3A;
    border-radius: 50%;
    opacity: 0.6;
    box-shadow: inset 0 0 3px rgba(196,30,58,0.1);
}
.cert-stamp-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #C41E3A;
    border-radius: 50%;
    opacity: 0.55;
}
.cert-stamp-dot.top { top: 10px; left: 50%; transform: translateX(-50%); }
.cert-stamp-dot.bottom { bottom: 10px; left: 50%; transform: translateX(-50%); }
.cert-stamp-dot.left { left: 10px; top: 50%; transform: translateY(-50%); }
.cert-stamp-dot.right { right: 10px; top: 50%; transform: translateY(-50%); }
.cert-stamp-text-ring {
    position: absolute;
    inset: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.cert-stamp-text-ring svg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.cert-stamp-center {
    font-family: "KaiTi","楷体","STKaiti",serif;
    font-size: 50px;
    font-weight: 700;
    color: #C41E3A;
    z-index: 3;
    opacity: 0.82;
    text-shadow: 0 0 4px rgba(196,30,58,0.25);
    line-height: 1;
}

.cert-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    padding: 0 6px;
    margin-top: 6px;
    flex-shrink: 0;
}
.cert-info-left {
    font-size: 11px;
    color: #A09080;
    line-height: 1.7;
}
.cert-info-left .lbl {
    color: #8B6914;
}
.cert-no-box {
    display: inline-block;
    border: 1.5px solid #D4AF37;
    border-radius: 4px;
    padding: 2px 10px;
    color: #8B6914;
    font-size: 10px;
    letter-spacing: 0.5px;
}
.cert-info-right {
    text-align: right;
    position: relative;
    font-size: 18px;
    color: #888;
    line-height: 1.6;
}
.cert-issuer-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
}
.cert-issuer-row .issuer-label {
    white-space: nowrap;
    font-size: 18px;
}
.cert-signature-text {
    font-family: "KaiTi","楷体","STKaiti",serif;
    font-size: 20px;
    font-weight: 700;
    color: #4A2E0B;
    letter-spacing: 2px;
    border-bottom: 2px solid #8B7355;
    padding-bottom: 1px;
}

.cert-bottom-ornament {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 8px;
    flex-shrink: 0;
}
.cert-bottom-gold-line {
    width: 55%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37 20%, #FFD700 50%, #D4AF37 80%, transparent);
    margin: 0 auto 5px;
    border-radius: 1px;
}
.cert-bottom-motto {
    font-size: 12px;
    color: #A08060;
    letter-spacing: 2px;
    font-family: "KaiTi", "楷体", serif;
}

/* P12: PDF导出按钮（预览窗口中） */
.cert-action-bar {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    gap: 8px;
}
.cert-action-bar button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    font-family: inherit;
}
.cert-btn-pdf {
    background: linear-gradient(135deg, #C62828, #E53935);
}
.cert-btn-pdf:hover { background: linear-gradient(135deg, #B71C1C, #D32F2F); }
.cert-btn-close {
    background: linear-gradient(135deg, #555, #777);
}
.cert-btn-close:hover { background: linear-gradient(135deg, #444, #666); }



/* P13: 移动端响应式 */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    .certificate {
        width: 100%;
        aspect-ratio: auto;
        min-height: auto;
        padding: 20px 16px 16px;
        flex-direction: column;
    }
    .cert-body-wrap {
        flex-direction: column;
        gap: 12px;
    }
    .cert-left {
        flex: auto;
        order: 1;
    }
    .cert-right {
        flex: auto;
        order: 2;
    }
    .cert-pet-circle {
        width: 140px;
        height: 140px;
    }
    .cert-pet-circle img {
        max-width: 150px;
        max-height: 150px;
    }
    .cert-title {
        font-size: 28px;
        letter-spacing: 8px;
    }
    .cert-encouragement {
        font-size: 16px;
        line-height: 1.6;
    }
    .cert-greeting .sname {
        font-size: 22px;
    }
    .cert-seal {
        width: 50px;
        height: 50px;
        top: 10px;
        left: 10px;
    }
    .cert-seal-text {
        font-size: 20px;
    }
    .cert-stamp {
        width: 80px;
        height: 80px;
        margin-top: -30px;
    }
    .cert-stamp-center {
        font-size: 34px;
    }
}

/* === 打印样式 - 降级到 window.print() 时使用 === */
@media print {
  @page {
    size: landscape;
    margin: 5mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  .certificate {
    width: 297mm !important;
    height: 210mm !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    padding: 35px 42px 30px !important;
    box-shadow: none !important;
    border: 1px solid #e0d6b8 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    position: relative !important;
  }
  .cert-action-bar {
    display: none !important;
  }
  .cert-style-bar {
    display: none !important;
  }
  .cert-pet-circle img {
    filter: none !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }
  .cert-pet-circle {
    box-shadow: none !important;
  }
  .cert-border-outer, .cert-border-outer-dash, .cert-border-inner {
    box-shadow: none !important;
  }
  .corner-diamond {
    box-shadow: none !important;
  }
}