:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --ink: #0f172a;
  --ink-soft: #475569;
  --border: #e2e8f0;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --panel: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f1f5f9;
    --ink-soft: #94a3b8;
    --border: #263042;
    --bg: #0b1120;
    --bg-alt: #0f172a;
    --panel: #111a2e;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* {
  box-sizing: border-box;
}

/* Elements with both the `hidden` attribute and an author display rule (e.g.
   .preview-actions{display:flex}, .field-row{display:grid}) would otherwise
   stay visible, since author styles override the UA stylesheet's [hidden]. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
}
.site-nav {
  display: flex;
  gap: 24px;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-nav a:hover {
  color: var(--brand);
}

/* Hero */
.hero {
  padding: 56px 0 32px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.hero-sub {
  max-width: 620px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Tool */
.tool {
  padding: 24px 0 64px;
}
.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 760px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.field-optional {
  font-weight: 400;
  color: var(--ink-soft);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--ink);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
/* Chrome/Safari force a yellow/blue autofill background that ignores
   normal background-color rules — this delay trick is the standard way
   to make it respect the site's own background instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}
input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.field-hint {
  min-height: 1.1em;
  font-size: 0.82rem;
  color: #dc2626;
  margin: 6px 0 0;
}

/* Visually hidden but still reachable by screen readers/AT — for content
   that needs to be announced without a visible on-page presence. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.field-hint code {
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-soft);
}

textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}
textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

input[type="file"] {
  width: 100%;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 18px;
  cursor: pointer;
}
.checkbox-field input {
  width: 16px;
  height: 16px;
}

/* For longer, multi-line labels (e.g. a Terms/Privacy sentence with
   links) — the label's text/links/spans are wrapped in one <span> so flex
   treats them as a single item that wraps as a paragraph, rather than
   boxing each text run and link into its own independently wrapping
   column. Checkbox aligns to the top line instead of the vertical center
   of the whole paragraph, and the sentence reads better at normal weight. */
.checkbox-field-wrap {
  align-items: flex-start;
  font-weight: 400;
}
.checkbox-field-wrap input {
  flex-shrink: 0;
  margin-top: 3px;
}

/* Mode tabs */
.mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.mode-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.mode-tab[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.type-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Preview */
.preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.preview-frame {
  width: 100%;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#00000008 0% 25%, transparent 0% 50%) 50% / 20px 20px;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 16px;
  box-sizing: border-box;
}
#qr-canvas {
  max-width: 100%;
  height: auto;
}
.preview-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-dark);
}
.btn-secondary {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.btn-small {
  padding: 6px 14px;
  font-size: 0.82rem;
  margin-top: 8px;
}

.privacy-note {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.cta-banner {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.cta-banner a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.cta-banner a:hover {
  text-decoration: underline;
}

/* How it works */
.how-it-works {
  padding: 48px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.how-it-works h2,
.features h2,
.faq h2 {
  text-align: center;
  font-size: 1.7rem;
  margin: 0 0 32px;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.steps li {
  text-align: center;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
}
.steps h3 {
  margin: 0 0 6px;
}
.steps p {
  color: var(--ink-soft);
  margin: 0;
}

/* Features */
.features {
  padding: 56px 0;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}
.feature-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.feature-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.feature-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* FAQ */
.faq {
  padding: 48px 0 72px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-list details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
}
.faq-list p {
  color: var(--ink-soft);
  margin: 10px 0 0;
}

/* Footer */
.site-footer {
  padding: 28px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 14px;
}
.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.85rem;
}
.footer-links a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.site-footer p a {
  color: var(--ink-soft);
  text-decoration: underline;
}
.site-footer p a:hover {
  color: var(--brand);
}

/* Guide pages (WiFi/vCard/menu/batch landing pages) */
.guide-hero {
  padding: 48px 0 8px;
}
.guide-content {
  padding: 8px 0 16px;
}
.guide-content .wrap {
  max-width: 760px;
}
.guide-content h2 {
  font-size: 1.4rem;
  margin: 32px 0 12px;
}
.guide-content p,
.guide-content li {
  color: var(--ink-soft);
}
.guide-content ol,
.guide-content ul {
  padding-left: 22px;
}
.guide-cta {
  text-align: center;
  padding: 8px 0 40px;
}