* { box-sizing: border-box; }
:root { --bg: #f1f5f9; --card: #fff; --line: #cbd5e1; --soft: #e2e8f0; --text: #0f172a; --mute: #64748b; --blue: #2563eb; --green: #15803d; --violet: #6d28d9; --amber: #d97706; --red: #dc2626; --dark: #1e293b; }
body { margin: 0; font-family: "Segoe UI", system-ui, Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 10px; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #93c5fd; border-color: var(--blue); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--mute); font-weight: 500; padding: 5px 4px; border-bottom: 1px solid var(--soft); position: sticky; top: 0; background: #fff; }
td { padding: 5px 4px; border-bottom: 1px solid var(--soft); vertical-align: top; }
.r { text-align: right; } .c { text-align: center; } .mute { color: var(--mute); } .small { font-size: 12px; } .b { font-weight: 600; }
.green { color: var(--green); } .red { color: var(--red); } .amber { color: var(--amber); } .violet { color: var(--violet); }
.strike td { color: #cbd5e1; text-decoration: line-through; }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; } .wrap { flex-wrap: wrap; } .grow { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.btn-blue { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.btn-amber { background: var(--amber); border-color: var(--amber); color: #fff; font-weight: 600; }
.btn-dark { background: var(--dark); border-color: var(--dark); color: #fff; font-weight: 600; }
.btn-big { padding: 12px; font-size: 17px; border-radius: 8px; }
.link { border: 0; background: none; padding: 0; color: var(--blue); text-decoration: underline; }
.badge { display: inline-block; border-radius: 4px; padding: 0 5px; font-size: 11px; }
.badge.ok { background: #dcfce7; color: #166534; } .badge.no { background: #fee2e2; color: #b91c1c; } .badge.wait { background: #fef3c7; color: #92400e; } .badge.gray { background: #f1f5f9; color: #475569; }

/* layout */
.top { display: flex; align-items: center; gap: 12px; background: var(--dark); color: #fff; padding: 8px 14px; flex-wrap: wrap; }
.top .shop { font-size: 17px; font-weight: 700; margin-right: auto; }
.top .stat { text-align: right; line-height: 1.1; min-width: 90px; } .top .stat small { display: block; color: #94a3b8; font-size: 11px; } .top .stat b { font-size: 16px; }
.top button { background: transparent; color: #cbd5e1; border-color: #475569; }
.chip { border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 600; } .chip.open { background: #16a34a; } .chip.closed { background: #64748b; } .chip.stale { background: var(--red); }
.tabs { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: #fff; }
.tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--mute); }
.tabs button.on { color: var(--text); font-weight: 700; border-bottom-color: var(--blue); }
main { padding: 12px 14px; max-width: 1600px; margin: 0 auto; }
.pos { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: start; }
@media (max-width: 1000px) { .pos { grid-template-columns: 1fr; } .grid5 { grid-template-columns: repeat(3, 1fr); } }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.tile { min-height: 70px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; border-radius: 8px; }
.tile b { font-size: 14px; line-height: 1.15; } .tile span { font-size: 12px; opacity: .8; }
.tile.slate { background: #f8fafc; } .tile.blue { background: #eff6ff; border-color: #bfdbfe; } .tile.green { background: #f0fdf4; border-color: #bbf7d0; }
.tile.amber { background: #fffbeb; border-color: #fde68a; } .tile.rose { background: #fff1f2; border-color: #fecdd3; } .tile.violet { background: #f5f3ff; border-color: #ddd6fe; }
.tile:active { transform: scale(.97); }
.tile.custom { border-style: dashed; align-items: center; justify-content: center; color: var(--mute); }

/* cart */
.seg { display: grid; grid-auto-flow: column; gap: 6px; } .seg button { padding: 9px 4px; font-weight: 600; }
.seg button.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.seg.pay button.on[data-v=CASH] { background: var(--green); border-color: var(--green); } .seg.pay button.on[data-v=UPI] { background: var(--violet); border-color: var(--violet); }
.seg.pay button.on[data-v=BANK] { background: var(--blue); border-color: var(--blue); } .seg.pay button.on[data-v=CREDIT] { background: var(--amber); border-color: var(--amber); }
.cart { max-height: 330px; overflow: auto; margin: 8px 0; }
.line { border: 1px solid var(--soft); border-radius: 8px; padding: 6px; margin-bottom: 6px; }
.line input { padding: 4px 6px; }
.line .qty { width: 64px; text-align: center; } .line .rate { width: 80px; text-align: right; } .line .gst { width: 54px; text-align: right; }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--soft); padding-top: 6px; }
.total b { font-size: 28px; }
.change { background: #dcfce7; color: #166534; border-radius: 6px; padding: 4px 8px; font-weight: 700; white-space: nowrap; }
.drop { position: relative; } .drop-list { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px #0002; max-height: 260px; overflow: auto; }
.drop-list button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; } .drop-list button:hover { background: #f1f5f9; }
.scroll { max-height: 440px; overflow: auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.stat-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .stat-box small { color: var(--mute); display: block; font-size: 11px; } .stat-box b { font-size: 18px; }
.sumline { display: flex; justify-content: space-between; padding: 3px 0; } .sumline.tot { border-top: 1px solid var(--line); font-weight: 700; margin-top: 2px; padding-top: 5px; }
.notice { border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; } .notice.red { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .notice.green { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

/* login / start */
.center { max-width: 420px; margin: 8vh auto; }
.center h1 { margin: 0 0 4px; font-size: 22px; }

/* modal + toast */
#modal { position: fixed; inset: 0; background: #0f172a66; display: flex; align-items: center; justify-content: center; z-index: 50; padding: 12px; }
.modal-box.wide { width: min(1150px, 100%); }
.doc-row { gap: 6px; margin-bottom: 6px; align-items: stretch; } .doc-seg button { font-weight: 600; }
.modal-box { background: #fff; border-radius: 10px; width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--soft); } .modal-head .x { border: 0; font-size: 22px; padding: 0 6px; }
#modal-body { padding: 14px; overflow: auto; }
#toast { position: fixed; top: 12px; right: 12px; z-index: 10050; display: flex; flex-direction: column; gap: 6px; }
.t { background: var(--dark); color: #fff; padding: 9px 14px; border-radius: 8px; box-shadow: 0 4px 12px #0003; max-width: 380px; } .t.err { background: var(--red); } .t.ok { background: var(--green); }
label.f { display: block; font-size: 12px; color: var(--mute); margin-bottom: 8px; } label.f input, label.f select, label.f textarea { margin-top: 3px; font-size: 14px; color: var(--text); }

/* job picker chips */
.chip-b { padding: 6px 10px; border-radius: 8px; text-align: left; line-height: 1.15; margin: 2px 0 8px; }
.chip-b small { display: block; color: var(--mute); font-size: 11px; }
.chip-b.on { background: var(--dark); border-color: var(--dark); color: #fff; } .chip-b.on small { color: #cbd5e1; }
.picker-opts b.small { display: block; margin-top: 4px; color: var(--mute); }
.tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* sticker sheet */
.sk { display: grid; grid-template-columns: minmax(380px, 5fr) 6fr; gap: 12px; align-items: start; }
@media (max-width: 1000px) { .sk { grid-template-columns: 1fr; } }
.sk-form > b { display: block; margin-top: 10px; }
.sk-prev svg { display: block; border-radius: 6px; }
.al3 { display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; }
.al3 button { padding: 3px 0; } .al3 button.on, button.small.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.sk-scroll { max-height: 62vh; overflow: auto; border-radius: 6px; background: #e2e8f0; }
.sk-scroll svg { display: block; }
.sk-smooth { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 6px; }
@media (max-width: 700px) { .sk-smooth { grid-template-columns: 1fr; } }
.sk-trace { border: 1px solid var(--soft); border-radius: 8px; padding: 8px 10px; margin-top: 8px; background: #f8fafc; }
.sk-slider { display: grid; grid-template-columns: 130px 1fr 64px; gap: 4px 8px; align-items: center; margin-top: 6px; }
.sk-slider span { font-size: 13px; } .sk-slider input[type=range] { padding: 0; } .sk-slider input[type=number] { padding: 3px 6px; }
.sk-slider small { grid-column: 2 / -1; font-size: 11px; margin-top: -4px; }
.sk-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.sk-steps figure { margin: 0; text-align: center; } .sk-steps img { border: 1px solid var(--line); border-radius: 4px; background: #fff; max-width: 150px; display: block; }
.sk-steps figcaption { font-size: 11px; color: var(--mute); max-width: 150px; } .sk-steps .arrow { color: var(--mute); }
.sk-shape { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 8px; }
.sk-shape svg { flex: none; }
.bg-ed { display: grid; grid-template-columns: 1fr 320px; gap: 12px; align-items: start; }
@media (max-width: 900px) { .bg-ed { grid-template-columns: 1fr; } }
.bg-canvas-wrap { background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; border: 1px solid var(--line); border-radius: 8px; display: flex; justify-content: center; align-items: center; min-height: 300px; }
#bg-cv { max-width: 100%; max-height: 68vh; touch-action: none; cursor: crosshair; display: block; }
.bg-row { display: grid; grid-template-columns: 1fr 120px 36px; gap: 6px; align-items: center; font-size: 12px; margin-top: 6px; } .bg-row input { padding: 0; }
.ex-row { display: grid; grid-template-columns: 80px 1fr; gap: 6px; align-items: center; margin-top: 4px; font-size: 13px; }
.cnt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
table.cnt input { padding: 3px 5px; width: 100%; } table.cnt td { padding: 2px 3px; }
.stat-box.amber-box { background: #fffbeb; border-color: #fde68a; }
.gang-row { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 5px; background: #fff; flex-wrap: wrap; }
.gang-row.ed { border-color: #f59e0b; box-shadow: 0 0 0 2px #fde68a; }
.gang-row img { width: 44px; height: 44px; object-fit: contain; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 8px 8px; border-radius: 4px; flex: none; }
.gang-row .grow { min-width: 120px; }
.pk-opt { display: block; border: 1px solid #e2e8f0; border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; }
.pk-opt.on { border-color: #2563eb; background: #eff6ff; }

/* sticker step-by-step */
.wz-bar { margin-bottom: 12px; }
.sk-stepper { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; }
.sk-st { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 10px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; flex: 1; min-width: 120px; }
.sk-st b { display: block; font-size: 14px; } .sk-st small { display: block; font-size: 11px; color: #64748b; line-height: 1.2; }
.sk-st .num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e2e8f0; color: #334155; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sk-st.on { background: #eff6ff; border-color: #2563eb; } .sk-st.on .num { background: #2563eb; color: #fff; }
.sk-st.past .num { background: #16a34a; color: #fff; }
.sk-st-arrow { color: #cbd5e1; font-size: 20px; }
.sk-all { margin-left: auto; padding: 0 6px; white-space: nowrap; }
.sk-help { display: flex; gap: 10px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.sk-help-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.sk-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
.sk-nav button { padding: 9px 16px; font-size: 15px; }
.sk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.sk-actions button.big { padding: 9px 16px; font-size: 15px; }
.sk[data-step="1"] [data-st]:not([data-st~="1"]) { display: none !important; }
.sk[data-step="2"] [data-st]:not([data-st~="2"]) { display: none !important; }
.sk[data-step="3"] [data-st]:not([data-st~="3"]) { display: none !important; }
.sk[data-step="4"] [data-st]:not([data-st~="4"]) { display: none !important; }
.sk[data-step="5"] [data-st]:not([data-st~="5"]) { display: none !important; }
.sk[data-step="6"] [data-st]:not([data-st~="6"]) { display: none !important; }
.sk-side > .sk-actions { margin: 0 0 8px; background: #fffbeb; border-color: #fde68a; }
.pj-badge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; padding: 6px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.pj-badge .small { margin-left: 0; } .pj-badge button:first-of-type { margin-left: auto; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; }
.pj-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; background: #fff; }
.pj-thumb { width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 8px 8px; border-radius: 6px; font-size: 28px; }
.pj-thumb img { max-width: 64px; max-height: 64px; }
.brand-box { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; }
.brand-img { width: 120px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px dashed #cbd5e1; border-radius: 6px; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.brand-img img { max-width: 116px; max-height: 56px; }

/* ================= Design system v2 — one height, one spacing, one colour set (build 23) =================
   Every button / box / dropdown is the same height and lines up; cards side by side end at the same line;
   one primary colour (blue) for the main action of each screen, green only for money coming in, amber for warnings. */
:root { --bg: #f3f5f8; --line: #d7dce4; --soft: #e8ecf1; --text: #111827; --mute: #64748b; --blue: #2563eb; --blue-d: #1d4ed8; --green: #15803d; --amber: #b45309; --red: #dc2626; --dark: #1e293b; --h: 38px; --r: 8px; --g: 12px; }
body { line-height: 1.45; background: var(--bg); }
button { min-height: var(--h); padding: 6px 14px; border-radius: var(--r); border-color: var(--line); font-weight: 500; line-height: 1.25; transition: background .12s, border-color .12s, box-shadow .12s; }
button:hover:not(:disabled) { border-color: #94a3b8; }
button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select { height: var(--h); padding: 0 10px; border-radius: var(--r); border-color: var(--line); }
textarea { border-radius: var(--r); border-color: var(--line); padding: 8px 10px; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--blue); vertical-align: middle; }
.btn-blue:hover:not(:disabled) { background: var(--blue-d); border-color: var(--blue-d); }
.btn-dark:hover:not(:disabled) { background: #0f172a; }
.btn-big { min-height: 48px; font-size: 16px; font-weight: 700; padding: 10px 16px; }
button.small { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.link, button.link { min-height: 0; padding: 0; border: 0; background: none; font-weight: 500; text-decoration: none; color: var(--blue); }
.link:hover { text-decoration: underline; }
td .link + .link, td .link + button, td button + .link { margin-left: 10px; }
.tabs button { min-height: 0; padding: 10px 14px; font-weight: 500; }
.top button { min-height: 32px; padding: 4px 12px; }
.modal-head .x { min-height: 0; }
.al3 button { min-height: 28px; padding: 3px 0; } .drop-list button { min-height: 36px; padding: 6px 10px; }
.sk-st { min-height: 0; } .sk-nav button, .sk-actions button.big { min-height: 40px; }
/* segmented choices: equal widths, same gap as the grids below them so columns line up */
.seg { gap: 8px; grid-auto-columns: 1fr; }
.grid2, .grid3, .grid4 { gap: 8px 10px; }
/* a choice in a grid (expense category …): soft blue when picked */
button.pick.on { background: #eff6ff; border-color: var(--blue); color: var(--blue-d); font-weight: 600; box-shadow: inset 0 0 0 1px var(--blue); }
/* cards */
.card { padding: 16px; border-color: var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card > b:first-child { font-size: 15px; }
.pos { gap: var(--g); align-items: stretch; }
.col { display: flex; flex-direction: column; gap: var(--g); min-width: 0; }
.col > .card { margin: 0 !important; }
main > * + * { margin-top: var(--g); }
main > .stats { margin-bottom: 0; }
.stats { gap: 10px; }
.card .stats { margin-bottom: 12px; }
.stat-box { padding: 10px 12px; border-radius: var(--r); border-color: var(--line); min-height: 62px; display: flex; flex-direction: column; justify-content: center; }
.stat-box b { font-size: 19px; line-height: 1.25; }
/* forms: labels above boxes, boxes always full width of their column */
label.f { margin-bottom: 10px; font-weight: 500; }
label.f > input, label.f > select, label.f > textarea { display: block; width: 100% !important; margin-top: 4px; }
.row { gap: 10px; }
.row:has(> label.f) { align-items: flex-end; }
.row > label.f { margin-bottom: 0; }
/* one input line + its button (Add paper, Add machine …) */
.form-line { display: grid; gap: 8px; align-items: end; margin-top: 10px; }
.form-line.c4 { grid-template-columns: 1.4fr 1fr 1fr auto; } .form-line.c2 { grid-template-columns: 1fr auto; }
@media (max-width: 1440px) { .form-line.c4 { grid-template-columns: 1fr 1fr; } }
/* tables: text, buttons and boxes on one line in every row */
th { font-size: 12px; font-weight: 600; color: var(--mute); padding: 8px 6px; vertical-align: bottom; }
td { padding: 8px 6px; vertical-align: middle; }
tbody tr:hover td, table tr:hover > td { background: #f8fafc; }
.notice { border-radius: var(--r); }
.chip { padding: 3px 10px; }
@media (max-width: 1000px) { .pos[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }
td input:not([type=checkbox]):not([type=radio]) { padding: 0 8px; }
td input[type=number] { min-width: 72px; }
button { white-space: nowrap; }
.tile, .chip-b, .sk-st, .pk-opt, button.pick { white-space: normal; }
.chip-b.sk-view { white-space: nowrap; margin: 0; }
td.r, th.r { white-space: nowrap; }
@media (max-width: 700px) { .seg button, .grid2 button, .grid3 button, .grid4 button { white-space: normal; padding-left: 6px; padding-right: 6px; } main { padding: 10px; } .card { padding: 12px; } }
@media (max-width: 1000px) { .pos, .pos[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 700px) { main table { display: block; overflow-x: auto; } }

/* License Agreement dialog (first sign-in) */
.terms { display: flex; flex-direction: column; gap: 12px; }
.terms-ok { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; background: #F8FAFC; border: 1px solid var(--line, #E2E8F0); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.terms-ok input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.terms .row-end { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.login-legal { font-size: 12px; text-align: center; margin: 10px 0 0; color: #64748B; }
.terms-frame { width: 100%; height: min(48vh, 460px); border: 1px solid var(--line, #E2E8F0); border-radius: 8px; background: #fff; }
@media (max-width: 600px) { .terms-frame { height: 34vh; } .terms-ok { font-size: 13px; } }

/* Billing item buttons: raised keys that press down and spring back (only the pressed key moves) */
.tiles { row-gap: 12px; }
.tiles .tile {
  --edge: #cbd5e1; position: relative; border: 1px solid rgba(15, 23, 42, .14); border-radius: 10px; margin-bottom: 4px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 4px 0 var(--edge), 0 7px 10px -5px rgba(15, 23, 42, .35), inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer;
}
.tiles .tile.blue { --edge: #93c5fd; } .tiles .tile.green { --edge: #86efac; } .tiles .tile.amber { --edge: #fcd34d; }
.tiles .tile.rose { --edge: #fda4af; } .tiles .tile.violet { --edge: #c4b5fd; } .tiles .tile.custom { --edge: #e2e8f0; }
.tiles .tile:hover { filter: brightness(.98); transform: translateY(-1px); box-shadow: 0 5px 0 var(--edge), 0 10px 14px -6px rgba(15, 23, 42, .4), inset 0 1px 0 rgba(255, 255, 255, .95); }
.tiles .tile:active, .tiles .tile.pressed { transform: translateY(4px); filter: brightness(.94); box-shadow: 0 0 0 var(--edge), inset 0 2px 5px rgba(15, 23, 42, .25); }
.tiles .tile:focus-visible { outline: 2px solid var(--blue, #2563eb); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tiles .tile { transition: none; } .tiles .tile:hover { transform: none; } }

/* ---------- Laser Cut Studio ---------- */
.lz { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); gap: 12px; align-items: start; }
@media (max-width: 1000px) { .lz { grid-template-columns: minmax(0, 1fr); } }
.lz-top { gap: 8px; margin-bottom: 10px; align-items: center; }
.lz-canvas { background: #e2e8f0; border-radius: 8px; padding: 10px; }
.lz-canvas svg { display: block; width: 100%; max-height: 64vh; }
.lz-stats { margin-top: 8px; font-size: 14px; } .lz-stats b { font-size: 16px; } .lz-bad { color: var(--red, #dc2626); }
.lz-tabs { gap: 6px; margin-bottom: 8px; } .lz-tabs .chip-b { margin: 0; }
.lz-empty { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; background: #f8fafc; border: 2px dashed var(--line); border-radius: 10px; padding: 20px; }
.lz-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #cbd5e1; border-top-color: var(--blue, #2563eb); animation: lzspin .8s linear infinite; }
@keyframes lzspin { to { transform: rotate(360deg); } }
.lz-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.lz-g { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; text-align: center; }
.lz-g.box { border-color: #f59e0b; background: #fffbeb; } .lz-g span { font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lz-g small { font-size: 11px; color: var(--mute); }
.lz-right { display: flex; flex-direction: column; gap: 4px; }
.lz-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 6px; }
.lz-sec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.lz-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 4px; }
.lz-drop { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; border: 2px dashed #93c5fd; background: #eff6ff; border-radius: 10px; padding: 14px; cursor: pointer; }
.lz-drop.over { background: #dbeafe; border-color: var(--blue, #2563eb); } .lz-drop small { color: var(--mute); }
.lz-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; align-items: end; }
.lz-form input[type=color] { height: var(--h, 38px); padding: 2px; }
.lz-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.lz-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "th nm x" "th ctl ctl"; gap: 4px 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }
.lz-row .lz-th { grid-area: th; } .lz-row .lz-nm { grid-area: nm; } .lz-row .lz-x { grid-area: x; } .lz-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lz-row.box { border-color: #f59e0b; background: #fffbeb; }
.lz-th svg { display: block; } .lz-nm { min-width: 0; } .lz-nm b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lz-nm small { font-size: 11px; color: var(--mute); }
.lz-q { display: flex; align-items: center; gap: 4px; font-size: 12px; } .lz-q input { width: 64px; }
.lz-row select { max-width: 120px; font-size: 12px; } .lz-x { color: var(--red, #dc2626); font-weight: 700; }
.lz-badge { font-size: 11px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 10px; padding: 2px 8px; }
.lz-chk { gap: 6px; align-items: center; } .lz-chk input { width: auto; }
.lz-layers, .lz-price, .lz-mats { width: 100%; border-collapse: collapse; font-size: 13px; }
.lz-layers td, .lz-layers th, .lz-price td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.lz-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #94a3b8; vertical-align: middle; }
.lz-price .r { text-align: right; } .lz-price .tot td { font-weight: 700; font-size: 15px; border-bottom: 0; }
.lz-uses { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lz-mats td { padding: 2px; } .lz-mats input { font-size: 12px; padding: 4px 6px; min-height: 30px; } .lz-mats td:first-child { width: 46%; }
@media (max-width: 600px) { .lz-row { grid-template-columns: 40px minmax(0, 1fr) auto; } }

/* ---------- Neon & LED Sign Studio ---------- */
.sg-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-seg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 6px; }
.sg-seg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-modes button, .sg-seg4 button, .sg-seg3 button { font-size: 13px; padding-left: 4px; padding-right: 4px; }
.sg-wrap { position: relative; }
.sg-busy { position: absolute; top: 10px; right: 10px; display: none; background: rgba(255,255,255,.85); border-radius: 50%; padding: 4px; }
.sg-busy .lz-spin { width: 24px; height: 24px; border-width: 3px; }
.sg-canvas { background: #e2e8f0; border-radius: 8px; padding: 0; overflow: hidden; }
.sg-canvas.dark { background: #0b0f19; }
.sg-canvas svg { display: block; width: 100%; height: auto; max-height: 64vh; }
.sg-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.sg-text { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; align-items: end; }
.sg-grid select, .sg-grid input { font-size: 13px; }
.sg-photo { cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: #fff; }
.sg-h { display: block; margin-top: 10px; }
.sg-tbl td:first-child { width: 40%; }
@media (max-width: 600px) { .sg-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-seg4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* font picker (Neon & LED Sign Studio) */
.sg-fontbtn { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 18px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; grid-column: span 2; min-width: 0; }
.sg-fontbtn span { font-family: system-ui, sans-serif; font-size: 12px; color: var(--mute); }
.sg-pick-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60; }
.sg-pick { position: fixed; z-index: 61; left: 50%; top: 4vh; transform: translateX(-50%); width: min(980px, calc(100vw - 24px)); max-height: 92vh; display: flex; flex-direction: column; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.sg-pick-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sg-pick-q { flex: 1; min-width: 160px; }
.sg-pick-groups { gap: 6px; margin-bottom: 8px; } .sg-pick-groups .chip-b { margin: 0; }
.sg-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; overflow: auto; padding: 2px; }
.sg-card { min-height: 74px; display: flex; align-items: center; justify-content: center; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: none; transform: none; }
.sg-card span { font-size: 26px; line-height: 1.15; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sg-card:hover { border-color: #93c5fd; background: #f8fafc; } .sg-card.on { border-color: var(--blue, #2563eb); box-shadow: 0 0 0 2px #bfdbfe; }
@media (max-width: 600px) { .sg-pick-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .sg-card span { font-size: 22px; } }
.sg-views { display: grid; grid-template-columns: repeat(3, auto); width: auto; } @media (max-width: 600px) { .sg-views { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); } .sg-views button { font-size: 12px; padding-left: 4px; padding-right: 4px; } }
.sg-gap input[type=range] { width: 100%; padding: 0; min-height: 28px; accent-color: var(--blue, #2563eb); }
.sg-gap-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); }
/* Add to bill + Add & next (job picker and studios) */
.pk-addrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 6px; }
.pk-addrow button { width: 100%; margin: 0; white-space: normal; line-height: 1.2; }
.pk-next { border: 2px solid var(--blue, #2563eb); color: var(--blue, #2563eb); background: #eff6ff; font-weight: 700; }
.pk-added { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 8px; padding: 6px 8px; margin: 6px 0; display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow: auto; }
.pk-added div.small { display: flex; justify-content: space-between; gap: 8px; } .pk-added div.small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- alignment pass (build 40) ---------- */
/* boxes in one form row share one bottom line, even when a label wraps onto two lines */
:is(.grid2, .grid3, .grid4, .grid5, .sg-grid, .lz-form, .form-row) > label.f { display: flex; flex-direction: column; justify-content: flex-end; }
:is(.grid2, .grid3, .grid4, .grid5, .sg-grid, .lz-form, .form-row) > label.f > :is(input, select, textarea) { margin-top: 4px; }
/* grid columns may shrink below their content (a wide table no longer pushes the page wider than the screen) */
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card { min-width: 0; }
/* a card with a wide table: the table scrolls sideways inside the card */
.card:has(> table) { overflow-x: auto; }
/* phones: side-by-side cards stack */
@media (max-width: 700px) { :is(.grid2, .grid3, .grid4):has(> .card) { grid-template-columns: minmax(0, 1fr); } }
/* full-width buttons may wrap a long name instead of running out of the box */
button[style*="width:100%"], .btn-big, .pk-addrow button { white-space: normal; overflow-wrap: anywhere; }
button { max-width: 100%; }
/* phones: a row of title + search + buttons wraps instead of running off the card */
@media (max-width: 700px) { .row { flex-wrap: wrap; } .row > input, .row > select { min-width: 0; flex: 1 1 140px; } }
/* button strips (modes / panels / shapes) in the studios: wrap words, and go to two rows when there is no room */
:is(.sg-modes, .sg-seg4, .sg-seg3, .sg-seg2, .lz-seg, .sg-views) > button { white-space: normal; line-height: 1.15; padding-left: 6px; padding-right: 6px; min-width: 0; }
.sg-seg4 { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.sg-modes { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.lz-seg { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
:is(.sg-modes, .sg-seg4, .lz-seg) { grid-auto-flow: row; grid-auto-columns: auto; }
@media (max-width: 700px) { label.f .row { flex-wrap: nowrap; } .row > input[type=color], .row > input[type=checkbox], .row > input[type=radio] { flex: 0 0 auto; } }
.row > input[type=color] { width: 44px; flex: 0 0 44px; }
/* build 41 — Checkout button (picker + studios) */
.pk-checkout { width: 100%; margin: 8px 0 0; background: #16a34a; color: #fff; border: 0; font-weight: 700; white-space: normal; line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pk-checkout small { font-weight: 500; opacity: .92; font-size: 12px; }
.pk-checkout:hover { background: #15803d; }
@keyframes checkoutFlash { 0% { box-shadow: 0 0 0 4px #22c55e; } 100% { box-shadow: 0 0 0 0 transparent; } }
.checkout-flash { animation: checkoutFlash 1.6s ease-out; }
/* build 45 — node editing in the sign studio */
/* build 45 — node editor side panel: buttons wrap instead of running out of the panel */
#ne-side .row { flex-wrap: wrap; }
#ne-side button { white-space: normal; min-width: 0; line-height: 1.2; }
#ne-side .row > button.grow { flex: 1 1 110px; }
#ne-side { max-height: 72vh; overflow-y: auto; padding-right: 4px; }

/* menu in colour groups (app.js TAB_GROUPS): Counter blue · Production orange · Accounts green · Setup slate */
.tabs.tabs-g { gap: 6px 8px; padding: 8px 14px 0; align-items: flex-end; }
.tgrp { --gc: #2563eb; --gt: #eff6ff; display: flex; flex-direction: column; border-top: 3px solid var(--gc); background: linear-gradient(var(--gt), #fff 70%); border-radius: 8px 8px 0 0; padding: 0 4px; }
.tgrp .tg-l { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gc); padding: 3px 8px 0; }
.tgrp .tg-b { display: flex; flex-wrap: wrap; }
.tgrp .tg-b button { padding: 6px 10px 8px; }
.tgrp .tg-b button:hover { color: var(--gc); }
.tgrp .tg-b button.on { color: var(--gc); border-bottom-color: var(--gc); }
.tg-sale { --gc: #2563eb; --gt: #eff6ff; }
.tg-make { --gc: #ea580c; --gt: #fff7ed; }
.tg-acct { --gc: #15803d; --gt: #f0fdf4; }
.tg-setup { --gc: #475569; --gt: #f1f5f9; }
.tg-grow { --gc: #be185d; --gt: #fdf2f8; }
/* print technology: choices that don't normally suit the chosen media */
.chip-b.dim { opacity: .55; border-style: dashed; } .chip-b.dim.on { opacity: 1; border-style: solid; }
/* phone menu (build 75): one row per group — coloured group name in a fixed left column, its screens in one line beside it
   (swipe sideways if they don't fit), so every group label and every first button line up */
@media (max-width: 700px) {
  .tabs.tabs-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .tabs.tabs-g .tgrp { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch; border-top: 0; border-left: 4px solid var(--gc); border-radius: 0; padding: 0; background: linear-gradient(90deg, var(--gt), #fff 55%); border-bottom: 1px solid var(--line); }
  .tabs.tabs-g .tgrp .tg-l { display: flex; align-items: center; padding: 0 8px 0 10px; font-size: 10px; letter-spacing: 1px; line-height: 1.15; }
  .tabs.tabs-g .tgrp .tg-b { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .tabs.tabs-g .tgrp .tg-b::-webkit-scrollbar { display: none; }
  .tabs.tabs-g .tgrp .tg-b button { flex: 0 0 auto; white-space: nowrap; padding: 11px 11px 9px; font-size: 14px; scroll-snap-align: start; }
  .tabs.tabs-g .tgrp.cur { background: linear-gradient(90deg, var(--gt), var(--gt) 60%, #fff); }
}
/* header (build 75): stats and user in their own boxes so the phone layout can line them up */
.top .tstats { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.top .tuser { display: flex; gap: 10px; align-items: center; }
@media (max-width: 700px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "shop user" "chip chip" "stats stats"; gap: 6px 10px; padding: 8px 12px 10px; }
  .top .shop { grid-area: shop; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; align-self: center; }
  .top .shop small { display: block; font-size: 10px !important; line-height: 1.2; }
  .top > .chip { grid-area: chip; justify-self: start; font-size: 12px; padding: 2px 10px; }
  .top .tuser { grid-area: user; gap: 8px; } .top .tuser .small { font-size: 12px; color: #cbd5e1; } .top .tuser button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
  .top .tstats { grid-area: stats; display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
  .top .tstats .stat { text-align: left; min-width: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; padding: 5px 7px; }
  .top .tstats .stat small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .tstats .stat b { font-size: 14px; white-space: nowrap; }
  /* the menu row: a soft fade at the right edge shows there is more to swipe */
  .tabs.tabs-g .tgrp .tg-b { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}
/* Specifications on a phone: each option is one block — name on its own line, size / rate and hide / delete under it */
@media (max-width: 700px) {
  .pe-table tr:first-child { display: none; }
  .pe-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .pe-table td { display: block; border: 0; padding: 0; }
  .pe-table td:first-child { grid-column: 1 / -1; } .pe-table td:first-child input { width: 100%; }
  .pe-table td[colspan] { padding: 6px 8px; border-radius: 6px; }
  .pe-table td:nth-child(2) { white-space: normal !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
}
/* Items list on a phone: one tidy block per item — colour, name and rate on top; specification, tax, code, actions below */
@media (max-width: 700px) {
  .it-table tr:first-child { display: none; }
  .it-table tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; padding: 10px 2px; border-bottom: 1px solid var(--line); align-items: baseline; }
  .it-table td { display: block; border: 0; padding: 0; text-align: left; }
  .it-table td:nth-child(1) { grid-row: 1; grid-column: 1; } .it-table td:nth-child(2) { grid-row: 1; grid-column: 2; }
  .it-table td.it-rate { grid-row: 1; grid-column: 3; font-weight: 700; text-align: right; }
  .it-table td:nth-child(3) { grid-column: 2 / 4; color: var(--mute); font-size: 13px; }
  .it-table td:nth-child(5), .it-table td:nth-child(6) { grid-column: 2 / 4; font-size: 12px; color: var(--mute); display: inline; }
  .it-table td[data-l]:empty { display: none; } .it-table td[data-l]::before { content: attr(data-l) " "; }
  .it-table td:nth-child(7) { grid-column: 2 / 4; } .it-table td:nth-child(7):empty { display: none; }
  .it-table td:nth-child(8) { grid-column: 1 / 4; text-align: right; margin-top: 4px; }
  .it-table td:nth-child(8) .link { padding: 4px 6px; }
}
@media (max-width: 700px) { main table.it-table, main table.pe-table { display: block; width: 100%; } .it-table tbody, .pe-table tbody { display: block; width: 100%; } }
@media (max-width: 700px) { .it-table td:nth-child(7):has(> .it-nopaper:only-child) { display: none; } }
/* bill lines on a phone: − qty + × rate = total stay on one line */
@media (max-width: 700px) {
  .line .row.ln-qty { flex-wrap: nowrap; gap: 6px; }
  .line .row.ln-qty > input { flex: 0 1 auto; min-width: 0; }
  .line .row.ln-qty > input.qty { width: 54px; text-align: center; } .line .row.ln-qty > input.rate { width: 74px; } .line .row.ln-qty > input.gst { width: 46px; }
  .line .row.ln-qty > button { flex: 0 0 34px; padding: 0; min-height: 36px; }
  .line .row.ln-qty > b { flex: 1 1 auto; white-space: nowrap; }
}

/* CNC Jali Studio */
.jl-cvwrap { display: flex; justify-content: center; } .jl-cvwrap canvas { display: block; border-radius: 4px; box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }
.jl-plans { display: flex; flex-direction: column; gap: 6px; }
.jl-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; white-space: normal; height: auto; }
.jl-plan.on { border-color: var(--blue, #2563eb); background: #eff6ff; box-shadow: 0 0 0 2px #bfdbfe; }
.jl-pl-t { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.jl .sg-seg3 .chip-b { white-space: normal; line-height: 1.15; padding: 6px 4px; height: auto; }

/* projects saved on the shop PC */
.pj-store { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.pj-loc { font-size: 12px; font-weight: 600; } .pj-loc.here { color: #15803d; } .pj-loc.on { color: #1d4ed8; } .pj-loc.off { color: #94a3b8; } .pj-loc.old { color: #b45309; }
/* CNC jali step 3: what was chosen + DXF / bill right under the ways to cut (build 81) */
.jl-go { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
/* CNC jali — nest jobs on boards (build 82) */
.jl-modebar { display: flex; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.jl-modebar button { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; text-align: left; }
.jl-modebar button small { font-weight: 400; opacity: .75; }
.jn-jobs, .jn-cmp { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.jn-jobs th, .jn-cmp th { text-align: left; font-weight: 600; color: #64748b; font-size: 12px; padding: 3px 4px; border-bottom: 1px solid #e2e8f0; }
.jn-jobs td, .jn-cmp td { padding: 4px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.jn-jobs tr.jn-off td { opacity: .55; }
.jn-cmp tr.jn-best td { background: #ecfdf5; }
.jn-addbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #f0f9ff; border: 1px dashed #93c5fd; border-radius: 10px; padding: 8px 10px; }
.jn .lz-badge { background: #059669; color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* CNC jali — find design by photo (build 83) */
.jf-drop { min-height: 180px; }
.jf-tools { gap: 6px; align-items: center; margin-bottom: 6px; }
.jf-tools button.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.jf-qwrap { background: #0f172a; border-radius: 10px; padding: 2px; display: flex; justify-content: center; }
.jf-qwrap canvas { touch-action: none; cursor: crosshair; max-width: 100%; }
.jf-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.jf-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px; text-align: left; white-space: normal; }
.jf-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid #e2e8f0; }
.jf-card b { font-size: 13px; } .jf-card small { color: var(--mute); font-size: 11px; line-height: 1.2; word-break: break-word; }
.jf-card.on { outline: 3px solid #16a34a; }
.jf-pct { position: absolute; top: 10px; right: 10px; background: #64748b; color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.jf-pct.mid { background: #d97706; } .jf-pct.hi { background: #16a34a; }
.jf-pagewrap { margin: 6px 0; border: 1px solid #e2e8f0; border-radius: 8px; overflow: auto; max-height: 70vh; background: #f8fafc; }
.jf-pagewrap canvas { display: block; }
.jf-bar { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin: 4px 0; } .jf-bar i { display: block; height: 100%; background: var(--blue); }
.jf-btn { cursor: pointer; display: inline-flex; align-items: center; }
.jf-btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--blue); }
.jf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.jf-steps.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jf-steps figure, .jf-pairs figure { margin: 0; background: #0f172a; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.jf-steps figcaption, .jf-pairs figcaption { color: #e2e8f0; font-size: 11px; text-align: center; line-height: 1.2; }
.jf-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; }
@media (max-width: 700px) { .jf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jf-steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jf-ok { color: #15803d; }
.jf-fit { position: absolute; top: 10px; left: 10px; background: rgba(15,23,42,.75); color: #fff; font-size: 10px; border-radius: 6px; padding: 1px 5px; }
.jf-fit.hi { background: #15803d; }
/* CNC jali — job on the board + drawing (build 89) */
.js-pos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.js-grid, .js-arrows { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; }
.js-grid button, .js-arrows button { width: 34px; height: 30px; padding: 0; font-size: 15px; }
.js-grid button.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.js-move { display: flex; flex-direction: column; gap: 4px; }
.js-left { line-height: 1.5; min-width: 180px; }
.js-dwg { border-top: 1px solid #e2e8f0; }
/* CNC jali — quote planner (build 93) */
.jq-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.jq-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.jq-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; text-align: left; white-space: normal; }
.jq-opt.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.jq-opt span { font-size: 12px; } .jq-opt .jq-big { font-size: 18px; font-weight: 800; }
.jq-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 4px; }
.jq-jobs figure { margin: 0; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; align-items: center; }
.jq-jobs figcaption { font-size: 12px; text-align: center; }
.jq-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; width: 100%; }
.jl-modebar button { flex: 1 1 200px; }
.ne-tg { display: inline-flex; gap: 4px; margin-left: 8px; } .ne-tg button.on { background: var(--dark); border-color: var(--dark); color: #fff; }

/* 📚 Design library (build 100) */
.jb-cats { gap: 4px; margin: 8px 0 2px; } .jb-cats .chip-b { margin: 0; } .jb-cats small { opacity: .7; margin-left: 2px; }
.jb-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.jb-card select { font-size: 12px; padding: 3px 4px; margin-top: 2px; }
.jb-btn { cursor: pointer; display: inline-flex; align-items: center; }
.jb-card { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.jb-btn { padding: 6px 12px; border-radius: 8px; }
/* build 103: shared design library + laser modes */
.jb-card { position: relative; }
.jb-fav { position: absolute; top: 8px; right: 8px; z-index: 1; width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 16px; line-height: 1; background: #ffffffe6; border: 1px solid #e2e8f0; color: #94a3b8; }
.jb-fav.on { color: #f59e0b; border-color: #fcd34d; }
.jb-card .jb-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.jb-card .jb-acts .jb-open { flex: 1 1 100%; }
.jb-card .jb-acts .jb-tool { flex: 1 1 0; }
.jb-best { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #475569; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; }
.jb-noimg { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0; color: #94a3b8; font-size: 12px; }
.jb-plain { border: 1px solid #cbd5e1; background: #fff; }
.lz-jobtag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.lz-jobtag::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.lz.lz-flat { display: block; }
/* build 105: saved jobs in the studios */
.pj-line { margin: 0 0 8px; }
.pj-job { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13px; }
.pj-job .pj-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pj-kinds .chip-b small { opacity: .7; margin-left: 2px; }
/* build 106: banner fitting */
.pk-fit { margin-top: 10px; padding: 8px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.pk-fitform { margin-top: 6px; padding: 8px; background: #f8fafc; border-radius: 8px; }
.ft-bar { height: 8px; background: #e2e8f0; border-radius: 5px; overflow: hidden; min-width: 120px; } .ft-bar i { display: block; height: 100%; background: #16a34a; }
.ft-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ft-row { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr 1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; background: #fff; }
.ft-row:hover { border-color: #93c5fd; }
.ft-head { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; align-items: end; margin-top: 8px; }
.ft-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 10px; }
.ft-spot { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.ft-spot.FITTED { border-color: #86efac; } .ft-spot.PROBLEM { border-color: #fca5a5; }
.ft-spot img, .ft-nophoto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #94a3b8; }
.ft-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }
.ft-btn { text-decoration: none; padding: 7px 12px; border-radius: 8px; display: inline-block; }
@media (max-width: 800px) { .ft-row, .ft-head { grid-template-columns: 1fr; } }
.ft-slot { display: flex; align-items: center; justify-content: center; overflow: hidden; } .ft-slot img { width: 100%; height: 100%; object-fit: cover; display: block; } .ft-slot a { display: block; width: 100%; height: 100%; }
.ft-thumb.ft-slot { font-size: 14px; background: #f1f5f9; }

/* ================= Theme v3 — fresh and friendly (build 108) =================
   Every module has its own colour (--ac, with a second colour --ac2 for gradients): the chosen buttons, the way-of-working
   bar, the step bar, the help box and the section headings take it — the screen tells you where you are. Money keeps its
   meaning (Cash green, UPI violet, Bank blue, Credit amber; red = wrong). Softer cards, round choice buttons. */
body { --ac: #2563eb; --ac2: #7c3aed; }
body[data-mod=dash] { --ac: #0284c7; --ac2: #06b6d4; }
body[data-mod=bill] { --ac: #2563eb; --ac2: #7c3aed; }
body[data-mod=open] { --ac: #d97706; --ac2: #f43f5e; }
body[data-mod=drawer] { --ac: #059669; --ac2: #10b981; }
body[data-mod=stock] { --ac: #0891b2; --ac2: #22d3ee; }
body[data-mod=sticker] { --ac: #db2777; --ac2: #f97316; }
body[data-mod=laser] { --ac: #ea580c; --ac2: #eab308; }
body[data-mod=jali] { --ac: #0d9488; --ac2: #65a30d; }
body[data-mod=signs] { --ac: #7c3aed; --ac2: #ec4899; }
body[data-mod=fitting] { --ac: #16a34a; --ac2: #0ea5e9; }
body[data-mod=lanyard] { --ac: #2563eb; --ac2: #db2777; }
body[data-mod=idcard] { --ac: #0891b2; --ac2: #7c3aed; }
body[data-mod=credit] { --ac: #0f766e; --ac2: #14b8a6; }
body[data-mod=upi] { --ac: #7c3aed; --ac2: #a855f7; }
body[data-mod=close] { --ac: #0369a1; --ac2: #0ea5e9; }
body[data-mod=report] { --ac: #4f46e5; --ac2: #8b5cf6; }
body[data-mod=items], body[data-mod=prices], body[data-mod=settings] { --ac: #4f46e5; --ac2: #0ea5e9; }
body { --at: color-mix(in srgb, var(--ac) 9%, #fff); --ad: color-mix(in srgb, var(--ac) 80%, #000);
  background: radial-gradient(1100px 420px at 0% 0%, color-mix(in srgb, var(--ac) 8%, transparent), transparent 70%),
              radial-gradient(900px 380px at 100% 0%, color-mix(in srgb, var(--ac2) 7%, transparent), transparent 70%), #f5f7fb;
  background-attachment: fixed; }
/* top bar: a colourful night sky instead of plain slate */
.top { background: linear-gradient(100deg, #172554 0%, #312e81 45%, #581c87 78%, #831843 100%); box-shadow: 0 2px 10px rgba(49, 46, 129, .25); }
.top .stat small { color: #c7d2fe; }
.tabs { background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); }
/* cards and boxes: softer, a little more round */
.card { border-color: #e3e8f1; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .04); }
.modal-box { border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); }
.modal-head { background: linear-gradient(90deg, var(--at), #fff 70%); border-radius: 16px 16px 0 0; }
.modal-head b, .modal-head h3 { color: var(--ad); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea { border-radius: 10px; border-color: #dbe1ec; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--ac) 22%, transparent); border-color: var(--ac); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--ac); }
button { border-radius: 10px; }
/* number boxes: each with its own colour on top */
.stat-box { border-radius: 12px; border-color: #e3e8f1; border-top: 3px solid #3b82f6; background: #fff; }
.stats > .stat-box:nth-child(6n+2) { border-top-color: #10b981; } .stats > .stat-box:nth-child(6n+3) { border-top-color: #f59e0b; }
.stats > .stat-box:nth-child(6n+4) { border-top-color: #8b5cf6; } .stats > .stat-box:nth-child(6n+5) { border-top-color: #ec4899; } .stats > .stat-box:nth-child(6n+6) { border-top-color: #06b6d4; }
/* choices: round pills, the chosen one in the module's colour */
.chip-b { border-radius: 999px; padding: 6px 14px; border-color: #dbe1ec; background: #fff; }
.chip-b:hover:not(:disabled) { border-color: var(--ac); }
.chip-b.on { background: var(--at); border-color: var(--ac); color: var(--ad); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ac); }
.chip-b.on small { color: var(--ad); opacity: .8; }
.chip-b.chip-add { border-style: dashed; border-color: color-mix(in srgb, var(--ac) 45%, #fff); color: var(--ad); background: color-mix(in srgb, var(--ac) 4%, #fff); }
button.pick.on { background: var(--at); border-color: var(--ac); color: var(--ad); box-shadow: inset 0 0 0 1px var(--ac); }
.pk-opt.on { border-color: var(--ac); background: var(--at); }
/* the "which way" bars and segmented choices: the module's colour, in a soft gradient */
.seg button { border-radius: 12px; }
.seg button.on { background: linear-gradient(135deg, var(--ac), var(--ac2)); border-color: transparent; color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--ac) 30%, transparent); }
.jl-modebar button { background: #fff; border-color: #e3e8f1; }
.jl-modebar button:not(.on):hover { border-color: var(--ac); background: var(--at); }
/* main buttons: a touch of gradient */
.btn-blue { background: linear-gradient(135deg, #2563eb, #4f46e5); border-color: #3b5bdb; }
.btn-blue:hover:not(:disabled) { background: linear-gradient(135deg, #1d4ed8, #4338ca); }
.btn-green { background: linear-gradient(135deg, #16a34a, #059669); border-color: #15803d; }
.btn-dark { background: linear-gradient(135deg, #1e293b, #334155); }
/* step bar and help: the module's colour */
.sk-stepper { border-radius: 14px; border-color: #e3e8f1; }
.sk-st.on { background: var(--at); border-color: var(--ac); } .sk-st.on .num { background: linear-gradient(135deg, var(--ac), var(--ac2)); }
.sk-help { background: var(--at); border-color: color-mix(in srgb, var(--ac) 28%, #fff); border-radius: 12px; }
.sk-help-n { background: linear-gradient(135deg, var(--ac), var(--ac2)); }
/* section headings: a small coloured mark, so the screen reads in blocks */
.picker-opts > b.small, .pk-fit > b.small, .lz-sec > b:first-child, .card > b:first-child { color: var(--ad); }
.picker-opts > b.small, .pk-fit > b.small { display: flex; align-items: center; gap: 6px; margin-top: 12px; margin-bottom: 4px; font-size: 13px; }
.picker-opts > b.small::before, .pk-fit > b.small::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, var(--ac), var(--ac2)); }
.pk-fit { border: 1px solid color-mix(in srgb, var(--ac) 22%, #fff); background: color-mix(in srgb, var(--ac) 3%, #fff); border-radius: 14px; }
.pk-fit > b.small { margin-top: 0; }
/* tables: a soft row highlight in the module's colour */
tbody tr:hover td, table tr:hover > td { background: color-mix(in srgb, var(--ac) 4%, #fff); }
/* notices keep their meaning, just rounder */
.notice { border-radius: 12px; }

/* ================= Build 109 — alignment + colour theme ================= */
/* the colour theme (theme.js) sets these on <body>; without a saved theme the build 108 colours stay */
.top { background: var(--topbar, linear-gradient(100deg, #172554 0%, #312e81 45%, #581c87 78%, #831843 100%)); }
.tg-sale { --gc: var(--gsale, #2563eb); } .tg-make { --gc: var(--gmake, #ea580c); } .tg-acct { --gc: var(--gacct, #15803d); } .tg-setup { --gc: var(--gsetup, #475569); } .tg-grow { --gc: var(--ggrow, #be185d); }
.tgrp { --gt: color-mix(in srgb, var(--gc) 8%, #fff); }
.stat-box { border-top-color: var(--s1, #3b82f6); }
.stats > .stat-box:nth-child(6n+2) { border-top-color: var(--s2, #10b981); } .stats > .stat-box:nth-child(6n+3) { border-top-color: var(--s3, #f59e0b); }
.stats > .stat-box:nth-child(6n+4) { border-top-color: var(--s4, #8b5cf6); } .stats > .stat-box:nth-child(6n+5) { border-top-color: var(--s5, #ec4899); } .stats > .stat-box:nth-child(6n+6) { border-top-color: var(--s6, #06b6d4); }
.btn-dark { background: var(--ad); border-color: var(--ad); color: #fff; }
.btn-dark:hover:not(:disabled) { background: color-mix(in srgb, var(--ad) 85%, #000); }
.btn-blue { background: linear-gradient(135deg, var(--ac), var(--ac2)); border-color: var(--ac); }
.btn-blue:hover:not(:disabled) { background: linear-gradient(135deg, var(--ad), color-mix(in srgb, var(--ac2) 80%, #000)); }
button.small.on, .al3 button.on { background: var(--at); color: var(--ad); border-color: var(--ac); }

/* menu: the chosen tab keeps its width (no jump), each menu line fills the width */
.tabs button.on, .tgrp .tg-b button.on { font-weight: 500; text-shadow: 0 0 .65px currentColor; }
@media (min-width: 761px) {
  .tabs.tabs-g .tgrp { flex: 1 1 auto; }
  .tgrp .tg-b button.on { background: linear-gradient(transparent 55%, var(--gt)); }
}

/* choice buttons (chips): the same gap across and down, one height per line */
.row > .chip-b, .row.wrap > .chip-b { margin: 0; }
.row.wrap:has(> .chip-b) { align-items: stretch; row-gap: 8px; }
.row.wrap:has(> .chip-b) > button.chip-b { display: flex; flex-direction: column; justify-content: center; }
.row.wrap:has(> .chip-b) > label.chip-b { display: inline-flex; align-items: center; gap: 6px; }

/* mode bars: one even grid on every studio (no lone button on a second line) */
.jl-modebar { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(190px, 44%), 1fr)); gap: 6px; }
.jl-modebar button { min-width: 0; justify-content: center; }
.jl-modebar button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* step bars: every step the same height, the text top-aligned in one line */
.sk-stepper { align-items: stretch; }
.sk-stepper .sk-st-arrow { align-self: center; }
.sk-st { align-items: center; }

/* long button text wraps inside its box instead of running out */
.lz-sec > button, .card > button:not(.btn-blue):not(.btn-green):not(.btn-dark), .notice button { white-space: normal; max-width: 100%; }
/* a lone button next to labelled boxes sits on the same line as the boxes */
:is(.grid2, .grid3, .grid4, .grid5, .sg-grid, .lz-form, .form-row) > div.f { margin-bottom: 10px; }
:is(.grid2, .grid3, .grid4, .grid5) > div.f > button { width: 100%; min-height: var(--h); }
/* buttons in one action line: one height */
.row > button.small:not(.link), .row > button:not(.link):not(.chip-b) { min-height: 34px; }
.row > button.small:not(.link) { min-height: 34px; }
.row.wrap > .link { align-self: center; }

/* Settings → Colour theme */
.th-card .th-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.th-pre { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; text-align: left; white-space: normal; border-radius: 12px; }
.th-pre i { width: 100%; height: 18px; border-radius: 8px; margin-bottom: 5px; }
.th-pre small { font-size: 11px; color: var(--mute); line-height: 1.2; }
.th-pre.on { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); background: var(--at); }
.th-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.th-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.th-seg button { min-height: 34px; }
.th-pk { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: end; }
.th-pk input[type=color] { width: 44px; height: 34px; padding: 2px; border-radius: 10px; margin-bottom: 8px; }
.th-sl { display: block; margin-bottom: 8px; font-size: 12px; color: var(--mute); }
.th-sl span { display: flex; justify-content: space-between; } .th-sl b { color: var(--text); font-weight: 600; }
.th-sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 999px; background: var(--track); margin-top: 6px; outline: 0; border: 1px solid #e2e8f0; }
.th-sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #0f172a; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: grab; }
.th-sl input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #0f172a; cursor: grab; }
.th-prev { border: 1px solid #e3e8f1; border-radius: 12px; overflow: hidden; margin: 6px 0 10px; }
.th-top { color: #fff; font-weight: 700; padding: 8px 12px; display: flex; justify-content: space-between; font-size: 13px; } .th-top span { opacity: .8; font-weight: 500; }
.th-mods { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #fff; }
.th-mods span { color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.th-act { align-items: center; } .th-warn { color: #b45309; font-weight: 600; }
/* a colour box + button inside a labelled field: same height and line as the number boxes next to it */
label.f > span.row { margin-top: 4px; } label.f > span.row > input[type=color] { height: var(--h) !important; } label.f > span.row > button.small { min-height: var(--h); }

/* Settings → Safe copies (build 110) */
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; margin: 8px 0; font-size: 13px; }
.bk-row.ok { background: #f0fdf4; border: 1px solid #bbf7d0; } .bk-row.warn { background: #fffbeb; border: 1px solid #fde68a; }
.bk-opt { border: 1px solid #e3e8f1; border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.bk-opt.on { border-color: color-mix(in srgb, var(--ac) 35%, #fff); background: color-mix(in srgb, var(--ac) 4%, #fff); }
.bk-opt p { margin: 6px 0; } .bk-keep { width: auto; min-height: 0; padding: 2px 6px; display: inline-block; }
#bk-nudge { position: fixed; left: 14px; bottom: 14px; z-index: 50; background: #fffbeb; border: 1px solid #f59e0b; color: #92400e; font-weight: 600; border-radius: 999px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }

/* ================= Help panel, Ctrl + K (build 110) ================= */
.top .tb-help, .top .tb-ck { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); border-radius: 999px; padding: 4px 12px; min-height: 32px; position: relative; }
.top .tb-help:hover, .top .tb-ck:hover { background: rgba(255,255,255,.22); }
.top .tb-ck kbd { font: 600 10px/1 inherit; background: rgba(255,255,255,.18); border-radius: 4px; padding: 2px 4px; margin-left: 2px; }
.hp-n { position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff; font: 700 11px/18px system-ui; min-width: 18px; height: 18px; border-radius: 9px; text-align: center; padding: 0 4px; }
#hp { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.hp-box { pointer-events: auto; position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: #fff; box-shadow: -12px 0 40px rgba(15,23,42,.22); display: flex; flex-direction: column; border-radius: 16px 0 0 16px; overflow: hidden; }
.hp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(120deg, var(--ac), var(--ac2)); color: #fff; }
.hp-head b { font-size: 16px; } .hp-head .small { opacity: .85; margin-left: auto; }
.hp-x { background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: 999px; width: 30px; height: 30px; font-size: 18px; padding: 0; min-height: 0; }
.hp-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-bottom: 1px solid #e3e8f1; }
.hp-tabs button { border: 0; background: none; padding: 8px 4px; font-size: 13px; border-radius: 10px; min-height: 0; white-space: nowrap; }
.hp-tabs button.on { background: var(--at); color: var(--ad); font-weight: 600; }
.hp-dot { background: #ef4444; color: #fff; font-style: normal; font-size: 10px; border-radius: 999px; padding: 1px 6px; }
.hp-body { flex: 1; overflow: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.hp-chat { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: auto; min-height: 120px; }
.hp-m { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.hp-m.me { align-self: flex-end; background: linear-gradient(135deg, var(--ac), var(--ac2)); color: #fff; border-bottom-right-radius: 4px; }
.hp-m.bot { align-self: flex-start; background: #f1f5f9; border-bottom-left-radius: 4px; }
.hp-quick { display: flex; flex-wrap: wrap; gap: 6px; } .hp-quick .chip-b { margin: 0; font-size: 12px; padding: 4px 10px; }
.hp-in { display: flex; gap: 6px; } .hp-in input { flex: 1; }
.hp-topic h4 { margin: 0 0 4px; font-size: 15px; } .hp-topic p { margin: 4px 0; } .hp-topic ol { margin: 6px 0; padding-left: 20px; } .hp-topic li { margin: 3px 0; }
.hp-tip { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 6px 10px; font-size: 13px; margin: 6px 0; }
.hp-shot { width: 100%; border: 1px solid #e3e8f1; border-radius: 10px; margin: 6px 0; cursor: zoom-in; }
.hp-acts { gap: 6px; margin-top: 6px; } .hp-fb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; border-top: 1px dashed #cbd5e1; padding-top: 8px; }
.hp-ch { margin-bottom: 10px; } .hp-ch > b { color: var(--ad); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.hp-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.hp-list button { text-align: left; white-space: normal; border-color: #e3e8f1; border-radius: 10px; padding: 8px 10px; min-height: 0; }
.hp-list button:hover { border-color: var(--ac); background: var(--at); }
.hp-flow { border: 1px solid #e3e8f1; border-radius: 12px; padding: 10px; }
.hp-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.hp-steps button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; text-align: left; max-width: 150px; border-radius: 10px; padding: 6px 8px; min-height: 0; font-size: 12px; background: var(--at); border-color: color-mix(in srgb, var(--ac) 25%, #fff); }
.hp-steps button i { font-style: normal; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ac), var(--ac2)); border-radius: 999px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.hp-steps button small { color: var(--mute); font-size: 10px; } .hp-arr { color: #94a3b8; font-weight: 700; }
.hp-tl { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hp-tl button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; border-radius: 10px; padding: 8px 10px; min-height: 0; }
.hp-tl button.new { border-color: #ef4444; background: #fef2f2; }
.hp-st { font-weight: 600; } .st-OPEN { color: #2563eb; } .st-WORKING { color: #7c3aed; } .st-WAITING { color: #d97706; } .st-SOLVED, .st-CLOSED { color: #16a34a; }
.hp-form { display: flex; flex-direction: column; gap: 6px; } .hp-form textarea { width: 100%; }
.hp-urg { align-self: end; margin-bottom: 10px; gap: 6px; color: #b91c1c; } .hp-urg input { width: auto; }
.hp-shotbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .hp-thumbs span { position: relative; display: flex; flex-direction: column; gap: 2px; }
.hp-thumbs img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #e3e8f1; cursor: zoom-in; }
.hp-thumbs button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; background: #ef4444; color: #fff; border: 0; }
.hp-th { padding: 6px 0; border-bottom: 1px solid #e3e8f1; }
.hp-msgs { display: flex; flex-direction: column; gap: 8px; }
.hp-msg { border-radius: 12px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e3e8f1; } .hp-msg.support { background: var(--at); border-color: color-mix(in srgb, var(--ac) 30%, #fff); }
.hp-txt { white-space: pre-wrap; margin-top: 4px; } .hp-pic { max-width: 100%; border-radius: 8px; margin-top: 6px; border: 1px solid #e3e8f1; cursor: zoom-in; }
.hp-log { font-size: 11px; color: var(--mute); text-align: center; }
.hp-contact { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 10px; }
#ck { position: fixed; inset: 0; z-index: 950; background: rgba(15,23,42,.45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 12px 12px; }
.ck-box { width: min(640px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(15,23,42,.35); overflow: hidden; }
.ck-in { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e3e8f1; }
.ck-in input { border: 0 !important; outline: 0 !important; font-size: 17px; flex: 1; padding: 6px 0; }
.ck-in kbd { font-size: 11px; color: var(--mute); border: 1px solid #e3e8f1; border-radius: 6px; padding: 2px 6px; }
.ck-list { max-height: 55vh; overflow: auto; padding: 6px; }
.ck-list button { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; border: 0; border-radius: 10px; padding: 8px 10px; background: none; min-height: 0; white-space: normal; }
.ck-list button.on, .ck-list button:hover { background: var(--at); }
.ck-ic { width: 26px; text-align: center; } .ck-t { display: flex; flex-direction: column; flex: 1; } .ck-t small { color: var(--mute); font-size: 11px; } .ck-lock { margin-left: auto; }
.ck-foot { padding: 6px 14px; color: var(--mute); border-top: 1px solid #e3e8f1; background: #f8fafc; }
.ck-flash { animation: ckf 1.6s ease; } @keyframes ckf { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 45%, transparent); } 100% { box-shadow: none; } }
@media (max-width: 760px) { .top .tb-ck { display: none; } .hp-box { border-radius: 0; } }
.top .tb-help, .top .tb-ck { padding: 3px 10px; min-height: 30px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.top .tb-ck kbd { display: none; } .top .tb-help span { display: none; }
@media (min-width: 1500px) { .top .tb-ck kbd { display: inline; } .top .tb-help span { display: inline; } }
@media (min-width: 1200px) { .top .tb-help span { display: inline; } }

/* Design library → 📐 Ready-made (build 112) */
.lt-intro { background: var(--at); border: 1px solid color-mix(in srgb, var(--ac) 25%, #fff); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.lt-card { display: flex; flex-direction: column; gap: 4px; }
.lt-pic { height: 150px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 10px; }
.lt-pic svg { max-width: 100%; max-height: 140px; }
.lt-modal { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; align-items: start; }
.lt-modal > .row, .lt-modal > p, #lt-parts { grid-column: 1 / -1; }
.lt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .lt-chk { grid-column: 1 / -1; gap: 6px; margin: 4px 0 10px; } .lt-chk input { width: auto; }
.lt-prev { background: #f8fafc; border: 1px solid #e3e8f1; border-radius: 12px; min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.lt-prev svg { width: 100%; max-height: 380px; }
#lt-parts { display: flex; flex-wrap: wrap; gap: 6px; } .lt-part { background: #f1f5f9; border-radius: 999px; padding: 3px 10px; }
@media (max-width: 760px) { .lt-modal { grid-template-columns: 1fr; } }

/* build 115: size / area unit chips (Laser studio, templates, CNC Jali, Sticker, Neon) */
.lz-units { gap: 4px; align-items: center; margin: 6px 0; }
.lz-units > .mute { margin-right: 2px; line-height: 28px; }
.lz-units .chip-b { min-height: 28px; height: 28px; padding: 0 10px !important; font-size: 12.5px; display: inline-flex; align-items: center; }
.lz-units .lz-usep { margin-left: 12px; }
.lt-units { margin: 0 0 8px; }
/* build 115: print setup style boxes line up even when one label wraps */
.doc-styles { align-items: end; }
.doc-styles select, .doc-styles input[type="color"] { height: 42px; box-sizing: border-box; }
.doc-styles input[type="color"] { width: 100%; padding: 3px 4px; }

/* build 116: dashboard chart mode (dash-charts.js) */
.db-view button { white-space: nowrap; }
.dc-kpis { margin-bottom: 12px; }
.dc-kpi b { font-size: 21px; font-variant-numeric: tabular-nums; }
.dc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
/* build 127: a fixed arrangement — jobs · money · drawer in one row, top items + expenses below, day by day full width;
   cards in a row are the same height (no gaps) */
.dc-grid > .dc-card { grid-column: span 6; display: flex; flex-direction: column; }
.dc-grid > .dc-s4 { grid-column: span 4; }
.dc-grid > .dc-s5 { grid-column: span 5; }
.dc-grid > .dc-s7 { grid-column: span 7; }
.dc-grid > .dc-card.dc-wide { grid-column: 1 / -1; }
@media (max-width: 1150px) { .dc-grid > .dc-s4, .dc-grid > .dc-s5, .dc-grid > .dc-s7 { grid-column: span 6; } .dc-grid > .dc-s4:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 720px) { .dc-grid > .dc-card { grid-column: 1 / -1 !important; } }
.dc-card { padding: 14px 16px; min-width: 0; }
.dc-card.dc-wide { grid-column: 1 / -1; }
.dc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.dc-h b { font-size: 15px; color: #0b0b0b; }
.dc-sub { font-size: 12px; color: #52514e; margin: 10px 0 5px; }
.dc-sub:first-child { margin-top: 0; }
.dc-empty { color: #6b6a66; font-size: 13px; padding: 18px 8px; text-align: center; background: #fafaf9; border-radius: 8px; line-height: 1.6; }
.dc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: #52514e; }
.dc-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.dc-legend b { color: #0b0b0b; font-variant-numeric: tabular-nums; }
.dc-legend small { color: #8a8984; }
/* part-to-whole bar: 2px surface gaps, rounded ends */
.dc-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: #f0efec; }
.dc-stack span { min-width: 3px; height: 100%; }
/* donut */
.dc-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dc-dwrap { position: relative; width: 140px; height: 140px; flex: none; }
.dc-dwrap circle[data-tip] { cursor: default; transition: stroke-width .12s; }
.dc-dwrap circle[data-tip]:hover { stroke-width: 22; }
.dc-dmid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dc-dmid b { font-size: 18px; color: #0b0b0b; font-variant-numeric: tabular-nums; }
.dc-dmid small { font-size: 11px; color: #6b6a66; }
.dc-donut .dc-legend { flex-direction: column; gap: 6px; margin: 0; flex: 1; min-width: 150px; }
/* ranked bars */
.dc-rank { display: grid; gap: 5px; }
.dc-rrow { display: grid; grid-template-columns: minmax(70px, 38%) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; border-radius: 4px; }
.dc-rrow:hover { background: #f5f5f3; }
.dc-rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2c2b29; }
.dc-rt { height: 12px; background: #f3f2ef; border-radius: 0 4px 4px 0; overflow: hidden; }
.dc-rt span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dc-rrow b { font-variant-numeric: tabular-nums; color: #0b0b0b; min-width: 64px; text-align: right; }
/* plots with a y axis (columns, line, waterfall) */
.dc-plot { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: 190px auto; }
.dc-plot.dc-short { grid-template-rows: 160px auto; }
.dc-yax { position: relative; font-size: 11px; color: #6b6a66; }
.dc-yax span { position: absolute; right: 6px; transform: translateY(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-area { position: relative; border-bottom: 1px solid #c9c7c0; }
.dc-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #ecebe7; }
.dc-gl.dc-zero { border-top-color: #b5b3ac; }
.dc-cols { position: absolute; inset: 0; display: flex; gap: 2px; padding: 0 2px; }
.dc-col { position: relative; flex: 1; min-width: 0; }
.dc-col:hover { background: rgba(82, 81, 78, .06); }
.dc-grp { display: flex; gap: 2px; padding: 0 3px; }
.dc-gb { position: relative; flex: 0 1 28px; min-width: 3px; height: 100%; }
.dc-grp { justify-content: center; }
.dc-bar { position: absolute; left: 0; right: 0; border-radius: 4px 4px 0 0; min-height: 0; }
.dc-fall .dc-col .dc-bar { left: 18%; right: 18%; border-radius: 4px; }
.dc-fall .dc-col em { position: absolute; left: 0; right: 0; text-align: center; font-style: normal; font-size: 11px; color: #2c2b29; font-weight: 600; white-space: nowrap; }
.dc-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dc-hit .dc-col:hover { background: rgba(82, 81, 78, .08); }
.dc-xax { grid-column: 2; display: flex; gap: 2px; padding: 4px 2px 0; font-size: 11px; color: #6b6a66; }
.dc-xax span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.dc-tip { position: fixed; z-index: 9999; display: none; max-width: 280px; padding: 6px 9px; border-radius: 6px; background: #0b0b0b; color: #fff; font-size: 12px; line-height: 1.4; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
@media (max-width: 600px) { .dc-plot { grid-template-columns: 40px 1fr; grid-template-rows: 160px auto; } .dc-fall .dc-col em { font-size: 10px; } .dc-xax { font-size: 10px; } }
@media print { .dc-tip { display: none !important; } }
.dc-fall .dc-xax span { white-space: normal; line-height: 1.2; }
.dc-xax.dc-xabs { position: relative; display: block; height: 18px; padding: 4px 0 0; }
.dc-xax.dc-xabs span { position: absolute; transform: translateX(-50%); overflow: visible; flex: none; }
.dc-xax.dc-xabs span:first-child { transform: none; }
/* build 118: Settings → Your plan */
#plan-card .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--ac2, #eef2ff); border: 1px solid var(--line); font-size: 12px; margin: 0 4px 4px 0; }
/* build 119: Flex / Eco / UV and Xerox — custom size buttons on the Billing screen */
.tile.orange { background: #fff7ed; border-color: #fed7aa; } .tiles .tile.orange { --edge: #fdba74; }
.tile.teal { background: #f0fdfa; border-color: #99f6e4; } .tiles .tile.teal { --edge: #5eead4; }
/* build 121: design library zoom (jali-lib-zoom.js) */
.jz-wrap { position: relative; }
.jz-wrap img { display: block; cursor: zoom-in; }
.jz-btn { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; padding: 0; border-radius: 8px; background: rgba(255,255,255,.92); border: 1px solid #cbd5e1; font-size: 15px; line-height: 1; opacity: .85; }
.jz-btn:hover { opacity: 1; border-color: var(--ac, #2563eb); }
.jz-lens { position: absolute; pointer-events: none; border: 2px solid var(--ac, #2563eb); background: rgba(37, 99, 235, .08); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .06); }
#jz-panel { position: fixed; z-index: 9000; display: none; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .25); overflow: hidden; pointer-events: none; }
#jz-panel .jz-view { position: relative; overflow: hidden; background: #fff; }
#jz-panel .jz-img { position: absolute; left: 0; top: 0; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform; }
#jz-panel .jz-wait, .jz-modal .jz-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 13px; }
#jz-panel .jz-foot { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-top: 1px solid #e2e8f0; font-size: 12px; background: #f8fafc; }
#jz-panel .jz-z { font-weight: 700; color: var(--ac, #2563eb); }
.jz-modal .jz-box { position: relative; height: min(70vh, 720px); overflow: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; cursor: grab; touch-action: none; }
.jz-modal .jz-box.drag { cursor: grabbing; }
.jz-modal .jz-box img { display: block; max-width: none; user-select: none; margin: 0 auto; }
/* build 122: CNC — adjust the copies of a repeated design */
.jt-box { margin-top: 8px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.jt-grid { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 12px; margin-top: 8px; align-items: start; }
.jt-pad { display: grid; grid-template-columns: repeat(3, 38px); gap: 4px; margin-top: 4px; }
.jt-pad button { height: 34px; padding: 0; font-size: 16px; }
@media (max-width: 600px) { .jt-grid { grid-template-columns: 1fr; } }

/* build 125 — zoom of the CNC preview */
.jl-zbar { gap: 6px; align-items: center; margin: 0 0 6px; flex-wrap: wrap; }
.jl-zbar .jl-zl { min-width: 44px; text-align: center; }
.jl-zbar button { min-width: 30px; }
.jl-cvwrap.jl-zoomed { display: block; overflow: auto; max-height: 66vh; cursor: grab; overscroll-behavior: contain; }
.jl-cvwrap.jl-zoomed canvas { margin: 0; }
.jl-cvwrap.jl-drag { cursor: grabbing; user-select: none; }
@media (max-width: 640px) { .jl-zbar .jl-zh { display: none; } }

/* build 129: Lanyard Printing Studio */
.ln .lz-left { position: relative; }
.ln-wrap { width: 100%; overflow: hidden; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.ln-wrap canvas { display: block; }
.ln .chip-b small { display: block; font-size: 10px; color: var(--mute); font-weight: 400; }
.ln .sg-busy { top: 10px; right: 10px; border-radius: 8px; padding: 6px 10px; gap: 8px; align-items: center; }
.ln .sg-busy p { margin: 0; font-size: 13px; }
.ln input[type=color] { height: 40px; padding: 3px; cursor: pointer; }
.ln .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.ln .seg button { margin: 0; white-space: normal; }
.ln-chk { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.ln-chk li { padding: 4px 8px 4px 24px; border-radius: 6px; margin-top: 3px; position: relative; }
.ln-chk li::before { position: absolute; left: 7px; top: 4px; }
.ln-chk li.ok { background: #f0fdf4; } .ln-chk li.ok::before { content: "✓"; color: #16a34a; }
.ln-chk li.warn { background: #fffbeb; } .ln-chk li.warn::before { content: "!"; color: #d97706; font-weight: 700; }
.ln-chk li.bad { background: #fef2f2; color: #991b1b; } .ln-chk li.bad::before { content: "✕"; color: #dc2626; }
.ln-chk li button { margin-left: 6px; }
.ln .lz-tpl { margin-top: 8px; }
.ln .seg { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ln .seg button { width: 100%; min-width: 0; padding-left: 6px; padding-right: 6px; }
.ln-ready { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ln-rd { display: flex; flex-direction: column; gap: 4px; padding: 6px; margin: 0; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ln-rd.on { border-color: var(--ac, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac, #2563eb) 30%, transparent); }
.ln-rdc { display: block; width: 100%; overflow: hidden; border-radius: 3px; } .ln-rdc canvas { display: block; }
.ln-rd small { font-size: 11.5px; color: var(--ink, #0f172a); }
.ln .seg { grid-auto-flow: row; grid-auto-columns: auto; }
/* build 134: ID Card Studio */
.ic .lz-left { position: relative; }
.ic-cardwrap { display: flex; justify-content: center; margin-top: 8px; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.ic-cardwrap canvas { box-shadow: 0 2px 10px rgba(15,23,42,.18); border-radius: 3px; cursor: pointer; touch-action: none; }
.ic-sheet { margin-top: 8px; background: #e2e8f0; border-radius: 8px; padding: 10px; display: flex; justify-content: center; }
.ic-sheet canvas { box-shadow: 0 2px 10px rgba(15,23,42,.2); background: #fff; }
.ic .ic-busy { top: 10px; right: 10px; border-radius: 8px; padding: 6px 10px; gap: 8px; align-items: center; }
.ic .ic-busy p { margin: 0; font-size: 13px; }
.ic-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; font-weight: 600; }
.ic-btn.btn-blue { color: #fff; }
.ic-rows { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ic-rows td, .ic-rows th { white-space: nowrap; font-size: 12px; } .ic-rows tr.on td { background: #ecfeff; } .ic-rows td[contenteditable]:focus { outline: 2px solid var(--ac); background: #fff; }
.ic-map select { width: 100%; min-width: 120px; } .ic-map tr.mute { opacity: .5; }
.ic-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-top: 6px; }
.ic-as { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.ic-as.on { border-color: var(--ac); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 30%, transparent); }
.ic-as img { height: 44px; object-fit: contain; } .ic-as small { font-size: 11px; }
.ic .seg.ic-sides { display: inline-grid; grid-auto-flow: column; }
.ic input[type=color] { height: 40px; padding: 3px; cursor: pointer; }
.jl-zsizer { position: relative; flex: none; } .jl-zsizer canvas { border-radius: 0 !important; box-shadow: none !important; }

/* build 149: Purchases & GST */
.pu-lines input,.pu-lines select{padding:6px 7px;font-size:14px}
.pu-lines td{padding:3px 4px}
.pu-sum{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.pu-sum .pu-tot{border-top:2px solid #CBD5E1;padding-top:6px;font-size:18px}
.pu-gst td,.pu-gst th{padding:7px 10px}
.pu-gst .pu-cashrow td{background:#FEF3C7;font-size:16px}
.stat-box.pu-pay{background:#FEF3C7;border-color:#F59E0B}.stat-box.pu-pay b{color:#B45309}

/* build 162: Grow → Marketing */
.mk-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.mk-feat > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #FDF2F8; }
.mk-fests { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.mk-fest { border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.mk-fest button { background: rgba(255,255,255,.92); color: #111827; border: 0; margin-top: 2px; }
.mk-season { padding: 10px 12px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; margin-bottom: 8px; }
.mk-segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.mk-seg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 10px; }
.mk-seg .mk-n { font-size: 26px; font-weight: 800; color: #be185d; }
.mk-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.mk-rn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.mk-rn span { display: flex; flex-direction: column; } .mk-rn b { font-size: 18px; } .mk-rn small { color: var(--muted, #64748b); }
.mk-post { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-post label, form[data-form="mk-card"] label, form[data-form="mk-offer"] label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.mk-post label.row { flex-direction: row; align-items: center; }
.mk-prev { position: sticky; top: 10px; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 24px 24px; border-radius: 12px; padding: 12px; text-align: center; }
.mk-prev canvas { max-width: 100%; max-height: 78vh; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mk-chips button.on { background: var(--dark); color: #fff; border-color: var(--dark); }
@media (max-width: 860px) { .mk-post { grid-template-columns: minmax(0, 1fr); } .mk-prev { position: static; } }
/* build 168: ID card designer */
.dz-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 6px; }
.dz-way { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; }
.dz-way span { font-size: 26px; } .dz-way small { color: #64748b; font-weight: 400; line-height: 1.35; } .dz-way.on, .dz-way:hover { border-color: var(--ac); }
.dz-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.dz-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: #f8fafc; cursor: pointer; font: inherit; min-width: 0; white-space: normal; text-align: center; }
.dz-type img { height: 112px; max-width: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 8px rgba(15,23,42,.18); background: #fff; }
.dz-type img:not([src]) { width: 70px; background: #e2e8f0; box-shadow: none; } .dz-type b { font-size: 12.5px; }
.dz-type.on { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 22%, transparent); }
.dz-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 6px; }
.dz-th { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; }
.dz-th img { height: 62px; max-width: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 1px 5px rgba(15,23,42,.18); } .dz-th img:not([src]) { width: 40px; background: #e2e8f0; box-shadow: none; }
.dz-th small { font-size: 11px; } .dz-th.on { border-color: var(--ac); } .dz-up { height: 62px; display: flex; align-items: center; font-size: 26px; }
.dz-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.dz-sw.on { box-shadow: 0 0 0 2px var(--ac); } .dz-col input[type=color] { width: 46px; height: 32px; }
.seg.dz-shapes { display: inline-flex; flex-wrap: wrap; } .seg.dz-shapes button { padding: 5px 9px; font-size: 12.5px; }
.dz-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .dz-cols.one { grid-template-columns: 1fr; }
.dz-h { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: 4px; }
.dz-it { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: start; padding: 6px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 4px; background: #fff; }
.dz-it.off { opacity: .5; } .dz-ic { font-size: 16px; line-height: 30px; text-align: center; }
.dz-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .dz-f input, .dz-f textarea { padding: 5px 7px; font-size: 13px; } .dz-f textarea { resize: vertical; }
.dz-b { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; max-width: 92px; } .dz-b button { padding: 3px 6px; min-width: 0; }
#dz-txt { width: 100%; font-size: 13px; }
.ic-move button { padding: 4px 8px; }
.ic-proof { border-left: 3px solid var(--ac); }
@media (max-width: 760px) { .dz-cols { grid-template-columns: 1fr; } .dz-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dz-type img { height: 84px; } }
.dz-way, .dz-way * { white-space: normal; min-width: 0; max-width: 100%; } .dz-ways > * { min-width: 0; }

/* build 169: site recce */
.rc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.rc-ph { background: #f1f5f9; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 70px; }
.rc-ph img { width: 100%; display: block; } .rc-ph.big { min-height: 180px; } .rc-ph.empty { color: #64748b; font-size: 13px; padding: 10px; text-align: center; }
.rc-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; } .rc-thumbs .rc-ph img { height: 64px; object-fit: cover; }
.rc-size { font-size: 26px; font-weight: 800; color: #9a3412; }
.rc-mat { background: #fff7ed; border: 1px dashed #fdba74; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
@media (max-width: 760px) { .rc-grid { grid-template-columns: 1fr; } }

/* build 171: Recce Pro */
.rp-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
.rp-pcard { border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; background: #fff; } .rp-pcard:hover { border-color: var(--ac); box-shadow: 0 2px 10px rgba(15,23,42,.08); }
.rp-bar { height: 8px; border-radius: 5px; background: #e2e8f0; overflow: hidden; margin: 2px 0 4px; } .rp-bar i { display: block; height: 100%; }
.seg.rp-tabs { display: inline-flex; flex-wrap: wrap; }
.rp-funnel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.rp-fs { text-align: center; cursor: pointer; } .rp-fs small { display: block; color: #64748b; font-size: 12px; } .rp-fs b { font-size: 20px; }
.rp-fb { height: 90px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; } .rp-fb i { display: block; width: 100%; background: linear-gradient(180deg, #fb923c, #ea580c); border-radius: 6px 6px 0 0; }
.rp-steps li { margin: 3px 0; }
.rp-bulk { background: #f8fafc; } .rp-sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; }
.rp-tbl { max-height: 62vh; overflow: auto; } .rp-tbl tr.on td { background: #fff7ed; }
.rp-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; } .rp-fig { margin: 0; } .rp-fig .rc-ph { min-height: 100px; } .rp-fig img { max-height: 160px; object-fit: cover; }
.rp-rep { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 760px) { .rp-funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* build 175: a module the shop does not have — gray in the menu */
.tgrp .tg-b button.tab-off{color:#a8b3c2}
.tgrp .tg-b button.tab-off:hover{color:#64748b}
.tgrp .tg-b button.tab-off.on{color:#64748b;border-bottom-color:#cbd5e1}

/* build 178: Recce Pro — filter / "give to" boxes side by side, not full width */
.rp-o .row.wrap > select{width:auto;min-width:140px;max-width:100%}
#rp-who{width:auto;min-width:220px;max-width:100%}
/* ---------- build 182: Recce Pro live dashboard ---------- */
.rpd{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.rpd-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rpd-k{background:#fff;border:1px solid #e3e8f1;border-radius:14px;padding:12px 14px 14px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 10px 24px -18px rgba(20,27,77,.45)}
.rpd-k b{font-size:28px;line-height:1.1;color:#141B4D;font-variant-numeric:tabular-nums}.rpd-k span{font-weight:600;color:#334155}.rpd-k small{color:#64748b}
.rpd-k i{position:absolute;left:0;bottom:0;height:4px;width:calc(var(--f) * 100%);background:linear-gradient(90deg,#FFC72C,#12855E)}
.rpd-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
.rpd-map{background:radial-gradient(120% 90% at 20% 10%,#1d3157 0%,#101b33 55%,#0b1326 100%);border-radius:16px;padding:12px 12px 8px;color:#e8eefb;position:relative;box-shadow:0 22px 44px -26px rgba(16,27,51,.7)}
.rpd-mh{font-size:13px;color:#c9d3e8;display:flex;gap:8px;align-items:center}.rpd-mh .mute{color:#8ea2cf}
.rpd-live{font-weight:700;letter-spacing:1.2px;font-size:11.5px;color:#fff;display:inline-flex;align-items:center;gap:6px}.rpd-live i{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:rhLive2 1.4s infinite}
@keyframes rhLive2{70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}}
.rpd-svg{width:100%;height:auto;display:block;max-height:620px}
.rpd-st{stroke:#4f74b3;stroke-linejoin:round}.rpd-st.on{stroke:#AFC2EA}
.rpd-line{fill:none;stroke:rgba(255,199,44,.45);stroke-width:inherit}.rpd-line.live{stroke:#FFC72C;stroke-dasharray:4 5;animation:rpdFlow .6s linear infinite}
@keyframes rpdFlow{to{stroke-dashoffset:-18}}
.rpd-dot{fill:#24396a;stroke:#AFC2EA;stroke-width:1.3}.rpd-dot.all{fill:#1E6B55;stroke:#3DDC97}
.rpd-city{cursor:pointer}.rpd-city:hover .rpd-dot,.rpd-city:focus .rpd-dot{stroke:#fff;stroke-width:2.2}
.rpd-pulse{fill:none;stroke:#FFC72C;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:rpdPulse 1.8s ease-out infinite}
@keyframes rpdPulse{0%{transform:scale(.8);opacity:.95}100%{transform:scale(2.2);opacity:0}}
.rpd-n{fill:#fff;font:700 10px Inter,system-ui,sans-serif;text-anchor:middle;pointer-events:none}
.rpd-lab{fill:#fff;font:600 12px Inter,system-ui,sans-serif;paint-order:stroke;stroke:#0b1326;stroke-width:3px;pointer-events:none}
.rpd-hub circle{fill:#C8102E;stroke:#fff;stroke-width:2}.rpd-hub text{fill:#FFC72C;font:700 12.5px Inter,system-ui,sans-serif;paint-order:stroke;stroke:#0b1326;stroke-width:3px}
.rpd-key{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#c9d3e8;padding:2px 4px}.rpd-key i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.rpd-key i.y{background:#FFC72C}.rpd-key i.g{background:#3DDC97}.rpd-key i.p{border:2px solid #FFC72C;background:transparent}.rpd-key .mute{color:#8ea2cf}
.rpd-cr{position:absolute;right:12px;bottom:8px;font-size:9.5px;color:#6f84b5}
.rpd-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rpd-card{background:#fff;border:1px solid #e3e8f1;border-radius:14px;padding:12px 14px;box-shadow:0 10px 24px -18px rgba(20,27,77,.45);min-width:0}
.rpd-h{font-weight:700;color:#141B4D;margin-bottom:8px;display:flex;align-items:center;gap:8px}.rpd-h em{font-style:normal;background:#C8102E;color:#fff;border-radius:999px;padding:0 8px;font-size:12px}
.rpd-al{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;margin-top:6px;border-left:4px solid #8EA2CF;background:#F4F6FB;font-size:14px}
.rpd-al small{display:block;color:#64748b;font-size:12px}.rpd-al button{padding:4px 10px;font-size:13px;white-space:nowrap}
.rpd-al.red{border-left-color:#C8102E;background:#FDF0F2}.rpd-al.amber{border-left-color:#E0A800;background:#FFF8E1}.rpd-al.blue{border-left-color:#5B74B8}
.rpd-calm{color:#12855E;font-weight:600;padding:6px 2px}
.rpd-pr{display:grid;grid-template-columns:100px 1fr;gap:2px 10px;padding:6px 0;border-bottom:1px dashed #e3e8f1}.rpd-pr span{color:#64748b}.rpd-pr small{grid-column:2;color:#475569}.rpd-pr .ok{color:#12855E}
.rpd-due{margin:8px 0 6px;font-size:14px}.rpd-due .bad{color:#C8102E;font-weight:700}.rpd-due .good{color:#12855E;font-weight:700}
.rpd-spark{display:flex;gap:3px;align-items:flex-end;height:56px;margin-top:6px}.rpd-spark span{flex:1;display:flex;gap:1px;align-items:flex-end;height:100%}
.rpd-spark i{flex:1;background:#FFC72C;border-radius:2px 2px 0 0;min-height:1px}.rpd-spark i.g{background:#12855E}
.rpd-axis{display:flex;justify-content:space-between;font-size:11px;color:#94a3b8}
.rpd-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:#eef1f7}.rpd-bar span{cursor:pointer;min-width:3px}
.rpd-leg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.rpd-leg button{padding:3px 9px;font-size:12.5px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}.rpd-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.rpd-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.rpd-t{width:100%;border-collapse:collapse;font-size:14px}.rpd-t th{text-align:left;font-weight:600;color:#64748b;font-size:12.5px;padding:4px 6px;border-bottom:1px solid #e3e8f1}.rpd-t td{padding:6px;border-bottom:1px solid #f1f4f9}
.rpd-mini{display:inline-block;width:60px;height:6px;border-radius:3px;margin-left:8px;background:linear-gradient(90deg,#141B4D calc(var(--f)*100%),#e3e8f1 0);vertical-align:middle}
.rpd-feed{display:flex;flex-direction:column;gap:6px;max-height:330px;overflow:auto}.rpd-feed>div{display:grid;grid-template-columns:44px 1fr;gap:8px;font-size:13.5px;padding-bottom:6px;border-bottom:1px solid #f1f4f9}.rpd-feed .rpd-tm{color:#94a3b8;font-variant-numeric:tabular-nums;font-size:12.5px;padding-top:2px}
@media (max-width:1100px){.rpd-main,.rpd-two{grid-template-columns:1fr}.rpd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.rpd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.rpd-k b{font-size:22px}}
.rpd-lab.hub{fill:#FFC72C}
/* ===== build 184: MDFAST Recce Pro as its own web app (indigo #141B4D · red #C8102E · yellow #FFC72C) ===== */
body.recce-app { background: #F4F5FA; }
.top.rtop { background: #141B4D; border-bottom: 3px solid #C8102E; min-height: 56px; }
.rtop .shop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rt-logo { height: 26px; display: block; }
.rt-prod { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .3px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
.rt-ag { color: #FFC72C; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.rnav.tabs { background: #fff; border-bottom: 1px solid #E3E5EE; box-shadow: none; }
.rnav .tgrp .tg-l { color: #141B4D; }
.rnav .tg-b button { font-weight: 600; }
.rnav .tg-b button.on { background: #141B4D; color: #fff; border-color: #141B4D; box-shadow: inset 0 -3px 0 #FFC72C; }
/* first login */
.rco { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(160deg, #141B4D 0 38%, #F4F5FA 38%); }
.rco-card { width: min(980px, 100%); display: grid; grid-template-columns: 1.35fr 1fr; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(20,27,77,.25); }
.rco-l { padding: 30px 32px; }
.rco-l h1 { margin: 14px 0 4px; font-size: 26px; color: #141B4D; }
.rco-step { margin-top: 18px; font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: #C8102E; }
.rco-f { margin-top: 16px; }
.rco-go { width: 100%; padding: 13px; font-size: 16px; margin-top: 6px; background: #C8102E; border-color: #C8102E; }
.rco-r { background: #141B4D; color: #E6E8F2; padding: 30px 28px; font-size: 14px; line-height: 1.55; border-left: 5px solid #FFC72C; }
.rco-r b { color: #fff; }
.rco-r ol { padding-left: 18px; margin: 12px 0 0; }
.rco-r li { margin-bottom: 14px; }
.rco-note { margin-top: 20px; font-size: 12px; color: #A9AECB; }
/* home */
.rpa-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rpa-head h1 { margin: 0; font-size: 24px; color: #141B4D; }
.rpa-new { background: #C8102E; border-color: #C8102E; padding: 11px 18px; font-size: 15px; font-weight: 700; }
.rpa-pcs { display: grid; gap: 10px; max-height: 520px; overflow: auto; }
.rpa-pc { border: 1px solid #E3E5EE; border-left: 4px solid #141B4D; border-radius: 8px; padding: 10px 12px; background: #fff; }
.rpa-cl { font-weight: 600; color: #141B4D; margin-top: 4px; }
.rpa-pr { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; font-size: 12px; margin-top: 8px; }
.rpa-bar { height: 6px; background: #ECEEF5; border-radius: 3px; overflow: hidden; }
.rpa-bar i { display: block; height: 100%; }
.rpa-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.rpa-tag.red { background: #FCE8EB; color: #C8102E; } .rpa-tag.ok { background: #E6F4EE; color: #12855E; }
.rpa-tag.amber { background: #FFF5D6; color: #8A6100; } .rpa-tag.blue { background: #E8EAF6; color: #141B4D; }
.rpa-empty { background: #fff; border: 1px solid #E3E5EE; border-radius: 12px; padding: 28px; text-align: center; }
.rpa-empty h2 { color: #141B4D; margin: 0 0 4px; }
.rpa-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; text-align: left; }
.rpa-steps > div { border: 1px solid #E3E5EE; border-radius: 10px; padding: 14px; display: grid; gap: 4px; }
.rpa-steps i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #141B4D; color: #FFC72C; font-weight: 700; }
@media (max-width: 760px) {
  .rco-card { grid-template-columns: 1fr; } .rco-l { padding: 22px 18px; } .rco-r { border-left: 0; border-top: 5px solid #FFC72C; }
  .rpa-steps { grid-template-columns: 1fr; } .rt-ag { max-width: 40vw; } .rt-prod { font-size: 15px; } .rt-logo { height: 22px; }
}
.rnav .tgrp { border-top-color: #141B4D !important; background: #fff !important; }
.rnav .tgrp.tg-setup { border-top-color: #FFC72C !important; }
.rnav .tgrp.cur { border-top-color: #C8102E !important; }
.rpa-empty + *, .rpd-feed:empty { display: none; }
.rpd-feed > div.mute { display: block; }
@media (max-width: 760px) { .recce-app .rpd-cr { position: static; text-align: right; padding: 0 10px 6px; } }
.rpa-strip { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; border: 1px solid; }
.rpa-strip span { flex: 1 1 320px; } .rpa-strip.red { background: #FCE8EB; border-color: #F2B8C1; } .rpa-strip.amber { background: #FFF7DC; border-color: #F5D77A; }
.rca-where { margin: 8px 0 10px; padding-left: 18px; line-height: 1.5; } .rca-where li { margin-bottom: 6px; }
/* build 186: Recce Pro steps coloured by the project's real progress */
.rp-steps .sk-st { border: 1px solid #E3E5EE; background: #fff; margin: 2px 0; }
.rp-steps .sk-st.rp-done .num { background: #12855E; color: #fff; }
.rp-steps .sk-st.rp-done small { color: #12855E; font-weight: 600; }
.rp-steps .sk-st.rp-doing { background: #FFF8E1; border-color: #F5C842; }
.rp-steps .sk-st.rp-doing .num { background: #FFC72C; color: #141B4D; }
.rp-steps .sk-st.rp-doing small { color: #8A6100; font-weight: 600; }
.rp-steps .sk-st.rp-todo .num { background: #E8EAF0; color: #8A90A6; } .rp-steps .sk-st.rp-todo b { color: #6B7190; }
.rp-steps .sk-st.now { box-shadow: 0 0 0 2px #C8102E inset; }
.rp-steps .sk-st.on { background: #141B4D; border-color: #141B4D; box-shadow: 0 6px 16px -8px rgba(20,27,77,.6); }
.rp-steps .sk-st.on b, .rp-steps .sk-st.on small { color: #fff !important; }
.rp-steps .sk-st.on.now { box-shadow: 0 0 0 2px #C8102E inset, 0 6px 16px -8px rgba(20,27,77,.6); }
.rp-now { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .6px; background: #C8102E; color: #fff; padding: 1px 6px; border-radius: 8px; vertical-align: 2px; margin-left: 4px; }
/* ===== build 187: Font Manager + Text editor ===== */
.fm-back { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 9000; display: grid; place-items: center; padding: 16px; }
.fm-win { background: #fff; border-radius: 14px; width: min(1100px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; }
.fm-top { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.fm-top .fm-q { flex: 1 1 260px; }
.fm-q { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; }
.fm-tabs { gap: 6px; padding: 10px 16px 0; align-items: center; }
.fm-body { padding: 10px 16px 16px; overflow: auto; }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fm-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; background: #fff; }
.fm-s { font-size: 24px; line-height: 1.35; min-height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fm-s2 { font-size: 20px; line-height: 1.4; }
.fm-n { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-top: 4px; color: #475569; }
.fm-tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: #f1f5f9; color: #64748b; }
.fm-tag.ok { background: #e7f6ee; color: #12855e; }
.fm-pcl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; max-height: 340px; overflow: auto; margin-top: 8px; }
.fm-pc { display: flex; gap: 6px; align-items: center; font-size: 15px; padding: 3px 0; } .fm-pc input { width: auto; } .fm-pc.sh { font-weight: 600; }
.fm-sl { border: 2px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .fm-sl.on { border-color: #16a34a; background: #f0fdf4; } .fm-sl input { width: auto; }
.fm-tbl { width: 100%; border-collapse: collapse; } .fm-tbl td, .fm-tbl th { border-bottom: 1px solid #eef2f7; padding: 8px 6px; text-align: left; vertical-align: top; }
.ok-t { color: #12855e; } .fm-swap { color: #12855e; margin: -4px 0 8px; }
.tx-win { width: min(980px, 100%); padding-bottom: 14px; } .tx-win > .row { padding: 0 16px; }
.tx-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 12px 16px 0; }
.tx-grid textarea { width: 100%; }
.tx-prev { background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid #e5e7eb; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; min-height: 220px; gap: 8px; }
.tx-prev canvas { max-width: 100%; }
@media (max-width: 760px) { .tx-grid { grid-template-columns: 1fr; } }
/* ===== build 190: Recce Pro design proofs ===== */
.rpd-th { width: 110px; height: 66px; border-radius: 6px; background: #f1f5f9; display: grid; place-items: center; overflow: hidden; border: 1px solid #e2e8f0; }
.rpd-th img { max-width: 100%; max-height: 100%; display: block; } .rpd-th.none { color: #94a3b8; font-size: 12px; }
.rpd-tbl td { vertical-align: middle; }
.rpd-chk { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; margin-left: 4px; }
.rpd-chk.ok { background: #e7f6ee; color: #12855e; } .rpd-chk.warn { background: #fff5d6; color: #8a6100; } .rpd-chk.bad { background: #fce8eb; color: #c8102e; }
.rpd-det { margin-top: 10px; border-top: 1px solid var(--line, #e5e7eb); padding-top: 8px; } .rpd-det summary { cursor: pointer; }
.rpd-figs { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
.rpd-mk { background: #0f172a; border-radius: 8px; min-height: 120px; display: grid; place-items: center; overflow: hidden; } .rpd-mk canvas { width: 100%; display: block; } .rpd-mk .mute { color: #cbd5e1 !important; padding: 10px; text-align: center; }
.rpd-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
/* ===== build 191: Recce Pro CRM ===== */
/* build 193: Enquiries board — bigger type, stage colours, KPI strip, cleaner cards */
.rc-page { --st: #64748b; font-size: 15px; }
.rc-page .lz-price td, .rc-page .lz-price th { font-size: 14.5px; padding: 9px 10px; }
.rc-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.rc-tabs { display: inline-flex; background: #fff; border: 1px solid #e3e5ee; border-radius: 12px; padding: 4px; gap: 2px; box-shadow: 0 1px 2px rgba(20,27,77,.05); }
.rc-tabs button { border: 0; background: transparent; padding: 9px 16px; border-radius: 9px; font-size: 15px; font-weight: 600; color: #475569; }
.rc-tabs button.on { background: #141B4D; color: #fff; box-shadow: 0 4px 10px -4px rgba(20,27,77,.6); }
.rc-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d5d9e4; border-radius: 12px; padding: 0 12px; }
.rc-search:focus-within { border-color: #141B4D; box-shadow: 0 0 0 3px rgba(20,27,77,.1); }
.rc-search span { opacity: .55; } .rc-q { flex: 1; border: 0 !important; outline: 0; padding: 11px 0 !important; font-size: 15px; background: transparent; box-shadow: none !important; min-width: 0; }
.rc-mine { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #334155; cursor: pointer; user-select: none; }
.rc-mine input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-mine span { width: 38px; height: 22px; border-radius: 11px; background: #cbd5e1; position: relative; transition: background .15s; }
.rc-mine span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.rc-mine input:checked + span { background: #141B4D; } .rc-mine input:checked + span::after { left: 19px; }
.rc-new { background: #C8102E; border-color: #C8102E; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 14px -8px rgba(200,16,46,.8); }
.rc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.rc-kpi { background: #fff; border: 1px solid #e3e5ee; border-radius: 12px; padding: 12px 16px; display: grid; gap: 2px; border-top: 3px solid #141B4D; }
.rc-kpi span { font-size: 13px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.rc-kpi b { font-size: 28px; line-height: 1.15; color: #141B4D; } .rc-kpi small { font-size: 13.5px; color: #64748b; }
.rc-kpi.good { border-top-color: #12855e; } .rc-kpi.good b { color: #12855e; } .rc-kpi.warn { border-top-color: #e0a100; } .rc-kpi.bad { border-top-color: #C8102E; } .rc-kpi.bad small { color: #C8102E; font-weight: 700; }
.st-NEW { --st: #64748b; } .st-CONTACTED { --st: #2563eb; } .st-SITE_VISIT { --st: #d97706; } .st-QUOTED { --st: #7c3aed; } .st-WON { --st: #12855e; } .st-LOST { --st: #C8102E; }
.rc-board { display: grid; grid-template-columns: repeat(5, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.rc-col { min-width: 0; background: #f1f3f8; border-radius: 14px; padding: 10px; min-height: 220px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--st); }
.rc-colh { display: flex; gap: 8px; align-items: center; padding: 4px 4px 2px; }
.rc-colh b { font-size: 16px; color: var(--st); } .rc-cnt { background: var(--st); color: #fff; font-size: 12.5px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0 6px; }
.rc-ctot { font-size: 13.5px; font-weight: 700; color: #475569; }
.rc-empty { border: 2px dashed #d5d9e4; border-radius: 10px; padding: 18px 10px; text-align: center; color: #94a3b8; font-size: 14px; }
.rc-card { min-width: 0; background: #fff; border: 1px solid #e3e5ee; border-left: 4px solid var(--st); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 6px; transition: transform .12s, box-shadow .12s; box-shadow: 0 1px 2px rgba(20,27,77,.06); }
.rc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(20,27,77,.45); }
.rc-ch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-no { font-size: 13px; font-weight: 700; color: #64748b; letter-spacing: .03em; }
.rc-val { margin-left: auto; font-size: 16px; font-weight: 800; color: #141B4D; }
.rc-cn { font-size: 17px; font-weight: 700; color: #141B4D; line-height: 1.25; word-break: break-word; }
.rc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: #475569; }
.rc-due { font-size: 12.5px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: #eef2ff; color: #141B4D; white-space: nowrap; } .rc-due.today { background: #fff3cd; color: #8a6100; } .rc-due.late { background: #fce8eb; color: #c8102e; }
.rc-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; } .rc-tags i { font-style: normal; font-size: 13px; font-weight: 600; background: #eef0f6; color: #334155; padding: 3px 9px; border-radius: 999px; }
.rc-cf { display: flex; align-items: center; gap: 6px; border-top: 1px solid #eef0f6; padding-top: 8px; margin-top: 2px; }
.rc-av { width: 26px; height: 26px; border-radius: 50%; background: #141B4D; color: #FFC72C; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; flex: none; }
.rc-own { font-size: 14px; font-weight: 600; color: #334155; text-transform: capitalize; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-qa { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; background: #f1f5f9; text-decoration: none; font-size: 15px; flex: none; } .rc-qa:hover { background: #e2e8f0; } .rc-qa.wa { background: #e7f8ee; }
.rc-lostd { margin-top: 12px; } .rc-lostd summary { font-size: 14.5px; font-weight: 600; cursor: pointer; color: #C8102E; }
.rc-lost { display: grid; gap: 6px; margin-top: 8px; font-size: 14.5px; } .rc-lost > div { background: #fff; border: 1px solid #f3d1d7; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
@media (max-width: 760px) { .rc-kpis { grid-template-columns: repeat(2, 1fr); } .rc-kpi b { font-size: 22px; } .rc-board { grid-template-columns: repeat(5, 260px); } }
.rc-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; margin: 4px 0 8px; font-size: 13px; } .rc-types input { width: auto; }
.rc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.rc-mini { padding: 10px 12px; margin-bottom: 8px; }
.rc-fu { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #eef0f6; font-size: 13px; } .rc-fu.late span:first-child { color: #c8102e; font-weight: 700; } .rc-fu.done { opacity: .6; }
.rc-tl { max-height: 220px; overflow: auto; font-size: 12.5px; display: grid; gap: 3px; }
.rc-conv { margin-top: 10px; padding: 10px; border: 2px dashed #12855e; border-radius: 10px; background: #f3fbf7; }
.rc-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; background: #fff; border: 1px solid #e3e5ee; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; font-size: 14px; }
.rc-strip select { width: auto; padding: 3px 6px; }
.rpa-crm { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr 1.4fr; gap: 10px; margin-bottom: 12px; }
.rpa-ct { background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; cursor: pointer; } .rpa-ct b { font-size: 24px; color: #141B4D; } .rpa-ct span { font-weight: 600; color: #334155; font-size: 13px; } .rpa-ct small { color: #64748b; } .rpa-ct.warn { border-color: #f5c842; background: #fffbea; }
.rpa-cl2 { background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; padding: 8px 12px; display: grid; gap: 3px; align-content: start; max-height: 150px; overflow: auto; }
.rpa-new2 { border: 2px solid #141B4D; color: #141B4D; background: #fff; font-weight: 700; padding: 9px 14px; border-radius: 8px; }
.rpa-pc.hi { border-left-color: #C8102E; }
@media (max-width: 900px) { .rpa-crm { grid-template-columns: repeat(2, 1fr); } .rpa-cl2 { grid-column: span 2; } .rc-two { grid-template-columns: 1fr; } }

/* build 192: the build number on the login page and the Recce Pro top bar */
.login-build { text-align: center; color: #94a3b8; font-size: 11px; margin: 6px 0 0; }
.rt-build { color: #A9AECB; font-size: 11px; font-weight: 500; white-space: nowrap; }
/* build 192: chain branding VDP + batch */
.rpd-ve { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.rpd-vc { background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid #e3e5ee; border-radius: 10px; padding: 8px; margin-top: 6px; }
.rpd-vc canvas { width: 100%; display: block; cursor: crosshair; touch-action: none; }
.rpd-prog { min-width: min(520px, 90vw); } .rpd-bar { height: 10px; background: #eef0f6; border-radius: 6px; overflow: hidden; margin: 6px 0 8px; } .rpd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #141B4D, #C8102E); transition: width .2s; }
#rpd-pe { max-height: 160px; overflow: auto; margin-top: 6px; }
.rpd-pf .chip-b { margin: 0; } .rpd-pf .small { margin-top: 8px; }
@media (max-width: 800px) { .rpd-ve { grid-template-columns: 1fr; } }

/* ---------- build 194: ID Card Studio — landing page + guided prompt window ---------- */
.icw-strip { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 8px; }
.icl { --ind: #141B4D; --red: #C8102E; --yel: #FFC72C; display: grid; gap: 18px; }
.icl-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: center; background: radial-gradient(120% 140% at 100% 0%, #2a3576 0%, #141B4D 55%, #0d1238 100%); color: #fff; border-radius: 22px; padding: 34px 36px; overflow: hidden; position: relative; }
.icl-hero::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,199,44,.22), transparent 70%); }
.icl-k { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--yel); }
.icl-txt h1 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; margin: 8px 0 12px; color: #fff; }
.icl-txt h1 em { font-style: normal; color: var(--yel); }
.icl-txt p { font-size: 16px; line-height: 1.55; color: #dbe0f5; max-width: 560px; margin: 0; }
.icl-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; position: relative; z-index: 1; }
.icl-btns button { font-size: 16px; font-weight: 700; padding: 13px 20px; border-radius: 12px; border: 0; cursor: pointer; }
.icl-go { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgba(200,16,46,.9); }
.icl-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.icl-cont { background: #fff; color: var(--ind); }
.icl-exp { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45) !important; }
.icl-show { position: relative; height: 270px; perspective: 900px; display: grid; place-items: center; }
.icl-card3d { width: 140px; height: 224px; position: relative; transform-style: preserve-3d; animation: iclSpin 6s ease-in-out infinite; }
.icl-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 9px; box-shadow: 0 24px 40px -18px rgba(0,0,0,.65); background: #fff; overflow: hidden; }
.icl-face svg { width: 100%; height: 100%; display: block; } .icl-face.b { transform: rotateY(180deg); }
@keyframes iclSpin { 0%, 30% { transform: rotateY(-14deg) rotateX(6deg); } 50%, 80% { transform: rotateY(166deg) rotateX(6deg); } 100% { transform: rotateY(346deg) rotateX(6deg); } }
.icl-ff { position: absolute; left: 0; bottom: 18px; font-size: 26px; animation: iclFf 2.6s linear infinite; opacity: .85; }
@keyframes iclFf { 0% { transform: translateX(-20px); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateX(420px); opacity: 0; } }
.icl-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.icl-sz { background: #fff; border: 1px solid #e3e5ee; border-radius: 16px; padding: 14px 10px 12px; display: grid; justify-items: center; gap: 4px; cursor: pointer; transition: transform .15s, box-shadow .15s; align-content: end; }
.icl-sz:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(20,27,77,.55); border-color: #141B4D; }
.icl-sz b { font-size: 15.5px; color: #141B4D; } .icl-sz small { font-size: 13px; color: #64748b; }
.icl-szp { display: grid; place-items: end center; min-height: 150px; }
.icl-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.icl-f { background: #fff; border: 1px solid #e3e5ee; border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.icl-f span { grid-row: span 2; font-size: 24px; width: 44px; height: 44px; border-radius: 12px; background: #f1f3fb; display: grid; place-items: center; }
.icl-f b { font-size: 15px; color: #141B4D; } .icl-f small { font-size: 13.5px; color: #64748b; }
@media (max-width: 900px) { .icl-hero { grid-template-columns: 1fr; padding: 24px 20px; } .icl-show { height: 240px; } .icl-sizes { grid-template-columns: repeat(2, 1fr); } .icl-feats { grid-template-columns: 1fr; } }

#icw { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 18px; }
.icw-bg { position: absolute; inset: 0; background: rgba(13,18,56,.55); backdrop-filter: blur(5px); }
.icw-win { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 36px); background: #f6f7fb; border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; font-size: 15px; }
.icw-win.pop { animation: icwPop .38s cubic-bezier(.2,1.2,.4,1); }
@keyframes icwPop { from { transform: translateY(24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.icw-head, .icw-steps, .icw-foot { flex: none; }
.icw-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #141B4D; color: #fff; }
.icw-logo { width: 32px; height: 32px; border-radius: 9px; background: #FFC72C; color: #141B4D; font-weight: 900; display: grid; place-items: center; font-size: 14px; }
.icw-head b { font-size: 17px; } .icw-sz { font-size: 13.5px; color: #c7cdea; background: rgba(255,255,255,.1); padding: 4px 10px; border-radius: 999px; }
.icw-x { background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.icw-steps { display: flex; gap: 4px; padding: 10px 14px 12px; background: #fff; border-bottom: 1px solid #e3e5ee; overflow-x: auto; }
.icw-dot { flex: 1 0 auto; border: 0; background: transparent; display: grid; justify-items: center; gap: 3px; cursor: pointer; padding: 2px 6px; min-width: 76px; }
.icw-dot span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #eef0f6; font-size: 15px; transition: all .2s; }
.icw-dot small { font-size: 12px; color: #64748b; font-weight: 600; white-space: nowrap; }
.icw-dot.on span { background: #C8102E; color: #fff; box-shadow: 0 0 0 4px rgba(200,16,46,.18); transform: scale(1.08); } .icw-dot.on small { color: #C8102E; }
.icw-dot.done span { background: #141B4D; color: #FFC72C; font-weight: 800; } .icw-dot.done small { color: #141B4D; }
.icw-dot.skip { opacity: .4; }
.icw-main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 0; flex: 1; min-height: 0; overflow: hidden; }
.icw-left { padding: 16px 20px; overflow-y: auto; min-height: 0; }
.icw-left.ff-in { animation: icwIn .34s ease-out; } .icw-left.ff-out { animation: icwOut .26s ease-in forwards; }
@keyframes icwIn { from { transform: translateX(-70px); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes icwOut { to { transform: translateX(90px) skewX(-8deg); opacity: 0; filter: blur(6px); } }
.icw-bot { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.icw-av { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #141B4D, #2b3a8f); display: grid; place-items: center; font-size: 22px; flex: none; box-shadow: 0 6px 14px -8px rgba(20,27,77,.8); }
.icw-bub { background: #fff; border: 1px solid #e3e5ee; border-radius: 4px 16px 16px 16px; padding: 10px 14px; display: grid; gap: 3px; animation: icwBub .45s ease-out; }
.icw-bub b { font-size: 19px; color: #141B4D; } .icw-bub small { font-size: 14px; color: #475569; line-height: 1.45; }
@keyframes icwBub { 0% { opacity: 0; transform: translateY(6px) scale(.98); } 100% { opacity: 1; transform: none; } }
.icw-body { display: grid; gap: 12px; }
.icw-opt { white-space: normal; min-width: 0; overflow-wrap: anywhere; font: inherit; background: #fff; border: 2px solid #e3e5ee; border-radius: 14px; padding: 12px; cursor: pointer; display: grid; justify-items: center; gap: 4px; text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s; color: #1e293b; }
.icw-opt:hover { border-color: #94a3b8; transform: translateY(-2px); }
.icw-opt.on { border-color: #C8102E; box-shadow: 0 0 0 4px rgba(200,16,46,.12); background: #fffafb; }
.icw-opt b { font-size: 15px; color: #141B4D; } .icw-opt small { font-size: 13px; color: #64748b; line-height: 1.35; }
.icw-tag { font-size: 12.5px; font-weight: 700; color: #C8102E; } .icw-dim { color: #141B4D !important; font-weight: 600; }
.icw-sizes { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.icw-szo { flex: 1 1 112px; min-width: 112px; align-content: end; padding: 10px 6px; } .icw-szpic { display: grid; place-items: end center; min-height: 60px; }
.icw-svg { display: block; filter: drop-shadow(0 4px 8px rgba(15,23,42,.18)); }
.icw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .icw-row input:not([type=color]) { flex: 1; min-width: 160px; } .icw-row input[type=color] { width: 46px; height: 32px; padding: 2px; }
.icw-up { background: #141B4D !important; color: #fff !important; border-color: #141B4D !important; font-weight: 700; }
.icw-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .icw-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.icw-pair { display: flex; align-items: center; gap: 6px; min-height: 120px; } .icw-pair i { font-style: normal; font-size: 20px; color: #C8102E; }
.icw-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .icw-to { padding: 10px 6px; } .icw-ti { font-size: 26px; }
.icw-sec { background: #fff; border: 1px solid #e3e5ee; border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; } .icw-sec > b { font-size: 15px; color: #141B4D; }
.icw-fl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.icw-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; border: 1.5px solid #e3e5ee; border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 14.5px; background: #fafbfd; }
.icw-f input[type=checkbox] { width: 18px; height: 18px; accent-color: #C8102E; margin: 0; } .icw-f > span { font-weight: 600; color: #1e293b; }
.icw-f.on { border-color: #141B4D; background: #fff; } .icw-f.fixed { opacity: .85; cursor: default; } .icw-f > small { color: #64748b; font-size: 12.5px; }
.icw-v { flex: 1 1 100%; font-size: 13.5px !important; padding: 6px 8px !important; }
.icw-backs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .icw-bo { padding: 10px 8px; }
.icw-themes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .icw-th { padding: 6px; } .icw-th img { width: 100%; aspect-ratio: auto; min-height: 60px; border-radius: 5px; background: #eef0f6; }
.icw-src .icw-opt { padding: 12px 8px; }
.icw-assets, .icw-signs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icw-as { width: 92px; border: 1px solid #e3e5ee; border-radius: 10px; padding: 6px; display: grid; justify-items: center; gap: 3px; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.icw-as img { max-width: 76px; max-height: 50px; } .icw-as small { font-size: 11.5px; color: #475569; }
.icw-add { border: 2px dashed #94a3b8; border-radius: 10px; padding: 10px 14px; font-weight: 700; color: #141B4D; background: #fff; cursor: pointer; font-size: 14px; }
.icw-sg { display: grid; gap: 4px; width: 170px; border: 1px solid #e3e5ee; border-radius: 10px; padding: 6px; background: #fff; }
.icw-sgp { height: 52px; display: grid; place-items: center; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 10px 10px; border-radius: 6px; } .icw-sgp img { max-height: 48px; max-width: 150px; } .icw-sgp label { cursor: pointer; font-weight: 700; color: #141B4D; font-size: 13.5px; }
.icw-sg input { font-size: 13.5px !important; padding: 5px 7px !important; }
.icw-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } .icw-sho { padding: 8px 4px; } .icw-sho img { width: 58px; height: 58px; }
.icw-one { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.icw-bsteps { display: grid; gap: 8px; }
.icw-bs { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; } .icw-bs > span { width: 34px; height: 34px; border-radius: 50%; background: #141B4D; color: #fff; font-weight: 800; display: grid; place-items: center; }
.icw-bs.ok > span { background: #12855e; } .icw-bs > div { display: grid; gap: 4px; justify-items: start; } .icw-bs b { font-size: 15px; color: #141B4D; } .icw-bs small { font-size: 13px; color: #475569; }
.icw-right { background: linear-gradient(160deg, #e9ecf7, #dfe3f2); display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 0; }
.icw-stage { flex: 1; display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px 12px; perspective: 1100px; min-height: 0; overflow-y: auto; }
.icw-flip { position: relative; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.25,.45,1); width: 220px; height: 350px; }
.icw-flip img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 8px; box-shadow: 0 22px 40px -20px rgba(15,23,42,.65); background: #fff; object-fit: fill; }
.icw-flip .bc { transform: rotateY(180deg); } .icw-flip.flipped { transform: rotateY(180deg); }
.icw-turn { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.icw-zip { position: absolute; left: 0; right: 0; bottom: 14px; height: 30px; pointer-events: none; }
.icw-zip span { position: absolute; left: -40px; font-size: 26px; opacity: 0; }
.icw-zip.go span { animation: icwZip .55s ease-in; }
.icw-zip.go::before { content: ""; position: absolute; inset: 12px 0 auto; height: 3px; background: repeating-linear-gradient(90deg, #C8102E 0 18px, transparent 18px 30px); animation: icwLines .55s linear; opacity: 0; }
@keyframes icwZip { 0% { left: -40px; opacity: 0; } 20% { opacity: 1; } 100% { left: 105%; opacity: 0; } }
@keyframes icwLines { 0% { opacity: .9; transform: translateX(-60%); } 100% { opacity: 0; transform: translateX(60%); } }
.icw-batch { display: grid; gap: 10px; justify-items: center; width: 100%; }
.icw-xl { background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 10px 24px -16px rgba(15,23,42,.5); width: 100%; max-width: 330px; font-size: 12.5px; }
.icw-xlh, .icw-xlr { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .icw-xlh span { background: #141B4D; color: #fff; padding: 5px; font-weight: 700; border-right: 1px solid #2b3a8f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icw-xlr span { border: 1px solid #e3e5ee; padding: 5px; height: 26px; color: #475569; }
.icw-proofs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.icw-proofs figure { margin: 0; display: grid; gap: 3px; justify-items: center; } .icw-proofs img { width: 100%; min-height: 80px; border-radius: 5px; background: #eef0f6; box-shadow: 0 6px 14px -10px rgba(15,23,42,.6); } .icw-proofs figcaption { font-size: 12px; color: #64748b; }
.icw-acts { display: flex; flex-wrap: wrap; gap: 8px; } .icw-acts button { font-size: 14.5px; } .icw-acts small { color: #64748b; font-weight: 400; }
.icw-ok { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 15px; padding: 10px 12px; border-radius: 10px; border: 2px dashed #94a3b8; cursor: pointer; } .icw-ok.on { border-color: #12855e; background: #eefaf4; color: #12855e; } .icw-ok input { width: 20px; height: 20px; accent-color: #12855e; }
.icw-bill { grid-template-columns: 1fr auto; align-items: center; } .icw-tot { font-size: 26px; font-weight: 800; color: #141B4D; }
.icw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: #fff; border-top: 1px solid #e3e5ee; }
.icw-foot button { font-size: 15.5px; padding: 10px 18px; border-radius: 10px; font-weight: 700; } .icw-next { background: #C8102E !important; border-color: #C8102E !important; min-width: 150px; }
.icw-spin { width: 14px; height: 14px; display: inline-block; vertical-align: middle; border-width: 2px; }
@media (max-width: 860px) { #icw { padding: 0; } .icw-win { border-radius: 0; max-height: 100vh; height: 100vh; } .icw-main { display: block; overflow-y: auto; } .icw-left { overflow: visible; min-height: auto; } .icw-right { min-height: 320px; } .icw-stage { overflow: visible; } .icw-grid3, .icw-types { grid-template-columns: repeat(2, 1fr); } .icw-fl, .icw-one { grid-template-columns: 1fr; } .icw-themes { grid-template-columns: repeat(3, 1fr); } .icw-dot small { display: none; } .icw-dot { min-width: 40px; } }

/* build 195: bleed set once (wizard step 1) + how the cards are cut (print) */
.icw-bleed { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid #e3e5ee; border-radius: 14px; padding: 12px 14px; }
.icw-bleedtx { display: grid; gap: 6px; } .icw-bleedtx b { font-size: 15px; color: #141B4D; } .icw-bleedtx small { font-size: 13px; color: #334155; line-height: 1.5; }
.icw-k { display: inline-block; width: 12px; height: 10px; border: 1.5px solid; vertical-align: -1px; border-radius: 2px; }
.icw-cutq { display: grid; gap: 6px; } .icw-cutq b { font-size: 14.5px; color: #141B4D; } .icw-cutq small { font-size: 13px; color: #334155; }
.icw-cuts { display: flex; flex-wrap: wrap; gap: 6px; } .icw-cut { border: 2px solid #e3e5ee; background: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 700; color: #141B4D; cursor: pointer; font-size: 14px; } .icw-cut.on { border-color: #C8102E; background: #fffafb; }
.ic-cuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.ic-cut { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; white-space: normal; font: inherit; } .ic-cut b { font-size: 13.5px; } .ic-cut small { font-size: 12px; color: #64748b; } .ic-cut.on { border-color: #C8102E; background: #fffafb; }
@media (max-width: 760px) { .icw-bleed { grid-template-columns: 1fr; justify-items: start; } .ic-cuts { grid-template-columns: 1fr; } }
.icw-lay { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: #141B4D; } .icw-lay select { max-width: 300px; font-size: 13.5px; padding: 6px 8px; }
/* build 198: ID cards — safe business rules (who the cards are for, authorisation letter, single-card email) */
.ics { background: #fff; border: 1px solid #e3e5ee; border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; }
.ics.need { border: 2px solid #C8102E; } .ics.blocked { border: 2px solid #7f1d1d; background: #fff7f7; }
.ics-stop { background: #7f1d1d; color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ics-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ics-h b { color: #141B4D; font-size: 15px; } .ics-tag { font-size: 12.5px; font-weight: 700; color: #C8102E; background: #FBE7EA; padding: 3px 8px; border-radius: 999px; }
.ics-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ics-cat { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 10px 6px; border: 2px solid #e3e5ee; border-radius: 12px; background: #fff; cursor: pointer; white-space: normal; font: inherit; color: #1e293b; }
.ics-cat span { font-size: 22px; } .ics-cat b { font-size: 14px; color: #141B4D; } .ics-cat small { font-size: 12px; color: #64748b; line-height: 1.3; }
.ics-cat.on { border-color: #C8102E; background: #fffafb; } .ics-cat.off { opacity: .45; cursor: not-allowed; }
.ics-auth, .ics-mail { display: grid; gap: 8px; background: #F6F7FB; border-radius: 10px; padding: 10px 12px; } .ics-auth > b, .ics-mail > b { color: #141B4D; }
.ics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; align-items: end; } .ics-grid .ic-btn { grid-column: 1 / -1; justify-self: start; }
.ics-ok { color: #12855e; font-weight: 600; font-size: 14px; } .ics-decl { font-weight: 600; } .ics-note { margin: 0; }
@media (max-width: 760px) { .ics-cats, .ics-grid { grid-template-columns: 1fr; } }
/* build 200: the guided lanyard maker (same prompt window as the ID card maker) + the Lanyard landing page */
#lnw { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 18px; }
.lnw-right { padding: 0; } .lnw-stage { padding: 16px 14px; display: grid; gap: 8px; align-content: start; overflow-y: auto; }
.lnw-cv { background: repeating-conic-gradient(#e2e8f0 0 25%, #f8fafc 0 50%) 0 0 / 12px 12px; border-radius: 8px; padding: 6px 2px; }
.lnw-cv canvas { display: block; box-shadow: 0 6px 14px -8px rgba(15,23,42,.5); }
.lnw-spec { display: grid; gap: 2px; background: #fff; border: 1px solid #DCE0EC; border-radius: 10px; padding: 8px 10px; font-size: 13px; color: #334155; } .lnw-spec b { color: #141B4D; font-size: 14px; }
.lnw-chk { margin: 0; } .lnw-tape { display: block; width: 90%; background: linear-gradient(90deg, #141B4D, #2b3a8f); border-radius: 3px; border-top: 2px solid #FFC72C; border-bottom: 2px solid #FFC72C; }
.lnw-ends { display: flex; align-items: center; width: 100%; height: 18px; } .lnw-ends i { height: 18px; background: #cbd5e1; border-radius: 3px; } .lnw-ends em { flex: 1; height: 18px; background: linear-gradient(90deg, #141B4D, #C8102E); margin: 0 2px; border-radius: 2px; }
.lnw-ready { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .lnw-rd { padding: 6px; } .lnw-rd img { width: 100%; height: 30px; object-fit: cover; object-position: left; border-radius: 4px; background: #eef0f6; }
.lnw-pals { display: flex; flex-wrap: wrap; gap: 8px; } .lnw-pal { width: 64px; height: 42px; border-radius: 10px; border: 2px solid #e3e5ee; font-weight: 800; position: relative; cursor: pointer; } .lnw-pal i { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; border-radius: 2px; } .lnw-pal.on { border-color: #C8102E; box-shadow: 0 0 0 3px rgba(200,16,46,.15); }
.lnw-fins { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .lnw-fins .icw-opt { justify-items: start; text-align: left; }
.lnl-straps { display: grid; gap: 18px; width: 100%; transform: rotate(-8deg); } .lnl-straps canvas { display: block; box-shadow: 0 16px 30px -14px rgba(0,0,0,.7); border-radius: 3px; animation: lnlSlide 7s linear infinite; } .lnl-straps canvas:nth-child(2) { animation-delay: -2.3s; } .lnl-straps canvas:nth-child(3) { animation-delay: -4.6s; }
@keyframes lnlSlide { 0% { transform: translateX(-6%); } 50% { transform: translateX(6%); } 100% { transform: translateX(-6%); } }
@media (max-width: 860px) { #lnw { padding: 0; } }
@media (prefers-reduced-motion: reduce) { .lnl-straps canvas { animation: none; } }

/* build 200: lanyard maker — hook & holder choice with drawings, mockup */
.lnw-att { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lnw-a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 8px; }
.lnw-a svg { width: 76px; height: 60px; display: block; }
.lnw-a small { font-size: 11.5px; line-height: 1.3; }
.lnw-mock { display: flex; justify-content: center; }
.lnw-mock canvas { border-radius: 10px; box-shadow: 0 2px 10px rgba(15, 23, 42, .12); max-width: 100%; }
.lnw-ok { margin: 6px 0 8px; padding-left: 18px; line-height: 1.7; font-size: 14px; }
.lnw-press { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; font-size: 14px; }

/* build 203: lanyard text style (font, colour, letter gap, outline, effect) */
.ln-tx { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ln-tx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ln-tx-row .f { min-width: 110px; }
.ln-tx-prev { border-radius: 8px; padding: 4px; display: flex; justify-content: center; border: 1px solid #cbd5e1; }

/* build 204: Job Manager */
.pr { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 30px; }
.pr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pr-head h2 { margin: 0; }
.pr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pr-kpi { background: var(--card, #fff); border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.pr-kpi b { font-size: 26px; line-height: 1.1; } .pr-kpi span { font-weight: 600; } .pr-kpi small { color: #64748b; }
.pr-kpi.bad { border-color: #fca5a5; background: #fef2f2; } .pr-kpi.bad b { color: #dc2626; }
.pr-tabs { align-self: flex-start; }
.pr-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); white-space: nowrap; }
.pr-save { background: #ecfdf5; border: 1px solid #86efac; border-radius: 10px; padding: 10px 14px; }
.pr-ok { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 8px 14px; color: #166534; font-weight: 600; }
.pr-late { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; } .pr-late ul { margin: 4px 0 6px 18px; padding: 0; }
.pr-opts { gap: 14px; align-items: center; }
.pr-days { display: flex; flex-direction: column; gap: 12px; }
.pr-day { background: var(--card, #fff); border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pr-dayh { display: flex; align-items: center; gap: 10px; } .pr-bar { flex: 1; height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; } .pr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #eab308); }
.pr-run { border: 1px solid #e2e8f0; border-left: 5px solid #2563eb; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .pr-run.idcard { border-left-color: #7c3aed; }
.pr-runh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pr-no { background: #0f172a; color: #fff; border-radius: 6px; padding: 0 7px; font-weight: 700; }
.pr-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-part { white-space: normal; text-align: left; padding: 4px 10px; border-radius: 8px; border: 1px solid #bfdbfe; background: #eff6ff; font-size: 13px; } .pr-part small { color: #64748b; margin-left: 4px; }
.pr-part.merged { background: #f0fdf4; border-color: #86efac; } .pr-part.fill { background: #fefce8; border-color: #fde047; }
.pr-eta { width: 100%; border-collapse: collapse; margin-top: 6px; } .pr-eta td, .pr-eta th { padding: 6px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; } .pr-eta tr[data-pr] { cursor: pointer; } .pr-eta tr[data-pr]:hover { background: #f8fafc; }
.pr-board { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; }
.pr-col { background: #f8fafc; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.pr-colh { font-weight: 700; border-bottom: 3px solid var(--c); padding-bottom: 4px; } .pr-colh span { color: #64748b; font-weight: 500; }
.pr-card { white-space: normal; text-align: left; display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; }
.pr-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.pr-tip { color: #854d0e; background: #fefce8; border-radius: 6px; padding: 4px 8px; margin: 4px 0; }
.pr-thumb { max-width: 100%; max-height: 70px; border-radius: 6px; border: 1px solid #e2e8f0; margin: 6px 0; }
.pr-qcl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 10px; margin: 6px 0; }
.pr-prom-out { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .pr-big { font-size: 20px; } .pr-adv div { margin: 3px 0; }
.pr-empty p { max-width: 640px; }
.bad-t { color: #dc2626; }
@media (max-width: 700px) { .pr-board { grid-template-columns: repeat(6, 78vw); } }

/* build 205: lanyard design library */
.lnl-win { width: min(1100px, 96vw); max-height: 92vh; overflow: auto; }
.lnl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 10px; }
.lnl-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.lnl-card.on { border-color: #16a34a; box-shadow: 0 0 0 2px #bbf7d0; }
.lnl-card img { width: 100%; height: 44px; object-fit: cover; object-position: left; border-radius: 4px; background: repeating-conic-gradient(#e2e8f0 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.lnl-gh { font-weight: 700; margin: 8px 0 4px; } .lnl-gh span { color: #64748b; font-weight: 500; }
.lnl-sizes { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lnl-size { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; background: #fff; overflow-x: auto; } .lnl-size.on { border-color: #2563eb; }
.lnl-size canvas { display: block; margin-top: 6px; max-width: none; }
.lnl-empty { padding: 20px; text-align: center; }

/* build 206: name placement on the strap */
.ln-place { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 8px 10px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.ln-sh { min-width: 64px; text-align: center; }

/* build 209: ID card logo badge */
.icw-lfx { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.icw-lshapes { display: flex; flex-wrap: wrap; gap: 6px; }
.icw-lsh { white-space: normal; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; padding: 5px 2px; border-radius: 8px; }
.icw-lsh img { width: 30px; height: 30px; } .icw-lsh span { font-size: 22px; line-height: 30px; } .icw-lsh small { font-size: 11px; }
.icw-lsh.on { border-color: #dc2626; box-shadow: 0 0 0 2px #fecaca; }
.icw-lbg { display: inline-flex; align-items: center; gap: 5px; } .icw-lbg.on { border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.icw-lbg i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #94a3b8; display: inline-block; } .icw-lbg i.none { background: repeating-conic-gradient(#e2e8f0 0 25%, #fff 0 50%) 0 0 / 6px 6px; }
.icw-lgtip { color: #92400e; background: #fffbeb; border-radius: 6px; padding: 2px 6px; display: block; }
.modal-top #modal { z-index: 1200; } .modal-top #toast { z-index: 10050; }
/* build 213: a message or a box opened while the ID card / lanyard maker is open comes in front of it */
body:has(> #icw) #modal, body:has(> #lnw) #modal { z-index: 1200; }
.icw-as .row button { padding: 2px 5px; min-width: 0; font-size: 12px; line-height: 1.2; }
.icw-as { min-width: 96px; }

/* build 211: Print by MDFAST */
.mp { display: flex; flex-direction: column; gap: 10px; } .mp-sec { padding: 10px 12px; }
.mp-tbl { width: 100%; border-collapse: collapse; margin-top: 4px; } .mp-tbl td { padding: 4px 6px; border-bottom: 1px solid #e2e8f0; } .mp-tbl .r { text-align: right; white-space: nowrap; } .mp-tot td { font-weight: 800; font-size: 16px; border-bottom: 0; }
.mp-pay { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 12px; border: 2px solid #16a34a; border-radius: 12px; background: #f0fdf4; } .mp-pay img { width: 220px; height: 220px; background: #fff; border-radius: 8px; }
.mp-amt { font-size: 22px; } .mp-cons { align-items: flex-start; }

/* build 212: Print by MDFAST — pay online */
.mp-gw { border-color: #2563eb; background: #eff6ff; } .mp-gw .btn-big { margin-top: 8px; }
.ok-n { background: #f0fdf4; border-color: #86efac; color: #166534; }
/* build 213: QR code / barcode on ID cards */
.icc { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.icc .seg button { padding: 4px 10px; font-size: 13px; }
.icc-src { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.icc-o { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; cursor: pointer; font: inherit; }
.icc-o b { font-size: 13px; } .icc-o small { color: #64748b; font-size: 11.5px; line-height: 1.3; }
.icc-o.on { border-color: #1e3a8a; box-shadow: inset 0 0 0 1px #1e3a8a; background: #eef2ff; }
.icc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 10px; }
.icc-sample pre { margin: 2px 0 0; padding: 6px 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow: auto; }
.icc-rep { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.icc-o, .icc-o b, .icc-o small { white-space: normal; overflow: visible; text-overflow: clip; }
/* build 214: ID card accessories in the Print by MDFAST order */
.mp-acct { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mp-ac { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.mp-ac.on { border-color: #15803d; box-shadow: inset 0 0 0 1px #15803d; background: #f0fdf4; }
.mp-ac b { font-size: 13px; line-height: 1.25; } .mp-ac small { color: #64748b; font-size: 11.5px; line-height: 1.3; }
.mp-acpic { border: 0; background: #f8fafc; border-radius: 8px; padding: 4px; cursor: pointer; height: 108px; display: grid; place-items: center; }
.mp-acpic svg { height: 100px; width: auto; }
.mp-acpr { font-weight: 700; font-size: 13px; color: #0f172a; }
.mp-accol { display: flex; gap: 5px; flex-wrap: wrap; } .mp-accol button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; padding: 0; cursor: pointer; } .mp-accol button.on { border-color: #0f172a; box-shadow: 0 0 0 2px #fff inset; }
/* build 215: 🔁 Reprint cards */
.icr-note { background: #fff7ed; border: 1px solid #fdba74; border-left: 4px solid #ea580c; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: #7c2d12; margin-bottom: 8px; }
.icr-note a { color: #c2410c; font-weight: 700; }
.icr-how { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 8px; } .icr-how ol { margin: 6px 0 0; padding-left: 18px; } .icr-how li { margin: 3px 0; }
.icr { display: flex; flex-direction: column; gap: 10px; }
.icr-src { width: auto; flex-wrap: wrap; } .icr-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.icr-find { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .icr-find input { flex: 1 1 320px; font-size: 15px; padding: 9px 12px; }
.icr-res { max-height: 340px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.icr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .icr-tbl th, .icr-tbl td { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; text-align: left; white-space: nowrap; }
.icr-tbl th { position: sticky; top: 0; background: #f8fafc; z-index: 1; } .icr-res tr[data-icr] { cursor: pointer; } .icr-res tr[data-icr]:hover { background: #f8fafc; } .icr-res tr.on { background: #ecfdf5; }
.icr-out { border-top: 1px solid #e2e8f0; padding-top: 8px; }
/* build 217: 📋 Class Collection */
.iccl { display: flex; flex-direction: column; gap: 10px; }
.iccl-bar { display: inline-block; width: 60px; height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; vertical-align: middle; margin-right: 4px; } .iccl-bar i { display: block; height: 100%; background: #15803d; }
.iccl-hint { background: #eef2ff; border: 1px solid #c7d2fe; border-left: 4px solid #141B4D; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.ln-zcv { touch-action: pan-y; cursor: grab; }

/* build 228: Marketing → Wishes & banners */
.ws-rec { position: relative; padding: 0; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid #cbd5e1; background: #fff; }
.ws-rec img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-rec small { position: absolute; right: 2px; bottom: 1px; font-size: 12px; }
.ws .sk-shapes .sk-shape { padding: 4px 8px; }
/* build 229 — wishes: templates, photo layers */
.ws-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 6px; max-height: 260px; overflow: auto; }
.ws-tpl { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; min-height: 92px; font-size: 22px; }
.ws-tpl img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.ws-tpl small { font-size: 11px; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ws-tpl.on, .ws-lay.on { border-color: #2563eb; box-shadow: 0 0 0 2px #93c5fd; }
.ws-layers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ws-lay { display: flex; flex-direction: column; align-items: center; width: 74px; padding: 3px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.ws-lay img { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; }
.ws-lay small { font-size: 10.5px; text-align: center; line-height: 1.2; }
.ws-sel { border: 2px solid #93c5fd; }
.ws-cv { touch-action: none; cursor: grab; }
.ws details > summary { cursor: pointer; }