/* Раздел «Инструменты» (/tools/) */
.u3t { padding: 30px 0 60px; font-family: Manrope, sans-serif; color: #1d1d1f; }
.u3t a { color: #5a3fd6; }
.u3t-crumbs { font-size: 14px; color: #888; margin-bottom: 18px; }
.u3t-crumbs a { color: #888; text-decoration: none; }
.u3t h1 { font-size: 40px; line-height: 1.2; font-weight: 700; margin: 0 0 12px; }
.u3t-lead { font-size: 19px; line-height: 1.6; margin: 0 0 26px; max-width: 860px; }
.u3t-text { font-size: 18px; line-height: 1.7; max-width: 860px; margin-top: 48px; }
.u3t-text h2 { font-size: 28px; line-height: 1.25; font-weight: 700; margin: 40px 0 14px; }
.u3t-text h3 { font-size: 21px; line-height: 1.3; font-weight: 600; margin: 26px 0 10px; }
.u3t-text p { margin: 0 0 16px; }
.u3t-text ul, .u3t-text ol { margin: 0 0 18px 24px; padding: 0; }
.u3t-text ul { list-style: disc; } .u3t-text ol { list-style: decimal; }
.u3t-text li { margin: 6px 0; }
.u3t-text .u3d-table { overflow-x: auto; margin: 22px 0; }
.u3t-text table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.45; }
.u3t-text th, .u3t-text td { border: 1px solid #e3e0f0; padding: 10px 12px; text-align: left; vertical-align: top; }
.u3t-text th { background: #f5f3ff; font-weight: 600; }
.u3t-text code { background: #f5f3ff; border-radius: 6px; padding: 1px 6px; font-size: 15px; }
.u3t-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin: 10px 0 30px; }
.u3t-card { position: relative; display: flex; flex-direction: column; border: 1px solid #e6e2f5; border-radius: 20px; padding: 24px; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .2s, transform .2s; }
a.u3t-card:hover { box-shadow: 0 12px 32px rgba(90, 63, 214, .16); transform: translateY(-2px); border-color: #c9bff3; }
.u3t-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #5a3fd6; color: #fff; font: 700 22px Manrope, sans-serif; font-style: normal; margin-bottom: 16px; }
.u3t-card b { display: block; font-size: 21px; line-height: 1.3; margin-bottom: 8px; color: #1d1d1f; }
.u3t-card > span { font-size: 16px; line-height: 1.55; color: #555; }
.u3t-card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.u3t-card li { position: relative; padding-left: 22px; margin: 6px 0; font-size: 15px; line-height: 1.45; color: #333; }
.u3t-card li::before { content: "✓"; position: absolute; left: 0; color: #5a3fd6; font-weight: 700; }
.u3t-go { margin-top: auto; padding-top: 18px; font-style: normal; font-weight: 700; font-size: 16px; color: #5a3fd6; }
a.u3t-card .u3t-go { display: inline-block; }
.u3t-card--soon { background: #faf9ff; border-style: dashed; }
.u3t-card--soon .u3t-ico { background: #d9d2f5; color: #5a3fd6; }
.u3t-card--soon .u3t-go { color: #999; font-weight: 600; }
.u3t-group, .u3t-rel-h { font-size: 28px; line-height: 1.25; font-weight: 700; margin: 34px 0 8px; }
.u3t-group-p { font-size: 17px; line-height: 1.6; color: #555; margin: 0 0 14px; max-width: 860px; }
.u3t-rel-h { margin-top: 48px; }
.u3t-cards--rel { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 12px; }
.u3t-cards--rel .u3t-card { padding: 20px; }
.u3t-cards--rel .u3t-card b { font-size: 18px; }
.u3t-cards--rel .u3t-card > span { font-size: 15px; }
.u3t-all { font-size: 17px; font-weight: 700; margin: 0; }
.u3t-about { display: flow-root; }
.u3t-shot { float: right; width: 260px; margin: 0 0 16px 32px; }
.u3t-shot img { display: block; width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 760px) { .u3t-shot { float: none; width: 200px; margin: 0 auto 16px; } }
/* Калькулятор */
.u3c { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.u3c-form { min-width: 0; }
.u3c-mode { display: inline-flex; background: #f1eefc; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.u3c-tab { border: 0; background: none; padding: 10px 18px; border-radius: 9px; font: 600 15px Manrope, sans-serif; color: #5a3fd6; cursor: pointer; }
.u3c-tab.is-on { background: #5a3fd6; color: #fff; }
.u3c-drop { display: block; border: 2px dashed #c9bff3; border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; cursor: pointer; background: #faf9ff; text-align: center; transition: background .15s, border-color .15s; }
.u3c-drop.is-over, .u3c-drop:hover { background: #f1eefc; border-color: #5a3fd6; }
.u3c-drop b { display: block; font-size: 17px; margin-bottom: 4px; }
.u3c-drop span { font-size: 14px; color: #666; }
.u3c-drop em { display: block; font-style: normal; font-size: 15px; color: #2e7d32; margin-top: 6px; }
.u3c-drop em:empty { display: none; }
.u3c-stl { background: #faf9ff; border-radius: 14px; padding: 14px 16px; margin: -8px 0 18px; }
.u3c-card { border: 1px solid #e6e2f5; border-radius: 16px; padding: 16px 18px 6px; margin: 0 0 16px; background: #fff; min-width: 0; }
.u3c-card legend { font-weight: 700; font-size: 17px; padding: 0 6px; }
.u3c-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; align-items: flex-end; }
.u3c-row label { flex: 1 1 140px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: #555; min-width: 0; }
.u3c-row label.u3c-wide { flex-basis: 100%; }
.u3c input, .u3c select { width: 100%; box-sizing: border-box; border: 1px solid #d7d2ea; border-radius: 10px; padding: 9px 11px; font: 16px Manrope, sans-serif; color: #1d1d1f; background: #fff; }
.u3c input:focus, .u3c select:focus { outline: 2px solid #b8a9f3; border-color: #5a3fd6; }
.u3c-mat label:first-child { flex-basis: 200px; }
.u3c-del { flex: 0 0 38px; height: 41px; border: 1px solid #e3dff2; background: #fff; border-radius: 10px; font-size: 22px; color: #999; cursor: pointer; }
.u3c-del:hover { color: #d32f2f; border-color: #d32f2f; }
.u3c-link { border: 0; background: none; color: #5a3fd6; font: 600 15px Manrope, sans-serif; cursor: pointer; padding: 2px 0 12px; }
.u3c-hint { font-size: 14px; line-height: 1.5; color: #777; margin: 0 0 12px; }
.u3c .u3c-sla-only { display: none; }
.u3c.is-sla .u3c-sla-only { display: flex; }
.u3c.is-sla .u3c-fdm-only { display: none; }
.u3c-out { position: sticky; top: 90px; background: #1f1840; color: #fff; border-radius: 20px; padding: 22px; }
.u3c-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; }
.u3c-sum span { font-size: 15px; color: #c9c2ee; }
.u3c-sum b { font-size: 20px; white-space: nowrap; }
.u3c-sum div:first-child b { font-size: 32px; color: #fff; }
.u3c-sum b.is-neg { color: #ff8a80; }
.u3c-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.u3c-kpi div { background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 8px 10px; }
.u3c-kpi span { display: block; font-size: 12px; color: #b9b1e6; }
.u3c-kpi b { font-size: 16px; }
.u3c-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.u3c-tbl td { padding: 6px 0; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.u3c-tbl td:last-child { text-align: right; white-space: nowrap; padding-left: 10px; }
.u3c-tbl tr.u3c-total td { font-weight: 700; font-size: 15px; border-bottom-color: rgba(255, 255, 255, .25); }
.u3c-bar { display: block; height: 4px; border-radius: 2px; margin-top: 4px; background: #8c7bf0; }
.u3c-bar--t { background: #f2b705; } .u3c-bar--p { background: #66bb6a; } .u3c-bar--n { background: #ff8a80; }
.u3c-batch { font-size: 14px; color: #c9c2ee; margin: 12px 0 0; line-height: 1.5; }
.u3c-batch:empty { display: none; }
.u3c-warn { background: rgba(255, 138, 128, .15); color: #ffcdc8; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 12px 0 0; }
.u3c-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.u3c-btns button { flex: 1 1 140px; border: 0; border-radius: 10px; padding: 10px 12px; font: 600 14px Manrope, sans-serif; background: #fff; color: #1f1840; cursor: pointer; }
.u3c-btns button.u3c-ghost { background: transparent; color: #c9c2ee; border: 1px solid rgba(255, 255, 255, .25); }
.u3c-toast { margin: 10px 0 0; font-size: 14px; color: #a5d6a7; }
/* Калькулятор пластика (граммы ↔ метры) */
.u3c input[readonly] { background: #f6f5fb; color: #666; }
.u3f-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.u3f-chips button { border: 1px solid #d7d2ea; background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 14px Manrope, sans-serif; color: #5a3fd6; cursor: pointer; }
.u3f-chips button:hover { background: #f1eefc; border-color: #5a3fd6; }
.u3f .u3c-drop { margin: 4px 0 14px; padding: 14px 16px; }
.u3f-box { background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 12px 14px; margin: 12px 0 0; }
.u3f-box span { display: block; font-size: 13px; color: #c9c2ee; line-height: 1.45; }
.u3f-box b { display: block; font-size: 20px; margin: 4px 0; }
.u3f-box small { display: block; font-size: 13px; line-height: 1.5; color: #c9c2ee; }
.u3f-box.is-ok { background: rgba(102, 187, 106, .16); } .u3f-box.is-ok b { color: #a5d6a7; }
.u3f-box.is-no { background: rgba(255, 138, 128, .16); } .u3f-box.is-no b { color: #ffab9f; }
.u3f-meter { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); margin: 6px 0; overflow: hidden; }
.u3f-meter i { display: block; height: 100%; background: #8c7bf0; }
.u3f-all { margin-top: 36px; max-width: 980px; }
.u3f-all h2 { font-size: 26px; line-height: 1.25; font-weight: 700; margin: 0 0 14px; }
.u3f-all .u3d-table { overflow-x: auto; }
.u3f-all table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.4; }
.u3f-all th, .u3f-all td { border: 1px solid #e3e0f0; padding: 8px 10px; text-align: left; white-space: nowrap; }
.u3f-all th { background: #f5f3ff; font-weight: 600; }
.u3f-all tbody tr { cursor: pointer; }
.u3f-all tbody tr:hover td { background: #faf9ff; }
.u3f-all tbody tr.is-on td { background: #ece8ff; font-weight: 600; }
.u3f-all .u3c-hint { margin-top: 8px; }
/* Остаток пластика на катушке */
.u3s-meter { margin: 6px 0 2px; height: 8px; }
.u3s .u3c-kpi .u3c-batch { grid-column: 1 / -1; margin: 0; }
.u3s-search { display: block; margin: 0 0 12px; max-width: 520px; }
.u3s-more { margin: 12px 0 4px; border: 1px solid #c9bff3; background: #faf9ff; color: #5a3fd6; border-radius: 10px; padding: 10px 16px; font: 600 15px Manrope, sans-serif; cursor: pointer; }
.u3s-more:hover { background: #f1eefc; border-color: #5a3fd6; }
.u3s-base td small, .u3s-my td small { color: #777; font-size: 13px; }
.u3s-base td { white-space: nowrap; } .u3s-base td:last-child { white-space: normal; }
.u3s-my tbody tr, .u3s-my tfoot tr { cursor: default; }
.u3s-my td { white-space: normal; vertical-align: middle; }
.u3s-my input { width: 90px; box-sizing: border-box; border: 1px solid #d7d2ea; border-radius: 8px; padding: 6px 8px; font: 15px Manrope, sans-serif; }
.u3s-my-del { border: 1px solid #e3dff2; background: #fff; border-radius: 8px; width: 32px; height: 32px; font-size: 20px; color: #999; cursor: pointer; }
.u3s-my-del:hover { color: #d32f2f; border-color: #d32f2f; }
.u3s-mini { display: block; width: 70px; height: 6px; border-radius: 3px; background: #ece8ff; margin-bottom: 4px; overflow: hidden; }
.u3s-mini i { display: block; height: 100%; background: #5a3fd6; }
/* 3D QR-код */
.u3q-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.u3q-chips button { border: 1px solid #d7d2ea; background: #fff; border-radius: 999px; padding: 7px 13px; font: 600 14px Manrope, sans-serif; color: #5a3fd6; cursor: pointer; }
.u3q-chips button.is-on { background: #5a3fd6; border-color: #5a3fd6; color: #fff; }
.u3q-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 2px 0 14px; }
.u3q-tpls button { border: 1px solid #e3dff2; background: #faf9ff; border-radius: 12px; padding: 10px 10px; text-align: left; cursor: pointer; font-family: Manrope, sans-serif; }
.u3q-tpls button b { display: block; font-size: 14px; color: #1d1d1f; }
.u3q-tpls button span { display: block; font-size: 12px; color: #777; margin-top: 2px; }
.u3q-tpls button:hover, .u3q-tpls button.is-on { border-color: #5a3fd6; background: #f1eefc; }
.u3q .u3c-row label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3q input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3q input[type=color] { height: 41px; padding: 3px; cursor: pointer; }
.u3q textarea { width: 100%; box-sizing: border-box; border: 1px solid #d7d2ea; border-radius: 10px; padding: 9px 11px; font: 16px Manrope, sans-serif; resize: vertical; }
.u3q .u3q-only-right { display: none; }
.u3q.is-right .u3q-only-right { display: flex; }
.u3q.is-nolabel .u3q-only-label { display: none; }
.u3q-pal span { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.u3q-pal button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #d7d2ea; cursor: pointer; padding: 0; }
.u3q-out { padding: 16px; }
.u3q-view { margin-bottom: 10px; background: rgba(255, 255, 255, .08); }
.u3q-view .u3c-tab { color: #c9c2ee; }
.u3q-view .u3c-tab.is-on { background: #fff; color: #1f1840; }
.u3q-stage { background: #f4f2fb; border-radius: 14px; overflow: hidden; }
.u3q-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: none; }
.u3q-stage canvas#u3q-c3d { cursor: grab; }
.u3q-stage canvas[hidden] { display: none; }
.u3q-tip { font-size: 13px; color: #c9c2ee; margin: 8px 0 10px; line-height: 1.45; }
.u3q .u3c-tbl td:first-child, .u3l .u3c-tbl td:first-child, .u3b .u3c-tbl td:first-child, .u3v .u3c-tbl td:first-child, .u3k .u3c-tbl td:first-child, .u3m .u3c-tbl td:first-child, .u3p .u3c-tbl td:first-child, .u3n .u3c-tbl td:first-child, .u3o .u3c-tbl td:first-child, .u3a .u3c-tbl td:first-child, .u3g .u3c-tbl td:first-child, .u3s .u3c-tbl td:first-child, .u3w .u3c-tbl td:first-child, .u3f .u3c-tbl td:first-child, .u3e .u3c-tbl td:first-child, .u3h .u3c-tbl td:first-child, .u3x .u3c-tbl td:first-child, .u3y .u3c-tbl td:first-child, .u3r .u3c-tbl td:first-child, .u3z .u3c-tbl td:first-child, .u3u .u3c-tbl td:first-child { color: #c9c2ee; padding-right: 10px; white-space: nowrap; }
.u3q .u3c-tbl td:last-child, .u3l .u3c-tbl td:last-child, .u3b .u3c-tbl td:last-child, .u3v .u3c-tbl td:last-child, .u3k .u3c-tbl td:last-child, .u3m .u3c-tbl td:last-child, .u3p .u3c-tbl td:last-child, .u3n .u3c-tbl td:last-child, .u3o .u3c-tbl td:last-child, .u3a .u3c-tbl td:last-child, .u3g .u3c-tbl td:last-child, .u3s .u3c-tbl td:last-child, .u3w .u3c-tbl td:last-child, .u3f .u3c-tbl td:last-child, .u3e .u3c-tbl td:last-child, .u3h .u3c-tbl td:last-child, .u3x .u3c-tbl td:last-child, .u3y .u3c-tbl td:last-child, .u3r .u3c-tbl td:last-child, .u3z .u3c-tbl td:last-child, .u3u .u3c-tbl td:last-child { text-align: left; white-space: normal; }
/* Литофания */
.u3l .u3c-row label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3l input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3l input[type=range] { padding: 0; border: 0; height: 30px; accent-color: #5a3fd6; background: none; }
.u3l .u3c-link { padding: 0 0 10px; }
.u3l .u3l-for-d, .u3l .u3l-for-a, .u3l .u3l-for-lamp, .u3l .u3l-for-stand, .u3l .u3l-for-hole { display: none; }
.u3l[data-shape=cyl] .u3l-for-d, .u3l[data-shape=lamp] .u3l-for-d, .u3l[data-shape=curved] .u3l-for-a, .u3l[data-shape=lamp] .u3l-for-lamp, .u3l[data-shape=flat] .u3l-for-stand,
.u3l[data-shape=flat] .u3l-for-hole, .u3l[data-shape=circle] .u3l-for-hole, .u3l[data-shape=heart] .u3l-for-hole { display: flex; }
.u3l[data-shape=lamp] p.u3l-for-lamp { display: block; }
.u3l[data-shape=cyl] .u3l-for-w, .u3l[data-shape=lamp] .u3l-for-w { display: none; }
.u3l[data-shape=circle] label:has(> #u3l-h) { display: none; }
.u3l-stage { background: #17112f; }
.u3l-stage canvas#u3l-c3d { background: #f4f2fb; cursor: grab; }
@media (max-width: 1020px) {
  .u3c { grid-template-columns: 1fr; }
  .u3c-out { position: static; }
  .u3q .u3q-out, .u3l .u3l-out { order: -1; }
}
@media (max-width: 600px) {
  .u3t h1 { font-size: 28px; }
  .u3t-lead, .u3t-text { font-size: 17px; }
  .u3t-group, .u3t-rel-h { font-size: 23px; }
  .u3c-card { padding: 12px 12px 4px; }
  .u3c-row label { flex-basis: 120px; }
  .u3c-sum div:first-child b { font-size: 26px; }
}

/* === Инструменты во весь экран: слева настройки (своя прокрутка, блоки сворачиваются), справа результат/превью === */
.u3t-app { padding: 12px 24px 24px; box-sizing: border-box; }
.u3t-bar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 12px; }
.u3t-app h1 { font-size: 26px; line-height: 1.2; margin: 0; }
.u3t-app .u3t-crumbs { margin: 0; }
.u3t-app .u3c { grid-template-columns: 420px minmax(0, 1fr); gap: 18px; height: calc(100vh - var(--u3-hdr, 90px) - 76px); min-height: 560px; align-items: stretch; }
.u3t-app .u3c-form { overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 2px 0; scrollbar-width: thin; }
.u3t-app .u3c-card { padding: 12px 14px 4px; margin-bottom: 12px; }
.u3t-app .u3c-card > legend { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.u3t-app .u3c-card > legend::after { content: "▾"; font-size: 13px; color: #8c7bf0; transition: transform .15s; }
.u3t-app .u3c-card.is-closed { padding-top: 4px; padding-bottom: 4px; }
.u3t-app .u3c-card.is-closed > legend::after { transform: rotate(-90deg); }
.u3t-app .u3c-card.is-closed > :not(legend) { display: none !important; }
.u3t-app .u3c-out { position: relative; top: auto; height: 100%; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column; padding: 24px 28px; scrollbar-width: thin; }
.u3t-app .u3c-btns button { flex: 1 1 170px; }
/* калькуляторы: результат — главный экран */
.u3t-app .u3c-out:not(.u3q-out) .u3c-sum b { font-size: 26px; }
.u3t-app .u3c-out:not(.u3q-out) .u3c-sum div:first-child b { font-size: 46px; }
.u3t-app .u3c-out:not(.u3q-out) .u3c-sum span { font-size: 17px; }
.u3t-app .u3c-kpi { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.u3t-app .u3c-kpi b { font-size: 19px; }
.u3t-app .u3c-out:not(.u3q-out) .u3c-tbl { font-size: 16px; }
/* превью QR и литофании занимает всё свободное место */
.u3t-app .u3q-out { padding: 16px; }
.u3t-app .u3q-stage { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.u3t-app .u3q-stage canvas { aspect-ratio: auto; }
.u3t-app .u3q-out .u3c-tbl { font-size: 14px; }
.u3t-app .u3f-all { max-width: none; }
.u3t-about { padding-top: 10px; }
.u3t-about .u3t-text { margin-top: 0; }
@media (max-width: 1020px) {
  .u3t-app { padding: 10px 14px 16px; }
  .u3t-app h1 { font-size: 22px; }
  .u3t-app .u3c { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .u3t-app .u3c-form { overflow: visible; padding-right: 0; }
  .u3t-app .u3c-out { height: auto; overflow: visible; padding: 18px; }
  .u3t-app .u3q-stage { flex: none; aspect-ratio: 1; }
}
.u3t-app { width: 100%; }
/* превью слева во всю высоту, сводка и кнопки — колонкой справа */
@media (min-width: 1021px) {
  .u3t-app .u3q-out { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); gap: 12px 18px; overflow: hidden; }
  .u3t-app .u3q-view { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
  .u3t-app .u3q-stage { grid-column: 1; grid-row: 2; }
  .u3t-app .u3q-side { grid-column: 2; grid-row: 1 / span 2; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; }
  .u3t-app .u3q-side .u3q-tip { margin-top: 2px; }
  .u3t-app .u3q-side .u3c-btns { margin-top: auto; padding-top: 12px; }
  .u3t-app .u3q-side .u3c-btns button { flex: 1 1 100%; }
  .u3t-app .u3q-side .u3c-tbl td { display: block; padding: 2px 0; border: 0; }
  .u3t-app .u3q-side .u3c-tbl tr { display: block; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}
@media (min-width: 1021px) and (max-width: 1280px) {
  .u3t-app .u3c { grid-template-columns: 360px minmax(0, 1fr); }
  .u3t-app .u3q-out { grid-template-columns: minmax(0, 1fr) 250px; }
}
/* справочные таблицы внутри тёмной панели результата */
.u3c-out .u3f-all { margin-top: 28px; color: #fff; max-width: none; }
.u3c-out .u3f-all h2 { font-size: 20px; color: #fff; margin: 0 0 12px; }
.u3c-out .u3f-all table { font-size: 15px; }
.u3c-out .u3f-all th, .u3c-out .u3f-all td { border-color: rgba(255, 255, 255, .12); }
.u3c-out .u3f-all th { background: rgba(255, 255, 255, .08); color: #fff; }
.u3c-out .u3f-all tbody tr:hover td { background: rgba(255, 255, 255, .06); }
.u3c-out .u3f-all tbody tr.is-on td { background: rgba(140, 123, 240, .32); }
.u3c-out .u3f-all td small, .u3c-out .u3c-hint { color: #b9b1e6; }
.u3c-out .u3c-hint a { color: #c9bff3; }
.u3c-out .u3s-more { background: transparent; color: #e0dbff; border-color: rgba(255, 255, 255, .3); }
.u3c-out .u3s-more:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.u3c-out .u3s-mini { background: rgba(255, 255, 255, .15); }
.u3c-out .u3s-mini i { background: #8c7bf0; }
.u3c-out .u3s-my-del { background: transparent; color: #c9c2ee; border-color: rgba(255, 255, 255, .25); }
.u3c-out { min-width: 0; }

/* === QR-код: шаги, галерея, подсказки, одна главная кнопка === */
.u3t-trust { font-size: 13px; color: #2e7d32; font-weight: 600; }
.u3q-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #5a3fd6; color: #fff; font: 700 13px Manrope, sans-serif; margin-right: 4px; flex: none; }
.u3q-step > legend { font-size: 18px; }
.u3q-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; margin: 2px 0 14px; }
.u3q-gallery button { border: 1px solid #e3dff2; background: #f6f4fd; border-radius: 12px; padding: 6px 6px 8px; cursor: pointer; font-family: Manrope, sans-serif; transition: border-color .15s, box-shadow .15s; }
.u3q-gallery canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.u3q-gallery b { display: block; font-size: 12px; line-height: 1.3; color: #1d1d1f; margin-top: 4px; }
.u3q-gallery button:hover { border-color: #b8a9f3; }
.u3q-gallery button.is-on { border: 2px solid #5a3fd6; padding: 5px 5px 7px; box-shadow: 0 4px 14px rgba(90, 63, 214, .18); }
.u3q .u3c-row label { position: relative; }
.u3-q { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: #ece8ff; color: #5a3fd6; font: 700 11px Manrope, sans-serif; cursor: help; }
.u3-q:hover::after, .u3-q:focus::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); width: 250px; background: #1f1840; color: #fff; font: 400 13px/1.45 Manrope, sans-serif; padding: 9px 11px; border-radius: 9px; z-index: 60; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); text-align: left; }
.u3q-w { background: #fff4e5; color: #8a4b00; border-radius: 9px; padding: 8px 10px; font-size: 13px; line-height: 1.45; margin: -2px 0 12px; }
.u3q-pal-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; color: #555; }
.u3q-pal-row .u3q-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.u3q-pal button.is-on { outline: 2px solid #5a3fd6; outline-offset: 2px; }
.u3q-more h4 { font: 700 13px Manrope, sans-serif; color: #5a3fd6; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 8px; }
.u3q-more h4:first-of-type { margin-top: 4px; }
.u3q-dl { position: relative; }
.u3q-dl-h { display: flex; align-items: center; gap: 6px; font: 700 16px Manrope, sans-serif; color: #fff; margin: 0 0 10px; }
.u3q-main { display: block; width: 100%; border: 0; border-radius: 12px; padding: 14px 16px; background: linear-gradient(180deg, #8a6dff, #5a3fd6); color: #fff; font: 700 18px Manrope, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(90, 63, 214, .45); }
.u3q-main small { display: block; font: 500 12px Manrope, sans-serif; opacity: .85; margin-top: 3px; }
.u3q-main:hover { filter: brightness(1.08); }
.u3q-more-fmt { position: relative; margin-top: 8px; }
.u3q-fmt-btn { width: 100%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #e0dbff; border-radius: 10px; padding: 9px 12px; font: 600 14px Manrope, sans-serif; cursor: pointer; }
.u3q-fmt-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); padding: 6px; z-index: 70; }
.u3q-fmt-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 8px; font: 600 14px Manrope, sans-serif; color: #1f1840; cursor: pointer; }
.u3q-fmt-menu button:hover { background: #f1eefc; }
.u3q-sum { font-size: 13px; color: #c9c2ee; margin: 10px 0 0; }
.u3t-app .u3q-side .u3q-dl { order: -1; margin-bottom: 14px; }
.u3t-app .u3q-side .u3c-btns { display: none; }
/* компактная плашка cookie на странице QR, чтобы не закрывала инструмент */
body:has(.u3q) #clearfy-cookie { right: 16px !important; left: auto !important; bottom: 16px !important; width: auto !important; max-width: 330px; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .2); padding: 10px 12px !important; }
body:has(.u3q) #clearfy-cookie .clearfy-cookie-container { display: flex; align-items: center; gap: 10px; font-size: 12px !important; line-height: 1.35; text-align: left; }
@media (max-width: 1020px) {
  /* телефон: превью закреплено сверху, кнопка «Скачать» — внизу экрана */
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-out { position: sticky; top: 0; z-index: 30; order: -1; padding: 8px 10px 10px; margin: 0 -14px; border-radius: 0 0 16px 16px; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-view { margin-bottom: 6px; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-stage { aspect-ratio: auto; height: 36vh; flex: none; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-side .u3q-tip, .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-side .u3c-tbl, .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-side .u3c-warn { display: none; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-dl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; margin: 0; background: #1f1840; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-dl-h, .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-main small { display: none; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-main { padding: 12px; font-size: 16px; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-more-fmt { margin: 0; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-fmt-btn { width: auto; padding: 12px; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-fmt-menu { top: auto; bottom: calc(100% + 8px); left: auto; width: 220px; }
  .u3t-app :is(.u3q, .u3l, .u3b, .u3v, .u3k, .u3m, .u3p, .u3n, .u3o, .u3a, .u3g, .u3s, .u3w, .u3f, .u3e, .u3h, .u3x, .u3y, .u3r, .u3z, .u3u) .u3q-sum { grid-column: 1 / -1; margin: 0; font-size: 12px; }
  body:has(.u3q), body:has(.u3l), body:has(.u3b), body:has(.u3v), body:has(.u3k), body:has(.u3m), body:has(.u3p), body:has(.u3n), body:has(.u3o), body:has(.u3a), body:has(.u3g), body:has(.u3s), body:has(.u3w), body:has(.u3f), body:has(.u3e), body:has(.u3h), body:has(.u3x), body:has(.u3y), body:has(.u3r), body:has(.u3z), body:has(.u3u) { padding-bottom: 100px; }
  html:has(.u3q), body:has(.u3q) { overflow-x: clip; overflow-y: visible; } /* overflow-x:hidden у body ломает закрепление превью */
  body:has(.u3q) #clearfy-cookie, body:has(.u3l) #clearfy-cookie, body:has(.u3b) #clearfy-cookie, body:has(.u3v) #clearfy-cookie, body:has(.u3k) #clearfy-cookie, body:has(.u3m) #clearfy-cookie, body:has(.u3p) #clearfy-cookie, body:has(.u3n) #clearfy-cookie, body:has(.u3o) #clearfy-cookie, body:has(.u3a) #clearfy-cookie, body:has(.u3g) #clearfy-cookie, body:has(.u3s) #clearfy-cookie, body:has(.u3w) #clearfy-cookie, body:has(.u3f) #clearfy-cookie, body:has(.u3e) #clearfy-cookie, body:has(.u3h) #clearfy-cookie, body:has(.u3x) #clearfy-cookie, body:has(.u3y) #clearfy-cookie, body:has(.u3r) #clearfy-cookie, body:has(.u3z) #clearfy-cookie, body:has(.u3u) #clearfy-cookie { bottom: 100px !important; left: 10px !important; right: 10px !important; max-width: none; }
}

/* === Общие элементы удобного интерфейса для всех инструментов === */
.u3t-app .u3c-row label { position: relative; }
.u3-actions { display: flex; gap: 8px; margin-top: 18px; align-items: stretch; }
.u3-main { flex: 1; border: 0; border-radius: 12px; padding: 14px 16px; background: linear-gradient(180deg, #8a6dff, #5a3fd6); color: #fff; font: 700 17px Manrope, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(90, 63, 214, .45); }
.u3-main:hover { filter: brightness(1.08); }
.u3-main small { display: block; font: 500 12px Manrope, sans-serif; opacity: .85; margin-top: 3px; }
.u3-menu { position: relative; display: flex; }
.u3-menu-btn { border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #e0dbff; border-radius: 12px; padding: 0 16px; font: 600 14px Manrope, sans-serif; cursor: pointer; }
.u3-menu-list { position: absolute; right: 0; bottom: calc(100% + 6px); width: 250px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); padding: 6px; z-index: 70; }
.u3-menu-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 8px; font: 600 14px Manrope, sans-serif; color: #1f1840; cursor: pointer; }
.u3-menu-list button:hover { background: #f1eefc; }
.u3-mbar { display: none; }
body:has(.u3t-app) #clearfy-cookie { right: 16px !important; left: auto !important; bottom: 16px !important; width: auto !important; max-width: 330px; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .2); padding: 10px 12px !important; }
body:has(.u3t-app) #clearfy-cookie .clearfy-cookie-container { display: flex; align-items: center; gap: 10px; font-size: 12px !important; line-height: 1.35; text-align: left; }
/* калькулятор стоимости: «для себя» — только себестоимость */
.u3cc.is-self .u3cc-sale-only, .u3cc:not(.is-self) .u3cc-self-only { display: none !important; }
.u3t-app .u3cc.is-self .u3c-out .u3c-sum div:nth-child(2) span { font-size: 17px; }
.u3t-app .u3cc.is-self .u3c-out .u3c-sum div:nth-child(2) b { font-size: 46px; }
.u3cc-goal { margin-bottom: 10px; }
#u3c-pnote { margin-top: -2px; }
@media (max-width: 1020px) {
  html:has(.u3t-app), body:has(.u3t-app) { overflow-x: clip; overflow-y: visible; }
  /* итог закреплён внизу экрана у калькуляторов */
  .u3t-app .u3-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; align-items: baseline; gap: 10px; background: #1f1840; color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .u3t-app .u3-mbar span { font-size: 13px; color: #c9c2ee; }
  .u3t-app .u3-mbar b { font-size: 24px; }
  .u3t-app .u3-mbar a { margin-left: auto; color: #c9bff3; font-size: 14px; text-decoration: none; }
  body:has(.u3-mbar) { padding-bottom: 76px; }
  body:has(.u3-mbar) #clearfy-cookie { bottom: 80px !important; left: 10px !important; right: 10px !important; max-width: none; }
}
.u3l-gallery { grid-template-columns: repeat(3, 1fr); }
.u3l-gallery canvas { background: #f6f4fd; }
.u3q-fmt-menu.u3-menu-list { top: calc(100% + 6px); bottom: auto; left: 0; right: 0; width: auto; }
.u3s-big { font-size: 22px !important; font-weight: 700; }
@media (max-width: 1020px) {
  .u3t-app .u3l .u3q-fmt-menu.u3-menu-list { top: auto; bottom: calc(100% + 8px); left: auto; width: 240px; }
}
.u3q-more-fmt.u3-menu { display: block; }
.u3q-fmt-btn.u3-menu-btn { width: 100%; padding: 9px 12px; border-radius: 10px; }
@media (max-width: 1020px) { .u3t-app .u3l .u3q-fmt-btn.u3-menu-btn { width: auto; padding: 12px; } }
/* генератор коробок */
.u3b .u3b-for-box, .u3b .u3b-for-bin, .u3b .u3b-for-base { display: none; }
.u3b[data-kind=box] .u3b-for-box, .u3b[data-kind=bin] .u3b-for-bin, .u3b[data-kind=base] .u3b-for-base { display: block; }
.u3b:not(.is-fit) .u3b-fit, .u3b.is-fit .u3b-nofit { display: none !important; }
.u3b:not(.has-lid) #u3b-stl2 { display: none; }
.u3b-stage { background: #f4f2fb; }
.u3b-stage canvas { cursor: grab; }
.u3b .u3l-gallery b { font-size: 11.5px; }

/* --- генератор ваз --- */
.u3v-stage { background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3v-stage canvas { cursor: grab; }
.u3v .u3l-gallery b { font-size: 11.5px; }
.u3v label:has(output) { position: relative; }
.u3v label output { position: absolute; right: 0; top: 0; font-weight: 600; color: #5b45d6; font-size: 13px; }
.u3v label:has(.u3-q) output { right: 26px; }
.u3v input[type=range] { accent-color: #6c4cf1; width: 100%; }
.u3v input[type=range]:disabled { opacity: .35; }
.u3v .u3v-dice { margin-top: 10px; }

/* --- брелок с именем --- */
.u3k-stage { background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3k-stage canvas { cursor: grab; }
.u3k .u3l-gallery b { font-size: 11.5px; }
.u3k-text { position: relative; }
.u3k-text textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.35; color: #2a2150; padding: 10px 84px 10px 12px; border: 1px solid #d9d4f0; border-radius: 10px; resize: none; min-height: 64px; }
.u3k-text textarea:focus { outline: 2px solid #6c4cf1; outline-offset: 0; border-color: transparent; }
.u3k-sym { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.u3k-sym button { width: 32px; height: 32px; border: 1px solid #e3def7; border-radius: 8px; background: #f6f4fd; color: #5b45d6; font-size: 16px; cursor: pointer; }
.u3k-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.u3k-fonts button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 1px solid #e6e1f6; border-radius: 12px; background: #faf9fe; cursor: pointer; min-width: 0; }
.u3k-fonts button span { font-size: 22px; line-height: 1.25; color: #2a2150; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.u3k-fonts button b { font-size: 11px; font-weight: 500; color: #8a83a8; }
.u3k-fonts button.is-on { border-color: #6c4cf1; box-shadow: 0 0 0 1px #6c4cf1 inset; background: #f3f0ff; }
.u3k-colors input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3k[data-style=letters] :is(.u3k-for-rel, .u3k-for-c2, .u3k-for-h, .u3k-for-d) { display: none; }
.u3k[data-rel=raised] .u3k-for-d, .u3k:is([data-rel=flush], [data-rel=engraved]) .u3k-for-h, .u3k[data-rel=engraved] .u3k-for-c2 { display: none; }
.u3k:not([data-style=outline]):not([data-style=letters]) .u3k-for-off { display: none; }
.u3k:not(.has-text) #u3k-stl2 { display: none; }

/* --- модель района по OpenStreetMap --- */
.u3m-stage { position: relative; background: #efece4; }
.u3m-stage canvas { cursor: grab; touch-action: none; }
.u3m-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 16px; background: rgba(31, 24, 64, .85); color: #fff; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.u3m-search { display: flex; gap: 8px; }
.u3m-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #d9d4f0; border-radius: 10px; font: inherit; font-size: 16px; }
.u3m-go { padding: 10px 16px; border: 0; border-radius: 10px; background: #6c4cf1; color: #fff; font-weight: 600; cursor: pointer; }
.u3m-res { display: grid; gap: 4px; margin-top: 8px; }
.u3m-res button { text-align: left; padding: 8px 10px; border: 1px solid #e6e1f6; border-radius: 8px; background: #faf9fe; cursor: pointer; font-size: 13px; line-height: 1.35; }
.u3m-res button:hover { border-color: #6c4cf1; }
.u3m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.u3m-chips button { padding: 6px 12px; border: 1px solid #e3def7; border-radius: 999px; background: #f6f4fd; color: #4b3bb0; font-size: 13px; cursor: pointer; }
.u3m-chips button:hover { border-color: #6c4cf1; }
.u3m label:has(output) { position: relative; }
.u3m label output { position: absolute; right: 0; top: 0; font-weight: 600; color: #5b45d6; font-size: 13px; }
.u3m label:has(.u3-q) output { right: 26px; }
.u3m input[type=range] { accent-color: #6c4cf1; width: 100%; }
.u3m-layers { flex-wrap: wrap; gap: 6px 16px; }
.u3m-layers label { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 6px; }
.u3m-attr { margin: 8px 0 0; font-size: 11.5px; color: #a79fd0; }
.u3m-attr a { color: inherit; }

/* --- формочки для печенья --- */
.u3p-stage { background: radial-gradient(circle at 50% 40%, #fffaf2, #f3ead9); }
.u3p-stage canvas { cursor: grab; }
.u3p .u3p-src { margin-bottom: 12px; }
.u3p .u3p-for-shape, .u3p .u3p-for-image, .u3p .u3p-for-draw { display: none; }
.u3p[data-src=shape] .u3p-for-shape, .u3p[data-src=image] .u3p-for-image, .u3p[data-src=draw] .u3p-for-draw { display: block; }
.u3p-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.u3p-shapes button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 1px solid #e6e1f6; border-radius: 12px; background: #faf9fe; cursor: pointer; min-width: 0; }
.u3p-shapes canvas { width: 100%; max-width: 76px; height: auto; aspect-ratio: 1; }
.u3p-shapes b { font-size: 11.5px; font-weight: 500; color: #4b4470; }
.u3p-shapes button.is-on { border-color: #6c4cf1; box-shadow: 0 0 0 1px #6c4cf1 inset; background: #f3f0ff; }
.u3p-pad { border: 1px dashed #c9c1ee; border-radius: 12px; overflow: hidden; background: #fff; max-width: 420px; margin: 0 auto; }
.u3p-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: none; cursor: crosshair; }
.u3p-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.u3p-tools button { padding: 7px 12px; border: 1px solid #e3def7; border-radius: 8px; background: #f6f4fd; color: #4b3bb0; font-size: 13px; cursor: pointer; }
.u3p-tools button.is-on { background: #6c4cf1; color: #fff; border-color: #6c4cf1; }
.u3p-tools label { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.u3p-tools input[type=range], .u3p input[type=range] { accent-color: #6c4cf1; width: 100%; }
.u3p .u3c-drop.is-over { border-color: #6c4cf1; background: #f3f0ff; }

/* --- неоновая вывеска --- */
.u3n-stage { position: relative; background: #0e0c13; }
.u3n-stage canvas { cursor: grab; }
.u3n .u3n-src { margin-bottom: 12px; flex-wrap: wrap; }
.u3n .u3n-for-text, .u3n .u3n-for-shape, .u3n .u3n-for-image, .u3n .u3n-for-draw { display: none; }
.u3n[data-src=text] .u3n-for-text, .u3n[data-src=shape] .u3n-for-shape, .u3n[data-src=image] .u3n-for-image, .u3n[data-src=draw] .u3n-for-draw { display: block; }
.u3n textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.35; color: #2a2150; padding: 10px 12px; border: 1px solid #d9d4f0; border-radius: 10px; resize: none; min-height: 64px; }
.u3n textarea:focus { outline: 2px solid #6c4cf1; outline-offset: 0; border-color: transparent; }
.u3n input[type=range] { accent-color: #6c4cf1; width: 100%; }
.u3n input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3n .u3c-drop.is-over { border-color: #6c4cf1; background: #f3f0ff; }

/* --- формы для отливки --- */
.u3o-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3o-stage canvas { cursor: grab; }
.u3o .u3o-for-split, .u3o .u3o-for-sil { display: none; }
.u3o[data-type=split] .u3o-for-split, .u3o[data-type=sil] .u3o-for-sil { display: block; }
.u3o .u3c-row.u3o-for-split, .u3o .u3c-row.u3o-for-sil { display: none; }
.u3o[data-type=split] .u3c-row.u3o-for-split, .u3o[data-type=sil] .u3c-row.u3o-for-sil { display: flex; }
.u3o .u3o-type { margin-bottom: 8px; flex-wrap: wrap; }
.u3o-samples span { font-size: 13px; color: #8a83a8; align-self: center; }
.u3o-samples button.is-on { background: #6c4cf1; color: #fff; border-color: #6c4cf1; }
.u3o-rot { display: flex; gap: 6px; }
.u3o-rot button { flex: 1; padding: 9px 6px; border: 1px solid #d9d4f0; border-radius: 8px; background: #faf9fe; color: #4b3bb0; font-weight: 600; cursor: pointer; }
.u3o-rot button:hover { border-color: #6c4cf1; }
.u3o .u3c-drop.is-over { border-color: #6c4cf1; background: #f3f0ff; }

/* --- конструктор абажуров --- */
.u3a-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3a-stage canvas { cursor: grab; }
.u3a .u3l-gallery b { font-size: 11.5px; }
.u3a .u3l-gallery canvas { background: #16121c; border-radius: 8px; }
.u3a label:has(output) { position: relative; }
.u3a label output { position: absolute; right: 0; top: 0; font-weight: 600; color: #5b45d6; font-size: 13px; }
.u3a label:has(.u3-q) output { right: 26px; }
.u3a input[type=range] { accent-color: #6c4cf1; width: 100%; }
.u3a input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }

/* --- адресник --- */
.u3g-stage { background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3g-stage canvas { cursor: grab; }
.u3g .u3g-shapes { grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.u3g .u3g-shapes canvas { max-width: 56px; }
.u3g .u3g-shapes b { font-size: 10.5px; }
.u3g .u3g-fonts { margin-top: 4px; }
.u3g[data-free="0"] .u3g-for-free { display: none; }
.u3g[data-rel=raised] .u3g-for-d, .u3g:is([data-rel=flush], [data-rel=engraved]) .u3g-for-h { display: none; }
.u3g input[type=text] { width: 100%; box-sizing: border-box; }
.u3g input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
@media (max-width: 600px) { .u3g .u3g-shapes { grid-template-columns: repeat(4, 1fr); } }
/* Таблички для рассады (u3s) */
.u3s-stage { background: radial-gradient(circle at 50% 40%, #fbfdf8, #e6efdf); }
.u3s-stage canvas { cursor: grab; }
.u3s .u3s-shapes { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.u3s .u3s-shapes canvas { max-width: 56px; }
.u3s .u3s-shapes b { font-size: 11px; }
.u3s .u3s-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.u3s .u3s-icons button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border: 1px solid #d9d4f0; border-radius: 10px; background: #fff; cursor: pointer; font: 600 11px Manrope, sans-serif; color: #333; }
.u3s .u3s-icons button.is-on { border-color: #5a3fd6; box-shadow: 0 0 0 2px rgba(90, 63, 214, .18); }
.u3s .u3s-icons canvas { width: 30px; height: 30px; }
.u3s .u3s-fonts { margin-top: 4px; }
.u3s[data-free="0"] .u3s-for-free { display: none; }
.u3s[data-rel=raised] .u3s-for-d, .u3s:is([data-rel=flush], [data-rel=engraved]) .u3s-for-h { display: none; }
.u3s:not(.is-batch) .u3s-batch, .u3s.is-batch .u3s-single { display: none; }
.u3s input[type=text] { width: 100%; box-sizing: border-box; }
.u3s textarea { width: 100%; box-sizing: border-box; min-height: 150px; padding: 8px 10px; border: 1px solid #d9d4f0; border-radius: 10px; font: 14px/1.5 Manrope, sans-serif; resize: vertical; }
.u3s input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3s .u3s-mode, .u3s .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; }
.u3s .u3s-mode { margin: 6px 0 12px; font-weight: 600; }
.u3s .u3c-row label:has(> input[type=checkbox]) { padding-bottom: 10px; }
.u3s input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
@media (max-width: 600px) { .u3s .u3s-shapes { grid-template-columns: repeat(4, 1fr); } }
.u3s .u3s-lbl { margin: 2px 0 6px; font-size: 13px; font-weight: 600; color: #555; }
.u3s:not(.has-bed) .u3q-view [data-view=bed] { display: none; }
/* Панель и аксессуары SKÅDIS (u3w) */
.u3w-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3w-stage canvas { cursor: grab; }
.u3w-load { position: absolute; inset: auto 0 45% 0; text-align: center; font-weight: 600; color: #5a3fd6; margin: 0; }
.u3w .u3w-modes { margin: 0 0 12px; }
.u3w[data-mode=acc] .u3w-panel, .u3w[data-mode=panel] .u3w-acc { display: none; }
.u3w .u3w-f-hook, .u3w .u3w-f-shelf, .u3w .u3w-f-tray, .u3w .u3w-f-holes { display: none; }
.u3w[data-fam=hook] .u3w-f-hook, .u3w[data-fam=shelf] .u3w-f-shelf, .u3w[data-fam=tray] .u3w-f-tray, .u3w[data-fam=shelf]:not([data-holes=none]) .u3w-f-holes { display: flex; }
.u3w .u3w-hint { margin: 8px 0 2px; font-size: 14px; line-height: 1.5; color: #555; }
.u3w .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3w input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
/* 3D-иллюзия из двух слов (u3f) */
.u3f-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3f-stage canvas { cursor: grab; }
.u3f input[type=text] { width: 100%; box-sizing: border-box; text-transform: none; }
.u3f input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3f .u3f-fonts { margin-top: 4px; grid-template-columns: repeat(3, 1fr); }
.u3f .u3f-swap { flex: 0 0 auto; align-self: center; padding: 8px 12px; margin-bottom: 10px; border: 1px solid #d9d4f0; border-radius: 10px; background: #fff; color: #5a3fd6; font: 600 14px Manrope, sans-serif; cursor: pointer; }
.u3f .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3f input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3f .u3q-view { display: flex; max-width: 100%; min-width: 0; }
.u3f .u3q-view .u3c-tab { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u3f .u3q-view .u3c-tab[data-view="3d"] { flex: 0 0 auto; }
/* Просмотр и конвертер 3D-моделей (u3e) */
.u3e-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3e-stage canvas { cursor: grab; touch-action: none; }
.u3e-drop { position: absolute; inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed #b9adf0; border-radius: 16px; color: #5a3fd6; cursor: pointer; text-align: center; padding: 16px; }
.u3e-drop b { font-size: 20px; } .u3e-drop span { font-size: 14px; color: #777; }
.u3e[data-has="1"] .u3e-drop, .u3h[data-has="1"] .u3e-drop { display: none; }
.u3e.is-drag .u3e-drop, .u3h.is-drag .u3e-drop { display: flex; background: rgba(90, 63, 214, .08); }
.u3e .u3e-open, .u3h .u3e-open { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.u3e .u3e-file, .u3h .u3e-file { position: relative; display: inline-block; padding: 10px 18px; border-radius: 12px; background: #5a3fd6; color: #fff; font-weight: 700; cursor: pointer; overflow: hidden; }
.u3e .u3e-file input, .u3h .u3e-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.u3e .u3e-sample, .u3h .u3e-sample { padding: 10px 14px; border: 1px solid #d9d4f0; border-radius: 12px; background: #fff; color: #5a3fd6; font: 600 14px Manrope, sans-serif; cursor: pointer; }
.u3e .u3e-name, .u3e .u3e-hint, .u3e .u3e-calc, .u3h .u3e-name, .u3h .u3e-calc { margin: 10px 0 4px; font-size: 14px; line-height: 1.5; color: #555; word-break: break-word; }
.u3e .u3e-parts { max-height: 220px; overflow-y: auto; margin-top: 8px; }
.u3e .u3e-part { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.u3e .u3e-part i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.u3e .u3e-part span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u3e .u3e-part small { color: #999; }
.u3e .u3e-units .u3m-chips { margin-top: 6px; }
.u3e .u3e-rot { margin-bottom: 10px; }
.u3e input[type=range] { width: 100%; accent-color: #5a3fd6; }
.u3e .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3e input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
/* Просмотр G-code (u3h) — общая часть с просмотром моделей (.u3e-*) */
.u3h input[type=range] { width: 100%; accent-color: #5a3fd6; }
.u3h .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3h input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3h .u3h-plate { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: #555; margin-top: 8px; }
.u3h .u3h-plate[hidden] { display: none; }
.u3h .u3h-steps { display: flex; gap: 6px; margin: 0 0 12px; }
.u3h .u3h-steps button { flex: 1; padding: 6px 0; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; color: #5a3fd6; font: 700 13px Manrope, sans-serif; cursor: pointer; }
.u3h .u3h-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #444; }
.u3h .u3h-legend span { display: inline-flex; align-items: center; gap: 5px; }
.u3h .u3h-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.u3h .u3h-ramp i { width: 70px; background: linear-gradient(90deg, #2d5fdc, #28b978, #f5cd28, #e64632); }
.u3h .u3h-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 6px; }
.u3h .u3h-big div { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 8px; text-align: center; }
.u3h .u3h-big b { display: block; color: #fff; font-size: 19px; line-height: 1.2; }
.u3h .u3h-big span { font-size: 11.5px; color: #c9c2ee; }
.u3h .u3h-feat { margin-top: 10px; }
.u3h .u3h-feat-h { color: #c9c2ee; font-size: 13px; margin: 0 0 6px; }
.u3h .u3h-bar { margin: 0 0 8px; font-size: 13px; color: #fff; }
.u3h .u3h-bar span { display: inline-flex; align-items: center; gap: 6px; } .u3h .u3h-bar i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.u3h .u3h-bar b { float: right; font-weight: 600; color: #c9c2ee; font-size: 12px; }
.u3h .u3h-bar em { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: 4px; overflow: hidden; }
.u3h .u3h-bar u { display: block; height: 100%; }
@media (max-width: 1020px) { .u3t-app .u3h .u3q-side .u3h-feat { display: none; } .u3t-app .u3h .u3h-big b { font-size: 16px; } }
/* Складная упаковка (u3x) */
.u3x-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3x-stage canvas { cursor: grab; }
.u3x .u3x-fold { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; color: #c9c2ee; font-size: 13px; font-weight: 600; }
.u3x .u3x-fold input { flex: 1; accent-color: #9b85ff; }
.u3x .u3x-fold button { padding: 6px 12px; border: 0; border-radius: 10px; background: #5a3fd6; color: #fff; font: 700 13px Manrope, sans-serif; cursor: pointer; }
.u3x.is-flatview .u3x-fold { opacity: .45; }
.u3x .u3x-f-tray, .u3x .u3x-f-window { display: none; }
.u3x[data-type=tray] .u3x-f-tray, .u3x[data-type=window] .u3x-f-window { display: flex; }
.u3x input[type=text] { width: 100%; box-sizing: border-box; }
.u3x input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3x .u3x-fonts { margin-top: 4px; }
.u3x .u3x-logo input[type=file] { font-size: 13px; }
.u3x .u3f-swap { align-self: flex-end; padding: 8px 12px; margin-bottom: 10px; border: 1px solid #d9d4f0; border-radius: 10px; background: #fff; color: #5a3fd6; font: 600 14px Manrope, sans-serif; cursor: pointer; }
@media (max-width: 1020px) { .u3t-app .u3x .u3x-fold { margin: 6px 0 0; } }

/* Кейс-органайзер Gridfinity (u3y) */
.u3y-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3y-stage canvas { cursor: grab; }
.u3y input[type=text] { width: 100%; box-sizing: border-box; }
.u3y input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3y .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3y input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3y.no-rack #u3y-slots, .u3y.no-rack #u3y-wall { opacity: .45; pointer-events: none; }

/* Рамка для фото (u3r) */
.u3r-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3r-stage canvas { cursor: grab; }
.u3r input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3r .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3r input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3r #u3r-texs { margin-top: 6px; }
.u3r .u3r-sample { width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; background: transparent; color: #fff; font: 600 14px Manrope, sans-serif; cursor: pointer; }
.u3r .u3r-sample:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 1020px) { .u3t-app .u3r .u3r-sample { display: none; } }

/* Чехол для телефона (u3z) */
.u3z-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3z-stage canvas { cursor: grab; }
.u3z input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #d9d4f0; border-radius: 8px; background: #fff; cursor: pointer; }
.u3z .u3c-row label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; padding-bottom: 10px; }
.u3z input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3z .u3c-hint { margin: 0 0 10px; font-size: 14px; color: #666; }
.u3z .u3r-sample { width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; background: transparent; color: #fff; font: 600 14px Manrope, sans-serif; cursor: pointer; }
.u3z .u3r-sample:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 1020px) { .u3t-app .u3z .u3r-sample { display: none; } }

/* 3D-панели для стен (u3u) */
.u3u-stage { position: relative; background: radial-gradient(circle at 50% 40%, #fbfaff, #ece8fa); }
.u3u-stage canvas { cursor: grab; }
.u3u input[type=range] { width: 100%; accent-color: #5a3fd6; }
.u3u input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #5a3fd6; }
.u3u .u3u-img { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 4px 0 10px; }
.u3u .u3u-img[hidden] { display: none; }
.u3u .u3u-img label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #333; cursor: pointer; }
.u3u .u3u-img .u3c-hint { flex-basis: 100%; margin: 0; font-size: 14px; color: #666; }
.u3u .u3e-file { position: relative; display: inline-block; padding: 10px 18px; border-radius: 12px; background: #5a3fd6; color: #fff; font-weight: 700; cursor: pointer; overflow: hidden; }
.u3u .u3e-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.u3u .u3u-mode { display: flex; gap: 6px; margin: 6px 0 4px; }
.u3u .u3u-mode .u3c-tab { flex: 1; padding: 10px 8px; border: 1px solid #d9d4f0; border-radius: 10px; background: #fff; color: #5a3fd6; font: 700 14px Manrope, sans-serif; cursor: pointer; }
.u3u .u3u-mode .u3c-tab.is-on { background: #5a3fd6; border-color: #5a3fd6; color: #fff; }