/* Shared Menu-in surfaces. Loaded by site/customer/admin layouts, never by restaurant menus or print output. */
.mi-site-gradient {
  --mi-gradient-hero: radial-gradient(ellipse at 90% 20%,rgba(100,194,217,.25),transparent 48%),linear-gradient(120deg,#102b4a,#164669 64%,#176e82);
  --mi-gradient-action: linear-gradient(120deg,#102b4a,#164669 64%,#176e82);
  --mi-gradient-action-hover: linear-gradient(120deg,#153654,#1a5275 64%,#207e91);
  --mi-gradient-card: linear-gradient(140deg,#fff 50%,#f0f6fa);
  --mi-gradient-lilac: linear-gradient(140deg,#fff 45%,#f1eefc);
  --mi-gradient-teal: linear-gradient(140deg,#fff 45%,#edf8f7);
  --mi-gradient-soft: linear-gradient(120deg,#fff,#eff6fa);
  --mi-gradient-selected: linear-gradient(115deg,#dbeaf2,#fff 80%);
  --mi-gradient-line: #dce5ee;
  --mi-gradient-ink: #23364e;
}

/* Profile, tool and business intros share the same dark hero. */
.mi-site-gradient :is(.mi-account-hero,.mi-hub-intro,.mi-business-header,.mi-studio>header.ms-heading,.mi-public-hero,.hs-hero,.mc-hero,.mi-hero,.s-hero,.mc-final,.mi-public-cta,#titlebar.gradient) {
  background:var(--mi-gradient-hero);color:#fff;border-color:#244e68;
}
.mi-site-gradient :is(.mi-hub-intro,.mi-business-header,.mi-studio>header.ms-heading) {padding:28px;border-radius:24px;box-sizing:border-box}
.mi-site-gradient :is(.mi-hub-intro,.mi-business-header,.mi-studio>header.ms-heading,.mi-public-hero,#titlebar.gradient) :is(h1,h2,h3) {color:#fff}
.mi-site-gradient :is(.mi-hub-intro,.mi-business-header,.mi-studio>header.ms-heading,.mi-public-hero,#titlebar.gradient) p {color:#e0edf5}
.mi-site-gradient :is(.mi-hub-eyebrow,.mi-studio>header.ms-heading .ms-eyebrow,.mi-public-hero .mi-eyebrow) {color:#c4e6f4}
.mi-site-gradient :is(.hs-copy,.mc-hero-copy,.mi-hero-copy,.s-hero>div:first-child,.mc-final,.mi-public-cta) :is(h1,h2,h3) {color:#fff}
.mi-site-gradient :is(.hs-copy,.mc-hero-copy,.mi-hero-copy,.s-hero>div:first-child,.mc-final,.mi-public-cta) :is(p,.mc-caption,.mc-lead,.mi-intro,.mi-small) {color:#e0edf5}
.mi-site-gradient :is(.hs-copy,.mc-hero-copy,.mi-hero-copy,.mc-final,.mi-public-cta) :is(.mc-eyebrow,.mi-eyebrow,.mc-link,.mi-secondary) {color:#c4e6f4}
.mi-site-gradient .mc-hero h1 :is(span,em) {color:#c4e6f4}
.mi-site-gradient .hs-copy h1 span {color:#c4e6f4}
.mi-site-gradient .hs-copy .hs-features li {color:#e0edf5}
.mi-site-gradient .hs-copy .hs-features li>span {color:#164669;background:#e0edf5}
.mi-site-gradient .hs-hero .hs-showcase-label {color:#c4e6f4}
.mi-site-gradient .mi-cap-home .hs-hint {color:#e0edf5}
.mi-site-gradient .mi-public-hero .mi-public-text-link {color:#c4e6f4}
.mi-site-gradient :is(.mi-hub-intro .mi-hub-balance,.mi-business-header .mi-business-add,.mi-studio>header.ms-heading .ms-button.secondary,.hs-copy .mc-button,.mc-hero-copy .mc-button,.mi-hero-copy .button,.s-hero .s-button,.mc-final .mc-button,.mi-public-cta .mi-public-button) {
  background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:none;
}
.mi-site-gradient .mi-business-count {background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.mi-site-gradient #titlebar.gradient #breadcrumbs :is(a,li) {color:#e0edf5}

/* Quiet gradients on content surfaces leave inputs, media, QR canvases and status badges intact. */
.mi-site-gradient :is(.mi-hub-tool,.mi-business-card,.dashboard-box,.mw-card,.ms-card,.mi-transfer-card,.mi-general-section,.mi-settings-section,.figma-payment-panel,.figma-transactions-table-wrap,.mi-info-card,.mi-step-card,.mi-example-card,.mi-article-card,.mi-support-card,.mi-card,.mi-price-card,.mc-feature,.mc-extra,.mc-step-grid>article,.s-card,.s-product,.mi-auth-card) {
  background:var(--mi-gradient-card);border-color:var(--mi-gradient-line);
}
.mi-site-gradient :is(.mi-hub-tool,.mc-feature,.mi-info-card,.mi-price-card,.s-product):nth-child(3n+2) {background:var(--mi-gradient-lilac)}
.mi-site-gradient :is(.mi-hub-tool,.mc-feature,.mi-info-card,.mi-price-card,.s-product):nth-child(3n) {background:var(--mi-gradient-teal)}
.mi-site-gradient :is(.mi-business-toolbar,.mc-flow,.mc-card,.mi-table-qr,.mi-qr-group,.mi-module-header,.mi-product-header,.dialog-header,.phone-setup-modal,.mi-shop .s-flow) {background:var(--mi-gradient-soft)}
.mi-site-gradient :is(.mi-hub-tool-icon,.mi-account-shortcut-icon,.mc-icon,.mi-support-card>span,.s-pill) {background:linear-gradient(140deg,#eaf3f9,#f1eefc)}

/* Navigation cards keep their artwork and proportions across all customer pages. */
.mi-site-gradient.figma-account-page .figma-account-card {background:var(--mi-gradient-soft);border-color:var(--mi-gradient-line)}
.mi-site-gradient.figma-account-page .figma-account-card-main {background:var(--mi-gradient-selected);border-color:#a7c5d7}
.mi-site-gradient.figma-account-page .figma-account-card strong {color:#30435b}
.mi-site-gradient.figma-account-page .figma-account-card-main strong {color:#00518f}
.mi-site-gradient.figma-account-page .mi-panel-subnav .dashboard-mini-nav-tab.is-active {background:var(--mi-gradient-action)!important;color:#fff!important}

/* Positive primary actions only: cancel/delete/status colours remain semantic. */
.mi-site-gradient :is(.btn-primary,.mi-hub-button,.mi-business-add,.mi-business-manage,.ms-button:not(.secondary),.mw-button:not(.secondary),.mc-primary,.mc-button,.mi-public-button:not(.is-secondary),.s-button:not(.s-secondary):not(.s-danger),.figma-settings-save,.figma-payment-submit,.mi-auth-card form button.button,.mi-menu-add-category,.mi-module-save,.mi-product-save) {
  background:var(--mi-gradient-action)!important;color:#fff!important;
}
.mi-site-gradient :is(.btn-primary,.mi-hub-button,.mi-business-add,.mi-business-manage,.ms-button:not(.secondary),.mw-button:not(.secondary),.mc-primary,.mc-button,.mi-public-button:not(.is-secondary),.s-button:not(.s-secondary):not(.s-danger),.figma-settings-save,.figma-payment-submit,.mi-auth-card form button.button,.mi-menu-add-category,.mi-module-save,.mi-product-save):hover {
  background:var(--mi-gradient-action-hover)!important;color:#fff!important;
}
.mi-site-gradient .page-item.active .page-link {background:var(--mi-gradient-action)!important}
.mi-site-gradient :is(.mi-transfer .button:not(.mi-secondary),.mi-plan-button:not(.is-secondary),#header .button:not(.gray)) {background:var(--mi-gradient-action)!important;color:#fff!important}
.mi-site-gradient :is(.mi-transfer .button:not(.mi-secondary),.mi-plan-button:not(.is-secondary),#header .button:not(.gray)):hover {background:var(--mi-gradient-action-hover)!important;color:#fff!important}

/* Admin has the same page intro and soft content cards. */
.mi-site-gradient.mi-admin-panel .page-header {padding:22px 24px;border-radius:22px;background:var(--mi-gradient-hero);color:#fff}
.mi-site-gradient.mi-admin-panel .page-header :is(h2,h6) {color:#fff}
.mi-site-gradient.mi-admin-panel .card {background:var(--mi-gradient-card)}
.mi-site-gradient.mi-admin-panel :is(.card-header,.modal-header) {background:var(--mi-gradient-soft)}
.mi-site-gradient.mi-admin-panel .menu-item.active>.menu-link {background:var(--mi-gradient-action)!important;color:#fff!important}

/* Existing explicit dark-mode states get a dark soft surface, without changing mode preferences. */
:is(.dark-style,[data-bs-theme="dark"],[data-theme="dark"]) .mi-site-gradient,
.mi-site-gradient:is(.dark-mode,[data-bs-theme="dark"],[data-theme="dark"]) {
  --mi-gradient-card:linear-gradient(140deg,#192737 50%,#203647);
  --mi-gradient-lilac:linear-gradient(140deg,#192737 45%,#2e2d45);
  --mi-gradient-teal:linear-gradient(140deg,#192737 45%,#1c3c40);
  --mi-gradient-soft:linear-gradient(120deg,#192737,#203647);
  --mi-gradient-selected:linear-gradient(115deg,#284656,#192737 80%);
  --mi-gradient-line:#3b5161;--mi-gradient-ink:#e8eff5;
}
:is(.dark-style,[data-bs-theme="dark"],[data-theme="dark"]) .mi-site-gradient.mi-admin-panel :is(.card,.card-header,.modal-header) {color:var(--mi-gradient-ink)}
:is(.dark-style,[data-bs-theme="dark"],[data-theme="dark"]) .mi-site-gradient.mi-admin-panel .card :is(h1,h2,h3,h4,h5,h6) {color:var(--mi-gradient-ink)!important}
:is(.dark-style,[data-bs-theme="dark"],[data-theme="dark"]) .mi-site-gradient.mi-admin-panel :is(.card-header a,.bg-label-primary) {color:#c4e6f4!important}
:is(.dark-style,[data-bs-theme="dark"],[data-theme="dark"]) .mi-site-gradient.mi-admin-panel .bg-label-primary {background:rgba(196,230,244,.12)!important}
@media(max-width:600px) {
  .mi-site-gradient :is(.mi-hub-intro,.mi-business-header,.mi-studio>header.ms-heading) {padding:22px;border-radius:20px}
  .mi-site-gradient .mi-business-header {flex-wrap:wrap}
  .mi-site-gradient.mi-admin-panel .page-header {padding:18px;border-radius:18px}
}