:root {
  color-scheme: light;
  --bg: #f3f7fd;
  --panel: #ffffff;
  --panel-soft: #f7faff;
  --line: #d6e1f1;
  --line-strong: #bfd0ea;
  --text: #14253d;
  --muted: #62758c;
  --primary: #1759f2;
  --primary-dark: #103da8;
  --primary-soft: #edf4ff;
  --blue-soft: #eef4ff;
  --green-soft: #ecfdf3;
  --green-text: #067647;
  --orange-soft: #fff4e8;
  --orange-text: #b54708;
  --red-soft: #fef3f2;
  --red-text: #b42318;
  --shadow: 0 24px 60px rgba(17, 36, 61, 0.12);
  --shadow-sm: 0 12px 28px rgba(17, 36, 61, 0.08);
  --radius: 26px;
  --radius-md: 20px;
  --radius-sm: 16px;
}

/* Homepage motion: restrained entrance and hover feedback. */
.landing-feature-showcase { padding: 0 0 94px; }
.landing-feature-showcase .landing-v3-section-heading { max-width: 1120px; margin: 0 auto 34px; text-align: center; }
.landing-feature-showcase .landing-v3-section-heading > span { color: var(--landing-blue); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.landing-feature-showcase .landing-v3-section-heading h2 { margin: 12px 0 12px; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(30px, 3vw, 48px); line-height: 1.12; letter-spacing: -.045em; }
.landing-feature-showcase .landing-v3-section-heading p { margin: 0; color: var(--landing-muted); font-size: 20px; }
.landing-feature-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.landing-feature-showcase-card { min-width: 0; min-height: 530px; padding: 34px 32px 28px; display: flex; flex-direction: column; border: 1px solid #dce5f2; border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 10px 28px rgba(25, 55, 111, .045); }
.landing-feature-showcase-card .feature-icon { width: 78px; height: 78px; margin-bottom: 30px; display: grid; place-items: center; border-radius: 22px; }
.landing-feature-showcase-card .feature-icon svg { width: 45px; height: 45px; }
.landing-feature-showcase-card h3 { margin: 0 0 18px; color: #0d1f4d; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; letter-spacing: -.025em; }
.landing-feature-showcase-card > p { min-height: 66px; margin: 0; color: #536889; font-size: 17px; line-height: 1.75; }
.feature-order-preview { margin-top: auto; border: 1px solid #e0e7f0; border-radius: 14px; overflow: hidden; color: #5b6c87; font-size: 13px; }
.feature-order-preview > div { display: grid; grid-template-columns: 1fr 1.15fr 1.1fr 1fr; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #e0e7f0; }
.feature-order-preview > div + div { color: #253b61; align-items: center; font-size: 13px; }
.feature-order-preview b, .feature-order-preview strong { color: #132b61; font-size: 13px; }
.feature-order-preview em { padding: 6px 8px; color: #5c6d84; font-style: normal; text-align: center; border-radius: 6px; background: #edf1f6; }
.feature-order-preview footer { display: flex; justify-content: center; gap: 12px; padding: 16px; }
.feature-order-preview button { min-height: 40px; padding: 0 18px; border: 1px solid #dce4f0; border-radius: 6px; color: #e04949; background: #fff; font: inherit; cursor: default; }
.feature-order-preview button:first-child { color: #fff; border-color: #2164e9; background: #2164e9; box-shadow: 0 8px 16px rgba(33,100,233,.18); }
.feature-order-preview button svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.feature-delivery-flow { margin-top: auto; display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 10px; }
.feature-delivery-flow > div { min-height: 156px; padding: 18px 16px; display: flex; flex-direction: column; justify-content: center; gap: 9px; border: 1px solid #dae4ef; border-radius: 13px; }
.feature-delivery-flow > div > span { width: 30px; height: 30px; display: block; color: #08a568; }
.feature-delivery-flow > div > span svg { width: 100%; height: 100%; display: block; }
.feature-delivery-flow > div:first-child > span { position: relative; }
.feature-delivery-flow > div:first-child > span svg { display: none; }
.feature-delivery-flow > div:first-child > span::before { content: ""; position: absolute; inset: 5px 3px 4px; border: 2px solid currentColor; border-radius: 3px; }
.feature-delivery-flow > div:first-child > span::after { content: ""; position: absolute; top: 13px; left: 5px; right: 5px; border-top: 2px solid currentColor; }
.feature-delivery-flow b { color: #142953; font-size: 14px; }
.feature-delivery-flow small { color: #8190a6; font-size: 13px; }
.feature-delivery-flow em { width: fit-content; padding: 5px 8px; color: #07965e; font-size: 12px; font-style: normal; border-radius: 5px; background: #e6f7ef; }
.feature-delivery-flow > i { color: #9aa9bd; font-size: 30px; font-style: normal; }
.feature-results-preview { margin-top: auto; padding: 16px; display: grid; grid-template-columns: minmax(115px, .8fr) 1.2fr; gap: 14px; border: 1px solid #e0e7f0; border-radius: 14px; }
.feature-results-preview ul { margin: 0; padding: 0; display: grid; align-content: space-around; gap: 8px; list-style: none; color: #6c7b94; font-size: 13px; }
.feature-results-preview li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.feature-results-preview li b { margin-left: auto; color: #1d2e51; font-size: 16px; }
.feature-results-preview li i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.result-green { background: #08ad75; }.result-blue { background: #2165ed; }.result-red { background: #e64c51; }
.feature-results-preview svg { width: 100%; height: 110px; overflow: visible; }
.feature-results-preview path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.result-line-blue { stroke: #2165ed; }.result-line-green { stroke: #08ad75; }.result-line-red { stroke: #e64c51; }
.landing-feature-showcase-link { margin: 28px auto 0; display: flex; align-items: center; gap: 12px; color: #1760ed; font-size: 18px; font-weight: 700; }
.landing-feature-showcase-link b { font-size: 24px; transition: transform .2s ease; }
.landing-feature-showcase-link:hover b { transform: translateX(4px); }
.landing-v3 .landing-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}
.landing-v3-kicker { gap: 6px; }
.landing-v3-kicker img + img { margin-left: 2px; border-radius: 4px; }
.landing-v3 .landing-reveal.is-visible { opacity: 1; transform: translateY(0); }
.landing-v3-nav.landing-reveal { animation: landing-nav-in .55s cubic-bezier(.22, 1, .36, 1) both; }
.landing-v3-hero h1 .hero-line { display: block; opacity: 0; transform: translateY(12px); animation: landing-line-in .58s cubic-bezier(.22, 1, .36, 1) forwards; }
.landing-v3-hero h1 .hero-line:nth-child(2) { animation-delay: .09s; }
.landing-v3-hero-copy > p.landing-reveal { transition-delay: .16s; }
.landing-v3-hero-copy .landing-v3-cta.landing-reveal { transition-delay: .24s; }
.landing-v3-preview-wrap.landing-reveal { transform: translate3d(18px, 10px, 0); transition-duration: .65s; }
.landing-v3-preview-wrap.is-visible { transform: translate3d(0, 0, 0); }
.landing-v3-preview-wrap.is-visible .preview-line-blue,
.landing-v3-preview-wrap.is-visible .preview-line-green { animation: landing-chart-draw 1.15s cubic-bezier(.22, 1, .36, 1) .25s both; }
.landing-v3-preview-wrap.is-visible .landing-preview-stats b { animation: landing-number-in .45s cubic-bezier(.22, 1, .36, 1) both; }
.landing-v3-preview-wrap.is-visible .landing-preview-stats div:nth-child(2) b { animation-delay: .08s; }
.landing-v3-preview-wrap.is-visible .landing-preview-stats div:nth-child(3) b { animation-delay: .16s; }
.landing-v3-preview-wrap.is-visible .landing-preview-stats div:nth-child(4) b { animation-delay: .24s; }
.landing-v3-floating.is-visible { animation: landing-badge-in .6s cubic-bezier(.22, 1, .36, 1) both, landing-badge-float 5s ease-in-out 1s infinite; }
.landing-v3-floating.landing-float-delivery.is-visible { animation-delay: .1s, 1.1s; }
.landing-v3-trusted.is-visible img { opacity: .68; filter: grayscale(1); transform: translateY(0); animation: landing-logo-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.landing-v3-trusted.is-visible img:nth-child(2) { animation-delay: .08s; }
.landing-v3-trusted.is-visible img:nth-child(3) { animation-delay: .16s; }
.landing-v3-trusted.is-visible img:nth-child(4) { animation-delay: .24s; }
.landing-v3-trusted.is-visible img:nth-child(5) { animation-delay: .32s; }
.landing-v3-trusted img { transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.landing-v3-trusted img:hover { opacity: 1; filter: grayscale(0); transform: translateY(-2px); }
.landing-v3-feature-grid article.is-visible:nth-child(2) { transition-delay: .08s; }
.landing-v3-feature-grid article.is-visible:nth-child(3) { transition-delay: .16s; }
.landing-v3-feature-grid article:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(19, 55, 125, .12); }
.landing-v3-feature-grid article:hover .feature-icon { transform: translateY(-2px); }
.landing-v3-feature-grid article .feature-icon { transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease; }
.landing-v3-feature-grid article:hover .feature-icon { box-shadow: 0 10px 20px rgba(31, 93, 222, .14); }
.landing-v3-step-grid article.is-visible:nth-child(2) { transition-delay: .08s; }
.landing-v3-step-grid article.is-visible:nth-child(3) { transition-delay: .16s; }
.landing-v3-step-grid article.is-visible:nth-child(4) { transition-delay: .24s; }
.landing-v3-button, .landing-v3-nav nav a, .landing-v3-actions > a:first-child { transition: transform .2s ease, color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.landing-v3-nav nav a { position: relative; }
.landing-v3-nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 99px; background: var(--landing-blue); transform: scaleX(0); transform-origin: center; transition: transform .2s ease; }
.landing-v3-nav nav a:hover::after, .landing-v3-nav nav a:focus-visible::after { transform: scaleX(1); }

@keyframes landing-nav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-line-in { to { opacity: 1; transform: translateY(0); } }
@keyframes landing-chart-draw { from { stroke-dasharray: 900; stroke-dashoffset: 900; } to { stroke-dasharray: 900; stroke-dashoffset: 0; } }
@keyframes landing-number-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-badge-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-badge-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes landing-logo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: .68; transform: translateY(0); } }

@media (max-width: 760px) {
  .landing-v3 .landing-reveal { transform: translateY(8px); transition-duration: .42s; }
  .landing-v3-preview-wrap.landing-reveal { transform: translateY(8px); }
  .landing-v3-preview-wrap.is-visible { transform: translateY(0); }
  .landing-v3-floating.is-visible { animation: landing-badge-in .45s cubic-bezier(.22, 1, .36, 1) both; }
  .landing-feature-showcase { padding-bottom: 62px; }
  .landing-feature-showcase .landing-v3-section-heading { margin-bottom: 24px; }
  .landing-feature-showcase .landing-v3-section-heading h2 { font-size: 30px; }
  .landing-feature-showcase .landing-v3-section-heading p { font-size: 15px; line-height: 1.6; }
  .landing-feature-showcase-grid { grid-template-columns: 1fr; gap: 16px; }
  .landing-feature-showcase-card { min-height: 0; padding: 24px 20px; }
  .landing-feature-showcase-card .feature-icon { width: 62px; height: 62px; margin-bottom: 22px; border-radius: 17px; }
  .landing-feature-showcase-card .feature-icon svg { width: 35px; height: 35px; }
  .landing-feature-showcase-card h3 { font-size: 21px; }
  .landing-feature-showcase-card > p { min-height: 0; font-size: 15px; line-height: 1.6; }
  .feature-order-preview { margin-top: 24px; font-size: 10px; }
  .feature-order-preview > div { padding: 10px 8px; gap: 4px; font-size: 10px; }
  .feature-order-preview b, .feature-order-preview strong, .feature-order-preview em { font-size: 10px; }
  .feature-order-preview footer { padding: 11px 8px; gap: 7px; }
  .feature-order-preview button { min-height: 36px; padding: 0 9px; font-size: 11px; }
  .feature-delivery-flow { margin-top: 24px; grid-template-columns: 1fr; }
  .feature-delivery-flow > i { transform: rotate(90deg); justify-self: center; }
  .feature-results-preview { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3 .landing-reveal, .landing-v3 .landing-reveal.is-visible,
  .landing-v3-hero h1 .hero-line, .landing-v3-floating.is-visible,
  .landing-v3-preview-wrap.is-visible .preview-line-blue,
  .landing-v3-preview-wrap.is-visible .preview-line-green,
  .landing-v3-preview-wrap.is-visible .landing-preview-stats b,
  .landing-v3-trusted.is-visible img { opacity: 1; transform: none; animation: none !important; transition: none !important; }
}

/* Commandes: phone-first operational layout. */
@media (max-width: 820px) {
  .dashboard-page .dashboard-header {
    display: none;
  }

  .dashboard-page .dashboard-action-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboard-page .dashboard-action-stats .dashboard-stat {
    min-height: 104px;
    padding: 13px;
  }

  .dashboard-page .dashboard-action-stats .dashboard-stat-top {
    align-items: center;
  }

  .dashboard-page .dashboard-action-stats .dashboard-stat-icon {
    width: 38px;
    height: 38px;
  }

  .dashboard-page .dashboard-action-stats .dashboard-stat-top strong {
    font-size: 23px;
  }

  .dashboard-page .dashboard-action-stats .dashboard-stat-bottom,
  .dashboard-page .dashboard-action-stats .dashboard-sparkline {
    display: none;
  }

  .dashboard-page .dashboard-search-toolbar {
    min-height: 0;
    padding: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .dashboard-page .dashboard-search-field {
    grid-column: 1 / -1;
    min-height: 46px;
  }

  .dashboard-page .dashboard-search-toolbar select {
    min-width: 0;
    min-height: 42px;
    font-size: 13px;
  }

  .dashboard-page .dashboard-filter-submit {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
  }

  .dashboard-page .dashboard-right-rail {
    display: none;
  }

  .dashboard-page .dashboard-orders-panel {
    border-radius: 18px;
  }

  .dashboard-page .dashboard-orders-heading {
    min-height: 68px;
    padding: 14px 15px;
  }

  .dashboard-page .dashboard-orders-heading h2 {
    font-size: 16px;
  }

  .dashboard-page .dashboard-orders-heading p,
  .dashboard-page .dashboard-orders-heading > a {
    font-size: 12px;
  }

  .dashboard-page .dashboard-mobile-orders {
    padding: 10px;
    gap: 10px;
  }

  .dashboard-page .dashboard-mobile-order {
    position: relative;
    padding: 14px;
    overflow: hidden;
    border-color: #dfe9fb;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(14, 45, 105, 0.06);
  }

  .dashboard-page .dashboard-mobile-order::before {
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #2a65ef;
    content: "";
  }

  .dashboard-page .dashboard-mobile-order-head button strong {
    font-size: 13px;
  }

  .dashboard-page .dashboard-mobile-order-head button span {
    font-size: 11px;
  }

  .dashboard-page .dashboard-mobile-client {
    margin-top: 11px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .dashboard-page .dashboard-mobile-client > span {
    width: 42px;
    height: 42px;
    font-size: 11px;
  }

  .dashboard-page .dashboard-mobile-client div strong,
  .dashboard-page .dashboard-mobile-client > strong {
    font-size: 14px;
  }

  .dashboard-page .dashboard-mobile-client div a {
    font-size: 12px;
  }

  .dashboard-mobile-product {
    margin: 10px 0 0 52px;
    overflow: hidden;
    color: #536887;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-page .dashboard-mobile-meta {
    margin-top: 9px;
    padding: 9px 0;
    font-size: 12px;
  }

  .dashboard-page .dashboard-mobile-primary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-page .dashboard-mobile-primary-actions.is-confirmable {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-page .dashboard-mobile-primary-actions a,
  .dashboard-page .dashboard-mobile-primary-actions .dashboard-confirm-now,
  .dashboard-page .dashboard-mobile-primary-actions > button {
    width: 100%;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 12px;
  }

  .dashboard-page .dashboard-mobile-primary-actions form {
    width: 100%;
  }
}

.unified-mobile-menu,
.unified-mobile-overlay {
  display: none;
}

.unified-mobile-overlay[hidden] {
  display: none !important;
}

@media (max-width: 1020px) {
  .unified-shell .dashboard-sidebar {
    position: fixed;
    z-index: 110;
    inset: 0 auto 0 0;
    width: 256px;
    min-height: 100vh;
    transform: translateX(-105%) !important;
    transition: transform 220ms ease;
    box-shadow: 16px 0 50px rgba(8, 35, 92, 0.24);
  }

  .unified-shell .dashboard-sidebar.is-open {
    transform: translateX(0) !important;
  }

  .unified-mobile-menu {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #0b285f;
    border: 1px solid #dfe7f3;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .unified-mobile-menu svg {
    width: 22px;
    height: 22px;
  }

  .unified-mobile-overlay {
    position: fixed;
    z-index: 109;
    inset: 0;
    display: block;
    background: rgba(4, 18, 48, 0.45);
    backdrop-filter: blur(3px);
  }

  .unified-shell .content-shell {
    padding-top: 72px;
  }
}

/* Shared signed-in page system: dashboard, orders forms, integration and localities. */
.unified-shell {
  background:
    radial-gradient(circle at 70% -8%, rgba(88, 147, 255, 0.13), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.unified-shell .saas-layout {
  grid-template-columns: 256px minmax(0, 1fr);
}

.unified-shell .content-shell {
  grid-column: 2;
  width: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: 32px 34px 48px;
}

.unified-shell .page-header {
  margin-bottom: 30px;
}

.unified-shell .page-header h1 {
  margin-bottom: 9px;
  color: #081b4d;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.unified-shell .page-subtitle {
  max-width: 760px;
  color: #5c6f90;
  font-size: 15px;
  line-height: 1.6;
}

.unified-shell .panel,
.unified-shell .hero-panel,
.unified-shell .side-card {
  border: 1px solid rgba(37, 99, 235, 0.11);
  box-shadow: 0 18px 45px rgba(25, 52, 111, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.unified-shell .panel,
.unified-shell .side-card {
  border-radius: 22px;
}

.unified-shell .hero-panel {
  border-radius: 24px;
}

.unified-shell .stack-form label span {
  color: #203a70;
  font-size: 14px;
}

.unified-shell input,
.unified-shell select,
.unified-shell textarea {
  min-height: 46px;
  border-color: #d6e3fa;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 2px rgba(15, 48, 110, 0.02);
}

.unified-shell input:focus,
.unified-shell select:focus,
.unified-shell textarea:focus {
  border-color: #4d83ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.unified-shell .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .unified-shell .saas-layout {
    grid-template-columns: 1fr;
  }

  .unified-shell .content-shell {
    grid-column: 1;
    padding: 26px 22px 40px;
  }
}

@media (max-width: 820px) {
  .unified-shell .content-shell {
    padding: 20px 16px 96px;
  }

  .unified-shell .page-header {
    margin-bottom: 22px;
  }

  .unified-shell .page-header h1 {
    font-size: 32px;
  }

  .unified-shell .page-subtitle {
    font-size: 14px;
  }
}

/* Shared navigation without inheriting the dashboard content grid. */
.unified-shell .dashboard-sidebar {
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 100vh;
  padding: 28px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  color: #fff;
  background:
    radial-gradient(circle at 18% 7%, rgba(78, 148, 255, 0.3), transparent 25%),
    linear-gradient(165deg, #0a2d8d 0%, #0646da 58%, #0964f3 100%);
  box-shadow: 16px 0 50px rgba(8, 35, 92, 0.13);
}

.unified-shell .dashboard-brand {
  gap: 13px;
  padding: 4px 10px 30px;
}

.unified-shell .dashboard-brand strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.unified-shell .dashboard-brand span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

.unified-shell .dashboard-nav {
  display: grid;
  gap: 8px;
}

.unified-shell .dashboard-nav .sidebar-link {
  min-height: 54px;
  padding: 0 15px;
  gap: 14px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 650;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

.unified-shell .dashboard-nav .sidebar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.unified-shell .dashboard-nav .sidebar-link.active {
  color: #fff;
  background: linear-gradient(135deg, #2671ff, #0c5bf2);
  box-shadow: 0 10px 26px rgba(0, 26, 105, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.unified-shell .sidebar-link-icon,
.unified-shell .sidebar-link-icon svg {
  width: 21px;
  height: 21px;
}

.unified-shell .dashboard-sidebar-user .user-badge {
  width: 38px;
  height: 38px;
  font-size: 14px;
  color: #174fd2;
  background: #fff;
}

@media (max-width: 1100px) {
  .unified-shell .dashboard-sidebar {
    position: static;
    min-height: auto;
    box-shadow: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(23, 89, 242, 0.12), transparent 24%),
    radial-gradient(circle at top right, rgba(104, 170, 255, 0.12), transparent 20%),
    linear-gradient(180deg, #edf4ff 0%, #f5f9ff 240px, var(--bg) 100%);
}

body.details-open {
  overflow: hidden;
}

a {
  color: var(--primary-dark);
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 14px 28px rgba(23, 89, 242, 0.22);
}

.btn-secondary {
  color: var(--primary-dark);
  background: linear-gradient(180deg, #f8fbff, var(--primary-soft));
  border-color: rgba(23, 89, 242, 0.1);
}

.btn-danger {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #d92d20);
  box-shadow: 0 12px 24px rgba(217, 45, 32, 0.16);
}

.btn-compact {
  padding: 9px 12px;
  font-size: 12px;
}

.flash {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 600;
}

.flash-success {
  background: var(--green-soft);
  color: var(--green-text);
}

.flash-error {
  background: var(--red-soft);
  color: var(--red-text);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status,
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-pending {
  background: var(--orange-soft);
  color: var(--orange-text);
  border: 1px solid #ffd7ac;
}

.status-delivery_created {
  background: var(--green-soft);
  color: var(--green-text);
  border: 1px solid #a3e6be;
}

.status-chip-new {
  background: #eef2f7;
  color: #344054;
}

.status-chip-confirmed {
  background: var(--green-soft);
  color: var(--green-text);
}

.status-chip-no_reply {
  background: var(--red-soft);
  color: var(--red-text);
}

.stack-form {
  display: grid;
  gap: 18px;
}

.stack-form label span {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
}

.stack-form input,
.stack-form select,
.stack-form textarea,
.searchbar input,
.info-stack input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  font: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.stack-form textarea {
  resize: vertical;
  min-height: 120px;
}

.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus,
.searchbar input:focus {
  border-color: #8eaefc;
  box-shadow: 0 0 0 4px rgba(23, 89, 242, 0.1);
}

.auth-body {
  min-height: 100vh;
}

.auth-shell {
  width: min(1160px, calc(100% - 28px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr minmax(340px, 420px);
  gap: 28px;
  align-items: center;
  padding: 28px 0;
}

.auth-showcase,
.auth-card,
.panel,
.side-card,
.hero-panel,
.summary-card,
.saas-order-card,
.details-card,
.details-group,
.mapping-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff);
  border: 1px solid rgba(23, 89, 242, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.auth-showcase {
  padding: 44px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(160deg, #0f3fad, #1759f2 52%, #4d9bff);
  color: #fff;
}

.auth-showcase h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.auth-showcase p {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 800;
}

.auth-feature-list {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.auth-feature-card {
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.auth-feature-card strong,
.auth-feature-card span {
  display: block;
}

.auth-feature-card strong {
  margin-bottom: 6px;
}

.auth-card {
  padding: 34px;
}

.auth-card h2 {
  margin-bottom: 8px;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.auth-copy,
.auth-switch {
  color: var(--muted);
}

.auth-switch {
  margin-bottom: 0;
}

.saas-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 20px;
  color: #fff;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #0f3fad, #144ad0 45%, #1759f2);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px 4px;
}

.sidebar-brand span {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}

.sidebar-logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.sidebar-nav {
  display: grid;
  gap: 10px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
}

.sidebar-link.active,
.sidebar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.sidebar-logout {
  margin-top: auto;
}

.sidebar-logout .btn {
  width: 100%;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
}

.content-shell {
  padding: 30px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.page-header h1 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.04em;
}

.page-subtitle {
  color: var(--muted);
}

.page-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(23, 89, 242, 0.08);
  box-shadow: var(--shadow-sm);
}

.page-user span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.user-badge {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.hero-panel,
.panel,
.side-card {
  padding: 24px;
}

.hero-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.hero-panel h2 {
  margin-bottom: 8px;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
}

.hero-panel p {
  color: var(--muted);
  max-width: 760px;
}

.hero-panel-compact {
  margin-bottom: 18px;
}

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

.summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.summary-card {
  padding: 18px;
  border-radius: 22px;
}

.summary-card strong,
.summary-card span {
  display: block;
}

.summary-card strong {
  margin-bottom: 8px;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
}

.summary-card span {
  color: var(--muted);
  font-weight: 700;
}

.summary-card-blue {
  background: linear-gradient(180deg, #f9fbff, #eef4ff);
}

.summary-card-orange {
  background: linear-gradient(180deg, #fffaf3, #fff3df);
}

.summary-card-red {
  background: linear-gradient(180deg, #fff8f7, #fef0ef);
}

.summary-card-green {
  background: linear-gradient(180deg, #f7fff9, #ecfdf3);
}

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.8fr);
  gap: 18px;
}

.integration-grid {
  align-items: start;
}

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

.integration-form {
  display: grid;
  gap: 18px;
}

.split-panel {
  height: 100%;
}

.right-panel-wide {
  display: block;
}

.company-switcher {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.company-chip {
  appearance: none;
  border: 1px solid rgba(23, 89, 242, 0.12);
  background: #f7faff;
  color: var(--primary-dark);
  border-radius: 999px;
  min-height: 42px;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
}

.company-chip.is-active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 14px 28px rgba(23, 89, 242, 0.18);
}

.company-token-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfdff, #f6f9ff);
}

.company-token-head {
  margin-bottom: 14px;
}

.company-token-head strong,
.company-token-head span {
  display: block;
}

.company-token-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.integration-bottom {
  margin-top: 2px;
}

.integration-actions {
  justify-content: flex-start;
}

.order-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.order-form-layout label.has-error input,
.order-form-layout label.has-error select,
.dashboard-add-order-form label.has-error input,
.dashboard-add-order-form label.has-error select {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.field-error {
  display: block;
  margin-top: 6px;
  color: #b4232b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.order-form-hero {
  margin-bottom: 18px;
}

.form-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.form-step {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef2f7;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.form-step.is-active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
}

.compact-form-panel {
  padding: 20px;
}

.form-section-title {
  margin-bottom: 14px;
}

.form-section-title h3 {
  margin: 4px 0 6px;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.form-section-title p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.optional-panel {
  background: linear-gradient(180deg, #fbfdff, #f8fbff);
}

.sticky-side-card {
  position: sticky;
  top: 18px;
}

.compact-helper {
  margin-top: 14px;
}

.order-form-actions {
  margin-top: 18px;
}

.modern-searchbar {
  margin-bottom: 18px;
}

.searchbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  border: 1px solid rgba(23, 89, 242, 0.08);
  box-shadow: var(--shadow-sm);
}

.searchbar input {
  flex: 1 1 280px;
}

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

.saas-order-card {
  padding: 16px;
  border-left: 5px solid #d0dcf0;
  cursor: pointer;
}

.order-card-pending {
  border-left-color: #ff9e2d;
}

.order-card-delivery_created {
  border-left-color: #22c55e;
}

.order-summary-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.order-summary-card:hover {
  transform: translateY(-2px);
}

.order-summary-card:focus-visible {
  outline: 3px solid rgba(23, 89, 242, 0.24);
  outline-offset: 4px;
}

.saas-order-top,
.saas-order-main {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.saas-order-top {
  align-items: center;
}

.saas-order-id strong,
.saas-order-id span {
  display: block;
}

.saas-order-id strong {
  font-size: 14px;
}

.saas-order-id span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.saas-order-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.saas-order-main {
  margin-top: 14px;
  align-items: center;
}

.order-thumb {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.order-thumb-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.saas-order-content {
  min-width: 0;
  flex: 1 1 auto;
}

.saas-order-content h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.saas-order-line {
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saas-order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-width: 90px;
}

.saas-order-side strong {
  font-size: 14px;
}

.saas-order-side span {
  color: var(--muted);
  font-size: 12px;
}

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

.summary-actions form,
.summary-actions .btn,
.details-links a,
.details-links form,
.details-group form,
.actions a,
.actions button {
  width: 100%;
}

.mobile-card-error {
  margin-top: 10px;
  font-size: 12px;
}

.right-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.side-card h3 {
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.info-stack {
  display: grid;
  gap: 12px;
}

.info-stack span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.info-stack input[readonly] {
  background: #f9fbff;
}

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

.mini-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.mini-list span {
  color: var(--muted);
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.panel-heading h2 {
  margin-bottom: 0;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}

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

.full-span {
  grid-column: 1 / -1;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-field input {
  width: auto;
  margin: 0;
}

.checkbox-field span {
  margin-bottom: 0;
}

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

.mapping-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.mapping-card p:last-of-type {
  margin-bottom: 18px;
}

.helper-copy {
  color: var(--muted);
  line-height: 1.6;
}

.empty-state {
  padding: 30px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.95), rgba(255, 255, 255, 0.95));
}

.panel-spaced {
  margin-top: 18px;
}

.details-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 22, 38, 0.5);
  backdrop-filter: blur(4px);
  z-index: 40;
}

.details-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(540px, 100vw);
  height: 100vh;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at top right, rgba(23, 89, 242, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff, #f9fbff);
  box-shadow: -24px 0 64px rgba(12, 32, 63, 0.22);
  z-index: 50;
}

.details-panel-head,
.details-status-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}

.details-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(23, 89, 242, 0.1);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.details-status-row {
  flex-wrap: wrap;
  margin: 18px 0;
}

.details-created-at {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.details-section-grid,
.details-action-groups {
  display: grid;
  gap: 14px;
}

.details-card,
.details-group {
  padding: 18px;
  border-radius: var(--radius-sm);
}

.details-card strong,
.details-group strong {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
}

.details-card p {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.55;
}

.details-card p span:first-child {
  color: var(--text);
  font-weight: 700;
}

.details-links,
.status-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1080px) {
  .auth-shell,
  .page-grid,
  .summary-row {
    grid-template-columns: 1fr;
  }

  .saas-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    gap: 16px;
  }

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

@media (max-width: 720px) {
  .auth-shell,
  .content-shell {
    width: 100%;
    padding: 16px;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-showcase,
  .auth-card,
  .panel,
  .hero-panel,
  .side-card,
  .summary-card {
    padding: 18px;
    border-radius: 20px;
  }

  .auth-showcase {
    min-height: auto;
  }

  .content-shell {
    padding: 16px;
  }

  .page-header,
  .hero-panel,
  .actions {
    flex-direction: column;
  }

  .page-user {
    width: 100%;
  }

  .sidebar {
    padding: 16px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  .sidebar-nav {
    grid-template-columns: 1fr;
  }

  .summary-row,
  .page-grid,
  .integration-grid-wide,
  .order-form-layout,
  .edit-grid,
  .compact-grid,
  .details-links,
  .status-action-grid {
    grid-template-columns: 1fr;
  }

  .searchbar {
    padding: 10px;
  }

  .company-switcher {
    flex-direction: column;
  }

  .searchbar input {
    flex-basis: 100%;
  }

  .saas-order-card {
    padding: 12px;
  }

  .saas-order-top,
  .saas-order-main {
    flex-direction: row;
    align-items: flex-start;
  }

  .saas-order-badges {
    flex-direction: column;
    align-items: flex-end;
  }

  .order-thumb {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .saas-order-content h3 {
    font-size: 15px;
  }

  .saas-order-line {
    font-size: 12px;
  }

  .saas-order-side {
    min-width: 74px;
  }

  .summary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .summary-actions .btn {
    padding: 8px 10px;
    font-size: 11px;
  }

  .details-panel {
    top: auto;
    bottom: 0;
    width: 100vw;
    height: min(92vh, 860px);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 18px 16px 28px;
    box-shadow: 0 -20px 50px rgba(12, 32, 63, 0.22);
  }

  .btn,
  .hero-actions .btn,
  .sidebar-logout .btn {
    width: 100%;
  }
}

.integration-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.2), transparent 22%),
    radial-gradient(circle at 82% 6%, rgba(96, 165, 250, 0.18), transparent 24%),
    linear-gradient(180deg, #f7fbff 0%, #f2f7ff 32%, #eef5ff 100%);
}

.integration-page .saas-layout {
  grid-template-columns: 256px minmax(0, 1fr);
}

.integration-page .sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: 26px 18px 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 24%),
    linear-gradient(180deg, #0d3aa9 0%, #1348cf 48%, #1452ea 100%);
  box-shadow: 24px 0 60px rgba(8, 36, 112, 0.18);
}

.integration-page .sidebar-brand {
  padding: 10px 10px 18px;
}

.integration-page .sidebar-logo {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: 1.45rem;
}

.integration-page .sidebar-brand strong {
  display: block;
  font-size: 1.65rem;
  letter-spacing: -0.03em;
}

.integration-page .sidebar-brand span {
  margin-top: 2px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

.integration-page .sidebar-nav {
  gap: 12px;
}

.integration-page .sidebar-link {
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
}

.integration-page .ui-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.integration-page .sidebar-link.active,
.integration-page .sidebar-link:hover {
  background: linear-gradient(135deg, rgba(72, 120, 255, 0.48), rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar-link-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.sidebar-link-icon svg {
  width: 22px;
  height: 22px;
}

.integration-sidebar-store {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 16px 14px;
  border-radius: 22px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(6, 24, 78, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.integration-sidebar-store strong,
.integration-sidebar-store span {
  display: block;
}

.integration-sidebar-store strong {
  font-size: 15px;
}

.integration-sidebar-store span {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  word-break: break-word;
}

.integration-sidebar-store-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #3a7bff, #6ca6ff);
  box-shadow: 0 10px 20px rgba(53, 115, 255, 0.3);
}

.integration-page .sidebar-logout {
  margin-top: 16px;
}

.integration-page .sidebar-logout .btn {
  min-height: 54px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
}

.integration-page .content-shell {
  width: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: 32px 34px 48px;
}

.integration-header {
  align-items: center;
  margin-bottom: 28px;
}

.integration-header h1 {
  margin-bottom: 10px;
  color: #081c50;
  font-size: clamp(2.5rem, 4vw, 3.7rem);
}

.integration-header .page-subtitle {
  max-width: 760px;
  font-size: 16px;
  color: #64748b;
}

.integration-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  color: #31477a;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 18px 36px rgba(16, 44, 110, 0.08);
}

.integration-help-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: #2147bb;
}

.integration-help-icon svg {
  width: 24px;
  height: 24px;
}

.premium-integration-form {
  gap: 24px;
}

.premium-integration-grid {
  gap: 22px;
}

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

.integration-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 22px 22px 20px;
  border-radius: 24px;
  border: 1px solid rgba(37, 99, 235, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at top right, rgba(90, 152, 255, 0.08), transparent 34%);
  box-shadow:
    0 22px 50px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.integration-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(186, 215, 255, 0.24), transparent 28%);
  pointer-events: none;
}

.integration-card > * {
  position: relative;
  z-index: 1;
}

.integration-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.integration-card-title {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.integration-card-title h2,
.integration-card-title h3 {
  margin: 5px 0 0;
  color: #0d1f56;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.integration-card-title h3 {
  font-size: 1.95rem;
}

.integration-card-icon,
.integration-card-action-icon {
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  flex-shrink: 0;
}

.integration-card-icon {
  width: 56px;
  height: 56px;
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.12);
  background: linear-gradient(180deg, #f5f9ff, #edf4ff);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.integration-card-icon svg,
.integration-card-action-icon svg {
  width: 28px;
  height: 28px;
}

.integration-card-icon.tone-shopify {
  color: #16a34a;
}

.integration-card-icon.tone-delivery,
.integration-card-icon.tone-webhook,
.integration-card-icon.tone-state {
  color: #2563eb;
}

.integration-card-action-icon {
  width: 48px;
  height: 48px;
  color: #2d4ba3;
  border: 1px solid rgba(59, 130, 246, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(20, 40, 96, 0.08);
}

.premium-stack-form {
  gap: 14px;
}

.premium-field span {
  color: #21376f;
}

.field-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #667ba8;
  pointer-events: none;
}

.field-icon svg {
  width: 18px;
  height: 18px;
}

.field-shell input,
.field-shell select {
  min-height: 54px;
  padding-left: 48px;
  border-radius: 16px;
  border-color: #d9e4fb;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.field-shell > input[readonly] {
  color: #31477a;
}

.field-shell.field-shell-with-copy input {
  padding-right: 60px;
}

.field-shell select,
.premium-company-card .field-shell input,
.premium-info-stack .field-shell input {
  padding-left: 16px;
}

.premium-stack-form .premium-field:first-child .field-shell select {
  padding-left: 16px;
}

.field-copy-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f3f7ff);
  color: #3150ac;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.field-copy-btn:hover {
  transform: translateY(calc(-50% - 1px));
  background: linear-gradient(180deg, #f8fbff, #edf4ff);
}

.field-copy-btn.is-copied {
  color: #0f9f53;
  border-color: rgba(22, 163, 74, 0.24);
}

.field-copy-btn svg {
  width: 20px;
  height: 20px;
}

.premium-company-switcher {
  gap: 12px;
}

.integration-page .company-chip {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  background: linear-gradient(180deg, #f7faff, #eef4ff);
  border-color: rgba(37, 99, 235, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.integration-page .company-chip.is-active {
  background: linear-gradient(135deg, #2155f5, #1e40d9);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22);
}

.premium-company-card {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fcfdff, #f5f9ff);
  border-color: #dbe6fb;
}

.premium-company-card .premium-field:last-child {
  margin-bottom: 0;
}

.premium-checkbox-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  color: #31477a;
}

.premium-checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.premium-info-stack {
  gap: 14px;
}

.integration-helper-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(59, 130, 246, 0.14);
  background: linear-gradient(180deg, #f4f8ff, #ebf3ff);
  color: #435989;
}

.integration-helper-banner p {
  margin: 0;
  line-height: 1.55;
}

.integration-helper-icon {
  width: 24px;
  height: 24px;
  color: #2563eb;
  flex-shrink: 0;
}

.integration-helper-icon svg {
  width: 24px;
  height: 24px;
}

.integration-checklist {
  display: grid;
  gap: 0;
  border: 1px solid #e3ecff;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.76);
}

.integration-check-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 14px;
  border-bottom: 1px solid #edf3ff;
}

.integration-check-row:last-child {
  border-bottom: 0;
}

.integration-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #21376f;
  font-weight: 600;
}

.integration-check-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.integration-check-dot svg {
  width: 14px;
  height: 14px;
}

.integration-check-dot.is-ok {
  background: #16a34a;
  color: #fff;
}

.integration-check-dot.is-pending {
  background: #f59e0b;
  color: #fff;
}

.integration-check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.integration-check-badge.is-ok {
  color: #10733d;
  background: #dcfce7;
}

.integration-check-badge.is-pending {
  color: #b45309;
  background: #ffedd5;
}

.integration-check-badge-company {
  color: #1d4ed8;
  background: #eaf1ff;
}

.integration-advanced-link {
  min-height: 72px;
  margin-top: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #174fc9;
  border: 1px solid #dce7f8;
  border-radius: 14px;
  background: linear-gradient(135deg, #fafcff, #f1f6ff);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.integration-advanced-link:hover {
  border-color: #aac5ff;
  box-shadow: 0 10px 22px rgba(37, 84, 255, 0.1);
  transform: translateY(-1px);
}

.integration-advanced-link-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #2554ff;
  border-radius: 11px;
  background: #eaf1ff;
}

.integration-advanced-link-icon svg {
  width: 19px;
  height: 19px;
}

.integration-advanced-link strong,
.integration-advanced-link small {
  display: block;
}

.integration-advanced-link strong {
  font-size: 13px;
}

.integration-advanced-link small {
  margin-top: 3px;
  color: #667b9d;
  font-size: 11px;
  line-height: 1.35;
}

.integration-advanced-link-arrow {
  font-size: 20px;
  font-weight: 700;
}

.integration-toolbar {
  position: sticky;
  bottom: 18px;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12);
}

.integration-toolbar-security {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 10px 12px;
}

.integration-toolbar-security strong,
.integration-toolbar-security span {
  display: block;
}

.integration-toolbar-security strong {
  color: #10275d;
}

.integration-toolbar-security span {
  margin-top: 4px;
  color: #6b7b98;
  font-size: 14px;
}

.integration-toolbar-shield {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: #2563eb;
  background: linear-gradient(180deg, #edf4ff, #dfeaff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.integration-toolbar-shield svg {
  width: 28px;
  height: 28px;
}

.integration-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.integration-back-btn,
.integration-save-btn {
  min-height: 64px;
  border-radius: 20px;
  padding: 0 24px;
  font-size: 1.05rem;
}

.integration-back-btn {
  gap: 10px;
  background: linear-gradient(180deg, #fff, #f7faff);
}

.integration-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 360px;
  justify-content: center;
  background: linear-gradient(135deg, #1d4ed8, #2563eb 45%, #245dff);
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.btn-inline-icon,
.btn-inline-arrow {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.btn-inline-icon svg,
.btn-inline-arrow svg {
  width: 20px;
  height: 20px;
}

.integration-save-btn .btn-inline-arrow {
  margin-left: 10px;
}

.dashboard-page {
  background:
    radial-gradient(circle at 14% 6%, rgba(37, 99, 235, 0.16), transparent 22%),
    radial-gradient(circle at 86% 4%, rgba(148, 197, 255, 0.16), transparent 22%),
    linear-gradient(180deg, #f6faff 0%, #eef5ff 40%, #edf3fc 100%);
}

.dashboard-page .saas-layout {
  grid-template-columns: 280px minmax(0, 1fr);
}

.dashboard-page .sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: 28px 20px 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(180deg, #123ba8 0%, #1548cb 46%, #2159ed 100%);
  box-shadow: 20px 0 60px rgba(12, 37, 109, 0.16);
}

.dashboard-page .sidebar-link {
  gap: 12px;
  min-height: 54px;
  font-size: 15px;
  border-radius: 18px;
}

.dashboard-page .sidebar-link.active,
.dashboard-page .sidebar-link:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(147, 197, 253, 0.2));
}

.dashboard-page .content-shell {
  padding: 30px 30px 34px;
}

.dashboard-page .page-header {
  margin-bottom: 26px;
}

.dashboard-page .page-header h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: #0c2255;
}

.dashboard-page .page-subtitle {
  font-size: 16px;
}

.dashboard-page .page-user {
  min-width: 260px;
  padding: 12px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 16px 32px rgba(20, 40, 96, 0.08);
}

.dashboard-page .summary-row-premium {
  gap: 18px;
  margin-bottom: 20px;
}

.dashboard-summary-card {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(37, 99, 235, 0.08);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.dashboard-summary-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.dashboard-summary-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.dashboard-summary-dot.tone-blue {
  background: #2563eb;
}

.dashboard-summary-dot.tone-orange {
  background: #f59e0b;
}

.dashboard-summary-dot.tone-red {
  background: #ef4444;
}

.dashboard-summary-dot.tone-green {
  background: #22c55e;
}

.dashboard-summary-label {
  color: #4d6288;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-summary-card strong {
  color: #0d2359;
  font-size: 2.05rem;
}

.dashboard-summary-meta {
  color: #7a8ca7;
  font-size: 13px;
}

.dashboard-hero-panel {
  align-items: center;
  margin-bottom: 18px;
  border-radius: 30px;
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.08);
}

.dashboard-hero-copy {
  display: grid;
  gap: 12px;
}

.dashboard-store-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-store-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f5f8ff;
  border: 1px solid #dde8fb;
  color: #435989;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-store-pill.is-ready {
  color: #15703f;
  background: #e9f8ef;
  border-color: #bee6ca;
}

.dashboard-store-pill.is-warning {
  color: #b45309;
  background: #fff5e8;
  border-color: #ffd9a8;
}

.dashboard-searchbar {
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
}

.dashboard-search-input {
  position: relative;
  flex: 1 1 320px;
}

.dashboard-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #6c81a8;
  pointer-events: none;
}

.dashboard-search-icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-search-input input {
  width: 100%;
  min-height: 52px;
  padding-left: 46px;
  border-radius: 18px;
}

.dashboard-order-card {
  padding: 20px 20px 18px;
  border-radius: 30px;
  border-left-width: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), #ffffff);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.09);
}

.dashboard-order-card .saas-order-id strong {
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #0d2258;
}

.dashboard-order-card .saas-order-id span {
  color: #7a8ca8;
}

.dashboard-order-card .saas-order-content h3 {
  font-size: 1.2rem;
  margin-bottom: 0;
  color: #081c50;
}

.dashboard-order-main {
  align-items: center;
  gap: 16px;
}

.dashboard-order-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.dashboard-order-code {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff5ff;
  color: #3359b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-order-meta {
  display: grid;
  gap: 10px;
}

.dashboard-order-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4c6289;
}

.dashboard-order-meta-item strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f5f8ff;
  color: #233d72;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-order-meta-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-order-card .saas-order-side strong {
  font-size: 1.3rem;
  color: #0c2255;
}

.dashboard-order-side {
  min-width: 140px;
  padding: 14px 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fbfdff, #f3f8ff);
  border: 1px solid #dde8fb;
}

.dashboard-order-side span {
  font-size: 13px;
  color: #607599;
}

.dashboard-order-card .order-thumb {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.dashboard-summary-actions {
  margin-top: 18px;
  grid-template-columns: 1.1fr 1.1fr 1.2fr 1.2fr;
}

.dashboard-summary-actions .btn {
  min-height: 44px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-summary-actions .btn-secondary {
  background: linear-gradient(180deg, #f8fbff, #eef4ff);
}

.dashboard-summary-actions .btn-danger {
  box-shadow: 0 14px 24px rgba(239, 68, 68, 0.18);
}

.dashboard-side-card {
  border-radius: 28px;
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.08);
}

.dashboard-side-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-side-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: #2557dd;
  background: linear-gradient(180deg, #f3f7ff, #eaf1ff);
  border: 1px solid #dae5fb;
}

.dashboard-side-icon svg {
  width: 20px;
  height: 20px;
}

.dashboard-info-stack {
  gap: 14px;
}

.dashboard-readonly-field span {
  display: block;
  margin-bottom: 7px;
}

.dashboard-readonly-shell {
  position: relative;
}

.dashboard-readonly-shell input {
  padding-right: 58px;
  border-radius: 18px;
}

.field-copy-btn-static {
  right: 9px;
}

.dashboard-page .mini-list div {
  align-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #f9fbff, #f3f7ff);
}

@media (max-width: 1100px) {
  .integration-page .saas-layout {
    grid-template-columns: 1fr;
  }

  .integration-page .sidebar {
    position: static;
    min-height: auto;
    box-shadow: none;
  }

  .integration-page .content-shell {
    padding: 24px 18px 28px;
  }

  .integration-page .integration-grid-wide {
    grid-template-columns: 1fr;
  }

  .integration-toolbar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .integration-toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .integration-back-btn,
  .integration-save-btn {
    width: 100%;
  }

  .integration-save-btn {
    min-width: 0;
  }

  .dashboard-page .saas-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-page .sidebar {
    position: static;
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .integration-header {
    align-items: flex-start;
  }

  .integration-help-btn {
    min-height: 50px;
    padding: 0 16px;
  }

  .integration-card-title h2,
  .integration-card-title h3 {
    font-size: 1.45rem;
  }

  .integration-card {
    padding: 18px;
    border-radius: 22px;
  }

  .integration-card-head {
    align-items: center;
  }

  .integration-card-action-icon {
    width: 42px;
    height: 42px;
  }

  .integration-toolbar-security {
    padding: 4px 2px;
  }

  .integration-toolbar-shield {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .integration-sidebar-store {
    margin-top: 4px;
  }

  .dashboard-page .content-shell {
    padding: 18px 16px 26px;
  }

  .dashboard-page .page-user {
    min-width: 0;
    width: 100%;
  }

  .dashboard-searchbar {
    padding: 10px;
  }

  .dashboard-order-card {
    padding: 16px;
    border-radius: 24px;
  }

  .dashboard-order-main {
    align-items: flex-start;
  }

  .dashboard-order-side {
    min-width: 96px;
    padding: 10px;
    border-radius: 18px;
  }

  .dashboard-order-meta-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .dashboard-order-meta-item strong {
    min-width: 0;
  }

  .dashboard-order-meta-item span {
    white-space: normal;
  }
}

/* Premium dashboard v2 */
.dashboard-v2 {
  --dash-primary: #2554ff;
  --dash-primary-dark: #123fce;
  --dash-navy: #08235c;
  --dash-muted: #64748b;
  --dash-border: rgba(15, 23, 42, 0.08);
  --dash-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  min-height: 100vh;
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--dash-navy);
  background:
    radial-gradient(circle at 72% 0%, rgba(68, 135, 255, 0.09), transparent 28%),
    linear-gradient(180deg, #f6f9fe 0%, #f8faff 100%);
}

.dashboard-v2 button,
.dashboard-v2 input,
.dashboard-v2 select {
  font: inherit;
}

.dashboard-v2 button:focus-visible,
.dashboard-v2 a:focus-visible,
.dashboard-v2 input:focus-visible,
.dashboard-v2 select:focus-visible {
  outline: 3px solid rgba(37, 84, 255, 0.22);
  outline-offset: 2px;
}

.dashboard-v2 .saas-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.dashboard-v2 .dashboard-sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: 248px;
  min-height: 100vh;
  padding: 24px 16px 18px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 18% 7%, rgba(78, 148, 255, 0.3), transparent 25%),
    linear-gradient(165deg, #0a2d8d 0%, #0646da 58%, #0964f3 100%);
  box-shadow: 16px 0 50px rgba(8, 35, 92, 0.13);
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px 24px;
}
.dashboard-brand-logo {
  display: block;
  width: 190px;
  height: auto;
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
}
.dashboard-brand > div { display: none; }

.dashboard-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.dashboard-brand-mark svg {
  width: 26px;
  height: 26px;
}

.dashboard-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.auth-brand img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 10px;
}

.dashboard-v2 .dashboard-brand strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dashboard-v2 .dashboard-brand span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
}

.dashboard-sidebar-close {
  display: none;
  margin-left: auto;
  color: #fff;
  border: 0;
  background: transparent;
  font-size: 25px;
}

.dashboard-v2 .dashboard-nav {
  display: grid;
  gap: 6px;
}

.dashboard-v2 .dashboard-nav .sidebar-link {
  min-height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 650;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

.dashboard-v2 .dashboard-nav .sidebar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.dashboard-v2 .dashboard-nav .sidebar-link.active {
  color: #fff;
  background: linear-gradient(135deg, #2671ff, #0c5bf2);
  box-shadow: 0 10px 26px rgba(0, 26, 105, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dashboard-v2 .sidebar-link-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.dashboard-v2 .sidebar-link-icon svg {
  width: 19px;
  height: 19px;
}

.dashboard-sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.dashboard-help-card,
.dashboard-sidebar-user {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.dashboard-help-card {
  min-height: 62px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  color: #fff;
}

.dashboard-help-card strong,
.dashboard-help-card small {
  display: block;
}

.dashboard-help-card strong {
  margin-bottom: 3px;
  font-size: 10px;
}

.dashboard-help-card small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 8px;
}

.dashboard-sidebar-user {
  min-width: 0;
  padding: 11px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
}

.dashboard-v2 .dashboard-sidebar-user .user-badge {
  width: 34px;
  height: 34px;
  font-size: 12px;
  color: #174fd2;
  background: #fff;
}

.dashboard-sidebar-user strong,
.dashboard-sidebar-user span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sidebar-user strong {
  font-size: 9px;
}

.dashboard-sidebar-user span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 7px;
}

.dashboard-sidebar-user form,
.dashboard-sidebar-user button {
  margin: 0;
}

.dashboard-sidebar-user button {
  padding: 5px;
  color: rgba(255, 255, 255, 0.8);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dashboard-v2 .dashboard-content {
  grid-column: 2;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 30px 30px 42px;
}

.dashboard-mobile-header,
.dashboard-bottom-nav,
.dashboard-mobile-orders {
  display: none;
}

.dashboard-v2 .dashboard-header {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.dashboard-greeting {
  margin: 0 0 8px;
  color: #334b78;
  font-size: 12px;
  font-weight: 500;
}

.dashboard-v2 .dashboard-header h1 {
  margin: 0;
  color: #071f55;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.dashboard-v2 .dashboard-header .page-subtitle {
  margin: 10px 0 0;
  color: var(--dash-muted);
  font-size: 13px;
}

.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-notification {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #0d2c6e;
  border: 1px solid var(--dash-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--dash-shadow);
  cursor: pointer;
}

.dashboard-notification svg {
  width: 19px;
  height: 19px;
}

.dashboard-notification span {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ef4444;
  border: 2px solid #f7f9fc;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}

.dashboard-v2 .dashboard-page-user {
  min-width: 225px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dash-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--dash-shadow);
}

.dashboard-v2 .dashboard-page-user .user-badge {
  width: 34px;
  height: 34px;
  font-size: 11px;
  background: #1755dc;
}

.dashboard-page-user strong,
.dashboard-page-user span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-page-user strong {
  display: block;
  font-size: 11px;
}

.dashboard-page-user div > span {
  display: block;
  margin-top: 2px;
  color: var(--dash-muted);
  font-size: 8px;
}

.dashboard-user-chevron {
  font-size: 16px;
}

.dashboard-flash {
  border-radius: 12px;
  box-shadow: var(--dash-shadow);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-stat {
  min-width: 0;
  min-height: 142px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--dash-border);
  border-radius: 18px;
  box-shadow: var(--dash-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.dashboard-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.09);
}

.dashboard-stat-blue { color: #2563eb; background: linear-gradient(145deg, #fff 5%, #f0f6ff 100%); }
.dashboard-stat-orange { color: #f59e0b; background: linear-gradient(145deg, #fff 5%, #fff7e9 100%); }
.dashboard-stat-red { color: #ef4444; background: linear-gradient(145deg, #fff 5%, #fff1f1 100%); }
.dashboard-stat-green { color: #16a34a; background: linear-gradient(145deg, #fff 5%, #eefcf4 100%); }

.dashboard-stat-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.dashboard-stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: currentColor;
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 12%, white);
}

.dashboard-stat-icon svg {
  width: 21px;
  height: 21px;
}

.dashboard-stat-top div > span,
.dashboard-stat-top strong {
  display: block;
}

.dashboard-stat-top div > span {
  color: #41577e;
  font-size: 10px;
  font-weight: 650;
}

.dashboard-stat-top strong {
  margin-top: 5px;
  color: #071f55;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dashboard-stat-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-stat-bottom small {
  color: currentColor;
  font-size: 9px;
  font-weight: 700;
}

.dashboard-sparkline {
  width: 74px;
  height: 25px;
  opacity: 0.9;
}

.dashboard-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 252px;
  align-items: start;
  gap: 16px;
}

.dashboard-main-column,
.dashboard-right-rail {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.dashboard-store-card,
.dashboard-search-toolbar,
.dashboard-orders-panel,
.dashboard-rail-card,
.dashboard-empty-setup {
  border: 1px solid var(--dash-border);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--dash-shadow);
}

.dashboard-store-card {
  padding: 20px;
  border-radius: 18px;
}

.dashboard-section-label {
  margin-bottom: 14px;
  color: #0b275f;
  font-size: 11px;
  font-weight: 750;
}

.dashboard-store-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.dashboard-store-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #2554ff;
  border-radius: 15px;
  background: #edf4ff;
}

.dashboard-store-icon svg {
  width: 23px;
  height: 23px;
}

.dashboard-store-copy {
  min-width: 0;
}

.dashboard-store-copy > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.dashboard-store-copy h2 {
  margin: 0;
  color: #071f55;
  font-size: 17px;
  letter-spacing: -0.025em;
}

.dashboard-ready-badge {
  padding: 5px 9px;
  color: #11833f;
  background: #e7f9ee;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750;
}

.dashboard-store-copy a,
.dashboard-store-copy small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-store-copy a {
  margin-top: 7px;
  color: #1555df;
  font-size: 10px;
  font-weight: 650;
}

.dashboard-store-copy small {
  margin-top: 7px;
  color: var(--dash-muted);
  font-size: 9px;
}

.dashboard-store-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-v2 .dashboard-store-actions .btn {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 9px;
  box-shadow: none;
}

.dashboard-v2 .dashboard-store-actions .btn-primary {
  box-shadow: 0 8px 18px rgba(37, 84, 255, 0.2);
}

.dashboard-search-toolbar {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px auto auto;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
}

.dashboard-search-field {
  position: relative;
  min-width: 0;
}

.dashboard-search-field svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 16px;
  height: 16px;
  color: #6c7f9e;
  transform: translateY(-50%);
  pointer-events: none;
}

.dashboard-search-field input,
.dashboard-search-toolbar select {
  width: 100%;
  height: 40px;
  color: #18366f;
  border: 1px solid #dfe6f2;
  border-radius: 10px;
  background: #fff;
}

.dashboard-search-field input {
  padding: 0 13px 0 39px;
  font-size: 10px;
}

.dashboard-search-toolbar select {
  padding: 0 30px 0 12px;
  font-size: 9px;
  font-weight: 650;
}

.dashboard-filter-submit,
.dashboard-filter-clear {
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  cursor: pointer;
}

.dashboard-filter-submit {
  padding: 0 14px;
  color: #fff;
  border: 0;
  background: #2554ff;
  font-size: 9px;
  font-weight: 700;
}

.dashboard-filter-clear {
  width: 40px;
  color: #5e7296;
  border: 1px solid #dfe6f2;
  background: #fff;
}

.dashboard-orders-panel {
  overflow: hidden;
  border-radius: 18px;
}

.dashboard-orders-heading {
  min-height: 58px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e9eef6;
}

.dashboard-orders-heading h2,
.dashboard-orders-heading p {
  margin: 0;
}

.dashboard-orders-heading h2 {
  font-size: 12px;
}

.dashboard-orders-heading p {
  margin-top: 3px;
  color: var(--dash-muted);
  font-size: 8px;
}

.dashboard-orders-heading > a {
  color: #1c56d8;
  font-size: 9px;
  font-weight: 700;
}

.dashboard-orders-heading > a span {
  margin-left: 4px;
  font-size: 14px;
}

.dashboard-orders-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.dashboard-orders-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dashboard-orders-table th {
  padding: 10px 12px;
  color: #71809b;
  background: #f8faff;
  font-size: 7.5px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
}

.dashboard-orders-table th:nth-child(1) { width: 18%; }
.dashboard-orders-table th:nth-child(2) { width: 19%; }
.dashboard-orders-table th:nth-child(3) { width: 14%; }
.dashboard-orders-table th:nth-child(4) { width: 11%; }
.dashboard-orders-table th:nth-child(5) { width: 11%; }
.dashboard-orders-table th:nth-child(6) { width: 10%; }
.dashboard-orders-table th:nth-child(7) { width: 11%; }
.dashboard-orders-table th:nth-child(8) { width: 104px; }

.dashboard-orders-table td {
  height: 58px;
  padding: 8px 12px;
  color: #334b76;
  border-top: 1px solid #edf1f7;
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-orders-table tbody tr {
  transition: background 150ms ease;
}

.dashboard-orders-table tbody tr:hover {
  background: #fafcff;
}

.dashboard-order-ref {
  padding: 0;
  display: grid;
  gap: 4px;
  color: #0a285f;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dashboard-order-ref strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 8.5px;
}

.dashboard-order-ref span {
  color: #6f809e;
  font-size: 7px;
}

.dashboard-customer-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dashboard-customer-cell > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #2c559f;
  background: #e9f0fc;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750;
}

.dashboard-customer-cell div {
  min-width: 0;
}

.dashboard-customer-cell strong,
.dashboard-customer-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-customer-cell strong {
  color: #102c62;
  font-size: 8px;
}

.dashboard-customer-cell small {
  width: max-content;
  margin-top: 3px;
  padding: 2px 4px;
  color: #1759db;
  background: #eaf1ff;
  border-radius: 4px;
  font-size: 5px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-phone-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #38527f;
}

.dashboard-phone-link svg {
  width: 11px;
  height: 11px;
  color: #1460e9;
}

.dashboard-status {
  min-height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  font-size: 7px;
  font-weight: 700;
}

.dashboard-status-confirmed,
.dashboard-status-sent { color: #138141; background: #e5f8ec; }
.dashboard-status-pending { color: #b76408; background: #fff1d9; }
.dashboard-status-no-reply { color: #d72e32; background: #ffebeb; }
.dashboard-status-awaiting-payment { color: #8b4a00; background: #fff0c2; }

.dashboard-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboard-row-actions a,
.dashboard-row-actions button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #294677;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.dashboard-row-actions a:hover,
.dashboard-row-actions button:hover {
  color: #2554ff;
  border-color: #b9cbff;
  background: #f2f6ff;
}

.dashboard-row-actions .js-delete-order:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff3f3;
}

.dashboard-row-actions svg {
  width: 13px;
  height: 13px;
}

.dashboard-table-footer {
  min-height: 48px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6b7c98;
  border-top: 1px solid #edf1f7;
  font-size: 8px;
}

.dashboard-table-footer button {
  width: 30px;
  height: 30px;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: #1758e4;
}

.dashboard-rail-card {
  padding: 16px;
  border-radius: 16px;
}

.dashboard-rail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.dashboard-rail-title > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #2554ff;
  background: #edf4ff;
  border-radius: 11px;
}

.dashboard-rail-title svg {
  width: 17px;
  height: 17px;
}

.dashboard-rail-title small,
.dashboard-rail-title h2 {
  display: block;
  margin: 0;
}

.dashboard-rail-title small {
  color: #1e53ce;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-rail-title h2 {
  margin-top: 3px;
  font-size: 12px;
}

.dashboard-webhook-field {
  display: block;
  margin-top: 13px;
}

.dashboard-webhook-field > span {
  display: block;
  margin-bottom: 6px;
  color: #304871;
  font-size: 8px;
  font-weight: 700;
}

.dashboard-webhook-field > div {
  position: relative;
}

.dashboard-webhook-field input {
  width: 100%;
  height: 44px;
  padding: 7px 39px 7px 9px;
  color: #536888;
  border: 1px solid #dfe7f3;
  border-radius: 10px;
  background: #f8faff;
  font-size: 7px;
}

.dashboard-webhook-field button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #294b8e;
  border: 1px solid #dfe7f3;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.dashboard-webhook-field button svg {
  width: 14px;
  height: 14px;
}

.dashboard-integration-list {
  display: grid;
  gap: 11px;
}

.dashboard-integration-list label {
  display: grid;
  gap: 6px;
}

.dashboard-integration-list label > span:first-child {
  color: #607392;
  font-size: 8px;
}

.dashboard-integration-list strong,
.dashboard-masked-token {
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #18366f;
  border: 1px solid #dfe7f3;
  border-radius: 9px;
  background: #fbfcff;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-manage-link {
  min-height: 40px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #1b55d8;
  border: 1px solid #dce6f7;
  border-radius: 10px;
  background: #f7faff;
  font-size: 8px;
  font-weight: 700;
}

.dashboard-manage-link svg {
  width: 14px;
  height: 14px;
}

.dashboard-empty-state {
  padding: 55px 20px;
  text-align: center;
}

.dashboard-empty-state > span {
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: #2554ff;
  background: #edf4ff;
  border-radius: 15px;
  font-size: 24px;
}

.dashboard-empty-state h3 {
  margin-bottom: 7px;
  font-size: 15px;
}

.dashboard-empty-state p {
  color: var(--dash-muted);
  font-size: 10px;
}

.dashboard-empty-setup {
  padding: 30px;
  border-radius: 18px;
}

.dashboard-details-panel {
  width: min(520px, 100%);
  border-radius: 24px 0 0 24px;
}

.dashboard-confirm-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  background: rgba(4, 18, 48, 0.48);
  backdrop-filter: blur(5px);
}

.dashboard-confirm-modal {
  position: fixed;
  z-index: 81;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100% - 32px));
  padding: 28px;
  color: #0b285f;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(4, 18, 48, 0.25);
  transform: translate(-50%, -50%);
  text-align: center;
}

.dashboard-confirm-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: #dc2626;
  background: #fff0f0;
  border-radius: 16px;
}

.dashboard-confirm-icon svg {
  width: 23px;
  height: 23px;
}

.dashboard-delivery-confirm-icon {
  color: #1758e4;
  background: #eaf1ff;
}

.dashboard-delivery-confirm-modal .btn-primary {
  min-height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0%, rgba(129, 171, 255, 0.45), transparent 34%),
    linear-gradient(135deg, #2e70ff, #1341b7);
  box-shadow: 0 14px 26px rgba(37, 84, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.dashboard-delivery-confirm-modal {
  width: min(450px, calc(100% - 32px));
}

.dashboard-delivery-confirm-modal .dashboard-delivery-actions {
  grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr);
  gap: 10px;
  margin-top: 22px;
}

.dashboard-delivery-confirm-modal .dashboard-delivery-actions .btn-secondary {
  min-height: 60px;
  color: #31558f;
  border-color: #d9e5f7;
  border-radius: 15px;
  background: linear-gradient(180deg, #fff, #f5f8fd);
  box-shadow: none;
}

.dashboard-delivery-confirm-modal #confirmDeliverySend {
  min-width: 0;
  padding: 9px 13px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.dashboard-delivery-confirm-modal #confirmDeliverySend > svg {
  width: 21px;
  height: 21px;
}

.dashboard-delivery-send-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dashboard-delivery-send-copy small,
.dashboard-delivery-send-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-delivery-send-copy small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 600;
}

.dashboard-delivery-send-copy strong {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.dashboard-delivery-send-arrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 21px;
  line-height: 1;
}

.dashboard-confirm-modal h2 {
  margin-bottom: 8px;
  font-size: 19px;
}

.dashboard-confirm-modal p {
  color: var(--dash-muted);
  font-size: 12px;
  line-height: 1.6;
}

.dashboard-confirm-modal > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 20px;
}

.dashboard-confirm-modal form,
.dashboard-confirm-modal .btn {
  width: 100%;
}

.dashboard-toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  padding: 12px 16px;
  color: #fff;
  border-radius: 11px;
  background: #0b285f;
  box-shadow: 0 14px 34px rgba(8, 35, 92, 0.24);
  font-size: 11px;
  font-weight: 650;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.dashboard-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dashboard-mobile-overlay {
  position: fixed;
  z-index: 49;
  inset: 0;
  background: rgba(4, 18, 48, 0.45);
  backdrop-filter: blur(3px);
}

.dashboard-v2 [hidden] {
  display: none !important;
}

@media (max-width: 1240px) {
  .dashboard-v2 .saas-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .dashboard-v2 .dashboard-sidebar { width: 220px; }
  .dashboard-v2 .dashboard-content { padding: 26px 22px 38px; }
  .dashboard-body-grid { grid-template-columns: minmax(0, 1fr) 230px; }
  .dashboard-orders-table th:nth-child(3), .dashboard-orders-table td:nth-child(3) { display: none; }
  .dashboard-orders-table th:nth-child(1) { width: 18%; }
  .dashboard-orders-table th:nth-child(2) { width: 20%; }
}

@media (max-width: 1020px) {
  .dashboard-v2 .saas-layout { display: block; }
  .dashboard-v2 .dashboard-sidebar { transform: translateX(-105%); transition: transform 220ms ease; }
  .dashboard-v2 .dashboard-sidebar.is-open { transform: translateX(0); }
  .dashboard-sidebar-close { display: block; }
  .dashboard-v2 .dashboard-content { padding-top: 16px; }
  .dashboard-mobile-header { min-height: 50px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
  .dashboard-mobile-header button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; color: #0b285f; border: 0; background: transparent; }
  .dashboard-mobile-header button svg { width: 22px; height: 22px; }
  .dashboard-mobile-header strong { font-size: 14px; }
  .dashboard-mobile-avatar { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: #1755dc; border-radius: 999px; font-size: 11px; font-weight: 750; }
  .dashboard-header-actions { display: none; }
  .dashboard-body-grid { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 820px) {
  .dashboard-v2 .dashboard-content { padding: 14px 16px 100px; }
  .dashboard-v2 .dashboard-header { margin-bottom: 20px; }
  .dashboard-v2 .dashboard-header h1 { font-size: 28px; }
  .dashboard-v2 .dashboard-header .page-subtitle { font-size: 11px; line-height: 1.55; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dashboard-stat { min-height: 112px; padding: 14px; border-radius: 15px; }
  .dashboard-stat-icon { width: 36px; height: 36px; border-radius: 12px; }
  .dashboard-stat-icon svg { width: 18px; height: 18px; }
  .dashboard-stat-top div > span { font-size: 8px; }
  .dashboard-stat-top strong { font-size: 20px; }
  .dashboard-stat-bottom small { font-size: 7px; }
  .dashboard-sparkline { width: 58px; height: 20px; }
  .dashboard-body-grid { grid-template-columns: 1fr; }
  .dashboard-right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-store-row { grid-template-columns: 44px minmax(0, 1fr); }
  .dashboard-store-actions { grid-column: 1 / -1; }
  .dashboard-store-actions .btn { flex: 1; }
  .dashboard-search-toolbar { grid-template-columns: minmax(0, 1fr) 140px auto; }
  .dashboard-filter-clear { display: none; }
  .dashboard-orders-table-wrap, .dashboard-table-footer { display: none; }
  .dashboard-mobile-orders { padding: 10px; display: grid; gap: 10px; }
  .dashboard-mobile-order { padding: 14px; border: 1px solid #e3eaf5; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045); }
  .dashboard-mobile-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .dashboard-mobile-order-head button { min-width: 0; padding: 0; display: grid; gap: 4px; color: #0a285f; border: 0; background: transparent; text-align: left; }
  .dashboard-mobile-order-head button strong { overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
  .dashboard-mobile-order-head button span { color: #70809b; font-size: 7px; }
  .dashboard-mobile-client { margin-top: 13px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .dashboard-mobile-client > span { width: 38px; height: 38px; display: grid; place-items: center; color: #2455ad; background: #eaf1fd; border-radius: 999px; font-size: 9px; font-weight: 750; }
  .dashboard-mobile-client div { min-width: 0; }
  .dashboard-mobile-client div strong, .dashboard-mobile-client div a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-mobile-client div strong { color: #0b285f; font-size: 11px; }
  .dashboard-mobile-client div a { margin-top: 4px; color: #4d6388; font-size: 9px; }
  .dashboard-mobile-client > strong { font-size: 11px; white-space: nowrap; }
  .dashboard-mobile-meta { margin-top: 11px; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; color: #637694; border-top: 1px solid #edf1f7; font-size: 8px; }
  .dashboard-mobile-meta span { display: flex; align-items: center; gap: 5px; }
  .dashboard-mobile-meta svg { width: 11px; height: 11px; color: #2554ff; }
  .dashboard-mobile-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .dashboard-mobile-actions a, .dashboard-mobile-actions button { min-height: 38px; display: grid; place-items: center; color: #174fc9; border: 1px solid #dbe5f6; border-radius: 9px; background: #f7faff; font-size: 8px; font-weight: 700; }
  .dashboard-mobile-actions .is-danger { color: #dc2626; background: #fff5f5; border-color: #fee2e2; }
  .dashboard-bottom-nav { position: fixed; z-index: 45; right: 10px; bottom: 10px; left: 10px; min-height: 66px; padding: 8px 10px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.15); backdrop-filter: blur(18px); }
  .dashboard-bottom-nav a { min-width: 0; display: grid; place-items: center; gap: 4px; color: #75839c; font-size: 7px; font-weight: 650; }
  .dashboard-bottom-nav a.active { color: #1956dd; }
  .dashboard-bottom-nav svg { width: 17px; height: 17px; }
  .dashboard-bottom-nav .dashboard-bottom-add { width: 44px; height: 44px; min-width: 44px; margin: -22px auto 0; color: #fff; background: linear-gradient(145deg, #2671ff, #0b4cd6); border: 4px solid #fff; border-radius: 999px; box-shadow: 0 10px 22px rgba(37, 84, 255, 0.28); font-size: 23px; }
  .dashboard-details-panel { width: 100%; border-radius: 22px 22px 0 0; }
}

@media (max-width: 1450px) and (min-width: 821px) {
  .dashboard-confirm-actions a,
  .dashboard-confirm-actions .dashboard-confirm-now {
    max-width: 92px;
    padding: 0 8px;
  }
}

@media (min-width: 821px) and (max-width: 1350px) {
  .dashboard-confirmation-queue .dashboard-orders-table th:nth-child(3),
  .dashboard-confirmation-queue .dashboard-orders-table td:nth-child(3),
  .dashboard-confirmation-queue .dashboard-orders-table th:nth-child(5),
  .dashboard-confirmation-queue .dashboard-orders-table td:nth-child(5) {
    display: table-cell;
  }
}

@media (max-width: 560px) {
  .dashboard-greeting { font-size: 10px; }
  .dashboard-v2 .dashboard-header h1 { font-size: 25px; }
  .dashboard-stat-top { align-items: flex-start; gap: 9px; }
  .dashboard-stat-top div > span { min-height: 20px; }
  .dashboard-body-grid { gap: 12px; }
  .dashboard-store-card { padding: 16px; }
  .dashboard-store-copy h2 { font-size: 15px; }
  .dashboard-store-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .dashboard-search-toolbar { grid-template-columns: minmax(0, 1fr) 42px; }
  .dashboard-search-toolbar select { width: 42px; padding: 0; color: transparent; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%233b5680' d='M4 5h16v2H4V5Zm3 6h10v2H7v-2Zm3 6h4v2h-4v-2Z'/%3E%3C/svg%3E") center/18px no-repeat; }
  .dashboard-filter-submit { display: none; }
  .dashboard-right-rail { grid-template-columns: 1fr; }
  .dashboard-orders-heading > a { display: none; }
  .dashboard-confirm-modal { padding: 22px 18px; }
  .dashboard-confirm-modal > div { grid-template-columns: 1fr; }
  .dashboard-toast { right: 16px; bottom: 92px; left: 16px; text-align: center; }
}

/* Account preferences menu and profile settings. */
.dashboard-header-actions .dashboard-page-user {
  display: none;
}

.dashboard-account-menu {
  display: none;
}

.global-account-menu {
  position: fixed;
  z-index: 100;
  top: 20px;
  right: 30px;
}

.dashboard-global-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-balance-card {
  min-width: 286px;
  min-height: 70px;
  padding: 9px 11px 9px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #10275a;
  border: 1px solid #e0e9f7;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px rgba(36, 77, 145, .09);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-balance-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(36, 77, 145, .14);
}

.dashboard-balance-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: #1d5ce5;
  border-radius: 11px;
  background: #e9f1ff;
}

.dashboard-balance-icon svg { width: 18px; height: 18px; }
.dashboard-balance-copy { min-width: 0; display: grid; gap: 1px; line-height: 1.15; }
.dashboard-balance-copy small { color: #6e80a0; font-size: 10px; font-weight: 700; }
.dashboard-balance-copy strong { color: #10275a; font-size: 20px; letter-spacing: -.03em; white-space: nowrap; }
.dashboard-balance-copy strong em { color: #314a78; font-size: 10px; font-style: normal; letter-spacing: 0; }
.dashboard-balance-copy > span { overflow: hidden; color: #6e80a0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-balance-action { margin-left: auto; padding: 9px 11px; color: #fff; border-radius: 9px; background: linear-gradient(135deg, #2871f5, #1450d0); box-shadow: 0 7px 14px rgba(24, 86, 220, .2); font-size: 11px; font-weight: 800; white-space: nowrap; }

.account-menu {
  position: relative;
}

.account-menu summary {
  list-style: none;
  cursor: pointer;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu-summary {
  min-width: 230px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #0f172a;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.account-menu-summary strong,
.account-menu-summary span:not(.dashboard-user-chevron) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-summary strong { color: #102859; font-size: 12px; }
.account-menu-summary span { color: #657997; font-size: 10px; }
.account-menu-summary .user-badge { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 999px; background: #1755dc; font-size: 12px; font-weight: 800; }

.account-menu-popover {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  padding: 10px;
  border: 1px solid #dfe7f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.account-menu-popover a,
.account-menu-popover button,
.account-menu-popover label {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #193663;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.account-menu-popover::before {
  display: block;
  padding: 8px 10px 6px;
  color: #102859;
  content: "Paramètres du compte";
  font-size: 13px;
  font-weight: 800;
}

.account-menu-popover a:hover,
.account-menu-popover button:hover { background: #f4f8ff; }
.account-menu-popover form { margin: 0; }
.account-menu-popover select { width: 102px; min-height: 30px; border: 1px solid #dbe5f6; border-radius: 8px; background: #fff; font: inherit; font-size: 12px; }
.account-menu-popover .account-menu-logout { color: #c73535; }

/* Polished global account menu used consistently by every application page. */
.global-account-menu { z-index: 140; }
.account-menu-summary {
  min-width: 262px;
  min-height: 64px;
  padding: 9px 13px !important;
  grid-template-columns: 42px minmax(0, 1fr) 20px !important;
  gap: 11px !important;
  border: 1px solid #dfe7f4 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 28px rgba(20, 46, 92, .1) !important;
}

.account-menu-avatar { position: relative; width: 42px; height: 42px; }
.profile-avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.dashboard-sidebar-user .profile-avatar-image { width: 38px; height: 38px; }
.dashboard-page-user .profile-avatar-image { width: 42px; height: 42px; }
.account-menu-avatar .user-badge { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border-radius: 999px; background: linear-gradient(145deg, #2468ee, #1647c7); font-size: 14px; font-weight: 800; }
.account-menu-avatar i { position: absolute; right: -2px; bottom: -1px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 999px; background: #16b957; }
.account-menu-user strong { color: #10275a !important; font-size: 13px !important; font-weight: 800; }
.account-menu-user span { margin-top: 2px; color: #7283a0 !important; font-size: 10px !important; }
.account-menu-chevron { width: 19px; height: 19px; color: #18386d; transition: transform .18s ease; }
.account-menu[open] .account-menu-chevron { transform: rotate(180deg); }

.account-menu-popover {
  width: 330px !important;
  padding: 12px !important;
  overflow: hidden;
  border: 1px solid #e0e9f6 !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 20px 50px rgba(16, 39, 90, .18) !important;
}
.account-menu-popover::before { display: none !important; }
.account-menu-heading, .account-menu-row { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 13px; text-align: left; }
.account-menu-heading { padding: 8px 9px 14px; }
.account-menu-heading strong, .account-menu-row strong { display: block; color: #10275a; font-size: 14px; font-weight: 800; }
.account-menu-heading span:not(.account-menu-icon), .account-menu-row small { display: block; margin-top: 3px; color: #7484a0; font-size: 11px; line-height: 1.3; }
.account-menu-icon { width: 48px; height: 48px; display: grid; place-items: center; color: #1457d6; border-radius: 14px; background: linear-gradient(145deg, #edf4ff, #f8fbff); }
.account-menu-icon svg { width: 25px; height: 25px; }
.account-menu-row { min-height: 66px !important; padding: 9px !important; color: #10275a !important; border: 0 !important; border-radius: 14px !important; background: transparent !important; font: inherit; text-decoration: none; }
.account-menu-row:hover { background: #f6f9ff !important; }
.account-menu-row b { color: #10275a; font-size: 29px; font-weight: 400; line-height: 1; }
.account-menu-row-form { margin: 0 !important; }
.account-menu-divider { height: 1px; margin: 4px 8px; background: #e4ebf6; }
.account-menu-row select { width: 108px; min-height: 34px; padding: 0 28px 0 10px; color: #10275a; border: 1px solid #d8e3f2; border-radius: 10px; background: #fff; font: inherit; font-size: 12px; font-weight: 700; }
.account-menu-theme { cursor: pointer; }
.account-theme-switch { width: 42px; height: 24px; display: flex; align-items: center; padding: 3px; border-radius: 999px; background: #dfe7f2; transition: background .18s ease; }
.account-theme-switch b { width: 18px; height: 18px; display: block; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .2); transition: transform .18s ease; }
.account-theme-switch.is-on { justify-content: flex-end; background: #1e58db; }
.account-menu-logout { color: #dc2626 !important; background: linear-gradient(105deg, #fff7f7, #fffdfd) !important; }
.account-menu-logout strong, .account-menu-logout b { color: #dc2626 !important; }
.account-menu-logout .account-menu-icon { color: #dc2626; background: #fff0f0; }

@media (max-width: 820px) {
  .global-account-menu .account-menu-summary {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 1px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .global-account-menu .account-menu-user,
  .global-account-menu .account-menu-chevron { display: none !important; }
  .global-account-menu .account-menu-avatar,
  .global-account-menu .account-menu-avatar .user-badge { width: 38px; height: 38px; }
  .global-account-menu .account-menu-popover { width: min(330px, calc(100vw - 24px)) !important; }
}

.sidebar-account-menu .account-menu,
.sidebar-account-menu .account-menu-summary {
  width: 100%;
}

.sidebar-account-menu .account-menu-summary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.sidebar-account-menu .account-menu-summary strong,
.sidebar-account-menu .account-menu-summary span {
  color: #fff;
}

.sidebar-account-menu .account-menu-summary span:not(.dashboard-user-chevron) {
  color: rgba(255, 255, 255, 0.72);
}

.sidebar-account-menu .account-menu-popover {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
}

/* Public marketing homepage. */
.landing-page { min-height: 100vh; color: #081b4d; background: radial-gradient(circle at 83% 23%, rgba(37, 99, 235, .12), transparent 24%), linear-gradient(135deg, #fff 0%, #f7faff 55%, #eef5ff 100%); font-family: Manrope, sans-serif; }
.landing-nav { width: min(1360px, calc(100% - 64px)); min-height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; color: #0a1f55; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 800; }
.landing-brand span { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: linear-gradient(145deg, #276dff, #1045d1); font-size: 22px; }
.landing-nav nav { display: flex; align-items: center; gap: 40px; }
.landing-nav nav a, .landing-nav-actions > a:first-child { color: #112554; font-size: 13px; font-weight: 700; }
.landing-nav-actions { display: flex; align-items: center; gap: 22px; }
.landing-button { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; color: #fff; border-radius: 10px; background: linear-gradient(135deg, #1461f3, #1644c7); box-shadow: 0 14px 26px rgba(23, 89, 242, .2); font-size: 14px; font-weight: 800; }
.landing-button.small { min-height: 44px; padding: 0 17px; font-size: 13px; }
.landing-button.secondary { color: #1755dc; border: 1px solid #79a4ff; background: rgba(255,255,255,.7); box-shadow: none; }
.landing-button:hover { transform: translateY(-1px); }
.landing-hero { width: min(1360px, calc(100% - 64px)); min-height: 520px; margin: 34px auto 74px; display: grid; grid-template-columns: minmax(0, .93fr) minmax(520px, 1.07fr); align-items: center; gap: 56px; }
.landing-kicker { padding: 8px 13px; display: inline-flex; color: #1461e8; border-radius: 999px; background: #eaf1ff; font-size: 12px; font-weight: 800; }
.landing-copy h1 { margin: 21px 0 20px; color: #071d50; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(42px, 4.35vw, 66px); line-height: 1.08; letter-spacing: -.065em; }
.landing-copy h1 em { color: #1b60ef; font-style: normal; }
.landing-copy > p { max-width: 560px; margin: 0; color: #566b95; font-size: 17px; line-height: 1.65; }
.landing-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.landing-trust { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 24px; color: #53698f; font-size: 12px; font-weight: 650; }
.landing-showcase { position: relative; min-height: 450px; padding: 0 0 0 34px; display: grid; grid-template-columns: 152px minmax(0, 1fr); border: 1px solid #e2e9f4; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(27, 62, 132, .12); overflow: visible; }
.showcase-sidebar { padding: 24px 13px; display: grid; align-content: start; gap: 12px; border-right: 1px solid #e7edf7; color: #586d92; font-size: 11px; font-weight: 700; }
.showcase-sidebar strong { margin-bottom: 8px; color: #0b255d; font-size: 14px; }.showcase-sidebar span { padding: 10px; border-radius: 7px; }.showcase-sidebar span.active { color: #1755dc; background: #edf3ff; }
.showcase-main { min-width: 0; padding: 24px 20px 20px; }.showcase-top { display: flex; justify-content: space-between; font-size: 14px; }.showcase-top span { color: #6d80a0; font-size: 11px; }
.showcase-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.showcase-stats div { padding: 13px; border: 1px solid #e4eaf4; border-radius: 9px; }.showcase-stats small,.showcase-stats b,.showcase-stats i { display: block; }.showcase-stats small { color: #63769a; font-size: 9px; }.showcase-stats b { margin: 8px 0; color: #0b255d; font-size: 18px; }.showcase-stats sup { font-size: 9px; }.showcase-stats i { color: #12a154; font-size: 9px; font-style: normal; }
.showcase-chart { margin-top: 14px; padding: 16px; border: 1px solid #e4eaf4; border-radius: 10px; }.showcase-chart-title { display: flex; justify-content: space-between; font-size: 11px; }.showcase-chart-title span { padding: 5px 11px; color: #fff; border-radius: 6px; background: #1755dc; }.mock-chart { position: relative; height: 170px; margin-top: 12px; display: flex; align-items: end; justify-content: space-around; border-bottom: 1px solid #dfe7f4; background: repeating-linear-gradient(to bottom, transparent 0 32px, #edf2fa 33px 34px); }.mock-chart i { position: relative; z-index: 1; width: 22px; display: block; border-radius: 5px 5px 0 0; background: linear-gradient(#75a1ff, #2160e8); }.mock-chart svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }.mock-chart polyline { fill: none; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 1px #1d61ea); }.mock-chart-days { display: flex; justify-content: space-between; margin-top: 7px; color: #6a7d9d; font-size: 8px; }
.showcase-float { position: absolute; bottom: -42px; padding: 15px 18px; display: grid; grid-template-columns: 24px auto; gap: 3px 9px; color: #1755dc; border: 1px solid #e2e9f4; border-radius: 12px; background: #fff; box-shadow: 0 13px 28px rgba(30, 63, 128, .1); font-size: 22px; }.showcase-float strong { align-self: end; color: #172b5e; font-size: 13px; }.showcase-float small { grid-column: 2; color: #159a4d; font-size: 10px; }.showcase-float.shopify { left: -18px; }.showcase-float.delivery { left: 176px; }
.landing-features { width: min(1360px, calc(100% - 64px)); margin: 0 auto 58px; padding-top: 18px; }.landing-features h2 { margin: 0 0 32px; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 21px; }.landing-features > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }.landing-features article { display: grid; grid-template-columns: 48px 1fr; gap: 8px 16px; }.landing-features article > span { width: 48px; height: 48px; display: grid; place-items: center; grid-row: span 2; color: #1d60ed; border-radius: 12px; background: #eaf1ff; font-size: 23px; }.landing-features h3,.landing-features p { margin: 0; }.landing-features h3 { align-self: end; font-size: 14px; }.landing-features p { color: #647797; font-size: 12px; line-height: 1.6; }
.landing-bottom { width: min(1360px, calc(100% - 64px)); margin: 0 auto 38px; padding: 22px 30px; display: flex; align-items: center; justify-content: center; gap: 30px; border: 1px solid #dce7f8; border-radius: 14px; background: rgba(244,248,255,.75); }.landing-bottom div { display: grid; gap: 5px; }.landing-bottom strong { font-size: 18px; }.landing-bottom span { color: #657797; font-size: 12px; }.landing-bottom .landing-button { min-height: 48px; }
@media (max-width: 1060px) { .landing-nav nav { display: none; }.landing-hero { grid-template-columns: 1fr; }.landing-copy { max-width: 700px; }.landing-showcase { width: min(760px, 100%); justify-self: center; }.landing-features > div { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (max-width: 640px) { .landing-nav,.landing-hero,.landing-features,.landing-bottom { width: calc(100% - 32px); }.landing-nav { min-height: 70px; }.landing-brand { font-size: 17px; }.landing-nav-actions > a:first-child { display: none; }.landing-button.small { min-height: 40px; padding: 0 12px; }.landing-hero { margin-top: 24px; gap: 40px; }.landing-copy h1 { font-size: 41px; }.landing-copy > p { font-size: 15px; }.landing-button { width: 100%; }.landing-showcase { min-height: 350px; padding-left: 0; grid-template-columns: 1fr; }.showcase-sidebar { display: none; }.showcase-main { padding: 16px; }.showcase-stats { gap: 6px; }.showcase-stats div { padding: 9px; }.showcase-stats b { font-size: 14px; }.showcase-chart { padding: 11px; }.mock-chart { height: 120px; }.showcase-float { display: none; }.landing-trust { gap: 12px; }.landing-features > div { grid-template-columns: 1fr; }.landing-bottom { align-items: stretch; flex-direction: column; padding: 22px; }.landing-bottom .landing-button { width: 100%; } }

.theme-dark { color: #e5edf9; background: #0e1b33; }
.theme-dark .content-shell { background: #0e1b33; }
.theme-dark .panel, .theme-dark .focused-integration-card { color: #e5edf9; background: #142440; border-color: #29415f; }

@media (max-width: 820px) {
  .global-account-menu {
    display: block;
    top: 10px;
    right: 12px;
  }

  .dashboard-global-controls { display: block; }
  .dashboard-v2 .dashboard-content { padding-top: 92px !important; }
  .dashboard-global-controls .dashboard-balance-card {
    position: fixed;
    z-index: 99;
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
    min-width: 0;
    min-height: 62px;
    padding: 9px 10px;
    gap: 9px;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(28, 76, 153, .14);
  }
  .dashboard-global-controls .dashboard-balance-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .dashboard-global-controls .dashboard-balance-copy strong { font-size: 18px; }
  .dashboard-global-controls .dashboard-balance-action { padding: 9px 10px; font-size: 10px; }

  .global-account-menu .account-menu-summary {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    border-radius: 999px;
    touch-action: manipulation;
  }

  .global-account-menu .account-menu-user,
  .global-account-menu .dashboard-user-chevron,
  .global-account-menu .account-menu-chevron {
    display: none;
  }

  .global-account-menu .account-menu-avatar,
  .global-account-menu .account-menu-summary .user-badge {
    width: 38px;
    height: 38px;
  }

  .global-account-menu .account-menu-popover {
    width: min(260px, calc(100vw - 24px));
    right: 0;
    left: auto;
  }

  .global-account-menu .account-menu[open] .account-menu-popover {
    display: block;
  }

  .dashboard-mobile-avatar,
  .integration-mobile-avatar {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-v2 *, .dashboard-v2 *::before, .dashboard-v2 *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Dashboard readability pass: calibrated to the production visual reference. */
.dashboard-v2 .saas-layout {
  grid-template-columns: 256px minmax(0, 1fr);
}

.dashboard-v2 .dashboard-sidebar {
  width: 256px;
  padding: 28px 18px 20px;
}

.dashboard-brand {
  gap: 13px;
  padding-bottom: 30px;
}

.dashboard-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.dashboard-v2 .dashboard-brand strong {
  font-size: 17px;
}

.dashboard-v2 .dashboard-brand span {
  margin-top: 4px;
  font-size: 12px;
}

.dashboard-v2 .dashboard-nav {
  gap: 8px;
}

.dashboard-v2 .dashboard-nav .sidebar-link {
  min-height: 54px;
  padding: 0 15px;
  gap: 14px;
  border-radius: 14px;
  font-size: 15px;
}

.dashboard-v2 .sidebar-link-icon,
.dashboard-v2 .sidebar-link-icon svg {
  width: 21px;
  height: 21px;
}

.dashboard-help-card {
  min-height: 76px;
  padding: 13px;
  border-radius: 15px;
}

.dashboard-help-card strong {
  font-size: 12px;
}

.dashboard-help-card small {
  font-size: 10px;
}

.dashboard-sidebar-user {
  min-height: 70px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  padding: 12px;
  border-radius: 15px;
}

.dashboard-v2 .dashboard-sidebar-user .user-badge {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.dashboard-sidebar-user strong {
  font-size: 11px;
}

.dashboard-sidebar-user span {
  font-size: 9px;
}

.dashboard-v2 .dashboard-content {
  max-width: 1660px;
  padding: 32px 34px 48px;
}

.dashboard-v2 .dashboard-header {
  margin-bottom: 30px;
}

.dashboard-greeting {
  margin-bottom: 10px;
  font-size: 14px;
}

.dashboard-v2 .dashboard-header h1 {
  font-size: clamp(38px, 3.15vw, 42px);
  letter-spacing: -0.05em;
}

.dashboard-v2 .dashboard-header .page-subtitle {
  margin-top: 12px;
  font-size: 16px;
}

.dashboard-notification {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.dashboard-notification svg {
  width: 21px;
  height: 21px;
}

.dashboard-notification span {
  min-width: 20px;
  height: 20px;
  font-size: 10px;
}

.dashboard-v2 .dashboard-page-user {
  min-width: 270px;
  min-height: 62px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 10px 14px;
  gap: 12px;
  border-radius: 15px;
}

.dashboard-v2 .dashboard-page-user .user-badge {
  width: 42px;
  height: 42px;
  font-size: 14px;
}

.dashboard-page-user strong {
  font-size: 14px;
}

.dashboard-page-user div > span {
  margin-top: 4px;
  font-size: 12px;
}

.dashboard-stats {
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-stat {
  min-height: 156px;
  padding: 20px;
  border-radius: 18px;
}

.dashboard-stat-top {
  gap: 15px;
}

.dashboard-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.dashboard-stat-icon svg {
  width: 24px;
  height: 24px;
}

.dashboard-stat-top div > span {
  font-size: 14px;
}

.dashboard-stat-top strong {
  margin-top: 7px;
  font-size: 32px;
}

.dashboard-stat-bottom small {
  font-size: 12px;
}

.dashboard-sparkline {
  width: 88px;
  height: 30px;
}

.dashboard-body-grid {
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 18px;
}

.dashboard-main-column,
.dashboard-right-rail {
  gap: 18px;
}

.dashboard-store-card {
  min-height: 148px;
  padding: 24px;
  border-radius: 18px;
}

.dashboard-section-label {
  margin-bottom: 16px;
  font-size: 14px;
}

.dashboard-store-row {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 16px;
}

.dashboard-store-icon {
  width: 58px;
  height: 58px;
  border-radius: 17px;
}

.dashboard-store-icon svg {
  width: 27px;
  height: 27px;
}

.dashboard-store-copy > div {
  gap: 11px;
}

.dashboard-store-copy h2 {
  font-size: 22px;
}

.dashboard-ready-badge {
  padding: 6px 11px;
  font-size: 12px;
}

.dashboard-store-copy a,
.dashboard-store-copy small {
  font-size: 13px;
}

.dashboard-store-copy a {
  margin-top: 9px;
}

.dashboard-store-copy small {
  margin-top: 8px;
}

.dashboard-store-actions {
  gap: 10px;
}

.dashboard-v2 .dashboard-store-actions .btn {
  min-height: 46px;
  padding: 0 17px;
  border-radius: 12px;
  font-size: 14px;
}

.dashboard-search-toolbar {
  min-height: 70px;
  padding: 10px;
  grid-template-columns: minmax(260px, 1fr) 176px auto auto;
  gap: 10px;
  border-radius: 16px;
}

.dashboard-search-field svg {
  left: 16px;
  width: 19px;
  height: 19px;
}

.dashboard-search-field input,
.dashboard-search-toolbar select {
  height: 48px;
  border-radius: 12px;
}

.dashboard-search-field input {
  padding-left: 46px;
  font-size: 14px;
}

.dashboard-search-toolbar select {
  padding-left: 14px;
  font-size: 14px;
}

.dashboard-filter-submit,
.dashboard-filter-clear {
  min-height: 48px;
  border-radius: 12px;
  font-size: 14px;
}

.dashboard-filter-submit {
  padding: 0 18px;
}

.dashboard-filter-clear {
  width: 48px;
  font-size: 20px;
}

.dashboard-orders-panel {
  border-radius: 18px;
}

.dashboard-orders-heading {
  min-height: 78px;
  padding: 16px 20px;
}

.dashboard-orders-heading h2 {
  font-size: 20px;
}

.dashboard-orders-heading p {
  margin-top: 5px;
  font-size: 12px;
}

.dashboard-orders-heading > a {
  font-size: 14px;
}

.dashboard-orders-heading > a span {
  font-size: 20px;
}

.dashboard-orders-table th {
  padding: 13px 14px;
  font-size: 12px;
}

.dashboard-orders-table td {
  height: 68px;
  padding: 10px 14px;
  font-size: 14px;
}

.dashboard-order-ref {
  gap: 5px;
}

.dashboard-order-ref strong {
  font-size: 13px;
}

.dashboard-order-ref span {
  font-size: 12px;
}

.dashboard-customer-cell {
  gap: 10px;
}

.dashboard-customer-cell > span {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.dashboard-customer-cell strong {
  font-size: 14px;
}

.dashboard-customer-cell small {
  margin-top: 4px;
  padding: 3px 6px;
  font-size: 10px;
}

.dashboard-phone-link {
  gap: 7px;
  font-size: 14px;
}

.dashboard-phone-link svg {
  width: 15px;
  height: 15px;
}

.dashboard-status {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

.dashboard-row-actions {
  gap: 7px;
}

.dashboard-row-actions a,
.dashboard-row-actions button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.dashboard-row-actions svg {
  width: 17px;
  height: 17px;
}

.dashboard-table-footer {
  min-height: 58px;
  padding: 12px 20px;
  font-size: 12px;
}

.dashboard-table-footer button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 14px;
}

.dashboard-rail-card {
  padding: 20px;
  border-radius: 18px;
}

.dashboard-rail-title {
  gap: 12px;
  margin-bottom: 20px;
}

.dashboard-rail-title > span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.dashboard-rail-title svg {
  width: 20px;
  height: 20px;
}

.dashboard-rail-title small {
  font-size: 10px;
}

.dashboard-rail-title h2 {
  margin-top: 4px;
  font-size: 18px;
}

.dashboard-webhook-field {
  margin-top: 16px;
}

.dashboard-webhook-field > span {
  margin-bottom: 8px;
  font-size: 12px;
}

.dashboard-webhook-field input {
  height: 48px;
  padding: 9px 48px 9px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.dashboard-webhook-field button {
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.dashboard-webhook-field button svg {
  width: 17px;
  height: 17px;
}

.dashboard-integration-list {
  gap: 14px;
}

.dashboard-integration-list label {
  gap: 7px;
}

.dashboard-integration-list label > span:first-child {
  font-size: 12px;
}

.dashboard-integration-list strong,
.dashboard-masked-token {
  min-height: 46px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 13px;
}

.dashboard-manage-link {
  min-height: 46px;
  margin-top: 18px;
  border-radius: 12px;
  font-size: 14px;
}

.dashboard-manage-link svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 1350px) {
  .dashboard-v2 .saas-layout { grid-template-columns: 236px minmax(0, 1fr); }
  .dashboard-v2 .dashboard-sidebar { width: 236px; }
  .dashboard-v2 .dashboard-content { padding: 28px 24px 44px; }
  .dashboard-body-grid { grid-template-columns: minmax(0, 1fr) 310px; }
  .dashboard-orders-table th:nth-child(5),
  .dashboard-orders-table td:nth-child(5) { display: none; }
}

@media (max-width: 1100px) {
  .dashboard-body-grid { grid-template-columns: 1fr; }
  .dashboard-right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .dashboard-v2 .dashboard-content { padding: 18px 16px 108px; }
  .dashboard-v2 .dashboard-header h1 { font-size: 32px; }
  .dashboard-v2 .dashboard-header .page-subtitle { font-size: 14px; }
  .dashboard-greeting { font-size: 13px; }
  .dashboard-stat { min-height: 138px; padding: 16px; }
  .dashboard-stat-icon { width: 44px; height: 44px; }
  .dashboard-stat-top div > span { font-size: 12px; }
  .dashboard-stat-top strong { font-size: 28px; }
  .dashboard-stat-bottom small { font-size: 12px; }
  .dashboard-store-card { min-height: 0; padding: 18px; }
  .dashboard-store-copy h2 { font-size: 20px; }
  .dashboard-store-copy a, .dashboard-store-copy small { font-size: 12px; }
  .dashboard-v2 .dashboard-store-actions .btn { min-height: 44px; font-size: 13px; }
  .dashboard-search-toolbar { min-height: 0; }
  .dashboard-mobile-order { padding: 16px; }
  .dashboard-mobile-order-head button strong { font-size: 14px; }
  .dashboard-mobile-order-head button span { font-size: 12px; }
  .dashboard-mobile-client { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
  .dashboard-mobile-client > span { width: 44px; height: 44px; font-size: 12px; }
  .dashboard-mobile-client div strong, .dashboard-mobile-client > strong { font-size: 14px; }
  .dashboard-mobile-client div a, .dashboard-mobile-meta { font-size: 12px; }
  .dashboard-mobile-actions a, .dashboard-mobile-actions button { min-height: 44px; font-size: 12px; }
  .dashboard-bottom-nav { min-height: 72px; }
  .dashboard-bottom-nav a { font-size: 10px; }
}

@media (max-width: 560px) {
  .dashboard-v2 .dashboard-header h1 { font-size: 30px; }
  .dashboard-stats { gap: 12px; }
  .dashboard-stat { min-height: 132px; padding: 14px; }
  .dashboard-stat-top { gap: 10px; }
  .dashboard-stat-icon { width: 40px; height: 40px; }
  .dashboard-stat-icon svg { width: 20px; height: 20px; }
  .dashboard-stat-top div > span { font-size: 12px; line-height: 1.2; }
  .dashboard-stat-top strong { font-size: 25px; }
  .dashboard-stat-bottom small { font-size: 11px; }
  .dashboard-sparkline { width: 60px; height: 22px; }
  .dashboard-store-row { grid-template-columns: 50px minmax(0, 1fr); }
  .dashboard-store-icon { width: 50px; height: 50px; }
  .dashboard-store-copy h2 { font-size: 18px; }
  .dashboard-ready-badge { font-size: 11px; }
  .dashboard-right-rail { grid-template-columns: 1fr; }
  .dashboard-rail-card { padding: 18px; }
}

/* COD operations workflow: surface real next actions without changing server behavior. */
.dashboard-action-stats .dashboard-stat {
  position: relative;
  overflow: hidden;
}

.dashboard-action-stats .dashboard-stat:first-child {
  border-color: rgba(245, 158, 11, 0.23);
  box-shadow: 0 14px 34px rgba(245, 158, 11, 0.1);
}

.dashboard-stat-suffix {
  margin-left: 4px;
  color: currentColor;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dashboard-ops-alert {
  min-height: 76px;
  margin: -4px 0 2px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #8f1f1f;
  border: 1px solid #fecaca;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff7f7, #fff1f1);
  box-shadow: var(--dash-shadow);
}

.dashboard-ops-alert-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 11px;
  background: #ef4444;
  font-size: 19px;
  font-weight: 800;
}

.dashboard-ops-alert div {
  min-width: 0;
}

.dashboard-ops-alert strong,
.dashboard-ops-alert p {
  display: block;
  margin: 0;
}

.dashboard-ops-alert strong {
  font-size: 14px;
}

.dashboard-ops-alert p {
  margin-top: 3px;
  color: #9b5b5b;
  font-size: 12px;
}

.dashboard-ops-alert-copy {
  flex: 1 1 auto;
}

.dashboard-ops-alert-copy small {
  display: block;
  margin-top: 5px;
  color: #a15c5c;
  font-size: 11px;
}

.dashboard-ops-alert-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.dashboard-ops-alert-actions button {
  min-height: 38px;
  padding: 8px 11px;
  color: #b42318;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.dashboard-ops-alert-actions .dashboard-alert-retry {
  color: #fff;
  border-color: #dc2626;
  background: #dc2626;
}

.dashboard-ops-alert-actions .dashboard-alert-dismiss {
  width: 38px;
  padding: 0;
  color: #8f1f1f;
  font-size: 21px;
  font-weight: 500;
}

.dashboard-error-list {
  display: grid;
  gap: 7px;
  margin: -8px 0 10px;
  padding: 10px 14px;
  border: 1px solid #fee2e2;
  border-radius: 13px;
  background: #fffafa;
}

.dashboard-error-list button {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  color: #7f1d1d;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.dashboard-error-list button:hover,
.dashboard-error-list button:focus-visible {
  background: #fef2f2;
  outline: none;
}

.dashboard-error-list span {
  color: #a15c5c;
  font-size: 12px;
}

.details-inline-error.is-focused {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
}

.details-inline-error > * {
  display: block;
}

.details-inline-error > strong {
  margin-bottom: 4px;
}

.details-inline-error > small {
  margin-top: 7px;
  color: #7f1d1d;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.dashboard-queue-kicker {
  display: block;
  margin-bottom: 5px;
  color: #1555df;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dashboard-confirmation-queue .dashboard-orders-table th:nth-child(1) { width: 17%; }
.dashboard-confirmation-queue .dashboard-orders-table th:nth-child(2) { width: 19%; }
.dashboard-confirmation-queue .dashboard-orders-table th:nth-child(3) { width: 16%; }
.dashboard-confirmation-queue .dashboard-orders-table th:nth-child(4) { width: 12%; }
.dashboard-confirmation-queue .dashboard-orders-table th:nth-child(5) { width: 13%; }
.dashboard-confirmation-queue .dashboard-orders-table th:nth-child(6) { width: 12%; }
.dashboard-confirmation-queue .dashboard-orders-table th:nth-child(7) { width: 184px; }
.dashboard-confirmation-queue .dashboard-orders-table tbody td:last-child { display: none; }

.dashboard-confirmation-queue .dashboard-primary-actions {
  overflow: visible;
}

.dashboard-confirm-actions {
  gap: 7px;
}

.dashboard-confirm-actions a,
.dashboard-confirm-actions .dashboard-confirm-now,
.dashboard-confirm-actions .dashboard-more-action {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-confirm-actions a {
  color: #174fc9;
  background: #f4f8ff;
  border-color: #dce7fb;
}

.dashboard-confirm-actions form {
  margin: 0;
}

.dashboard-confirm-actions .dashboard-confirm-now {
  color: #138141;
  border: 1px solid #bdeacb;
  background: linear-gradient(145deg, #f2fff7, #e4f9ec);
  box-shadow: none;
  cursor: pointer;
}

.dashboard-confirm-actions svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.dashboard-confirm-actions .dashboard-more-action {
  color: #4d6388;
  letter-spacing: 0;
}

.dashboard-confirm-actions .dashboard-more-action svg {
  width: 17px;
  height: 17px;
}

.dashboard-order-ref {
  width: 100%;
  min-width: 0;
}

.dashboard-order-ref strong,
.dashboard-order-ref span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-confirmation-queue .dashboard-orders-table th:first-child,
.dashboard-confirmation-queue .dashboard-orders-table td:first-child {
  padding-left: 16px;
  text-align: left;
  vertical-align: middle;
}

/* Statistics-only dashboard overview. */
.overview-page .dashboard-content {
  max-width: 1480px;
}

.overview-page .overview-header {
  margin-bottom: 30px;
}

.overview-page .dashboard-header h1 {
  font-size: clamp(38px, 3vw, 44px);
}

.overview-page .page-subtitle {
  max-width: 720px;
}

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

.overview-stat-card {
  min-height: 138px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.overview-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}

.overview-stat-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.overview-stat-icon svg {
  width: 26px;
  height: 26px;
}

.overview-stat-blue .overview-stat-icon { color: #2554ff; background: #eaf1ff; }
.overview-stat-green .overview-stat-icon { color: #16a34a; background: #e9f9ef; }
.overview-stat-orange .overview-stat-icon { color: #ed7b17; background: #fff0e1; }
.overview-stat-purple .overview-stat-icon { color: #5b54ee; background: #eeedff; }

.overview-stat-card h2,
.overview-stat-card strong,
.overview-stat-card p {
  margin: 0;
}

.overview-stat-card h2 {
  color: #0b255d;
  font-size: 16px;
  font-weight: 700;
}

.overview-stat-card strong {
  display: block;
  margin-top: 7px;
  color: #071e56;
  font-size: clamp(27px, 2vw, 33px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.overview-stat-card strong small {
  color: #17376f;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.overview-stat-card p {
  margin-top: 9px;
  color: #627594;
  font-size: 13px;
}

.overview-chart-card {
  margin-top: 18px;
  padding: 20px 24px 18px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.overview-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.overview-chart-head h2 {
  margin: 0;
  color: #0b255d;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.overview-chart-legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: #5d7192;
  font-size: 14px;
}

.overview-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.overview-chart-legend i {
  display: inline-block;
}

.overview-legend-bar {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #1759ed;
}

.overview-legend-line {
  position: relative;
  width: 20px;
  height: 2px;
  background: #719bff;
}

.overview-legend-line::after {
  position: absolute;
  top: -3px;
  left: 8px;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 999px;
  background: #719bff;
}

.overview-chart-toggle {
  padding: 3px;
  display: inline-flex;
  gap: 4px;
  border-radius: 10px;
  background: #f4f6fb;
}

.overview-chart-toggle button {
  min-width: 42px;
  min-height: 32px;
  padding: 0 8px;
  color: #587092;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.overview-chart-toggle button.is-active {
  color: #1555df;
  border-color: #a9c2ff;
  background: #fff;
  box-shadow: 0 3px 10px rgba(22, 75, 182, 0.08);
}

.overview-chart-wrap {
  width: min(100%, 1240px);
  margin: 8px auto 0;
  padding: 8px 12px 0;
  border: 1px solid #f0f4fa;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #fff 74%);
}

.overview-chart-axis {
  margin: 0 2px 2px;
  display: flex;
  justify-content: space-between;
  color: #3c5788;
  font-size: 13px;
}

.overview-chart {
  width: 100%;
  height: 302px;
  min-height: 0;
  overflow: visible;
}

.overview-grid-line {
  stroke: #edf2fa;
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.overview-axis-line {
  stroke: #dce6f4;
  stroke-width: 1;
}

.overview-chart-bar { fill: url(#ordersGradient); filter: drop-shadow(0 5px 7px rgba(23, 89, 237, 0.16)); }
.overview-chart-line { fill: none; stroke: #5f8dff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(72, 126, 246, .14)); }
.overview-chart-dot { fill: #fff; stroke: #5d8cff; stroke-width: 2.2; }
.overview-chart-value { fill: #0f398d; font-family: Inter, sans-serif; font-size: 13px; font-weight: 850; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.overview-chart-revenue { fill: #2c61cb; font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.overview-chart-label { fill: #597092; font-family: Inter, sans-serif; font-size: 13px; text-anchor: middle; }
.overview-chart-axis-label { fill: #6b7e9e; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; }
.overview-chart-axis-label.is-left { text-anchor: end; }
.overview-chart-axis-label.is-right { text-anchor: start; }

@media (max-width: 1180px) {
  .overview-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .overview-stat-grid { gap: 12px; }
  .overview-stat-card { min-height: 142px; padding: 18px; grid-template-columns: 52px minmax(0, 1fr); gap: 13px; }
  .overview-stat-icon { width: 52px; height: 52px; }
  .overview-stat-icon svg { width: 25px; height: 25px; }
  .overview-stat-card h2 { font-size: 14px; }
  .overview-stat-card strong { font-size: 28px; }
  .overview-stat-card p { margin-top: 10px; font-size: 12px; }
  .overview-chart-card { margin-top: 16px; padding: 16px; }
  .overview-chart-head { align-items: flex-start; flex-wrap: wrap; }
  .overview-chart-head h2 { font-size: 20px; }
  .overview-chart-legend { width: 100%; margin-top: 10px; gap: 12px; }
  .overview-chart-wrap { max-width: 100%; min-height: 250px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .overview-chart-wrap { width: 100%; padding: 6px 4px 0; }
  .overview-chart { min-width: 560px; height: 250px; min-height: 250px; }
  .overview-chart-value { font-size: 13px; }
  .overview-chart-revenue { font-size: 12px; }
  .overview-chart-label { font-size: 13px; }
  .overview-chart-axis-label { font-size: 12px; }
  .overview-grid-line.is-mobile-optional,
  .overview-chart-axis-label.is-mobile-optional { display: none; }
}

@media (max-width: 560px) {
  .overview-stat-grid { grid-template-columns: 1fr; }
  .overview-stat-card { min-height: 126px; }
  .overview-chart-head { align-items: flex-start; flex-direction: row; }
  .overview-chart-toggle { margin-left: auto; align-self: flex-start; }
  .overview-chart-legend { gap: 10px; font-size: 12px; }
}

@media (max-width: 360px) {
  .overview-chart-card { padding: 14px; }
  .overview-chart-head { flex-direction: column; }
  .overview-chart-toggle { margin-left: 0; }
  .overview-chart-wrap { min-height: 250px; }
}

@media (max-width: 1020px) {
  .unified-shell .dashboard-sidebar {
    position: static;
    width: auto;
    min-height: auto;
    transform: none !important;
    box-shadow: none;
  }

  .unified-shell .dashboard-sidebar-close {
    display: none;
  }
}

/* Lightweight chart interaction: keep the data readable without changing the chart layout. */
.overview-chart-wrap {
  position: relative;
}

.overview-chart-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 180px;
  padding: 12px 14px;
  pointer-events: none;
  transform: translate(-50%, -100%) translateY(8px) scale(.96);
  opacity: 0;
  border: 1px solid #e1e9f6;
  border-radius: 10px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 28px rgba(21, 55, 111, .14);
  color: #36517f;
  font-family: Inter, sans-serif;
  font-size: 12px;
  transition: opacity .18s ease, transform .18s ease;
}

.overview-chart-tooltip[hidden] {
  display: block;
  visibility: hidden;
}

.overview-chart-tooltip.is-visible {
  transform: translate(-50%, -100%) translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

.overview-chart-tooltip strong {
  display: block;
  margin-bottom: 8px;
  color: #122d66;
  font-size: 12px;
}

.overview-chart-tooltip span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  white-space: nowrap;
}

.overview-chart-tooltip b {
  color: #173c88;
  font-weight: 800;
}

.overview-tooltip-square {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #1f61ef;
}

.overview-tooltip-dot {
  width: 8px;
  height: 8px;
  border: 2px solid #6e99ff;
  border-radius: 50%;
  background: #fff;
}

.overview-chart-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: overview-chart-rise .55s cubic-bezier(.2, .75, .25, 1) both;
  transition: filter .18s ease, opacity .18s ease;
  cursor: pointer;
}

.overview-chart-bar:hover {
  filter: drop-shadow(0 8px 12px rgba(23, 89, 237, .28));
  opacity: .92;
}

.overview-chart-line {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: overview-chart-draw .9s ease-out .12s forwards;
}

.overview-chart-dot {
  transition: r .18s ease, stroke-width .18s ease;
  cursor: pointer;
}

.overview-chart-dot:hover {
  r: 6;
  stroke-width: 3.4;
}

@keyframes overview-chart-rise {
  from { opacity: 0; transform: scaleY(.08); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes overview-chart-draw {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 820px) {
  .overview-chart-tooltip {
    min-width: 168px;
    padding: 10px 12px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-chart-bar,
  .overview-chart-line,
  .overview-chart-tooltip {
    animation: none;
    transition: none;
  }
}

.dashboard-mobile-primary-actions {
  display: none;
}

/* Keep store actions visually paired instead of looking like two unrelated controls. */
.dashboard-v2 .dashboard-store-actions {
  min-width: 0;
  width: min(100%, 370px);
  justify-self: end;
  padding: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  border: 1px solid #e0e8f5;
  border-radius: 14px;
  background: #f4f7fc;
}

.dashboard-v2 .dashboard-store-actions .btn {
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-v2 .dashboard-store-actions .btn-secondary {
  color: #174fc9;
  border-color: transparent;
  background: #fff;
}

.dashboard-v2 .dashboard-store-actions .btn-primary {
  background: linear-gradient(135deg, #2665ee, #1644be);
  box-shadow: 0 8px 16px rgba(26, 76, 203, 0.2);
}

.dashboard-v2 .dashboard-details-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #f7f9fc;
}

.dashboard-v2 .dashboard-details-panel .details-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 24px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e5ebf5;
  backdrop-filter: blur(14px);
}

.dashboard-v2 .dashboard-details-panel > :not(.details-panel-head) {
  margin-right: 24px;
  margin-left: 24px;
}

.dashboard-v2 .dashboard-details-panel .details-status-row {
  margin-top: 18px;
}

.dashboard-v2 .dashboard-details-panel .details-card,
.dashboard-v2 .dashboard-details-panel .details-group {
  border: 1px solid #e1e8f3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
}

.dashboard-v2 .dashboard-details-panel .details-links {
  order: 5;
  margin-top: 16px;
}

.dashboard-v2 .dashboard-details-panel .details-action-groups {
  position: sticky;
  bottom: 0;
  z-index: 2;
  order: 6;
  margin-top: 16px;
  margin-bottom: 0;
  padding: 16px 24px 24px;
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.84), #f7f9fc 24%);
  box-shadow: 0 -12px 22px rgba(15, 23, 42, 0.04);
}

.dashboard-v2 .dashboard-details-panel .details-action-groups .details-group {
  padding: 14px;
}

.dashboard-v2 .dashboard-details-panel .details-action-groups .btn {
  min-height: 46px;
  font-size: 14px;
}

.dashboard-v2 .dashboard-details-panel .details-edit-form {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dce7f8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.dashboard-v2 .dashboard-details-panel .details-edit-heading {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.details-edit-heading strong { display: block; color: #102b62; font-size: 16px; }
.details-edit-heading span { display: block; margin-top: 4px; color: #6d7f9d; font-size: 12px; line-height: 1.4; }
.details-edit-heading button { width: 32px; height: 32px; padding: 0; color: #244776; border: 1px solid #dbe5f4; border-radius: 9px; background: #f8fbff; font-size: 23px; line-height: 1; }
.details-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.details-edit-grid label { min-width: 0; display: grid; gap: 6px; }
.details-edit-grid label.full { grid-column: 1 / -1; }
.details-edit-grid label > span { color: #31517f; font-size: 12px; font-weight: 750; }
.details-edit-grid input, .details-edit-grid textarea { width: 100%; min-width: 0; border: 1px solid #d9e4f3; border-radius: 10px; background: #fbfdff; color: #102b62; font: inherit; font-size: 13px; }
.details-edit-grid input { min-height: 42px; padding: 0 11px; }
.details-edit-grid textarea { padding: 10px 11px; resize: vertical; }
.details-edit-grid input:focus, .details-edit-grid textarea:focus { outline: 0; border-color: #2865e6; box-shadow: 0 0 0 3px rgba(40, 101, 230, .12); }
.details-edit-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; }
.details-edit-actions .btn { min-height: 42px; }
.dashboard-v2 .dashboard-details-panel.is-editing .details-status-row,
.dashboard-v2 .dashboard-details-panel.is-editing .details-section-grid,
.dashboard-v2 .dashboard-details-panel.is-editing .details-links,
.dashboard-v2 .dashboard-details-panel.is-editing .details-action-groups,
.dashboard-v2 .dashboard-details-panel.is-editing .details-inline-error { display: none; }

@media (max-width: 560px) {
  .dashboard-v2 .dashboard-details-panel .details-edit-form { padding: 14px; }
  .details-edit-grid { grid-template-columns: 1fr; gap: 10px; }
  .details-edit-grid label.full { grid-column: auto; }
  .details-edit-actions { display: grid; grid-template-columns: 1fr; }
  .details-edit-actions .btn { width: 100%; }
}

.team-page .content-shell { max-width: 1280px; }
.team-create-card { padding: 24px; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 28px; }
.team-create-card h2, .team-list-heading h2, .team-agent-card h2 { margin: 0; color: #102b62; font-size: 19px; }
.team-create-card p, .team-list-heading p, .team-agent-head p { margin: 7px 0 0; color: #71819e; font-size: 13px; }
.team-create-form, .team-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.team-create-form label, .team-edit-form label, .team-password-form label { display: grid; gap: 6px; color: #31517f; font-size: 12px; font-weight: 750; }
.team-create-form input, .team-edit-form input, .team-password-form input { min-height: 42px; padding: 0 11px; border: 1px solid #d9e4f3; border-radius: 10px; background: #fbfdff; color: #102b62; font: inherit; }
.team-create-form .btn { min-height: 42px; }
.team-list { margin-top: 24px; display: grid; gap: 14px; }
.team-list-heading { display: flex; justify-content: space-between; align-items: end; }
.team-empty { padding: 28px; display: grid; gap: 8px; color: #6e7e99; }
.team-empty strong { color: #112e65; }
.team-agent-card { padding: 20px; }
.team-agent-head { display: flex; align-items: center; gap: 13px; }
.team-agent-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; color: #1553d7; border-radius: 14px; background: #eaf1ff; font-size: 15px; font-weight: 800; }
.team-account-status { margin-left: auto; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.team-account-status.is-active, .team-presence.is-active { color: #138148; background: #e4f8ec; }.team-account-status.is-disabled, .team-presence.is-disabled { color: #b45309; background: #fff3de; }
.team-presence { margin-left: 7px; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 750; }
.team-metrics { margin-top: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #e2eaf5; border-radius: 14px; overflow: hidden; }
.team-metrics span { min-height: 66px; padding: 11px; display: grid; align-content: center; gap: 4px; color: #75839d; border-right: 1px solid #e2eaf5; font-size: 11px; }.team-metrics span:last-child { border: 0; }.team-metrics strong { color: #102b62; font-size: 19px; }
.team-agent-details { margin-top: 14px; }.team-agent-details summary { padding: 11px 2px; display: flex; justify-content: space-between; color: #1455d4; cursor: pointer; font-size: 13px; font-weight: 800; }.team-agent-details summary span { font-size: 23px; line-height: 12px; }
.team-agent-manage { padding: 16px; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; border-top: 1px solid #e5edf7; border-bottom: 1px solid #e5edf7; }.team-password-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }.team-agent-manage > form > .btn { min-height: 42px; }
.team-activity { margin-top: 14px; display: grid; gap: 5px; color: #6f7e96; font-size: 12px; }.team-activity strong { color: #28466f; }.team-activity ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
@media (max-width: 900px) { .team-create-card { grid-template-columns: 1fr; }.team-metrics { grid-template-columns: repeat(3, 1fr); }.team-agent-manage { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .team-create-card,.team-agent-card { padding: 16px; }.team-create-form,.team-edit-form,.team-password-form { grid-template-columns: 1fr; }.team-metrics { grid-template-columns: repeat(2, 1fr); }.team-metrics span:nth-child(2n) { border-right: 0; }.team-metrics span:last-child { border-top: 1px solid #e2eaf5; }.team-account-status { font-size: 10px; }.team-agent-head { align-items: flex-start; } }

.is-order-agent .dashboard-action-stats,
.is-order-agent .dashboard-store-card,
.is-order-agent .dashboard-right-rail,
.is-order-agent [data-open-add-order],
.is-order-agent .js-delete-order,
.is-order-agent #deleteFromDetails,
.is-order-agent .dashboard-ops-alert { display: none !important; }
.is-order-agent .dashboard-body-grid { grid-template-columns: minmax(0, 1fr); }
.is-order-agent .dashboard-bottom-nav { display: none; }
.is-order-agent .account-menu-popover > :not(:last-child) { display: none; }
.is-order-agent .account-menu-popover { width: 270px !important; }
.account-menu.is-agent .account-menu-popover > :not(:last-child) { display: none; }
.sidebar-agent-logout { width: 100%; min-height: 44px; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.1); font: inherit; font-size: 13px; font-weight: 750; }
.admin-page{min-height:100vh;background:#f5f8fd;color:#102b62}.admin-shell{width:min(1440px,calc(100% - 44px));margin:0 auto;padding:32px 0 60px}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.admin-header h1{margin:4px 0 0;font-size:32px}.admin-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}.admin-tabs a{padding:11px 15px;border-radius:11px;color:#446187;background:#eaf1fb;font-weight:750}.admin-tabs a.active{color:#fff;background:#1c59dc}.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.admin-grid article,.admin-table,.admin-search{padding:20px;border:1px solid #dfe8f5;border-radius:18px;background:#fff;box-shadow:0 8px 25px rgba(15,23,42,.04)}.admin-grid span,.admin-grid small,.admin-table small{display:block;color:#72819b;font-size:12px}.admin-grid strong{display:block;margin:10px 0;color:#102b62;font-size:32px}.admin-search{display:flex;gap:10px;margin-bottom:16px}.admin-search input,.admin-table input,.admin-table select{min-height:38px;padding:0 10px;border:1px solid #d9e4f3;border-radius:9px;font:inherit}.admin-search input{flex:1}.admin-table{overflow:auto}.admin-table h2{margin:0 0 14px}.admin-table table{width:100%;border-collapse:collapse;font-size:13px}.admin-table th,.admin-table td{padding:12px 8px;border-bottom:1px solid #e8eef7;text-align:left;vertical-align:top}.admin-table form{display:inline-flex;gap:6px;margin:0 6px 6px 0;align-items:center}.admin-table .btn{min-height:38px;font-size:12px}@media(max-width:760px){.admin-shell{width:calc(100% - 28px);padding-top:20px}.admin-grid{grid-template-columns:1fr 1fr}.admin-header h1{font-size:26px}.admin-table table{min-width:720px}}

@media (max-width: 820px) {
  .dashboard-ops-alert {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dashboard-ops-alert-actions {
    width: 100%;
    margin-left: 47px;
    justify-content: stretch;
  }

  .dashboard-ops-alert-actions button {
    flex: 1 1 auto;
  }

  .dashboard-confirmation-queue .dashboard-orders-table tbody td:last-child { display: table-cell; }
  .dashboard-confirmation-queue .dashboard-primary-actions { display: none; }
  .dashboard-mobile-actions { display: none !important; }

  .dashboard-v2 .dashboard-store-actions {
    min-width: 0;
    width: 100%;
    justify-self: stretch;
  }

  .dashboard-mobile-primary-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
  }

  .dashboard-mobile-primary-actions a,
  .dashboard-mobile-primary-actions form,
  .dashboard-mobile-primary-actions button {
    min-width: 0;
    flex: 1;
  }

  .dashboard-mobile-primary-actions a,
  .dashboard-mobile-primary-actions .dashboard-confirm-now,
  .dashboard-mobile-primary-actions > button {
    min-height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
  }

  .dashboard-mobile-primary-actions a,
  .dashboard-mobile-primary-actions > button {
    color: #174fc9;
    border: 1px solid #dbe5f6;
    background: #f7faff;
  }

  .dashboard-mobile-primary-actions .dashboard-confirm-now {
    width: 100%;
    color: #fff;
    border: 1px solid #1654d9;
    background: linear-gradient(145deg, #2a6cff, #1246c7);
  }

  .dashboard-v2 .dashboard-details-panel .details-panel-head {
    padding: 20px;
  }

  .dashboard-v2 .dashboard-details-panel > :not(.details-panel-head) {
    margin-right: 16px;
    margin-left: 16px;
  }

  .dashboard-v2 .dashboard-details-panel .details-action-groups {
    padding: 12px 16px 18px;
  }
}

/* Focused Shopify and delivery integration pages. */
.sidebar-integration-menu {
  margin: 0;
}

.sidebar-integration-menu summary {
  list-style: none;
  cursor: pointer;
}

.sidebar-integration-menu summary::-webkit-details-marker {
  display: none;
}

.sidebar-menu-chevron {
  margin-left: auto;
  font-size: 16px;
  transition: transform 160ms ease;
}

.sidebar-integration-menu[open] .sidebar-menu-chevron {
  transform: rotate(180deg);
}

.sidebar-subnav {
  margin: 5px 0 5px 47px;
  display: grid;
  gap: 3px;
}

.sidebar-subnav a {
  min-height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
}

.sidebar-subnav a:hover,
.sidebar-subnav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.integrations-overview-page .content-shell,
.integration-focused-page .content-shell {
  max-width: 1480px;
}

.integrations-overview-grid {
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.integration-overview-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  border: 1px solid #dfe7f3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.integration-overview-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #1755dc;
  border-radius: 13px;
  background: #eaf1ff;
  font-size: 18px;
  font-weight: 850;
}

.integration-overview-icon.tone-shopify {
  color: #168447;
  background: #eaf8ef;
}

.integration-overview-card h2,
.integration-overview-card p {
  margin: 0;
}

.integration-overview-card h2 {
  margin-top: 3px;
  color: #0b255d;
  font-size: 21px;
}

.integration-overview-card p {
  margin-top: 7px;
  overflow: hidden;
  color: #647795;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-overview-status {
  min-height: 27px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.integration-overview-status.is-ready {
  color: #10733d;
  background: #dcfce7;
}

.integration-overview-status.is-pending {
  color: #b45309;
  background: #ffedd5;
}

.integration-overview-summary {
  grid-column: 1 / -1;
  padding: 12px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  border-top: 1px solid #edf1f7;
  border-bottom: 1px solid #edf1f7;
  color: #687b99;
  font-size: 13px;
}

.integration-overview-summary strong {
  overflow: hidden;
  color: #183363;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-overview-card .btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
}

.focused-integration-form {
  max-width: 920px;
  display: grid;
  gap: 18px;
}

.focused-integration-card {
  padding: 22px;
  border: 1px solid #dfe7f3;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.focused-integration-card h2 {
  margin: 0 0 16px;
  color: #0b255d;
  font-size: 21px;
}

.focused-integration-card label > span {
  display: block;
  margin-bottom: 7px;
  color: #21376f;
  font-size: 14px;
  font-weight: 700;
}

.focused-integration-card input,
.focused-integration-card select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  overflow: hidden;
  border-radius: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focused-integration-card .checkbox-field {
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.focused-integration-card .checkbox-field input {
  width: 18px;
  min-width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1755dc;
}

.focused-integration-card .checkbox-field > span {
  margin: 0;
  color: #21376f;
  font-size: 14px;
  font-weight: 700;
}

.focused-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.focused-copy-field {
  position: relative;
}

.focused-copy-field input {
  padding-right: 82px;
}

.focused-copy-field button {
  position: absolute;
  top: 5px;
  right: 5px;
  min-height: 36px;
  padding: 0 10px;
  color: #174fc9;
  border: 1px solid #dbe5f6;
  border-radius: 9px;
  background: #f7faff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.focused-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.focused-checklist span {
  min-height: 32px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  color: #986006;
  border-radius: 999px;
  background: #ffedd5;
  font-size: 12px;
  font-weight: 750;
}

.focused-checklist span.is-ready {
  color: #10733d;
  background: #dcfce7;
}

.delivery-provider-tabs {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-provider-tabs button {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #315083;
  border: 1px solid #dbe5f6;
  border-radius: 10px;
  background: #f7faff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.delivery-provider-tabs button.is-active {
  color: #fff;
  border-color: #1755dc;
  background: #1755dc;
}

.delivery-provider-tabs button img {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.landing-brand {
  min-width: 156px;
  font-size: 0;
}

.landing-brand::before {
  width: 32px;
  height: 32px;
  display: block;
  content: "";
  border-radius: 9px;
  background: url("/public/assets/logos/integriha-icon.png") center / cover no-repeat;
}
.landing-brand::after { content: "Integriha"; color: #0a1f55; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 800; }
.landing-nav nav a:nth-child(3), .landing-nav nav a:nth-child(4) { display: none; }
.landing-nav-actions::before { content: "50 premières commandes gratuites"; color: #1461e8; font-size: 12px; font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) { .landing-nav-actions::before { display: none; } .landing-brand::after { font-size: 17px; } }

/* The homepage uses the official Integriha mark; hide the legacy text icon. */
.landing-brand > span { display: none !important; }

/* The signup label is double-escaped in the legacy landing template. */
.landing-nav-actions > a[href="/signup"].landing-button.small {
  font-size: 0;
  white-space: nowrap;
}
.landing-nav-actions > a[href="/signup"].landing-button.small::after {
  content: "Créer un compte";
  font-size: 13px;
  line-height: 1;
}

.delivery-tracking-capability {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  background: #f7faff;
  color: #17366f;
}
.delivery-tracking-capability.is-supported { border-color: #bdebd0; background: #f0fcf5; color: #16804a; }
.delivery-tracking-capability.is-unavailable { border-color: #f3d4d4; background: #fff7f7; color: #b4232b; }
.delivery-tracking-capability-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: currentColor; color: #fff; }
.delivery-tracking-capability-icon svg { width: 15px; height: 15px; }
.delivery-tracking-capability strong, .delivery-tracking-capability small { display: block; }
.delivery-tracking-capability strong { font-size: 12px; font-weight: 800; }
.delivery-tracking-capability small { margin-top: 2px; color: #5b7198; font-size: 11px; line-height: 1.35; }

.delivery-provider-capabilities {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e7eefb;
}
.delivery-provider-capabilities > div {
  min-height: 34px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: #f8faff;
  color: #294677;
  font-size: 12px;
  font-weight: 700;
}
.delivery-provider-capabilities > div strong { font-size: 11px; font-weight: 800; }
.delivery-feature-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e8eefb; color: #62789e; font-size: 13px; }
.delivery-provider-capabilities .is-supported strong { color: #16804a; }
.delivery-provider-capabilities .is-supported .delivery-feature-icon { background: #dff7e8; color: #16804a; }
.delivery-provider-capabilities .is-unavailable strong { color: #9a6b20; }

/* Integriha public homepage v3. */
.landing-v3 {
  --landing-blue: #1760ed;
  --landing-blue-dark: #0a2c91;
  --landing-ink: #0a1d52;
  --landing-muted: #60739a;
  --landing-border: #dfe8f6;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--landing-ink);
  background: linear-gradient(180deg, #fff 0%, #f7faff 64%, #fff 100%);
  font-family: "DM Sans", sans-serif;
}

.landing-v3 a { text-decoration: none; }
.landing-v3-nav,
.landing-v3-hero,
.landing-v3-trusted,
.landing-v3-features,
.landing-v3-team,
.landing-v3-cta-banner,
.landing-v3-footer { width: min(1320px, calc(100% - 64px)); margin-right: auto; margin-left: auto; }

.landing-v3-nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.landing-v3-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--landing-ink); font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.landing-v3-brand img { width: 34px; height: 34px; display: block; object-fit: cover; border-radius: 10px; }
.landing-v3-nav nav { display: flex; align-items: center; gap: 38px; }
.landing-v3-nav nav a,
.landing-v3-actions > a:first-child { color: #142956; font-size: 13px; font-weight: 700; transition: color 160ms ease; }
.landing-v3-nav nav a:hover,
.landing-v3-actions > a:first-child:hover { color: var(--landing-blue); }
.landing-v3-actions { display: flex; align-items: center; gap: 24px; }

.landing-v3-button { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 10px; font-size: 13px; font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.landing-v3-button b { font-size: 17px; line-height: 1; }
.landing-v3-button:hover { transform: translateY(-2px); }
.landing-v3-button-primary { color: #fff; background: linear-gradient(135deg, #216cf4, #114bcf); box-shadow: 0 12px 24px rgba(24, 86, 216, .2); }
.landing-v3-button-primary:hover { box-shadow: 0 16px 28px rgba(24, 86, 216, .28); }
.landing-v3-button-outline { color: #1654d7; border: 1px solid #cbdcff; background: #fff; box-shadow: 0 5px 14px rgba(34, 73, 139, .05); }
.landing-v3-button-light { color: #1856d9; background: #fff; box-shadow: 0 10px 24px rgba(4, 26, 102, .14); }
.landing-v3-button-ghost { color: #fff; border: 1px solid rgba(255,255,255,.42); background: transparent; }

.landing-v3-hero { min-height: 570px; margin-top: 44px; display: grid; grid-template-columns: minmax(360px, .8fr) minmax(600px, 1.2fr); align-items: center; gap: 58px; }
.landing-v3-hero-copy { padding-bottom: 12px; }
.landing-v3-kicker { min-height: 32px; padding: 0 13px 0 8px; display: inline-flex; align-items: center; gap: 8px; color: #1760e8; border-radius: 999px; background: #edf4ff; font-size: 11px; font-weight: 800; }
.landing-v3-kicker img { width: 20px; height: 20px; object-fit: contain; }
.landing-v3-hero h1 { margin: 25px 0 20px; color: var(--landing-ink); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(44px, 4.1vw, 64px); line-height: 1.08; letter-spacing: -.065em; }
.landing-v3-hero h1 em { color: var(--landing-blue); font-style: normal; }
.landing-v3-hero-copy > p { max-width: 520px; margin: 0; color: var(--landing-muted); font-size: 16px; line-height: 1.7; }
.landing-v3-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.landing-v3-trust-points { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 20px; color: #546b93; font-size: 11px; font-weight: 700; }
.landing-v3-trust-points i { margin-right: 5px; color: var(--landing-blue); font-size: 14px; font-style: normal; }

.landing-v3-preview-wrap { position: relative; min-width: 0; padding: 0 0 36px; }
.landing-v3-preview { min-height: 486px; display: grid; grid-template-columns: 148px minmax(0, 1fr); border: 1px solid #dfe7f3; border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 28px 70px rgba(34, 71, 138, .13); overflow: hidden; }
.landing-preview-sidebar { padding: 22px 12px; display: grid; align-content: start; gap: 7px; border-right: 1px solid #e7edf6; color: #667b9e; font-size: 9px; font-weight: 700; }
.landing-preview-mark { width: 32px; height: 32px; margin: 0 0 12px 8px; border-radius: 9px; overflow: hidden; }
.landing-preview-mark img { width: 100%; height: 100%; object-fit: cover; }
.landing-preview-sidebar span { padding: 9px 8px; border-radius: 7px; white-space: nowrap; }
.landing-preview-sidebar span.is-active { color: #1557d9; background: #edf4ff; }
.landing-preview-main { min-width: 0; padding: 23px 18px 14px; }
.landing-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #122653; font-size: 13px; }
.landing-preview-top > span { padding: 8px 10px; color: #61759a; border: 1px solid #e1e9f5; border-radius: 7px; font-size: 9px; font-weight: 700; }
.landing-preview-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.landing-preview-stats div { padding: 12px 10px; border: 1px solid #e5ebf5; border-radius: 10px; background: #fff; }
.landing-preview-stats small,.landing-preview-stats b,.landing-preview-stats i { display: block; }
.landing-preview-stats small { color: #6d7f9c; font-size: 8px; font-weight: 600; }
.landing-preview-stats b { margin: 7px 0 5px; color: #112b62; font-size: 19px; letter-spacing: -.04em; }
.landing-preview-stats i { color: #0d9d51; font-size: 8px; font-style: normal; font-weight: 800; }
.landing-preview-panels { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(155px, .85fr); gap: 10px; }
.landing-preview-chart,.landing-preview-donut { min-width: 0; padding: 15px; border: 1px solid #e4ebf5; border-radius: 11px; background: #fff; }
.landing-preview-chart > strong,.landing-preview-donut > strong { display: block; color: #193064; font-size: 10px; }
.landing-preview-legend { margin-top: 13px; display: flex; gap: 12px; color: #6d7d99; font-size: 8px; }
.landing-preview-legend i { width: 6px; height: 6px; margin-right: 4px; display: inline-block; border-radius: 50%; }
.landing-preview-legend i.blue { background: #1c63ee; }.landing-preview-legend i.green { background: #19a35d; }
.landing-preview-chart svg { width: 100%; height: 154px; margin-top: 8px; overflow: visible; }
.preview-grid { fill: none; stroke: #edf2f8; stroke-width: 1; }
.preview-line-blue,.preview-line-green { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.preview-line-blue { stroke: #2468ee; }.preview-line-green { stroke: #16a35d; }
.preview-days { display: flex; justify-content: space-between; color: #7a89a4; font-size: 8px; }
.donut-ring { width: 112px; height: 112px; position: relative; margin: 20px auto 12px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#1e61ed 0 42%, #20a766 42% 69%, #f5ac31 69% 88%, #ee6673 88% 100%); }
.donut-ring::before { width: 72px; height: 72px; position: absolute; content: ""; border-radius: 50%; background: #fff; }
.donut-ring span { position: relative; z-index: 1; color: #102b66; font-size: 17px; font-weight: 800; text-align: center; }.donut-ring small { display: block; color: #7a89a4; font-size: 8px; font-weight: 600; }
.landing-preview-donut ul { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; color: #637594; font-size: 8px; }.landing-preview-donut li { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 5px; }.landing-preview-donut li i { width: 6px; height: 6px; border-radius: 50%; }.donut-blue { background: #1e61ed; }.donut-green { background: #20a766; }.donut-orange { background: #f5ac31; }.donut-red { background: #ee6673; }.landing-preview-donut li b { color: #203766; }
.landing-preview-connection { min-height: 42px; margin-top: 10px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 1px solid #e6edf6; border-radius: 9px; color: #7788a3; font-size: 8px; }.landing-preview-connection img { width: 47px; height: 22px; object-fit: contain; }.landing-preview-connection strong { color: #395075; }.landing-preview-connection strong i { width: 5px; height: 5px; margin-left: 3px; display: inline-block; border-radius: 50%; background: #16aa60; }.landing-preview-connection small { margin-left: auto; }
.landing-v3-floating { position: absolute; bottom: 0; min-width: 140px; padding: 11px 14px; display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; border: 1px solid #e1e8f4; border-radius: 13px; background: #fff; box-shadow: 0 16px 30px rgba(29, 62, 126, .14); }.landing-v3-floating img { width: 28px; height: 28px; grid-row: span 2; object-fit: contain; border-radius: 7px; }.landing-v3-floating strong { align-self: end; color: #1a3165; font-size: 11px; }.landing-v3-floating small { color: #159b54; font-size: 9px; }.landing-float-shopify { left: 24px; }.landing-float-delivery { left: 188px; }

.landing-v3-trusted { padding: 38px 0 70px; text-align: center; }.landing-v3-trusted p { margin: 0 0 23px; color: #6e7e9b; font-size: 12px; font-weight: 700; }.landing-v3-trusted > div { display: flex; align-items: center; justify-content: center; gap: clamp(26px, 7vw, 90px); }.landing-v3-trusted img { width: 125px; height: 38px; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter 180ms ease, opacity 180ms ease; }.landing-v3-trusted img:hover { filter: grayscale(0); opacity: 1; }
.landing-v3-features { padding: 0 0 92px; }.landing-v3-section-heading { max-width: 680px; margin: 0 auto 34px; text-align: center; }.landing-v3-section-heading > span,.landing-v3-team > div:first-child > span { color: #1b61e9; font-size: 10px; font-weight: 800; letter-spacing: .14em; }.landing-v3-section-heading h2 { margin: 10px 0 8px; color: var(--landing-ink); font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; letter-spacing: -.045em; }.landing-v3-section-heading p { margin: 0; color: #7182a0; font-size: 14px; line-height: 1.6; }
.landing-v3-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.landing-v3-feature-grid article { min-height: 214px; padding: 26px 24px; border: 1px solid #e0e8f5; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(35, 67, 124, .035); }.feature-icon { width: 44px; height: 44px; margin-bottom: 26px; display: grid; place-items: center; border-radius: 13px; font-size: 20px; }.blue-bg { color: #1760ec; background: #e8f1ff; }.green-bg { color: #159653; background: #e5f8ec; }.purple-bg { color: #714bde; background: #f0eaff; }.landing-v3-feature-grid h3 { margin: 0 0 9px; color: #132b60; font-size: 16px; }.landing-v3-feature-grid p { max-width: 290px; margin: 0; color: #7182a0; font-size: 12px; line-height: 1.7; }

.landing-v3-steps { padding: 74px max(32px, calc((100vw - 1320px) / 2)) 82px; background: #f5f8fe; }.landing-v3-step-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }.landing-v3-step-grid article { position: relative; text-align: center; }.step-number { width: 22px; height: 22px; position: absolute; top: 0; left: calc(50% + 27px); display: grid; place-items: center; color: #fff; border-radius: 50%; background: #1760ed; font-size: 10px; font-weight: 800; }.step-icon { width: 70px; height: 70px; margin: 0 auto 20px; display: grid; place-items: center; border: 7px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(33, 73, 139, .1); }.step-icon img { width: 38px; height: 38px; object-fit: contain; }.step-icon-check,.step-icon-truck { color: #fff; background: #18a460; font-size: 27px; }.step-icon-truck { background: #176ce9; font-size: 24px; }.landing-v3-step-grid h3 { margin: 0 0 8px; color: #132b60; font-size: 14px; }.landing-v3-step-grid p { max-width: 210px; margin: 0 auto; color: #7182a0; font-size: 11px; line-height: 1.65; }

.landing-v3-team { padding: 90px 0; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }.landing-v3-team h2 { margin: 10px 0 12px; color: var(--landing-ink); font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; letter-spacing: -.05em; }.landing-v3-team > div:first-child p { max-width: 430px; margin: 0; color: #7182a0; font-size: 14px; line-height: 1.7; }.landing-v3-team > div:first-child a { margin-top: 20px; display: inline-flex; gap: 10px; color: #1760ed; font-size: 13px; font-weight: 800; }.landing-v3-team-card { padding: 17px 20px; border: 1px solid #e0e8f5; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(35, 67, 124, .06); }.landing-v3-team-card header { padding-bottom: 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f7; color: #1a3165; font-size: 13px; }.landing-v3-team-card header button { padding: 7px 10px; color: #1760ed; border: 1px solid #d8e5fb; border-radius: 7px; background: #f5f8ff; font: inherit; font-size: 10px; font-weight: 800; }.landing-v3-team-card p { min-height: 48px; margin: 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f3f8; color: #263b68; font-size: 12px; }.landing-v3-team-card p:last-child { border-bottom: 0; }.landing-v3-team-card p i { width: 27px; height: 27px; display: grid; place-items: center; color: #2056c9; border-radius: 50%; background: #edf3ff; font-size: 9px; font-style: normal; font-weight: 800; }.landing-v3-team-card p b { padding: 4px 7px; color: #2461df; border-radius: 999px; background: #edf3ff; font-size: 9px; }.landing-v3-team-card p b.green-tag { color: #16814d; background: #e8f8ef; }.landing-v3-team-card p span { margin-left: auto; color: #8290a8; }
.landing-v3-cta-banner { min-height: 144px; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; border-radius: 20px; background: linear-gradient(120deg, #185fe8, #0c329f); box-shadow: 0 20px 42px rgba(20, 74, 196, .2); }.landing-v3-cta-banner h2 { margin: 0 0 7px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; letter-spacing: -.04em; }.landing-v3-cta-banner p { max-width: 470px; margin: 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.6; }.landing-v3-cta-banner > div:last-child { display: flex; gap: 10px; }.landing-v3-footer { min-height: 90px; display: flex; align-items: center; gap: 22px; }.landing-v3-footer .landing-v3-brand { font-size: 17px; }.landing-v3-footer .landing-v3-brand img { width: 28px; height: 28px; }.landing-v3-footer small { color: #8190a8; font-size: 10px; }.landing-v3-footer nav { margin-left: auto; display: flex; gap: 26px; }.landing-v3-footer nav a { color: #7182a0; font-size: 10px; font-weight: 700; }

@media (max-width: 1120px) {
  .landing-v3-hero { grid-template-columns: 1fr; gap: 34px; }.landing-v3-hero-copy { max-width: 700px; }.landing-v3-preview-wrap { width: min(760px, 100%); justify-self: center; }.landing-v3-team { gap: 45px; }
}
@media (max-width: 820px) {
  .landing-v3-nav,.landing-v3-hero,.landing-v3-trusted,.landing-v3-features,.landing-v3-team,.landing-v3-cta-banner,.landing-v3-footer { width: calc(100% - 36px); }.landing-v3-nav { min-height: 70px; }.landing-v3-nav nav { display: none; }.landing-v3-actions { gap: 10px; }.landing-v3-actions > a:first-child { display: none; }.landing-v3-hero { min-height: 0; margin-top: 32px; }.landing-v3-hero h1 { font-size: clamp(39px, 8vw, 54px); }.landing-v3-preview { grid-template-columns: 1fr; }.landing-preview-sidebar { display: none; }.landing-v3-feature-grid { grid-template-columns: 1fr; }.landing-v3-feature-grid article { min-height: 0; }.landing-v3-step-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 18px; }.landing-v3-team { grid-template-columns: 1fr; gap: 34px; }.landing-v3-cta-banner { align-items: flex-start; flex-direction: column; padding: 28px; }.landing-v3-footer { flex-wrap: wrap; padding: 22px 0; }.landing-v3-footer nav { width: 100%; margin-left: 0; }.landing-v3-trusted > div { gap: 16px; flex-wrap: wrap; }.landing-v3-trusted img { width: 100px; }
}
@media (max-width: 560px) {
  .landing-v3-nav,.landing-v3-hero,.landing-v3-trusted,.landing-v3-features,.landing-v3-team,.landing-v3-cta-banner,.landing-v3-footer { width: calc(100% - 28px); }.landing-v3-brand { font-size: 18px; }.landing-v3-actions .landing-v3-button { min-height: 40px; padding: 0 12px; font-size: 11px; }.landing-v3-hero h1 { font-size: 39px; }.landing-v3-hero-copy > p { font-size: 14px; }.landing-v3-cta { flex-direction: column; }.landing-v3-button { width: 100%; }.landing-v3-preview-main { padding: 16px 12px 12px; }.landing-preview-top { font-size: 11px; }.landing-preview-stats { grid-template-columns: repeat(2, 1fr); }.landing-preview-panels { grid-template-columns: 1fr; }.landing-preview-donut { display: none; }.landing-preview-chart svg { height: 130px; }.landing-preview-connection { gap: 6px; font-size: 7px; }.landing-preview-connection small { display: none; }.landing-v3-floating { display: none; }.landing-v3-trusted { padding-top: 34px; }.landing-v3-section-heading h2 { font-size: 24px; }.landing-v3-steps { padding-right: 14px; padding-left: 14px; }.landing-v3-step-grid { grid-template-columns: 1fr; }.landing-v3-step-grid article { max-width: 260px; margin: 0 auto; }.step-number { left: calc(50% + 34px); }.landing-v3-cta-banner > div:last-child { width: 100%; flex-direction: column; }.landing-v3-footer nav { gap: 12px; flex-wrap: wrap; }
}

.status-delivery_created { background: #e8f0ff; color: #1758d4; border-color: #b9d0ff; }
.dashboard-status-sent { color: #1758d4; background: #e8f0ff; }
.dashboard-status-delivered { color: #138141; background: #e5f8ec; }
.dashboard-status-returned { color: #d72e32; background: #ffebeb; }
.dashboard-status-in-transit { color: #1758d4; background: #e8f0ff; }
.details-action-groups .details-group:first-child[hidden] { display: none; }
.details-action-groups .details-group:last-child form#sendToDeliveryForm .btn-primary { background: linear-gradient(135deg, #2f6fff, #1450d1); }
.dashboard-delivery-confirm-modal .dashboard-delivery-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-delivery-confirm-modal #cancelDeliveryConfirm { grid-column: 1 / -1; order: 3; min-height: 44px; }
.dashboard-delivery-confirm-modal #confirmOnlyButton { min-width: 0; }

/* Delivery integration page: focused setup layout inspired by the product reference. */
.integration-focused-page {
  background: linear-gradient(135deg, #f7faff 0%, #eef4ff 100%);
}
.integration-focused-page .content-shell {
  width: 100%;
  max-width: 1560px;
  padding: 34px 42px 52px;
}
.integration-focused-page .integration-header { margin-bottom: 24px; }
.integration-focused-page .integration-header h1 {
  color: #071b4d;
  font-size: clamp(34px, 3.4vw, 46px);
  letter-spacing: -0.045em;
}
.integration-focused-page .integration-header .page-subtitle { max-width: 760px; color: #60749b; font-size: 15px; }
.integration-focused-page .focused-integration-form { max-width: none; gap: 20px; }
.integration-focused-page .focused-integration-card {
  padding: 25px 26px;
  border: 1px solid #dce7f8;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(31, 67, 126, 0.07);
}
.integration-focused-page .focused-integration-card h2 {
  margin-bottom: 8px;
  color: #0b255d;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.delivery-section-number { color: #164fd3; }
.delivery-section-description { margin: -1px 0 15px; color: #7182a0; font-size: 13px; }
.integration-focused-page .focused-integration-card > select { width: min(318px, 100%); margin: 3px 0 4px; }
.integration-focused-page .delivery-provider-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 17px;
}
.integration-focused-page .delivery-provider-tabs button {
  position: relative;
  min-width: 0;
  min-height: 140px;
  padding: 17px 16px 13px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 48px auto;
  align-content: space-between;
  gap: 12px 10px;
  color: #162e68;
  border: 1px solid #dce6f7;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(33, 64, 115, 0.025);
}
.integration-focused-page .delivery-provider-tabs button:hover,
.integration-focused-page .delivery-provider-tabs button.is-active {
  color: #162e68;
  border-color: #1760ff;
  background: #fff;
  box-shadow: 0 0 0 1px #1760ff, 0 10px 22px rgba(31, 91, 235, 0.12);
}
.integration-focused-page .delivery-provider-tabs button.is-active::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #1760e8;
  font-size: 13px;
}
.integration-focused-page .delivery-provider-tabs button img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
}
.delivery-provider-card-features {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.delivery-provider-card-features span {
  min-height: 26px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #16804a;
  border-radius: 999px;
  background: #edf9f1;
  font-size: 10px;
  font-weight: 800;
}
.delivery-provider-card-features i { font-style: normal; font-size: 12px; }
.integration-focused-page .focused-integration-card[data-provider-panel] { padding-top: 24px; }
.integration-focused-page .focused-integration-card[data-provider-panel] h2 { margin-bottom: 18px; }
.integration-focused-page .focused-integration-card[data-provider-panel] .helper-copy { max-width: 800px; color: #667a9f; }
.integration-focused-page .focused-form-grid { gap: 16px 22px; }
.integration-focused-page .focused-integration-card input,
.integration-focused-page .focused-integration-card select {
  min-height: 48px;
  border-color: #d8e4f5;
  border-radius: 11px;
  background: #fff;
}
.integration-focused-page .delivery-tracking-capability { margin-top: 23px; padding: 15px 18px; border-radius: 12px; }
.integration-focused-page .delivery-tracking-capability strong { font-size: 15px; }
.integration-focused-page .delivery-tracking-capability small { font-size: 12px; }
.delivery-checklist-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.delivery-checklist-heading .checkbox-field { flex: 0 1 360px; margin: 3px 0 0; }
.delivery-checklist-heading .checkbox-field > span { line-height: 1.4; }
.delivery-checklist-card .focused-checklist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 19px; }
.delivery-checklist-card .focused-checklist span {
  min-height: 50px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #5d7197;
  border: 1px solid #e0e8f5;
  border-radius: 11px;
  background: #fff;
  font-size: 12px;
}
.delivery-checklist-card .focused-checklist span i { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #b4c0d2; font-style: normal; font-size: 12px; }
.delivery-checklist-card .focused-checklist span strong { color: #304975; font-size: 12px; }
.delivery-checklist-card .focused-checklist span b { color: #64789a; font-size: 11px; }
.delivery-checklist-card .focused-checklist span.is-ready { color: #16804a; border-color: #cdebd8; background: #fbfffc; }
.delivery-checklist-card .focused-checklist span.is-ready i { background: #2a9b5d; }
.delivery-checklist-card .focused-checklist span.is-ready strong,
.delivery-checklist-card .focused-checklist span.is-ready b { color: #16733f; }
.integration-focused-page .focused-form-actions { padding-top: 4px; }
.integration-focused-page .focused-form-actions .btn { min-height: 48px; padding-inline: 22px; border-radius: 12px; }

.delivery-api-modal { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 24px; }
.delivery-api-modal[hidden] { display: none; }
.delivery-api-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 29, 71, 0.42); backdrop-filter: blur(7px); }
.delivery-api-modal-card { position: relative; width: min(760px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; padding: 28px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: #fff; box-shadow: 0 30px 90px rgba(9, 35, 92, .24); }
.delivery-api-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.delivery-api-modal-header h2 { margin: 5px 0 6px; color: #081d52; font-size: 24px; letter-spacing: -.025em; }
.delivery-api-modal-header p { margin: 0; color: #7082a1; font-size: 13px; }
.delivery-api-modal-close { width: 36px; height: 36px; display: grid; place-items: center; color: #27416f; border: 1px solid #dbe6f6; border-radius: 10px; background: #f8faff; font-size: 23px; cursor: pointer; }
.delivery-api-modal-content .focused-integration-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.delivery-api-modal-content .focused-integration-card h2 { display: none; }
.delivery-api-modal-content .delivery-provider-capabilities { margin-top: 18px; }
.delivery-api-modal-options { margin-top: 20px; padding: 15px 16px; border: 1px solid #dbe7f7; border-radius: 13px; background: #f8faff; }
.delivery-api-modal-options .checkbox-field { margin: 0; display: flex; align-items: center; gap: 10px; }
.delivery-api-modal-options .checkbox-field > span { margin: 0; color: #183567; font-size: 13px; font-weight: 800; }
.delivery-api-modal-actions { margin-top: 24px; padding-top: 18px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e8eef7; }
.delivery-api-modal-actions .btn { min-height: 46px; padding-inline: 18px; border-radius: 11px; }
.delivery-api-modal-actions .btn-primary span { margin-left: 12px; font-size: 18px; }

@media (max-width: 1120px) {
  .integration-focused-page .delivery-provider-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .delivery-checklist-card .focused-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .integration-focused-page .content-shell { padding: 24px 16px 36px; }
  .integration-focused-page .focused-integration-card { padding: 19px 16px; border-radius: 17px; }
  .integration-focused-page .delivery-provider-tabs { grid-template-columns: 1fr; gap: 10px; }
  .integration-focused-page .delivery-provider-tabs button { min-height: 108px; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 44px auto; padding: 13px; }
  .integration-focused-page .delivery-provider-tabs button img { width: 44px; height: 44px; }
  .delivery-checklist-heading { display: grid; gap: 14px; }
  .delivery-checklist-heading .checkbox-field { max-width: none; }
  .delivery-checklist-card .focused-checklist { grid-template-columns: 1fr; gap: 8px; }
  .integration-focused-page .focused-form-actions { flex-direction: column-reverse; }
  .integration-focused-page .focused-form-actions .btn { width: 100%; }
  .delivery-api-modal { padding: 12px; align-items: end; }
  .delivery-api-modal-card { max-height: calc(100vh - 24px); padding: 21px 16px; border-radius: 20px 20px 14px 14px; }
  .delivery-api-modal-actions { flex-direction: column-reverse; }
  .delivery-api-modal-actions .btn { width: 100%; }
}

.focused-form-actions {
  padding-top: 2px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.focused-form-actions .btn {
  min-height: 46px;
}

@media (max-width: 820px) {
  .integrations-overview-grid,
  .focused-form-grid {
    grid-template-columns: 1fr;
  }

  .integrations-overview-grid,
  .focused-integration-form {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .integration-overview-card,
  .focused-integration-card {
    padding: 16px;
  }

  .integration-overview-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .integration-overview-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .focused-form-actions {
    flex-direction: column-reverse;
  }

  .focused-form-actions .btn,
  .delivery-provider-tabs button {
    width: 100%;
  }
}

/* In-page manual order form for the Commandes workflow. */
.dashboard-new-order {
  padding: 0;
  color: #1c56d8;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.dashboard-new-order span {
  margin-left: 4px;
  font-size: 16px;
}

.dashboard-add-order-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  background: rgba(4, 18, 48, 0.48);
  backdrop-filter: blur(4px);
}

.dashboard-add-order-modal {
  position: fixed;
  z-index: 81;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid #dbe5f4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(5, 24, 68, 0.25);
}

.dashboard-add-order-head {
  padding: 22px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf1f7;
}

.dashboard-add-order-head h2,
.dashboard-add-order-head p {
  margin: 0;
}

.dashboard-add-order-head h2 {
  margin-top: 4px;
  color: #0a285f;
  font-size: 24px;
}

.dashboard-add-order-head p {
  margin-top: 7px;
  color: #667b9b;
  font-size: 13px;
}

.dashboard-add-order-head > button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #49617f;
  border: 1px solid #dfe7f3;
  border-radius: 11px;
  background: #f8fbff;
  font-size: 25px;
  cursor: pointer;
}

.dashboard-add-order-form {
  padding: 20px 24px 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.dashboard-add-order-form label {
  min-width: 0;
}

.dashboard-add-order-form label.full,
.dashboard-add-order-actions {
  grid-column: 1 / -1;
}

.dashboard-add-order-form label > span {
  display: block;
  margin-bottom: 7px;
  color: #21376f;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-add-order-form input,
.dashboard-add-order-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #d6e3f7;
  border-radius: 11px;
  background: #fff;
  font: inherit;
}

.dashboard-add-order-form textarea {
  min-height: 70px;
  padding: 10px 12px;
  resize: vertical;
}

.dashboard-add-order-actions {
  padding-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-add-order-actions .btn {
  min-height: 44px;
}

@media (max-width: 560px) {
  .dashboard-add-order-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 18px;
  }

  .dashboard-add-order-head {
    padding: 18px 18px 14px;
  }

  .dashboard-add-order-head h2 {
    font-size: 21px;
  }

  .dashboard-add-order-form {
    padding: 16px 18px 18px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dashboard-add-order-actions {
    flex-direction: column-reverse;
  }

  .dashboard-add-order-actions .btn {
    width: 100%;
  }
}

/* Integration page: use the same compact dashboard surface and form rhythm. */
.integration-page {
  background: #f7f9fc;
}

.integration-page .content-shell {
  max-width: 1480px;
  padding: 32px 34px 44px;
}

.integration-page .integration-header {
  margin-bottom: 24px;
}

.integration-page .integration-header h1 {
  font-size: clamp(34px, 3.2vw, 42px);
}

.integration-page .integration-header .page-subtitle {
  max-width: 720px;
  font-size: 15px;
}

.integration-page .integration-help-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: #f7faff;
  box-shadow: none;
}

.integration-page .premium-integration-form {
  gap: 18px;
  padding-bottom: 20px;
}

.integration-page .premium-integration-grid {
  align-items: start;
  gap: 18px;
}

.integration-page .split-panel,
.integration-page .integration-card {
  min-height: 0;
  height: auto;
}

.integration-page .integration-card {
  padding: 20px;
  overflow: visible;
  border: 1px solid #dfe7f3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.integration-page .integration-card::before {
  display: none;
}

.integration-page .integration-card-head {
  gap: 12px;
  margin-bottom: 14px;
}

.integration-page .integration-card-title {
  gap: 12px;
}

.integration-page .integration-card-title h2,
.integration-page .integration-card-title h3 {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.15;
}

.integration-page .integration-card-icon,
.integration-page .integration-card-action-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: none;
}

.integration-page .integration-card-icon svg,
.integration-page .integration-card-action-icon svg {
  width: 21px;
  height: 21px;
}

.integration-page .premium-stack-form,
.integration-page .premium-info-stack {
  gap: 11px;
}

.integration-page .premium-field > span {
  margin-bottom: 6px;
  font-size: 13px;
}

.integration-page .field-shell {
  min-width: 0;
}

.integration-page .field-shell input,
.integration-page .field-shell select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 12px;
}

.integration-page .field-shell.field-shell-with-copy input {
  padding-right: 52px;
}

.integration-page .field-copy-btn {
  right: 5px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.integration-page .field-copy-btn svg {
  width: 18px;
  height: 18px;
}

.integration-page .premium-company-card {
  padding: 13px;
  border-radius: 14px;
}

.integration-page .company-switcher {
  gap: 8px;
}

.integration-page .company-chip {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  box-shadow: none;
}

.integration-page .integration-checklist {
  border-radius: 14px;
}

.integration-page .integration-check-row {
  min-height: 48px;
  padding: 0 12px;
  font-size: 13px;
}

.integration-page .integration-check-badge {
  min-width: 56px;
  min-height: 27px;
  padding: 0 10px;
  font-size: 11px;
}

.integration-page .integration-advanced-link {
  min-height: 62px;
  margin-top: 12px;
}

.integration-page .integration-toolbar {
  position: static;
  margin-top: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid #dfe7f3;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.integration-page .integration-toolbar-security {
  flex: 0 1 auto;
  padding: 0;
}

.integration-page .integration-toolbar-shield {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.integration-page .integration-toolbar-shield svg {
  width: 21px;
  height: 21px;
}

.integration-page .integration-toolbar-security strong {
  font-size: 13px;
}

.integration-page .integration-toolbar-security span {
  font-size: 12px;
}

.integration-page .integration-back-btn,
.integration-page .integration-save-btn {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
}

.integration-page .integration-save-btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.integration-mobile-header,
.integration-mobile-overlay {
  display: none;
}

.integration-page .dashboard-sidebar {
  padding: 28px 18px 20px;
  background:
    radial-gradient(circle at 18% 7%, rgba(78, 148, 255, 0.3), transparent 25%),
    linear-gradient(165deg, #0a2d8d 0%, #0646da 58%, #0964f3 100%);
  box-shadow: 16px 0 50px rgba(8, 35, 92, 0.13);
}

.integration-page .dashboard-brand {
  gap: 13px;
  padding: 4px 10px 30px;
}

.integration-page .dashboard-brand strong {
  font-size: 17px;
}

.integration-page .dashboard-brand span {
  margin-top: 4px;
  font-size: 12px;
}

.integration-page .dashboard-nav {
  gap: 8px;
}

.integration-page .dashboard-nav .sidebar-link {
  min-height: 54px;
  padding: 0 15px;
  gap: 14px;
  border-radius: 14px;
  font-size: 15px;
}

@media (max-width: 1024px) {
  .integration-page.unified-shell .dashboard-sidebar {
    position: fixed;
    /* Keep the navigation above the mobile backdrop so it stays sharp. */
    z-index: 120;
    inset: 0 auto 0 0;
    width: 256px;
    min-height: 100vh;
    transform: translateX(-105%) !important;
    transition: transform 220ms ease;
    box-shadow: 16px 0 50px rgba(8, 35, 92, 0.22);
  }

  .integration-page.unified-shell .dashboard-sidebar.is-open {
    transform: translateX(0) !important;
  }

  .integration-mobile-overlay {
    position: fixed;
    z-index: 59;
    inset: 0;
    display: block;
    background: rgba(4, 18, 48, 0.45);
    backdrop-filter: blur(3px);
  }

  .integration-mobile-header {
    min-height: 50px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .integration-mobile-header button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #0b285f;
    border: 0;
    background: transparent;
  }

  .integration-mobile-header button svg {
    width: 22px;
    height: 22px;
  }

  .integration-mobile-header strong {
    color: #0b255d;
    font-size: 15px;
  }

  .integration-mobile-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 999px;
    background: #1755dc;
    font-size: 12px;
    font-weight: 800;
  }

  .integration-page .content-shell {
    padding: 24px 20px 36px;
  }

  .integration-page .integration-grid-wide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .integration-page .content-shell {
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
  }

  .integration-page .integration-header {
    margin-bottom: 18px;
    flex-direction: column;
    align-items: stretch;
  }

  .integration-page .integration-header h1 {
    font-size: 30px;
  }

  .integration-page .integration-header .page-subtitle {
    font-size: 14px;
  }

  .integration-page .integration-help-btn {
    width: 100%;
    margin-top: 12px;
    justify-content: center;
  }

  .integration-page .integration-card {
    padding: 16px;
    border-radius: 16px;
  }

  .integration-page .integration-card-title h2,
  .integration-page .integration-card-title h3 {
    font-size: 19px;
  }

  .integration-page .integration-card-action-icon {
    display: none;
  }

  .integration-page .company-chip {
    flex: 1 1 140px;
  }

  .integration-page .premium-checkbox-field {
    align-items: flex-start;
  }

  .integration-page .integration-toolbar {
    align-items: stretch;
    gap: 14px;
  }

  .integration-page .integration-toolbar-actions {
    width: 100%;
    flex-direction: column-reverse;
    gap: 9px;
  }

  .integration-page .integration-toolbar-actions .btn {
    width: 100%;
  }
}
.landing-v3-menu-toggle,
.landing-v3-mobile-menu,
.landing-v3-menu-backdrop { display: none; }

.landing-v3-brand { gap: 0; }
.landing-v3-brand img { width: 220px; height: 64px; object-fit: cover; object-position: center; border-radius: 0; }
.landing-v3-footer .landing-v3-brand img { width: 190px; height: 54px; }

.landing-v3-feature-grid .feature-icon svg,
.landing-v3-step-grid .step-icon svg,
.landing-v3-offer-icon svg { width: 23px; height: 23px; }

.landing-v3-offer { width: min(1120px, calc(100% - 64px)); min-height: 132px; margin: 0 auto 86px; padding: 24px 30px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 18px; border: 1px solid #cfe0ff; border-radius: 18px; background: linear-gradient(110deg, #f0f6ff, #fff 65%); box-shadow: 0 14px 35px rgba(37, 85, 170, .08); }
.landing-v3-offer-icon { width: 58px; height: 58px; display: grid; place-items: center; color: #1760ed; border-radius: 16px; background: #dfeaff; }
.landing-v3-offer-copy > span { color: #1760ed; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.landing-v3-offer-copy h2 { margin: 7px 0 5px; color: #10275b; font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px; letter-spacing: -.04em; }
.landing-v3-offer-copy p { margin: 0; color: #7082a1; font-size: 12px; }
.landing-v3-pricing { width: min(1120px, calc(100% - 64px)); margin: 0 auto 86px; text-align: center; }
.landing-v3-pricing-badge { width: fit-content; margin: 0 auto 16px; padding: 10px 24px; display: flex; align-items: center; gap: 10px; color: #1760ed; border-radius: 999px; background: #eaf2ff; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 800; }
.landing-v3-pricing-badge span { font-size: 22px; }
.landing-v3-pricing > h2 { margin: 0; color: #10275b; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.055em; }
.landing-v3-pricing-subtitle { margin: 12px auto 26px; color: #60749b; font-size: 20px; }
.landing-v3-pricing-card { padding: 30px 48px 28px; border: 1.5px solid #7ca9ff; border-radius: 28px; background: rgba(255, 255, 255, .82); box-shadow: 0 18px 45px rgba(37, 85, 170, .11); }
.landing-v3-pricing-icon { width: 74px; height: 74px; margin: 0 auto 12px; display: grid; place-items: center; color: #1760ed; border-radius: 50%; background: #e2edff; }
.landing-v3-pricing-icon svg { width: 42px; height: 42px; }
.landing-v3-pricing-title { display: flex; align-items: center; justify-content: center; gap: 24px; color: #1760ed; }
.landing-v3-pricing-title span { width: 56px; height: 2px; background: #bcd4ff; }
.landing-v3-pricing-title h3 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 32px; letter-spacing: -.04em; }
.landing-v3-pricing-main { margin: 17px auto 20px; padding-top: 17px; border-top: 1px solid #bcd4ff; }
.landing-v3-pricing-main strong { display: block; color: #101d3b; font-family: "Plus Jakarta Sans", sans-serif; font-size: 36px; letter-spacing: -.045em; }
.landing-v3-pricing-main p { margin: 10px 0 0; color: #526989; font-size: 23px; }.landing-v3-pricing-main em { color: #1760ed; font-style: normal; font-weight: 800; }
.landing-v3-pricing-benefits { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 22px 0 28px; color: #51688f; font-size: 16px; }.landing-v3-pricing-benefits span { padding: 0 22px; border-right: 1px solid #cbdcff; }.landing-v3-pricing-benefits span:last-child { border-right: 0; }.landing-v3-pricing-benefits i { margin-right: 8px; color: #1760ed; font-style: normal; font-weight: 800; }
.landing-v3-pricing-example { max-width: 760px; margin: 0 auto 23px; padding: 18px 26px; text-align: left; border: 1px solid #bcd4ff; border-radius: 18px; }.landing-v3-pricing-example > strong { display: flex; align-items: center; gap: 10px; color: #1760ed; font-size: 19px; }.landing-v3-pricing-example svg { width: 25px; height: 25px; }.landing-v3-pricing-example > div { margin: 12px auto 0; padding: 17px 24px; display: flex; align-items: center; justify-content: center; gap: 25px; border: 1px solid #e1eaf8; border-radius: 16px; background: #fff; box-shadow: 0 7px 16px rgba(24, 51, 99, .08); color: #526989; font-size: 20px; }.landing-v3-pricing-example > div b { color: #101d3b; font-size: 28px; }.landing-v3-pricing-example > div strong { color: #1760ed; font-size: 26px; }
.landing-v3-pricing-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 24px; color: #526989; font-size: 16px; }.landing-v3-pricing-note svg { width: 25px; height: 25px; color: #1760ed; }.landing-v3-pricing-actions { display: flex; justify-content: center; gap: 22px; }.landing-v3-pricing-actions .landing-v3-button { min-width: 220px; justify-content: center; }
@media (max-width: 700px) { .landing-v3-pricing { width: calc(100% - 28px); margin-bottom: 62px; }.landing-v3-pricing-subtitle { font-size: 16px; line-height: 1.5; }.landing-v3-pricing-card { padding: 24px 16px; border-radius: 22px; }.landing-v3-pricing-title { gap: 10px; }.landing-v3-pricing-title span { width: 28px; }.landing-v3-pricing-title h3 { font-size: 23px; }.landing-v3-pricing-main strong { font-size: 27px; }.landing-v3-pricing-main p { font-size: 17px; }.landing-v3-pricing-benefits { display: grid; gap: 10px; margin-bottom: 22px; }.landing-v3-pricing-benefits span { padding: 0; border: 0; }.landing-v3-pricing-example { padding: 15px; }.landing-v3-pricing-example > div { gap: 10px; padding: 14px 10px; font-size: 15px; }.landing-v3-pricing-example > div strong { font-size: 21px; }.landing-v3-pricing-example > div b { font-size: 22px; }.landing-v3-pricing-note { align-items: flex-start; text-align: left; font-size: 14px; line-height: 1.45; }.landing-v3-pricing-actions { display: grid; gap: 10px; }.landing-v3-pricing-actions .landing-v3-button { width: 100%; min-width: 0; } }

@media (max-width: 820px) {
  .landing-v3-menu-toggle { width: 42px; height: 42px; padding: 10px; display: grid; align-content: center; gap: 4px; border: 1px solid #dce7f7; border-radius: 11px; background: #fff; cursor: pointer; }
  .landing-v3-menu-toggle span { width: 20px; height: 2px; display: block; border-radius: 99px; background: #1757d8; transition: transform 180ms ease, opacity 180ms ease; }
  .landing-v3-menu-backdrop { position: fixed; z-index: 100; inset: 0; display: block; background: rgba(7, 24, 66, .36); backdrop-filter: blur(4px); }
  .landing-v3-menu-backdrop[hidden] { display: none; }
  .landing-v3-mobile-menu { position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); padding: 20px 20px 28px; display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 48px rgba(18, 48, 112, .18); transform: translateX(105%); transition: transform 260ms cubic-bezier(.22, .8, .24, 1); }
  .landing-v3-mobile-menu.is-open { transform: translateX(0); }
  .landing-v3-mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid #e8eef7; }
  .landing-v3-mobile-menu-head .landing-v3-brand { font-size: 19px; }.landing-v3-mobile-menu-head .landing-v3-brand img { width: 210px; height: 60px; }
  .landing-v3-menu-close { width: 38px; height: 38px; display: grid; place-items: center; color: #1c376e; border: 1px solid #dce7f7; border-radius: 10px; background: #f8fbff; font-size: 24px; line-height: 1; cursor: pointer; }
  .landing-v3-mobile-menu nav { margin: 20px 0; display: grid; gap: 5px; }
  .landing-v3-mobile-menu nav a { min-height: 48px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #173362; border-radius: 10px; font-size: 14px; font-weight: 750; }
  .landing-v3-mobile-menu nav a:hover { color: #175ce4; background: #eef4ff; }
  .landing-v3-mobile-menu nav b { color: #1b61e9; font-size: 18px; }
  .landing-v3-mobile-menu > .landing-v3-button { width: 100%; margin-top: auto; }
  .landing-menu-open { overflow: hidden; }
  .landing-v3-offer { width: calc(100% - 36px); margin-bottom: 68px; grid-template-columns: 48px minmax(0, 1fr); padding: 20px; gap: 14px; }
  .landing-v3-offer-icon { width: 48px; height: 48px; border-radius: 13px; }.landing-v3-offer-copy h2 { font-size: 18px; }.landing-v3-offer-copy p { line-height: 1.5; }.landing-v3-offer > .landing-v3-button { grid-column: 1 / -1; width: 100%; }
  .landing-v3-step-grid article { padding: 20px 16px; border: 1px solid #e0e8f5; border-radius: 16px; background: rgba(255,255,255,.7); }
}

@media (max-width: 560px) {
  .landing-v3-offer { width: calc(100% - 28px); grid-template-columns: 44px minmax(0, 1fr); padding: 17px; }.landing-v3-offer-icon { width: 44px; height: 44px; }.landing-v3-offer-copy h2 { font-size: 16px; line-height: 1.25; }.landing-v3-offer-copy p { font-size: 11px; }.landing-v3-step-grid article { min-height: 0; }.landing-v3-step-grid h3 { font-size: 15px; }.landing-v3-step-grid p { font-size: 12px; }
}
/* Final responsive guardrails for the shared signed-in UI. */
.sidebar-menu-chevron { font-size: 0; }
.sidebar-menu-chevron::after { content: "\25BE"; font-size: 14px; }
.dashboard-sidebar-user form button { font-size: 0; }
.dashboard-sidebar-user form button::after { content: "\2197"; font-size: 18px; }
button.is-submitting { cursor: progress; opacity: .72; }
.integration-focused-page .content-shell,
.integration-focused-page .focused-integration-form,
.integration-focused-page .focused-integration-card { min-width: 0; }
.integration-focused-page .delivery-provider-capabilities > div,
.integration-focused-page .delivery-provider-card-features span { min-width: 0; }
.integration-help-card ol { margin: 0; padding-left: 22px; display: grid; gap: 12px; color: #38547f; line-height: 1.6; }
.integration-help-card li::marker { color: #1f5ce2; font-weight: 800; }
.integration-help-card .helper-copy { margin-bottom: 0; }
.dashboard-add-order-form select,
.details-edit-grid select,
.compact-form-panel select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d9e4f3; border-radius: 10px; background: #fbfdff; color: #102b62; font: inherit; }
.details-edit-grid label:has([name="postal_code"]) { display: none; }
.integration-focused-page .delivery-provider-capabilities strong,
.integration-focused-page .delivery-provider-card-features small { white-space: nowrap; }
@media (max-width: 820px) {
  .integration-focused-page .focused-integration-form { gap: 14px; }
  .integration-focused-page .focused-integration-card { padding: 18px; }
  .integration-focused-page .focused-form-actions { gap: 10px; }
  .integration-focused-page .delivery-provider-capabilities { grid-template-columns: 1fr; }
  .integration-focused-page .delivery-provider-card-features { flex-wrap: wrap; }
}

/* Shared balance control and billing page. */
.customer-header-controls { display: flex; align-items: center; gap: 10px; }
.dashboard-page .global-account-menu { top: 20px; right: 30px; left: auto; display: block; }
.dashboard-page .customer-header-controls { display: flex; align-items: center; justify-content: flex-end; }
.dashboard-page .dashboard-billing-card { display: none !important; }
.header-balance-card { min-width: 286px; min-height: 70px; padding: 9px 11px 9px 13px; display: flex; align-items: center; gap: 10px; color: #10275a; border: 1px solid #e0e9f7; border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 12px 28px rgba(36,77,145,.09); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.header-balance-card:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(36,77,145,.14); }
.header-balance-card.is-insufficient { border-color: #f4b7b7; }
.header-balance-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #1d5ce5; border-radius: 11px; background: #e9f1ff; }
.header-balance-icon svg { width: 18px; height: 18px; }
.header-balance-copy { min-width: 0; display: grid; gap: 1px; line-height: 1.15; }
.header-balance-copy small { color: #6e80a0; font-size: 10px; font-weight: 700; }
.header-balance-copy strong { color: #10275a; font-size: 20px; letter-spacing: -.03em; white-space: nowrap; }
.header-balance-copy strong em { color: #314a78; font-size: 10px; font-style: normal; letter-spacing: 0; }
.header-balance-copy > span { overflow: hidden; color: #6e80a0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.header-balance-action { margin-left: auto; padding: 9px 11px; color: #fff; border-radius: 9px; background: linear-gradient(135deg,#2871f5,#1450d0); box-shadow: 0 7px 14px rgba(24,86,220,.2); font-size: 11px; font-weight: 800; white-space: nowrap; }
.mobile-wallet-button, .mobile-wallet-popover { display: none; }

.billing-page { background: #f3f7ff; }
.billing-content { width: min(1420px, calc(100% - 54px)); margin: 0 auto; padding: 38px 0 64px; }
.billing-page-header { margin-bottom: 26px; }
.billing-page-header h1 { margin: 5px 0 9px; color: #0a2258; font-size: clamp(34px, 4vw, 44px); letter-spacing: -.045em; }
.billing-page-header .page-subtitle { margin: 0; color: #617497; font-size: 16px; }
.billing-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 28px; }
.billing-summary-card { min-width: 0; min-height: 148px; padding: 27px 22px; display: flex; align-items: center; gap: 18px; border: 1px solid #e0e9f7; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 28px rgba(47,75,124,.06); }
.billing-card-icon { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 50%; }
.billing-card-icon svg { width: 27px; height: 27px; }
.billing-summary-blue .billing-card-icon { color: #1e5fea; background: #eaf1ff; }.billing-summary-green .billing-card-icon { color: #19a35c; background: #e5f8ec; }.billing-summary-orange .billing-card-icon { color: #ed8c20; background: #fff1dc; }.billing-summary-purple .billing-card-icon { color: #7259e8; background: #efedff; }
.billing-summary-card h2 { margin: 0 0 10px; color: #193363; font-size: 14px; line-height: 1.35; }
.billing-summary-card strong { display: block; color: #0c255b; font-size: 28px; letter-spacing: -.04em; white-space: nowrap; }
.billing-summary-card strong small { color: #17366f; font-size: 13px; letter-spacing: 0; }
.billing-summary-card p { margin: 6px 0 0; color: #657897; font-size: 12px; line-height: 1.35; }
.billing-pricing-card { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; padding: 30px 28px; margin-bottom: 26px; border: 1px solid #e0e9f7; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 12px 28px rgba(47,75,124,.06); }
.billing-pricing-copy { padding: 2px 18px 2px 0; border-right: 1px solid #e1e9f5; }
.billing-pricing-copy h2 { max-width: 520px; margin: 9px 0 18px; color: #0b275d; font-size: 25px; line-height: 1.3; letter-spacing: -.025em; }
.billing-pricing-copy p { margin: 0; color: #607497; font-size: 15px; line-height: 1.65; }
.billing-recharge-form { display: grid; align-content: center; gap: 11px; }
.billing-recharge-form > label { color: #173365; font-size: 14px; font-weight: 800; }
.billing-presets { display: flex; gap: 10px; flex-wrap: wrap; }
.billing-presets button { min-width: 94px; min-height: 40px; padding: 0 14px; color: #203b6c; border: 1px solid #d6e2f4; border-radius: 10px; background: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.billing-presets button:hover, .billing-presets button:focus-visible { color: #1358dc; border-color: #3474ee; background: #f4f8ff; outline: none; }
.billing-recharge-form input { width: 100%; min-height: 44px; padding: 0 14px; color: #183466; border: 1px solid #d6e2f4; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; }
.billing-recharge-form input:focus { border-color: #3474ee; outline: 3px solid rgba(52,116,238,.12); }
.billing-recharge-submit { width: 100%; min-height: 44px; font-size: 14px; }
.billing-recharge-form > small { color: #647795; font-size: 12px; }
.billing-transactions { padding: 22px 16px 14px; border: 1px solid #e0e9f7; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 12px 28px rgba(47,75,124,.06); }
.billing-section-heading { padding: 0 6px 14px; }.billing-section-heading h2 { margin: 0; color: #122d62; font-size: 21px; }.billing-section-heading p { margin: 4px 0 0; color: #71819d; font-size: 12px; }
.billing-table-wrap { overflow-x: auto; border: 1px solid #e0e8f4; border-radius: 10px; }.billing-transaction-table { width: 100%; min-width: 860px; border-collapse: collapse; color: #52698d; font-size: 12px; }.billing-transaction-table th { padding: 12px; color: #71819d; background: #f8faff; font-size: 11px; text-align: left; }.billing-transaction-table td { padding: 14px 12px; border-top: 1px solid #edf1f7; vertical-align: middle; }.billing-transaction-table td:last-child { max-width: 260px; white-space: normal; }.billing-type { display: inline-flex; padding: 5px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; white-space: nowrap; }.billing-type-positive { color: #16864e; background: #e7f8ed; }.billing-type-negative { color: #d82e42; background: #ffeaed; }.billing-amount { font-weight: 800; white-space: nowrap; }.billing-amount.is-positive { color: #139456; }.billing-amount.is-negative { color: #e33445; }.billing-empty { padding: 28px !important; color: #71819d; text-align: center; }.billing-mobile-transactions { display: none; }.billing-empty-state { padding: 40px; border: 1px solid #e0e9f7; border-radius: 18px; background: #fff; }

@media (max-width: 1100px) { .billing-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.header-balance-card { min-width: 250px; }.header-balance-action { padding: 8px; font-size: 10px; } }
@media (max-width: 820px) {
  .customer-header-controls { display: flex; align-items: center; gap: 8px; }
  .header-balance-card { display: none; }
  .mobile-wallet-button { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: #1458da; border: 1px solid #dce7f7; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(40,78,139,.1); cursor: pointer; }
  .mobile-wallet-button svg { width: 21px; height: 21px; }.mobile-wallet-button.is-insufficient { color: #dc3845; border-color: #f2c4c8; }.mobile-wallet-button i { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #ed3545; }
  .mobile-wallet-popover { position: absolute; z-index: 170; top: calc(100% + 10px); right: 0; width: min(300px, calc(100vw - 24px)); padding: 14px; border: 1px solid #dce6f5; border-radius: 16px; background: #fff; box-shadow: 0 20px 44px rgba(20,47,96,.2); }.mobile-wallet-popover[hidden] { display: none; }.mobile-wallet-heading { padding: 4px 4px 12px; border-bottom: 1px solid #e7edf6; }.mobile-wallet-heading span,.mobile-wallet-row span { color: #7283a0; font-size: 11px; font-weight: 700; }.mobile-wallet-heading strong { display: block; margin-top: 3px; color: #10275a; font-size: 24px; }.mobile-wallet-heading small { color: #71819c; font-size: 11px; }.mobile-wallet-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #eef2f8; }.mobile-wallet-row strong { color: #17366f; font-size: 12px; }.mobile-wallet-warning { margin: 11px 4px; padding: 9px; color: #b52d3a; border-radius: 9px; background: #fff0f1; font-size: 11px; line-height: 1.4; }.mobile-wallet-action { min-height: 42px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; color: #1558d9; border-radius: 9px; font-size: 12px; font-weight: 800; text-decoration: none; }.mobile-wallet-action:hover,.mobile-wallet-action:focus-visible { background: #f3f7ff; outline: none; }.mobile-wallet-action b { font-size: 20px; font-weight: 400; }
  .billing-content { width: calc(100% - 28px); padding: 28px 0 48px; }.billing-page-header { margin-bottom: 20px; }.billing-page-header h1 { font-size: 32px; }.billing-page-header .page-subtitle { font-size: 14px; }.billing-summary-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }.billing-summary-card { min-height: 112px; padding: 20px 18px; }.billing-card-icon { width: 48px; height: 48px; flex-basis: 48px; }.billing-summary-card h2 { margin-bottom: 5px; font-size: 13px; }.billing-summary-card strong { font-size: 24px; }.billing-pricing-card { grid-template-columns: 1fr; gap: 24px; padding: 22px 18px; }.billing-pricing-copy { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid #e1e9f5; }.billing-pricing-copy h2 { font-size: 21px; }.billing-pricing-copy p { font-size: 14px; }.billing-presets button { flex: 1; min-width: 0; }.billing-transactions { padding: 18px 12px 12px; }.billing-table-wrap { display: none; }.billing-mobile-transactions { display: grid; gap: 10px; }.billing-transaction-card { padding: 14px; border: 1px solid #e0e8f4; border-radius: 12px; background: #fbfdff; }.billing-transaction-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.billing-transaction-card time { display: block; margin: 8px 0 12px; color: #71819d; font-size: 11px; }.billing-transaction-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.billing-transaction-card dl div { min-width: 0; }.billing-transaction-card dt { color: #7a8aa4; font-size: 10px; }.billing-transaction-card dd { margin: 3px 0 0; color: #29456f; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }.billing-transaction-card p { margin: 12px 0 0; padding-top: 10px; color: #5e7395; border-top: 1px solid #e8eef7; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
}
@media (max-width: 380px) { .billing-content { width: calc(100% - 20px); }.billing-page-header h1 { font-size: 29px; }.billing-summary-card { padding: 17px 14px; }.billing-summary-card strong { font-size: 22px; }.billing-pricing-card { padding: 18px 14px; }.billing-presets { gap: 6px; }.billing-presets button { padding: 0 8px; font-size: 12px; } }

/* Final mobile drawer override: keep the shared navigation out of document flow. */
@media (max-width: 1020px) {
  body:has(.unified-sidebar) { overflow-x: hidden; }
  body:has(.unified-sidebar) .saas-layout { display: block; min-height: 100vh; }
  body:has(.unified-sidebar) .unified-sidebar {
    position: fixed !important;
    z-index: 140 !important;
    inset: 0 auto 0 0 !important;
    width: min(286px, 88vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-105%) !important;
    transition: transform 220ms ease;
  }
  body:has(.unified-sidebar) .unified-sidebar.is-open { transform: translateX(0) !important; }
  body:has(.unified-sidebar) .unified-mobile-menu {
    position: fixed;
    z-index: 130;
    top: 10px;
    left: 12px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #14366f;
    border: 1px solid #dbe6f6;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(40,78,139,.12);
  }
  body:has(.unified-sidebar) .unified-mobile-menu svg { width: 22px; height: 22px; }
  body:has(.unified-sidebar) .unified-mobile-overlay {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: block;
    background: rgba(7, 23, 55, .48);
  }
  body:has(.unified-sidebar) .unified-mobile-overlay[hidden] { display: none !important; }
  body:has(.unified-sidebar) .global-account-menu { z-index: 150; }
  body:has(.unified-sidebar) .content-shell { width: 100%; min-width: 0; }
}

/* Shared mobile safety layer for all application pages. */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }
  img, svg, video, canvas { max-width: 100%; }
  .content-shell, .billing-content { width: 100%; min-width: 0; max-width: 100%; }
  .content-shell { padding-left: 14px; padding-right: 14px; }
  .page-header { min-width: 0; margin-bottom: 18px; }
  .page-header h1, .billing-page-header h1 { max-width: 100%; font-size: clamp(28px, 8vw, 36px); line-height: 1.12; overflow-wrap: anywhere; }
  .page-subtitle { max-width: 100%; line-height: 1.5; overflow-wrap: anywhere; }
  .panel, .hero-panel, .side-card, .focused-integration-card { min-width: 0; max-width: 100%; border-radius: 16px; }
  .page-grid, .integration-grid, .order-form-layout, .confirm-grid, .focused-form-grid, .edit-grid, .team-create-card, .team-create-form, .team-agent-manage, .billing-pricing-card { grid-template-columns: minmax(0, 1fr) !important; }
  .order-form-layout, .team-create-card { display: block; }
  .order-form-layout > *, .team-create-card > * { width: 100%; min-width: 0; margin-bottom: 14px; }
  .order-form-layout > :last-child, .team-create-card > :last-child { margin-bottom: 0; }
  .sticky-side-card, .focused-integration-form .sticky-side-card { position: static; top: auto; }
  .stack-form, .compact-grid { min-width: 0; }
  .compact-grid, .focused-form-grid { gap: 13px; }
  label, label > input, label > select, label > textarea, input, select, textarea { min-width: 0; max-width: 100%; }
  input, select, textarea, .btn, button, .actions a { min-height: 44px; }
  input, select, textarea { width: 100%; font-size: 16px; }
  textarea { min-height: 92px; }
  .actions, .focused-form-actions, .order-form-actions, .dashboard-store-actions, .dashboard-orders-heading, .dashboard-header-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .actions > *, .focused-form-actions > *, .order-form-actions > *, .dashboard-store-actions > * { flex: 1 1 180px; min-width: 0; }
  .actions .btn, .focused-form-actions .btn, .order-form-actions .btn { width: 100%; }
  .dashboard-store-card, .dashboard-orders-panel, .dashboard-rail-card, .overview-chart-card { min-width: 0; max-width: 100%; }
  .dashboard-body-grid, .overview-body-grid { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
  .dashboard-orders-table-wrap, .billing-table-wrap, .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dashboard-orders-table, .billing-transaction-table { min-width: 680px; }
  .dashboard-mobile-orders { width: 100%; min-width: 0; }
  .dashboard-mobile-order, .dashboard-mobile-order-head, .dashboard-mobile-primary-actions, .dashboard-mobile-actions { min-width: 0; max-width: 100%; }
  .dashboard-mobile-order-head { gap: 8px; }
  .dashboard-mobile-order-head button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dashboard-mobile-primary-actions, .dashboard-mobile-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dashboard-mobile-primary-actions > *, .dashboard-mobile-actions > * { min-width: 0; width: 100%; }
  .dashboard-add-order-modal { width: calc(100vw - 24px); max-width: 520px; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .dashboard-add-order-form { grid-template-columns: minmax(0, 1fr) !important; }
  .dashboard-add-order-form .full { grid-column: auto; }
  .delivery-provider-grid, .delivery-company-grid, .delivery-capabilities-grid, .focused-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .delivery-checklist-heading { display: grid; gap: 16px; }
  .checkbox-field { min-width: 0; align-items: flex-start; }
  .checkbox-field span { overflow-wrap: anywhere; }
  .provider-modal, .delivery-provider-modal, .integration-modal { width: calc(100vw - 24px); max-width: 520px; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .account-menu-popover, .mobile-wallet-popover { max-width: calc(100vw - 24px); }
  .dashboard-chart-wrap, .overview-chart-plot, .overview-chart-svg { max-width: 100%; overflow: hidden; }
  .overview-chart-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .overview-chart-toggle { margin-left: auto; }
  .overview-chart-legend { flex-wrap: wrap; gap: 8px 14px; }
  .help-card, .dashboard-help-card { max-width: 100%; }
  .auth-shell { width: min(100% - 24px, 520px); margin: 12px auto; }
  .auth-card { padding: 24px 18px; }
  .auth-card h2 { font-size: 28px; line-height: 1.15; }
  .team-agent-head { min-width: 0; flex-wrap: wrap; }
  .team-agent-details, .team-activity { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .content-shell { padding-left: 10px; padding-right: 10px; }
  .page-header h1, .billing-page-header h1 { font-size: 28px; }
  .delivery-provider-grid, .delivery-company-grid, .delivery-capabilities-grid, .focused-provider-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .dashboard-mobile-primary-actions, .dashboard-mobile-actions { grid-template-columns: minmax(0, 1fr); }
  .dashboard-mobile-primary-actions > *, .dashboard-mobile-actions > * { min-height: 44px; }
  .overview-chart-toggle { margin-left: 0; }
}

/* Dashboard mobile correction: prevent desktop grid rules from creating a blank top area. */
@media (max-width: 768px) {
  body.dashboard-page .saas-layout { display: block !important; min-height: 0 !important; }
  body.dashboard-page .dashboard-content,
  body.dashboard-page .overview-content {
    display: block !important;
    float: none !important;
    padding: 10px 12px 108px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  body.dashboard-page .dashboard-mobile-header {
    display: flex !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 0 14px !important;
  }
  body.dashboard-page .dashboard-header,
  body.dashboard-page .overview-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .dashboard-page .saas-layout,
  .dashboard-v2 .saas-layout { display: block !important; min-height: 0 !important; }
  .dashboard-page .sidebar,
  .dashboard-page .dashboard-sidebar,
  .dashboard-v2 .dashboard-sidebar {
    position: fixed !important;
    z-index: 140 !important;
    inset: 0 auto 0 0 !important;
    width: min(286px, 88vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    transform: translateX(-105%) !important;
  }
  .dashboard-page .sidebar.is-open,
  .dashboard-page .dashboard-sidebar.is-open,
  .dashboard-v2 .dashboard-sidebar.is-open { transform: translateX(0) !important; }
  .dashboard-v2 .dashboard-content,
  .dashboard-page .content-shell,
  .overview-page .dashboard-content {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px 108px !important;
    position: relative !important;
    top: 0 !important;
  }
  .dashboard-v2 .dashboard-mobile-header {
    min-height: 50px;
    margin: 0 0 16px;
    display: flex !important;
  }
  .dashboard-v2 .dashboard-header { margin: 0 0 20px !important; }
  .overview-page .dashboard-header { margin-bottom: 20px !important; }
  .dashboard-v2 .dashboard-header h1,
  .overview-page .dashboard-header h1 { font-size: clamp(29px, 8vw, 36px) !important; }
  .dashboard-v2 .dashboard-header .page-subtitle,
  .overview-page .dashboard-header .page-subtitle { font-size: 14px !important; line-height: 1.5; }
  .dashboard-v2 .dashboard-global-controls { display: block; }
}