* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: var(--fs-md); line-height: 1.5; }
a { color: var(--accent); text-underline-offset: .2em; }
button, input, select { font: inherit; }
button, .button, .tab, summary, .back, .code-list a { min-height: 44px; }
button, .button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s4); background: var(--panel); color: var(--text); cursor: pointer; text-decoration: none; font-weight: 500; }
.primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
header { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) var(--s7); border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { font-size: var(--fs-xl); font-weight: 600; text-decoration: none; color: var(--text); min-height: 44px; display: flex; align-items: center; }
.header-actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
main { max-width: 1160px; margin: auto; padding: var(--s8) var(--s7); }
footer { padding: var(--s6) var(--s7); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
h1 { font-size: var(--fs-2xl); line-height: 1.25; font-weight: 600; margin: var(--s2) 0 var(--s4); }
h2 { font-size: var(--fs-lg); line-height: 1.3; font-weight: 600; margin: 0; }
p { margin: 0 0 var(--s4); }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; color: var(--accent); margin-bottom: var(--s2); }
.muted, .hint { color: var(--text-muted); }
.hint { font-size: var(--fs-sm); }
.intro { margin-bottom: var(--s7); }
.workspace { display: flex; align-items: flex-start; gap: var(--s6); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow); }
.editor { flex: 1; min-width: 0; }
.preview { flex: 0 0 420px; position: sticky; top: var(--s6); align-self: flex-start; }
.tabs { display: flex; gap: var(--s2); padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s2) var(--s4); border-radius: var(--r-sm); text-decoration: none; color: var(--text-muted); }
.tab.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.type-section { display: none; }
.type-section.active { display: block; }
.mobile-type-title { display: none; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
label { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); font-weight: 500; }
input, select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); background: var(--panel); color: var(--text); }
input[aria-invalid="true"] { border-color: var(--danger); }
.check { flex-direction: row; align-items: center; min-height: 44px; }
.check input { width: 24px; min-height: 24px; }
.error, .danger { color: var(--danger); }
.error:empty { display: none; }
.warning { color: var(--warning); font-size: var(--fs-sm); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.badge { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.preview-field { min-height: 288px; display: flex; align-items: center; justify-content: center; padding: var(--s4); margin-bottom: var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); }
.qr { display: block; width: 256px; height: 256px; max-width: 100%; object-fit: contain; }
.actions, .options { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.options { gap: var(--s4); }
.options label { flex: 1; }
summary { cursor: pointer; padding: var(--s3) 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); padding: var(--s4); background: var(--panel-soft); border-radius: var(--r-sm); }
.recent, .security { margin-top: var(--s6); }
.code-list { list-style: none; padding: 0; margin: 0; }
.code-list li { display: flex; gap: var(--s4); align-items: center; border-top: 1px solid var(--line); padding: var(--s2) 0; }
.code-list li a { display: flex; align-items: center; }
.code-list li a:first-child { flex: 1; }
time { font-size: var(--fs-sm); color: var(--text-muted); }
.auth-panel { max-width: 520px; margin: var(--s7) auto; }
.auth-panel .qr { margin: var(--s5) auto; }
.secret { overflow-wrap: anywhere; font-size: var(--fs-md); }
.recovery-list { padding-left: var(--s6); }
.saved-code { margin-top: var(--s5); }
.saved-code .qr { margin: var(--s6) 0; }
.back { display: inline-flex; align-items: center; }
[hidden] { display: none; }
/* Public business cards share the two house stylesheets. Accents are fixed
   token selections, never interpolated colours or additional theme blocks. */
.owner-nav { display: flex; gap: var(--s4); }
.owner-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.card-editor { max-width: 680px; margin: var(--s5) auto; }
.card-list-item { margin-top: var(--s5); }
.copy-row { display: flex; gap: var(--s3); align-items: center; margin: var(--s4) 0; }
.public-link { overflow-wrap: anywhere; min-height: 44px; display: flex; align-items: center; }
.owner-portrait { border-radius: 50%; object-fit: cover; }
.public-body { min-height: 100vh; }
main.card { max-width: 420px; padding: var(--s8) var(--s6); text-align: center; }
.card h1 { margin-top: var(--s6); overflow-wrap: anywhere; }
.card-title { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.portrait { width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; margin: 0 auto; }
.monogram { display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); font-weight: 600; background: var(--accent); color: var(--accent-on); }
.card hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }
.contact-rows { display: flex; flex-direction: column; gap: var(--s2); }
.contact-rows a { display: flex; align-items: center; gap: var(--s4); min-height: 44px; padding: var(--s2) var(--s3); text-align: left; text-decoration: none; border-radius: var(--r-sm); color: var(--text); overflow-wrap: anywhere; }
.contact-rows a > span { min-width: 0; }
.contact-icon { flex-shrink: 0; color: var(--accent); }
.contact-label { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.card-note { margin: var(--s6) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-qr { display: flex; flex-direction: column; align-items: center; gap: var(--s3); margin: var(--s7) 0; }
.card-qr img { width: 180px; height: 180px; border-radius: var(--r-sm); }
.card-qr figcaption { font-size: var(--fs-sm); color: var(--text-muted); }
.save-contact { width: 100%; }
.card.accent-accent .portrait { border-color: var(--accent); }
.card.accent-accent .monogram, .card.accent-accent .save-contact { background: var(--accent); }
.card.accent-success .portrait, .card.accent-success .save-contact { border-color: var(--success); }
.card.accent-success .monogram, .card.accent-success .save-contact { background: var(--success); }
.card.accent-success .contact-icon { color: var(--success); }
.card.accent-warning .portrait, .card.accent-warning .save-contact { border-color: var(--warning); }
.card.accent-warning .monogram, .card.accent-warning .save-contact { background: var(--warning); }
.card.accent-warning .contact-icon { color: var(--warning); }
.card.accent-danger .portrait, .card.accent-danger .save-contact { border-color: var(--danger); }
.card.accent-danger .monogram, .card.accent-danger .save-contact { background: var(--danger); }
.card.accent-danger .contact-icon { color: var(--danger); }
@media (hover: hover) {
 button:hover, .button:hover { border-color: var(--accent); }
 a:not(.button):hover { text-decoration: underline; }
 summary:hover { color: var(--accent); }
}
@media (max-width: 1000px) {
 .preview { flex-basis: 360px; }
 header > .muted { display: none; }
}
@media (max-width: 760px) {
 main { padding: var(--s6) var(--s4); }
 header { padding: var(--s3) var(--s4); flex-wrap: wrap; }
 .workspace { flex-direction: column; }
 .preview { order: -1; position: static; width: 100%; flex-basis: auto; }
 .editor { width: 100%; }
 .tabs { display: none; }
 .type-section { display: block; }
 .type-section + .type-section { border-top: 1px solid var(--line); padding-top: var(--s6); margin-top: var(--s6); }
 .mobile-type-title { display: block; margin-bottom: var(--s4); color: var(--accent); }
 .code-list li { flex-wrap: wrap; }
 .code-list li a:first-child { flex-basis: 100%; }
 .panel { padding: var(--s5); }
 .copy-row { flex-direction: column; align-items: flex-start; }
 .owner-nav { flex-wrap: wrap; }
 .header-actions { flex-wrap: wrap; }
}
@media print {
 header, footer, .back, .saved-code .actions, .saved-code > p:last-child, .security, .tabs, button { display: none; }
 main { padding: 0; }
 .panel { box-shadow: none; }
 .workspace { display: block; }
 .preview { position: static; }
 details > * { display: block; }
 .auth-panel { max-width: none; }
}