:root {
  --bg: #f4f7fd;
  --surface: #fff;
  --surface-soft: #f8faff;
  --ink: #091a38;
  --muted: #65718a;
  --line: #d9e1ef;
  --line-strong: #c6d2e5;
  --primary: #2f55eb;
  --primary-strong: #2345ca;
  --primary-soft: #edf2ff;
  --navy: #152946;
  --success: #087a55;
  --success-soft: #e9f8f2;
  --warning: #9b5d00;
  --warning-soft: #fff6df;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --shadow: 0 8px 28px rgba(9, 26, 56, .055);
  --shadow-lg: 0 24px 80px rgba(9, 26, 56, .2);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100%; margin: 0; color: var(--ink);
  background: radial-gradient(circle at 88% 6%, rgba(47,85,235,.055), transparent 28rem), var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
[hidden] { display: none !important; }

.topbar {
  height: 88px; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 max(28px, calc((100vw - 1195px) / 2));
  background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(145deg, #385ff6, #2747d8); color: #fff;
  box-shadow: 0 8px 18px rgba(47,85,235,.22); font-size: 19px; font-weight: 900;
  letter-spacing: -2px; transform: skew(-4deg);
}
.brand-name { font-size: 27px; font-weight: 850; letter-spacing: -.9px; }
.brand-dot { width: 6px; height: 6px; margin-top: 13px; border-radius: 1px; background: var(--primary); }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.access-pill { padding: 9px 12px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-strong); font-weight: 750; }
.merchant-label { font-weight: 650; }
.avatar-button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef2f8; color: var(--ink);
  font-weight: 850; cursor: pointer;
}
.main-wrap { width: min(1195px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 70px; }
.main-nav {
  height: 82px; display: flex; align-items: flex-end; gap: 35px; padding: 0 4px 18px;
  overflow-x: auto; scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { position: relative; flex: 0 0 auto; padding: 10px 0; color: #536078; font-size: 14px; font-weight: 580; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 99px; background: var(--ink); }
.page { min-height: 620px; }
.page-enter { animation: page-in .22s ease both; }
@keyframes page-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hero-row, .section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 39px 0 32px;
}
.eyebrow { margin: 0 0 9px; color: #5f7191; font-size: 12px; font-weight: 850; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(35px, 4vw, 47px); line-height: 1.08; letter-spacing: -2.1px; }
h2 { margin-bottom: 7px; font-size: 27px; line-height: 1.2; letter-spacing: -.8px; }
h3 { margin-bottom: 5px; font-size: 17px; line-height: 1.3; }
.hero-copy > p:last-child, .section-head p { margin: 0; color: var(--muted); font-size: 16px; }
.hero-actions, .section-actions { display: flex; align-items: center; gap: 9px; }
.button {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 1px solid transparent; border-radius: 11px; background: #fff;
  font-weight: 750; cursor: pointer; transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: none; }
.button.primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(47,85,235,.18); }
.button.primary:hover { background: var(--primary-strong); }
.button.secondary { background: #edf3fb; border-color: var(--line-strong); }
.button.ghost { border-color: var(--line); }
.button.danger { color: var(--danger); background: var(--danger-soft); border-color: #efc8c4; }
.button.small { min-height: 34px; padding: 0 11px; border-radius: 9px; font-size: 12px; }
.button.wide { width: 100%; }
.icon-button {
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line);
  border-radius: 11px; background: #fff; font-size: 22px; cursor: pointer;
}
.mode-select { height: 42px; padding: 0 35px 0 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: #edf3fb; color: var(--ink); font-weight: 700; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.info-banner {
  display: flex; gap: 12px; align-items: flex-start; min-height: 57px; padding: 16px 20px;
  border: 1px solid #c6d6ff; border-radius: 13px; background: rgba(238,243,255,.82); color: #193766;
}
.info-banner strong { color: #1043bd; }
.info-banner.success { border-color: #bde4d4; background: var(--success-soft); color: #1b5a47; }
.info-banner.success strong { color: var(--success); }
.info-banner.warning { border-color: #f0d79b; background: var(--warning-soft); color: #74500d; }
.info-banner.warning strong { color: #8a5500; }

.stats-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 18px; margin-top: 29px; }
.stat-card {
  min-height: 169px; position: relative; overflow: hidden; padding: 27px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.stat-card.featured { color: #fff; border-color: var(--navy); background: var(--navy); }
.stat-card.featured::after { content: ""; position: absolute; width: 190px; height: 190px; right: -80px; bottom: -115px; border-radius: 50%; background: rgba(255,255,255,.055); }
.stat-head { display: flex; justify-content: space-between; color: #5d6981; }
.featured .stat-head { color: #b9d7ff; }
.stat-value { margin-top: 18px; font-size: 38px; line-height: 1; letter-spacing: -1.4px; font-weight: 850; }
.stat-note { margin: 13px 0 0; color: #60708d; font-size: 13px; }
.featured .stat-note { color: #d4e5ff; }
.content-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,.85fr); gap: 18px; margin-top: 20px; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.panel-head { min-height: 73px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 21px; border-bottom: 1px solid #e7ecf4; }
.panel-head h3 { margin: 0; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.chart-wrap { padding: 26px 22px 19px; }
.chart { height: 205px; display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--line); background: linear-gradient(to top, transparent 24%, #edf1f7 25%, transparent 26%, transparent 49%, #edf1f7 50%, transparent 51%, transparent 74%, #edf1f7 75%, transparent 76%); }
.chart-column { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.chart-bar { width: min(36px,72%); min-height: 4px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg,#4b6df3,#2f55eb); }
.chart-label { height: 25px; color: #78849b; font-size: 11px; }
.chart-summary { display: flex; gap: 18px; margin-top: 17px; color: var(--muted); font-size: 13px; }
.chart-summary strong { color: var(--ink); }
.quick-list { padding: 10px 19px 17px; }
.quick-item { display: flex; align-items: center; gap: 13px; padding: 13px 2px; border-bottom: 1px solid #edf0f5; }
.quick-item:last-child { border: 0; }
.quick-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font-weight: 850; }
.quick-copy { flex: 1; min-width: 0; }
.quick-copy strong, .quick-copy span { display: block; }
.quick-copy span { margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #c7cfdb; box-shadow: 0 0 0 4px #f1f3f7; }
.status-dot.connected { background: #0a9668; box-shadow: 0 0 0 4px #e8f8f2; }

.toolbar { display: flex; justify-content: space-between; gap: 14px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.search-box { width: min(350px,100%); height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); outline: none; }
.search-box:focus { border-color: #8ba3f6; box-shadow: 0 0 0 3px rgba(47,85,235,.1); }
.filter-group { display: flex; gap: 8px; }
.filter-select { height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 780px; border-collapse: collapse; }
th { padding: 13px 18px; border-bottom: 1px solid var(--line); background: #f9fbfe; color: #7a879d; font-size: 11px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { padding: 17px 18px; border-bottom: 1px solid #ebeff5; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcff; }
.ref-cell strong, .ref-cell span { display: block; }
.ref-cell strong { font-size: 13px; }
.ref-cell span, .secondary-text { margin-top: 3px; color: var(--muted); font-size: 12px; }
.amount { font-weight: 800; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 27px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 850; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.paid { color: var(--success); background: var(--success-soft); }
.badge.pending { color: var(--warning); background: var(--warning-soft); }
.badge.expired, .badge.failed { color: var(--danger); background: var(--danger-soft); }
.badge.draft { color: #58657d; background: #eef1f6; }
.empty-state { min-height: 280px; display: grid; place-items: center; padding: 42px; text-align: center; }
.empty-state p { max-width: 430px; color: var(--muted); }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 17px; background: var(--primary-soft); color: var(--primary); font-size: 25px; }
.cards-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.feature-card { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.feature-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 850; }
.feature-card h3 { margin-top: 17px; }
.feature-card p { min-height: 40px; color: var(--muted); font-size: 13px; }
.code-box { position: relative; padding: 16px 52px 16px 17px; border: 1px solid var(--line); border-radius: 11px; background: #101d33; color: #d8e7ff; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.copy-button { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; }
.connection-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.provider-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.connection-card { padding: 25px; }
.provider-card { display: flex; flex-direction: column; min-height: 100%; }
.provider-card.active-provider { border-color: rgba(47,85,235,.45); box-shadow: 0 12px 36px rgba(47,85,235,.12); }
.provider-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; }
.connection-title { display: flex; align-items: center; gap: 15px; }
.provider-logo { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg,#2f55eb,#1f3fbf); color: #fff; font-weight: 900; }
.connection-title h2, .connection-title p { margin: 0; }
.connection-title p { color: var(--muted); }
.connection-details { display: grid; gap: 0; margin-top: 23px; }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #e9edf4; }
.detail-row:last-child { border: 0; }
.detail-row span { color: var(--muted); font-size: 13px; }
.detail-row strong { text-align: right; font-size: 13px; }
.steps { counter-reset: step; display: grid; gap: 14px; padding: 20px 22px 23px; }
.step { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.step::before { content: counter(step); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 850; }
.step p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.settings-stack { display: grid; gap: 16px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.setting-row h3 { margin-bottom: 4px; }
.setting-row p { margin: 0; color: var(--muted); font-size: 13px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(8,20,43,.5); backdrop-filter: blur(5px); }
.modal { width: min(620px,100%); max-height: min(90vh,820px); overflow: auto; border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); animation: modal-in .2s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modal-head { display: flex; justify-content: space-between; gap: 20px; padding: 25px 27px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; }
.modal-body { padding: 25px 27px 27px; }
.form-stack { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 750; }
.field input, .field textarea, .field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); outline: none; background: #fff; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #7e98f4; box-shadow: 0 0 0 3px rgba(47,85,235,.1); }
.field small { color: var(--muted); font-size: 11px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.result { text-align: center; }
.result-icon { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 18px; background: var(--success-soft); color: var(--success); font-size: 31px; }
.result-amount { margin: 10px 0 4px; font-size: 34px; line-height: 1; font-weight: 870; letter-spacing: -1.2px; }

.payment-shell { min-height: calc(100vh - 170px); display: grid; place-items: center; padding: 28px 0 60px; }
.checkout { width: min(480px,100%); overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: 0 20px 65px rgba(9,26,56,.1); }
.checkout-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 23px; border-bottom: 1px solid var(--line); }
.checkout-brand { display: flex; align-items: center; gap: 10px; font-weight: 850; }
.checkout-brand .brand-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 15px; }
.checkout-body { padding: 26px; text-align: center; }
.checkout-body h1 { margin: 4px 0 8px; font-size: 28px; letter-spacing: -1px; }
.checkout-amount { font-size: 32px; font-weight: 880; letter-spacing: -1.2px; }
.qr-frame { width: 246px; height: 246px; display: grid; place-items: center; margin: 23px auto 15px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.qr-frame img, .qr-frame canvas { max-width: 100%; max-height: 100%; }
.qr-placeholder { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 10px; background: repeating-conic-gradient(#152946 0 25%,#fff 0 50%) 0/28px 28px; }
.qr-placeholder::after { content: "DEMO"; padding: 9px 14px; border: 8px solid #fff; background: #fff; color: var(--navy); font-weight: 900; letter-spacing: .08em; }
.checkout-note { margin-top: 21px; padding: 14px 15px; border-radius: 11px; background: var(--primary-soft); color: #28416f; font-size: 12px; text-align: left; }
.checkout-footer { padding: 16px 23px; border-top: 1px solid var(--line); background: #f9fbfe; color: var(--muted); text-align: center; font-size: 11px; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 15% 10%, rgba(47,85,235,.13), transparent 28rem), radial-gradient(circle at 90% 90%, rgba(21,41,70,.12), transparent 28rem), #f4f7fd; }
.login-card { width: min(470px,100%); padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 26px 80px rgba(9,26,56,.12); }
.login-brand { margin-bottom: 40px; }
.login-card h1 { font-size: 39px; }
.login-subtitle { margin-bottom: 27px; color: var(--muted); }
.login-note { min-height: 20px; margin: 17px 0 0; color: var(--danger); font-size: 12px; text-align: center; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: grid; gap: 10px; width: min(380px,calc(100% - 40px)); }
.toast { padding: 14px 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 14px 45px rgba(9,26,56,.16); animation: toast-in .22s ease both; }
.toast strong { display: block; font-size: 13px; }
.toast p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.toast.error { border-color: #efc8c4; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 980px) {
  .topbar { padding: 0 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card.featured { grid-column: 1 / -1; }
  .content-grid, .connection-grid, .provider-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .topbar { height: 72px; padding: 0 16px; }
  .brand-mark { width: 37px; height: 37px; border-radius: 11px; font-size: 16px; }
  .brand-name { font-size: 22px; }
  .merchant-label { display: none; }
  .access-pill { display: none; }
  .main-wrap { width: min(100% - 28px,1195px); }
  .main-nav { height: 68px; gap: 26px; padding-bottom: 12px; }
  .hero-row, .section-head { align-items: flex-start; flex-direction: column; padding-top: 28px; }
  .hero-actions, .section-actions { width: 100%; }
  .hero-actions .button.primary, .section-actions .button.primary { flex: 1; }
  h1 { font-size: 35px; }
  .stats-grid, .cards-grid { grid-template-columns: 1fr; }
  .stat-card.featured { grid-column: auto; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; }
  .setting-row { align-items: flex-start; }
  .login-card { padding: 29px 22px; }
}

.qr-unavailable { width:100%; height:100%; display:grid; place-items:center; border-radius:10px; background:#f8faff; color:#65718a; font-size:13px; font-weight:800; text-align:center; padding:18px; }
.code-block { margin: 0; padding: 16px 17px; border-radius: 11px; background: #101d33; color: #d8e7ff; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.project-button{border:0;background:transparent;cursor:pointer;font-weight:750;padding:8px 10px;border-radius:10px}.project-button:hover{background:var(--surface-soft)}
.project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.project-card{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.project-card.active{border-color:#9db0f8;box-shadow:0 0 0 3px rgba(47,85,235,.08)}.project-card p{color:var(--muted);font-size:13px}.project-card .project-actions{display:flex;gap:8px;margin-top:18px}.connection-form{padding:22px}.connection-form .field{margin-bottom:14px}@media(max-width:720px){.project-list{grid-template-columns:1fr}}

/* Provider hub refresh */
.provider-grid-clean{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.provider-grid-clean>*{min-width:0}.provider-card{overflow:hidden}.provider-card.provider-primary{border-color:#b8c7ff;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}.provider-card.provider-muted{background:#fbfcfe}.connection-title{min-width:0}.connection-title>div{min-width:0}.connection-title h2{font-size:23px}.connection-title p{font-size:13px}.detail-row{align-items:flex-start}.detail-row strong{max-width:62%;overflow-wrap:anywhere;word-break:break-word}.provider-actions{min-height:55px}.provider-connect-hero{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid #cbd7ff;border-radius:14px;background:#f5f7ff;margin-bottom:18px}.provider-connect-hero p{margin:3px 0 0;color:var(--muted);font-size:12px}.setup-list{display:grid;gap:10px;margin:0 0 19px}.setup-list>div{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}.setup-list b{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:11px}.setup-list span{font-size:12px;color:#42516c}.check-row{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.check-row input{margin-top:4px}.check-row span{display:grid;gap:2px}.check-row small{color:var(--muted)}.security-note{display:grid;gap:2px;padding:13px 14px;border-radius:11px;background:#fff7e6;color:#74500d;font-size:12px}.advanced-provider{margin-top:18px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow)}.advanced-provider summary{cursor:pointer;padding:16px 20px;font-weight:800}.advanced-provider-body{padding:0 16px 16px}.advanced-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.advanced-provider-body .provider-card{box-shadow:none}.provider-explainer{margin-top:18px}.provider-route{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:16px;padding:23px}.provider-route>div{min-width:0;padding:16px;border-radius:13px;background:var(--surface-soft);text-align:center}.provider-route b,.provider-route span{display:block}.provider-route span{margin-top:3px;color:var(--muted);font-size:12px}.provider-route i{font-style:normal;color:#8b98ad;font-size:20px}.webhook-head{align-items:center}.provider-chip{padding:9px 12px;border:1px solid #cbd7ff;border-radius:999px;background:#f4f7ff;color:var(--primary-strong);font-size:12px;font-weight:800}.webhook-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:12px;margin:0 0 18px;padding:17px 18px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow)}.webhook-flow>div{display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:center}.webhook-flow>div>span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:900}.webhook-flow strong{font-size:13px}.webhook-flow small{color:var(--muted);font-size:11px}.webhook-flow i{font-style:normal;color:#95a1b5}.webhook-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.webhook-card{min-width:0;overflow:hidden}.webhook-card-body{padding:20px 22px}.eyebrow.mini{font-size:10px;margin-bottom:5px}.endpoint-block{margin-top:17px}.endpoint-block>span{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:700}.listener-note{margin-top:17px;padding:15px;border-radius:12px;background:#edf7ff;color:#28476e}.listener-note p{margin:4px 0 0;font-size:12px}.event-preview{display:flex;gap:11px;align-items:center;margin-bottom:10px;padding:14px;border:1px solid #c8e8da;border-radius:12px;background:var(--success-soft)}.event-preview strong,.event-preview small{display:block}.event-preview small{color:#527466;font-size:11px}.event-dot{width:9px;height:9px;border-radius:50%;background:#0a9668;box-shadow:0 0 0 4px #dff4eb}
@media(max-width:1080px){.provider-grid-clean{grid-template-columns:1fr 1fr}.webhook-grid{grid-template-columns:1fr}.webhook-flow{grid-template-columns:1fr;gap:8px}.webhook-flow>i{display:none}.webhook-flow>div{text-align:left}.provider-route{grid-template-columns:1fr}.provider-route>i{transform:rotate(90deg);text-align:center}}
@media(max-width:720px){.provider-grid-clean,.advanced-provider-grid{grid-template-columns:1fr}.provider-route{padding:16px}.provider-chip{display:none}.detail-row{gap:12px}.detail-row strong{max-width:58%}.provider-actions .button{flex:1 1 auto}.webhook-card-body{padding:16px}}

/* Shopee Partner v2 */
.provider-note-clean{margin-top:18px}.provider-chip.muted{opacity:.65}