:root {
    --bg: #0c0710;
    --panel: #17101c;
    --panel-2: #211527;
    --text: #fff7fb;
    --muted: #bdaec3;
    --line: rgba(255, 255, 255, .12);
    --pink: #e22bc8;
    --pink-2: #8d2b83;
    --ok: #31c48d;
    --danger: #ff6b8a;
    --shadow: 0 20px 70px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 85% 0%, rgba(226, 43, 200, .18), transparent 28rem),
        linear-gradient(145deg, #0c0710 0%, #17101c 55%, #261329 100%);
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0 48px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
}

.brand img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar form { margin: 0; }

.topbar a,
.topbar button,
.ghost {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    border-radius: 999px;
    padding: 10px 14px;
    cursor: pointer;
}

.pill,
.primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--pink-2));
    border-radius: 999px;
    padding: 12px 18px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(226, 43, 200, .24);
}

.primary:disabled,
button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.danger {
    border: 1px solid rgba(255, 107, 138, .55);
    color: #fff;
    background: rgba(255, 107, 138, .18);
    border-radius: 999px;
    padding: 12px 18px;
    cursor: pointer;
}

.danger-panel {
    border-color: rgba(255, 107, 138, .45);
}

.checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox-line input {
    width: auto;
    margin-top: 4px;
}

.auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 22px;
    align-items: stretch;
}

.hero-panel,
.panel,
.card-hero,
.admin-hero,
.coupon,
.reward-card {
    border: 1px solid var(--line);
    background: rgba(23, 16, 28, .82);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    border-radius: 8px;
}

.hero-panel {
    min-height: 620px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hero-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vector-hero {
    position: relative;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 139, 237, .32), transparent 18rem),
        radial-gradient(circle at 80% 78%, rgba(255, 255, 255, .1), transparent 16rem),
        linear-gradient(145deg, #08050b 0%, #17101c 58%, #2b1230 100%);
}

.vector-logo-mark {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 72px;
    height: 72px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    z-index: 2;
}

.vector-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.perfect-vector {
    width: min(92%, 680px);
    height: auto;
    opacity: .96;
}

.hair-main {
    fill: url(#hairGradient);
    filter: url(#glow);
}

.hair-side {
    fill: none;
    stroke: url(#hairGradient);
    stroke-width: 28;
    stroke-linecap: round;
    opacity: .82;
}

.face-line,
.jaw-line,
.eye-line,
.lip-line,
.neck-line {
    fill: none;
    stroke: url(#softLine);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eye-line,
.lip-line {
    stroke-width: 7;
}

.ribbon {
    fill: none;
    stroke: rgba(255, 139, 237, .3);
    stroke-width: 2;
    stroke-linecap: round;
}

.ribbon-two {
    stroke: rgba(255, 255, 255, .18);
}

.soft-dot {
    fill: rgba(226, 43, 200, .12);
}

.dot-two {
    fill: rgba(255, 255, 255, .08);
}

.vector-copy {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    gap: 4px;
}

.vector-copy span {
    color: #ff8bed;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.vector-copy strong {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
}

.panel { padding: 24px; }
.form { display: grid; gap: 15px; align-content: center; }
.form h1, .form h2 { margin: 0 0 8px; }

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 14px;
}

.bot-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

input,
select {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .08);
    color: var(--text);
    border-radius: 8px;
    padding: 13px 14px;
    outline: none;
}

input:focus { border-color: rgba(226, 43, 200, .72); }

.phone-row {
    display: grid;
    grid-template-columns: minmax(108px, .34fr) minmax(0, 1fr);
    gap: 8px;
}

.password-feedback,
.email-feedback {
    margin: -4px 0 0;
    font-size: 13px;
}

.password-feedback.ok,
.email-feedback.ok {
    color: var(--ok);
}

.password-feedback.error,
.email-feedback.error {
    color: var(--danger);
}

.check {
    grid-template-columns: 20px 1fr;
    align-items: start;
}

.check input { width: 18px; margin-top: 2px; }

.gdpr {
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
}

.human-check-row {
    display: grid;
    grid-template-columns: minmax(120px, .7fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.human-check-row strong {
    border: 1px solid rgba(255, 255, 255, .2);
    background: #fff7fb;
    color: #17101c;
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

.human-check small {
    color: var(--muted);
    font-size: 12px;
}

.stack { display: grid; gap: 24px; }

.card-hero,
.admin-hero {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background:
        linear-gradient(135deg, rgba(226, 43, 200, .22), rgba(255, 255, 255, .04)),
        rgba(23, 16, 28, .86);
}

.card-hero::after,
.admin-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 360px;
    height: 520px;
    opacity: .14;
    background:
        radial-gradient(ellipse at 50% 85%, transparent 0 46%, rgba(255, 255, 255, .45) 47% 48%, transparent 49%),
        linear-gradient(145deg, transparent 20%, #ff4ddd 21% 30%, transparent 31% 44%, #ffffff 45% 47%, transparent 48%);
    transform: rotate(18deg);
    pointer-events: none;
}

.card-hero > *,
.admin-hero > * {
    position: relative;
    z-index: 1;
}

.card-hero.compact { min-height: 190px; }

.eyebrow {
    margin: 0 0 8px;
    color: #ff8bed;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 800;
}

h1, h2 { line-height: 1.05; letter-spacing: 0; }
h1 { font-size: clamp(34px, 6vw, 68px); margin: 0 0 14px; }
h2 { font-size: 24px; margin: 0 0 14px; }

.card-user-name {
    max-width: 12ch;
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.card-hero strong {
    display: inline-block;
    font-size: 34px;
}

.card-hero .points-balance {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255, 178, 239, .12);
    color: #ffb2ef;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1;
}

.points-rule {
    display: inline-block;
    margin-top: 10px;
    color: var(--muted);
    font-weight: 800;
}

.booking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.call-booking {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 178, 239, .42);
    color: #fff7fb;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    font-weight: 800;
}

.call-booking.secondary {
    background: rgba(255, 255, 255, .07);
    color: #ffb2ef;
}

.appointment-banner {
    justify-self: start;
    display: grid;
    gap: 3px;
    min-width: min(100%, 360px);
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 178, 239, .42);
    color: #fff7fb;
    background: linear-gradient(135deg, rgba(226, 43, 200, .14), rgba(255, 255, 255, .06));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.appointment-banner span,
.appointment-banner small {
    color: var(--muted);
    font-size: 13px;
}

.appointment-banner strong {
    font-size: 20px;
}

.appointment-card {
    display: grid;
    gap: 14px;
}

.appointment-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.appointment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 178, 239, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.appointment-item div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.appointment-item strong {
    color: #fff7fb;
    font-size: 19px;
}

.appointment-item span {
    color: #ffb2ef;
    font-weight: 900;
}

.appointment-item small {
    color: #dcc7d8;
    font-weight: 800;
}

.appointment-item.past {
    opacity: .52;
}

.birthday-panel,
.celebration-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 178, 239, .34);
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
}

.birthday-panel strong,
.celebration-panel span {
    color: var(--text);
}

.birthday-panel span {
    flex: 0 0 auto;
    color: #ffb2ef;
    font-size: 28px;
    font-weight: 900;
}

.celebration-panel {
    display: grid;
    justify-items: start;
    background: linear-gradient(135deg, rgba(49, 196, 141, .18), rgba(226, 43, 200, .12));
}

.celebration-panel h2 {
    margin: 0;
    color: #b9f6dc;
}

.code-block {
    width: min(430px, 100%);
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 18px;
    border-radius: 8px;
    background: #fff;
    color: #111;
}

.barcode {
    width: 100%;
    height: 72px;
    fill: #111;
}

.qr-block {
    width: min(260px, 100%);
}

.qr-code {
    width: min(180px, 100%);
    height: auto;
    border-radius: 8px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.reward-grid,
.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.settings-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.settings-hero {
    align-items: center;
}

.settings-hero .muted {
    max-width: 680px;
}

.faq-panel {
    display: grid;
    gap: 10px;
}

.faq-panel h2 {
    margin-bottom: 4px;
}

.faq-panel details {
    border: 1px solid rgba(255, 178, 239, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    padding: 12px 14px;
}

.faq-panel summary {
    cursor: pointer;
    color: #ffb2ef;
    font-weight: 800;
}

.faq-panel p {
    margin: 10px 0 0;
    color: var(--muted);
}

.reward-editor {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 140px 140px auto;
    gap: 10px;
    margin-bottom: 16px;
}

.table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.collapsible-list summary {
    cursor: pointer;
    color: #ffb2ef;
    font-weight: 800;
    list-style-position: inside;
}

.customer-collapsible summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.customer-collapsible summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .74;
    transition: transform .18s ease, opacity .18s ease;
}

.customer-collapsible[open] summary::after {
    transform: rotate(225deg);
    opacity: 1;
}

.customer-collapsible summary::marker {
    content: "";
}

.collapsible-list .table-wrap {
    margin-top: 16px;
}

.customer-collapsible .reward-grid,
.customer-collapsible .coupon-list {
    margin-top: 16px;
}

.history-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.history-item:last-child {
    border-bottom: 0;
}

.history-item div {
    display: grid;
    gap: 4px;
}

.history-item span,
.history-item small {
    color: var(--muted);
}

.history-item b {
    white-space: nowrap;
    color: #ffb2ef;
}

.history-item.positive b {
    color: var(--ok);
}

.reward-card {
    position: relative;
    padding: 20px;
    display: grid;
    gap: 10px;
}

.reward-badge,
.coupon-alert {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.reward-badge {
    color: #111;
    background: #ffb2ef;
}

.reward-card strong {
    font-size: 36px;
    color: #ff8bed;
}

.progress-panel {
    display: grid;
    gap: 14px;
}

.progress-panel .section-head {
    margin-bottom: 0;
}

.progress-panel strong {
    color: #ffb2ef;
}

.progress-message {
    margin: 0;
    color: var(--text);
    font-weight: 800;
}

.progress-track {
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--line);
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pink), #ffffff);
    box-shadow: 0 0 26px rgba(226, 43, 200, .42);
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 14px;
}

.coupon-list {
    display: grid;
    gap: 14px;
}

.coupon {
    padding: 18px;
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 16px;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(226, 43, 200, .14), rgba(255, 255, 255, 0) 42%),
        #fff;
    color: #18101d;
    border-color: rgba(226, 43, 200, .22);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .2);
}

.coupon::marker {
    display: none;
}

.coupon::before,
.coupon::after {
    content: "";
    position: absolute;
    right: 132px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid rgba(226, 43, 200, .14);
}

.coupon::before { top: -14px; }
.coupon::after { bottom: -14px; }

.coupon > div:first-child::after {
    content: "";
    display: block;
    width: 74px;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e22bc8, #8d2b83);
}

.coupon .barcode {
    height: 64px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    fill: #050505;
}

.coupon.used {
    opacity: .72;
    background: #f1edf2;
    filter: grayscale(.25);
}

.coupon p { color: #7c5478; margin: 0 0 4px; }
.coupon strong { font-size: 30px; }
.coupon-alert {
    margin-top: 8px;
    color: #fff;
    background: #8d2b83;
}

.coupon small {
    display: block;
    margin-top: 4px;
    color: #7c5478;
}

.coupon-section .coupon strong {
    color: #18101d;
}

.coupon > span {
    color: #18101d;
    font-weight: 800;
    letter-spacing: 0;
}

.flash {
    margin: 0 0 16px;
    padding: 13px 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .08);
}

.flash.success { border-color: rgba(49, 196, 141, .45); color: #b9f6dc; }
.flash.error { border-color: rgba(255, 107, 138, .48); color: #ffd1da; }

.muted { color: var(--muted); }
.hidden { display: none; }

.scan-form {
    display: flex;
    gap: 10px;
    width: min(520px, 100%);
}

.scanner {
    width: 100%;
    max-height: 360px;
    border-radius: 8px;
    background: #060408;
    display: none;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(23, 16, 28, .82);
}

th, td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th { color: #ffb2ef; }

.cookie-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: grid;
    justify-items: center;
}

.cookie-consent.hidden,
.cookie-modal.hidden {
    display: none;
}

.cookie-card,
.cookie-modal-card {
    width: min(980px, 100%);
    border: 1px solid rgba(255, 178, 239, .34);
    border-radius: 8px;
    background: rgba(18, 12, 22, .96);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
    backdrop-filter: blur(16px);
}

.cookie-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
}

.cookie-card h2,
.cookie-modal-card h2 {
    margin: 0 0 6px;
}

.cookie-card p {
    margin: 0;
    color: var(--muted);
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, .62);
}

.cookie-modal-card {
    max-height: min(86vh, 900px);
    overflow: auto;
    padding: 20px;
}

.cookie-options {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.cookie-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px;
    border: 1px solid rgba(255, 178, 239, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.cookie-option input {
    margin-top: 3px;
}

.cookie-option strong,
.cookie-option small {
    display: block;
}

.cookie-option small,
.cookie-policy p {
    color: var(--muted);
}

.cookie-option.disabled {
    opacity: .76;
}

.cookie-policy {
    margin: 10px 0 16px;
    padding: 13px;
    border: 1px solid rgba(255, 178, 239, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.cookie-policy summary {
    cursor: pointer;
    color: #ffb2ef;
    font-weight: 800;
}

.cookie-policy p {
    max-height: 280px;
    overflow: auto;
    padding-right: 8px;
    line-height: 1.55;
    white-space: normal;
}

/* Light pastel refresh, aligned with the main Perfect Salon website. */
:root {
    --bg: #fff7fb;
    --panel: #ffffff;
    --panel-2: #fff0f8;
    --text: #261423;
    --muted: #7d6578;
    --line: rgba(151, 89, 134, .18);
    --pink: #d92baa;
    --pink-2: #8e2d7f;
    --shadow: 0 20px 60px rgba(91, 42, 79, .13);
}

body {
    color: var(--text);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 217, 239, .92), transparent 23rem),
        radial-gradient(circle at 88% 4%, rgba(236, 180, 224, .54), transparent 18rem),
        linear-gradient(145deg, #fffafc 0%, #fff1f8 48%, #f8edf4 100%);
}

.topbar a,
.topbar button,
.ghost {
    background: rgba(255, 255, 255, .72);
    color: #3a2134;
    box-shadow: 0 10px 26px rgba(91, 42, 79, .08);
}

.hero-panel,
.panel,
.card-hero,
.admin-hero,
.reward-card {
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow);
}

.vector-hero {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 199, 239, .75), transparent 18rem),
        radial-gradient(circle at 80% 78%, rgba(255, 255, 255, .95), transparent 16rem),
        linear-gradient(145deg, #fffafd 0%, #fff1f8 58%, #f3ddea 100%);
}

.vector-logo-mark {
    border-color: rgba(151, 89, 134, .16);
    background: rgba(255, 255, 255, .82);
}

.ribbon-two {
    stroke: rgba(141, 43, 131, .18);
}

.dot-two {
    fill: rgba(141, 43, 131, .08);
}

input,
select {
    background: rgba(255, 255, 255, .9);
    color: var(--text);
}

.gdpr {
    background: rgba(255, 255, 255, .45);
}

.card-hero,
.admin-hero {
    background:
        linear-gradient(135deg, rgba(255, 221, 242, .9), rgba(255, 255, 255, .7)),
        #fff;
}

.card-hero::after,
.admin-hero::after {
    opacity: .2;
}

.eyebrow,
.collapsible-list summary,
.customer-collapsible summary::marker,
th,
.history-item b,
.card-hero .points-balance,
.call-booking.secondary {
    color: #c026a8;
}

.card-hero .points-balance {
    background: rgba(216, 43, 170, .09);
}

.points-rule,
.progress-message,
.birthday-panel strong,
.celebration-panel span {
    color: var(--text);
}

.call-booking,
.appointment-banner {
    color: #382133;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 14px 34px rgba(91, 42, 79, .1);
}

.appointment-banner {
    background: linear-gradient(135deg, rgba(255, 238, 248, .95), rgba(255, 255, 255, .78));
}

.birthday-panel,
.celebration-panel {
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--shadow);
}

.celebration-panel h2,
.flash.success {
    color: #167a56;
}

.reward-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 241, 249, .88));
}

.reward-card,
.coupon-section .reward-card {
    color: #261423;
}

.reward-card b,
.coupon-section .reward-card b {
    color: #4f2b48;
}

.reward-card span,
.coupon-section .reward-card span {
    color: #6f5269;
}

.reward-card strong,
.coupon-section .reward-card strong {
    color: #c026a8;
}

.progress-panel strong {
    color: #c026a8;
}

.progress-track {
    background: rgba(151, 89, 134, .12);
}

.progress-track span {
    background: linear-gradient(90deg, #d92baa, #f5a7dc);
}

.history-item.positive b {
    color: #18835d;
}

.flash {
    background: rgba(255, 255, 255, .78);
}

.flash.error {
    color: #b4234b;
}

table {
    background: rgba(255, 255, 255, .78);
}

.scanner {
    background: #fff1f8;
}

.coupon-section {
    background:
        radial-gradient(circle at 100% 0%, rgba(226, 43, 200, .2), transparent 18rem),
        linear-gradient(145deg, #221527 0%, #321b35 100%);
    color: #fff7fb;
    border-color: rgba(255, 178, 239, .22);
}

.coupon-section .muted {
    color: #dcc7d8;
}

.coupon-section summary,
.coupon-section summary::marker {
    color: #ffb2ef;
}

.coupon-section .eyebrow {
    color: #ffb2ef;
}

.coupon-section h2,
.coupon-section strong,
.coupon-section .progress-message,
.coupon-section .progress-meta,
.coupon-section.celebration-panel span,
.coupon-section.birthday-panel strong {
    color: #fff7fb;
}

.coupon-section.birthday-panel > span,
.coupon-section.progress-panel > .section-head strong {
    color: #ffb2ef;
}

.coupon-section.celebration-panel h2 {
    color: #b9f6dc;
}

.coupon-section .progress-track {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 178, 239, .22);
}

.coupon-section .progress-track span {
    background: linear-gradient(90deg, #ff4ddd, #ffb2ef);
}

.coupon-section .coupon::before,
.coupon-section .coupon::after {
    background: #28172c;
}

.coupon-section .history-item {
    border-bottom-color: rgba(255, 178, 239, .2);
}

.coupon-section .history-item span,
.coupon-section .history-item small {
    color: #dcc7d8;
}

.coupon-section .history-item b {
    color: #ffb2ef;
}

.coupon-section .history-item.positive b {
    color: #b9f6dc;
}

.settings-hero .muted,
.settings-grid label,
.settings-grid .muted,
.faq-panel p,
.faq-panel details p {
    color: #4f3b4c;
}

.faq-panel summary {
    color: #8d2b83;
}

.settings-grid input,
.settings-grid select {
    border-color: rgba(141, 43, 131, .24);
    background: #fff;
}

.settings-grid input:focus,
.settings-grid select:focus {
    border-color: rgba(216, 43, 170, .72);
    box-shadow: 0 0 0 3px rgba(216, 43, 170, .1);
}

.cookie-card,
.cookie-modal-card {
    background: rgba(255, 255, 255, .97);
    color: var(--text);
    box-shadow: 0 26px 70px rgba(91, 42, 79, .18);
}

.cookie-modal {
    background: rgba(42, 22, 38, .42);
}

.cookie-option,
.cookie-policy {
    background: rgba(255, 241, 248, .72);
}

@media (max-width: 820px) {
    .shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
    .auth-grid,
    .reward-grid,
    .admin-grid,
    .settings-grid,
    .reward-editor { grid-template-columns: 1fr; }
    .hero-panel { min-height: 260px; }
    .perfect-vector {
        width: min(82%, 360px);
    }
    .vector-logo-mark {
        width: 54px;
        height: 54px;
    }
    .vector-copy strong {
        font-size: 32px;
    }
    .card-hero,
    .admin-hero,
    .coupon {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .coupon::before,
    .coupon::after {
        display: none;
    }
    .card-hero,
    .admin-hero { padding: 20px; }
    .topbar { align-items: flex-start; }
    .brand span { display: none; }
    .scan-form { flex-direction: column; }
    .cookie-card {
        grid-template-columns: 1fr;
    }
    .cookie-actions {
        justify-content: stretch;
    }
    .cookie-actions button {
        flex: 1 1 140px;
    }
}