:root {
  color-scheme: light;
  --forest: #183c32;
  --forest-deep: #102d26;
  --sage: #718a58;
  --lime: #d7ed88;
  --cream: #f7f6ef;
  --paper: #fffefa;
  --ink: #1c2924;
  --muted: #748078;
  --line: #e6e8df;
  --gold: #c98747;
  --font-body: "DM Sans", sans-serif;
  --font-display: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.site-header { height: 82px; padding: 0 clamp(22px, 6vw, 94px); display: flex; align-items: center; justify-content: space-between; background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--forest); font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.8px; }
.brand-mark { width: 31px; height: 31px; display: inline-grid; place-items: center; border-radius: 50% 50% 50% 15%; color: var(--lime); background: var(--forest); font-size: 17px; transform: rotate(-8deg); }
.brand-light { color: var(--sage); font-weight: 500; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-link { margin-right: 17px; color: #536158; font-size: 13px; font-weight: 600; }
.nav-link:hover { color: var(--forest); }
.account-label { max-width: 150px; overflow: hidden; color: var(--sage); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.button { min-height: 43px; padding: 0 19px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 700; transition: background .2s, color .2s, transform .2s; }
.button:hover { transform: translateY(-1px); }
.button-dark { color: white; background: var(--forest); }
.button-dark:hover { background: var(--forest-deep); }
.button-quiet { color: var(--forest); background: transparent; }
.button-quiet:hover { background: var(--cream); }
.button-lime { color: var(--forest); background: var(--lime); }
.button-lime:hover { background: #cce477; }
.full-width { width: 100%; }

.hero { position: relative; min-height: 527px; padding: 66px clamp(22px, 10.1vw, 156px) 57px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; background: var(--cream); }
.hero-copy { position: relative; z-index: 1; max-width: 480px; }
.eyebrow { margin: 0 0 13px; color: var(--sage); font-size: 10px; font-weight: 700; letter-spacing: 1.65px; }
.hero .eyebrow { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #92ae56; box-shadow: 0 0 0 4px #dce8c5; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
.hero h1 { margin: 0; color: var(--forest); font-size: clamp(47px, 5.6vw, 76px); font-weight: 800; letter-spacing: -5.8px; line-height: .99; }
.hero h1 span { color: var(--sage); }
.hero-description { max-width: 390px; margin: 23px 0 24px; color: #69756e; font-size: 14px; line-height: 1.8; }
.hero-cta { min-height: 48px; }
.hero-note { margin-top: 22px; color: #889188; font-size: 11px; }
.note-stars { margin-right: 5px; color: var(--gold); font-size: 15px; }
.hero-art { position: relative; min-height: 387px; }
.art-sun { position: absolute; top: 16px; right: 12%; width: 270px; height: 270px; border-radius: 50%; background: #e8ebd3; }
.gavel-illustration { position: absolute; top: -4px; right: -2%; width: min(100%, 530px); height: 100%; overflow: visible; }
.art-caption { position: absolute; top: 18px; right: 5%; color: #8d987e; font-size: 8px; font-weight: 700; letter-spacing: 1.25px; line-height: 1.8; transform: rotate(7deg); }
.art-sticker { position: absolute; right: 0; bottom: 42px; width: 95px; height: 95px; border: 1px solid #d5dac5; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--forest); background: #f9f8f0; font-size: 9px; font-weight: 700; letter-spacing: 1px; line-height: 1.4; text-align: center; transform: rotate(10deg); }
.sticker-star { color: var(--gold); font-size: 16px; }

.auctions-section, .account-panel, .how-it-works { padding: 91px clamp(22px, 10.1vw, 156px); }
.account-panel { padding-bottom: 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.section-heading h2, .how-it-works h2 { margin: 0; color: var(--forest); font-size: clamp(29px, 4vw, 43px); font-weight: 800; letter-spacing: -2px; }
.section-heading h2 span, .how-it-works h2 span { color: var(--sage); }
.section-description { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.filter-label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.filter-label select { min-width: 165px; padding: 12px 35px 12px 13px; border: 1px solid var(--line); border-radius: 6px; color: var(--forest); background: white; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.auction-grid { margin-top: 33px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.auction-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: white; transition: transform .2s, box-shadow .2s; }
.auction-card:hover { transform: translateY(-3px); box-shadow: 0 13px 35px #183c3210; }
.auction-visual { position: relative; height: 160px; padding: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #e9eee2; }
.auction-card:nth-child(3n+2) .auction-visual { background: #f2eade; }
.auction-card:nth-child(3n) .auction-visual { background: #e7ecec; }
.visual-shape { width: 92px; height: 92px; border: 1px solid #183c3225; border-radius: 48% 52% 54% 46%; display: grid; place-items: center; color: var(--forest); background: #d4dfc6; font-family: var(--font-display); font-size: 36px; font-weight: 600; transform: rotate(-8deg); }
.auction-card:nth-child(3n+2) .visual-shape { border-radius: 13px 13px 24px 24px; color: #845c32; background: #e6cfaa; transform: rotate(3deg); }
.auction-card:nth-child(3n) .visual-shape { border-radius: 50%; color: #4a6962; background: #c7dad4; transform: rotate(10deg); }
.visual-label { position: absolute; right: 15px; bottom: 13px; color: #576b5c; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.auction-status { position: absolute; top: 13px; left: 13px; padding: 6px 9px; border-radius: 4px; color: var(--forest); background: #ffffffcf; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.auction-status.ended { color: #727872; }
.auction-status.starting-soon, .detail-kicker.is-starting-soon { color: #7a642e; background: #fff7d9; }
.inactive-auction { filter: saturate(.58); }
.inactive-auction .auction-visual { background: #f1f3f1 !important; }
.inactive-auction .auction-card-body { opacity: .82; }
.auction-card-body { padding: 17px 18px 18px; }
.auction-card-body h3 { min-height: 23px; margin: 0 0 7px; overflow: hidden; color: var(--forest); font-size: 16px; letter-spacing: -.35px; text-overflow: ellipsis; white-space: nowrap; }
.auction-description { min-height: 39px; max-height: 39px; margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.7; white-space: pre-line; }
.card-data { margin: 15px 0; padding: 13px 0; border-top: 1px solid #edf0e9; border-bottom: 1px solid #edf0e9; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.data-label { display: block; margin-bottom: 5px; color: #9aa198; font-size: 9px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.data-value { color: var(--forest); font-size: 13px; font-weight: 700; }
.data-group:last-child { text-align: right; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.time-left { color: var(--muted); font-size: 10px; }
.card-bid-button { min-height: 35px; padding: 0 13px; font-size: 11px; }
.loading-card, .empty-state { min-height: 170px; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 13px; }
.empty-state { flex-direction: column; border: 1px dashed var(--line); border-radius: 9px; }
.empty-icon { color: var(--sage); font-size: 25px; }
.spinner { width: 17px; height: 17px; border: 2px solid #dfe6d5; border-top-color: var(--sage); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-message { margin-top: 25px; padding: 12px 15px; border-radius: 6px; color: #8f4b39; background: #fff0e9; font-size: 12px; }

.how-it-works { padding-top: 70px; padding-bottom: 92px; background: var(--cream); text-align: center; }
.how-it-works .eyebrow { margin-bottom: 11px; }
.how-it-works h2 { font-size: clamp(28px, 3.5vw, 38px); }
.steps-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; text-align: left; }
.step { padding: 22px 4px; border-top: 1px solid #dfe4d5; }
.step-number { color: var(--sage); font-family: var(--font-display); font-size: 12px; font-weight: 800; }
.step h3 { margin: 17px 0 8px; color: var(--forest); font-size: 18px; letter-spacing: -.5px; }
.step p { max-width: 270px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

.site-footer { min-height: 87px; padding: 20px clamp(22px, 6vw, 94px); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.footer-brand { font-size: 16px; }
.footer-brand .brand-mark { width: 27px; height: 27px; font-size: 15px; }
.site-footer p, .footer-copy { margin: 0; color: var(--muted); font-size: 11px; }
.site-footer p span { color: var(--gold); }

.account-panel { padding-top: 60px; }
.role-badge { padding: 8px 11px; border-radius: 20px; color: var(--forest); background: #eff3e5; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.dashboard-grid { margin-top: 26px; display: grid; grid-template-columns: 1fr .9fr; gap: 20px; align-items: start; }
.panel-card { padding: 24px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.card-heading { margin-bottom: 23px; display: flex; align-items: center; gap: 13px; }
.card-icon { width: 39px; height: 39px; border-radius: 8px; display: grid; place-items: center; color: white; background: var(--forest); font-size: 21px; }
.card-icon-lime { color: var(--forest); background: var(--lime); }
.card-heading .eyebrow { margin-bottom: 4px; font-size: 8px; }
.card-heading h3 { margin: 0; color: var(--forest); font-size: 17px; letter-spacing: -.5px; }
.create-card label, .auth-field label { margin-bottom: 15px; display: block; color: #58665c; font-size: 11px; font-weight: 700; }
.create-card input, .create-card textarea, .auth-field input, .auth-field select, .bid-form input { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; font-weight: 400; resize: vertical; }
.create-card input:focus, .create-card textarea:focus, .auth-field input:focus, .auth-field select:focus, .bid-form input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px #718a581a; }
.form-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 13px; }
.form-feedback { min-height: 16px; margin: 11px 0 0; color: var(--sage); font-size: 11px; line-height: 1.5; }
.form-feedback.error { color: #ab4935; }
.compact-list { display: flex; flex-direction: column; }
.compact-item { padding: 13px 0; border-top: 1px solid #edf0e9; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.compact-item:first-child { border-top: 0; }
.compact-item h4 { max-width: 280px; margin: 0 0 5px; overflow: hidden; color: var(--forest); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.compact-item p { margin: 0; color: var(--muted); font-size: 10px; }
.compact-value { color: var(--forest); font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; }
.inline-button { padding: 5px 0; border: 0; color: #9b553f; background: transparent; font-size: 10px; font-weight: 700; }
.muted { color: var(--muted); font-size: 12px; }
.bidder-bids { margin-top: 25px; }

.modal { width: min(100% - 32px, 470px); max-height: min(90vh, 760px); padding: 0; border: 0; border-radius: 12px; overflow: auto; color: var(--ink); background: var(--paper); box-shadow: 0 25px 90px #0f271e35; }
.modal::backdrop { background: #10251dcc; backdrop-filter: blur(3px); }
.modal-inner { position: relative; padding: 36px; }
.modal-close { position: absolute; top: 13px; right: 15px; width: 32px; height: 32px; border: 0; border-radius: 50%; color: #69756e; background: var(--cream); font-size: 22px; line-height: 1; }
.modal-inner > .eyebrow { margin-top: 10px; }
.modal-inner h2 { margin: 0 0 22px; color: var(--forest); font-size: 27px; letter-spacing: -1.2px; }
.auth-tabs { margin-bottom: 22px; border-bottom: 1px solid var(--line); display: flex; gap: 20px; }
.auth-tab { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; color: #89928a; background: transparent; font-size: 12px; font-weight: 700; }
.auth-tab.active { border-bottom-color: var(--sage); color: var(--forest); }
.auth-field { margin-bottom: 14px; }
.auth-field label { margin-bottom: 0; }
.auth-field .field-help { margin-top: 4px; display: block; color: #7c8da2; font-size: 9px; line-height: 1.4; }
.privacy-note { margin: 15px 0 0; color: #929b91; font-size: 10px; line-height: 1.6; text-align: center; }
.auction-modal { width: 100vw; max-width: none; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
.auction-modal .modal-inner { width: min(1500px, calc(100% - 64px)); min-height: 100%; margin: 0 auto; padding: 38px 44px 70px; }
.auction-modal .modal-close { position: fixed; z-index: 2; top: 22px; right: 28px; width: 42px; height: 42px; border: 1px solid #dce6f2; background: #fff; box-shadow: 0 8px 24px #17365b14; }
.detail-kicker { margin: 8px 0 8px; color: var(--sage); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.detail-title { padding-right: 28px; }
.detail-description { color: var(--muted); font-size: 13px; line-height: 1.8; }
.detail-description h1, .detail-description h2, .detail-description h3 { margin: 22px 0 9px; color: #173d68; line-height: 1.35; }
.detail-description h1 { font-size: 21px; }
.detail-description h2 { font-size: 17px; }
.detail-description h3 { font-size: 14px; }
.detail-description p { margin: 0 0 13px; }
.detail-description ul, .detail-description ol { margin: 0 0 15px; padding-left: 23px; }
.detail-description li { margin: 5px 0; padding-left: 2px; }
.detail-description li::marker { color: #1769e0; }
.detail-description table { width: 100%; margin: 12px 0 18px; border-collapse: collapse; font-size: 11px; line-height: 1.6; }
.detail-description th, .detail-description td { padding: 9px; border: 1px solid #dfe8f3; text-align: left; vertical-align: top; }
.detail-description thead th { color: #173d68; background: #f2f7fd; }
.detail-description tbody th { color: #174979; font-weight: 700; }
.detail-description strong { color: #174979; }
.detail-price-row { margin: 0 0 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.registration-fee-disclaimer { margin: -10px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.6; }
 .detail-disclosure { margin: 12px 0; border: 1px solid #dfE8f3; border-radius: 10px; background: #fff; overflow: hidden; }
.detail-disclosure summary { min-height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #173d68; font-family: var(--font-display); font-size: 14px; font-weight: 800; list-style: none; }
.detail-disclosure summary::-webkit-details-marker { display: none; }
.detail-disclosure[open] summary { border-bottom: 1px solid #e7edf5; }
.detail-disclosure[open] .disclosure-icon { transform: rotate(45deg); }
.disclosure-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #1769e0; background: #edf4fd; font-size: 20px; line-height: 1; transition: transform .2s ease; }
.detail-disclosure > .detail-description { padding: 22px 20px 8px; }
.detail-instructions { margin: 0; padding: 20px; border: 0; border-radius: 0; background: #fbfdff; }
.detail-instructions h3 { margin: 0 0 8px; color: var(--forest); font-size: 12px; }
.detail-instructions p { margin: 0; color: #69756e; font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
.add-bid-button { width: 100%; margin-top: 18px; }
.bid-form { margin-top: 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.bid-payment-note { grid-column: 1 / -1; margin: -2px 0 0; color: #70839a; font-size: 10px; line-height: 1.5; }
.bid-form[hidden] { display: none; }
.bid-form label { flex: 1; color: #58665c; font-size: 11px; font-weight: 700; }
.bid-form input { margin-top: 7px; }
.bid-access-form { margin-top: 14px; padding: 14px; border: 1px solid #dfe8f3; border-radius: 8px; background: #f7faff; }
.bid-access-form[hidden] { display: none; }
.bid-registration-payment { margin: 4px 0 14px; padding: 13px; border: 1px solid #bcd4f1; border-radius: 8px; background: #eef5ff; }
.bid-registration-payment strong { color: #174979; font-size: 12px; }
.bid-registration-payment p { margin: 6px 0 12px; color: #5d7290; font-size: 11px; line-height: 1.55; }
.bid-registration-payment p b { color: #174979; }
.bid-access-form label { margin-bottom: 12px; display: block; color: #536b87; font-size: 11px; font-weight: 700; }
.bid-access-form input { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #dce6f2; border-radius: 7px; outline: 0; color: #203b5a; background: #fff; font-size: 12px; font-weight: 400; }
.bid-access-form input:focus { border-color: #5c9aeb; box-shadow: 0 0 0 3px #1769e018; }
.bid-access-actions { display: flex; align-items: center; gap: 12px; }
.bid-access-actions .button { flex: 1; }
.bid-access-form .form-feedback { margin-bottom: 0; }
.submit-bid-button { width: 100%; margin-top: 14px; }
.submit-bid-button[hidden], .add-bid-button[hidden] { display: none; }
.auction-bid-activity { margin: 24px 0 18px; padding: 20px; border: 1px solid #e1eaf5; border-radius: 12px; background: #fbfdff; }
.section-title-row { margin-bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-title-row h3 { margin: 0; color: #173d68; font-size: 14px; }
.bid-chart { min-height: 218px; padding: 14px 8px 8px; display: flex; align-items: flex-end; justify-content: flex-start; gap: 13px; overflow-x: auto; background: linear-gradient(180deg, #fff 0%, #f7fbff 100%); }
.bid-chart-column { min-width: 72px; max-width: 150px; height: 196px; flex: 1 1 72px; display: grid; grid-template-rows: auto 1fr auto; align-items: end; gap: 5px; text-align: center; }
.bid-chart-column > strong { color: #173d68; font-size: 10px; white-space: nowrap; }
.bid-chart-track { height: 158px; width: 100%; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid #dce8f7; border-radius: 7px 7px 3px 3px; background: repeating-linear-gradient(180deg, #edf4fc 0, #edf4fc 1px, transparent 1px, transparent 17px); }
.bid-chart-track span { width: 100%; display: block; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #62a1f7, #1769e0); box-shadow: 0 4px 10px #1769e033; }
.bid-chart-column.is-highest .bid-chart-track span { background: linear-gradient(180deg, #ffd96f, #f3a712); box-shadow: 0 7px 18px #d99a1d55; }
.bid-chart-column.is-highest > strong { color: #9a6508; font-size: 11px; }
.bid-chart-column:nth-child(6n+2) .bid-chart-track span { background: linear-gradient(180deg, #64c7b2, #27896f); }
.bid-chart-column:nth-child(6n+3) .bid-chart-track span { background: linear-gradient(180deg, #efbd67, #bf7b24); }
.bid-chart-column:nth-child(6n+4) .bid-chart-track span { background: linear-gradient(180deg, #a78bfa, #6547c5); }
.bid-chart-column:nth-child(6n+5) .bid-chart-track span { background: linear-gradient(180deg, #f58c9a, #bd4658); }
.bid-chart-column:nth-child(6n) .bid-chart-track span { background: linear-gradient(180deg, #63d1df, #23869b); }
.bid-chart-name { min-width: 0; overflow: hidden; color: #536b87; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bid-history { max-height: 180px; margin-top: 20px; overflow: auto; }
.bid-history h3 { margin: 0 0 7px; color: var(--forest); font-size: 13px; }
.bid-history-item { padding: 9px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; color: var(--muted); font-size: 10px; }
.bid-history-item time { font-size: 9px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 5; max-width: min(360px, calc(100vw - 44px)); padding: 13px 18px; border-radius: 7px; color: white; background: var(--forest); box-shadow: 0 8px 30px #102d2630; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: #9f4837; }

@media (min-width: 1440px) {
  .hero { padding-right: calc((100vw - 1140px) / 2); padding-left: calc((100vw - 1140px) / 2); }
  .auctions-section, .account-panel, .how-it-works { padding-right: calc((100vw - 1140px) / 2); padding-left: calc((100vw - 1140px) / 2); }
}
@media (max-width: 850px) {
  .hero { min-height: 460px; padding-top: 55px; padding-bottom: 45px; }
  .hero-art { min-height: 300px; }
  .art-sun { width: 220px; height: 220px; }
  .auction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-header { height: 70px; padding: 0 18px; }
  .brand { gap: 7px; font-size: 17px; }
  .brand-mark { width: 28px; height: 28px; }
  .header-actions { gap: 2px; }
  .nav-link, .account-label { display: none; }
  .header-actions .button { min-height: 38px; padding: 0 11px; font-size: 11px; }
  .hero { min-height: auto; padding: 52px 24px 0; grid-template-columns: 1fr; }
  .hero h1 { font-size: 56px; letter-spacing: -4px; }
  .hero-description { max-width: 340px; margin-top: 17px; font-size: 13px; }
  .hero-art { min-height: 265px; margin: 10px -9px 0; }
  .art-sun { top: 10px; right: 19%; width: 205px; height: 205px; }
  .gavel-illustration { top: -3px; right: 2%; width: 100%; }
  .art-caption { top: 3px; right: 2%; }
  .art-sticker { right: 0; bottom: 18px; width: 74px; height: 74px; font-size: 8px; }
  .auctions-section, .account-panel, .how-it-works { padding: 61px 21px; }
  .account-panel { padding-bottom: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .section-heading h2, .how-it-works h2 { font-size: 31px; letter-spacing: -1.5px; }
  .filter-label { width: 100%; }
  .filter-label select { width: 100%; }
  .auction-grid { margin-top: 23px; grid-template-columns: 1fr; gap: 14px; }
  .auction-visual { height: 178px; }
  .steps-grid { margin-top: 26px; grid-template-columns: 1fr; gap: 5px; }
  .step { padding: 18px 2px; }
  .step h3 { margin-top: 10px; }
  .site-footer { padding: 20px; flex-wrap: wrap; }
  .site-footer p { order: 3; width: 100%; }
  .footer-copy { margin-left: auto; }
  .panel-card { padding: 18px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .modal-inner { padding: 31px 23px 25px; }
  .bid-form { grid-template-columns: 1fr; }
  .bid-form .button { width: 100%; }
  .auction-modal .modal-inner { width: 100%; padding: 28px 18px 55px; }
  .auction-modal .modal-close { top: 14px; right: 14px; }
  .detail-title { padding-right: 48px; font-size: 23px; }
  .detail-price-row { grid-template-columns: 1fr; gap: 10px; }
  .auction-bid-activity { padding: 16px; }
  .bid-chart { justify-content: flex-start; }
  .bid-chart-column { min-width: 92px; }
  .bid-history-item { grid-template-columns: minmax(0, 1fr) auto; }
  .bid-history-item time { grid-column: 1 / -1; grid-row: 2; }
}
.detail-status-row {
  margin: 4px 0 17px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.detail-kicker {
  width: fit-content;
  margin: 0;
  padding: 7px 10px;
  border-radius: 30px;
  color: #1558bd;
  background: #e8f1ff;
  font-size: 9px;
  letter-spacing: .8px;
}
.detail-kicker::before {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  display: inline-block;
  background: #3989fa;
  content: "";
  vertical-align: 1px;
}
.detail-kicker.is-ended { color: #64748b; background: #edf1f6; }
.detail-kicker.is-ended::before { background: #94a3b8; }
.detail-countdown { color: #657b95; font-size: 11px; font-weight: 600; }
.detail-title { margin: 0 0 12px; color: #143a66; font-size: clamp(24px, 5vw, 31px); line-height: 1.24; overflow-wrap: anywhere; }
.detail-description { margin: 0 0 18px; color: #60758f; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-description p, .detail-copy p { margin: 0 0 12px; }
.detail-description p:last-child, .detail-copy p:last-child { margin-bottom: 0; }
.detail-copy { color: #657b95; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-copy p { margin-bottom: 10px; }
.detail-description ul, .detail-description ol, .detail-copy ul, .detail-copy ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.detail-description li, .detail-copy li { margin: 4px 0; padding-left: 3px; }
.detail-description li::marker, .detail-copy li::marker { color: #1769e0; }
.detail-instructions { padding: 17px; }
.detail-instructions h3 { margin-bottom: 10px; }
@media (max-width: 600px) {
  .detail-status-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .detail-title { font-size: 25px; }
}

/* Yucca blue-and-white visual refresh */
:root {
  --forest: #123766;
  --forest-deep: #0c2b51;
  --sage: #1769e0;
  --lime: #e8f1ff;
  --cream: #f4f8ff;
  --paper: #ffffff;
  --ink: #172a43;
  --muted: #687b93;
  --line: #e1eaf5;
  --gold: #3989fa;
}

body { background: #fff; color: var(--ink); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 76px;
  border-bottom: 1px solid #e8eef7;
  background: #ffffffed;
  backdrop-filter: blur(14px);
}
.brand { color: #14365f; font-size: 20px; }
.brand-mark { border-radius: 9px; color: #fff; background: #1769e0; transform: none; }
.brand-light { color: #4386df; }
.nav-link { color: #506782; }
.nav-link:hover { color: #1769e0; }
.button { border-radius: 8px; }
.button-dark { color: #fff; background: #1769e0; box-shadow: 0 5px 13px #1769e024; }
.button-dark:hover { background: #1056bd; box-shadow: 0 7px 17px #1769e033; }
.button-quiet { color: #24517f; }
.button-quiet:hover { color: #145fc9; background: #f0f6ff; }
.button-lime { color: #fff; background: #1769e0; box-shadow: 0 8px 20px #1769e02b; }
.button-lime:hover { color: #fff; background: #1056bd; }

.hero {
  min-height: 555px;
  padding-top: 70px;
  padding-bottom: 64px;
  background:
    radial-gradient(ellipse at 83% 45%, #e1edff 0, #e1edff 18%, transparent 18.2%),
    linear-gradient(115deg, #f8fbff 0%, #f1f7ff 55%, #eaf3ff 100%);
}
.hero-copy { max-width: 510px; }
.hero .eyebrow { color: #236bc1; }
.live-dot { background: #2a83ef; box-shadow: 0 0 0 4px #dceaff; }
.hero h1 { color: #123766; font-size: clamp(56px, 6.7vw, 88px); letter-spacing: -5.5px; }
.hero h1 span { color: #1769e0; }
.hero-description { max-width: 425px; color: #60758f; font-size: 15px; }
.hero-note { color: #7d8fa4; }
.note-stars, .sticker-star { color: #3989fa; }
.hero-art { min-height: 410px; }
.art-sun { background: #d7e8ff; }
.art-caption { color: #4775af; }
.art-sticker { border-color: #c9dcf5; color: #1558bd; background: #fff; box-shadow: 0 10px 24px #204a7b12; }

.auctions-section, .account-panel, .how-it-works { padding-top: 88px; padding-bottom: 88px; }
.account-panel { padding-bottom: 0; }
.eyebrow { color: #2874ca; letter-spacing: 1.45px; }
.section-heading h2, .how-it-works h2 { color: #123766; letter-spacing: -1.8px; }
.section-heading h2 span, .how-it-works h2 span { color: #1769e0; }
.section-description { color: #72849a; }
.filter-label { color: #6c8098; }
.filter-label select {
  border-color: #dce7f5;
  border-radius: 8px;
  color: #174979;
  background-color: #fff;
  box-shadow: 0 3px 10px #17365b08;
}
.filter-label select:focus { outline: 3px solid #1769e01c; border-color: #6ca6f1; }
.auction-grid { gap: 22px; }
.auction-card {
  border-color: #e3ebf5;
  border-radius: 12px;
  box-shadow: 0 4px 16px #17365b08;
}
.auction-card:hover { border-color: #c7dcf8; box-shadow: 0 15px 32px #1e5b9b14; }
.auction-visual { height: 172px; background: linear-gradient(135deg, #e9f2ff, #dceaff); }
.auction-card:nth-child(3n+2) .auction-visual { background: linear-gradient(135deg, #eff6ff, #e2edfb); }
.auction-card:nth-child(3n) .auction-visual { background: linear-gradient(135deg, #eaf4ff, #dcecff); }
.visual-shape {
  border-color: #b6d2f3;
  color: #1b65bb;
  background: linear-gradient(145deg, #fff, #dceaff);
  box-shadow: 0 11px 22px #1c599b14;
}
.auction-card:nth-child(3n+2) .visual-shape,
.auction-card:nth-child(3n) .visual-shape {
  border-color: #b9d5f7;
  color: #1c62b0;
  background: linear-gradient(145deg, #fff, #dceaff);
}
.visual-label { color: #4775a8; }
.auction-status { color: #1558bd; background: #fff; box-shadow: 0 2px 6px #12376612; }
.auction-status.ended { color: #6f7f91; }
.auction-card-body h3 { color: #173c67; }
.auction-description { color: #718198; }
.card-data { border-color: #eaf0f8; }
.data-label { color: #8a9bb0; }
.data-value { color: #175a9f; }
.time-left { color: #70849d; }
.loading-card, .empty-state { color: #70849d; }
.empty-state { border-color: #d5e3f4; background: #fbfdff; }
.empty-icon { color: #3989fa; }
.spinner { border-color: #dceaff; border-top-color: #1769e0; }
.status-message { border: 1px solid #f6d8d6; color: #a23d3d; background: #fff6f5; }

.how-it-works {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f5f9ff, #edf5ff);
}
.how-it-works::before {
  position: absolute;
  top: -105px;
  right: -90px;
  width: 260px;
  height: 260px;
  border: 1px solid #d5e6fb;
  border-radius: 50%;
  content: "";
}
.how-it-works > * { position: relative; }
.step { border-top-color: #d5e3f3; }
.step-number { color: #1769e0; }
.step h3 { color: #163d68; }
.step p { color: #70839a; }
.site-footer { border-top: 1px solid #e5edf7; background: #fff; }
.site-footer p, .footer-copy { color: #71839a; }
.site-footer p span { color: #3989fa; }

.role-badge { color: #1558bd; background: #e9f2ff; }
.panel-card {
  border-color: #e1eaf5;
  border-radius: 11px;
  box-shadow: 0 5px 20px #17365b08;
}
.card-icon { border-radius: 10px; color: #fff; background: #1769e0; }
.card-icon-lime { color: #1769e0; background: #e8f1ff; }
.card-heading h3 { color: #163d68; }
.create-card label, .auth-field label, .bid-form label, .bid-access-form label { color: #536b87; }
.create-card input, .create-card textarea, .auth-field input, .auth-field select, .bid-form input, .bid-access-form input {
  border-color: #dce6f2;
  border-radius: 7px;
  color: #203b5a;
  background: #fbfdff;
}
.create-card input:focus, .create-card textarea:focus, .auth-field input:focus, .auth-field select:focus, .bid-form input:focus, .bid-access-form input:focus {
  border-color: #5c9aeb;
  box-shadow: 0 0 0 3px #1769e018;
}
.form-feedback { color: #24744d; }
.form-feedback.error { color: #ad453e; }
.compact-item { border-top-color: #eaf0f7; }
.compact-item h4 { color: #173d68; }
.compact-item p, .muted { color: #77889e; }
.compact-value { color: #175a9f; }
.inline-button { color: #1769e0; }
.inline-button:hover { color: #0d4da8; text-decoration: underline; }

.modal { border: 1px solid #e2eaf5; border-radius: 14px; }
.modal::backdrop { background: #102b4dcc; }
.modal-close { color: #47627f; background: #edf4fd; }
.modal-close:hover { color: #1358ad; background: #deebfc; }
.modal-inner h2 { color: #143a66; }
.auth-tabs { border-bottom-color: #e3ebf5; }
.auth-tab { color: #7b8ba0; }
.auth-tab.active { border-bottom-color: #1769e0; color: #174979; }
.privacy-note { color: #7c8da2; }
.detail-kicker { color: #1769e0; }
.detail-description { color: #6d8097; }
.detail-price-row { border-color: #e3ebf5; }
.registration-fee-disclaimer { color: #70839a; }
.detail-instructions { border: 1px solid #e3edf8; background: #f4f8ff; }
.detail-instructions h3, .bid-history h3 { color: #173d68; }
.detail-instructions p { color: #657b95; }
.bid-history-item { border-top-color: #e7eef7; color: #72849a; }
.bid-history-item strong { color: #175a9f; }
.toast { background: #1558bd; }
.toast.error { background: #a6423d; }

@media (min-width: 1440px) {
  .hero { padding-right: calc((100vw - 1140px) / 2); padding-left: calc((100vw - 1140px) / 2); }
  .auctions-section, .account-panel, .how-it-works { padding-right: calc((100vw - 1140px) / 2); padding-left: calc((100vw - 1140px) / 2); }
}
@media (max-width: 850px) {
  .hero { min-height: 470px; }
  .hero-art { min-height: 325px; }
}
@media (max-width: 600px) {
  .site-header { height: 67px; }
  .hero { padding-top: 43px; }
  .hero h1 { font-size: 57px; letter-spacing: -4px; }
  .hero-art { min-height: 250px; }
  .auctions-section, .account-panel, .how-it-works { padding-top: 58px; padding-bottom: 58px; }
  .account-panel { padding-bottom: 0; }
  .auction-visual { height: 166px; }
  .site-footer { border-top: 1px solid #e5edf7; }
}
.footer-admin-link { color: #1769e0; font-size: 11px; font-weight: 700; }
.footer-admin-link:hover { color: #0d4da8; text-decoration: underline; }