/* Light Star — «صمّم مطبخك» planner page (page-kitchen-planner.php, assets/js/planner-pro.js).
   A dark app shell under the site header: step bar, side panel (room / units+finishes / summary), a stage with the 2D plan and the
   live 3D view, a footer with back / live totals / next. Phones: the stage first, the panel below, a 2D/3D switch. */
.pp { --pp-bg: #0a1527; --pp-panel: #101d33; --pp-line: rgba(255, 255, 255, .12); --pp-ink: #0a1527; --pp-bar: 58px; --pp-foot: 64px;
	background: var(--pp-bg); color: #fff; padding-top: var(--ls-header-h, 100px); position: relative; }
.pp button { font: inherit; cursor: pointer; }
.pp__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--pp-bar); padding: 8px clamp(12px, 2vw, 28px); border-bottom: 1px solid var(--pp-line); }
.pp__steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pp__step { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 99px; border: 1px solid transparent; background: transparent; color: rgba(255, 255, 255, .6); transition: .25s; }
.pp__step i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--ls-font-body); font-style: normal; background: rgba(255, 255, 255, .12); }
.pp__step.is-on { color: #fff; border-color: var(--pp-line); background: rgba(255, 255, 255, .06); }
.pp__step.is-on i { background: var(--ls-accent); }
.pp__tools { display: flex; gap: 6px; align-items: center; }
.pp__ico { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--pp-line); background: transparent; color: #fff; padding: 0 10px; }
.pp__ico--flip svg { transform: scaleX(-1); }
.pp__ico[disabled] { opacity: .35; cursor: default; }
.pp__ico--txt { font-size: 13px; }
.pp__ico:hover:not([disabled]) { background: rgba(255, 255, 255, .08); }

.pp__body { display: grid; grid-template-columns: 372px minmax(0, 1fr); height: max(540px, calc(100svh * var(--z) - var(--ls-header-h, 100px) - var(--pp-bar) - var(--pp-foot))); }
.pp__aside { background: var(--pp-panel); border-inline-end: 1px solid var(--pp-line); overflow-y: auto; padding: 18px 18px 28px; }
.pp__panel[hidden] { display: none; }
.pp__h { font: 400 24px/1.2 var(--ls-font-display); margin: 4px 0 14px; }
.pp__h2 { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .7); margin: 24px 0 10px; }
.pp__lead { color: rgba(255, 255, 255, .72); line-height: 1.7; margin: 0 0 16px; font-size: 14.5px; }
.pp__tip { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .6); margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); }

.pp__shapes, .pp__kits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pp__kits { grid-template-columns: repeat(3, 1fr); }
.pp__shape, .pp__kit { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--pp-line); background: rgba(255, 255, 255, .03); color: #fff; font-size: 12.5px; transition: .2s; }
.pp__shape svg, .pp__kit svg { width: 100%; max-width: 72px; height: auto; }
.pp__shape svg path { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 2; }
.pp__kit svg .k-room { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .6); stroke-width: 1.6; }
.pp__kit svg .k-u { fill: var(--ls-accent); stroke: none; }
.pp__shape:hover, .pp__kit:hover { border-color: rgba(255, 255, 255, .4); transform: translateY(-1px); }
.pp__shape.is-on { border-color: var(--ls-accent); background: rgba(237, 41, 38, .12); }
.pp__dims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp__dims label { display: grid; gap: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.pp__dims label[hidden] { display: none; }
.pp__dims input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--pp-line); background: rgba(255, 255, 255, .06); color: #fff; padding: 0 12px; font: 600 15px var(--ls-font-body); }
.pp__dims input:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 1px; }

.pp__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); margin-bottom: 14px; }
.pp__tabs button { height: 36px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, .7); font-weight: 600; }
.pp__tabs button.is-on { background: #fff; color: var(--pp-ink); }
.pp__fam h3 { font-size: 13px; letter-spacing: .02em; color: rgba(255, 255, 255, .7); margin: 18px 0 10px; }
.pp__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp__card { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 9px; border-radius: 12px; border: 1px solid var(--pp-line); background: rgba(255, 255, 255, .04); color: #fff; text-align: center; touch-action: pan-y; user-select: none; transition: .2s; }
.pp__card:hover { border-color: var(--ls-accent); background: rgba(237, 41, 38, .1); }
.pp__card b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.pp__card small { font-size: 11px; color: rgba(255, 255, 255, .55); }
.pp__cg { width: 52px; height: 52px; display: block; }
.pp__cg svg { width: 100%; height: 100%; }
.pp__ghost { position: fixed; z-index: 99999; left: 0; top: 0; width: 96px; pointer-events: none; opacity: .92; background: #17284a; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }

.pp__fg h3 { font-size: 13px; letter-spacing: .02em; color: rgba(255, 255, 255, .7); margin: 18px 0 10px; }
.pp__fg h4 { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); margin: 14px 0 8px; }
.pp__dots { display: flex; flex-wrap: wrap; gap: 8px; }
.pp__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .25); padding: 0; transition: .2s; }
.pp__dot.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--ls-accent); }
.pp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp__chips button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--pp-line); background: transparent; color: rgba(255, 255, 255, .8); font-size: 12.5px; }
.pp__chips button.is-on { background: #fff; color: var(--pp-ink); border-color: #fff; }
.pp__chips + .pp__sw { margin-top: 10px; }
.pp__sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; padding: 2px; }
.pp__swb { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; aspect-ratio: 1; }
.pp__swb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp__swb.is-on { border-color: var(--ls-accent); }

/* stage */
.pp__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: #dfe3ea; min-height: 0; }
.pp__pane { position: relative; min-height: 0; overflow: hidden; }
.pp__pane--2d { background: #f3f4f7; }
.pp__svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: default; user-select: none; }
.pp__gl { position: absolute; inset: 0; }
.pp__tag { position: absolute; top: 10px; inset-inline-start: 12px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(10, 21, 39, .72); color: #fff; pointer-events: none; }
.pp[data-stage="1"] .pp__pane--3d, .pp[data-stage="3"] .pp__pane--2d { display: none; }
.pp__zoom { position: absolute; bottom: 12px; inset-inline-end: 12px; display: grid; gap: 4px; }
.pp__zoom button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(10, 21, 39, .15); background: #fff; color: var(--pp-ink); font-size: 18px; line-height: 1; }
.pp__views { position: absolute; bottom: 12px; inset-inline-start: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(10, 21, 39, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[dir="rtl"] .pp__views { transform: translateX(50%); }
.pp__views button { padding: 6px 12px; border: 0; border-radius: 99px; background: transparent; color: rgba(255, 255, 255, .8); font-size: 12.5px; white-space: nowrap; }
.pp__views button.is-on { background: #fff; color: var(--pp-ink); }
.pp__msg { position: absolute; top: 50%; inset-inline: 0; text-align: center; color: var(--pp-ink); font-weight: 600; pointer-events: none; margin: 0; }
.pp__toggle { display: none; position: absolute; top: 10px; inset-inline-end: 12px; z-index: 3; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(10, 21, 39, .85); }
.pp__toggle button { padding: 5px 12px; border: 0; border-radius: 99px; background: transparent; color: #fff; font-size: 12.5px; }
.pp__toggle button.is-on { background: #fff; color: var(--pp-ink); }
.pp__pop { position: absolute; z-index: 4; display: flex; gap: 4px; align-items: center; padding: 5px; border-radius: 12px; background: var(--pp-bg); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.pp__pop[hidden] { display: none; }
.pp__pop button { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; }
.pp__pop button:hover { background: var(--ls-accent); }
.pp__pop button.is-on { background: #fff; color: var(--pp-ink); }
.pp__pop b { color: #fff; font-size: 13px; min-width: 30px; text-align: center; }

/* 2D drawing */
.pp .pp-floor { fill: #ece4d6; stroke: none; }
.pp .pp-wallline { fill: none; stroke: #8f98a8; stroke-width: 22; stroke-linejoin: miter; }
.pp .pp-dim { fill: #5b6578; font: 600 13px var(--ls-font-body); }
.pp .pp-it { cursor: grab; }
.pp .pp-body { fill: #fff; stroke: #1b2438; stroke-width: 1.5; }
.pp .pp-w .pp-body { fill: rgba(237, 41, 38, .08); stroke: #ed2926; stroke-dasharray: 5 3; }
.pp .pp-fridge .pp-body, .pp .pp-pantry .pp-body, .pp .pp-toven .pp-body { fill: #dfe5ee; }
.pp .pp-sink .pp-body { fill: #eaf3fb; }
.pp .pp-filler .pp-body { fill: #f1f1f1; }
.pp .pp-island .pp-body { fill: #fff6e8; }
.pp .pp-gl { fill: none; stroke: #1b2438; stroke-width: 1.3; stroke-linecap: round; }
.pp .pp-gl .pp-sink { fill: #cfe4f5; }
.pp .pp-stool circle { fill: #e9d6b8; }
.pp .pp-lab { fill: #1b2438; font: 600 11px var(--ls-font-body); stroke: none; paint-order: stroke; }
.pp .pp-o .pp-body { fill: #fff; stroke: #4a90c2; stroke-width: 1.2; }
.pp .pp-gate .pp-body { stroke: #8a6240; }
.pp .pp-win { stroke: #4a90c2; stroke-width: 1.6; }
.pp .pp-swing { stroke: #8a6240; stroke-dasharray: 4 3; fill: none; }
.pp .is-sel .pp-body { stroke: #ed2926; stroke-width: 3; filter: drop-shadow(0 3px 6px rgba(237, 41, 38, .35)); }
.pp .is-bad .pp-body { fill: rgba(237, 41, 38, .35); stroke: #ed2926; }
.pp__cg .pp-body { stroke-width: 2.5; }
.pp__cg .pp-gl { stroke-width: 2; }

/* summary */
.pp__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.pp__stats div { background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 12px 8px; text-align: center; }
.pp__stats b { display: block; font: 400 24px/1.1 var(--ls-font-display); }
.pp__stats span { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.pp__stats .pp__est { grid-column: 1 / -1; background: rgba(237, 41, 38, .16); }
.pp__acts { display: grid; gap: 8px; }
.pp__acts .btn { justify-content: center; width: 100%; }
.pp__parts table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pp__parts th { text-align: start; font-size: 12px; color: rgba(255, 255, 255, .55); font-weight: 600; padding: 6px 4px; }
.pp__parts td { padding: 9px 4px; border-top: 1px solid var(--pp-line); }
.pp__parts td:last-child, .pp__parts th:last-child { text-align: end; width: 56px; }
.pp__note { font-size: 12.5px; color: rgba(255, 255, 255, .6); line-height: 1.6; margin: 10px 0 0; }
.pp__printimg { display: none; }

.pp__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--pp-foot); padding: 8px clamp(12px, 2vw, 28px); border-top: 1px solid var(--pp-line); background: var(--pp-bg); }
.pp__live { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .75); text-align: center; flex: 1; }
.pp__toast { position: fixed; bottom: 86px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 90vw; padding: 10px 18px; border-radius: 12px; background: #fff; color: var(--pp-ink); font-weight: 600; font-size: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .3s; z-index: 9999; }
.pp__toast.is-on { opacity: 1; transform: none; }
.pp__dlg { border: 0; border-radius: 16px; padding: 22px; max-width: min(92vw, 460px); width: 100%; background: #fff; color: var(--pp-ink); }
.pp__dlg::backdrop { background: rgba(10, 21, 39, .6); }
.pp__dlg h3 { margin: 0 0 12px; font: 400 22px var(--ls-font-display); }
.pp__x { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #eef0f4; color: var(--pp-ink); display: grid; place-items: center; }
.pp__mine { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp__mine li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e5e8ee; }

@media print {
	body > *:not(#main), .pp__bar, .pp__foot, .pp__stage, .pp__acts, .pp__tools, .pp__toast { display: none !important; }
	.pp { background: #fff; color: #000; padding: 0; }
	.pp__body { display: block; height: auto; }
	.pp__aside { background: #fff; color: #000; border: 0; overflow: visible; }
	.pp__panel[data-panel="1"], .pp__panel[data-panel="2"] { display: none !important; }
	.pp__panel[data-panel="3"] { display: block !important; }
	.pp__printimg { display: block; width: 100%; margin: 12px 0; border-radius: 8px; }
	.pp__stats div { background: #f2f2f2; } .pp__stats span, .pp__lead, .pp__note, .pp__parts th { color: #444; }
	.pp__parts td { border-color: #ccc; }
}

/* ---- view modes (plan / both / 3D), layers, catalog tabs, one-screen app ---- */
.pp { margin: 0; }
.pp[data-stage="2"] .pp__stage { grid-template-columns: minmax(0, 1fr); }
.pp[data-stage="2"][data-show="both"] .pp__stage { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.pp[data-stage="2"][data-show="2d"] .pp__pane--3d, .pp[data-stage="2"][data-show="3d"] .pp__pane--2d { display: none; }
.pp[data-stage="2"] .pp__toggle { display: flex; }
.pp__layers { position: absolute; bottom: 12px; inset-inline-start: 12px; display: flex; gap: 3px; padding: 3px; border-radius: 99px; background: rgba(10, 21, 39, .85); z-index: 2; }
.pp__layers button { padding: 5px 12px; border: 0; border-radius: 99px; background: transparent; color: #fff; font-size: 12.5px; }
.pp__layers button.is-on { background: #fff; color: var(--pp-ink); }
.pp .pp-it.is-dim { opacity: .2; pointer-events: none; }
.pp__ctabs { display: flex; gap: 6px; position: sticky; top: -18px; z-index: 2; margin: -18px -18px 12px; padding: 14px 18px 10px; background: var(--pp-panel); overflow-x: auto; }
.pp__ctabs button { flex: none; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--pp-line); background: transparent; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; }
.pp__ctabs button.is-on { background: #fff; color: var(--pp-ink); border-color: #fff; }
.pp__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pp__card { padding: 12px 8px 10px; gap: 6px; cursor: grab; }
.pp__card b { font-size: 13px; }
.pp__ws { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.pp__ws button { min-width: 38px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--pp-line); background: rgba(255, 255, 255, .08); color: #fff; font: 600 12.5px var(--ls-font-body); touch-action: pan-y; }
.pp__ws button:hover { background: var(--ls-accent); border-color: var(--ls-accent); }
.pp__pop { max-width: min(94%, 440px); flex-wrap: wrap; justify-content: center; }
.pp__sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .22); margin: 0 3px; }
.pp__pop button { min-width: 38px; height: 38px; }
@media (max-width: 1099px) { .pp__body { grid-template-columns: 330px minmax(0, 1fr); } }
@media (max-width: 799px) {
	.pp { --pp-bar: 54px; --pp-foot: 58px; }
	.pp__body { display: flex; flex-direction: column; height: calc(100svh - var(--ls-header-h, 70px) - var(--pp-bar) - var(--pp-foot)); min-height: 520px; }
	.pp__stage { order: 1; flex: 0 0 46%; height: auto; min-height: 0; }
	.pp__aside { order: 2; flex: 1 1 0; min-height: 0; max-height: none; border-inline-end: 0; border-top: 1px solid var(--pp-line); }
	.pp[data-stage="3"] .pp__stage { flex-basis: 44%; height: auto; }
	.pp__tag { display: none; }
	.pp__toggle button, .pp__layers button { padding: 5px 10px; font-size: 12px; }
	.pp__live { font-size: 12px; }
	.pp__foot .btn { padding-inline: 16px; min-height: 40px; }
}
@media (max-width: 799px) {
	.pp__step span { display: none; }
	.pp__step.is-on span { display: inline; }
	.pp__step { padding: 5px 10px 5px 8px; }
	.pp__tools .pp__ico--txt { font-size: 12px; padding: 0 8px; }
	.pp__views { width: max-content; max-width: 96%; overflow-x: auto; }
}
@media (max-width: 799px) { /* floating buttons sat on top of the "continue" button in the footer; the planner has its own Star AI box */
	body:has(.pp) .wa-float, body:has(.pp) .to-top-ring, body:has(.pp) .lsai-dock { display: none !important; }
}
@media (max-width: 560px) { /* the top bar must never be wider than the phone (RTL overflow can't be scrolled to and stretched the whole page) */
	.pp__bar { gap: 8px; }
	.pp__steps { flex: none; }
	.pp__tools { flex: 1 1 0; min-width: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.pp__tools > * { flex: none; }
}

/* ---- Star AI box ---- */
.pp__tabs { grid-template-columns: repeat(3, 1fr); }
.pp__ai { display: grid; gap: 10px; padding: 14px; margin-bottom: 18px; border-radius: 14px; border: 1px solid rgba(237, 41, 38, .45); background: linear-gradient(160deg, rgba(237, 41, 38, .14), rgba(255, 255, 255, .03)); }
.pp__ai-h { display: grid; gap: 2px; }
.pp__ai-h b { font-size: 15px; }
.pp__ai-h span { font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.pp__ai textarea { width: 100%; min-height: 74px; resize: vertical; border-radius: 10px; border: 1px solid var(--pp-line); background: rgba(10, 21, 39, .55); color: #fff; padding: 10px 12px; font: 14px/1.6 var(--ls-font-body); }
.pp__ai textarea:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 1px; }
.pp__ai-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.pp__ai-ex button { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--pp-line); background: transparent; color: rgba(255, 255, 255, .85); font-size: 12px; }
.pp__ai-ex button:hover { border-color: var(--ls-accent); }
.pp__ai-go { justify-content: center; width: 100%; }
.pp__ai.is-busy .pp__ai-go { opacity: .6; pointer-events: none; }
.pp__ai-say { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.pp__ai-say:empty { display: none; }
.pp__aipane .pp__ai { margin-bottom: 0; }

/* ---- always-visible «next», wall tools ---- */
.pp__foot { position: sticky; bottom: 0; z-index: 25; box-shadow: 0 -12px 28px -18px rgba(0, 0, 0, .6); }
.pp__body { height: max(470px, calc(100svh * var(--z) - var(--ls-header-h, 100px) - var(--pp-bar) - var(--pp-foot))); }
.pp__next { min-height: 38px; padding-inline: 18px; white-space: nowrap; }
.pp__wallbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp__wallbtns button, .pp__wtools button { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pp-line); background: rgba(255, 255, 255, .05); color: #fff; font-size: 13px; font-weight: 600; transition: .2s; }
.pp__wallbtns button:hover { border-color: var(--ls-accent); }
.pp__wallbtns button.is-on, .pp__wtools button.is-on { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; }
.pp__wtools { position: absolute; top: 10px; inset-inline-start: 98px; z-index: 5; max-width: calc(100% - 110px); }
.pp__advanced > summary { cursor: pointer; padding: 10px 12px; border-radius: 12px; background: #18263b; color: #fff; font-size: 13px; min-height: 44px; }
.pp__advanced > summary:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 2px; }
.pp__advanced-body { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: #18263b; box-shadow: 0 8px 24px #0003; }
.pp__advanced-body button { min-height: 44px; text-align: start; }
.pp__advanced-body button[aria-pressed="true"] { border-color: var(--ls-accent); }
.pp__quick-kits { margin-bottom: 14px; }
.pp__quick-kits button { min-height: 64px; }
.pp__quick-kits svg { max-width: 42px; }
.pp__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.pp__presets button { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-height: 48px; padding: 6px; background: transparent; color: #fff; border: 1px solid var(--pp-line); border-radius: 10px; }
.pp__presets span { height: 16px; border-radius: 3px; }
.pp__presets small { grid-column: 1 / -1; font-size: 11px; }
.pp__presets button[aria-pressed="true"] { border-color: var(--ls-accent); }
.pp__wtools button { background: rgba(10, 21, 39, .86); padding: 7px 12px; font-size: 12.5px; }
.pp__whint { position: absolute; z-index: 6; bottom: 58px; inset-inline: 12px; margin-inline: auto; width: max-content; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 14px; background: rgba(10, 21, 39, .94); color: #fff; font-size: 13px; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.pp__whint[hidden] { display: none; }
.pp__whint button { padding: 6px 12px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12.5px; }
.pp__whint button[data-wact="finish"] { background: var(--ls-accent); }
.pp__whint button[hidden] { display: none; }
.pp.is-walling .pp__svg { cursor: crosshair; }
.pp .pp-ghost { opacity: .3; pointer-events: none; }
.pp .pp-draft { fill: rgba(237, 41, 38, .08); stroke: #ed2926; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.pp .pp-dp { fill: #fff; stroke: #ed2926; stroke-width: 3; }
.pp .pp-dp.is-first { fill: #ed2926; }
.pp .pp-wh { cursor: grab; }
.pp .pp-wh circle { fill: #ed2926; stroke: #fff; stroke-width: 3; }
.pp .pp-wh text { fill: #fff; font-family: sans-serif; pointer-events: none; }
.pp .pp-dim--edit { cursor: pointer; fill: #ed2926; font-weight: 800; text-decoration: underline; }
@media (max-width: 799px) { .pp__wtools { inset-inline-start: 8px; } .pp__next { padding-inline: 12px; font-size: 13px; } .pp__whint { bottom: 52px; } }

/* ---- upload a photo to Star AI ---- */
.pp__ai-photo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .45); color: #fff; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.pp__ai-photo svg { flex: none; color: var(--ls-accent); }
.pp__ai-photo span { display: grid; gap: 2px; }
.pp__ai-photo b { font-size: 14px; }
.pp__ai-photo small { font-size: 12px; color: rgba(255, 255, 255, .65); line-height: 1.5; }
.pp__ai-photo:hover, .pp__ai-photo:focus-within { background: rgba(255, 255, 255, .08); border-color: var(--ls-accent); transform: translateY(-1px); }
.pp__ai.is-busy .pp__ai-photo { opacity: .6; pointer-events: none; }

/* finishes: collapsible groups, one scroll only (no scroll boxes inside the scrolling panel) */
.pp__fg { border-top: 1px solid var(--pp-line); padding: 2px 0 14px; }
.pp__fg:first-child { border-top: 0; }
.pp__fg > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: #fff; padding: 12px 0; }
.pp__fg > summary::-webkit-details-marker { display: none; }
.pp__fg > summary::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); transform: rotate(45deg); transition: transform .2s; margin-inline-end: 4px; }
.pp__fg[open] > summary::after { transform: rotate(-135deg); }
.pp__swb { min-width: 52px; }
.pp__more { margin-top: 10px; width: 100%; height: 40px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .35); background: transparent; color: #fff; font-size: 13px; font-weight: 600; }
.pp__more:hover { background: rgba(255, 255, 255, .08); }

/* phones: the side-by-side 2D + 3D view cut the 3D off, so only 2D or 3D (one at a time, full width); no floating assistant star over the planner */
@media (max-width: 799px) {
	.pp__toggle button[data-show="both"] { display: none; }
	.pp[data-stage="2"][data-show="both"] .pp__stage { grid-template-columns: minmax(0, 1fr); }
	.pp[data-stage="2"][data-show="both"] .pp__pane--3d { display: none; }
	body:has(.pp) .lsai-mini, body:has(.pp) .lsai-bot { display: none !important; }
}


/* finishes on the plan: dark fronts get light strokes; the front strip of base units */
.pp .pp-it.is-dk .pp-gl { stroke: rgba(255, 255, 255, .85); }
.pp .pp-it.is-dk .pp-gl .pp-sink { fill: rgba(255, 255, 255, .2); }
.pp .pp-strip { stroke: rgba(10, 21, 39, .35); stroke-width: .8; pointer-events: none; }
.pp .pp-it:focus { outline: none; }
.pp .pp-it:focus-visible .pp-body { stroke: #ed2926; stroke-width: 3; }
.pp__card:focus-visible, .pp__ctabs button:focus-visible, .pp__tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the selected unit's name, over the 3D view */
.pp__seltag { position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 3; padding: 6px 14px; border-radius: 99px; background: rgba(10, 21, 39, .8); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
/* the autosave state next to the save button */
.pp__state { align-self: center; padding: 0 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.pp__state.is-bad { color: #ff9a97; }
@media (max-width: 767px) { .pp__state { display: none; } }
/* phones on their side: the plan and the panel sit side by side and use the short screen height (no forced 470 px minimum) */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1100px) {
	.pp__body { height: max(300px, calc(100svh - var(--pp-bar) - var(--pp-foot))); min-height: 0; }
	.pp__aside { padding: 12px 12px 20px; }
}