/* =========================
   BLACKWOOD CIRCLE MEMBERS
   Full Members Area CSS
   Auth + Dashboard + BFA + Rewards + Delivery + Admin Desk
========================= */

:root {
    --circle-black: #050403;
    --circle-panel: rgba(0, 0, 0, 0.46);
    --circle-panel-strong: rgba(0, 0, 0, 0.68);
    --circle-cream: #f3eadc;
    --circle-muted: rgba(239, 231, 220, 0.66);
    --circle-muted-soft: rgba(239, 231, 220, 0.48);
    --circle-gold: #d6b181;
    --circle-copper: #c47a2c;
    --circle-copper-dark: #6f3212;
    --circle-line: rgba(196, 122, 44, 0.24);
    --circle-line-strong: rgba(196, 122, 44, 0.44);
    --circle-success: #9acb9a;
    --circle-error: #d97c68;
    --circle-blue: #8fa8c8;
}

/* =========================
   PAGE BASE
========================= */

.members-page {
    background:
        radial-gradient(circle at 18% 0%, rgba(196, 122, 44, 0.12), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(214, 177, 129, 0.08), transparent 26%),
        linear-gradient(180deg, #080604 0%, #050403 44%, #020201 100%);
    color: var(--circle-cream);
}

.members-page main,
.members-page .main-content {
    position: relative;
    z-index: 1;
}

#blackwood-circle-app {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(32px, 6vw, 82px) 0 clamp(54px, 8vw, 110px);
}

.members-page.is-circle-signed-in .circle-signed-out-only,
.members-page.is-circle-signed-in .circle-public-intro,
.members-page.is-circle-signed-in .members-public-intro,
.members-page.is-circle-signed-in .circle-how-it-works,
.members-page.is-circle-signed-in .circle-join-explainer,
.members-page.is-circle-signed-in .members-intro {
    display: none !important;
}

.members-page.is-circle-signed-out .circle-signed-in-only {
    display: none !important;
}
.circle-kicker,
.circle-post-meta,
.circle-reward-status,
.circle-stat-label {
    margin: 0;
    color: rgba(214, 177, 129, 0.9);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
}

.circle-loading,
.circle-error {
    padding: clamp(34px, 7vw, 72px);
    border: 1px solid var(--circle-line);
    background:
        radial-gradient(circle at top left, rgba(196, 122, 44, 0.12), transparent 34%),
        rgba(0, 0, 0, 0.5);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.circle-loading h1,
.circle-error h1 {
    margin: 10px 0 12px;
    color: var(--circle-cream);
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1;
    font-weight: 400;
}

.circle-loading p,
.circle-error p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--circle-muted);
    line-height: 1.7;
}

/* =========================
   BUTTONS
========================= */

.circle-button,
.circle-reader-record-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 12px 17px;
    border: 1px solid rgba(196, 122, 44, 0.58);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(196, 122, 44, 0.18), rgba(89, 42, 15, 0.18)),
        rgba(0, 0, 0, 0.42);
    color: #fff1de;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
}

.circle-button:hover,
.circle-button:focus-visible,
.circle-reader-record-button:hover,
.circle-reader-record-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(214, 177, 129, 0.95);
    background:
        linear-gradient(180deg, rgba(196, 122, 44, 0.3), rgba(89, 42, 15, 0.24)),
        rgba(0, 0, 0, 0.55);
    color: #ffffff;
    outline: none;
}

.circle-button:disabled,
.circle-reader-record-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.circle-button-primary {
    border-color: rgba(214, 177, 129, 0.8);
    background:
        linear-gradient(180deg, rgba(196, 122, 44, 0.9), rgba(108, 48, 16, 0.9)),
        rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

.circle-button-secondary {
    background: rgba(0, 0, 0, 0.34);
}

.circle-button.is-danger {
    border-color: rgba(217, 124, 104, 0.58);
    color: rgba(255, 210, 202, 0.94);
}

.circle-button.is-danger:hover,
.circle-button.is-danger:focus-visible {
    border-color: rgba(255, 160, 145, 0.86);
    background: rgba(217, 124, 104, 0.16);
    color: #ffffff;
}

/* =========================
   AUTH
========================= */

.circle-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: clamp(24px, 5vw, 60px);
    align-items: start;
}

.circle-auth-intro,
.circle-auth-card,
.circle-dashboard-hero,
.circle-home-dashboard,
.circle-section,
.circle-reader-record-cta {
    border: 1px solid var(--circle-line);
    background:
        radial-gradient(circle at top left, rgba(196, 122, 44, 0.11), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)),
        var(--circle-panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 22px 58px rgba(0, 0, 0, 0.34);
}

.circle-auth-intro {
    padding: clamp(30px, 5vw, 56px);
}

.circle-auth-intro h1 {
    margin: 12px 0 16px;
    color: var(--circle-cream);
    font-size: clamp(42px, 7vw, 82px);
    line-height: 0.95;
    font-weight: 400;
}

.circle-auth-intro p {
    max-width: 650px;
    margin: 0;
    color: var(--circle-muted);
    font-size: 16px;
    line-height: 1.75;
}

.circle-auth-card {
    padding: clamp(22px, 4vw, 32px);
}

.circle-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.circle-auth-tab {
    min-height: 40px;
    border: 1px solid rgba(196, 122, 44, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    color: rgba(239, 231, 220, 0.6);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.circle-auth-tab.is-active,
.circle-auth-tab:hover,
.circle-auth-tab:focus-visible {
    border-color: rgba(214, 177, 129, 0.78);
    background: rgba(196, 122, 44, 0.16);
    color: #fff1de;
    outline: none;
}

.circle-auth-form {
    display: grid;
    gap: 15px;
}

.circle-auth-form[hidden] {
    display: none !important;
}

.circle-auth-form label {
    display: grid;
    gap: 8px;
    color: rgba(214, 177, 129, 0.88);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.circle-auth-form input,
.circle-auth-form textarea,
.circle-auth-form select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(196, 122, 44, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.52);
    color: var(--circle-cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.circle-auth-form input,
.circle-auth-form select {
    min-height: 44px;
    padding: 10px 12px;
}

.circle-auth-form textarea {
    min-height: 130px;
    padding: 12px;
    line-height: 1.6;
    resize: vertical;
}

.circle-auth-form input:focus,
.circle-auth-form textarea:focus,
.circle-auth-form select:focus {
    border-color: rgba(214, 177, 129, 0.76);
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.12);
}

.circle-auth-form p {
    margin: 0;
    color: var(--circle-muted);
    font-size: 14px;
    line-height: 1.65;
}

.circle-auth-status,
.circle-dashboard-status {
    min-height: 20px;
    margin: 14px 0 0;
    color: var(--circle-muted-soft);
    font-size: 13px;
    line-height: 1.5;
}

.circle-auth-status.is-success,
.circle-dashboard-status.is-success {
    color: var(--circle-success);
}

.circle-auth-status.is-error,
.circle-dashboard-status.is-error {
    color: var(--circle-error);
}

.circle-auth-status.is-loading,
.circle-dashboard-status.is-loading {
    color: rgba(255, 255, 255, 0.78);
}

/* =========================
   DASHBOARD
========================= */

.circle-dashboard {
    display: grid;
    gap: 24px;
}

.circle-dashboard-hero {
    padding: clamp(28px, 5vw, 54px);
}

.circle-dashboard-hero h1 {
    margin: 12px 0 14px;
    color: var(--circle-cream);
    font-size: clamp(42px, 7vw, 76px);
    line-height: 0.98;
    font-weight: 400;
}

.circle-dashboard-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--circle-muted);
    font-size: 16px;
    line-height: 1.72;
}

.circle-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.circle-dashboard-actions .circle-dashboard-status {
    flex: 1 1 260px;
    margin: 0;
}

.circle-section {
    padding: clamp(22px, 4vw, 34px);
}

.circle-section > h2 {
    margin: 0 0 18px;
    color: var(--circle-cream);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 400;
}

.circle-empty-card {
    padding: 24px;
    border: 1px dashed rgba(196, 122, 44, 0.28);
    background: rgba(0, 0, 0, 0.3);
    color: var(--circle-muted);
    text-align: center;
}

.circle-empty-card p {
    max-width: 620px;
    margin: 0 auto 8px;
    line-height: 1.7;
}

.circle-empty-card p:last-child {
    margin-bottom: 0;
}

/* =========================
   PHASE 2A — MEMBER HOME DASHBOARD
========================= */

.circle-home-dashboard {
    padding: clamp(24px, 4vw, 38px);
}

.circle-home-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

.circle-home-main h2 {
    margin: 8px 0 10px;
    color: var(--circle-cream);
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    font-weight: 400;
}

.circle-home-main p {
    max-width: 720px;
    margin: 0;
    color: var(--circle-muted);
    font-size: 15px;
    line-height: 1.7;
}

.circle-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 380px;
}

.circle-dashboard-grid,
.circle-home-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.circle-stat-card,
.circle-home-summary-card {
    padding: 18px;
    border: 1px solid rgba(196, 122, 44, 0.18);
    background:
        radial-gradient(circle at top left, rgba(196, 122, 44, 0.08), transparent 42%),
        rgba(0, 0, 0, 0.32);
}

.circle-stat-card strong {
    display: block;
    margin: 8px 0 6px;
    color: var(--circle-cream);
    font-size: clamp(24px, 3.5vw, 38px);
    line-height: 1;
    font-weight: 400;
}

.circle-stat-card small {
    color: var(--circle-muted-soft);
    font-size: 12px;
    line-height: 1.4;
}

.circle-home-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.circle-home-summary-card span {
    display: block;
    margin: 0 0 9px;
    color: rgba(214, 177, 129, 0.84);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.circle-home-summary-card h3 {
    margin: 0 0 8px;
    color: var(--circle-cream);
    font-size: 23px;
    line-height: 1.15;
    font-weight: 400;
}

.circle-home-summary-card p {
    margin: 0;
    color: var(--circle-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* =========================
   READER RECORD CTA
========================= */

.circle-reader-record-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: clamp(22px, 4vw, 32px);
}

.circle-reader-record-cta h2 {
    margin: 0 0 8px;
    color: var(--circle-cream);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    font-weight: 400;
}

.circle-reader-record-cta p {
    max-width: 720px;
    margin: 0;
    color: var(--circle-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* =========================
   BEHIND THE FILES
========================= */

.circle-bfa-section {
    overflow: hidden;
}

.circle-bfa-section-heading {
    margin-bottom: 20px;
}

.circle-bfa-section-heading h2 {
    margin: 8px 0 10px;
    color: var(--circle-cream);
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.02;
    font-weight: 400;
}

.circle-bfa-section-heading p {
    max-width: 780px;
    margin: 0;
    color: var(--circle-muted);
    font-size: 15px;
    line-height: 1.7;
}

.circle-bfa-carousel {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(20px, 4vw, 34px);
    align-items: stretch;
    border: 1px solid rgba(196, 122, 44, 0.22);
    background: rgba(0, 0, 0, 0.28);
}

.circle-bfa-image-wrap {
    min-height: 320px;
    background: #070504;
    overflow: hidden;
}

.circle-bfa-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    filter: saturate(0.88) contrast(1.05);
}

.circle-bfa-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(22px, 4vw, 34px);
}

.circle-bfa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-bottom: 13px;
}

.circle-bfa-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 5px 8px;
    border: 1px solid rgba(196, 122, 44, 0.22);
    border-radius: 999px;
    color: rgba(214, 177, 129, 0.86);
    background: rgba(0, 0, 0, 0.32);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.circle-bfa-content h3 {
    margin: 0 0 12px;
    color: var(--circle-cream);
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.06;
    font-weight: 400;
}

.circle-bfa-excerpt {
    margin: 0 0 20px;
    color: var(--circle-muted);
    font-size: 15px;
    line-height: 1.7;
}

.circle-bfa-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.circle-bfa-control,
.circle-bfa-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 14px;
    border: 1px solid rgba(196, 122, 44, 0.4);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    color: #fff1de;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.circle-bfa-read {
    border-color: rgba(214, 177, 129, 0.78);
    background: linear-gradient(180deg, rgba(196, 122, 44, 0.86), rgba(108, 48, 16, 0.86));
    color: #ffffff;
}

.circle-bfa-control:hover,
.circle-bfa-control:focus-visible,
.circle-bfa-read:hover,
.circle-bfa-read:focus-visible {
    border-color: rgba(214, 177, 129, 0.9);
    color: #ffffff;
    outline: none;
}

.circle-bfa-control:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.circle-bfa-position {
    margin: 14px 0 0;
    color: var(--circle-muted-soft);
    font-size: 12px;
}

/* BFA Modal */

.circle-bfa-modal[hidden] {
    display: none !important;
}

.circle-bfa-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
}

body.is-bfa-modal-open {
    overflow: hidden;
}

.circle-bfa-modal-panel {
    position: relative;
    width: min(960px, 100%);
    max-height: min(88vh, 880px);
    overflow: auto;
    border: 1px solid rgba(196, 122, 44, 0.32);
    background:
        radial-gradient(circle at top left, rgba(196, 122, 44, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(16, 11, 8, 0.98), rgba(5, 4, 3, 0.98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72);
}

.circle-bfa-modal-close {
    position: sticky;
    top: 0;
    z-index: 3;
    display: block;
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-bottom: 1px solid rgba(196, 122, 44, 0.18);
    background: rgba(0, 0, 0, 0.68);
    color: rgba(214, 177, 129, 0.88);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: right;
    text-transform: uppercase;
    cursor: pointer;
}

.circle-bfa-modal-close:hover,
.circle-bfa-modal-close:focus-visible {
    color: #ffffff;
    outline: none;
}

.circle-bfa-modal-image {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border-bottom: 1px solid rgba(196, 122, 44, 0.18);
}

.circle-bfa-modal-content {
    padding: clamp(22px, 4vw, 40px);
}

.circle-bfa-modal-content h3 {
    margin: 0 0 16px;
    color: var(--circle-cream);
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.04;
    font-weight: 400;
}

.circle-bfa-modal-body {
    color: rgba(239, 231, 220, 0.78);
    font-size: 16px;
    line-height: 1.8;
}

.circle-bfa-modal-body p {
    margin: 0 0 17px;
}

/* BFA Reactions */

.circle-bfa-reactions {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(196, 122, 44, 0.18);
}

.circle-bfa-reactions-heading h4 {
    margin: 0 0 8px;
    color: var(--circle-cream);
    font-size: 22px;
    font-weight: 400;
}

.circle-bfa-reactions-heading p {
    margin: 0 0 14px;
    color: var(--circle-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.circle-bfa-reaction-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.circle-bfa-reaction-button {
    min-height: 36px;
    padding: 9px 12px;
    border: 1px solid rgba(196, 122, 44, 0.26);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(239, 231, 220, 0.72);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
}

.circle-bfa-reaction-button:hover,
.circle-bfa-reaction-button:focus-visible,
.circle-bfa-reaction-button.is-active {
    border-color: rgba(214, 177, 129, 0.82);
    background: rgba(196, 122, 44, 0.14);
    color: #fff1de;
    outline: none;
}

.circle-bfa-reaction-button:disabled {
    opacity: 0.5;
    cursor: wait;
}

.circle-bfa-reaction-status {
    min-height: 20px;
    margin: 13px 0 0;
    color: var(--circle-muted-soft);
    font-size: 13px;
    line-height: 1.5;
}

.circle-bfa-reaction-status.is-success {
    color: var(--circle-success);
}

.circle-bfa-reaction-status.is-error {
    color: var(--circle-error);
}

.circle-bfa-reaction-status.is-loading {
    color: rgba(255, 255, 255, 0.78);
}

.circle-bfa-reaction-status.is-muted {
    color: rgba(214, 177, 129, 0.76);
}

/* =========================
   REWARDS + REDEMPTIONS
========================= */

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

.circle-reward-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(196, 122, 44, 0.2);
    border-radius: 9px;
    background:
        radial-gradient(circle at top left, rgba(196, 122, 44, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
        rgba(0, 0, 0, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 16px 40px rgba(0, 0, 0, 0.24);
}

.circle-reward-card.is-unlocked {
    border-color: rgba(214, 177, 129, 0.34);
}

.circle-reward-card.is-locked {
    opacity: 0.78;
}

.circle-reward-card-header,
.circle-redemption-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 13px;
}

.circle-reward-card h3 {
    margin: 0 0 10px;
    color: var(--circle-cream);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.13;
    font-weight: 400;
}

.circle-reward-card p {
    margin: 0 0 12px;
    color: var(--circle-muted);
    font-size: 14px;
    line-height: 1.65;
}

.circle-reward-card small {
    display: block;
    color: var(--circle-muted-soft);
    font-size: 12px;
    line-height: 1.45;
}

.circle-reward-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 5px 8px;
    border: 1px solid rgba(196, 122, 44, 0.28);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    color: rgba(214, 177, 129, 0.9);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.circle-reward-badge.is-unlocked,
.circle-reward-badge.is-milestone {
    border-color: rgba(214, 177, 129, 0.56);
    background: rgba(196, 122, 44, 0.12);
    color: #ffe2ba;
}

.circle-reward-badge.is-pending {
    border-color: rgba(214, 177, 129, 0.5);
    color: rgba(255, 225, 185, 0.94);
}

.circle-reward-badge.is-issued {
    border-color: rgba(154, 203, 154, 0.48);
    background: rgba(154, 203, 154, 0.08);
    color: rgba(187, 237, 187, 0.95);
}

.circle-reward-badge.is-used {
    border-color: rgba(143, 168, 200, 0.46);
    background: rgba(143, 168, 200, 0.08);
    color: rgba(199, 219, 244, 0.95);
}

.circle-reward-badge.is-cancelled {
    border-color: rgba(217, 124, 104, 0.46);
    background: rgba(217, 124, 104, 0.08);
    color: rgba(255, 205, 196, 0.95);
}

.circle-reward-badge.is-locked {
    border-color: rgba(239, 231, 220, 0.16);
    color: rgba(239, 231, 220, 0.48);
}

.circle-reward-progress {
    position: relative;
    height: 8px;
    margin: 16px 0 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.circle-reward-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(196, 122, 44, 0.95), rgba(214, 177, 129, 0.92));
    box-shadow: 0 0 18px rgba(196, 122, 44, 0.2);
}

.circle-reward-progress-note {
    margin: 0 0 15px !important;
    color: rgba(214, 177, 129, 0.72) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.circle-redeem-button {
    margin-top: 14px;
}

.circle-redemption-notice {
    margin-top: 15px;
    padding: 14px;
    border: 1px solid rgba(196, 122, 44, 0.22);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
}

.circle-redemption-notice strong {
    display: block;
    margin: 0 0 7px;
    color: var(--circle-cream);
    font-size: 15px;
}

.circle-redemption-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.circle-redemption-notice.is-issued {
    border-color: rgba(154, 203, 154, 0.28);
    background: rgba(154, 203, 154, 0.06);
}

.circle-redemption-notice.is-used {
    border-color: rgba(143, 168, 200, 0.28);
    background: rgba(143, 168, 200, 0.06);
}

.circle-redemption-notice.is-cancelled {
    border-color: rgba(217, 124, 104, 0.28);
    background: rgba(217, 124, 104, 0.06);
}

.circle-redemption-code {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(214, 177, 129, 0.32);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
}

.circle-redemption-code > span {
    display: block;
    margin: 0 0 8px;
    color: rgba(214, 177, 129, 0.84);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.circle-redemption-code-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.circle-redemption-code code {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px dashed rgba(214, 177, 129, 0.42);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.46);
    color: #fff1de;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.circle-copy-code-button {
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid rgba(196, 122, 44, 0.36);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    color: rgba(239, 231, 220, 0.8);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
}

.circle-copy-code-button:hover,
.circle-copy-code-button:focus-visible,
.circle-copy-code-button.is-copied {
    border-color: rgba(154, 203, 154, 0.6);
    color: #ffffff;
    outline: none;
}

.circle-muted-line {
    color: var(--circle-muted-soft) !important;
    font-size: 13px !important;
}

/* =========================
   PHASE 2B — DELIVERY ADDRESS
========================= */

.circle-delivery-form,
.circle-delivery-summary {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(196, 122, 44, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(196, 122, 44, 0.06), rgba(196, 122, 44, 0.02)),
        rgba(0, 0, 0, 0.3);
}

.circle-delivery-heading {
    margin-bottom: 14px;
}

.circle-delivery-heading strong,
.circle-delivery-summary strong {
    display: block;
    margin: 0 0 7px;
    color: var(--circle-cream);
    font-size: 16px;
    line-height: 1.3;
}

.circle-delivery-heading p,
.circle-delivery-summary p {
    margin: 0;
    color: var(--circle-muted);
    font-size: 13px;
    line-height: 1.6;
}

.circle-delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.circle-delivery-form label {
    display: grid;
    gap: 7px;
    color: rgba(214, 177, 129, 0.86);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.circle-delivery-form input,
.circle-delivery-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(196, 122, 44, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: var(--circle-cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.circle-delivery-form input {
    min-height: 42px;
    padding: 9px 11px;
}

.circle-delivery-form textarea {
    min-height: 82px;
    padding: 11px;
    line-height: 1.55;
    resize: vertical;
}

.circle-delivery-form input:focus,
.circle-delivery-form textarea:focus {
    border-color: rgba(214, 177, 129, 0.72);
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.1);
}

.circle-delivery-note-field {
    grid-column: 1 / -1;
}

.circle-delivery-status {
    min-height: 19px;
    margin: 11px 0 0;
    color: var(--circle-muted-soft);
    font-size: 13px;
    line-height: 1.5;
}

.circle-delivery-status.is-success {
    color: var(--circle-success);
}

.circle-delivery-status.is-error {
    color: var(--circle-error);
}

.circle-delivery-status.is-loading {
    color: rgba(255, 255, 255, 0.78);
}

.circle-delivery-summary.is-received {
    border-color: rgba(154, 203, 154, 0.28);
    background:
        linear-gradient(180deg, rgba(154, 203, 154, 0.08), rgba(154, 203, 154, 0.025)),
        rgba(0, 0, 0, 0.3);
}

.circle-delivery-summary address {
    display: grid;
    gap: 3px;
    margin: 9px 0 10px;
    color: rgba(239, 231, 220, 0.78);
    font-size: 14px;
    line-height: 1.45;
    font-style: normal;
}

.circle-delivery-summary address span {
    display: block;
}

.circle-delivery-form input:-webkit-autofill,
.circle-delivery-form input:-webkit-autofill:hover,
.circle-delivery-form input:-webkit-autofill:focus,
.circle-delivery-form textarea:-webkit-autofill,
.circle-delivery-form textarea:-webkit-autofill:hover,
.circle-delivery-form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #efe7dc;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.82) inset;
    caret-color: #efe7dc;
}

/* =========================
   POINTS HISTORY
========================= */

.circle-section-toggle-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.circle-section-toggle-header h2 {
    margin: 0;
    color: var(--circle-cream);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 400;
}

.circle-section-toggle-button {
    min-height: 36px;
    padding: 9px 12px;
    border: 1px solid rgba(196, 122, 44, 0.3);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    color: rgba(239, 231, 220, 0.76);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
}

.circle-section-toggle-button:hover,
.circle-section-toggle-button:focus-visible {
    border-color: rgba(214, 177, 129, 0.72);
    color: #ffffff;
    outline: none;
}

.circle-collapsible-section.is-collapsed .circle-collapsible-content {
    display: none;
}

.circle-collapsible-content {
    margin-top: 18px;
}

.circle-points-list {
    display: grid;
    gap: 12px;
}

.circle-points-card {
    padding: 16px;
    border: 1px solid rgba(196, 122, 44, 0.16);
    background: rgba(0, 0, 0, 0.3);
}

.circle-points-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--circle-gold);
    font-size: 18px;
}

.circle-points-card p {
    margin: 0 0 7px;
    color: var(--circle-muted);
    font-size: 14px;
    line-height: 1.55;
}

.circle-points-card small {
    color: var(--circle-muted-soft);
    font-size: 12px;
}

/* =========================
   PHASE 2D — ADMIN REWARD FULFILMENT DESK
========================= */

.circle-admin-reward-section {
    position: relative;
}

.circle-admin-reward-desk {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(196, 122, 44, 0.28);
    border-radius: 10px;
    background:
        radial-gradient(circle at top left, rgba(196, 122, 44, 0.13), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
        rgba(0, 0, 0, 0.46);
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.circle-admin-reward-summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    gap: 22px;
    align-items: center;
    padding: clamp(20px, 3vw, 30px);
    cursor: pointer;
    list-style: none;
}

.circle-admin-reward-summary::-webkit-details-marker {
    display: none;
}

.circle-admin-reward-summary::marker {
    content: "";
}

.circle-admin-reward-summary::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(196, 122, 44, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 46%);
}

.circle-admin-reward-summary > * {
    position: relative;
    z-index: 1;
}

.circle-admin-reward-summary h2 {
    margin: 0 0 10px;
    color: var(--circle-cream);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    font-weight: 400;
}

.circle-admin-reward-summary p {
    max-width: 780px;
    margin: 0;
    color: rgba(239, 231, 220, 0.66);
    font-size: 14.5px;
    line-height: 1.65;
}

.circle-admin-reward-summary-side {
    display: grid;
    gap: 7px;
    justify-items: end;
    text-align: right;
}

.circle-admin-reward-summary-side span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 13px;
    border: 1px solid rgba(196, 122, 44, 0.44);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.44);
    color: rgba(214, 177, 129, 0.95);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.circle-admin-reward-summary-side small {
    max-width: 230px;
    color: rgba(239, 231, 220, 0.54);
    font-size: 12px;
    line-height: 1.45;
}

.circle-admin-reward-panel {
    padding: 0 clamp(16px, 3vw, 30px) clamp(20px, 3vw, 30px);
    border-top: 1px solid rgba(196, 122, 44, 0.16);
}

.circle-admin-reward-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0 16px;
}

.circle-admin-reward-filters button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(196, 122, 44, 0.24);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    color: rgba(239, 231, 220, 0.62);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.circle-admin-reward-filters button:hover,
.circle-admin-reward-filters button:focus-visible {
    border-color: rgba(214, 177, 129, 0.68);
    color: #efe7dc;
    outline: none;
}

.circle-admin-reward-filters button.is-active {
    border-color: rgba(214, 177, 129, 0.86);
    background: rgba(196, 122, 44, 0.14);
    color: #fff1de;
}

.circle-admin-reward-filters button strong {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(214, 177, 129, 0.92);
    font-size: 10px;
}

.circle-admin-reward-status {
    min-height: 20px;
    margin: 0 0 16px;
    color: rgba(239, 231, 220, 0.58);
    font-size: 13px;
    line-height: 1.5;
}

.circle-admin-reward-status.is-success {
    color: var(--circle-success);
}

.circle-admin-reward-status.is-error {
    color: var(--circle-error);
}

.circle-admin-reward-status.is-loading {
    color: rgba(255, 255, 255, 0.78);
}

.circle-admin-reward-list {
    display: grid;
    gap: 16px;
}

.circle-admin-reward-card {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid rgba(196, 122, 44, 0.2);
    border-radius: 9px;
    background:
        radial-gradient(circle at top left, rgba(196, 122, 44, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
        rgba(0, 0, 0, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 16px 40px rgba(0, 0, 0, 0.24);
}

.circle-admin-reward-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(196, 122, 44, 0.38);
}

.circle-admin-reward-card.is-issued::before {
    background: rgba(154, 203, 154, 0.58);
}

.circle-admin-reward-card.is-used::before {
    background: rgba(130, 160, 190, 0.58);
}

.circle-admin-reward-card.is-cancelled::before {
    background: rgba(217, 124, 104, 0.62);
}

.circle-admin-reward-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 16px;
}

.circle-admin-reward-card-header h3 {
    margin: 5px 0 8px;
    color: var(--circle-cream);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.12;
    font-weight: 400;
}

.circle-admin-reward-card-header p {
    margin: 0;
    color: rgba(239, 231, 220, 0.62);
    font-size: 13.5px;
    line-height: 1.55;
}

.circle-admin-reward-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.circle-reward-badge.is-delivery {
    border-color: rgba(214, 177, 129, 0.48);
    background: rgba(196, 122, 44, 0.12);
    color: rgba(255, 231, 196, 0.92);
}

.circle-admin-reward-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.circle-admin-reward-meta-grid div {
    padding: 12px;
    border: 1px solid rgba(196, 122, 44, 0.16);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.28);
}

.circle-admin-reward-meta-grid span {
    display: block;
    margin: 0 0 6px;
    color: rgba(214, 177, 129, 0.76);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.circle-admin-reward-meta-grid strong {
    display: block;
    color: rgba(239, 231, 220, 0.88);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.circle-admin-delivery-card {
    display: grid;
    gap: 14px;
    margin: 0 0 16px;
    padding: 15px;
    border: 1px solid rgba(154, 203, 154, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(154, 203, 154, 0.08), rgba(154, 203, 154, 0.025)),
        rgba(0, 0, 0, 0.28);
}

.circle-admin-delivery-card.is-needed {
    border-color: rgba(217, 124, 104, 0.3);
    background:
        linear-gradient(180deg, rgba(217, 124, 104, 0.08), rgba(217, 124, 104, 0.025)),
        rgba(0, 0, 0, 0.28);
}

.circle-admin-delivery-card strong {
    display: block;
    margin: 0 0 9px;
    color: #f3eadc;
    font-size: 16px;
    line-height: 1.3;
}

.circle-admin-delivery-card address {
    display: grid;
    gap: 4px;
    margin: 0;
    color: rgba(239, 231, 220, 0.76);
    font-size: 14px;
    line-height: 1.45;
    font-style: normal;
}

.circle-admin-delivery-card address span {
    display: block;
}

.circle-admin-delivery-card p {
    margin: 0;
    color: rgba(239, 231, 220, 0.64);
    font-size: 13px;
    line-height: 1.6;
}

.circle-admin-delivery-card p span {
    display: block;
    margin: 0 0 5px;
    color: rgba(214, 177, 129, 0.82);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.circle-admin-reward-form {
    display: grid;
    gap: 14px;
}

.circle-admin-reward-form-grid {
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) minmax(170px, 0.8fr) minmax(240px, 1.4fr);
    gap: 12px;
    align-items: stretch;
}

.circle-admin-reward-form label {
    display: grid;
    gap: 8px;
    color: rgba(214, 177, 129, 0.86);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.circle-admin-reward-form input,
.circle-admin-reward-form select,
.circle-admin-reward-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(196, 122, 44, 0.26);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.48);
    color: #f3eadc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.circle-admin-reward-form input,
.circle-admin-reward-form select {
    min-height: 42px;
    padding: 9px 11px;
}

.circle-admin-reward-form textarea {
    min-height: 94px;
    padding: 11px;
    resize: vertical;
    line-height: 1.55;
}

.circle-admin-reward-form input:focus,
.circle-admin-reward-form select:focus,
.circle-admin-reward-form textarea:focus {
    border-color: rgba(214, 177, 129, 0.74);
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.1);
}

.circle-admin-reward-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.circle-admin-reward-actions .circle-button {
    min-height: 38px;
    padding: 10px 14px;
    font-size: 9px;
}

.circle-admin-reward-actions .circle-button:disabled,
.circle-admin-reward-form input:disabled,
.circle-admin-reward-form select:disabled,
.circle-admin-reward-form textarea:disabled,
.circle-admin-reward-filters button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.circle-admin-reward-warning {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(217, 124, 104, 0.28);
    border-radius: 7px;
    background: rgba(217, 124, 104, 0.08);
    color: rgba(255, 205, 196, 0.86);
    font-size: 13px;
    line-height: 1.55;
}

.circle-admin-reward-error {
    margin-top: 20px;
}

.circle-admin-reward-form input:-webkit-autofill,
.circle-admin-reward-form input:-webkit-autofill:hover,
.circle-admin-reward-form input:-webkit-autofill:focus,
.circle-admin-reward-form textarea:-webkit-autofill,
.circle-admin-reward-form textarea:-webkit-autofill:hover,
.circle-admin-reward-form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #efe7dc;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.82) inset;
    caret-color: #efe7dc;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px) {
    .circle-auth-shell,
    .circle-bfa-carousel,
    .circle-reader-record-cta,
    .circle-home-main,
    .circle-admin-reward-summary {
        grid-template-columns: 1fr;
    }

    .circle-home-actions {
        justify-content: flex-start;
        max-width: none;
    }

    .circle-dashboard-grid,
    .circle-home-stat-grid,
    .circle-home-summary-grid,
    .circle-reward-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .circle-admin-reward-summary-side {
        justify-items: start;
        text-align: left;
    }

    .circle-admin-reward-card-header {
        grid-template-columns: 1fr;
    }

    .circle-admin-reward-badges {
        justify-content: flex-start;
    }

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

    .circle-admin-reward-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    #blackwood-circle-app {
        width: min(100% - 22px, 1180px);
        padding-top: 28px;
    }

    .circle-dashboard {
        gap: 18px;
    }

    .circle-dashboard-actions,
    .circle-bfa-controls,
    .circle-redemption-code-row,
    .circle-home-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .circle-button,
    .circle-reader-record-button,
    .circle-bfa-control,
    .circle-bfa-read,
    .circle-copy-code-button {
        width: 100%;
    }

    .circle-dashboard-grid,
    .circle-home-stat-grid,
    .circle-home-summary-grid,
    .circle-reward-list,
    .circle-delivery-grid {
        grid-template-columns: 1fr;
    }

    .circle-section-toggle-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .circle-section-toggle-button {
        width: 100%;
    }

    .circle-bfa-modal {
        padding: 12px;
    }

    .circle-bfa-modal-content {
        padding: 20px;
    }

    .circle-admin-reward-summary {
        padding: 18px;
    }

    .circle-admin-reward-panel {
        padding: 0 14px 18px;
    }

    .circle-admin-reward-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .circle-admin-reward-filters button {
        justify-content: space-between;
    }

    .circle-admin-reward-card {
        padding: 18px 15px;
    }

    .circle-admin-reward-meta-grid {
        grid-template-columns: 1fr;
    }

    .circle-admin-reward-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .circle-admin-reward-actions .circle-button {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .circle-auth-tabs,
    .circle-admin-reward-filters {
        grid-template-columns: 1fr;
    }

    .circle-auth-intro,
    .circle-auth-card,
    .circle-dashboard-hero,
    .circle-home-dashboard,
    .circle-section,
    .circle-reader-record-cta {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .circle-button,
    .circle-reader-record-button,
    .circle-bfa-control,
    .circle-bfa-read,
    .circle-copy-code-button {
        transition: none;
    }

    .circle-button:hover,
    .circle-button:focus-visible,
    .circle-reader-record-button:hover,
    .circle-reader-record-button:focus-visible {
        transform: none;
    }
}
/* =========================================================
   BLACKWOOD CIRCLE — PREMIUM UI PASS
   Typography + spacing + panel refinement
   Keep below all existing Circle CSS
   ========================================================= */

/* ---------------------------------------------------------
   1. PAGE POSITION
   Give the signed-in Circle a little more breathing room
   beneath the site header.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   2. DASHBOARD RHYTHM
--------------------------------------------------------- */

.circle-dashboard {
    gap: 20px;
}

.circle-dashboard-hero,
.circle-home-dashboard,
.circle-section,
.circle-reader-record-cta {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 18px 46px rgba(0, 0, 0, 0.28);
}


/* ---------------------------------------------------------
   3. MAIN WELCOME HERO
   Considerably smaller and more editorial.
--------------------------------------------------------- */

.circle-dashboard-hero {
    padding: clamp(30px, 4vw, 46px);
}

.circle-dashboard-hero h1 {
    margin: 10px 0 12px;

    font-size: clamp(38px, 4.8vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.025em;
}

.circle-dashboard-hero p {
    max-width: 720px;

    font-size: 14px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   4. YOUR CIRCLE
--------------------------------------------------------- */

.circle-home-dashboard {
    padding: clamp(26px, 3.5vw, 34px);
}

.circle-home-main {
    gap: 28px;
    margin-bottom: 20px;
}

.circle-home-main h2 {
    margin: 6px 0 8px;

    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1;
    letter-spacing: -0.018em;
}

.circle-home-main p {
    max-width: 680px;

    font-size: 13.5px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   5. HOME ACTION BUTTONS
   More compact, less dashboard-heavy.
--------------------------------------------------------- */

.circle-home-actions {
    gap: 7px;
    max-width: 410px;
}

.circle-home-actions .circle-button {
    min-height: 38px;
    padding: 10px 15px;

    font-size: 8.5px;
    letter-spacing: 0.14em;
}


/* ---------------------------------------------------------
   6. STAT CARDS
--------------------------------------------------------- */

.circle-dashboard-grid,
.circle-home-stat-grid {
    gap: 12px;
}

.circle-stat-card,
.circle-home-summary-card {
    padding: 16px 17px;
}

.circle-stat-card strong {
    margin: 7px 0 5px;

    font-size: clamp(22px, 2.7vw, 31px);
    line-height: 1.02;
}

.circle-stat-card small {
    font-size: 11px;
    line-height: 1.4;
}

.circle-home-summary-grid {
    gap: 12px;
    margin-top: 12px;
}

.circle-home-summary-card span {
    margin-bottom: 7px;

    font-size: 8.5px;
}

.circle-home-summary-card h3 {
    margin-bottom: 6px;

    font-size: 20px;
    line-height: 1.12;
}

.circle-home-summary-card p {
    font-size: 12.5px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   7. GENERAL SECTION SCALE
--------------------------------------------------------- */

.circle-section {
    padding: clamp(24px, 3.2vw, 32px);
}

.circle-section > h2,
.circle-section-toggle-header h2 {
    font-size: clamp(28px, 3.3vw, 40px);
    line-height: 1.02;
    letter-spacing: -0.015em;
}


/* ---------------------------------------------------------
   8. READER RECORD CTA
--------------------------------------------------------- */

.circle-reader-record-cta {
    padding: clamp(22px, 3vw, 28px);
}

.circle-reader-record-cta h2 {
    margin-bottom: 6px;

    font-size: clamp(27px, 3.2vw, 38px);
}

.circle-reader-record-cta p {
    max-width: 690px;

    font-size: 13.5px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   9. BEHIND THE FILES
--------------------------------------------------------- */

.circle-bfa-section-heading {
    margin-bottom: 17px;
}

.circle-bfa-section-heading h2 {
    margin: 6px 0 8px;

    font-size: clamp(30px, 3.7vw, 44px);
}

.circle-bfa-section-heading p {
    font-size: 13.5px;
    line-height: 1.6;
}

.circle-bfa-content h3 {
    font-size: clamp(26px, 3.3vw, 38px);
}

.circle-bfa-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   10. REWARD CARDS
--------------------------------------------------------- */

.circle-reward-card {
    padding: 20px;
}

.circle-reward-card h3 {
    font-size: clamp(20px, 2.4vw, 27px);
    line-height: 1.12;
}

.circle-reward-card p {
    font-size: 13px;
    line-height: 1.58;
}

.circle-reward-card small {
    font-size: 11px;
}


/* ---------------------------------------------------------
   11. ADMIN REWARD DESK
--------------------------------------------------------- */

.circle-admin-reward-summary {
    padding: clamp(20px, 2.8vw, 26px);
}

.circle-admin-reward-summary h2 {
    margin-bottom: 7px;

    font-size: clamp(27px, 3.2vw, 37px);
}

.circle-admin-reward-summary p {
    font-size: 13px;
    line-height: 1.58;
}

.circle-admin-reward-card-header h3 {
    font-size: clamp(20px, 2.4vw, 27px);
}


/* ---------------------------------------------------------
   12. LABELS / KICKERS
   Keep them crisp but quieter.
--------------------------------------------------------- */

.circle-kicker,
.circle-post-meta,
.circle-reward-status,
.circle-stat-label {
    font-size: 9px;
    letter-spacing: 0.17em;
}


/* ---------------------------------------------------------
   13. BUTTON REFINEMENT
   Slightly smaller everywhere.
--------------------------------------------------------- */

.circle-button,
.circle-reader-record-button {
    min-height: 39px;
    padding: 10px 15px;

    font-size: 9px;
    letter-spacing: 0.14em;
}


/* ---------------------------------------------------------
   14. PREMIUM PANEL EDGES
--------------------------------------------------------- */

.circle-dashboard-hero,
.circle-home-dashboard,
.circle-section,
.circle-reader-record-cta {
    border-color: rgba(196, 122, 44, 0.20);
}

.circle-stat-card,
.circle-home-summary-card,
.circle-reward-card {
    border-color: rgba(196, 122, 44, 0.16);
}


/* ---------------------------------------------------------
   
/* ---------------------------------------------------------
   16. MOBILE PREMIUM SCALE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .members-page.is-circle-signed-in #blackwood-circle-app {
        padding-top: 42px;
    }

    .circle-dashboard-hero h1 {
        font-size: clamp(36px, 11vw, 48px);
    }

    .circle-home-main h2 {
        font-size: clamp(29px, 9vw, 38px);
    }

    .circle-section > h2,
    .circle-section-toggle-header h2 {
        font-size: clamp(27px, 8vw, 36px);
    }

    .circle-home-actions {
        max-width: none;
    }

    .circle-premium-disclosure-toggle {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 19px;
    }

    .circle-premium-disclosure-side {
        justify-content: space-between;
    }

    .circle-premium-disclosure-body {
        padding: 0 19px 19px;
    }
}


/* ---------------------------------------------------------
   17. REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .circle-premium-disclosure-chevron {
        transition: none;
    }
}
/* =========================================================
   BLACKWOOD CIRCLE — HEADER SEPARATION + HERO REFINEMENT
   ========================================================= */

/* Move the signed-in Circle safely below the site header */
.members-page.is-circle-signed-in #blackwood-circle-app {
    padding-top: clamp(92px, 8vw, 118px);
}


/* Give the welcome panel a more premium, contained feel */
.circle-dashboard-hero {
    position: relative;

    padding:
        clamp(34px, 4.5vw, 50px)
        clamp(34px, 4.5vw, 48px);

    border-radius: 2px;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(196, 122, 44, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.004)
        ),
        rgba(0, 0, 0, 0.48);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 22px 50px rgba(0,0,0,.30);
}


/* Slightly smaller again — elegant rather than dominant */
.circle-dashboard-hero h1 {
    max-width: 920px;

    margin: 10px 0 14px;

    font-size: clamp(40px, 4.4vw, 54px);
    line-height: 0.98;
    letter-spacing: -0.025em;
}


/* Softer supporting line */
.circle-dashboard-hero p {
    max-width: 760px;

    color: rgba(239, 231, 220, 0.58);

    font-size: 13.5px;
    line-height: 1.65;
}


/* More air between hero and Your Circle */
.circle-dashboard-hero + .circle-home-dashboard {
    margin-top: 8px;
}


/* Your Circle panel gets stronger internal hierarchy */
.circle-home-dashboard {
    padding:
        clamp(30px, 4vw, 40px)
        clamp(30px, 4vw, 34px);
}


/* Bring the heading area together */
.circle-home-main {
    align-items: center;
    margin-bottom: 22px;
}


/* Slightly quieter section title */
.circle-home-main h2 {
    font-size: clamp(30px, 3.4vw, 40px);
}


/* Pull the action controls into a cleaner cluster */
.circle-home-actions {
    gap: 8px;
    max-width: 430px;
}


/* More refined stat cards */
.circle-stat-card,
.circle-home-summary-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            rgba(255,255,255,.002)
        ),
        rgba(0,0,0,.34);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018);
}


/* Make main stats feel deliberate rather than oversized */
.circle-stat-card strong {
    font-size: clamp(22px, 2.4vw, 29px);
}


/* Slightly reduce summary cards too */
.circle-home-summary-card h3 {
    font-size: 19px;
}


/* Premium breathing room before the next page section */
.circle-home-dashboard + * {
    margin-top: 8px;
}


@media (max-width: 700px) {
    .members-page.is-circle-signed-in #blackwood-circle-app {
        padding-top: 72px;
    }

    .circle-dashboard-hero {
        padding: 28px 22px;
    }

    .circle-dashboard-hero h1 {
        font-size: clamp(36px, 10vw, 46px);
    }

    .circle-home-dashboard {
        padding: 24px 20px;
    }
}
/* =========================================================
   BLACKWOOD CIRCLE — FINAL TOP PANEL TUNE
   ========================================================= */

.members-page.is-circle-signed-in #blackwood-circle-app {
    padding-top: clamp(102px, 8.5vw, 126px);
}

/* Calm the action cluster */
.circle-home-actions .circle-button {
    min-height: 36px;
    padding: 9px 14px;
    font-size: 8px;
    letter-spacing: 0.13em;
}

/* Let the primary action remain the obvious one */
.circle-home-actions .circle-button-primary {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 20px rgba(0,0,0,.18);
}

/* Secondary actions become quieter */
.circle-home-actions .circle-button-secondary {
    border-color: rgba(196, 122, 44, 0.36);
    background: rgba(0,0,0,.26);
    color: rgba(239,231,220,.78);
}

/* Slightly more breathing room around Your Circle */
.circle-home-dashboard {
    padding-top: clamp(34px, 4vw, 42px);
    padding-bottom: clamp(32px, 4vw, 40px);
}
/* =========================================================
   BLACKWOOD CIRCLE — PREMIUM DISCLOSURE FINAL PASS
   ========================================================= */

.circle-premium-disclosure {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(196, 122, 44, 0.20);
    border-radius: 10px;

    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(196, 122, 44, 0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.014),
            rgba(255,255,255,0.002)
        ),
        rgba(0, 0, 0, 0.40);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.02),
        0 16px 38px rgba(0,0,0,0.24);

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.circle-premium-disclosure.is-open {
    border-color: rgba(196, 122, 44, 0.30);

    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(196, 122, 44, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.018),
            rgba(255,255,255,0.003)
        ),
        rgba(0, 0, 0, 0.44);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.026),
        0 18px 42px rgba(0,0,0,0.27);
}

.circle-premium-disclosure-toggle {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;

    width: 100%;
    padding: 20px 22px;

    border: 0;
    background: transparent;
    color: inherit;

    text-align: left;
    cursor: pointer;
}

.circle-premium-disclosure-toggle::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;

    height: 1px;

    background: rgba(196, 122, 44, 0);
    transition: background 180ms ease;
}

.circle-premium-disclosure.is-open
.circle-premium-disclosure-toggle::after {
    background: rgba(196, 122, 44, 0.14);
}

.circle-premium-disclosure-toggle:hover,
.circle-premium-disclosure-toggle:focus-visible {
    outline: none;
}

.circle-premium-disclosure-heading {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.circle-premium-disclosure-heading small {
    color: rgba(214, 177, 129, 0.72);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.17em;
    line-height: 1.2;
    text-transform: uppercase;
}

.circle-premium-disclosure-title {
    color: var(--circle-cream);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(23px, 2.4vw, 31px);
    font-weight: 400;
    line-height: 1.05;
}

.circle-premium-disclosure-summary {
    max-width: 760px;
    margin-top: 1px;

    color: rgba(239, 231, 220, 0.50);
    font-size: 11.5px;
    line-height: 1.45;
}

.circle-premium-disclosure-side {
    display: flex;
    gap: 10px;
    align-items: center;
}

.circle-premium-disclosure-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;
    padding: 6px 10px;

    border: 1px solid rgba(196, 122, 44, 0.30);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.28);
    color: rgba(214, 177, 129, 0.86);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.circle-premium-disclosure-chevron {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border: 1px solid rgba(196, 122, 44, 0.34);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.24);
    color: rgba(214, 177, 129, 0.88);

    font-size: 13px;
    line-height: 1;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease;
}

.circle-premium-disclosure-toggle:hover
.circle-premium-disclosure-chevron,
.circle-premium-disclosure-toggle:focus-visible
.circle-premium-disclosure-chevron {
    border-color: rgba(214, 177, 129, 0.66);
    background: rgba(196, 122, 44, 0.08);
    color: #fff1de;
}

.circle-premium-disclosure.is-open
.circle-premium-disclosure-chevron {
    transform: rotate(180deg);
}

.circle-premium-disclosure-body {
    padding: 22px;
}

.circle-premium-disclosure-body[hidden] {
    display: none !important;
}

/* Remove extra top spacing inside disclosure bodies */
.circle-premium-disclosure-body > :first-child {
    margin-top: 0;
}

/* Slightly tighten known content areas when nested */
.circle-premium-disclosure-body .circle-reward-list,
.circle-premium-disclosure-body .circle-points-list {
    margin-top: 0;
}

/* Scroll targets should not sit underneath the site header */
#circle-panel-behindFiles,
#circle-panel-rewards,
#circle-panel-redemptions,
#circle-panel-points {
    scroll-margin-top: 130px;
}

@media (max-width: 700px) {
    .circle-premium-disclosure-toggle {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 18px;
    }

    .circle-premium-disclosure-toggle::after {
        left: 18px;
        right: 18px;
    }

    .circle-premium-disclosure-title {
        font-size: clamp(22px, 7vw, 29px);
    }

    .circle-premium-disclosure-summary {
        font-size: 11px;
    }

    .circle-premium-disclosure-side {
        justify-content: space-between;
        width: 100%;
    }

    .circle-premium-disclosure-body {
        padding: 18px;
    }

    #circle-panel-behindFiles,
    #circle-panel-rewards,
    #circle-panel-redemptions,
    #circle-panel-points {
        scroll-margin-top: 92px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .circle-premium-disclosure,
    .circle-premium-disclosure-chevron,
    .circle-premium-disclosure-toggle::after {
        transition: none;
    }
}