:root {
  --ink: #111827;
  --ink-soft: #344054;
  --muted: #667085;
  --line: #e5e9f0;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --navy: #0a1223;
  --navy-2: #111c35;
  --violet: #665cf6;
  --violet-dark: #5147dc;
  --violet-soft: #eeecff;
  --cyan: #22d3ee;
  --green: #12b76a;
  --green-soft: #ecfdf3;
  --amber: #f79009;
  --amber-soft: #fffaeb;
  --red: #d92d20;
  --red-soft: #fef3f2;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .04);
  --shadow-lg: 0 18px 45px rgba(16, 24, 40, .09);
}

* { box-sizing: border-box; }
html { min-height: 100%; font-size: 15px; }
body { min-height: 100%; margin: 0; color: var(--ink); background: #f3f6fb; font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
code { color: #5147dc; font-family: "Cascadia Code", Consolas, monospace; font-size: .88em; overflow-wrap: anywhere; }
small { color: var(--muted); }

.gateway-header { position: sticky; top: 0; z-index: 100; color: #d7dceb; background: rgba(10, 18, 35, .97); border-bottom: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(16px); }
.gateway-header-inner { width: min(1480px, calc(100% - 48px)); min-height: 76px; margin: auto; display: flex; align-items: center; gap: 2rem; }
.gateway-brand { display: inline-flex; align-items: center; gap: .8rem; min-width: 190px; color: white; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #756cff, #5147dc); box-shadow: 0 8px 20px rgba(102, 92, 246, .34); }
.brand-mark svg { width: 27px; height: 27px; fill: none; stroke: white; stroke-width: 2.2; stroke-linejoin: round; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 1.12rem; letter-spacing: -.02em; }
.brand-copy small { margin-top: .35rem; color: #8992aa; font-size: .61rem; font-weight: 800; letter-spacing: .17em; }
.gateway-nav { align-self: stretch; display: flex; align-items: stretch; gap: .2rem; }
.gateway-nav a { position: relative; display: flex; align-items: center; padding: 0 .85rem; color: #aab2c7; font-size: .89rem; font-weight: 650; text-decoration: none; transition: color .18s; }
.gateway-nav a:hover { color: white; }
.gateway-nav a.active { color: white; }
.gateway-nav a.active::after { position: absolute; right: .85rem; bottom: 0; left: .85rem; height: 3px; border-radius: 3px 3px 0 0; background: var(--cyan); content: ""; }
.gateway-nav .simulator-nav-link { gap: .35rem; color: #8de7dc; }
.gateway-nav .simulator-nav-link span { font-size: .78rem; transition: transform .18s ease; }
.gateway-nav .simulator-nav-link:hover span { transform: translate(2px, -2px); }
.gateway-header-status { margin-left: auto; display: flex; align-items: center; gap: .65rem; }
.api-health, .automation-badge { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .36rem .62rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.api-health { color: #9aebc5; background: rgba(18, 183, 106, .11); border: 1px solid rgba(18, 183, 106, .23); }
.api-health i, .automation-badge span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(18, 183, 106, .1); }
.automation-badge { color: #c4c9d7; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); text-decoration: none; letter-spacing: 0; }
.automation-badge.is-enabled { color: #9aebc5; }
.automation-badge.is-disabled { color: #fdb7ad; }

.gateway-main { width: min(1380px, calc(100% - 48px)); min-height: calc(100vh - 145px); margin: 0 auto; padding: 2.3rem 0 4rem; }
.gateway-footer { width: min(1380px, calc(100% - 48px)); min-height: 76px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; color: var(--muted); border-top: 1px solid #dfe4ec; font-size: .8rem; }
.gateway-footer > div:first-child { display: grid; }
.gateway-footer strong { color: var(--ink-soft); }
.footer-meta { display: flex; gap: 1.4rem; }
.flash { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid; border-radius: 12px; background: white; box-shadow: var(--shadow-sm); font-size: .82rem; font-weight: 650; }
.flash > span { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; color: white; border-radius: 50%; font-weight: 900; }
.flash.success { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.flash.success > span { background: var(--green); }
.flash.error { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.flash.error > span { background: var(--red); }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: #5b55cc; font-size: .7rem; font-weight: 850; letter-spacing: .15em; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(102, 92, 246, .12); }
.section-kicker { display: block; margin-bottom: .25rem; color: #667085; font-size: .64rem; font-weight: 850; letter-spacing: .13em; }
.dashboard-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, .65fr); gap: 3rem; padding: 3.1rem; color: white; border-radius: 25px; background: radial-gradient(circle at 16% 0%, rgba(102,92,246,.45), transparent 36%), radial-gradient(circle at 100% 100%, rgba(34,211,238,.13), transparent 35%), linear-gradient(135deg, #101b36, #07101f 67%); box-shadow: 0 24px 60px rgba(10, 18, 35, .2); }
.dashboard-hero::after { position: absolute; top: -110px; right: 34%; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; content: ""; }
.dashboard-hero .eyebrow { color: #b9b5ff; }
.dashboard-hero .eyebrow-dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.12); }
.dashboard-hero-copy { position: relative; z-index: 1; align-self: center; }
.dashboard-hero h1 { max-width: 720px; margin: .85rem 0 1rem; font-size: clamp(2.6rem, 4.7vw, 5rem); font-weight: 760; line-height: .98; letter-spacing: -.055em; }
.dashboard-hero h1 span { color: #9d97ff; }
.dashboard-hero-copy > p { max-width: 700px; margin: 0; color: #adb7cd; font-size: 1.05rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.65rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 43px; padding: .7rem 1rem; border: 0; border-radius: 10px; font-size: .86rem; font-weight: 760; text-decoration: none; cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: linear-gradient(135deg, #7168ff, #5b51e5); box-shadow: 0 10px 25px rgba(102,92,246,.28); }
.button.primary:hover { color: white; box-shadow: 0 13px 30px rgba(102,92,246,.36); }
.button.subtle { color: #403b9c; background: white; border: 1px solid #dcdcf1; box-shadow: var(--shadow-sm); }
.dashboard-hero .button.subtle { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.17); box-shadow: none; }
.button.secondary { color: #403b9c; background: var(--violet-soft); }
.button.ghost { color: var(--violet-dark); background: transparent; }
.button.full-width, .full-width { width: 100%; }
.success-button { color: white; background: #079455; }
.danger-button { color: white; background: #d92d20; }

.system-overview-card { position: relative; z-index: 1; padding: 1.35rem; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.system-card-header, .panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.system-card-header h2 { margin: .2rem 0 0; font-size: 1.12rem; }
.system-card-header .section-kicker { color: #77839d; }
.live-indicator { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; color: #75e0ad; border-radius: 999px; background: rgba(18,183,106,.11); font-size: .64rem; font-weight: 850; letter-spacing: .09em; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #32d583; box-shadow: 0 0 0 4px rgba(50,213,131,.12); }
.system-check-list { display: grid; margin-top: .9rem; }
.system-check { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: .65rem; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.system-check:first-child { border-top: 0; }
.system-check div { display: grid; }
.system-check strong { font-size: .82rem; }
.system-check small { color: #8590a9; font-size: .7rem; }
.system-check b { color: #75e0ad; font-size: .7rem; }
.check-icon, .pause-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; font-size: .75rem; font-weight: 900; }
.check-icon { color: #75e0ad; background: rgba(18,183,106,.12); }
.pause-icon { color: #fdb022; background: rgba(247,144,9,.12); }
.text-success { color: #75e0ad !important; }
.text-warning { color: #fdb022 !important; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.metric-card { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: .9rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.metric-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--violet-dark); border-radius: 12px; background: var(--violet-soft); font-size: 1.15rem; font-weight: 850; }
.metric-active .metric-icon { color: #026aa2; background: #e0f2fe; }
.metric-delivered .metric-icon { color: #067647; background: #dcfae6; }
.metric-cancelled .metric-icon { color: #b42318; background: #fee4e2; }
.metric-card > div:last-child { display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; align-items: center; }
.metric-card span { color: var(--muted); font-size: .72rem; font-weight: 700; }
.metric-card strong { grid-row: 1 / span 2; grid-column: 2; font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; }
.metric-card small { font-size: .66rem; }

.dashboard-content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .65fr); gap: 1.2rem; }
.panel, .card { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-sm); }
.panel { padding: 1.3rem; }
.card { padding: 1.35rem; }
.panel-header { margin-bottom: 1rem; }
.panel-header h2 { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 760; letter-spacing: -.02em; }
.text-link { color: #5147dc; font-size: .76rem; font-weight: 750; text-decoration: none; }
.empty-state { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.empty-icon { width: 50px; height: 50px; display: grid; place-items: center; color: #5b55cc; border-radius: 15px; background: var(--violet-soft); font-size: 1.8rem; }
.empty-state h3 { margin: .85rem 0 .3rem; font-size: 1rem; }
.empty-state p { max-width: 520px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }

.professional-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.professional-table th { padding: .65rem .7rem; color: #8490a4; border-top: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; background: #fafbfc; font-size: .62rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.professional-table td { padding: .8rem .7rem; color: var(--ink-soft); border-bottom: 1px solid #edf0f5; vertical-align: middle; }
.professional-table tbody tr:last-child td { border-bottom: 0; }
.professional-table tbody tr:hover td { background: #fafbff; }
.professional-table td strong, .professional-table td small { display: block; }
.professional-table td small { margin-top: .14rem; font-size: .67rem; }
.professional-table a { text-decoration: none; }
.row-action { width: 31px; height: 31px; display: grid; place-items: center; margin-left: auto; color: #5147dc; border: 1px solid #dcdeeb; border-radius: 8px; background: white; font-size: 1rem; font-weight: 800; }
.status-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .31rem .55rem; color: #344054; border: 1px solid #e3e7ee; border-radius: 999px; background: #f8fafc; font-size: .66rem; font-weight: 750; white-space: nowrap; }
.status-chip::before { width: 6px; height: 6px; border-radius: 50%; background: #98a2b3; content: ""; }
.status-chip[data-status="Delivered"] { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.status-chip[data-status="Delivered"]::before { background: #12b76a; }
.status-chip[data-status="Cancelled"] { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.status-chip[data-status="Cancelled"]::before { background: #f04438; }
.status-chip[data-status="OutForDelivery"], .status-chip[data-status="InTransit"] { color: #026aa2; border-color: #b9e6fe; background: #f0f9ff; }
.status-chip[data-status="OutForDelivery"]::before, .status-chip[data-status="InTransit"]::before { background: #0ba5ec; }
.status-chip[data-status="PickupRequested"], .status-chip[data-status="PickedUp"] { color: #6941c6; border-color: #d9d6fe; background: #f4f3ff; }
.status-chip[data-status="PickupRequested"]::before, .status-chip[data-status="PickedUp"]::before { background: #7f56d9; }

.security-flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.security-flow li { position: relative; display: grid; grid-template-columns: 35px 1fr; gap: .75rem; padding: .3rem 0 1.2rem; }
.security-flow li:not(:last-child)::after { position: absolute; top: 31px; bottom: 2px; left: 16px; width: 1px; background: #e0e2f6; content: ""; }
.security-flow li > span { width: 34px; height: 34px; display: grid; place-items: center; color: #5147dc; border-radius: 10px; background: var(--violet-soft); font-size: .65rem; font-weight: 850; }
.security-flow strong { font-size: .8rem; }
.security-flow p { margin: .2rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.endpoint-box { padding: .8rem; border: 1px solid #e1e3f6; border-radius: 10px; background: #f8f7ff; }
.endpoint-box small, .endpoint-box code { display: block; }
.endpoint-box small { margin-bottom: .25rem; font-size: .58rem; font-weight: 850; letter-spacing: .08em; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 1.3rem 0 2rem; }
.page-heading h1 { margin: .55rem 0 .55rem; font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 760; letter-spacing: -.05em; }
.page-heading p { max-width: 790px; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.heading-security-badge { display: flex; align-items: center; gap: .7rem; min-width: 245px; padding: .9rem 1rem; border: 1px solid #dfe2f5; border-radius: 13px; background: #f8f7ff; }
.shield-icon { width: 34px; height: 34px; display: grid; place-items: center; color: white; border-radius: 10px; background: linear-gradient(145deg, #756cff, #5147dc); }
.heading-security-badge div { display: grid; }
.heading-security-badge strong { font-size: .78rem; }
.heading-security-badge small { font-size: .66rem; }

.credential-layout { display: grid; grid-template-columns: minmax(350px, .72fr) minmax(0, 1.28fr); gap: 1.2rem; align-items: stretch; }
.credential-form-panel, .credential-result-panel { min-height: 480px; }
.step-badge, .table-count { padding: .3rem .52rem; color: #5147dc; border-radius: 999px; background: var(--violet-soft); font-size: .63rem; font-weight: 800; }
.field { margin: 1rem 0; }
.field label, .credential-field label, .automation-form label { display: block; margin-bottom: .38rem; color: #344054; font-size: .72rem; font-weight: 750; }
.field input, .field textarea, .credential-field input, .credential-field textarea, .automation-form input, textarea { width: 100%; min-height: 43px; padding: .7rem .78rem; color: var(--ink); border: 1px solid #cfd5df; border-radius: 9px; background: white; font: inherit; font-size: .82rem; transition: border .16s, box-shadow .16s; }
.field textarea, .credential-field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .credential-field input:focus, .credential-field textarea:focus, .automation-form input:focus { outline: none; border-color: #8178f8; box-shadow: 0 0 0 3px rgba(102,92,246,.12); }
.field small { display: block; margin-top: .3rem; font-size: .66rem; }
.input-with-suffix { position: relative; }
.input-with-suffix input { padding-right: 3.5rem; }
.input-with-suffix span { position: absolute; top: 50%; right: .75rem; color: var(--muted); font-size: .72rem; transform: translateY(-50%); }
.validation { display: block; margin-top: .3rem; color: #b42318; font-size: .68rem; }
.validation-summary { margin-bottom: .8rem; padding: .7rem; color: #b42318; border: 1px solid #fecdca; border-radius: 9px; background: #fef3f2; font-size: .75rem; }
.validation-summary:empty { display: none; }
.validation-summary-valid { display: none; }
.environment-notice { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; padding: .75rem; color: #344054; border: 1px solid #d5d9f0; border-radius: 10px; background: #f7f7ff; }
.environment-notice > span { padding: .25rem .4rem; color: white; border-radius: 6px; background: #665cf6; font-size: .58rem; font-weight: 850; letter-spacing: .08em; }
.environment-notice div { display: grid; }
.environment-notice strong { font-size: .72rem; }
.environment-notice small { font-size: .64rem; }
.environment-notice.compact { margin: 0; }
.credential-placeholder { height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.placeholder-lock { width: 59px; height: 59px; display: grid; place-items: center; color: #665cf6; border: 1px solid #d9d6fe; border-radius: 18px; background: var(--violet-soft); font-size: 1.7rem; }
.credential-placeholder h3 { margin: 1rem 0 .35rem; font-size: 1rem; }
.credential-placeholder p { max-width: 500px; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.6; }
.token-flow-preview { display: flex; align-items: center; gap: .55rem; margin-top: 1.4rem; color: #667085; font-size: .59rem; font-weight: 800; }
.token-flow-preview span { padding: .38rem .5rem; border: 1px solid #e0e3ea; border-radius: 7px; background: #fafbfc; }
.token-flow-preview i { color: #9ca3b5; font-style: normal; }
.credential-success-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.success-check { width: 40px; height: 40px; display: grid; place-items: center; color: #067647; border-radius: 12px; background: #dcfae6; font-size: 1.05rem; font-weight: 900; }
.success-label { color: #067647; font-size: .61rem; font-weight: 850; letter-spacing: .1em; }
.credential-success-heading h3 { margin: .1rem 0 0; font-size: 1.05rem; }
.credential-meta { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin-bottom: .85rem; padding: .65rem .75rem; border: 1px solid #edf0f5; border-radius: 9px; background: #fafbfc; }
.credential-meta span, .credential-meta small { display: block; }
.credential-meta small { margin-bottom: .15rem; font-size: .56rem; font-weight: 850; letter-spacing: .08em; }
.credential-meta code, .credential-meta strong { font-size: .68rem; }
.credential-field { margin: .8rem 0; }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; align-items: stretch; }
.secret-copy-field { grid-template-columns: minmax(0, 1fr) auto auto; }
.copy-field button { min-width: 70px; padding: .5rem .65rem; color: #5147dc; border: 1px solid #d6d7e9; border-radius: 8px; background: #f8f7ff; font-size: .68rem; font-weight: 750; cursor: pointer; }
.copy-field button.copied { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.critical-notice { display: grid; margin-top: .85rem; padding: .7rem .8rem; color: #93370d; border: 1px solid #fedf89; border-radius: 9px; background: #fffaeb; font-size: .7rem; }
.critical-notice span { margin-top: .1rem; color: #b54708; }
.token-endpoint { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; padding: .6rem .75rem; border-radius: 9px; background: #0f1830; }
.token-endpoint div { display: grid; }
.token-endpoint small { color: #78849e; font-size: .54rem; font-weight: 850; letter-spacing: .08em; }
.token-endpoint code { color: #d5d2ff; font-size: .68rem; }
.token-endpoint > span { padding: .24rem .45rem; color: #9aebc5; border-radius: 999px; background: rgba(18,183,106,.12); font-size: .61rem; font-weight: 800; }
.integration-guide-panel { margin-top: 1.2rem; }
.integration-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.integration-steps > div { min-height: 132px; padding: .85rem; border: 1px solid #e8eaf0; border-radius: 11px; background: #fafbfc; }
.integration-steps > div > span { display: block; margin-bottom: .75rem; color: #665cf6; font-size: .63rem; font-weight: 850; }
.integration-steps strong { font-size: .75rem; }
.integration-steps p { margin: .3rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }

.app-alert { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid; border-radius: 11px; font-size: .78rem; }
.app-alert > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.app-alert.success { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.app-alert.success > span { color: white; background: #12b76a; }
.app-alert.danger { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.app-alert.danger > span { color: white; background: #f04438; }
.operation-summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow-sm); }
.operation-summary-strip > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-left: 1px solid var(--line); }
.operation-summary-strip > div:first-child { border-left: 0; }
.operation-summary-strip small { font-size: .59rem; font-weight: 850; letter-spacing: .08em; }
.operation-summary-strip strong { font-size: 1.1rem; }
.automation-panel { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(260px, 330px); align-items: center; gap: 1.25rem; margin-bottom: 1.2rem; padding: 1.25rem; overflow: hidden; border: 1px solid; border-radius: 16px; box-shadow: var(--shadow-sm); }
.automation-panel.automation-enabled { border-color: #a6f4c5; background: linear-gradient(100deg, #f0fdf5, #ffffff 67%); }
.automation-panel.automation-disabled { border-color: #fedf89; background: linear-gradient(100deg, #fffaeb, #ffffff 67%); }
.automation-visual { position: relative; width: 62px; height: 62px; display: grid; place-items: center; }
.automation-light { position: relative; z-index: 2; width: 22px; height: 22px; border: 6px solid white; border-radius: 50%; }
.automation-enabled .automation-light { background: #12b76a; box-shadow: 0 0 0 2px #6ce9a6, 0 0 20px rgba(18,183,106,.35); }
.automation-disabled .automation-light { background: #f79009; box-shadow: 0 0 0 2px #fec84b, 0 0 20px rgba(247,144,9,.26); }
.automation-rings, .automation-rings::before { position: absolute; border: 1px solid; border-radius: 50%; content: ""; }
.automation-rings { inset: 5px; opacity: .25; }
.automation-rings::before { inset: 8px; }
.automation-enabled .automation-rings { color: #12b76a; }
.automation-disabled .automation-rings { color: #f79009; }
.automation-heading { display: flex; align-items: center; gap: .65rem; }
.automation-heading > span { font-size: .86rem; font-weight: 800; }
.automation-state { padding: .28rem .48rem; border-radius: 999px; font-size: .58rem; letter-spacing: .08em; }
.automation-enabled .automation-state { color: #067647; background: #dcfae6; }
.automation-disabled .automation-state { color: #b54708; background: #fef0c7; }
.automation-summary p { margin: .45rem 0; color: var(--ink-soft); font-size: .75rem; }
.automation-route { display: flex; flex-wrap: wrap; align-items: center; gap: .38rem; color: #667085; font-size: .62rem; font-weight: 750; }
.automation-route span { padding: .22rem .38rem; border: 1px solid #e3e6ed; border-radius: 6px; background: rgba(255,255,255,.75); }
.automation-route i { color: #98a2b3; font-style: normal; }
.automation-schedule { display: block; margin-top: .45rem; font-size: .62rem; }
.automation-form { display: grid; gap: .55rem; padding: .75rem; border: 1px solid rgba(16,24,40,.08); border-radius: 11px; background: rgba(255,255,255,.72); }
.operations-table-panel { padding-bottom: .5rem; }
.table-count { color: #667085; background: #f2f4f7; }

.hero { max-width: 980px; padding: 1.3rem 0 2rem; }
.hero h1 { margin: .5rem 0 .55rem; font-size: clamp(2.2rem, 4vw, 3.7rem); font-weight: 760; letter-spacing: -.05em; }
.hero p { max-width: 800px; color: var(--muted); line-height: 1.7; }
.badge, .success-pill, .tracking-status-pill { display: inline-flex; padding: .36rem .58rem; color: #5147dc; border-radius: 999px; background: var(--violet-soft); font-size: .64rem; font-weight: 850; letter-spacing: .09em; }
.success-pill, .tracking-status-pill { color: #067647; background: #dcfae6; }
.grid { display: grid; gap: 1.2rem; }
.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; margin-left: .55rem; padding: 0 0 1rem 1.25rem; border-left: 1px solid #d9d6fe; }
.timeline li::before { position: absolute; top: 2px; left: -5px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: #665cf6; box-shadow: 0 0 0 2px #d9d6fe; content: ""; }
.timeline li strong, .timeline li span, .timeline li small { display: block; }
.timeline li strong { font-size: .76rem; }
.timeline li span { margin-top: .15rem; color: var(--ink-soft); font-size: .72rem; }
.timeline li small { margin-top: .2rem; font-size: .63rem; }
.tracking-search-card { max-width: 820px; margin-bottom: 1.2rem; }
.tracking-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: end; }
.tracking-search-form .field { margin: 0; }
.tracking-result { margin-top: 1.2rem; }
.alert { border-radius: 10px; font-size: .78rem; }
.muted { color: var(--muted); }
.warning { color: #b54708; }
.narrow { max-width: 780px; }

@media (max-width: 1120px) {
  .gateway-header-inner { gap: 1rem; }
  .gateway-nav a { padding: 0 .55rem; font-size: .82rem; }
  .gateway-nav a.active::after { right: .55rem; left: .55rem; }
  .api-health { display: none; }
  .dashboard-hero { grid-template-columns: 1fr; }
  .dashboard-content-grid { grid-template-columns: 1fr; }
  .credential-layout { grid-template-columns: 1fr; }
  .integration-steps { grid-template-columns: repeat(2, 1fr); }
  .automation-panel { grid-template-columns: 60px 1fr; }
  .automation-form { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .gateway-header { position: static; }
  .gateway-header-inner { width: min(100% - 28px, 740px); min-height: auto; flex-wrap: wrap; padding: .75rem 0; }
  .gateway-brand { min-width: 0; }
  .gateway-header-status { margin-left: auto; }
  .gateway-nav { order: 3; width: 100%; overflow-x: auto; }
  .gateway-nav a { min-height: 42px; white-space: nowrap; }
  .gateway-main, .gateway-footer { width: min(100% - 28px, 740px); }
  .dashboard-hero { padding: 2rem 1.3rem; border-radius: 19px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-security-badge { width: 100%; }
  .operation-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .operation-summary-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .operation-summary-strip > div:nth-child(4) { border-top: 1px solid var(--line); }
  .two-column, .three-column { grid-template-columns: 1fr; }
  .tracking-search-form { grid-template-columns: 1fr; }
  .gateway-footer { align-items: flex-start; flex-direction: column; padding: 1.2rem 0; }
  .footer-meta { flex-wrap: wrap; gap: .7rem; }
}

@media (max-width: 560px) {
  html { font-size: 14px; }
  .gateway-header-status { width: 100%; margin: 0; }
  .dashboard-hero h1 { font-size: 2.55rem; }
  .system-overview-card { padding: 1rem; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { padding: .9rem; }
  .credential-form-panel, .credential-result-panel { min-height: auto; }
  .credential-placeholder { height: 330px; }
  .credential-meta { grid-template-columns: 1fr; }
  .copy-field, .secret-copy-field { grid-template-columns: 1fr; }
  .copy-field button { min-height: 38px; }
  .token-flow-preview { align-items: stretch; flex-direction: column; }
  .token-flow-preview i { transform: rotate(90deg); }
  .integration-steps { grid-template-columns: 1fr; }
  .operation-summary-strip { grid-template-columns: 1fr; }
  .operation-summary-strip > div { border-top: 1px solid var(--line); border-left: 0; }
  .operation-summary-strip > div:first-child { border-top: 0; }
  .automation-panel { grid-template-columns: 1fr; text-align: center; }
  .automation-visual { margin: auto; }
  .automation-heading, .automation-route { justify-content: center; }
}

/* Professional shipment operations v2 */
.status-chip[data-status="DeliveryFailed"],.status-chip[data-status="ReturnInitiated"]{color:#b54708;border-color:#fedf89;background:#fffaeb}.status-chip[data-status="DeliveryFailed"]::before,.status-chip[data-status="ReturnInitiated"]::before{background:#f79009}.status-chip[data-status="Returned"]{color:#475467;border-color:#d0d5dd;background:#f2f4f7}.status-chip[data-status="Damaged"],.status-chip[data-status="Lost"]{color:#b42318;border-color:#fecdca;background:#fef3f2}.status-chip[data-status="Damaged"]::before,.status-chip[data-status="Lost"]::before{background:#f04438}
.operation-summary-strip{grid-template-columns:repeat(6,1fr)}.operation-summary-strip .attention-metric strong{color:#b54708}.route-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.operations-filter{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(170px,.6fr) minmax(150px,.5fr) auto auto;gap:.65rem;align-items:end;margin:0 1.3rem 1rem;padding:1rem;border:1px solid #e7eaf0;border-radius:12px;background:#f8fafc}.operations-filter label{display:block;margin-bottom:.32rem;color:#475467;font-size:.65rem;font-weight:800}.operations-filter input,.operations-filter select,.field select{width:100%;height:43px;padding:.65rem .75rem;color:var(--ink);border:1px solid #cfd5df;border-radius:9px;background:#fff;font:inherit;font-size:.78rem}.operations-filter input:focus,.operations-filter select:focus,.field select:focus{outline:none;border-color:#8178f8;box-shadow:0 0 0 3px rgba(102,92,246,.12)}
.operation-detail-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1rem;padding:1.5rem 1.7rem;color:#fff;border-radius:18px;background:radial-gradient(circle at 15% 0,rgba(102,92,246,.45),transparent 34%),linear-gradient(135deg,#111d39,#07101f);box-shadow:0 18px 45px rgba(10,18,35,.16)}.operation-detail-hero.needs-attention{background:radial-gradient(circle at 15% 0,rgba(247,144,9,.34),transparent 34%),linear-gradient(135deg,#2d2319,#111827)}.operation-detail-hero h1{margin:.7rem 0 .25rem;font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-.045em}.operation-detail-hero p{margin:0;color:#b6c0d4}.detail-hero-actions{display:flex;flex-wrap:wrap;gap:.55rem}.operation-detail-hero .button.subtle{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);box-shadow:none}
.shipment-progress-card{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-bottom:1rem;padding:1rem}.shipment-progress-card>div{position:relative;display:grid;justify-items:center;gap:.4rem;color:#98a2b3;font-size:.65rem;text-align:center}.shipment-progress-card>div::after{position:absolute;z-index:0;top:14px;left:calc(50% + 17px);width:calc(100% - 34px);height:2px;background:#e4e7ec;content:""}.shipment-progress-card>div:last-child::after{display:none}.shipment-progress-card span{position:relative;z-index:1;width:30px;height:30px;display:grid;place-items:center;border:2px solid #d0d5dd;border-radius:50%;background:#fff;font-weight:850}.shipment-progress-card .is-complete{color:#403b9c}.shipment-progress-card .is-complete span{color:#fff;border-color:#665cf6;background:#665cf6}.shipment-progress-card .is-complete::after{background:#8178f8}.shipment-progress-card .is-current span{box-shadow:0 0 0 5px rgba(102,92,246,.12)}
.shipment-fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1rem}.shipment-fact-grid article{display:grid;gap:.25rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow-sm)}.shipment-fact-grid small{font-size:.58rem;font-weight:850;letter-spacing:.08em}.shipment-fact-grid strong{font-size:.82rem}.shipment-fact-grid span{color:var(--muted);font-size:.67rem}
.operation-detail-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.65fr);gap:1rem}.detail-main-column,.detail-side-column{display:grid;align-content:start;gap:1rem}.route-visual{display:grid;grid-template-columns:minmax(170px,1fr) minmax(120px,.75fr) minmax(170px,1fr);align-items:center;gap:1rem;padding:.75rem 0}.route-visual>div{display:grid;grid-template-columns:34px 1fr;column-gap:.65rem}.route-visual>div>span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;color:#fff;border-radius:10px;background:#665cf6;font-size:.7rem;font-weight:900}.route-visual small{font-size:.57rem;font-weight:850;letter-spacing:.08em}.route-visual strong{font-size:.73rem}.route-visual i{display:grid;align-items:center;text-align:center;font-style:normal}.route-visual i b{height:2px;background:repeating-linear-gradient(90deg,#8178f8 0 8px,transparent 8px 13px)}.route-visual i em{margin-top:.3rem;color:#98a2b3;font-size:.53rem;font-style:normal;font-weight:800;letter-spacing:.08em}.rich-timeline li small b{color:#5147dc;font-weight:750}.rich-timeline li[data-status="DeliveryFailed"]::before,.rich-timeline li[data-status="ReturnInitiated"]::before{background:#f79009}.rich-timeline li[data-status="Damaged"]::before,.rich-timeline li[data-status="Lost"]::before{background:#f04438}.manual-operation-card form{display:grid;gap:.2rem}.completed-operation{display:grid;justify-items:center;padding:1.4rem;text-align:center}.completed-operation>span{width:44px;height:44px;display:grid;place-items:center;color:#fff;border-radius:50%;background:#12b76a;font-size:1.2rem}.completed-operation strong{margin-top:.7rem}.completed-operation p{margin:.3rem 0;color:var(--muted);font-size:.72rem}.recipient-card dl,.tracking-help-card dl{display:grid;grid-template-columns:1fr auto;gap:.55rem;margin:0}.recipient-card dt,.tracking-help-card dt{color:var(--muted);font-size:.68rem;font-weight:600}.recipient-card dd,.tracking-help-card dd{margin:0;font-size:.7rem;font-weight:750;text-align:right}
.tracking-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;padding:2.4rem 0 1.4rem}.tracking-hero h1{max-width:780px;margin:.7rem 0 .6rem;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;letter-spacing:-.055em}.tracking-hero p{max-width:720px;color:var(--muted);line-height:1.7}.tracking-package-visual{display:flex;align-items:center;gap:.65rem;padding:1rem 1.2rem;color:#fff;border-radius:18px;background:#101b36;box-shadow:var(--shadow-lg)}.tracking-package-visual span,.tracking-package-visual b{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#665cf6}.tracking-package-visual b{background:#12b76a}.tracking-package-visual i{color:#9d97ff;font-style:normal}.public-tracking-summary{display:grid;grid-template-columns:minmax(300px,1.5fr) repeat(3,minmax(130px,.5fr));align-items:center;gap:1rem;margin:1rem 0;padding:1.2rem;border:1px solid #abefc6;border-radius:15px;background:linear-gradient(100deg,#ecfdf3,#fff);box-shadow:var(--shadow-sm)}.public-tracking-summary.needs-attention{border-color:#fedf89;background:linear-gradient(100deg,#fffaeb,#fff)}.tracking-summary-status h2{margin:.55rem 0 .2rem;font-size:1.45rem}.tracking-summary-status p{margin:0;color:var(--muted);font-size:.72rem}.public-tracking-summary>div:not(:first-child){display:grid;gap:.25rem;padding-left:1rem;border-left:1px solid #d1fadf}.public-tracking-summary small{font-size:.56rem;font-weight:850;letter-spacing:.08em}.public-tracking-summary strong{font-size:.76rem}.public-route-card{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(180px,1fr) minmax(200px,.75fr);align-items:center;gap:1rem;margin-bottom:1rem}.route-stop{display:flex;align-items:center;gap:.7rem}.route-stop>span{width:38px;height:38px;display:grid;place-items:center;color:#fff;border-radius:11px;background:#665cf6;font-size:.7rem;font-weight:900}.route-stop div{display:grid}.route-stop small{font-size:.54rem;font-weight:850;letter-spacing:.08em}.route-stop strong{font-size:.7rem}.route-stop em{color:var(--muted);font-size:.62rem;font-style:normal}.route-line{display:grid;text-align:center}.route-line i{height:2px;background:repeating-linear-gradient(90deg,#8178f8 0 8px,transparent 8px 13px)}.route-line small{margin-top:.35rem}.tracking-detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.45fr);gap:1rem}.tracking-help-card>span{width:42px;height:42px;display:grid;place-items:center;color:#5147dc;border-radius:12px;background:#eeecff;font-size:1.2rem;font-weight:850}.tracking-help-card h3{margin:.8rem 0 .4rem;font-size:1rem}.tracking-help-card p{color:var(--muted);font-size:.72rem;line-height:1.6}
@media(max-width:1120px){.operation-summary-strip{grid-template-columns:repeat(3,1fr)}.operations-filter{grid-template-columns:1fr 1fr}.filter-search{grid-column:1/-1}.operation-detail-layout{grid-template-columns:1fr}.shipment-fact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.operation-summary-strip{grid-template-columns:repeat(2,1fr)}.operations-filter{grid-template-columns:1fr;margin:0 .8rem 1rem}.filter-search{grid-column:auto}.operation-detail-hero{align-items:flex-start;flex-direction:column}.shipment-progress-card{grid-template-columns:repeat(3,1fr);row-gap:1rem}.shipment-progress-card>div:nth-child(3)::after{display:none}.shipment-fact-grid{grid-template-columns:1fr}.route-visual,.public-route-card{grid-template-columns:1fr}.route-visual i,.route-line{min-height:32px}.tracking-hero{grid-template-columns:1fr}.tracking-package-visual{display:none}.public-tracking-summary{grid-template-columns:1fr 1fr}.public-tracking-summary>div:not(:first-child){padding-left:0;border-left:0}.tracking-summary-status{grid-column:1/-1}.tracking-detail-grid{grid-template-columns:1fr}}
.developer-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);align-items:center;gap:2rem;padding:2.4rem 0}.developer-hero h1{max-width:820px;margin:.7rem 0 .65rem;font-size:clamp(2.5rem,5vw,4.8rem);line-height:.98;letter-spacing:-.055em}.developer-hero h1 span{color:#665cf6}.developer-hero p{max-width:760px;color:var(--muted);line-height:1.7}.developer-base-url{display:grid;gap:.35rem;padding:1.2rem;color:#fff;border-radius:15px;background:#101b36;box-shadow:var(--shadow-lg)}.developer-base-url small{color:#8992aa;font-size:.55rem;font-weight:900;letter-spacing:.1em}.developer-base-url code{color:#c9c5ff}.developer-base-url span{color:#9aebc5;font-size:.62rem;font-weight:800}.developer-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem;align-items:start}.developer-nav{position:sticky;top:94px;display:grid;gap:.2rem}.developer-nav strong{margin-bottom:.5rem;font-size:.76rem}.developer-nav a{padding:.52rem .6rem;color:var(--muted);border-radius:7px;font-size:.68rem;text-decoration:none}.developer-nav a:hover{color:#5147dc;background:#f4f3ff}.developer-content{display:grid;gap:1rem}.developer-section{scroll-margin-top:100px}.developer-section>code{margin-left:.4rem}.developer-section h2{margin:.8rem 0 .45rem;font-size:1.1rem}.developer-section p{color:var(--muted);font-size:.72rem;line-height:1.65}.developer-section pre{overflow:auto;margin:.9rem 0 0;padding:1rem;color:#d5d2ff;border-radius:11px;background:#0f1830;font-size:.67rem;line-height:1.55}.developer-section pre code{color:inherit}.api-method{display:inline-flex;padding:.24rem .42rem;border-radius:6px;font-size:.55rem;font-weight:900;letter-spacing:.05em}.api-method.post{color:#067647;background:#dcfae6}.api-method.get{color:#026aa2;background:#e0f2fe}.endpoint-list{display:grid;gap:.5rem;margin-top:.8rem}.endpoint-list>div{display:grid;grid-template-columns:48px minmax(220px,.6fr) 1fr;align-items:center;gap:.5rem;padding:.65rem;border:1px solid #e7eaf0;border-radius:9px}.endpoint-list p{margin:0}.status-code-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.8rem}.status-code-grid>div{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem;border:1px solid #e7eaf0;border-radius:9px}.status-code-grid code{font-size:.62rem}
@media(max-width:820px){.developer-hero{grid-template-columns:1fr}.developer-layout{grid-template-columns:1fr}.developer-nav{position:static}.status-code-grid{grid-template-columns:1fr}.endpoint-list>div{grid-template-columns:48px 1fr}.endpoint-list p{grid-column:2}}

/* Shared utilities */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive .professional-table { min-width: 760px; }
.button.danger { color: white; background: #d92d20; }
.button.full { width: 100%; }
.api-customers-panel { margin-top: 1.2rem; }
.api-customers-panel .storage-note { margin: .85rem 1.3rem 0; font-size: .68rem; }
.api-key-preview { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5147dc; font-family: Consolas, monospace; font-size: .62rem; }
.status-chip.is-expired { color: #667085; border-color: #d0d5dd; background: #f2f4f7; }
.status-chip.is-expired::before { background: #98a2b3; }
.edit-customer-panel.narrow { max-width: 760px; }
.edit-customer-meta { display: grid; gap: .55rem; margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 11px; background: #fafbfc; }
.edit-customer-meta > div { display: grid; grid-template-columns: 140px 1fr; gap: .65rem; align-items: start; }
.edit-customer-meta dt { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 650; }
.edit-customer-meta dd { margin: 0; font-size: .76rem; font-weight: 650; overflow-wrap: anywhere; }
.edit-customer-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .35rem; }
.empty-state.compact { min-height: 180px; padding: 1.5rem; }