@font-face { font-family: "Helvetica Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/helvetica-neue-400.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/helvetica-neue-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/jetbrains-mono-700.woff2") format("woff2"); }
/* UNIMATIC B2B sign-in. Values from docs/brand/README.md: panel #F6F6F6 on white, ink #000,
   Helvetica Neue, mono uppercase labels, rounded black band, pill button. Mobile first. */

:root {
  --bg: #F6F6F6;
  --ink: #000;
  --ink70: rgba(0, 0, 0, .7);
  --hair: rgba(0, 0, 0, .15);
  --accent: #AFFF00;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: #fff; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); }

.panel { max-width: 420px; margin: 0 auto; padding: 12px 16px 20px; background: var(--bg); border-radius: 10px; }
.band { display: flex; align-items: center; gap: 14px; background: #000; border-radius: 10px; padding: 22px 20px; margin: 0 0 24px; }
.band img { display: block; flex: none; width: 139px; height: 20px; }
.band-b2b { font-size: 28px; line-height: 20px; font-weight: 400; letter-spacing: .04em; color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

h1 { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 0 0 20px; }

label { display: block; margin: 0 0 6px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink70); }
input { display: block; width: 100%; min-height: 48px; margin: 0 0 18px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: 8px; }

button { display: block; width: 100%; min-height: 50px; margin: 6px 0 0; padding: 12px 20px; font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #000; border: 0; border-radius: 999px; cursor: pointer; }
button:disabled { opacity: .55; cursor: progress; }

/* Visible focus: a black ring with a lime halo, clear on the grey panel and on white. */
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent); }

.status { min-height: 1.5em; margin: 16px 0 4px; font-weight: 700; }
.status:empty { margin-top: 8px; }
.note { margin: 0; font-size: 14px; color: var(--ink70); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .4); text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Sign-in mode 'shopify': the message and a link styled as the page's button. */
.notice { margin: 0 0 18px; }
.button-link { display: flex; align-items: center; justify-content: center; min-height: 50px; margin: 6px 0 0; padding: 12px 20px; text-align: center; text-decoration: none; font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #000; border-radius: 999px; }

.shop { margin: 20px 0 0; }
.shop-link { display: block; min-height: 50px; padding: 12px 20px; text-align: center; text-decoration: none; font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--ink); border-radius: 999px; }

@media (min-width: 600px) {
  body { padding: 48px 24px; }
  .panel { padding: 16px 28px 28px; }
}