:root {
    --color-coral: #c95462;
    --color-coral-dark: #983747;
    --color-teal: #167d78;
    --color-teal-soft: #e2f4f1;
    --color-amber: #c78a25;
    --color-amber-soft: #fff2d8;
    --color-indigo: #405aaf;
    --color-indigo-soft: #edf0ff;
    --color-mint: #1f9d68;
    --color-mint-soft: #e8f7ef;
    --color-rose-soft: #fff0f2;
    --color-sky-soft: #edf7ff;
}

body {
    background:
        linear-gradient(180deg, rgba(237, 247, 255, .86) 0, rgba(246, 248, 251, 0) 260px),
        var(--paper);
}

.topbar {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 30px rgba(49, 59, 82, .06);
}

.brand-mark {
    background: linear-gradient(135deg, var(--color-indigo), var(--color-coral));
    box-shadow: 0 8px 18px rgba(64, 90, 175, .24);
}

.nav a.active {
    background: var(--color-indigo-soft);
    border-color: #ccd4ff;
    color: var(--color-indigo);
}

.eyebrow {
    color: var(--color-teal);
}

.page-head h1,
.hero-title {
    color: #202434;
}

.dashboard-hero,
.card,
.side-panel,
.guest-directory,
.stat-card,
.action-card {
    box-shadow: 0 18px 45px rgba(33, 43, 68, .07);
}

.dashboard-hero {
    background:
        linear-gradient(135deg, rgba(255, 240, 242, .95), rgba(237, 247, 255, .95) 52%, rgba(232, 247, 239, .92)),
        #fff;
    border-color: #e6dce8;
}

.hero-side,
.preview-tile {
    background: rgba(255, 255, 255, .72);
}

.button {
    background: linear-gradient(135deg, var(--color-coral), var(--color-coral-dark));
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(201, 84, 98, .2);
}

.button.secondary,
.icon-button {
    box-shadow: 0 8px 18px rgba(33, 43, 68, .05);
}

.button.secondary:hover,
.icon-button:hover {
    border-color: #b9c5dc;
    transform: translateY(-1px);
}

.button.ghost {
    box-shadow: none;
}

.icon-box {
    background: var(--color-teal-soft);
    color: var(--color-teal);
}

.section-title:nth-of-type(2n) .icon-box,
.action-card:nth-child(2n) .icon-box {
    background: var(--color-amber-soft);
    color: var(--color-amber);
}

.stat-card {
    border-top: 4px solid var(--color-indigo);
}

.stat-grid .stat-card:nth-child(2) {
    border-top-color: var(--color-mint);
}

.stat-grid .stat-card:nth-child(3) {
    border-top-color: var(--color-amber);
}

.stat-grid .stat-card:nth-child(4) {
    border-top-color: var(--color-coral);
}

.stat-value,
.metric {
    color: #202434;
}

.badge.ok {
    background: var(--color-mint-soft);
    border-color: #a8ddb9;
    color: #13713f;
}

.badge.pending {
    background: var(--color-amber-soft);
    border-color: #e6c26e;
    color: #855b10;
}

.badge.no {
    background: var(--color-rose-soft);
    border-color: #efb6bf;
    color: #a73545;
}

.guest-toolbar .icon-box {
    background: var(--color-indigo-soft);
    color: var(--color-indigo);
}

.guest-search input {
    background: #fff;
    border-color: #d6dce8;
}

.guest-directory-head {
    background: linear-gradient(90deg, var(--color-indigo-soft), var(--color-sky-soft));
}

.guest-row:nth-child(even) .guest-row-main {
    background: #fbfdff;
}

.guest-row:hover .guest-row-main {
    background: #f8fbff;
}

.guest-avatar {
    background: linear-gradient(135deg, var(--color-teal-soft), var(--color-indigo-soft));
    color: var(--color-teal);
}

.guest-row:nth-child(3n) .guest-avatar {
    background: var(--color-amber-soft);
    color: var(--color-amber);
}

.icon-button.whatsapp,
.button.whatsapp {
    background: linear-gradient(135deg, #22b45f, #128345);
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(31, 157, 104, .18);
}

.icon-button.danger,
.button.danger {
    background: #fff;
    color: #a73545;
}

.guest-edit {
    background: linear-gradient(180deg, #fbfcff, #ffffff);
}

.template-option {
    background: #fff;
}

.template-option:has(input:checked) {
    background: var(--color-teal-soft);
}

.palette-heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.palette-heading p {
    font-size: 13px;
    margin-top: 4px;
}

.palette-current {
    background: linear-gradient(135deg, var(--color-indigo-soft), var(--color-mint-soft));
    border: 1px solid #ccd4ff;
    border-radius: 999px;
    color: var(--color-indigo);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 850;
    padding: 7px 10px;
}

.color-palette-options {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

.color-palette-option {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--palette-paper) 88%, #fff 12%), #fff 70%),
        #fff;
    border: 1px solid color-mix(in srgb, var(--palette-muted) 24%, transparent);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 12px;
    min-height: 260px;
    padding: 12px;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.color-palette-option:hover {
    border-color: color-mix(in srgb, var(--palette-gold) 62%, #fff 38%);
    box-shadow: 0 18px 34px rgba(33, 43, 68, .08);
    transform: translateY(-2px);
}

.color-palette-option input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.palette-card-preview {
    background:
        radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--palette-rose) 30%, transparent) 0 17%, transparent 18%),
        linear-gradient(145deg, var(--palette-paper), var(--palette-soft));
    border: 1px solid color-mix(in srgb, var(--palette-muted) 18%, transparent);
    border-radius: 8px;
    display: grid;
    min-height: 132px;
    overflow: hidden;
    padding: 16px;
    place-items: center;
    position: relative;
}

.palette-card-preview::before,
.palette-card-preview::after {
    content: "";
    border: 1px solid color-mix(in srgb, var(--palette-gold) 42%, transparent);
    border-radius: 999px;
    height: 70px;
    position: absolute;
    width: 70px;
}

.palette-card-preview::before {
    left: -30px;
    top: 18px;
}

.palette-card-preview::after {
    bottom: -34px;
    right: 18px;
}

.palette-hero-strip {
    background: linear-gradient(90deg, var(--palette-rose), var(--palette-gold), var(--palette-sage));
    height: 8px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.palette-script {
    color: var(--palette-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1;
    position: relative;
}

.palette-date-line {
    background: color-mix(in srgb, var(--palette-gold) 72%, transparent);
    height: 2px;
    margin-top: -2px;
    position: relative;
    width: 58px;
}

.palette-mini-card {
    background: color-mix(in srgb, var(--palette-card) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--palette-muted) 15%, transparent);
    border-radius: 8px;
    bottom: 12px;
    box-shadow: 0 10px 22px rgba(33, 43, 68, .07);
    display: grid;
    gap: 5px;
    padding: 8px;
    position: absolute;
    right: 12px;
    width: 72px;
}

.palette-mini-card span {
    background: color-mix(in srgb, var(--palette-muted) 26%, transparent);
    border-radius: 999px;
    display: block;
    height: 5px;
}

.palette-mini-card span:first-child {
    background: color-mix(in srgb, var(--palette-rose) 48%, transparent);
    width: 70%;
}

.palette-card-content {
    display: grid;
    gap: 7px;
}

.palette-card-title {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.palette-card-title strong {
    color: var(--palette-ink);
    font-size: 14px;
}

.palette-card-title span {
    background: color-mix(in srgb, var(--palette-sage) 14%, #fff 86%);
    border: 1px solid color-mix(in srgb, var(--palette-sage) 28%, transparent);
    border-radius: 999px;
    color: var(--palette-sage);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    padding: 4px 7px;
}

.palette-description {
    color: var(--palette-ink);
    font-size: 13px;
    font-weight: 800;
}

.palette-mood {
    color: var(--palette-muted);
    font-size: 12px;
    line-height: 1.45;
}

.color-palette-swatch {
    border: 1px solid color-mix(in srgb, var(--palette-muted) 18%, transparent);
    border-radius: 999px;
    display: grid;
    gap: 0;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    height: 14px;
    overflow: hidden;
}

.color-palette-swatch span {
    min-width: 0;
}

.palette-check {
    align-items: center;
    background: var(--palette-ink);
    border-radius: 999px;
    color: var(--palette-paper);
    display: inline-flex;
    font-size: 11px;
    font-weight: 850;
    justify-self: start;
    opacity: 0;
    padding: 5px 8px;
    transform: translateY(3px);
    transition: opacity .18s ease, transform .18s ease;
}

.color-palette-option:has(input:checked) {
    border-color: var(--palette-gold);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--palette-gold) 18%, transparent);
    outline: 3px solid color-mix(in srgb, var(--palette-gold) 18%, transparent);
    transform: translateY(-1px);
}

.color-palette-option:has(input:checked) .palette-check {
    opacity: 1;
    transform: translateY(0);
}

.palette-live-preview {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--preview-paper) 92%, #fff 8%), var(--preview-soft)),
        #fff;
    border-color: color-mix(in srgb, var(--preview-muted) 22%, transparent);
    transition: background .2s ease, border-color .2s ease;
}

.palette-live-preview .preview-cover:not(.has-image) {
    background: linear-gradient(135deg, var(--preview-rose), var(--preview-gold), var(--preview-sage));
}

.palette-live-preview .preview-body {
    color: var(--preview-muted);
}

.palette-live-preview .preview-body strong,
.palette-live-preview .preview-title {
    color: var(--preview-ink);
}

.palette-live-preview .eyebrow {
    color: var(--preview-gold);
}

.hero-position-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-position-option {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    padding: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hero-position-option input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.hero-position-preview {
    background:
        linear-gradient(rgba(32, 36, 52, .38), rgba(32, 36, 52, .38)),
        linear-gradient(135deg, #ceb795, #839b8a);
    border-radius: 8px;
    display: grid;
    min-height: 112px;
    padding: 10px;
}

.hero-position-preview span {
    background: rgba(255, 255, 255, .86);
    border-radius: 999px;
    display: block;
    height: 24px;
    width: 72%;
}

.hero-position-top .hero-position-preview {
    align-items: start;
}

.hero-position-center .hero-position-preview {
    align-items: center;
}

.hero-position-bottom .hero-position-preview {
    align-items: end;
}

.hero-position-option strong {
    color: #202434;
    font-size: 13px;
    text-align: center;
}

.hero-position-option:has(input:checked) {
    background: var(--color-teal-soft);
    border-color: #9fd8d1;
    box-shadow: 0 12px 26px rgba(22, 125, 120, .12);
    transform: translateY(-1px);
}

.copybox {
    background: var(--color-indigo-soft);
    border-color: #b9c5ff;
    color: var(--color-indigo);
}

.notice {
    background: var(--color-mint-soft);
    border-color: #bee8ce;
}

.error-list {
    background: var(--color-rose-soft);
}

.accordion-card {
    padding: 0;
    overflow: hidden;
}

.accordion-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
    padding: 22px;
}

.accordion-summary::-webkit-details-marker {
    display: none;
}

.accordion-title {
    align-items: center;
    display: flex;
    gap: 10px;
}

.accordion-title h2 {
    margin: 0;
}

.accordion-chevron {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--color-indigo);
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    transition: transform .18s ease;
    width: 34px;
}

.accordion-chevron svg {
    height: 18px;
    width: 18px;
}

.accordion-card[open] .accordion-chevron {
    transform: rotate(180deg);
}

.accordion-body {
    border-top: 1px solid var(--line);
    padding: 22px;
}

.accordion-card[open] .accordion-summary {
    background: linear-gradient(90deg, rgba(237, 240, 255, .78), rgba(232, 247, 239, .55));
}

.gallery-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    margin-top: 14px;
}

.gallery-thumb {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.gallery-thumb img {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    width: 100%;
}

.hero-images-grid .gallery-thumb img {
    aspect-ratio: 16 / 9;
}

.gallery-thumb label {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 10px;
}

.filepond--root {
    font-family: inherit;
    margin-bottom: 0;
}

.filepond--panel-root {
    background: linear-gradient(135deg, var(--color-indigo-soft), var(--color-sky-soft));
    border: 1px dashed #aebbf1;
}

.filepond--drop-label {
    color: #36415b;
    min-height: 150px;
}

.filepond--label-action {
    color: var(--color-indigo);
    font-weight: 850;
    text-decoration-color: var(--color-indigo);
}

.filepond--item-panel {
    background: linear-gradient(135deg, var(--color-coral), var(--color-indigo));
}

.filepond--file-action-button {
    background: rgba(255, 255, 255, .92);
    color: #202434;
}

@media (max-width: 820px) {
    body {
        background:
            linear-gradient(180deg, rgba(237, 247, 255, .9) 0, rgba(246, 248, 251, 0) 360px),
            var(--paper);
    }

    .guest-row-main {
        background: #fff;
    }

    .accordion-summary,
    .accordion-body {
        padding: 18px;
    }

    .palette-heading {
        flex-direction: column;
    }

    .palette-current {
        align-self: flex-start;
    }

    .color-palette-options {
        grid-template-columns: 1fr;
    }

    .color-palette-option {
        min-height: auto;
    }

    .hero-position-options {
        grid-template-columns: 1fr;
    }
}