:root {
    --ink:#202124;
    --muted:#66707c;
    --line:#d9dee6;
    --page:#f3f5f7;
    --panel:#fff;
    --accent:#1f6fb2;
    --accent-dark:#174f81;
    --danger:#b3261e;
    --ok:#176c43;
    --tag-green:#c6cfbd;
    --tag-yellow:#efc23d;
    --tag-line:#44464a;
    --shadow:0 14px 34px rgba(32,33,36,.07);
}

* { box-sizing:border-box; }
body { background:var(--page); color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0; }
button, input, textarea, select { font:inherit; }
button, .button-link { align-items:center; border:1px solid transparent; border-radius:6px; cursor:pointer; display:inline-flex; font-weight:700; gap:6px; justify-content:center; min-height:38px; padding:0 13px; text-decoration:none; }
button.primary, .button-link.primary { background:var(--accent); color:#fff; }
button.primary:hover, .button-link.primary:hover { background:var(--accent-dark); }
button.secondary, .button-link.secondary { background:#fff; border-color:var(--line); color:var(--ink); }
button.danger { background:#fff; border-color:#efbbb5; color:var(--danger); }
button:disabled { cursor:not-allowed; opacity:.55; }
input, textarea, select { background:#fff; border:1px solid var(--line); border-radius:6px; color:var(--ink); padding:10px 11px; width:100%; }
textarea { min-height:68px; resize:vertical; }
label { color:var(--muted); display:grid; font-size:12px; font-weight:700; gap:6px; letter-spacing:0; text-transform:uppercase; }

.login-page { align-items:center; display:flex; justify-content:center; min-height:100vh; padding:24px; }
.login { background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 50px rgba(32,33,36,.08); max-width:390px; padding:24px; width:100%; }
.login h1 { font-size:22px; margin:0 0 6px; }
.login p { color:var(--muted); line-height:1.4; margin:0 0 18px; }
.login label { margin-top:12px; }
.login button { margin-top:18px; width:100%; }

.app { margin:0 auto; max-width:1220px; padding:20px; }
.topbar { align-items:center; display:flex; gap:16px; justify-content:space-between; margin-bottom:16px; }
h1 { font-size:22px; letter-spacing:0; line-height:1.15; margin:0; }
.subtitle { color:var(--muted); margin:4px 0 0; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.db-pill { border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; font-weight:700; padding:9px 12px; }
.db-pill.good { color:var(--ok); }
.db-pill.bad { color:#a15c00; }

.workspace { display:grid; gap:16px; grid-template-columns:minmax(340px, 430px) 1fr; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:16px; }
.panel-head { align-items:center; display:flex; gap:12px; justify-content:space-between; margin-bottom:14px; }
.panel h2 { font-size:15px; margin:0; }
.scan-row { display:grid; gap:8px; grid-template-columns:1fr auto; }
.scan-panel { padding:18px; }
.scan-row-large input { font-size:22px; font-weight:700; letter-spacing:1px; min-height:54px; }
.scan-row-large button { min-height:54px; min-width:104px; }
.form-grid { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:12px; }
.pricing-grid { display:grid; gap:12px; grid-template-columns:1.15fr .85fr 1fr 1fr; margin-top:14px; }
.span-2 { grid-column:1 / -1; }
.money-field { position:relative; }
.money-field span { color:var(--muted); font-weight:700; left:11px; position:absolute; top:50%; transform:translateY(-50%); }
.money-field input { padding-left:26px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.status { color:var(--muted); line-height:1.35; margin-top:12px; min-height:20px; }
.status.good { color:var(--ok); }
.status.bad { color:var(--danger); }
.message { border-radius:6px; font-size:13px; line-height:1.35; margin:0 0 14px; padding:10px 11px; }
.message.good { background:#edf8f1; color:var(--ok); }
.message.bad { background:#fff1f0; color:var(--danger); }
.message.warn { background:#fff7e8; color:#a15c00; }

.auto-card {
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:8px;
    margin-top:14px;
    min-height:110px;
    padding:16px;
}
.auto-card.ready { background:#eef8f2; border-color:#b9dfc7; }
.auto-card.bad { background:#fff1f0; border-color:#efbbb5; }
.auto-kicker {
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-bottom:8px;
    text-transform:uppercase;
}
.auto-card.ready .auto-kicker { color:var(--ok); }
.auto-card.bad .auto-kicker { color:var(--danger); }
.auto-title {
    font-size:20px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:8px;
    text-transform:uppercase;
}
.auto-meta {
    color:var(--muted);
    font-size:13px;
    line-height:1.35;
}
.auto-facts {
    border-top:1px solid var(--line);
    display:grid;
    gap:8px;
    grid-template-columns:1fr 1fr;
    margin-top:14px;
    padding-top:12px;
}
.auto-facts div:first-child {
    grid-column:1 / -1;
}
.auto-facts span {
    color:var(--muted);
    display:block;
    font-size:11px;
    font-weight:800;
    margin-bottom:3px;
    text-transform:uppercase;
}
.auto-facts strong {
    color:var(--ink);
    display:block;
    font-size:15px;
    line-height:1.15;
    text-transform:uppercase;
}
.advanced-fields {
    border-top:1px solid var(--line);
    margin-top:14px;
    padding-top:12px;
}
.advanced-fields summary {
    color:var(--muted);
    cursor:pointer;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.preview-wrap { background:#eef1f4; border:1px solid var(--line); border-radius:8px; margin-top:14px; padding:12px; }
.preview-title { color:var(--muted); font-size:12px; font-weight:700; margin-bottom:8px; text-transform:uppercase; }
.screen-tag { aspect-ratio:2.4 / 1; max-width:420px; width:100%; }

.queue-head { align-items:center; display:flex; gap:12px; justify-content:space-between; margin-bottom:12px; }
.count { color:var(--muted); font-size:13px; font-weight:700; }
.queue { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
table { border-collapse:collapse; width:100%; }
th, td { border-bottom:1px solid var(--line); padding:10px; text-align:left; vertical-align:top; }
th { background:#f0f3f7; color:#536070; font-size:11px; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
.item-name { font-weight:700; line-height:1.25; }
.item-meta { color:var(--muted); font-size:12px; line-height:1.35; margin-top:3px; }
.row-actions { display:flex; gap:6px; justify-content:flex-end; }
.row-actions button { min-height:31px; padding:0 9px; }
.empty { color:var(--muted); padding:24px; text-align:center; }
.print-root { display:none; }

.label-tag {
    background:#fff;
    border:1px solid var(--tag-line);
    color:#222;
    display:grid;
    font-family:Arial, Helvetica, sans-serif;
    grid-template-columns:1.88fr 1fr;
    grid-template-rows:.61fr .39fr;
    height:100%;
    overflow:hidden;
    width:100%;
}
.label-main {
    background:var(--tag-green);
    border-bottom:1px solid var(--tag-line);
    border-right:1px solid var(--tag-line);
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:.045in .06in .04in;
    text-align:center;
}
.label-brand, .label-name {
    color:#30343b;
    font-size:13pt;
    font-weight:400;
    letter-spacing:.1px;
    line-height:1;
    overflow:hidden;
    text-transform:uppercase;
    white-space:nowrap;
}
.label-name { margin-top:.035in; }
.label-brand.text-long, .label-name.text-long { font-size:10.8pt; }
.label-brand.text-xlong, .label-name.text-xlong { font-size:8.8pt; }
.label-bottom {
    display:grid;
    gap:.018in;
    grid-template-columns:1fr auto;
    grid-template-rows:1fr 1fr;
    padding:.065in .07in .045in;
}
.label-size, .label-order, .label-date {
    align-self:center;
    color:#555963;
    font-size:9.2pt;
    line-height:1;
    overflow:hidden;
    white-space:nowrap;
}
.label-size { grid-column:1 / -1; }
.label-order { grid-column:1; grid-row:2; }
.label-date { grid-column:2; grid-row:2; justify-self:end; }
.label-price-panel {
    background:var(--tag-yellow);
    border-left:1px solid var(--tag-line);
    display:grid;
    grid-row:1 / span 2;
    grid-template-rows:.52fr .21fr .27fr;
    min-width:0;
    padding:.04in .045in .035in;
}
.label-price {
    align-self:center;
    color:#1f2430;
    font-size:32pt;
    font-weight:500;
    letter-spacing:0;
    line-height:.86;
    text-align:center;
    white-space:nowrap;
}
.label-price.price-wide { font-size:25pt; }
.label-price.price-wider { font-size:19pt; }
.label-unit {
    align-self:center;
    color:#252932;
    font-size:12pt;
    line-height:1;
    text-align:center;
    white-space:nowrap;
}
.label-barcode {
    align-self:end;
    background:#fff;
    height:.265in;
    overflow:hidden;
    padding:.01in .012in 0;
}
.label-barcode svg { display:block; height:100%; width:100%; }

.print-page {
    background:#fff;
    display:grid;
    grid-template-columns:repeat(2, 3.0139in);
    grid-template-rows:repeat(8, 1.2535in);
    height:11in;
    padding:.493in 0 0 1.229in;
    page-break-after:always;
    width:8.5in;
}
.tag-cell {
    height:1.2535in;
    overflow:hidden;
    padding:0;
    width:3.0139in;
}
.print-root.guides .tag-cell { outline:1px solid #aaa; }

.users-layout { display:grid; gap:16px; grid-template-columns:360px 1fr; }
.compact-form { display:grid; gap:12px; }
.inline-form { display:grid; gap:8px; grid-template-columns:1fr 110px 180px auto; align-items:end; }

@media (max-width:900px) {
    .workspace, .users-layout { grid-template-columns:1fr; }
    .pricing-grid { grid-template-columns:1fr 1fr; }
    .topbar { align-items:flex-start; flex-direction:column; }
    .toolbar { justify-content:flex-start; }
    .inline-form { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .app { padding:14px; }
    .form-grid, .scan-row, .pricing-grid { grid-template-columns:1fr; }
    .queue { overflow-x:auto; }
}
@media print {
    @page { margin:0; size:letter; }
    body { background:#fff; margin:0; }
    .app { display:none; }
    .print-root { display:block; }
}