/* Warm gallery theme. Presentation only: existing content, controls and states are retained. */
@font-face{font-family:Fredoka;font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/fredoka-1.woff2') format('woff2')}
@font-face{font-family:Nunito;font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/nunito-2.woff2') format('woff2')}

:root{
  --ppl-bg:#FFF8F1;
  --ppl-glow-peach:#FFD6BC;
  --ppl-glow-honey:#FDE2B3;
  --ppl-glow-pink:#F8CDD5;
  --ppl-primary:#1F3D34;
  --ppl-primary-hover:#163029;
  --ppl-text:#1F2A26;
  --ppl-muted:#6B5E55;
  --ppl-line:#EADBCB;
  --ppl-hot:#B9441D;
  --ppl-new:#E3EFE8;
  --ppl-accent-start:#D4542A;
  --ppl-accent-end:#E8902B;
  --ppl-card:#FFF;
  --ppl-radius:22px;
  --ppl-pill:999px;
  --ppl-shadow:0 10px 30px rgba(120,72,40,.10);
  --ppl-frame:#2E2A27;
  --ppl-frame-edges:#514A43 #25221F #1B1917 #423C36;
  --ppl-frame-shadow:inset 2px 3px 6px rgba(35,28,23,.38),inset -1px -1px 2px rgba(35,28,23,.14),0 0 0 1px rgba(25,21,18,.26),1px 4px 0 #211D19,3px 10px 14px -5px rgba(47,33,23,.34),8px 22px 32px -14px rgba(66,43,27,.28);
  --ppl-heading:Fredoka,system-ui,sans-serif;
  --ppl-body:Nunito,system-ui,sans-serif;
  --ppl-halo:radial-gradient(55% 70% at 12% 18%,var(--ppl-glow-peach) 0%,rgba(255,214,188,0) 70%),radial-gradient(45% 60% at 88% 25%,var(--ppl-glow-honey) 0%,rgba(253,226,179,0) 70%),radial-gradient(60% 60% at 55% 105%,var(--ppl-glow-pink) 0%,rgba(248,205,213,0) 70%);
  /* Aliases keep each existing page's stylesheet on the same palette. */
  --paper:var(--ppl-bg);--cream:var(--ppl-bg);--paper-2:#FFF0E4;--paper2:#FFF0E4;
  --ink:var(--ppl-text);--ink-soft:var(--ppl-muted);--muted:var(--ppl-muted);
  --green:var(--ppl-primary);--green-2:var(--ppl-primary-hover);--green2:var(--ppl-primary-hover);--forest:var(--ppl-primary);
  --green-tint:var(--ppl-new);--line:var(--ppl-line);
  --brass:var(--ppl-hot);--gold:var(--ppl-hot);--brass-soft:var(--ppl-glow-honey);--goldSoft:var(--ppl-glow-honey);--gold2:var(--ppl-glow-honey);
  --dusk:var(--ppl-primary);--dusk-tint:#F7EBF0;
  --serif:var(--ppl-heading);--sans:var(--ppl-body);--shadow:var(--ppl-shadow);--shadow-sm:var(--ppl-shadow);
}

body{background:var(--ppl-bg);color:var(--ppl-text);font-family:var(--ppl-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:var(--ppl-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--ppl-heading)!important;font-weight:500;letter-spacing:-.025em}
h1{font-weight:600;line-height:1.08}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--ppl-hot);outline-offset:4px}
::selection{background:var(--ppl-glow-peach);color:var(--ppl-primary)}
button{min-height:48px}
:is(.eyebrow,.hp-template-label,.k){color:var(--ppl-hot)}

/* Navigation, footers and shared chrome. */
.ppl-nav,.site-header{background:rgba(255,248,241,.96);border-color:var(--ppl-line);color:var(--ppl-text);font-family:var(--ppl-body)}
.ppl-brand,.brand,.logo,.ppl-footer-brand{font-family:var(--ppl-heading)!important;font-weight:600;color:var(--ppl-primary)}
.ppl-nav-row{gap:26px}
.ppl-desktop-nav>a,.ppl-nav-summary{color:var(--ppl-primary);font-weight:700}
.ppl-desktop-nav>a:hover,.ppl-nav-summary:hover{color:var(--ppl-hot)}
.ppl-nav-panel,.ppl-mobile-panel{background:var(--ppl-card);border-color:var(--ppl-line);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow)}
.ppl-nav-item{border-radius:14px;color:var(--ppl-text)}
.ppl-nav-item:hover,.ppl-mobile-panel a:hover{background:var(--ppl-bg)}
.ppl-nav-item b{font-family:var(--ppl-heading);font-weight:500}
.ppl-nav-item span{color:var(--ppl-muted);font-size:12px}
.ppl-credit-badge,.ppl-mobile-menu>summary{border-radius:var(--ppl-pill);border-color:var(--ppl-line);background:#fff;min-height:48px;align-content:center}
.ppl-credit-icon{color:var(--ppl-hot)}
.ppl-credit-badge:hover{background:var(--ppl-new)}
.ppl-footer{background:var(--ppl-primary)!important;border-color:var(--ppl-line)!important;font-family:var(--ppl-body)!important}
.ppl-footer :is(a,p,span){font-family:var(--ppl-body)!important}
.ppl-footer .ppl-footer-brand{font-family:var(--ppl-heading)!important;color:#fff}
.ppl-footer h4{color:#fff;font-family:var(--ppl-heading)!important}
.ppl-related{background:#FFF0E4;border-color:var(--ppl-line)}
.ppl-related-card small,.ppl-mobile-panel b{color:var(--ppl-hot)}
.ppl-related-card b{font-family:var(--ppl-heading)}
.site-footer{border-color:var(--ppl-line);color:var(--ppl-muted)}

/* All action buttons share one treatment. Template cards retain their card shape. */
:is(.btn,.button,.nav-cta,.ppl-nav-cta,.nav-create,.primary-button,.download-button,.unlock-link,.signout-button,.offer-cta){min-height:48px;border-radius:var(--ppl-pill);font-weight:800;line-height:1.35;align-content:center}
:is(.ppl-nav-cta,.nav-cta,.nav-create,.btn,.btn-primary,.btn-dark,.btn-gold,.primary-button,.download-button,.unlock-link){background:var(--ppl-primary);color:#fff!important;border-color:var(--ppl-primary)}
:is(.ppl-nav-cta,.nav-cta,.nav-create,.btn,.btn-primary,.btn-dark,.btn-gold,.button-primary,.primary-button,.download-button,.unlock-link):hover{background:var(--ppl-primary-hover);color:#fff!important}
:is(.btn-ghost,.signout-button,.preview-download){background:#fff;color:var(--ppl-primary)!important;border:1px solid var(--ppl-primary)}
:is(.btn-ghost,.signout-button,.preview-download):hover{background:var(--ppl-new);color:var(--ppl-primary)!important}
.ppl-nav-cta{align-items:center;justify-content:center;padding:12px 22px}
@media(min-width:1051px){.ppl-nav-cta{display:inline-flex}}
:is(.chip,.badge,.price-badge,.portrait-badge,.wb-chip,.hs-tag,.same-note,.tag){border-radius:var(--ppl-pill)}
:is(.hot,.badge-hot,.tag-hot){background:var(--ppl-hot);color:#fff;border-color:var(--ppl-hot)}
:is(.new,.badge-new,.tag-new){background:var(--ppl-new);color:var(--ppl-primary);border:1px solid var(--ppl-primary)}
:is(.filter,.collection-tab,.wb-cat,.chip,.hp-filterbar button){border-radius:var(--ppl-pill);font-weight:700;border-color:var(--ppl-line);background:#fff;color:var(--ppl-primary)}
:is(.filter,.collection-tab,.wb-cat,.chip,.hp-filterbar button):is(.on,.active,[aria-selected="true"]){background:var(--ppl-primary);color:#fff;border-color:var(--ppl-primary)}

/* The original hero layouts and text are retained; only their visual surface changes. */
.hero,header.intro,.pricing-hero,.phead,.royal-hero,.legal-hero{background-color:var(--ppl-bg);background-image:var(--ppl-halo);color:var(--ppl-text)}
.van-gogh-page .hero{background:var(--ppl-halo),var(--ppl-bg)}
.hero h1,.intro h1,.pricing-hero h1,.phead h1{color:var(--ppl-primary)}
.hero .eyebrow,.intro .eyebrow,.pricing-hero .eyebrow{color:var(--ppl-hot)}
.hero :is(.hero-lede,.hero-copy>p,.hero-trust,.trust),header.intro :is(p,.trust),.pricing-hero p,.phead .lede{color:var(--ppl-muted)}
.hero :is(.trust span:before,.hero-trust .stars),header.intro .trust span:before{color:var(--ppl-hot)}
.hero .text-link{color:var(--ppl-primary);border-color:var(--ppl-primary)}
.text-link{color:var(--ppl-primary);border-color:var(--ppl-primary)}
.royal-hero{font-family:var(--ppl-body)}
.royal-hero .phead{background:none}
.royal-hero .phead h1,.legal-hero h1{color:var(--ppl-primary);font-weight:600}
.royal-hero .phead .eyebrow,.legal-eyebrow{color:var(--ppl-hot)}
.royal-hero :is(.lede,.royal-hero-trust,.royal-hero-note),.legal-hero p{color:var(--ppl-muted)}
.royal-hero-link{color:var(--ppl-primary);border-color:var(--ppl-primary)}
.royal-hero-note{border-color:var(--ppl-line);background:#fff}
.royal-hero-trust span:before{color:var(--ppl-hot)}
.royal-hero .btn-primary{background:var(--ppl-primary);color:#fff;font-family:var(--ppl-body)}
.royal-hero .btn-primary:hover{background:var(--ppl-primary-hover)}
.legal-layout article{border-color:var(--ppl-line);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow)}
.hero .digital-note{color:var(--ppl-muted);border-color:var(--ppl-line);background:#fff8}
.hero .trust span:before{color:var(--ppl-hot)}
.pricing-early{background:#fff;color:var(--ppl-primary);border-color:var(--ppl-line);border-radius:var(--ppl-pill)}
.hero h1 :is(.sub,em),.royal-hero h1 em,header.intro h1 span,.price-amount{
  background:linear-gradient(90deg,var(--ppl-accent-start),var(--ppl-accent-end));
  background-clip:text;-webkit-background-clip:text;color:transparent;
  font-style:normal;font-weight:600;
}
.hero .studio{background:#fff;border:1px solid var(--ppl-line);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow)}
.drop{background:#fff;border-color:#DDBEA8;border-radius:16px}
.drop:hover{background:var(--ppl-bg);border-color:var(--ppl-hot)}
.studio-hint{color:var(--ppl-muted)}

/* White gallery cards and a consistent mat and frame on portrait examples. */
:is(.cat,.cat.memorial,.tst,.info,.info-card,.proof,.seo-point,.ppl-related-card,.portrait-card,.topup-card,.identity,.price-card,.price-card.value,.price-card.featured,.pricing-path,.pricing-rule,.paint-compare article,.wb-style,.hero-studio,.hp-template-button){background:var(--ppl-card);border-color:var(--ppl-line);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow);color:var(--ppl-text)}
.step{background:#fff;border:1px solid var(--ppl-line);border-radius:var(--ppl-radius);padding:28px;box-shadow:var(--ppl-shadow)}
.step .n{color:var(--ppl-hot);font-family:var(--ppl-heading);font-weight:600}
.cat:hover,.wb-style:hover,.ppl-related-card:hover{border-color:var(--ppl-primary)}
.frame,.polaroid,.mini-frame,.masonry .frame{border:8px solid var(--ppl-frame);padding:10px;background:#fff;border-radius:4px;box-shadow:var(--ppl-shadow)}
.frame .mat{padding:0;background:#fff;border:0}
.frame .canvas{border-radius:0}
.frame .caption,.polaroid figcaption,.mini-frame figcaption{font-family:var(--ppl-heading);font-style:normal;color:var(--ppl-primary)}
.polaroid,.oil-page .polaroid,.mini-frame{padding-bottom:34px}
.polaroid figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:0}
.wb-style img,.proof img,.split>img,.seo-feature-art .art-frame{box-sizing:border-box;border:8px solid var(--ppl-frame);padding:10px;background:#fff!important;border-radius:4px}
.oil-pair img{padding:10px;border:8px solid var(--ppl-frame);border-radius:4px}
.wb-style strong,.hp-template-button b,.proof b,.paint-compare b{font-family:var(--ppl-heading);font-weight:500}
.wb-style small{color:var(--ppl-muted)}
.fact-bar{border-radius:var(--ppl-radius);border-color:var(--ppl-line);box-shadow:var(--ppl-shadow)}
.collection-selection{border-radius:var(--ppl-radius);border-color:var(--ppl-line);background:var(--ppl-new)}
.faq-item{border-color:var(--ppl-line)}

/* Studio appearance only. No display, order, visibility or interaction-state overrides. */
#portrait-workbench .wb-shell{border-radius:var(--ppl-radius);border-color:var(--ppl-line);box-shadow:var(--ppl-shadow)}
#portrait-workbench :is(.wb-stage,.royal-stage){background:var(--ppl-bg);color:var(--ppl-text)}
#portrait-workbench .wb-panel{background:#fff}
#portrait-workbench .wb-stagebar h3{color:var(--ppl-primary);font-weight:500}
#portrait-workbench.wb,#portrait-workbench.studio{background:var(--ppl-bg)}
#portrait-workbench .royal-stage>p{color:var(--ppl-muted)}
#portrait-workbench .wb-loader h3{color:var(--ppl-primary)}
#portrait-workbench .wb-loader p,#portrait-workbench .wb-progress-meta{color:var(--ppl-muted)}
#portrait-workbench .wb-progress-note{color:var(--ppl-muted)!important}
#portrait-workbench .wb-spin{border-color:var(--ppl-line);border-top-color:var(--ppl-primary)}
#portrait-workbench .wb-progress{background:var(--ppl-line)}
#portrait-workbench .wb-progress-bar{background:linear-gradient(90deg,var(--ppl-accent-start),var(--ppl-accent-end))}
#portrait-workbench :is(.wb-stagebar p,.wb-stagefoot p,.wb-upload-title,.wb-file small,.wb-file-ready p,.wb-actionnote,.wb-upload-ready,.wc-examples){color:var(--ppl-muted)}
#portrait-workbench .wb-stagefoot{border-color:var(--ppl-line)}
#portrait-workbench .wb-canvas{background:#F3E8DD;border-radius:var(--ppl-radius)}
#portrait-workbench .wb-frame,#portrait-workbench .royal-stage .hs-preview{padding:10px;border:8px solid var(--ppl-frame);border-radius:4px;box-shadow:var(--ppl-shadow);background:#fff}
#portrait-workbench #wb-frame figcaption,#portrait-workbench .royal-stage .hs-cap{font-family:var(--ppl-heading);font-style:normal;color:var(--ppl-primary)}
#portrait-workbench .wb-file{border-color:#DDBEA8;border-radius:var(--ppl-radius);background:#fff;color:var(--ppl-primary)}
#portrait-workbench .wb-file:hover{border-color:var(--ppl-hot);background:var(--ppl-bg)}
#portrait-workbench .wb-file.has-photo{background:var(--ppl-new);border-color:var(--ppl-primary)}
#portrait-workbench .wb-file b{color:var(--ppl-primary)}
#portrait-workbench .wb-upload-title b,#portrait-workbench .wb-upload-title div,#portrait-workbench .wb-file svg{color:var(--ppl-hot)}
#portrait-workbench #wb-frame .wb-chip{color:#fff;background:var(--ppl-primary)}
#portrait-workbench .wb-sample,#portrait-workbench .wb-upload-ready button{color:var(--ppl-primary)}
#portrait-workbench .wb-views{background:#fff;border:1px solid var(--ppl-line);border-radius:var(--ppl-pill)}
#portrait-workbench .wb-view{border-radius:var(--ppl-pill);color:var(--ppl-primary)}
#portrait-workbench .wb-view.on{background:var(--ppl-primary);color:#fff}
#portrait-workbench .wb-generate{background:var(--ppl-primary);color:#fff;border-radius:var(--ppl-pill);font-weight:800}
#portrait-workbench .wb-generate:hover:not(:disabled){background:var(--ppl-primary-hover)}
#portrait-workbench :is(.wb-action,.wb-categories,.panel-head){border-color:var(--ppl-line)}
#portrait-workbench .wb-action{background:var(--ppl-bg)}
#portrait-workbench .wb-style{border-radius:var(--ppl-radius);background:#fff;border-color:var(--ppl-line);box-shadow:var(--ppl-shadow)}
#portrait-workbench .wb-style.on{border-color:var(--ppl-primary)}
#portrait-workbench :is(.ppl-result-actions button,.ppl-result-actions .ppl-result-options){min-height:48px;border-radius:var(--ppl-pill);color:var(--ppl-primary);border-color:var(--ppl-primary);background:#fff}
#portrait-workbench .ppl-result-actions button:hover{background:var(--ppl-new)}
#portrait-workbench .ppl-result-actions :is(#wb-download-btn,.ppl-download-primary){background:var(--ppl-primary);color:#fff;border-color:var(--ppl-primary)}
#portrait-workbench .ppl-result-actions :is(#wb-download-btn,.ppl-download-primary):hover{background:var(--ppl-primary-hover)}
/* Light from the upper left: beveled wood, recessed mat and a shallow outer edge.
   Border and mat dimensions stay at 8px / 10px; shadows do not affect layout. */
:is(.frame,.masonry .frame,.polaroid,.mini-frame,.wb-style img,.proof img,.split>img,.seo-feature-art .art-frame,.oil-pair img),
#portrait-workbench .wb-frame,
#portrait-workbench .royal-stage .hs-preview{
  border-color:var(--ppl-frame-edges);
  box-shadow:var(--ppl-frame-shadow);
}
:is(.style-search,.hp-search){background:#fff;border-color:var(--ppl-line);border-radius:var(--ppl-pill);min-height:48px;font-family:var(--ppl-body)}
.hp-template-dialog{background:var(--ppl-bg);border-color:var(--ppl-line);box-shadow:var(--ppl-shadow)}
.hp-filterbar{border-color:var(--ppl-line)}

/* Pricing retains the four existing offers and their exact destinations. */
.pricing-path{transform:none}
.pricing-path :is(p,small){color:var(--ppl-muted)}
.price-card.featured{border:2px solid var(--ppl-primary);box-shadow:var(--ppl-shadow)}
.price-card.value{border-color:var(--ppl-line)}
.price-card .plan,.price-card.featured .plan{color:var(--ppl-hot);font-weight:800}
.price-card h2,.price-card.featured h2{color:var(--ppl-primary)}
.price-card :is(.price-once,.price-list),.price-card.featured :is(.price-once,.price-list){color:var(--ppl-muted);border-color:var(--ppl-line)}
.price-card .price-unit,.price-card.featured .price-unit{color:var(--ppl-primary)}
.price-card .price-list li::before,.price-card.featured .price-list li::before{color:var(--ppl-primary)}
.price-badge{background:var(--ppl-primary);color:#fff;padding:8px 16px;font-weight:800}
.value .price-badge{background:var(--ppl-new);color:var(--ppl-primary);border:1px solid var(--ppl-primary)}
#page-pricing .price-card .ppl-price-buy,#page-pricing .price-card.featured .ppl-price-buy{border-radius:var(--ppl-pill);background:var(--ppl-primary);color:#fff;border-color:var(--ppl-primary);font-family:var(--ppl-body);font-weight:800}
#page-pricing .price-card .ppl-price-buy:hover,#page-pricing .price-card.featured .ppl-price-buy:hover{background:var(--ppl-primary-hover)}
.cta-band .btn-primary,.price-strip .btn-gold,.pricing-cta .btn-primary{background:#fff;color:var(--ppl-primary)!important;border:1px solid #fff}
.cta-band .btn-primary:hover,.price-strip .btn-gold:hover,.pricing-cta .btn-primary:hover{background:var(--ppl-new)}

/* Account and existing download dialogs use the same type and surface tokens. */
.identity-label,.topup-description,.offer-unit,.billing-note{color:var(--ppl-muted)}
.avatar{border-radius:50%;background:var(--ppl-new);color:var(--ppl-primary)}
.offer-price,.balance-line strong{font-family:var(--ppl-heading);font-weight:500}
.balance-card{border-radius:var(--ppl-radius);background:var(--ppl-primary);box-shadow:var(--ppl-shadow)}
#offers .credit-offer,#offers .credit-offer.popular{background:#fff;border-color:var(--ppl-line);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow)}
#offers .credit-offer.popular{border-color:var(--ppl-primary)}
.offer-cta,.popular .offer-cta{background:var(--ppl-primary);color:#fff;border-radius:var(--ppl-pill);min-height:48px}
.portrait-image{background:#F3E8DD}
.portrait-badge{background:var(--ppl-new);color:var(--ppl-primary)}
.portrait-badge.preview{background:#FFF0E4;color:var(--ppl-hot)}
.sign-in-panel,.empty-collection{background:#fff;border-color:var(--ppl-line);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow)}
#wb-download.ppl-purchase-dialog .wb-modal{background:var(--ppl-bg);color:var(--ppl-text);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow)}
#wb-download.ppl-purchase-dialog :is(.ppl-purchase-summary,.ppl-pack,.ppl-pack.is-popular){background:#fff;border-color:var(--ppl-line);border-radius:var(--ppl-radius);box-shadow:var(--ppl-shadow)}
#wb-download.ppl-purchase-dialog .ppl-pack.is-popular{border-color:var(--ppl-primary)}
#wb-download.ppl-purchase-dialog .ppl-selection-total{background:#FFF0E4;border-color:var(--ppl-line)}
#wb-download.ppl-purchase-dialog :is(.ppl-purchase-primary,.ppl-single-unlock){background:var(--ppl-primary);color:#fff;border-color:var(--ppl-primary);border-radius:var(--ppl-pill);min-height:48px}
#wb-download.ppl-purchase-dialog :is(.ppl-purchase-primary,.ppl-single-unlock):hover{background:var(--ppl-primary-hover)}
#wb-download.ppl-purchase-dialog #wb-download-hd{border-radius:var(--ppl-pill);background:#fff;border-color:var(--ppl-line)}
#wb-download.ppl-purchase-dialog #wb-download-hd.ppl-owned-download{background:var(--ppl-primary);color:#fff}
#wb-download.ppl-purchase-dialog .wb-close{min-width:48px;min-height:48px;border-radius:50%;background:var(--ppl-new);color:var(--ppl-primary)}
#wb-download.ppl-purchase-dialog #ppl-purchase-back{min-height:48px;border-radius:var(--ppl-pill);color:var(--ppl-primary)}

@media(max-width:800px){
  .ppl-nav-row{gap:12px}
  .hero h1,.intro h1,.pricing-hero h1{font-size:clamp(36px,6.2vw,52px)}
  header.hero>.hero-in{padding-left:24px;padding-right:24px}
}
@media(max-width:520px){
  .ppl-nav-row{gap:8px}
  .ppl-brand{font-size:17px}
  .ppl-mobile-menu>summary{padding:12px 10px}
  .ppl-credit-badge{padding:8px;min-height:48px}
  .ppl-mobile-menu{flex:none}
  .hero h1,.intro h1,.pricing-hero h1{font-size:36px;line-height:1.12;letter-spacing:-.025em}
  .hero-lede,.hero-copy>p,header.intro p,.pricing-hero p{font-size:16px;line-height:1.6}
  .step{padding:24px}
  #portrait-workbench .wb-stagebar h3{font-size:26px}
  #portrait-workbench .wb-style strong{font-size:17px}
  #portrait-workbench .wb-frame{padding:10px;border-width:8px}
  #wb-download.ppl-purchase-dialog :is(.ppl-single-unlock,#wb-download-hd){padding:16px 20px}
}


/* Reference v2: navigation, discovery, lighter cards and footer. */
/* ==========================================================
   Paw Portrait Lab · 视觉 v2（暖色奶油底 + 深绿主色 + 珊瑚强调）
   只改样式：放在所有原有样式之后加载即可，不改任何结构和逻辑
   ========================================================== */
:root{
  --ink:#1F2A26; --ink-soft:#6B5E55;
  --paper:#FFF8F1; --paper-2:#FFF1E6;
  --green:#1F3D34; --green-2:#163029; --green-tint:#E3EFE8;
  --brass:#B9441D; --brass-soft:#F2C3A4;
  --coral:#B9441D; --warm-1:#D4542A; --warm-2:#E8902B;
  --line:#EADBCB;
  --serif:"Fredoka",system-ui,-apple-system,sans-serif;
  --sans:"Nunito",system-ui,-apple-system,sans-serif;
  --shadow:0 18px 44px -22px rgba(120,72,40,.38);
  --shadow-sm:0 10px 30px rgba(120,72,40,.10);
  --glow:radial-gradient(55% 70% at 12% 18%,#FFD6BC 0%,rgba(255,214,188,0) 70%),
         radial-gradient(45% 60% at 88% 25%,#FDE2B3 0%,rgba(253,226,179,0) 70%),
         radial-gradient(60% 60% at 55% 105%,#F8CDD5 0%,rgba(248,205,213,0) 70%);
}
body{font-family:var(--sans);color:var(--ink);background:var(--paper)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.005em}
.eyebrow{color:var(--coral);font-weight:800;letter-spacing:.12em}
.sec-head p{color:var(--ink-soft)}

/* ---------- 标签 HOT / NEW ---------- */
.ppl-badge{display:inline-block;vertical-align:middle;margin-left:8px;font:800 11px/1 var(--sans);letter-spacing:.05em;padding:4px 9px;border-radius:999px}
.ppl-badge.hot{background:var(--coral);color:#fff}
.ppl-badge.new{background:var(--green-tint);color:var(--green);border:1px solid var(--green);padding:3px 8px}

/* 皇室风格加 HOT（用 CSS 加，原有脚本重绘卡片也不会丢） */
.cat[data-href*="royal-pet-portraits"] h3::after,
.ppl-nav-item[href*="royal-pet-portraits"] b::after{content:"HOT";display:inline-block;vertical-align:middle;margin-left:8px;font:800 11px/1 var(--sans);letter-spacing:.05em;padding:4px 9px;border-radius:999px;background:var(--coral);color:#fff}

/* ---------- 按钮 ---------- */
.btn{font-family:var(--sans);font-weight:800;min-height:48px;justify-content:center}
.btn-primary{background:var(--green)!important;color:#fff!important}
.btn-primary:hover{background:var(--green-2)!important}
.btn-dark{background:var(--green);color:#fff}
.btn-ghost{border:1.5px solid var(--green);color:var(--green);background:#fff}

/* ---------- 顶部通知条 ---------- */
.strip{background:linear-gradient(90deg,#FFE3CF,#FDE9C6);color:#5A3A22;font-weight:700;border-bottom:1px solid #F3D6BF}
.strip b{color:#8F3414;font-weight:800}

/* ---------- 导航 ---------- */
.ppl-nav{background:rgba(255,248,241,.92);border-bottom:1px solid #F0E2D4;font-family:var(--sans)}
.ppl-brand{font:600 22px var(--serif);color:var(--green)}
.ppl-desktop-nav>a,.ppl-nav-summary{color:var(--ink);font-weight:700;font-size:15px}
.ppl-desktop-nav>a:hover,.ppl-nav-summary:hover{color:var(--coral)}
.ppl-nav-panel{background:#fff;border:1px solid #F0E2D4;border-radius:24px;box-shadow:0 24px 60px rgba(90,50,20,.18);padding:20px}
.ppl-nav-item{border-radius:14px}
.ppl-nav-item:hover{background:#FFF4EA}
.ppl-nav-item b{font:600 16px var(--serif);color:var(--ink)}
.ppl-nav-item span{color:var(--ink-soft);font-size:12px}
.ppl-credit-badge{background:#FFF1E6;border-color:var(--line);color:var(--green);border-radius:999px}
.ppl-credit-icon{color:var(--warm-2)}
.ppl-nav-cta{background:var(--green)!important;color:#fff!important;font-weight:800;font-size:14px;padding:12px 20px}
.ppl-nav-cta:hover{background:var(--green-2)!important}
.ppl-mobile-panel{background:#fff;border-radius:20px}
.ppl-mobile-panel b{color:var(--coral)}

/* ---------- 首屏 ---------- */
.hero{background:var(--glow),var(--paper);color:var(--ink)}
.hero h1{color:var(--ink);font-weight:600;line-height:1.04}
.hero h1 .sub{font-style:normal;font-weight:600;background:linear-gradient(90deg,var(--warm-1),var(--warm-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{color:var(--ink-soft)}
/* Keep the home collage compact instead of stretching its rows with the copy. */
@media(min-width:941px){
  #page-home .hero-copy{padding:40px 0}
  #page-home .hero .wall{height:680px;min-height:0;align-self:center}
  #page-home .hero .wall .f1{top:20px}
  #page-home .hero .wall .f2{top:0}
  #page-home .hero .wall .f3{bottom:20px}
  #page-home .hero .wall .f4{bottom:0}
}
.studio{background:#fff;border-radius:22px;box-shadow:var(--shadow-sm)}
.drop{background:#FFF9F4;border:2px dashed #E2B79C;border-radius:18px}
.drop:hover{background:#FFF1E6;border-color:var(--coral)}
.drop .ico{color:var(--coral)}
.drop b{font-weight:800;font-size:16px}
.studio-hint{color:var(--ink-soft)}
.hero-trust{color:var(--ink-soft);font-weight:700}
.hero-trust .stars{color:var(--warm-2)}
.ppl-popular{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px}
.ppl-popular>span{font-weight:800;font-size:14px;color:var(--ink-soft)}
.ppl-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:14px;color:var(--ink)}
.ppl-chip:hover{border-color:var(--coral);color:var(--coral)}
.ppl-chip .ppl-badge{margin-left:6px}

/* ---------- 画框（全站肖像图） ---------- */
.frame{background:#fff;border:8px solid #2E2A27;padding:10px;border-radius:4px;box-shadow:0 14px 34px -16px rgba(60,35,15,.45)}
.frame .mat{background:#fff;border:0;padding:0}
.canvas.has-image:after{box-shadow:none}
.wall .nail{background:var(--warm-2);width:9px;height:9px;top:-12px}
.caption{font-family:var(--sans);font-style:normal;font-weight:700;color:var(--ink-soft)}
.caption b{font-family:var(--serif);font-weight:600;color:var(--ink)}

/* ---------- 新增：画面里有谁 ---------- */
.ppl-who{padding:72px 0 24px}
.ppl-who .sec-head{text-align:center;margin-left:auto;margin-right:auto}
.ppl-who-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.ppl-who-item{display:flex;flex-direction:column;align-items:center;gap:12px;width:120px;color:var(--ink);text-align:center}
.ppl-who-pic{width:112px;height:112px;border-radius:50%;overflow:hidden;background:#F3E1C7;box-shadow:0 10px 24px rgba(120,72,40,.16);border:5px solid #fff;padding:6px;box-sizing:border-box;transition:transform .18s}
.ppl-who-pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.ppl-who-item:hover .ppl-who-pic{transform:translateY(-3px)}
.ppl-who-item b{font-weight:800;font-size:15px}
.ppl-who-item:hover b{color:var(--coral)}

/* ---------- 新增：热门风格卡片 ---------- */
.ppl-trend{padding:56px 0 72px}
.ppl-trend-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ppl-trend-head .sec-head{margin-bottom:22px}
.ppl-trend-all{font-weight:800;color:var(--green);margin-bottom:28px;text-decoration:underline;text-underline-offset:4px}
.ppl-trend-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.ppl-trend-chips .ppl-chip{cursor:pointer;font-family:var(--sans);min-height:42px}
.ppl-trend-chips .ppl-chip.on{background:var(--green);border-color:var(--green);color:#fff}
.ppl-trend-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ppl-tcard{background:#fff;border-radius:22px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.ppl-tcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(120,72,40,.35)}
.ppl-tcard[hidden]{display:none}
.ppl-tcard-art{position:relative;display:block;padding:18px 18px 0;background:none!important}
.ppl-tframe{display:block;border:8px solid #2E2A27;background:#fff;padding:10px;border-radius:4px}
.ppl-tframe img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.ppl-tbadge{position:absolute;top:8px;right:8px}
.ppl-tbadge .ppl-badge{margin:0}
.ppl-tcard-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.ppl-tcard-body h3{font-size:20px}
.ppl-tcard-body span{color:var(--ink-soft);font-size:14px}
.ppl-tcard-body a{margin-top:10px;font-weight:800;font-size:15px;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.ppl-tcard-body a:hover{color:var(--coral)}
.ppl-trend .same-note{margin-top:24px}
@media(max-width:900px){.ppl-trend-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:420px){.ppl-tcard-art{padding:12px 12px 0}.ppl-tframe{border-width:6px;padding:6px}.ppl-tcard-body{padding:12px 12px 16px}.ppl-tcard-body h3{font-size:17px}}

/* ---------- 工作台 ---------- */
.wb{background:var(--glow),var(--paper)}
.wb-shell{border-radius:28px!important;box-shadow:var(--shadow)!important;border-color:#F0E2D4!important;background:#fff}
/* 左侧预览区：从深绿改成浅暖色 */
.wb-stage{background:linear-gradient(160deg,#FFF4EA 0%,#FDE8D7 100%);color:var(--ink)}
.wb-stagebar h3{color:var(--ink)}
.wb-stagebar p,.wb-stagefoot p{color:var(--ink-soft);font-size:13px}
.wb-canvas{background:rgba(255,255,255,.55);border:1px solid #F3DCC8;border-radius:20px}
.wb-views{background:#fff;border:1px solid var(--line)}
.wb-view{color:var(--ink-soft);font-size:12px;font-weight:700;font-family:var(--sans)}
.wb-view.on{background:var(--green);color:#fff}
.wb-chip{background:rgba(31,61,52,.9);font-weight:700}
.wb-frame{border:8px solid #2E2A27;padding:10px;box-shadow:0 24px 48px -24px rgba(90,50,20,.5)}
.wb-frame figcaption{font-family:var(--sans);font-style:normal;font-weight:700}
.wb-frame figcaption b{font-family:var(--serif);font-weight:600}
.wb-loader h3{color:var(--ink)}
.wb-loader p{color:var(--ink-soft)}
.wb-progress{background:rgba(31,61,52,.1);border-color:rgba(31,61,52,.08)}
.wb-progress-bar{background:linear-gradient(90deg,var(--warm-1),var(--warm-2))}
.wb-progress-meta{color:var(--ink-soft)}
.wb-progress-meta b{color:var(--ink)}
.wb-progress-note{color:var(--ink-soft)!important}
.wb-result{border-color:var(--line);background:#fff}
.wb-result.on{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.wb-result[data-history-state]{position:relative;overflow:hidden;flex-shrink:0;width:48px;height:48px}
.wb-result[data-history-state] img{display:block}
.wb-result[data-history-state="loading"] img,.wb-result[data-history-state="error"] img{visibility:hidden}
.wb-history-status{position:absolute;inset:0;display:grid;place-items:center;font:600 24px var(--ppl-body);color:var(--ppl-primary);background:#fff8f1}
.wb-result[data-history-state="ready"] .wb-history-status{display:none}
.wb-history-notice{font:400 13px/1.5 var(--ppl-body);color:var(--ppl-muted);margin:12px 0 0}
.wb-history-notice[hidden]{display:none}
.wb-history-notice a{color:var(--ppl-primary);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.wb-cat{border-radius:999px;font-family:var(--sans);font-weight:800;border-color:var(--line)}
.wb-cat:nth-child(n){background:#fff}
.wb-cat:hover{border-color:var(--coral)}
.wb-cat.on{background:var(--green);border-color:var(--green);color:#fff}
.wb-style{border-radius:14px}
.wb-style:hover{border-color:var(--coral)}
.wb-style.on{border-color:var(--green)}
.wb-library-head b{font:600 18px var(--serif)}
.wb-post button{border-radius:999px;font-weight:800}
.wb-post .gold{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}
.wb-file{border-radius:18px}
.wb-link{color:var(--coral);font-weight:800}
.wb-action{background:#FFFBF7}
.wb-modal{background:#fff;border-radius:26px}
.wb-option{border-radius:16px}
.wb-option-primary{background:var(--green);color:#fff}
.wb-option-primary strong{color:#F7DCCB}

/* ---------- 合集卡片 ---------- */
.collection-tab{border-radius:999px;font-weight:800;border:1.5px solid var(--line);background:#fff}
.collection-tab.on{background:var(--green);border-color:var(--green);color:#fff}
.cat{border:0;border-radius:22px;background:#fff;box-shadow:var(--shadow-sm)}
.cat.selected{box-shadow:0 0 0 3px var(--coral),var(--shadow-sm)}
.cat:focus-within{outline:3px solid rgba(185,68,29,.3)}
.cat .swatch{border-radius:16px;height:88px}
.cat .swatch:after{display:none}
.cat .swatch-label{color:var(--ink);text-shadow:none;font:600 16px var(--serif)}
.cat:nth-child(1) .swatch{background:linear-gradient(135deg,#F6E3C6,#EBCB9E)!important}
.cat:nth-child(2) .swatch{background:linear-gradient(135deg,#EFE4D4,#DCC7AA)!important}
.cat:nth-child(3) .swatch{background:linear-gradient(135deg,#FCE3EC,#F5C7D6)!important}
.cat:nth-child(4) .swatch{background:linear-gradient(135deg,#E5E9F5,#C9D3EC)!important}
.cat:nth-child(5) .swatch{background:linear-gradient(135deg,#F1ECE6,#DDD3C8)!important}
.cat:nth-child(6) .swatch{background:linear-gradient(135deg,#FDE0D2,#F7B99C)!important}
.cat h3{font-size:24px}
.cat .mini-links a{border-radius:999px;font-weight:700;background:#FFF8F1}
.cat .go{color:var(--green);font-weight:800}
.collection-selection{background:var(--green-tint);border:0;border-radius:22px}

/* ---------- 画廊 / 步骤 / 评价 / FAQ ---------- */
.gallery-band{background:var(--paper-2)}
.same-note{background:var(--green-tint);font-weight:700}
.step .n{font-family:var(--serif);font-weight:600;color:var(--coral)}
.steps .step{background:#fff;border-radius:22px;padding:28px;box-shadow:var(--shadow-sm)}
.tst{border:0;border-radius:22px;box-shadow:var(--shadow-sm)}
.tst .stars{color:var(--warm-2)}
.tst p{font-family:var(--serif);font-weight:500;font-size:19px}
.tst .av{background:#FFF1E6}
.faq-list .faq-item,.faq-list .faq-item:first-child{background:#fff;border-radius:18px;padding:22px 24px;border:1px solid #F0E2D4;margin-bottom:12px}
.faq-item h3{font-size:19px;font-weight:600}
.faq-item p{color:var(--ink-soft);margin-top:8px}

/* ---------- 结尾大按钮区 ---------- */
.cta-band{background:var(--glow),#FFF1E6;color:var(--ink);border-radius:32px}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--ink-soft)}

/* ---------- 页脚前的隐私说明 ---------- */
.ppl-privacy{padding:24px 0 72px}
.ppl-privacy-band{background:var(--green);color:#fff;border-radius:28px;padding:36px 40px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.ppl-privacy-ico{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none}
.ppl-privacy-txt{flex:1 1 380px}
.ppl-privacy-txt h2{color:#fff;font-size:28px}
.ppl-privacy-txt p{color:#DCE6DF;margin-top:6px;font-size:16px}
.ppl-privacy-txt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ppl-privacy-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:#fff;color:var(--green);font-weight:800}
.ppl-privacy-btn:hover{background:#FFF1E6}

/* ---------- 页脚：浅色 ---------- */
.ppl-footer{background:#FFF1E6!important;color:var(--ink-soft)!important;border-top:1px solid #F0E2D4}
.ppl-footer h4{color:var(--ink)!important;font-family:var(--sans)!important;font-weight:800!important}
.ppl-footer a{color:var(--ink-soft)!important}
.ppl-footer a:hover{color:var(--coral)!important}
.ppl-footer-brand .ppl-brand{color:var(--green)!important}
.ppl-footer-brand p{color:var(--ink-soft)}
.ppl-footer-bottom{border-top-color:var(--line)!important;color:var(--ink-soft)}
footer:not(.ppl-footer){background:#FFF1E6;color:var(--ink-soft)}

/* ---------- 手机 ---------- */
@media(max-width:560px){
  .ppl-who-row{gap:16px}
  .ppl-who-item{width:96px}
  .ppl-who-pic{width:92px;height:92px}
  .frame{border-width:6px;padding:7px}
}

/* Keep shared production components aligned with the reference's lighter surfaces. */
#portrait-workbench .wb-stage{background:linear-gradient(160deg,#FFF4EA 0%,#FDE8D7 100%);color:var(--ppl-text)}
#portrait-workbench .wb-canvas{background:rgba(255,255,255,.55);border:1px solid #F3DCC8;border-radius:20px}
#portrait-workbench .wb-file{background:#FFF9F4;border:2px dashed #E2B79C;border-radius:18px}
#portrait-workbench .wb-file.has-photo{background:var(--ppl-new);border-color:var(--ppl-primary)}
#portrait-workbench .wb-action{background:#FFFBF7}
#page-home #portrait-workbench .wb-upload,#page-home #portrait-workbench .wb-action{background:none}
.ppl-chip{border-radius:var(--ppl-pill)}
.ppl-trend-chips .ppl-chip{min-height:48px}
.ppl-tcard a:focus-visible,.ppl-who-item:focus-visible{outline:3px solid var(--ppl-hot);outline-offset:4px}
.ppl-footer .ppl-brand{font:600 22px var(--ppl-heading)!important;display:inline-flex!important;align-items:center;gap:10px}
.ppl-footer .ppl-footer-brand{color:var(--ppl-primary)}
.ppl-footer :is(p,span){color:var(--ppl-muted)}
.cta-band .btn-primary,.pricing-cta .btn-primary{background:var(--ppl-primary);border-color:var(--ppl-primary);color:#fff!important}
.cta-band .btn-primary:hover,.pricing-cta .btn-primary:hover{background:var(--ppl-primary-hover)!important}
.ppl-tcard-body a{margin-top:auto;padding-top:10px}

/* Retain the approved bevel and mat shadows on every framed portrait. */
:is(.frame,.masonry .frame,.polaroid,.mini-frame,.ppl-tframe,.wb-style img,.proof img,.split>img,.seo-feature-art .art-frame,.oil-pair img),
#portrait-workbench .wb-frame,
#portrait-workbench .royal-stage .hs-preview{border-color:var(--ppl-frame-edges);box-shadow:var(--ppl-frame-shadow)}

/* Desktop home studio: preview on the left, existing template/upload controls on the right. */
@media(min-width:801px){
  #page-home #portrait-workbench .wb-shell{grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr)}
  #page-home #portrait-workbench .wb-stage{grid-column:1;grid-row:1}
  #page-home #portrait-workbench .wb-panel{grid-column:2;grid-row:1;border-left:1px solid var(--ppl-line)}
}
@media(max-width:520px){
  .ppl-nav .ppl-brand{font-size:17px}
  .ppl-who-row{gap:20px 12px}
  .ppl-who-item{width:calc((100% - 24px)/3)}
  .ppl-who-pic{width:84px;height:84px}
  .ppl-who-item b{font-size:13px;line-height:1.35}
  .ppl-trend-head .sec-head{margin-bottom:12px}
  .ppl-trend-all{margin-bottom:20px}
  .ppl-trend-chips{gap:8px}
  .ppl-trend-chips .ppl-chip{padding:0 12px;font-size:13px}
  .ppl-tcard-body h3{overflow-wrap:break-word}
  .ppl-privacy-band{padding:28px 24px;gap:18px}
  .ppl-privacy-txt{flex-basis:100%}
  .ppl-privacy-txt h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .ppl-tcard,.ppl-who-pic{transition:none}
  .ppl-tcard:hover,.ppl-who-item:hover .ppl-who-pic{transform:none}
}