:root {
  --site-footer-bg: color-mix(in srgb, var(--ink, #1e2921) 92%, #000 8%);
  --site-footer-text: #f7f5ee;
  --site-footer-muted: rgba(247, 245, 238, .72);
  --site-footer-line: rgba(255, 255, 255, .16);
}

.brand-intro {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 38px);
}

.top-tagline {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--ink, #1e2921);
  white-space: nowrap;
  pointer-events: none;
}

.top-tagline strong {
  font-size: 11px;
  letter-spacing: .04em;
}

.top-tagline em {
  color: var(--accent-dark, #263c2b);
  font-family: Georgia, serif;
  font-size: 13px;
}

.top-action-button {
  min-height: 40px;
  color: #f7f8ed;
  border-color: var(--accent-dark, #263c2b);
  background: var(--accent-dark, #263c2b);
}

.top-action-button:hover {
  filter: brightness(1.08);
}

.account-menu-wrap {
  position: relative;
}

.account-menu-button {
  display: flex;
  align-items: center;
  gap: 7px;
}

.account-menu-button span {
  color: rgba(255, 255, 255, .76);
  font-size: 9px;
}

.account-menu {
  width: 220px;
  padding: 7px;
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 10px;
  background: var(--white, #fffdf4);
  box-shadow: 0 18px 45px rgba(30, 50, 33, .2);
}

.account-menu strong {
  padding: 9px 10px;
  overflow: hidden;
  color: var(--muted, #627064);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: var(--ink, #1e2921);
  background: transparent;
  text-align: left;
  font-size: 10px;
  font-weight: 750;
}

.account-menu button:hover {
  background: color-mix(in srgb, var(--accent, #5f7d4b) 14%, white);
}

.account-menu button:last-child {
  color: #8c4638;
  border-top: 1px solid var(--line, #b9c5ae);
  border-radius: 0 0 6px 6px;
}

.mode-tabs,
.makeup-mode-tabs,
.generator-mode-tabs {
  width: min(1040px, 100%);
  margin: 0 auto 16px;
  padding: 5px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 14px;
  background: color-mix(in srgb, var(--white, #fffdf4) 70%, transparent);
  box-shadow: 0 12px 30px rgba(42, 65, 45, .08);
}

.mode-tabs,
.makeup-mode-tabs {
  grid-template-columns: repeat(3, 1fr);
}

.generator-mode-tabs {
  grid-template-columns: repeat(2, 1fr);
}

.mode-tab,
.makeup-mode-tabs button,
.generator-mode-tabs button {
  min-height: 64px;
  padding: 11px 16px;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted, #627064);
  background: transparent;
  text-align: left;
}

.makeup-mode-tabs button,
.generator-mode-tabs button {
  grid-template-columns: 1fr;
}

.mode-tab > span,
.generator-mode-tabs button > span {
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 850;
}

.mode-tab strong,
.makeup-mode-tabs strong,
.generator-mode-tabs strong {
  color: var(--ink, #1e2921);
  font-size: 13px;
}

.mode-tab small,
.makeup-mode-tabs small,
.generator-mode-tabs small {
  color: inherit;
  font-size: 10px;
}

.mode-tab.active,
.makeup-mode-tabs button.active,
.generator-mode-tabs button.active {
  color: color-mix(in srgb, var(--accent, #5f7d4b) 35%, white);
  border-color: var(--accent-dark, #263c2b);
  background: var(--accent-dark, #263c2b);
  box-shadow: 0 8px 18px rgba(37, 65, 42, .2);
}

.mode-tab.active strong,
.makeup-mode-tabs button.active strong,
.generator-mode-tabs button.active strong {
  color: var(--white, #fffdf4);
}

.mode-tab.active small,
.makeup-mode-tabs button.active small,
.generator-mode-tabs button.active small {
  opacity: .82;
}

.preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.preview-toolbar label {
  min-width: 118px;
  display: grid;
  gap: 4px;
  color: var(--muted, #627064);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.preview-toolbar select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 7px;
  color: var(--ink, #1e2921);
  background: var(--white, #fffdf4);
  font-size: 10px;
  font-weight: 750;
  text-transform: none;
}

.preview-stage {
  --preview-accent: var(--accent, #5f7d4b);
}

.preview-stage[data-preview-ready="true"] {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--preview-accent) 15%, transparent),
    inset 0 -36px 80px color-mix(in srgb, var(--preview-accent) 8%, transparent);
}

.preview-stage[data-preview-ready="true"]::after {
  content: "Drag to rotate - arrows nudge view";
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--preview-accent) 35%, var(--line, #b9c5ae));
  border-radius: 999px;
  color: color-mix(in srgb, var(--ink, #1e2921) 82%, var(--preview-accent));
  background: color-mix(in srgb, var(--white, #fffdf4) 88%, transparent);
  box-shadow: 0 8px 20px rgba(30, 43, 51, .08);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: none;
}

.preview-stage svg {
  filter: drop-shadow(0 18px 18px rgba(30, 43, 51, .13));
}

.preview-stage svg text {
  user-select: none;
}

.upload-dropzone {
  position: relative;
}

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

.upload-picker {
  min-height: 126px;
  padding: 16px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px !important;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--accent-dark, #263c2b) 58%, var(--line, #b9c5ae));
  border-radius: 15px;
  color: var(--ink, #1e2921) !important;
  background:
    radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--accent, #5f7d4b) 18%, transparent) 0 54px, transparent 55px),
    linear-gradient(135deg, color-mix(in srgb, var(--white, #fffdf4) 88%, var(--accent, #5f7d4b)), var(--white, #fffdf4));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62), 0 16px 34px rgba(30,43,51,.08);
  cursor: pointer;
  text-transform: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.upload-picker:hover,
.upload-dropzone.dragging .upload-picker,
.upload-input:focus-visible + .upload-picker {
  border-color: var(--accent-dark, #263c2b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 20px 44px rgba(30,43,51,.13);
  transform: translateY(-1px);
}

.upload-badge {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  background: linear-gradient(145deg, var(--accent-dark, #263c2b), var(--accent, #5f7d4b));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent-dark, #263c2b) 34%, transparent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}

.upload-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.upload-copy strong {
  font: 650 19px/1.05 Georgia, serif;
  letter-spacing: -.02em;
}

.upload-copy small {
  color: var(--muted, #627064);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
}

.upload-cta {
  min-height: 36px;
  padding: 0 13px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: var(--accent-dark, #263c2b);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.upload-actions {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8px;
}

.saved-upload-panel {
  margin-top: 4px;
  padding: 12px;
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--line, #b9c5ae) 76%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--white, #fffdf4) 70%, transparent);
}

.saved-upload-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.saved-upload-heading h3 {
  margin: 0;
  font: 650 15px/1 Georgia, serif;
}

.saved-upload-heading .button {
  min-height: 30px;
  padding-inline: 10px;
}

.saved-upload-list {
  display: grid;
  gap: 7px;
}

.saved-upload-list article {
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 9px;
  background: white;
}

.saved-upload-list strong,
.saved-upload-list small {
  display: block;
}

.saved-upload-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.saved-upload-list small {
  margin-top: 3px;
  color: var(--muted, #627064);
  font-size: 9px;
  line-height: 1.35;
}

.saved-upload-list button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 999px;
  color: var(--ink, #1e2921);
  background: var(--white, #fffdf4);
  font-size: 9px;
  font-weight: 850;
}

.sponsor-concept {
  width: min(970px, 100%);
  min-height: 90px;
  margin: 22px auto;
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sponsor-accent, #5f7d4b) 65%, #ffffff 20%);
  border-radius: 14px;
  color: var(--sponsor-ink, #1e2921);
  background:
    radial-gradient(circle at 9% 20%, color-mix(in srgb, var(--sponsor-accent, #5f7d4b) 26%, transparent) 0 62px, transparent 63px),
    linear-gradient(120deg, var(--sponsor-bg-a, #f8fbef), var(--sponsor-bg-b, #e3e9d8));
  box-shadow: 0 16px 42px rgba(30, 41, 33, .12);
  text-decoration: none;
}

.sponsor-concept:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sponsor-accent, #5f7d4b) 60%, #ffffff);
  outline-offset: 3px;
}

.sponsor-concept:hover .sponsor-cta {
  transform: translateX(2px);
}

.sponsor-visual {
  width: 124px;
  height: 58px;
  position: relative;
  border-radius: 13px;
  background: color-mix(in srgb, var(--sponsor-accent, #5f7d4b) 14%, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48), 0 12px 30px rgba(30,41,33,.12);
}

.sponsor-visual::before,
.sponsor-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--sponsor-accent, #5f7d4b);
  opacity: .28;
}

.sponsor-visual::before { width: 62px; height: 18px; left: 16px; top: 15px; }
.sponsor-visual::after { width: 38px; height: 38px; right: 14px; bottom: 8px; }
.sponsor-copy { min-width: 0; display: grid; gap: 3px; }
.sponsor-label { color: color-mix(in srgb, var(--sponsor-accent, #5f7d4b) 82%, #111); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.sponsor-copy strong { font: 650 18px/1.08 Georgia, serif; }
.sponsor-copy small { color: color-mix(in srgb, var(--sponsor-ink, #1e2921) 66%, #ffffff); font-size: 10px; line-height: 1.45; }
.sponsor-cta { padding: 9px 11px; border: 1px solid rgba(0,0,0,.1); border-radius: 999px; color: white; background: var(--sponsor-accent, #5f7d4b); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: transform .16s ease; white-space: nowrap; }
.sponsor-tray { --sponsor-accent:#5f7d4b; --sponsor-bg-a:#f8fbef; --sponsor-bg-b:#dfe8cd; --sponsor-ink:#1e2921; }
.sponsor-makeup { --sponsor-accent:#b76e79; --sponsor-bg-a:#fff5f1; --sponsor-bg-b:#e9c8c7; --sponsor-ink:#38272b; }
.sponsor-print { --sponsor-accent:#45555b; --sponsor-bg-a:#f6f7f2; --sponsor-bg-b:#d8dddc; --sponsor-ink:#1e2b33; }
.sponsor-paint { --sponsor-accent:#315a4e; --sponsor-bg-a:#f2f7e9; --sponsor-bg-b:#cfdcbc; --sponsor-ink:#20372f; }
.sponsor-stitch { --sponsor-accent:#8d6aa9; --sponsor-bg-a:#fbf2ff; --sponsor-bg-b:#ded0eb; --sponsor-ink:#30273a; }
.sponsor-factory { --sponsor-accent:#d08a32; --sponsor-bg-a:#f5f2e8; --sponsor-bg-b:#d0d7d6; --sponsor-ink:#1e2b33; }

.cookie-consent {
  width: min(760px, calc(100% - 24px));
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 120;
  border: 1px solid color-mix(in srgb, var(--accent-dark, #263c2b) 34%, var(--line, #b9c5ae));
  border-radius: 14px;
  color: var(--ink, #1e2921);
  background: color-mix(in srgb, var(--white, #fffdf4) 95%, transparent);
  box-shadow: 0 20px 70px rgba(20, 35, 24, .22);
}

.cookie-consent strong,
.cookie-consent p {
  margin: 0;
}

.cookie-consent p {
  margin-top: 3px;
  color: var(--muted, #627064);
  font-size: 11px;
  line-height: 1.45;
}

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

.cookie-actions button,
.launch-preview-button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 999px;
  color: var(--ink, #1e2921);
  background: var(--white, #fffdf4);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.cookie-actions button:last-child {
  color: #f7f8ed;
  border-color: var(--accent-dark, #263c2b);
  background: var(--accent-dark, #263c2b);
}

.launch-hold {
  padding: 18px;
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 110;
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent, #5f7d4b) 22%, transparent) 0 180px, transparent 181px),
    rgba(18, 29, 22, .72);
  backdrop-filter: blur(6px);
}

.launch-hold-card {
  width: min(560px, 100%);
  padding: clamp(22px, 4vw, 34px);
  display: grid;
  gap: 14px;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent, #5f7d4b) 32%, var(--line, #b9c5ae));
  border-radius: 20px;
  color: var(--ink, #1e2921);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--white, #fffdf4) 92%, var(--accent, #5f7d4b)), var(--white, #fffdf4));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .32);
}

.launch-hold-card h2,
.launch-hold-card p {
  margin: 0;
}

.launch-hold-card h2 {
  font: 650 clamp(30px, 6vw, 48px)/.95 Georgia, serif;
  letter-spacing: -.04em;
}

.launch-hold-card p {
  color: var(--muted, #627064);
  font-size: 13px;
  line-height: 1.55;
}

.launch-hold-eyebrow {
  color: var(--accent-dark, #263c2b) !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.launch-hold-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 50%;
  color: var(--muted, #627064);
  background: var(--white, #fffdf4);
  cursor: pointer;
}

.launch-signup-form {
  display: grid;
  gap: 10px;
}

.launch-signup-form label {
  display: grid;
  gap: 5px;
  color: var(--muted, #627064);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.launch-signup-form input {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 9px;
  color: var(--ink, #1e2921);
  background: white;
  font-size: 13px;
}

.launch-name-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.launch-signup-form small {
  color: var(--muted, #627064);
  font-size: 10px;
  line-height: 1.45;
}

.launch-preview-button {
  justify-self: start;
}

.shared-account-dialog {
  width: min(920px, calc(100% - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line, #b9c5ae);
  border-radius: 16px;
  color: var(--ink, #1e2921);
  background: var(--panel, #f4f4e8);
  box-shadow: 0 35px 90px rgba(24, 43, 28, .3);
}

.shared-account-dialog::backdrop {
  background: rgba(20, 35, 24, .65);
  backdrop-filter: blur(4px);
}

.shared-dialog-heading {
  min-height: 76px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line, #b9c5ae);
}

.shared-dialog-heading h2 { margin: 0; font: 650 23px/1.1 Georgia, serif; }
.shared-dialog-heading p { margin: 0 0 5px; color: var(--accent-dark, #263c2b); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.shared-dialog-heading button { width: 36px; height: 36px; border: 1px solid var(--line, #b9c5ae); border-radius: 50%; color: var(--muted, #627064); background: var(--white, #fffdf4); font-size: 20px; cursor: pointer; }
.shared-account-page-nav { padding: 12px 18px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shared-account-page-nav button { min-height: 40px; padding: 8px; border: 1px solid var(--line, #b9c5ae); border-radius: 8px; color: var(--muted, #627064); background: var(--white, #fffdf4); font-size: 10px; font-weight: 800; cursor: pointer; }
.shared-account-page-nav button.active { color: white; border-color: var(--accent-dark, #263c2b); background: var(--accent-dark, #263c2b); }
.shared-account-pages { padding: 18px; }
.shared-account-page { display: grid; gap: 11px; }
.shared-account-page h3 { margin: 0; font: 650 18px/1.1 Georgia, serif; }
.shared-account-page p { margin: 0; color: var(--muted, #627064); font-size: 10px; line-height: 1.55; }
.shared-account-page label { display: grid; gap: 5px; color: var(--muted, #627064); font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.shared-account-page input, .shared-account-page textarea, .shared-account-page select { min-width: 0; width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line, #b9c5ae); border-radius: 7px; color: var(--ink, #1e2921); background: white; }
.shared-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shared-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shared-privacy-tools { margin-top: 14px; padding-top: 14px; display: grid; gap: 9px; border-top: 1px solid var(--line, #b9c5ae); }
.shared-privacy-tools h4 { margin: 0; font-size: 13px; }
.shared-privacy-tools p { margin: 0; color: var(--muted, #627064); font-size: 10px; line-height: 1.55; }
.shared-security-status { padding: 10px; display: grid; gap: 3px; border: 1px solid color-mix(in srgb, var(--accent-dark, #263c2b) 18%, var(--line, #b9c5ae)); border-radius: 8px; background: color-mix(in srgb, var(--white, #fffdf4) 74%, var(--accent, #5f7d4b) 8%); }
.shared-security-status strong { font-size: 11px; }
.shared-security-status span { color: var(--muted, #627064); font-size: 10px; line-height: 1.45; }
.shared-privacy-tools .danger { color: #8c4638; border-color: color-mix(in srgb, #8c4638 36%, var(--line, #b9c5ae)); }
.shared-orders-list { display: grid; gap: 8px; }
.shared-order-card { padding: 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border: 1px solid var(--line, #b9c5ae); border-radius: 9px; background: white; }
.shared-order-card strong, .shared-order-card small { display: block; }
.shared-order-card small { margin-top: 3px; color: var(--muted, #627064); font-size: 9px; }
.shared-order-detail { padding: 13px; display: grid; gap: 9px; border: 1px solid var(--line, #b9c5ae); border-radius: 10px; background: white; }
.shared-order-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.shared-order-grid div { padding: 9px; border: 1px solid var(--line, #b9c5ae); border-radius: 8px; }
.shared-order-grid span, .shared-order-grid strong { display: block; }
.shared-order-grid span { color: var(--muted, #627064); font-size: 8px; text-transform: uppercase; }
.order-status-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.order-status-track span { padding: 8px 4px; border: 1px solid var(--line, #b9c5ae); border-radius: 7px; color: var(--muted, #627064); background: color-mix(in srgb, var(--white, #fffdf4) 76%, var(--panel, #f4f4e8)); text-align: center; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.order-status-track span.done { color: white; border-color: var(--accent-dark, #263c2b); background: var(--accent-dark, #263c2b); }
.order-status-note { padding: 10px; border: 1px solid var(--line, #b9c5ae); border-radius: 8px; background: var(--white, #fffdf4); }
.order-detail-items, .order-events { display: grid; gap: 7px; }
.order-detail-items p, .order-events p { margin: 0; padding: 9px; border: 1px solid var(--line, #b9c5ae); border-radius: 7px; background: color-mix(in srgb, var(--white, #fffdf4) 82%, var(--panel, #f4f4e8)); }
.order-events h5 { margin: 2px 0; font-size: 11px; }
.order-events small { display: block; margin-top: 3px; color: var(--muted, #627064); font-size: 8px; }
.order-events span { display: block; margin-top: 3px; color: var(--ink, #1e2921); font-size: 9px; }
.order-events .event-provider_message, .order-events .event-customer_message { background: color-mix(in srgb, var(--accent, #5f7d4b) 9%, white); }
.order-events .event-decline { color: #803b2f; background: #fff0ed; }
.order-events .event-delivery_chaser { background: color-mix(in srgb, #d9b65f 16%, white); }
.order-events .event-customer_escalation { color: #803b2f; background: #fff4df; border-color: color-mix(in srgb, #d6812f 48%, var(--line, #b9c5ae)); }
.order-delivery-confirmation { padding: 12px; display: grid; gap: 9px; border: 1px solid color-mix(in srgb, #d9b65f 45%, var(--line, #b9c5ae)); border-radius: 10px; background: color-mix(in srgb, #d9b65f 12%, white); }
.order-delivery-confirmation h5, .order-delivery-confirmation p { margin: 0; }
.order-delivery-confirmation p { color: var(--ink, #1e2921); font-size: 10px; line-height: 1.5; }
.order-message-form, .order-rating-form, .order-escalation-form { padding: 12px; display: grid; gap: 10px; border: 1px solid var(--line, #b9c5ae); border-radius: 8px; background: var(--white, #fffdf4); }
.order-escalation-form { border-color: color-mix(in srgb, #d6812f 45%, var(--line, #b9c5ae)); background: #fff8ea; }
.order-message-form label, .order-rating-form label, .order-escalation-form label { display: grid; gap: 5px; color: var(--muted, #627064); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.order-message-form textarea, .order-rating-form textarea, .order-rating-form select, .order-escalation-form textarea { width: 100%; min-height: 40px; padding: 9px; border: 1px solid var(--line, #b9c5ae); border-radius: 7px; background: white; }
.order-rating-form h5, .order-rating-form p { margin: 0; }
.order-rating-form p { color: var(--muted, #627064); font-size: 9px; line-height: 1.5; }

.site-footer {
  width: min(1440px, calc(100% - 40px));
  margin: 50px auto 0;
  padding: 28px clamp(18px, 3vw, 34px);
  display: grid;
  gap: 22px;
  border-radius: 16px 16px 0 0;
  color: var(--site-footer-text);
  background: var(--site-footer-bg);
}

.site-footer h2,
.site-footer h3,
.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
}

.site-footer-top {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(280px, 1.1fr);
  gap: 24px;
  align-items: start;
}

.site-footer-brand {
  display: grid;
  gap: 8px;
}

.site-footer-brand strong {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-footer-brand p,
.site-footer-contact p,
.site-footer-legal p,
.site-footer-bottom {
  color: var(--site-footer-muted);
  font-size: 11px;
  line-height: 1.6;
}

.site-footer-contact {
  padding: 18px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--site-footer-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}

.site-footer-contact h2 {
  font: 600 24px/1.1 Georgia, serif;
}

.site-contact-button {
  width: max-content;
  min-height: 40px;
  padding: 0 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--site-footer-line);
  border-radius: 9px;
  color: var(--ink, #1e2921) !important;
  background: var(--white, #fffdf4);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.site-footer-legal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.site-footer-legal details {
  border: 1px solid var(--site-footer-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}

.site-footer-legal summary {
  min-height: 42px;
  padding: 12px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-footer-legal p {
  padding: 0 12px 13px;
}

.site-footer-bottom {
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--site-footer-line);
}

@media (max-width: 860px) {
  .brand-intro {
    width: 100%;
    justify-content: space-between;
  }

  .top-tagline {
    white-space: normal;
    text-align: right;
  }

  .sponsor-concept {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sponsor-visual,
  .sponsor-cta {
    justify-self: center;
  }

  .site-footer-top,
  .site-footer-legal {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .brand-intro {
    gap: 8px;
  }

  .top-tagline {
    display: grid;
    gap: 1px;
  }

  .top-tagline strong,
  .top-tagline em {
    font-size: 9px;
  }

  .top-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .top-action-button {
    min-width: 0;
    min-height: 38px;
    padding: 0 7px;
    font-size: 10px;
  }

  .account-menu-button {
    width: 100%;
    justify-content: center;
  }

  .account-menu {
    width: min(220px, calc(100vw - 24px));
  }

  .mode-tabs,
  .makeup-mode-tabs,
  .generator-mode-tabs {
    margin-bottom: 14px;
  }

  .mode-tab,
  .makeup-mode-tabs button,
  .generator-mode-tabs button {
    min-height: 62px;
    padding: 9px;
  }

  .preview-toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .preview-toolbar label {
    min-width: 0;
    flex: 1 1 120px;
  }

  .sponsor-concept {
    width: calc(100% - 20px);
    min-height: 0;
    margin: 14px auto;
    padding: 14px;
  }

  .sponsor-visual {
    width: 100%;
    max-width: 240px;
  }

  .shared-field-grid,
  .shared-account-page-nav,
  .shared-order-card,
  .shared-order-grid,
  .order-status-track,
  .cookie-consent,
  .launch-name-grid {
    grid-template-columns: 1fr;
  }

  .cookie-consent {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-actions button {
    flex: 1 1 140px;
  }

  .site-footer {
    width: calc(100% - 20px);
    margin-top: 34px;
    border-radius: 12px 12px 0 0;
  }

  .site-footer-bottom {
    display: grid;
  }
}