:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#f3f6fb; color:#132033; }
* { box-sizing: border-box; }
body { margin:0; }
.app-shell { max-width:1100px; margin:0 auto; padding:32px 18px; }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:22px; }
.eyebrow { margin:0 0 8px; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; color:#58708f; }
h1 { margin:0; font-size:clamp(32px, 4vw, 54px); line-height:1; }
.subtitle, .muted { color:#5b6b80; }
.card { background:#fff; border:1px solid #dfe7f1; border-radius:22px; padding:22px; box-shadow:0 14px 35px rgba(27, 45, 70, .08); margin-bottom:18px; }
.grid, .editor-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
label { display:grid; gap:7px; font-size:13px; font-weight:700; color:#31445c; }
select, input { width:100%; border:1px solid #ccd8e6; border-radius:12px; padding:12px 13px; font:inherit; background:#fff; color:#132033; }
select:focus, input:focus { outline:3px solid rgba(25, 105, 220, .16); border-color:#4e8add; }
button { border:0; border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer; background:#143d73; color:white; }
button.secondary { background:#edf3fb; color:#143d73; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.sku-result { margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:15px; background:#f7faff; border:1px dashed #b8c9dc; border-radius:18px; padding:18px; }
.label { display:block; color:#5b6b80; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
output { font-family:"SFMono-Regular", Consolas, monospace; font-weight:900; font-size:24px; overflow-wrap:anywhere; }
.message { min-height:22px; color:#155f31; font-weight:700; }
.inline-editor { margin-top:18px; background:#f8fbff; border:1px solid #d8e4f1; border-radius:18px; padding:18px; }
.inline-editor h2, .compact h2 { margin-top:0; }
.hidden { display:none; }
.code128-box { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
code { background:#edf3fb; border-radius:8px; padding:2px 6px; }
@media (max-width:850px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));}.editor-grid{grid-template-columns:1fr}.hero,.sku-result{flex-direction:column;align-items:stretch;} }
@media (max-width:520px){ .grid{grid-template-columns:1fr;} }

/* Side tab layout */
.tool-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; align-items:start; }
.side-tabs { position:sticky; top:18px; display:grid; gap:10px; }
.tab-btn { width:100%; text-align:left; background:#edf3fb; color:#143d73; border:1px solid #d7e4f2; display:grid; gap:3px; }
.tab-btn span { font-size:15px; font-weight:900; }
.tab-btn small { color:#5b6b80; font-weight:700; }
.tab-btn.active { background:#143d73; color:#fff; border-color:#143d73; box-shadow:0 12px 28px rgba(20,61,115,.18); }
.tab-btn.active small { color:#d9e8fb; }
.tab-content { min-width:0; }
.tab-panel { display:none; margin-bottom:0; }
.tab-panel.active { display:block; }
.tab-panel > h2 { margin-top:0; }

@media (max-width:760px){
  .tool-layout { grid-template-columns:1fr; }
  .side-tabs { position:static; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tab-btn { text-align:center; }
}
@media (max-width:520px){
  .side-tabs { grid-template-columns:1fr; }
  .tab-btn { text-align:left; }
}