:root {
  --red: #cc0000;
  --red-dark: #a80000;
  --dark: #1a1a1a;
  --tab: #3c3c3b;
  --grey: #6f6f6e;
  --line: #dcdcdc;
  --bg: #f4f4f4;
  --white: #fff;
  --amber: #b36b00;
  --amber-bg: #fff6e5;
  --green: #2e7d32;
  --green-bg: #e8f3e9;
  --red-bg: #fdecec;
  --mono: Consolas, "Cascadia Code", "Courier New", monospace;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--dark);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); overflow-x: hidden; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
h3 { margin: 0 0 8px; font-size: 18px; }
h4 { margin: 14px 0 6px; font-size: 13px; }
p { margin: 0 0 8px; }
code { background: #eee; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.muted { color: var(--grey); font-size: 12px; }
.small { font-size: 12px; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.top {
  background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px; height: 56px; position: sticky; top: 0; z-index: 10; border-bottom: 4px solid var(--red);
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mark { width: 26px; height: 28px; background: var(--red); display: inline-block;
  clip-path: polygon(0 0, 40% 0, 40% 16%, 60% 16%, 60% 0, 100% 0, 100% 42%, 0 42%, 0 0, 0 53%, 100% 53%, 100% 75%, 90% 90%, 70% 100%, 60% 100%, 60% 88%, 40% 88%, 40% 100%, 30% 100%, 10% 90%, 0 75%); }
.wordmark { font-weight: 900; font-size: 22px; letter-spacing: .02em; }
.app { color: #bbb; margin-left: 6px; padding-left: 12px; border-left: 1px solid #444; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top .muted { color: #bbb; white-space: nowrap; }
.btn.ghost { background: transparent; color: #fff; border-color: #555; }
.btn.ghost:hover { border-color: #aaa; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; padding: 20px; max-width: 1560px; margin: 0 auto; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; max-height: none; } }
.sidebar { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0 0 8px; align-self: start; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; overflow-x: hidden; min-width: 0; }
.content { min-width: 0; }

/* collapsible panels in the sidebar */
.panel { border-bottom: 1px solid var(--line); }
.panel:last-child { border-bottom: 0; }
.panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; user-select: none; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary h2 { display: flex; align-items: center; gap: 8px; }
.panel > summary .step-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; }
.panel > summary .chev { color: var(--grey); font-size: 11px; transition: transform .15s; }
.panel[open] > summary .chev { transform: rotate(90deg); }
.panel-body { padding: 0 16px 14px; }

label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--grey); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; min-width: 0; }
input, select, textarea { font: inherit; font-size: 13px; color: var(--dark); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; background: #fff; text-transform: none; letter-spacing: 0; width: 100%; min-width: 0; }
textarea { resize: vertical; line-height: 1.35; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(204,0,0,.25); border-color: var(--red); }
input[readonly] { background: #f7f7f7; color: var(--grey); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.checks label { flex-direction: row; align-items: flex-start; gap: 8px; text-transform: none; font-size: 13px; color: var(--dark); letter-spacing: 0; }
.checks input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.hint { font-size: 11px; color: var(--grey); margin: -4px 0 8px; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.linklike { background: none; border: 0; color: var(--red); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

.btn { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--dark); border-radius: 4px; padding: 7px 12px; cursor: pointer; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.btn:hover { border-color: #999; }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-dark); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.danger { color: var(--red); }
.btn.file { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.btn.file input { display: none; }
.btn.small { font-size: 12px; padding: 4px 9px; }
.btn.block { width: 100%; }

/* cover picker */
.cover-pick { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.cover-thumb { width: 64px; height: 90px; border: 1px solid var(--line); border-radius: 4px; background: #1a1a1a center/cover no-repeat; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; padding-bottom: 6px; }
.cover-pick .stack { flex: 1 1 auto; min-width: 0; }

/* drafts */
.draft-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.draft { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.draft.current { border-color: var(--red); background: var(--red-bg); }
.draft .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.draft .when { font-size: 11px; color: var(--grey); white-space: nowrap; }

/* ---------- steps strip ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--tab); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: 0 0 auto; }
.step.done .n { background: var(--green); }
.step.warn .n { background: var(--amber); }
.step .t { font-weight: 600; font-size: 13px; }
.step .s { font-size: 11px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); } }

/* ---------- items ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.toolbar .group { display: flex; gap: 6px; flex-wrap: wrap; }
.toolbar h2 { font-size: 15px; text-transform: none; letter-spacing: 0; }

.section-head { display: flex; align-items: center; gap: 8px; background: var(--tab); color: #fff; border-radius: 6px; padding: 6px 8px 6px 12px; margin: 16px 0 8px; }
.section-head:first-child { margin-top: 0; }
.section-head .sname { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; background: transparent; border: 1px solid transparent; color: #fff; padding: 3px 6px; }
.section-head .sname:focus { background: #fff; color: var(--dark); border-color: var(--red); }
.section-head .count { font-size: 11px; color: #ccc; white-space: nowrap; }
.section-head .icon { background: #555; color: #fff; border-color: #555; }
.section-head .icon:hover { background: #777; }
.section-head.drop-target { outline: 2px dashed #fff; }
.no-section .sname { font-style: italic; }

.item { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); gap: 10px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; position: relative; }
.item.not-found { border-left-color: var(--amber); }
.item.special { border-left-color: var(--tab); grid-template-columns: 22px 64px minmax(0, 1fr); }
.item.special .pthumb { width: 64px; height: 90px; border: 1px solid var(--line); border-radius: 4px; background: #eee center/cover no-repeat; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; font-size: 9px; font-weight: 700; color: #888; padding-bottom: 6px; }
.item.special .pthumb.dark { background-color: #1a1a1a; color: #ddd; }
.type-pill { display: inline-block; background: var(--tab); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 3px; }
.add-page { width: auto; font-weight: 600; }
.item.special textarea { width: 100%; }
.item.dragging { opacity: .4; }
.item.drop-before { box-shadow: 0 -3px 0 0 var(--red); }
.item.drop-after { box-shadow: 0 3px 0 0 var(--red); }
.item.flash { animation: flash 1.2s; }
@keyframes flash { 0% { background: var(--red-bg); } 100% { background: #fff; } }
.handle { cursor: grab; color: #bbb; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; user-select: none; }
.handle:active { cursor: grabbing; }
.thumb { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #fafafa; overflow: hidden; position: relative; }
.thumb img { max-width: 100%; max-height: 100%; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.thumb.has-img img { visibility: visible; } /* kept in the layout while loading: lazy loading needs a box */
.thumb.has-img .no-thumb { display: none; }
.no-thumb { font-size: 10px; color: #aaa; text-align: center; padding: 4px; }
.item-main { min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.row + .row { margin-top: 6px; }
.row label { margin-bottom: 0; }
.w-article { flex: 0 1 130px; }
.w-name { flex: 1 1 220px; }
.w-price { flex: 0 1 90px; }
.w-select { flex: 0 1 88px; }
.w-small { flex: 0 1 120px; }
.w-grow { flex: 1 1 180px; }
.w-grow2 { flex: 2 1 260px; }
.name-view { font-size: 13px; padding: 6px 0 4px; min-height: 30px; line-height: 1.3; }
.name-view b { display: block; }
.name-view .muted { display: block; }
.item-buttons { display: flex; gap: 4px; margin-left: auto; align-self: flex-end; }
.icon { font: inherit; font-size: 12px; width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; padding: 0; }
.icon:hover { border-color: #999; }
.icon.danger { color: var(--red); }
.badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.badges label { flex-direction: row; align-items: center; gap: 4px; text-transform: none; font-size: 12px; color: var(--dark); margin: 0; letter-spacing: 0; white-space: nowrap; }
.badges input { width: auto; }
.more { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.status { font-size: 11px; margin-top: 4px; }
.status.ok { color: var(--green); }
.status.warn { color: var(--amber); font-weight: 600; }
.page-card { display: flex; align-items: center; gap: 12px; }
.page-card .pthumb { width: 64px; height: 90px; border: 1px solid var(--line); border-radius: 4px; background: #eee center/cover no-repeat; flex: 0 0 auto; }
.page-card .ptext { flex: 1 1 auto; min-width: 0; }

.empty { background: #fff; border: 1px dashed var(--line); border-radius: 8px; padding: 34px 20px; text-align: center; color: var(--grey); }
.empty .big { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- checks & result ---------- */
.checks-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 16px 0 10px; }
.checks-panel h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.check { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 4px; font-size: 13px; }
.check .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; }
.check.error { background: var(--red-bg); } .check.error .dot { background: var(--red); }
.check.warn { background: var(--amber-bg); } .check.warn .dot { background: var(--amber); }
.check.info { background: #f6f6f6; } .check.info .dot { background: #999; }
.check.ok { background: var(--green-bg); } .check.ok .dot { background: var(--green); }
.check .links { margin-left: auto; white-space: nowrap; }
.check .links button { margin-left: 4px; }
.generate-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.result { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 12px 0; font-size: 13px; }
.result.error { border-color: var(--red); color: var(--red); }
.result a { color: var(--red); font-weight: 600; }
.preview { width: 100%; height: 82vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* tile preview */
.tile-box { width: min(900px, 96vw); }
.tile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tile-head h3 { margin: 0; }
.tile-head .btn { margin-left: auto; }
.tile-stage { background: #e9e9e9; border-radius: 6px; padding: 18px; display: flex; justify-content: center; min-height: 160px; align-items: center; overflow: auto; }
.tile-stage canvas { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); max-width: 100%; height: auto; }
.tile-stage .err { color: var(--red); }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-box { background: #fff; border-radius: 8px; padding: 20px; width: min(720px, 96vw); max-height: 90vh; overflow: auto; }
.modal-box textarea { width: 100%; font-family: Consolas, monospace; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.help-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
@media (max-width: 700px) { .help-steps { grid-template-columns: 1fr; } }
.help-step { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.help-step b { display: block; margin-bottom: 4px; }
.help-step .n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 6px; }
.glossary dt { font-weight: 600; margin-top: 8px; }
.glossary dd { margin: 2px 0 0; color: var(--grey); font-size: 13px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--dark); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 13px; z-index: 70; box-shadow: 0 4px 16px rgba(0,0,0,.3); }

/* ---------- login, accounts and admin ---------- */
a.btn { text-decoration: none; display: inline-block; }
.form-error { background: #fdecec; border: 1px solid #f3b6b6; color: #a80000; border-radius: 4px; padding: 8px 10px; font-size: 13px; margin: 6px 0; }

.auth-wrap { display: flex; justify-content: center; padding: 60px 16px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 6px; padding: 24px; width: min(400px, 100%); }
.auth-card h1 { font-size: 20px; margin: 0 0 16px; }
.auth-card input { width: 100%; }
.auth-card a { color: var(--red); }
.auth-card .btn.block { margin-top: 6px; }
.pager .btn:disabled { opacity: .5; cursor: default; }

.user-chip { color: #ddd; font-size: 12px; }
.user-menu { display: flex; align-items: center; gap: 8px; }

.admin { max-width: 1300px; margin: 0 auto; padding: 20px; }
.tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.tab { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--grey); margin-bottom: -2px; }
.tab.active { color: var(--dark); border-bottom-color: var(--red); }
.tabs .filter { margin: 0 0 6px auto; flex-direction: row; align-items: center; gap: 8px; }
.tab-panel .toolbar { gap: 12px; }
.tab-panel .toolbar p { margin: 0; }
table.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.grid th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); padding: 9px 10px; border-bottom: 1px solid var(--line); background: #fafafa; }
.grid td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.grid tr.inactive td { color: #999; }
.grid tr.warn-row td { background: #fff8e6; }
.grid td.actions { text-align: right; white-space: nowrap; }
.grid td.actions .btn { margin-left: 4px; }
.grid td.empty { text-align: center; color: var(--grey); padding: 24px; border: 0; }
.single-company .col-company { display: none; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.pill.ok { background: #e6f4ea; color: #1e6b34; }
.pill.off { background: #eee; color: #777; }
.pill.warn { background: #fff1d6; color: #8a5a00; }
.temp-password { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.temp-password code { font-size: 20px; padding: 8px 12px; letter-spacing: .08em; user-select: all; }
.flash { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 20px); background: var(--dark); color: #fff; padding: 10px 16px; border-radius: 6px; opacity: 0; transition: .2s; z-index: 75; pointer-events: none; }
.flash.show { opacity: 1; transform: translate(-50%, 0); }
.flash.error { background: var(--red); }
@media (max-width: 900px) { .grid { display: block; overflow-x: auto; } .tabs { flex-wrap: wrap; } }

/* shared (company) brochures in the builder sidebar */
.shared-status { font-size: 12px; color: var(--grey); margin: 2px 0 8px; }
.shared-status.dirty { color: #8a5a00; }
.shared-status.error { color: var(--red); }
.draft .shared-badge { font-size: 10px; font-weight: 700; color: #1e6b34; background: #e6f4ea; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.shared-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; max-height: 280px; overflow-y: auto; }
.shared-list .draft .del { border: 0; background: none; color: #bbb; cursor: pointer; font-size: 13px; padding: 0 2px; }
.shared-list .draft .del:hover { color: var(--red); }
.shared-list .none { color: var(--grey); font-size: 12px; }
h4.sub { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); margin: 12px 0 4px; }
.user-menu .user-chip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* catalogue tab */
.cat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-head .inline { flex-direction: row; align-items: center; gap: 8px; }
.cat-summary { font-size: 14px; margin-top: 4px; max-width: 640px; }
.cat-summary .muted { font-size: 13px; }
.cat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-search { width: min(520px, 100%); }
.cat-grid td { vertical-align: top; }
.cat-thumb { width: 52px; }
.cat-thumb img { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 3px; }
.cat-desc { color: var(--grey); font-size: 12px; max-width: 420px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 12px 0; }
.progress { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin: 10px 0; }
.progress > div { height: 100%; width: 0; background: var(--red); transition: width .2s; }
.imp-sample-wrap { max-height: 190px; overflow: auto; margin: 10px 0; }
.imp-sample-wrap .grid { font-size: 12px; }
.imp-modes label { align-items: flex-start; }
.imp-modes input { margin-top: 3px; }
.imp-status { font-size: 13px; line-height: 1.5; min-height: 20px; }
.article-form { display: grid; grid-template-columns: 1fr 150px; gap: 14px; }
.article-form input { width: 100%; }
.ar-thumb { border: 1px solid var(--line); border-radius: 6px; height: 150px; display: flex; align-items: center; justify-content: center; background: #fff; margin-top: 18px; }
.ar-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ar-thumb img:not([hidden]) + span { display: none; }
@media (max-width: 700px) { .article-form { grid-template-columns: 1fr; } }
.tab-panel .inline select, .tabs .filter select { width: auto; min-width: 220px; }

/* ---------- home (launcher) ---------- */
.home { max-width: 1040px; margin: 0 auto; padding: 48px 20px; }
.home h1 { font-size: 28px; margin: 0 0 4px; }
.home-sub { font-size: 14px; margin-bottom: 28px; }
.launch { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.launch-card { min-height: 230px; }
.tool-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.label-like { font-size: 11px; color: var(--grey); text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 6px; }
.field-group { margin-bottom: 8px; }
@media (max-width: 760px) { .launch { grid-template-columns: 1fr; } .home { padding: 28px 16px; } }
.launch-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: 8px; padding: 26px 26px 22px; color: var(--dark); text-decoration: none; min-height: 250px; transition: box-shadow .15s, transform .15s; }
.launch-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.10); transform: translateY(-2px); }
.launch-card:focus-visible { outline: 3px solid rgba(204,0,0,.35); outline-offset: 2px; }
.launch-icon { color: var(--red); }
.launch-title { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.launch-count { font-size: 12px; font-weight: 700; background: var(--red-bg); color: var(--red); border-radius: 10px; padding: 2px 9px; }
.launch-text { color: var(--grey); font-size: 14px; line-height: 1.5; flex: 1 1 auto; }
.launch-go { color: var(--red); font-weight: 700; font-size: 14px; }
.launch-card.locked { border-top-color: #bbb; cursor: default; }
.launch-card.locked:hover { box-shadow: none; transform: none; }
.launch-card.locked .launch-icon, .launch-card.locked .launch-title { color: #999; }
.launch-locked { font-size: 13px; color: var(--grey); background: #f4f4f4; border-radius: 4px; padding: 8px 10px; }

/* ---------- flipbook library ---------- */
.fb-page { max-width: 1300px; margin: 0 auto; padding: 24px 20px 40px; min-height: calc(100vh - 60px); }
.fb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fb-head h1 { font-size: 24px; margin: 0 0 4px; }
.fb-head h1 .muted { font-size: 16px; font-weight: 400; }
.fb-head p { margin: 0; }
.fb-tools { display: flex; gap: 8px; align-items: center; }
.fb-tools input { width: 240px; }
@media (max-width: 600px) { .fb-tools { width: 100%; } .fb-tools input { flex: 1 1 auto; width: auto; } }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.fb-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; min-width: 0; }
.fb-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 210 / 297; background: #e9e9e9; border-radius: 8px 8px 0 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.fb-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; transition: transform .2s; }
.fb-thumb:hover img { transform: scale(1.02); }
.fb-thumb-ph { color: #999; font-size: 12px; }
.fb-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fb-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-edition { font-size: 13px; color: var(--red); font-weight: 600; }
.fb-facts, .fb-meta { font-size: 12px; color: var(--grey); }
.fb-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
details.menu { position: relative; margin-left: auto; }
details.menu > summary { min-width: 34px; text-align: center; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; bottom: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.15); min-width: 230px; padding: 4px; z-index: 5; display: flex; flex-direction: column; }
.menu-list a, .menu-list button { font: inherit; font-size: 13px; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 4px; color: var(--dark); text-decoration: none; cursor: pointer; }
.menu-list a:hover, .menu-list button:hover { background: #f3f3f3; }
.menu-list .danger { color: var(--red); }
.drop-hint { position: fixed; inset: 0; background: rgba(204,0,0,.10); border: 4px dashed var(--red); z-index: 25; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.drop-hint div { background: #fff; padding: 16px 24px; border-radius: 8px; font-weight: 700; font-size: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.modal-actions.start { justify-content: flex-start; margin: -2px 0 12px; }
.modal-box label textarea { font-family: Consolas, monospace; font-size: 12px; }

/* builder: actions under a saved flipbook */
.result-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }
.result .result-actions a.btn { color: inherit; }
.result .result-actions a.btn.primary { color: #fff; }
@media (max-width: 600px) {
  .fb-page { padding: 16px 12px 32px; }
  .fb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fb-body { padding: 10px; }
  .fb-actions .btn { padding: 4px 7px; }
  .top { padding: 0 12px; }
  .top .app, .top .user-chip { display: none; }
  .top-actions { gap: 6px; overflow-x: auto; }
}

/* ---------- KAM Generator (kam.html: same builder, never priced) ---------- */
.kam-mode .price-only,
.kam-mode .w-price,
.kam-mode label:has([data-k="priceLabel"]),
.kam-mode label:has([data-k="pricePrefix"]),
.kam-mode label:has([data-k="breaks"]) { display: none !important; }
.kam-panel .panel-body { gap: 8px; }
.kam-lists { display: flex; flex-direction: column; gap: 4px; }
.kam-list { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.kam-list .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kam-list .ct { color: var(--grey); font-size: 11px; white-space: nowrap; }
.kam-box { width: min(860px, 96vw); }
.kam-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.kam-stat { background: var(--bg); border-radius: 6px; padding: 8px 12px; min-width: 120px; }
.kam-stat b { display: block; font-size: 20px; }
.kam-stat.ok b { color: var(--green); }
.kam-stat.warn b { color: var(--amber); }
.kam-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.kam-tools input[type="search"] { flex: 1; min-width: 180px; }
.kam-tree { border: 1px solid var(--line); border-radius: 6px; max-height: 46vh; overflow: auto; }
.kam-cat { border-bottom: 1px solid var(--line); }
.kam-cat:last-child { border-bottom: 0; }
.kam-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.kam-row label, .kam-options label { flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-size: 13px; color: var(--dark); letter-spacing: 0; margin: 0; cursor: pointer; font-weight: normal; }
.kam-row label { flex: 1; }
.kam-options select { width: auto; }
.kam-row .n { color: var(--grey); font-size: 12px; white-space: nowrap; }
.kam-cat > .kam-row { background: #fafafa; font-weight: 600; }
.kam-cat > .kam-row label { font-weight: 600; }
.kam-toggle { background: none; border: 0; cursor: pointer; width: 20px; color: var(--grey); padding: 0; font-size: 11px; }
.kam-subs { padding-left: 28px; }
.kam-options { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; }
.kam-total { font-weight: 600; }
.kam-total.over { color: var(--red); }
.kam-total.big { color: var(--amber); }
.kam-options select + select { margin-left: 6px; }
.kam-edit-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.kam-box input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.kam-row label span { flex: 1; text-align: left; }
.kam-options label { max-width: 520px; }

/* ---------- PO Reader (po.html) ---------- */
.po-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; padding: 20px; max-width: 1800px; margin: 0 auto; }
.po-side { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.po-upload .hint { margin: 6px 0 0; }
.po-filter { display: flex; flex-direction: column; gap: 6px; }
.po-filter-row { display: flex; gap: 8px; align-items: center; }
.po-filter-row select { flex: 1; }
.po-check { flex-direction: row; align-items: center; gap: 6px; margin: 0; text-transform: none; font-size: 12px; color: var(--dark); letter-spacing: 0; white-space: nowrap; }
.po-check input { width: auto; }
.po-list { display: flex; flex-direction: column; gap: 6px; }
.po-none { padding: 6px 2px; }
.po-item { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.po-item:hover { border-color: #bbb; }
.po-item.current { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.po-item-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.po-item-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.po-item-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-page .pill { white-space: nowrap; }
.pill.po-ok { background: var(--green-bg); color: var(--green); }
.pill.po-warn { background: var(--amber-bg); color: var(--amber); }
.pill.po-bad { background: var(--red-bg); color: var(--red-dark); }
.pill.po-info { background: #e8f0fb; color: #1d4f91; }
.pill.po-off { background: #eee; color: #777; }
.po-empty { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px 32px; max-width: 760px; }
.po-empty h1 { margin: 0 0 8px; font-size: 22px; }
.po-empty ol { padding-left: 20px; line-height: 1.7; }
.po-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.po-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.po-title h1 { font-size: 20px; margin: 0; }
.po-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.po-actions a.btn { text-decoration: none; }
.po-banner { border-radius: 6px; padding: 9px 12px; margin-bottom: 8px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.po-banner.info { background: #e8f0fb; color: #1d4f91; }
.po-banner.warn { background: var(--amber-bg); color: #6b4200; }
.po-banner.bad { background: var(--red-bg); color: var(--red-dark); }
.po-banner.ok { background: var(--green-bg); color: #1e5b22; }
.po-banner .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: po-spin .8s linear infinite; flex: none; }
@keyframes po-spin { to { transform: rotate(360deg); } }
.po-split { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: 16px; align-items: start; }
.po-pdf-wrap { position: sticky; top: 76px; }
.po-pdf { width: 100%; height: calc(100vh - 100px); border: 1px solid var(--line); border-radius: 6px; background: #525659; display: block; }
.po-pdf-gone { display: flex; align-items: center; justify-content: center; background: #fff; height: 200px; }
.po-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.po-wait { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 30px; text-align: center; }
.po-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.po-card h2 { font-size: 12px; }
.po-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.po-datefmt { width: auto; font-size: 12px; padding: 3px 6px; }
.po-field { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid #f0f0f0; }
.po-field:first-of-type { border-top: 0; }
.po-field.key .po-label > span:first-child { font-weight: 700; color: var(--dark); }
.po-label { display: flex; flex-direction: column; font-size: 12px; color: var(--grey); line-height: 1.25; }
.po-sap { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #9a9a9a; }
.po-note { font-size: 10px; font-weight: 600; }
.po-note.ok { color: var(--green); }
.po-field textarea { font-family: inherit; resize: vertical; }
.btn.po-copy { min-width: 64px; }
.btn.po-copy.copied { background: var(--green-bg); border-color: #a6d0a9; color: var(--green); }
.po-addrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.po-addr pre { font: inherit; font-size: 13px; white-space: pre-wrap; margin: 4px 0; }
.po-addr .btn { margin-top: 4px; }
.po-tally { display: flex; gap: 6px; flex-wrap: wrap; }
.po-bulk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.po-bulk .muted { flex-basis: 100%; }
.po-table-wrap { overflow-x: auto; }
.po-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.po-lines th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--line); }
.po-lines td { padding: 8px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.po-lines tr.po-missing td { background: #fffaf9; }
.po-no { color: var(--grey); width: 40px; }
.po-matcell { min-width: 260px; width: 100%; }
.po-matrow { display: flex; gap: 4px; align-items: center; }
.po-matrow .btn.po-copy { min-width: 0; padding: 4px 7px; }
.po-mat { font-family: Consolas, monospace; font-weight: 600; }
.po-qty { width: 70px; text-align: right; }
.po-unit { width: 64px; }
.po-matmeta { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; font-size: 12px; }
.po-matname { min-width: 0; }
.po-onpo { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e4e4e4; font-size: 12px; }
.po-onpo-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #9a9a9a; flex-basis: 100%; }
.po-onpo .muted { font-size: 11px; }
.po-price { white-space: nowrap; text-align: right; }
.po-sugg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.po-chip { font: inherit; font-size: 11px; background: #f4f4f4; border: 1px solid var(--line); border-radius: 12px; padding: 2px 8px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-chip:hover { border-color: var(--red); color: var(--red); }
.po-lines-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.po-finish-row { display: flex; gap: 8px; align-items: center; margin: 8px 0 6px; }
.po-finish-row input { max-width: 220px; }
body.dragging .po-layout { outline: 3px dashed var(--red); outline-offset: -8px; }
@media (max-width: 1200px) {
  .po-split { grid-template-columns: 1fr; }
  .po-pdf-wrap { position: static; }
  .po-pdf { height: 70vh; }
}
@media (max-width: 760px) {
  .po-layout { grid-template-columns: 1fr; padding: 12px; }
  .po-side { position: static; max-height: none; }
  .po-field { grid-template-columns: 1fr auto; }
  .po-field .po-label { grid-column: 1 / -1; }
}

/* ---------- Project Tracker (projects.html) ---------- */
.pt-main { padding: 20px; max-width: 1700px; margin: 0 auto; }
.pt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pt-head h1 { margin: 0 0 4px; font-size: 22px; }
.pt-head p { margin: 0; }
.pt-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pt-tools input[type="search"] { width: 200px; }
.pt-tools select { width: auto; max-width: 170px; }
.pt-view { display: inline-flex; }
.pt-view .btn { border-radius: 0; }
.pt-view .btn:first-child { border-radius: 4px 0 0 4px; }
.pt-view .btn:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.pt-view .btn[aria-pressed="true"] { background: var(--dark); color: #fff; border-color: var(--dark); }
.pt-board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.pt-col { background: #ebebeb; border-radius: 8px; border-top: 4px solid var(--colc, #6f6f6e); display: flex; flex-direction: column; min-height: 200px; }
.pt-col-ideas { --colc: #6f6f6e; }
.pt-col-working { --colc: #1d6fb8; }
.pt-col-testing { --colc: #b36b00; }
.pt-col-finished { --colc: #2e7d32; }
.pt-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.pt-col-head h2 { font-size: 13px; color: var(--dark); }
.pt-count { background: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 1px 8px; color: var(--grey); }
.pt-overdue-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--red-dark); }
.pt-cards { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 10px; min-height: 60px; flex: 1; border-radius: 6px; transition: background .1s; }
.pt-cards.over { background: rgba(0, 0, 0, .05); }
.pt-empty { color: #9a9a9a; font-size: 12px; text-align: center; padding: 18px 0; border: 2px dashed #d4d4d4; border-radius: 6px; }
.pt-card { background: #fff; border-radius: 6px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: pointer; border-left: 3px solid transparent; display: flex; flex-direction: column; gap: 6px; }
.pt-card[draggable="true"] { cursor: grab; }
.pt-card:hover, .pt-card:focus-visible { box-shadow: 0 2px 8px rgba(0,0,0,.18); outline: none; }
.pt-card.high { border-left-color: var(--red); }
.pt-card.dragging { opacity: .4; }
.pt-placeholder { height: 46px; border: 2px dashed var(--colc, #999); border-radius: 6px; background: rgba(255,255,255,.6); }
.pt-card-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pt-label { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: hsl(var(--lh) 70% 92%); color: hsl(var(--lh) 55% 28%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-prio { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pt-prio.high { color: var(--red); }
.pt-prio.low { color: #9a9a9a; }
.pt-title { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.pt-desc { font-size: 12px; color: var(--grey); line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.pt-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.pt-due { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: #f1f1f1; color: #555; white-space: nowrap; }
.pt-due.soon { background: var(--amber-bg); color: var(--amber); }
.pt-due.overdue { background: var(--red-bg); color: var(--red-dark); }
.pt-due.done { background: var(--green-bg); color: var(--green); }
.pt-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #444; }
.pt-owner span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: hsl(var(--ah) 45% 42%); }
.pt-addcol { margin: 0 10px 10px; background: none; border: 0; text-align: left; font: inherit; font-size: 13px; color: var(--grey); padding: 6px 4px; border-radius: 4px; cursor: pointer; }
.pt-addcol:hover { background: rgba(0,0,0,.06); color: var(--dark); }
.pt-older { margin: 0 12px 8px; text-align: left; }
.pt-list { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.pt-none { padding: 20px; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pt-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.pt-row { cursor: pointer; }
.pt-row:hover td { background: #fafafa; }
.pt-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; color: #fff; background: var(--colc, #6f6f6e); white-space: nowrap; }
.pt-status-ideas { --colc: #6f6f6e; }
.pt-status-working { --colc: #1d6fb8; }
.pt-status-testing { --colc: #b36b00; }
.pt-status-finished { --colc: #2e7d32; }
.pt-box { width: min(640px, 96vw); }
.pt-box .pt-form label textarea { font-family: inherit; font-size: 13px; }
.pt-view-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pt-facts { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 10px 0 14px; font-size: 13px; }
.pt-facts dt { color: var(--grey); }
.pt-facts dd { margin: 0; }
.pt-desc-full { white-space: pre-line; font-size: 14px; line-height: 1.5; background: #fafafa; border-radius: 6px; padding: 10px 12px; overflow-wrap: anywhere; }
.pt-history { margin-top: 14px; }
.pt-history h4 { margin: 0 0 6px; }
.pt-history ul { list-style: none; padding: 0; margin: 0; font-size: 12px; max-height: 160px; overflow: auto; }
.pt-history li { padding: 4px 0; border-top: 1px solid #f0f0f0; }
.pt-delete { margin-right: auto; }
@media (max-width: 760px) {
  .pt-main { padding: 12px; }
  .pt-board { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; }
  .pt-col { scroll-snap-align: start; }
  .pt-tools input[type="search"] { width: 100%; }
}

/* ---------- Monthly Offers (flow.html) ---------- */
.fl-main { padding: 20px; max-width: 1600px; margin: 0 auto; }
.fl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fl-head h1 { margin: 0 0 4px; font-size: 22px; }
.fl-head p { margin: 0; }
.fl-inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.fl-inline select { width: auto; min-width: 200px; }
.fl-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.fl-tab { font: inherit; font-weight: 600; font-size: 13px; background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--grey); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.fl-tab:hover { color: var(--dark); }
.fl-tab.on { color: var(--dark); border-bottom-color: var(--red); }
.fl-banner { background: #e8f0fb; color: #1d4f91; border-radius: 6px; padding: 9px 12px; margin-bottom: 10px; font-size: 13px; }
.fl-banner.warn { background: var(--amber-bg); color: #6b4200; }
.fl-banner.ok { background: var(--green-bg); color: #1e5b22; }
.fl-empty { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; color: var(--grey); }
.fl-empty h2 { color: var(--dark); font-size: 16px; text-transform: none; margin-bottom: 6px; }
.fl-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.fl-card h2 { font-size: 13px; margin-bottom: 6px; }
.fl-scroll { overflow-x: auto; }
.fl-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fl-stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; min-width: 130px; font-size: 12px; color: var(--grey); }
.fl-stat b { display: block; font-size: 22px; color: var(--dark); }
.fl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fl-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fl-table td { padding: 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.fl-table tr.fl-missing td { background: #fffaf3; }
.fl-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.fl-actions a.btn { text-decoration: none; }
.fl-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.fl-sel { background: #eee; color: #555; }
.fl-pri { background: var(--amber-bg); color: var(--amber); }
.fl-rdy { background: #e8f0fb; color: #1d4f91; }
.fl-bld { background: #efe8fb; color: #5b2d91; }
.fl-done { background: var(--green-bg); color: var(--green); }
.fl-note { font-size: 12px; color: #6b4200; margin-top: 3px; white-space: pre-line; }
.fl-progress { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; counter-reset: s; }
.fl-progress li { font-size: 11px; color: #9a9a9a; padding: 3px 10px 3px 14px; background: #f0f0f0; position: relative; white-space: nowrap; }
.fl-progress li:first-child { border-radius: 10px 0 0 10px; padding-left: 10px; }
.fl-progress li:last-child { border-radius: 0 10px 10px 0; }
.fl-progress li + li { margin-left: 2px; }
.fl-progress li.done { background: var(--green-bg); color: var(--green); }
.fl-progress li.now { background: var(--dark); color: #fff; font-weight: 600; }
.fl-split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.fl-divlist { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; }
.fl-div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; font: inherit; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.fl-div .muted { grid-column: 1 / -1; font-size: 11px; }
.fl-div.on { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.fl-div-name { font-weight: 600; }
.fl-packmain { min-width: 0; }
.fl-packhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fl-packhead h2 { font-size: 18px; text-transform: none; letter-spacing: 0; }
.fl-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.fl-edit input { padding: 4px 6px; font-size: 13px; }
.fl-in-sec { min-width: 150px; }
.fl-in-art { width: 130px; font-family: Consolas, monospace; font-weight: 600; }
.fl-in-pack { width: 70px; }
.fl-in-note { min-width: 160px; }
.fl-name { display: flex; align-items: center; gap: 8px; min-width: 180px; font-size: 12px; }
.fl-rowbtns { white-space: nowrap; }
.fl-thumb { width: 34px; height: 34px; object-fit: contain; background: #fafafa; border-radius: 4px; flex: none; display: inline-block; }
.fl-art { font-family: Consolas, monospace; white-space: nowrap; }
.fl-warn { color: var(--amber); font-size: 11px; font-weight: 600; }
.fl-price { white-space: nowrap; font-weight: 600; }
.fl-price.none { color: #b0b0b0; font-weight: normal; }
.fl-num { width: 72px; text-align: right; padding: 4px 6px; }
.fl-pricing .fl-num.money { width: 80px; font-weight: 600; }
.fl-pname { max-width: 260px; }
.fl-box { width: min(640px, 96vw); }
.fl-box.wide { width: min(1000px, 96vw); }
.fl-box textarea { font-family: Consolas, monospace; font-size: 12px; }
.fl-check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-size: 13px; color: var(--dark); letter-spacing: 0; margin-top: 8px; }
.fl-check input { width: auto; }
.fl-picker { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; height: 55vh; margin-bottom: 10px; }
.fl-cats { overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.fl-catbtn { display: block; width: 100%; text-align: left; font: inherit; font-weight: 600; font-size: 13px; background: none; border: 0; padding: 5px 6px; cursor: pointer; border-radius: 4px; }
.fl-catbtn:hover { background: #f4f4f4; }
.fl-subs { padding: 0 0 6px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fl-catitems { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fl-catlist { overflow: auto; border: 1px solid var(--line); border-radius: 6px; flex: 1; min-height: 200px; max-height: 55vh; }
.fl-catitem { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #f2f2f2; margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--dark); flex-direction: row; cursor: pointer; }
.fl-catitem input[type="checkbox"] { width: auto; flex: none; }
.fl-catitem.in { opacity: .55; }
.fl-grow { flex: 1; min-width: 0; }
.fl-drop { padding-bottom: 6px; }
.fl-drophead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fl-drophead h2 { font-size: 15px; text-transform: none; letter-spacing: 0; margin: 0 0 2px; }
.fl-stock-tally { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-stock { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #eee; color: #666; white-space: nowrap; }
.fl-stock-ok { background: var(--green-bg); color: var(--green); }
.fl-stock-low { background: var(--amber-bg); color: var(--amber); }
.fl-stock-unavailable { background: var(--red-bg); color: var(--red-dark); }
select.fl-stock-sel { width: auto; font-weight: 600; font-size: 12px; }
.fl-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) {
  .fl-split { grid-template-columns: 1fr; }
  .fl-divlist { position: static; flex-direction: row; overflow-x: auto; }
  .fl-div { min-width: 170px; }
  .fl-picker { grid-template-columns: 1fr; height: auto; }
  .fl-grid4 { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   0.9 builder components (page planner, variants table editor, tile text picker, QR codes, line switch),
   carried over from the 0.9.2 builder, in the Würth colours
   ========================================================================== */
.brand .logo {
  height: 22px;
  width: auto;
  display: block;
}
.badges .vtoggle {
  font-weight: 700;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.vedit {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px 10px;
  background: #fafaf6;
}
.vedit-head {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.vedit-head .t {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey);
  font-family: var(--mono);
}
.vedit .vwarn {
  background: var(--amber-bg);
  color: var(--amber);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  margin-bottom: 6px;
}
.sheet {
  border-collapse: collapse;
  font-size: 12px;
}
.sheet th, .sheet td {
  padding: 0;
}
.sheet th:not(.ctl), .sheet td:not(.ctl) {
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
}
.sheet th:not(.ctl) + th:not(.ctl), .sheet td:not(.ctl) + td:not(.ctl) {
  border-left: 1px solid #d9d9d9;
}
.sheet th:not(.ctl) {
  border-bottom: 1.5px solid #1a1a1a;
  text-align: left;
  vertical-align: bottom;
}
.sheet th.h-art {
  font-weight: 800;
  color: #1a1a1a;
  padding: 5px 8px;
}
.sheet input {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 5px 8px;
  font-size: 12px;
  color: #1a1a1a;
}
.sheet input:focus {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  background: #fff8f8;
}
.sheet td input {
  width: 190px;
}
.sheet td input.art {
  font-weight: 800;
  width: 112px;
}
.sheet td input.art.miss {
  color: var(--red);
}
.sheet td input.num {
  color: #cc0000;
  font-weight: 800;
  width: 92px;
}
.sheet td input.qty {
  width: 66px;
}
.sheet .hin {
  width: 100%;
  min-width: 60px;
  font-weight: 400;
}
.sheet .hin.price {
  font-weight: 800;
}
.sheet .hwrap {
  display: flex;
  align-items: center;
}
.sheet .x {
  border: 0;
  background: none;
  color: var(--grey);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
}
.sheet .x:hover {
  color: var(--red);
}
.sheet .ctl {
  background: transparent;
  border: 0;
  white-space: nowrap;
  width: 1%;
}
.sheet td.mv {
  padding-right: 6px;
}
.sheet td.mv button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 3px;
  font-size: 9px;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  margin-right: 2px;
  color: var(--grey);
}
.sheet td.mv button:disabled {
  opacity: .3;
  cursor: default;
}
.sheet td.ra {
  padding-left: 10px;
}
.sheet td.ra .linklike {
  margin-right: 8px;
}
.sheet tr.newrow td:not(.ctl) {
  background: #fdfdf8;
  border-bottom: 1px dashed #c8c8c8;
}
.sheet tr.newrow input.art {
  font-weight: 600;
}
.sheet .newhint {
  color: var(--grey);
  font-size: 11px;
  padding: 0 8px;
}
.vfoot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.icon:disabled {
  opacity: .35;
  cursor: default;
}
.vedit-head .vrowimg {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.vedit-head .vrowimg input {
  width: auto;
}
.sheet .c-img {
  width: 44px;
  text-align: center;
  padding: 2px;
}
.sheet .c-img img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.vedit-head .vnote {
  font-size: 12px;
  color: var(--amber);
}
.pagemark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
  font: 700 11px var(--mono);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pagemark::before, .pagemark::after {
  content: '';
  flex: 1;
  border-top: 2px dashed var(--red);
}
.item.space {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-left: 4px dashed #c8c8c0;
  background: repeating-linear-gradient(45deg, #fafaf6, #fafaf6 8px, #f1f1ea 8px, #f1f1ea 16px);
}
.item.space .space-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--grey);
}
.item.space select {
  width: auto;
}
.item.space [data-act="del"] {
  margin-left: auto;
}
.poschip {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-bg);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.w-pos {
  flex: 0 1 170px;
}
#btn-pages.on {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.planner {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #e6e6de;
  display: flex;
  flex-direction: column;
}
.planner-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--dark);
  color: #fff;
  flex-wrap: wrap;
}
.planner-bar b {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-left: 4px solid var(--red);
  padding-left: 8px;
}
.planner-bar .muted {
  color: #cfcfcf;
  font-size: 12px;
}
.planner-status {
  margin-left: auto;
  font-size: 12px;
  color: #bbb;
}
.planner-zoom {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: #bbb;
  margin: 0;
}
.planner-zoom input {
  width: 110px;
  padding: 0;
}
.planner-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.planner-pages {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 22px;
  align-content: flex-start;
}
.planner-pages.focus {
  justify-content: center;
  padding: 16px 24px;
}
.pwrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plabel {
  font-size: 12px;
  color: var(--grey);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}
.pltitle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plabel button {
  font: inherit;
  font-size: 11px;
  border: 1px solid #c8c8c0;
  background: #fff;
  color: var(--dark);
  border-radius: 3px;
  padding: 1px 7px;
  cursor: pointer;
}
.plabel button:hover {
  border-color: var(--dark);
}
.pmode {
  display: inline-flex;
}
.pmode button {
  border-radius: 0;
}
.pmode button:first-child {
  border-radius: 3px 0 0 3px;
}
.pmode button:last-child {
  border-radius: 0 3px 3px 0;
  border-left: 0;
}
.pmode button.on {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.popen {
  font-weight: 700;
}
.plabel b {
  color: var(--dark);
  font-family: var(--mono);
}
.ppage {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  border-radius: 2px;
}
.ppage.drop-end {
  outline: 3px dashed var(--red);
  outline-offset: 4px;
}
.pfixed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: calc(var(--fs) * 1.6);
  text-align: center;
  padding: 10px;
}
.pspecial {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: #2b2b2b;
  color: #fff;
  cursor: grab;
  text-align: center;
  padding: 10px;
  user-select: none;
  touch-action: none;
}
.pspecial.drop-before {
  box-shadow: inset 6px 0 0 var(--red);
}
.pspecial.drop-after {
  box-shadow: inset -6px 0 0 var(--red);
}
.ptype {
  font-size: var(--fs);
  color: var(--red);
  font-family: var(--mono);
  text-transform: uppercase;
}
.ptitle {
  font-weight: 800;
  font-size: calc(var(--fs) * 1.4);
  text-transform: uppercase;
}
.phint {
  font-size: calc(var(--fs) * .9);
  color: #aaa;
}
.ptab {
  position: absolute;
  background: #3c3c3b;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.ptile {
  position: absolute;
  border: 1px solid #d8d8d8;
  background: #fff;
  display: flex;
  flex-direction: column;
  cursor: grab;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  border-radius: 2px;
}
.ptile:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red);
  z-index: 4;
  overflow: visible;
}
.ptile.dragging {
  opacity: .35;
}
.ptile.drop-before {
  box-shadow: inset 5px 0 0 var(--red), 0 0 0 1px var(--red);
}
.ptile.drop-after {
  box-shadow: inset -5px 0 0 var(--red), 0 0 0 1px var(--red);
}
.pimg {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
}
.pimg img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.pimg span {
  color: #bbb;
  font-size: var(--fs);
}
.pprice {
  position: absolute;
  left: 3px;
  top: 3px;
  background: #cc0000;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs);
  padding: 1px 4px;
  border-radius: 2px;
}
.pname {
  color: #cc0000;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs);
  line-height: 1.1;
  padding: 0 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.psub {
  color: #8e8e8d;
  font-size: calc(var(--fs) * .9);
  padding: 1px 4px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pchip {
  position: absolute;
  right: 3px;
  top: 3px;
  background: var(--red);
  color: #fff;
  font-size: calc(var(--fs) * .85);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--mono);
}
.ptools {
  position: absolute;
  left: -1px;
  bottom: 100%;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(8,8,8,.92);
  flex-wrap: nowrap;
  white-space: nowrap;
  z-index: 5;
  border-radius: 4px 4px 0 0;
}
.ptile:hover .ptools {
  display: flex;
}
.ptools button {
  border: 0;
  background: #3a3a3a;
  color: #fff;
  border-radius: 3px;
  font-size: 11px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  cursor: pointer;
  white-space: nowrap;
}
.ptools button:hover:not(:disabled) {
  background: #555;
}
.ptools button.on {
  background: var(--red);
  color: #fff;
}
.ptools button:disabled {
  opacity: .35;
  cursor: default;
}
.ptools span {
  color: #ddd;
  font-size: 11px;
  padding: 0 3px;
}
.pspace {
  background: repeating-linear-gradient(45deg, #fafaf6, #fafaf6 6px, #efefe6 6px, #efefe6 12px);
  border-style: dashed;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: var(--fs);
}
.pghost {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  opacity: .9;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.planner-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
}
.planner-nav .btn {
  background: #2a2a2a;
  color: #fff;
  border-color: #444;
}
.planner-nav .btn:disabled {
  opacity: .4;
}
.planner-real {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  color: #bbb;
  margin: 0;
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0;
}
.planner-real input {
  width: auto;
  margin: 0;
}
.planner-side {
  width: 400px;
  flex: 0 0 400px;
  background: var(--paper, #f0f0e8);
  border-left: 1px solid #c8c8c0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.planner-side[hidden] {
  display: none;
}
.planner-side-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid #d8d8d0;
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
  flex-wrap: wrap;
}
.planner-side-head b {
  font-family: var(--mono);
  font-size: 13px;
  margin-right: auto;
}
.planner-side-move {
  margin: 10px 12px 0;
  width: calc(100% - 24px);
  font-size: 12px;
}
.planner-side-move[hidden] {
  display: none;
}
.planner .planner-bar {
  flex-wrap: nowrap;
}
#planner-help {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-status, .planner-nav, .planner-real, .planner-zoom {
  white-space: nowrap;
  flex: 0 0 auto;
}
.planner-side-body {
  padding: 12px;
}
.planner-side-body .item {
  grid-template-columns: 56px minmax(0, 1fr);
  margin: 0;
}
.planner-side-body .item .handle, .planner-side-body .item [data-act="dup"], .planner-side-body .item [data-act="del"], .planner-side-body .item [data-act="merge"] {
  display: none;
}
.planner-side-body .item .thumb {
  width: 56px;
  height: 56px;
}
.ppage .pbg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.ppage.has-bg .ptab, .ppage.has-bg .pfixed {
  display: none;
}
.ppage.has-bg .pspecial {
  background: transparent;
}
.ppage.has-bg .pspecial > span {
  visibility: hidden;
}
.ppage.has-bg .pspecial:hover {
  background: rgba(8, 8, 8, .5);
}
.ppage.has-bg .pspecial:hover > span {
  visibility: visible;
}
.ppage.free {
  box-shadow: 0 2px 10px rgba(0,0,0,.15), 0 0 0 2px var(--red);
}
.ptile .part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.ptile.has-art {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}
.ptile.has-art .pimg, .ptile.has-art .pname, .ptile.has-art .psub {
  display: none;
}
.ppage.real .ptile:not(.has-art):not(.pspace) {
  opacity: .85;
}
.ptile.sel, .pspecial.sel {
  box-shadow: 0 0 0 2px var(--red);
  z-index: 3;
  overflow: visible;
}
.ptile.sel .ptools {
  display: flex;
}
.ptile.overlap {
  box-shadow: 0 0 0 2px #e00000;
}
.ptile.overlap.sel {
  box-shadow: 0 0 0 2px #e00000, 0 0 0 4px var(--red);
}
.pguide {
  position: absolute;
  background: #ff2fa8;
  pointer-events: none;
  z-index: 6;
}
.pguide.v {
  top: 0;
  bottom: 0;
  width: 1px;
}
.pguide.h {
  left: 0;
  right: 0;
  height: 1px;
}
.pghost.has-art {
  background: transparent;
}
.name-view .rename {
  font-size: 11px;
  font-weight: 400;
  margin-left: 8px;
}
[data-role="name-own"] {
  margin-top: 2px;
}
.item.qr {
  border-left-color: var(--dark);
}
.qrthumb {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qrthumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.qrthumb.empty {
  background: repeating-linear-gradient(45deg, #fafaf6, #fafaf6 6px, #efefe6 6px, #efefe6 12px);
  color: #aaa;
  font-size: 11px;
  font-weight: 700;
}
.qr-info {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--grey);
  margin-top: 6px;
}
.qr-info img {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
  background: #eee;
}
.qr-info a {
  color: var(--red);
  font-weight: 600;
  word-break: break-all;
}
.qr-info .bad {
  color: var(--amber);
  font-weight: 600;
}
.qr-pos {
  align-items: center;
  gap: 12px;
}
.spotpick {
  display: grid;
  grid-template-columns: repeat(3, 22px);
  grid-template-rows: repeat(3, 26px);
  gap: 3px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  flex: none;
}
.spotpick button {
  border: 1px solid #d6d6ce;
  background: #f6f6f0;
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
}
.spotpick button:hover {
  border-color: var(--dark);
  background: #fbe0e0;
}
.spotpick button.on {
  background: var(--dark);
  border-color: var(--dark);
  box-shadow: inset 0 0 0 3px var(--red);
}
.qr-pos-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 12px;
  color: var(--grey);
}
.qr-pos-text b {
  color: var(--dark);
  font-size: 12px;
}
.ptile.psticker {
  z-index: 2;
}
.ptile.psticker:hover, .ptile.psticker.sel {
  z-index: 5;
}
.pimg.pqr {
  justify-content: flex-start;
}
.pimg.pqr svg {
  height: 100%;
  width: auto;
  max-width: 100%;
}
.padd {
  font-weight: 700;
}
.qr-pos-text .btn.on {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.linebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
}
.linebar[hidden] {
  display: none;
}
.linebar .lbl {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
.lineswitch {
  display: inline-flex;
}
.lineswitch button {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--dark);
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
}
.lineswitch button + button {
  border-left: 0;
}
.lineswitch button:first-child {
  border-radius: 4px 0 0 4px;
}
.lineswitch button:last-child {
  border-radius: 0 4px 4px 0;
}
.lineswitch button:hover:not(:disabled) {
  border-color: #999;
}
.lineswitch button.on {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.lineswitch button:disabled {
  color: #b5b5b0;
  cursor: default;
}
.name-view .lineswitch.small {
  display: inline-flex;
  margin-top: 4px;
}
.lineswitch.small button {
  font-size: 11px;
  padding: 1px 8px;
}
[data-role="desc-own"] {
  margin-top: 2px;
}
.name-view .textbtn {
  font-size: 11px;
  margin-left: 10px;
  vertical-align: middle;
}
.name-view .textbtn.on {
  font-weight: 700;
}
.textpick {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fafaf7;
  font-size: 12px;
}
.textpick[hidden] {
  display: none;
}
.tp-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tp-head b {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
}
.tp-btns {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.tp-btns .btn[hidden] {
  display: none;
}
.tp-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--grey);
  margin: 10px 0 4px;
}
.tp-list label {
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--dark);
  margin: 0;
  padding: 2px 0;
  line-height: 1.35;
  cursor: pointer;
}
.tp-list input {
  width: auto;
  flex: none;
  margin: 2px 0 0;
}
.tp-specs .tp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 18px;
}

/* M²P mark in the tool headers */
.app .m2p { font-weight: 800; color: #fff; margin-right: 6px; letter-spacing: .02em; }
.app .m2p sup { font-size: .7em; vertical-align: super; line-height: 0; color: #fff; margin-left: 1px; }
/* KAM Generator: price columns in the variants table editor are hidden (the server strips them too) */
.kam-mode .sheet .pcol { display: none; }
.auth-brand { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.auth-brand .m2p-big { font-size: 30px; font-weight: 900; color: var(--dark); letter-spacing: .02em; line-height: 1; }
.auth-brand .m2p-big sup { font-size: .55em; color: var(--red); line-height: 0; }
.auth-brand span:last-child { color: var(--grey); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.vauto { font-size: 12px; color: var(--grey); background: #fafafa; border: 1px dashed var(--line); border-radius: 4px; padding: 5px 8px; margin: 0 0 6px; }
.vauto b { color: var(--dark); }
.btn.clear-all { background: #fff; color: var(--red); border: 2px solid var(--red); font-weight: 700; padding: 6px 14px; }
.btn.clear-all:hover { background: var(--red); color: #fff; }
.kam-panel .btn.file { white-space: normal; height: auto; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.kam-sheets { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.kam-sheets .kam-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.kam-sheets .kam-row .n { margin-left: auto; color: var(--grey); font-size: 12px; }