@property --corner-radius { syntax:"<length>"; inherits:true; initial-value:8px; }
body[data-offline-page] { margin:0; background:#15130f }
#k9-connectivity {
  --offline-bg:#15130f; --offline-accent:#ff8b4d;
  position:fixed; inset:0; margin:0; width:100%; height:100%;
  max-width:none; max-height:none; box-sizing:border-box; border:0;
  padding:0; background:var(--offline-bg); color:#f6f5f4; box-shadow:none;
  overflow:auto; overscroll-behavior:contain; text-align:center;
  font:400 16px/1.7 system-ui,"Myanmar Text",sans-serif;
}
#k9-connectivity:not([open]) { display:none }
#k9-connectivity[data-theme="cashier"] { --offline-bg:#0c1915; --offline-accent:#42d6a4 }
#k9-connectivity[data-theme="seller"] { --offline-bg:#171120; --offline-accent:#bd9aff }
#k9-connectivity::backdrop { background:var(--offline-bg,#15130f) }
#k9-connectivity .offline-center {
  display:grid; place-items:center; min-height:100%; box-sizing:border-box;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
#k9-connectivity .offline-content { width:100%; max-width:36rem; display:grid; justify-items:center; gap:12px; margin:0; padding:0; }
/* Loaded by the shop header, gateway document and packaged Android error screen. */
:is(.site-header .brand, .records-empty .brand, #k9-connectivity .offline-brand) {
  --brand-name-size:26px;
  --brand-tagline-size:12px;
  --brand-logo-size:calc(var(--brand-name-size) * 1.25 + var(--brand-tagline-size) * 1.4 + 2px);
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Myanmar Text",sans-serif;
  font-synthesis:none;
}
:is(.site-header .brand, .records-empty .brand, #k9-connectivity .offline-brand) > img {
  width:var(--brand-logo-size); height:var(--brand-logo-size); flex:0 0 var(--brand-logo-size);
  object-fit:contain; background:white; border-radius:var(--corner-radius);
}
:is(.site-header .brand, .records-empty .brand, #k9-connectivity .offline-brand) > .brand-wordmark {
  display:grid; grid-template-columns:minmax(0,1fr); width:max-content;
  font-size:var(--brand-name-size); font-weight:850; line-height:1.25; letter-spacing:0; text-align:left;
}
:is(.site-header .brand, .records-empty .brand, #k9-connectivity .offline-brand) .brand-name {
  display:block; color:var(--orange,var(--offline-accent)); font-size:inherit; font-weight:900;
  -webkit-text-stroke:.3px currentColor;
}
:is(.site-header .brand, .records-empty .brand, #k9-connectivity .offline-brand) .brand-tagline {
  display:flex; align-items:baseline; justify-content:space-between; color:var(--orange,var(--offline-accent));
  font-size:var(--brand-tagline-size); line-height:1.4; font-weight:600; letter-spacing:0;
  margin-top:2px; text-align:left; text-align-last:auto;
}
:is(.site-header .brand, .records-empty .brand, #k9-connectivity .offline-brand) .brand-tagline i {
  font:inherit; white-space:pre; flex:none;
}
@media(max-width:760px) {
  :is(.site-header .brand, .records-empty .brand, #k9-connectivity .offline-brand) {
    --brand-name-size:clamp(18px,5vw,20px); --brand-tagline-size:10px; gap:8px;
  }
}
#k9-connectivity h1 { color:inherit; font-size:clamp(20px,4vw,25px); font-weight:400; line-height:1.6; margin:0; }
#k9-connectivity button { display:block; margin:0; min-height:44px; width:auto; max-width:100%; border:0; border-radius:var(--corner-radius); padding:8px 20px; background:var(--offline-accent); color:#171717; font:400 16px/1.7 system-ui,sans-serif; cursor:pointer; }
#k9-connectivity button:focus-visible { outline:2px solid white; outline-offset:3px; }
#k9-connectivity button:disabled { opacity:.65; cursor:wait; }
#k9-connectivity p { margin:0; font:inherit; font-weight:400; color:inherit; }

/* Also used by the Android app's packaged connection screen. */
#k9-connectivity[data-theme="member"] { font-size:14px }
#k9-connectivity[data-theme="member"] button { font-size:inherit }
#k9-connectivity[data-theme="member"] h1 { font-size:22px }