/* SYNXRO GUI HF1.7 PRODUCT SHELL CONVERGENCE */
:root{
  --sx-ink:#071733;--sx-muted:#65738a;--sx-line:#dce7f4;--sx-blue:#0875ff;
  --sx-cyan:#10bcec;--sx-bg:#f6f9fd;--sx-card:#fff;--sx-shadow:0 20px 60px rgba(18,59,112,.08);
}
html{background:var(--sx-bg);scroll-behavior:smooth}
body[data-synxro-surface]{background:
  radial-gradient(circle at 92% 0,rgba(33,185,255,.12),transparent 28%),
  linear-gradient(180deg,#fbfdff 0%,#f5f9fe 100%);
  color:var(--sx-ink);min-height:100dvh}
body[data-synxro-surface] a,body[data-synxro-surface] button{touch-action:manipulation}
body[data-synxro-surface] button:focus-visible,
body[data-synxro-surface] a:focus-visible,
body[data-synxro-surface] input:focus-visible,
body[data-synxro-surface] select:focus-visible{
  outline:3px solid rgba(8,117,255,.25);outline-offset:2px
}
.sx-surface-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid #d8e7f7;background:#f7fbff;
  color:#0c64c8;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:850;letter-spacing:.02em}
.sx-surface-tag:before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--sx-blue),var(--sx-cyan))}
.sx-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sx-mini-card{border:1px solid var(--sx-line);border-radius:18px;background:rgba(255,255,255,.92);
  padding:14px;box-shadow:0 8px 28px rgba(18,59,112,.045)}
.sx-mini-card small,.sx-mini-card strong{display:block}.sx-mini-card small{color:var(--sx-muted);font-size:10px;letter-spacing:.04em}
.sx-mini-card strong{margin-top:5px;font-size:15px}
.sx-muted{color:var(--sx-muted)}
.sx-pill{display:inline-flex;align-items:center;min-height:34px;border:1px solid var(--sx-line);background:#fff;
  border-radius:999px;padding:7px 11px;color:var(--sx-ink);font-size:11px;font-weight:800}
.sx-gradient{background:linear-gradient(135deg,var(--sx-blue),var(--sx-cyan));color:#fff}

/* One ID */
body[data-synxro-surface="auth"] main{max-width:980px}
body[data-synxro-surface="auth"] .auth-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(360px,.74fr);gap:18px;align-items:stretch;margin-top:24px}
body[data-synxro-surface="auth"] .auth-visual{position:relative;overflow:hidden;border:1px solid #d6e6f8;border-radius:30px;
  min-height:480px;padding:28px;background:
  radial-gradient(circle at 72% 32%,rgba(26,196,255,.28),transparent 29%),
  linear-gradient(145deg,#071b3d,#0b6ada 72%,#13c4ef);color:#fff;box-shadow:var(--sx-shadow)}
body[data-synxro-surface="auth"] .auth-visual h2{font-size:clamp(34px,5vw,54px);line-height:.96;letter-spacing:-.05em;margin:12px 0}
body[data-synxro-surface="auth"] .auth-visual p{max-width:430px;color:#d6eaff;line-height:1.55}
body[data-synxro-surface="auth"] .auth-orbit{position:absolute;right:-36px;bottom:-34px;width:280px;height:280px;border:1px solid rgba(255,255,255,.22);border-radius:50%}
body[data-synxro-surface="auth"] .auth-orbit:before,body[data-synxro-surface="auth"] .auth-orbit:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%}
body[data-synxro-surface="auth"] .auth-orbit:before{inset:34px} body[data-synxro-surface="auth"] .auth-orbit:after{inset:78px}
body[data-synxro-surface="auth"] .auth-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
body[data-synxro-surface="auth"] .auth-points span{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);border-radius:999px;padding:8px 10px;font-size:11px;font-weight:800}
body[data-synxro-surface="auth"] .card{margin-top:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}

/* My SYNXRO */
body[data-synxro-surface="customer-home"] header{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);height:auto;min-height:76px}
body[data-synxro-surface="customer-home"] .welcome{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;max-width:none}
body[data-synxro-surface="customer-home"] .welcome .customer-mark{width:74px;height:74px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0875ff,#18c6ee);color:#fff;font-size:24px;font-weight:900;box-shadow:0 18px 45px rgba(8,117,255,.22)}
body[data-synxro-surface="customer-home"] .portal-summary{margin-top:24px}
body[data-synxro-surface="customer-home"] .account-card{box-shadow:var(--sx-shadow)}

/* Merchant workspace */
body[data-synxro-surface="merchant"] .topbar{border-radius:22px;background:rgba(255,255,255,.82);border:1px solid rgba(220,231,245,.88);
  padding:18px;box-shadow:0 12px 38px rgba(18,59,112,.05)}
body[data-synxro-surface="merchant"] .merchant-card{box-shadow:0 14px 42px rgba(18,59,112,.06)}
body[data-synxro-surface="merchant"] .panel{box-shadow:0 10px 34px rgba(18,59,112,.045)}
body[data-synxro-surface="merchant"] .role-chip{background:#edf6ff!important;color:#0870df!important;border-color:#d4e8ff!important}

/* Onboarding */
body[data-synxro-surface="onboarding"] .demo-banner{background:#eff7ff!important;color:#4c6078!important;border-bottom:1px solid #dbe8f5!important}
body[data-synxro-surface="onboarding"] header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid #e0eaf5}
body[data-synxro-surface="onboarding"] .intro{max-width:760px}
body[data-synxro-surface="onboarding"] .wizard{box-shadow:var(--sx-shadow);border-radius:28px!important}
body[data-synxro-surface="onboarding"] .steps{gap:8px!important}
body[data-synxro-surface="onboarding"] .steps li{border-radius:14px!important}

/* Platform admin */
body[data-synxro-surface="platform"] .topbar{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);backdrop-filter:blur(18px);background:rgba(255,255,255,.9)!important}
body[data-synxro-surface="platform"] .intro{align-items:center}
body[data-synxro-surface="platform"] .intro h1{font-size:clamp(34px,6vw,58px);letter-spacing:-.05em}
body[data-synxro-surface="platform"] .login-card,body[data-synxro-surface="platform"] .console{box-shadow:var(--sx-shadow);border-radius:26px!important}
body[data-synxro-surface="platform"] .lock-mark{background:linear-gradient(135deg,#eaf4ff,#dffaff)!important;color:#0875ff!important}

/* Connected services */
body[data-synxro-surface="providers"] .top{position:sticky;top:0;z-index:45;padding-top:calc(10px + env(safe-area-inset-top));backdrop-filter:blur(18px);background:rgba(255,255,255,.9)!important}
body[data-synxro-surface="providers"] .heading h1{font-size:clamp(36px,7vw,62px);letter-spacing:-.05em}
body[data-synxro-surface="providers"] .catalog{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
body[data-synxro-surface="providers"] .catalog>button,body[data-synxro-surface="providers"] .catalog>.service-card{border-radius:20px!important;box-shadow:0 8px 26px rgba(18,59,112,.045)!important}
body[data-synxro-surface="providers"] details{border-radius:18px!important}
body[data-synxro-surface="providers"] dialog{border-radius:26px!important;box-shadow:0 28px 90px rgba(6,30,70,.24)!important}

/* Customer demo */
body[data-synxro-surface="customer-demo"] .demo-banner{background:#eff7ff!important;color:#51637a!important;border-bottom:1px solid #dae7f5!important}
body[data-synxro-surface="customer-demo"] .topbar{border-radius:20px}
body[data-synxro-surface="customer-demo"] .customer-login-link{display:inline-flex;align-items:center;min-height:40px;padding:9px 12px;border-radius:999px;
  background:linear-gradient(135deg,#0875ff,#10bcec);color:#fff!important;text-decoration:none;font-size:11px;font-weight:850}
body[data-synxro-surface="customer-demo"] .hero,body[data-synxro-surface="customer-demo"] .merchant-context,body[data-synxro-surface="customer-demo"] .panel{box-shadow:0 10px 34px rgba(18,59,112,.05)}

@media(max-width:760px){
  body[data-synxro-surface] .sx-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-synxro-surface="auth"] main{padding:20px 15px 64px;max-width:560px}
  body[data-synxro-surface="auth"] .auth-layout{display:block;margin-top:18px}
  body[data-synxro-surface="auth"] .auth-visual{min-height:220px;padding:20px;border-radius:23px;margin-bottom:12px}
  body[data-synxro-surface="auth"] .auth-visual h2{font-size:36px}
  body[data-synxro-surface="auth"] .auth-orbit{width:190px;height:190px;right:-56px;bottom:-70px}
  body[data-synxro-surface="auth"] .auth-points{margin-top:14px}
  body[data-synxro-surface="auth"] .card{border-radius:23px}
  body[data-synxro-surface="customer-home"] main{padding-top:32px}
  body[data-synxro-surface="customer-home"] .welcome{grid-template-columns:1fr auto}
  body[data-synxro-surface="customer-home"] .welcome .customer-mark{width:58px;height:58px;border-radius:18px;font-size:19px}
  body[data-synxro-surface="providers"] .catalog{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-synxro-surface="platform"] .intro{align-items:flex-start}
}
@media(max-width:390px){
  body[data-synxro-surface="auth"] .auth-visual p{font-size:13px}
  body[data-synxro-surface="auth"] .auth-points span{font-size:10px}
  body[data-synxro-surface="customer-home"] .welcome{grid-template-columns:1fr}
  body[data-synxro-surface="customer-home"] .welcome .customer-mark{display:none}
}

/* SYNXRO GUI HF1.8 DEFERRED PROVIDER MODE */
body[data-synxro-surface] .deferred-step,body[data-synxro-surface] .deferred-banner{box-shadow:0 10px 32px rgba(18,59,112,.04)}