@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
    --cream: #f8f2e7;
    --cream-end: #f3eddf;
    --cream-glow: #c9d8c5;
    --paper: #fffdf8;
    --sage: #6f7f5a;
    --eucalyptus: #c9d8c5;
    --rose: #d9aaa0;
    --taupe: #a38f7a;
    --gold: #d8b86a;
    --pattern-color: #6f7f5a;
    --ink: #2c251f;
    --muted: #756e66;
    --line: #eadfce;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 252, 241, .78) 0, transparent 24rem),
        radial-gradient(circle at 95% 14%, color-mix(in srgb, var(--cream-glow) 45%, transparent) 0, transparent 24rem),
        linear-gradient(135deg, var(--cream) 0%, var(--cream-end) 100%);
    font-family: Lato, system-ui, sans-serif;
}
body.pn-bg-style-solid {
    background: var(--cream);
}
body.pn-bg-style-soft_gradient {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 252, 241, .78) 0, transparent 24rem),
        radial-gradient(circle at 95% 14%, color-mix(in srgb, var(--cream-glow) 45%, transparent) 0, transparent 24rem),
        linear-gradient(135deg, var(--cream) 0%, var(--cream-end) 55%, color-mix(in srgb, var(--cream-end) 82%, var(--gold) 18%) 100%);
}
body.pn-bg-style-diagonal_gradient {
    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-end) 100%);
}
body.pn-bg-style-radial_glow {
    background:
        radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--cream-glow) 54%, transparent) 0, transparent 22rem),
        radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--gold) 30%, transparent) 0, transparent 20rem),
        linear-gradient(160deg, var(--cream) 0%, var(--cream-end) 100%);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background-repeat: repeat;
    background-color: var(--pattern-color);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}
body.pn-bg-pattern-none::before {
    background: none;
}
body.pn-bg-pattern-paws::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='88' height='88' viewBox='0 0 88 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='black'%3E%3Cellipse cx='38' cy='48' rx='11' ry='9'/%3E%3Cellipse cx='24' cy='36' rx='5' ry='7'/%3E%3Cellipse cx='35' cy='29' rx='5' ry='8'/%3E%3Cellipse cx='49' cy='31' rx='5' ry='8'/%3E%3Cellipse cx='60' cy='39' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='88' height='88' viewBox='0 0 88 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='black'%3E%3Cellipse cx='38' cy='48' rx='11' ry='9'/%3E%3Cellipse cx='24' cy='36' rx='5' ry='7'/%3E%3Cellipse cx='35' cy='29' rx='5' ry='8'/%3E%3Cellipse cx='49' cy='31' rx='5' ry='8'/%3E%3Cellipse cx='60' cy='39' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 88px 88px;
    mask-size: 88px 88px;
}
body.pn-bg-pattern-hearts::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='92' height='92' viewBox='0 0 92 92' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46 61 C30 49 24 42 24 33 C24 26 29 21 36 21 C41 21 44 24 46 28 C48 24 51 21 56 21 C63 21 68 26 68 33 C68 42 62 49 46 61Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='92' height='92' viewBox='0 0 92 92' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46 61 C30 49 24 42 24 33 C24 26 29 21 36 21 C41 21 44 24 46 28 C48 24 51 21 56 21 C63 21 68 26 68 33 C68 42 62 49 46 61Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 92px 92px;
    mask-size: 92px 92px;
}
body.pn-bg-pattern-dots::before {
    background-color: transparent;
    background-image: radial-gradient(circle, var(--pattern-color) 0 2px, transparent 2.4px);
    background-size: 28px 28px;
}
body.pn-bg-pattern-botanical::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='124' height='124' viewBox='0 0 124 124' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 94 C52 78 66 52 75 28'/%3E%3Cpath d='M45 78 C35 76 30 70 28 62 C37 62 44 68 45 78Z' fill='black'/%3E%3Cpath d='M58 61 C48 58 45 51 45 43 C54 45 60 51 58 61Z' fill='black'/%3E%3Cpath d='M68 43 C59 39 57 31 59 24 C67 28 71 35 68 43Z' fill='black'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='124' height='124' viewBox='0 0 124 124' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 94 C52 78 66 52 75 28'/%3E%3Cpath d='M45 78 C35 76 30 70 28 62 C37 62 44 68 45 78Z' fill='black'/%3E%3Cpath d='M58 61 C48 58 45 51 45 43 C54 45 60 51 58 61Z' fill='black'/%3E%3Cpath d='M68 43 C59 39 57 31 59 24 C67 28 71 35 68 43Z' fill='black'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 124px 124px;
    mask-size: 124px 124px;
}

.brand-font { font-family: "Playfair Display", Georgia, serif; letter-spacing: 0; }
.pn-shell { position: relative; z-index: 1; min-height: 100vh; padding-bottom: 5.5rem; background: transparent; }
.pn-card {
    background: rgba(255, 253, 248, 0.95);
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    box-shadow: 0 22px 55px rgba(87, 69, 46, 0.1);
}
.pn-soft { background: rgba(239, 244, 235, 0.74); }
.pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .7rem 1rem;
    border-radius: .85rem;
    background: var(--sage);
    color: #fff;
    font-weight: 700;
    border: 0;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
}
.pn-btn svg { flex-shrink: 0; }
.pn-btn:hover { filter: brightness(.98); transform: translateY(-1px); }
.pn-btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.pn-btn.gold { background: var(--gold); color: #3c3020; }
.pn-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: #fffdf9;
    padding: .78rem .95rem;
    outline-color: var(--sage);
}
.pn-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pn-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--cream) 88%, #fff 12%);
    border-bottom: 1px solid var(--line);
}
.pn-nav > div {
    gap: .75rem;
}
.pn-nav nav {
    min-width: 0;
    overflow: visible;
    overscroll-behavior-x: auto;
    scrollbar-width: none;
}
.pn-nav nav::-webkit-scrollbar {
    display: none;
}
.pn-nav nav .pn-btn {
    flex: 0 0 auto;
}
.pn-nav-menu {
    position: relative;
    flex: 0 0 auto;
}
.pn-nav-menu summary {
    list-style: none;
    cursor: pointer;
}
.pn-nav-menu summary::-webkit-details-marker {
    display: none;
}
.pn-nav-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 50;
    display: grid;
    min-width: 14rem;
    gap: .25rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 253, 248, .98);
    padding: .5rem;
    box-shadow: 0 18px 48px rgba(87, 69, 46, .16);
}
.pn-nav-menu:not([open]) .pn-nav-menu-panel {
    display: none;
}
.pn-nav-menu-panel a,
.pn-nav-menu-panel button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .55rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    padding: .7rem .8rem;
    color: var(--ink);
    font-weight: 700;
    text-align: left;
    text-decoration: none;
}
.pn-nav-menu-panel a:hover,
.pn-nav-menu-panel button:hover {
    background: #f5efe4;
}
.pn-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 -16px 40px rgba(87, 69, 46, .08);
}
.pn-bottom-nav a,
.pn-mobile-more summary {
    display: grid;
    place-items: center;
    gap: .2rem;
    min-width: 0;
    padding: .52rem .08rem calc(.52rem + env(safe-area-inset-bottom));
    color: var(--muted);
    font-size: .68rem;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.pn-mobile-more {
    min-width: 0;
}
.pn-mobile-more summary::-webkit-details-marker {
    display: none;
}
.pn-bottom-nav a span,
.pn-mobile-more summary span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pn-bottom-nav a svg,
.pn-mobile-more summary svg {
    width: 1.15rem;
    height: 1.15rem;
}
.pn-bottom-nav a.active,
.pn-mobile-more.active summary,
.pn-mobile-more[open] summary { color: var(--sage); font-weight: 700; }
.pn-mobile-more-panel {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(4.15rem + env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: rgba(255, 253, 248, .98);
    padding: .75rem;
    box-shadow: 0 -18px 52px rgba(87, 69, 46, .2);
}
.pn-mobile-more:not([open]) .pn-mobile-more-panel {
    display: none;
}
.pn-mobile-more-panel a,
.pn-mobile-more-panel button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: #fff;
    padding: .78rem .85rem;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}
.pn-mobile-more-panel form {
    margin: 0;
}
.pn-mobile-more-panel svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}
.pn-stat { border-left: .28rem solid var(--gold); }
.pn-table { width: 100%; border-collapse: collapse; }
.pn-table th, .pn-table td { padding: .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pn-table th { font-size: .75rem; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.pn-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .65rem; background: #eef3e9; color: var(--sage); font-size: .78rem; font-weight: 700; }
.pn-danger { color: #8d4438; }
.pn-hero-image {
    min-height: 28rem;
    background-image: linear-gradient(to bottom, rgba(248,242,231,.05), rgba(248,242,231,.88)), var(--pn-hero-image);
    background-size: cover;
    background-position: center top;
}
.pn-dashboard-hero {
    position: relative;
    background-image:
        linear-gradient(90deg, rgba(255,253,248,.97) 0%, rgba(255,253,248,.91) 58%, rgba(255,253,248,.35) 100%),
        var(--pn-dashboard-image);
    background-size: cover;
    background-position: right 22%;
}
.pn-image-strip,
.pn-feature-image {
    background-image:
        linear-gradient(to bottom, rgba(248,242,231,.05), rgba(248,242,231,.78)),
        var(--pn-placeholder-image);
    background-size: cover;
    background-position: center 28%;
}
.pn-puppy-gallery-hero {
    background-image:
        linear-gradient(to bottom, rgba(248,242,231,.05), rgba(248,242,231,.78)),
        var(--pn-puppy-gallery-hero-image);
    background-size: cover;
    background-position: center 28%;
}
.pn-photo-placeholder {
    background-image:
        linear-gradient(to bottom, rgba(248,242,231,.05), rgba(248,242,231,.78)),
        var(--pn-photo-placeholder-image);
    background-size: cover;
    background-position: center 28%;
}
.pn-photo-placeholder {
    color: var(--sage);
    border: 1px solid rgba(216, 184, 106, .55);
}
.pn-list-link {
    display: block;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
    text-decoration: none;
}
.pn-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .5rem;
}
.pn-tabs a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: #fff;
    padding: .85rem 1rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.pn-action-card {
    background:
        linear-gradient(135deg, rgba(255,253,248,.96), rgba(246,249,242,.92));
}
.pn-color-field {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: .65rem;
    align-items: center;
}
.pn-color-field input[type="color"] {
    width: 3.25rem;
    height: 3.25rem;
    padding: .2rem;
    border: 1px solid var(--line);
    border-radius: .95rem;
    background: #fff;
}
.pn-theme-preview {
    background:
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--preview-glow) 42%, transparent), transparent 13rem),
        linear-gradient(135deg, var(--preview-bg), var(--preview-bg-end));
    border: 1px solid var(--line);
}
.pn-preview-dot {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
}
.pn-preview-dot.primary { background: var(--preview-primary); }
.pn-preview-dot.accent { background: var(--preview-accent); }
.pn-preview-button {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .35rem .9rem;
    border-radius: .75rem;
    background: var(--preview-primary);
    color: #fff;
    font-weight: 700;
}
.pn-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    background: rgba(44, 37, 31, .55);
    padding: 1rem;
}
.pn-crop-modal.is-open { display: grid; }
.pn-crop-panel {
    width: min(94vw, 34rem);
    border-radius: 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 28px 80px rgba(44, 37, 31, .25);
    padding: 1rem;
}
.pn-crop-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: var(--crop-aspect, 1);
    max-height: 62vh;
    border-radius: 1rem;
    background: #1f1b17;
    cursor: grab;
    touch-action: none;
}
.pn-crop-stage:active { cursor: grabbing; }
.pn-crop-stage img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}
.pn-crop-frame {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 253, 248, .9);
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .12);
}
@media (min-width: 1024px) {
    .pn-shell { padding-bottom: 0; }
    .pn-bottom-nav { display: none; }
}
@media (max-width: 1160px) and (min-width: 1024px) {
    .pn-nav .brand-font {
        font-size: 1.55rem;
    }
    .pn-nav .pn-btn {
        min-height: 2.35rem;
        padding: .55rem .7rem;
        font-size: .88rem;
    }
}
@media (max-width: 640px) {
    main {
        padding-bottom: 1.25rem;
    }
    .pn-btn {
        min-height: 2.45rem;
        padding: .62rem .78rem;
        font-size: .9rem;
        white-space: normal;
    }
    .pn-tabs {
        display: flex;
        gap: .55rem;
        margin-inline: -.25rem;
        overflow-x: auto;
        padding: .15rem .25rem .55rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .pn-tabs::-webkit-scrollbar {
        display: none;
    }
    .pn-tabs a {
        flex: 0 0 auto;
        min-height: 2.75rem;
        min-width: max-content;
        padding: .7rem .9rem;
        scroll-snap-align: start;
    }
    .pn-bottom-nav a,
    .pn-mobile-more summary {
        padding-inline: .03rem;
        font-size: .62rem;
    }
    .pn-bottom-nav a svg,
    .pn-mobile-more summary svg {
        width: 1.05rem;
        height: 1.05rem;
    }
}
@media (max-width: 380px) {
    .pn-bottom-nav a span,
    .pn-mobile-more summary span {
        font-size: .58rem;
    }
    .pn-bottom-nav a svg,
    .pn-mobile-more summary svg {
        width: 1rem;
        height: 1rem;
    }
    .pn-mobile-more-panel {
        grid-template-columns: 1fr;
    }
}
@media print {
    body { background: #fff; }
    .no-print { display: none !important; }
    .pn-card { box-shadow: none; border-color: #bbb; }
}