/* scanlink — shared site styles on top of design-tokens.css */
body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--blue-400);text-decoration:none}
a:hover{color:var(--blue-300)}
::selection{background:var(--alpha-blue-40)}
input::placeholder,textarea::placeholder{color:var(--input-placeholder)}

/* top navigation (marketing) */
.topnav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(24px);border-bottom:1px solid var(--nav-border)}
.topnav-in{max-width:1200px;margin:0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px}
.topnav-links{display:flex;align-items:center;gap:32px}
.topnav-cta{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-primary)}
.brand:hover{color:var(--text-primary)}
.brand img{width:26px;height:26px;display:block}
.brand span{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:-0.01em;color:var(--text-primary)}
.navlink{font-size:14px;color:var(--text-secondary)}
.navlink:hover{color:var(--text-primary)}
.navlink-active{color:var(--text-primary);font-weight:500}

/* buttons */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;background:var(--button-primary-bg);color:var(--white);font-size:14px;font-weight:500;border-radius:999px;box-shadow:var(--glow-sm);border:none;cursor:pointer;font-family:inherit}
.btn-primary:hover{background:var(--button-primary-bg-hover);color:var(--white)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border:1px solid var(--border-default);background:transparent;color:var(--text-primary);font-size:14px;font-weight:500;border-radius:999px;cursor:pointer;font-family:inherit}
.btn-ghost:hover{background:var(--alpha-white-6);color:var(--text-primary)}
.btn-strong{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border:1px solid var(--border-strong);color:var(--text-primary);font-size:15px;font-weight:500;border-radius:999px}
.btn-strong:hover{background:var(--alpha-white-6);color:var(--text-primary)}
.btn-sm{height:38px;padding:0 20px;font-size:13px}
.btn-xs{height:32px;padding:0 14px;font-size:12px}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 20px;border:1px solid var(--border-default);background:transparent;color:var(--status-danger);font-size:13px;font-weight:500;border-radius:999px;cursor:pointer;font-family:inherit}
.btn-danger:hover{background:var(--status-danger-subtle)}

/* inputs */
.input{width:100%;box-sizing:border-box;height:44px;padding:0 16px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:12px;color:var(--input-fg);font-size:14px;font-family:inherit;outline:none}
.input:focus{border-color:var(--input-border-focus)}
.input-mono{font-family:var(--font-mono);font-size:13px}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364779B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
select.input option{background:var(--ink-800);color:var(--text-primary)}
.field-label{font-size:13px;font-weight:500;margin-bottom:8px;color:var(--text-secondary)}
input[type=color].swatch-input{width:36px;height:36px;padding:0;border:2px solid var(--alpha-white-24);border-radius:50%;background:none;cursor:pointer}
input[type=color].swatch-input::-webkit-color-swatch-wrapper{padding:0}
input[type=color].swatch-input::-webkit-color-swatch{border:none;border-radius:50%}

/* cards & misc */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px}
.mono-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-tertiary)}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-brand)}
.badge-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:var(--badge-bg);border:1px solid var(--badge-border);border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--badge-fg);text-transform:uppercase}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:20px;font-size:13.5px}
.flash-ok{background:var(--status-success-subtle);color:var(--status-success)}
.flash-err{background:var(--status-danger-subtle);color:var(--status-danger)}

/* footer columns */
.footcol{display:flex;flex-direction:column;gap:10px}
.footcol a{font-size:13px;color:var(--text-secondary)}
.footcol a:hover{color:var(--text-primary)}
.foothead{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:4px}

/* app shell */
.appgrid{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--border-subtle);background:var(--ink-900);padding:24px 16px;position:sticky;top:0;height:100vh;box-sizing:border-box}
.appmain{padding:32px 40px;min-width:0}
.sideitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text-secondary);font-size:14px}
.sideitem:hover{background:var(--alpha-white-4);color:var(--text-primary)}
.sideitem-active{background:var(--surface-brand-subtle);color:var(--blue-200);font-weight:500}
.sideitem-active:hover{background:var(--surface-brand-subtle);color:var(--blue-200)}

/* tables */
.rowhover:hover{background:var(--alpha-white-4)}
.chip{padding:6px 14px;border:1px solid var(--border-subtle);border-radius:999px;font-size:12px;color:var(--text-tertiary);cursor:pointer}
.chip:hover{color:var(--text-primary)}
.chip-active{background:var(--surface-brand-subtle);border-color:var(--badge-border);color:var(--blue-300)}
.chip-active:hover{color:var(--blue-300)}

/* swatch buttons in editor */
.swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;border:2px solid var(--alpha-white-24);padding:0}
.swatch-on{border-color:var(--blue-400);box-shadow:var(--glow-sm)}

/* QR canvases: size to their container (the library appends them async) */
.qr-mini canvas,.qr-mini img,.qr-large canvas,.qr-large img,#qrpreview canvas,#qrpreview img{
  width:100% !important;height:100% !important;display:block}
.qr-mini,.qr-large,#qrpreview{overflow:hidden}

/* responsive */
@media (max-width:960px){
  .appgrid{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
  .sidebar>div{margin-top:0 !important}
  .appmain{padding:20px 16px}
  .topnav-links{display:none}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr !important}
  .split-2{grid-template-columns:1fr !important}
}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}