/* ============================================================
   barcodeandqr.com — shared design system
   Black-band variant. JetBrains Mono + Fraunces.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&display=swap');

:root{
  --ink:#0d0d0f;
  --paper:#f4f1ea;
  --paper-2:#ebe7dc;
  --line:#1a1a1d;
  --accent:#ff4d2e;      /* scanner red */
  --accent-2:#1452ff;    /* signal blue */
  --ok:#1a8f5a;
  --warn:#d98a00;
  --err:#c8321e;
  --mut:#6b675e;
  --card:#fffdf8;
  --shadow:6px 6px 0 var(--ink);
  --band:#0d0d0f;
  --band-card:#141417;
  --band-line:#2c2c30;
  --band-mut:#a3a09a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  line-height:1.5;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--paper-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--paper-2) 1px,transparent 1px);
  background-size:28px 28px;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit}

/* ---------- top bar ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 26px;border-bottom:2px solid var(--line);
  background:var(--paper);position:sticky;top:0;z-index:50;
}
.logo{font-weight:800;font-size:18px;letter-spacing:-.5px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .mark{display:inline-grid;grid-template-columns:repeat(3,5px);grid-template-rows:repeat(3,5px);gap:2px}
.logo .mark i{background:var(--ink);display:block}
.logo .mark i.o{background:transparent}
.logo b{color:var(--accent)}
.nav{display:flex;gap:22px;font-size:13px;font-weight:500}
.nav a{color:var(--ink);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;transition:.15s}
.nav a:hover,.nav a.active{border-color:var(--accent)}
@media(max-width:760px){
  .topbar{flex-wrap:wrap;row-gap:10px;padding:14px 18px}
  .nav{order:3;width:100%;overflow-x:auto;gap:18px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
}

/* ---------- buttons ---------- */
.btn{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;
  padding:15px 26px;border:2px solid var(--line);cursor:pointer;text-decoration:none;color:var(--ink);
  background:var(--card);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--ink)}
.btn.blue{background:var(--accent-2);color:#fff}
.btn.sm{padding:9px 16px;font-size:13px;box-shadow:3px 3px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow)}

/* ---------- generic page shell ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.page-head{padding:42px 26px 8px;max-width:1140px;margin:0 auto}
.crumb{font-size:12px;color:var(--mut);margin-bottom:14px}
.crumb a{text-decoration:none;border-bottom:1px dotted var(--mut)}
h1.title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(32px,5vw,54px);line-height:1;letter-spacing:-1.5px}
.title .amp{color:var(--accent);font-style:italic}
.lede{font-size:15px;color:var(--mut);max-width:62ch;margin-top:16px}
.lede b{color:var(--ink)}

/* ---------- tool layout ---------- */
.tool-grid{display:grid;grid-template-columns:380px 1fr;gap:24px;margin-top:30px;align-items:start}
@media(max-width:880px){.tool-grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow);padding:22px}
.panel h2{font-family:'Fraunces',serif;font-size:22px;font-weight:900;letter-spacing:-.5px;margin-bottom:4px}
.panel .hint{font-size:12px;color:var(--mut);margin-bottom:18px}

.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.field input[type=text],.field input[type=number],.field select,.field textarea{
  width:100%;font-family:'JetBrains Mono',monospace;font-size:14px;
  padding:11px 12px;border:2px solid var(--line);background:var(--paper);color:var(--ink);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.row{display:flex;gap:12px}
.row .field{flex:1}
.inline{display:flex;align-items:center;gap:8px;font-size:13px}
.inline input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.color-row{display:flex;gap:10px;align-items:center}
.color-row input[type=color]{width:44px;height:38px;border:2px solid var(--line);background:var(--paper);cursor:pointer;padding:2px}

.seg{display:flex;border:2px solid var(--line);overflow:hidden;flex-wrap:wrap}
.seg button{flex:1;min-width:60px;font-family:'JetBrains Mono';font-size:12px;font-weight:700;padding:9px 6px;background:var(--paper);border:none;border-right:1px solid var(--line);cursor:pointer;color:var(--ink)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink);color:var(--paper)}

/* ---------- preview / output ---------- */
.stage{
  background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow);
  padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:340px;position:relative;
}
.stage .canvas-host{display:flex;align-items:center;justify-content:center;width:100%;min-height:200px}
.stage .canvas-host svg,.stage .canvas-host canvas,.stage .canvas-host img{max-width:100%;height:auto}
.stage-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}

.validation{font-size:12.5px;padding:10px 12px;border:2px solid;margin-bottom:16px;display:none}
.validation.show{display:block}
.validation.ok{border-color:var(--ok);background:#eaf6ef;color:#0f5c39}
.validation.warn{border-color:var(--warn);background:#fbf3e2;color:#7a4e00}
.validation.err{border-color:var(--err);background:#fbeae7;color:#8c2114}

/* ---------- meter (QR scannability) ---------- */
.meter-wrap{width:100%;margin-top:22px;border-top:2px dotted var(--paper-2);padding-top:18px}
.meter-title{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.meter-badge{font-size:11px;font-weight:800;padding:3px 8px;border:2px solid}
.meter-badge.ok{border-color:var(--ok);color:var(--ok)}
.meter-badge.warn{border-color:var(--warn);color:var(--warn)}
.meter-badge.err{border-color:var(--err);color:var(--err)}
.bar{height:12px;background:var(--paper-2);border:2px solid var(--line);overflow:hidden}
.bar .fill{height:100%;transition:width .3s,background .3s}
.meter-rows{margin-top:12px;font-size:12px}
.meter-rows .mr{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dotted var(--paper-2)}
.meter-rows .mr span:last-child{font-weight:700}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--line);padding:40px 26px;background:var(--paper);margin-top:64px}
.foot-in{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:12px;color:var(--mut)}
.foot-col{min-width:140px}
.foot-col h6{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.foot-col a{display:block;color:var(--mut);text-decoration:none;padding:4px 0;font-size:14px;font-weight:700}
.foot-col a:hover{color:var(--accent)}
.foot-col p{font-size:12px;color:var(--mut)}
.net{margin-top:24px;padding-top:20px;border-top:1px dotted var(--line);font-size:11px;color:var(--mut)}
.net a{color:var(--mut)}

/* ---------- honesty / note box ---------- */
.note{margin:34px auto 0;max-width:1140px;padding:0 26px}
.note-in{border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow);padding:22px}
.note-in .h{font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.note-in p{font-size:13px;color:var(--mut)}
.note-in b{color:var(--ink)}

/* ---------- small bits ---------- */
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--paper-2);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none!important}

/* ---------- ad banner (below nav) ---------- */
.ad-banner{display:flex;justify-content:center;padding:10px 16px 0}
.ad-banner-inner.desktop{width:728px;max-width:100%;min-height:90px}
.ad-banner-inner.mobile{display:none;width:320px;max-width:100%;min-height:50px}
@media (max-width:780px){
  .ad-banner-inner.desktop{display:none}
  .ad-banner-inner.mobile{display:block}
}