/* Full-screen customer planner shell. The shared planner logic stays in wardrobe-planner.js. */
:root { --wpa-blue:#0058a3; --wpa-ink:#1f2826; --wpa-muted:#64716c; --wpa-line:#dbe2de; --wpa-panel:#ffffff; --wpa-stage:#eef2ef; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html, body { margin:0; min-height:100%; background:#edf1ee; color:var(--wpa-ink); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
.wp-standalone-body { overflow:hidden; }
.wp-standalone { height:100dvh; min-height:620px; display:flex; flex-direction:column; background:var(--wpa-stage); }
.wp-standalone button, .wp-standalone input, .wp-standalone select { font:inherit; }
.wpa-header { height:64px; flex:0 0 64px; display:flex; align-items:center; gap:20px; padding:0 22px; border-bottom:1px solid var(--wpa-line); background:#fff; }
.wpa-brand { display:flex; align-items:center; gap:9px; color:var(--wpa-ink); text-decoration:none; min-width:142px; }
.wpa-brand span { display:grid; place-items:center; width:31px; height:31px; border-radius:6px; background:var(--wpa-blue); color:#fff; font-size:11px; font-weight:800; }
.wpa-brand strong { font-size:16px; letter-spacing:.02em; }
.wpa-title { min-width:220px; }.wpa-title h1 { margin:0; font-size:17px; line-height:1.2; }.wpa-title p { margin:4px 0 0; color:var(--wpa-muted); font-size:12px; }
.wpa-header-actions { margin-left:auto; display:flex; align-items:center; gap:7px; }
.wpa-header-menu { position:relative; }
.wpa-header-menu > summary { list-style:none; cursor:pointer; }
.wpa-header-menu > summary::-webkit-details-marker { display:none; }
.wpa-header-menu-list { position:absolute; z-index:20; top:calc(100% + 7px); right:0; display:grid; min-width:160px; padding:5px; border:1px solid var(--wpa-line); border-radius:5px; background:#fff; box-shadow:0 8px 24px #18241f24; }
.wpa-header-menu-list button { display:flex; align-items:center; gap:9px; min-height:38px; padding:8px 10px; border:0; border-radius:3px; background:#fff; color:#34413e; font-size:12px; text-align:left; cursor:pointer; }
.wpa-header-menu-list button:hover { background:#eef4f8; color:var(--wpa-blue); }
.wpa-button, .wpa-link, .wpa-square { border:1px solid #c6d0cb; border-radius:5px; background:#fff; color:#34413e; cursor:pointer; transition:border-color .16s, background .16s, color .16s; }
.wpa-button { min-height:38px; padding:8px 13px; font-size:13px; font-weight:650; white-space:nowrap; }.wpa-button.primary { color:#fff; background:var(--wpa-blue); border-color:var(--wpa-blue); }.wpa-button:hover, .wpa-link:hover, .wpa-square:hover { border-color:var(--wpa-blue); color:var(--wpa-blue); }.wpa-button.primary:hover { color:#fff; background:#00457f; }
.wpa-link { border-color:transparent; padding:8px 5px; font-size:13px; }.wpa-square { display:inline-grid; place-items:center; width:38px; height:38px; padding:0; }.wpa-square:disabled,.wpa-button:disabled { cursor:not-allowed; opacity:.42; }
.wpa-body { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 408px; position:relative; }
.wpa-stage { grid-column:1; grid-row:1; position:relative; min-width:0; min-height:0; overflow:hidden; background:var(--wpa-stage); }
.wpa-canvas, .wpa-canvas canvas { position:absolute; inset:0; width:100%; height:100%; }.wpa-canvas canvas { display:block; touch-action:none; }
.wpa-plan-canvas { position:absolute; z-index:2; inset:0; display:block; width:100%; height:100%; touch-action:none; cursor:grab; }.wpa-plan-canvas:active { cursor:grabbing; }.wpa-plan-canvas[hidden] { display:none; }
.wpa-render-status { position:absolute; z-index:3; inset:45% 24px auto; padding:15px; text-align:center; color:#43514c; background:#fffffff0; border:1px solid #d5ddda; border-radius:5px; font-size:14px; }.wpa-render-status[hidden] { display:none; }
.wpa-left, .wpa-right { grid-column:2; grid-row:1; min-width:0; overflow:auto; padding:84px 20px 28px; border-left:1px solid var(--wpa-line); background:var(--wpa-panel); scrollbar-width:thin; }
.wpa-left, .wpa-right { display:none; }.wpa-left.is-panel-active, .wpa-right.is-panel-active { display:block; }
.wpa-body.is-dock-collapsed { grid-template-columns:minmax(0,1fr) 0; }.wpa-body.is-dock-collapsed .wpa-left, .wpa-body.is-dock-collapsed .wpa-right { display:none; }
.wpa-dock-tabs { position:absolute; z-index:8; top:0; right:0; width:408px; display:flex; gap:7px; padding:12px 20px; border-bottom:1px solid var(--wpa-line); background:#fff; }.wpa-body.is-dock-collapsed .wpa-dock-tabs { display:none; }.wpa-dock-tab { flex:1; min-height:42px; border:1px solid #cbd4cf; border-radius:5px; background:#fff; color:#53625d; font-size:13px; font-weight:700; cursor:pointer; }.wpa-dock-tab[aria-pressed=true] { color:#fff; background:#25312e; border-color:#25312e; }
.wpa-panel-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }.wpa-panel-head.compact { margin-top:20px; margin-bottom:13px; }.wpa-panel-head strong { display:block; font-size:16px; }.wpa-panel-head small { display:block; margin-top:4px; color:var(--wpa-muted); font-size:12px; }.wpa-step { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#fff; background:var(--wpa-blue); font-size:10px; font-weight:800; }
.wpa-room-fields, .wpa-fields-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.wpa-room-fields label:last-child { grid-column:1/-1; }.wpa-room-fields label, .wpa-fields-grid label, .wpa-fittings label { display:grid; gap:6px; color:#5d6a65; font-size:12px; font-weight:600; }.wpa-room-fields input, .wpa-fields-grid input, .wpa-fields-grid select, .wpa-fittings input { min-width:0; width:100%; height:40px; padding:7px 9px; border:1px solid #c7d1cc; border-radius:4px; background:#fff; color:var(--wpa-ink); }
.wpa-wall-head, .wpa-section-title { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:22px 0 10px; }.wpa-wall-head strong, .wpa-section-title strong { font-size:14px; }.wpa-wall-head span, .wpa-section-title span { color:var(--wpa-muted); font-size:11px; text-align:right; }
.wpa-wall-actions { display:flex; align-items:center; gap:6px; }.wpa-wall-actions .wpa-button { flex:1; padding:7px 8px; font-size:12px; }.wpa-wall-actions #wpWallDraw { min-height:48px; padding-inline:18px; font-size:14px; font-weight:800; box-shadow:0 8px 22px rgba(0,88,163,.2); }.wpa-wall-actions #wpWallDraw[aria-pressed=true] { color:#fff; background:#c94431; border-color:#c94431; }
.wpa-wall-canvas { display:none; }.wpa-ortho { display:flex!important; align-items:center; gap:7px; margin-top:12px; color:#465752; font-size:12px!important; }.wpa-hint { margin:8px 0 0; color:#6d7a75; font-size:12px; line-height:1.55; }.wpa-divider { height:1px; margin:21px 0; background:var(--wpa-line); }
.wpa-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.wpa-presets button { display:grid; gap:5px; min-height:78px; padding:9px 4px; border:1px solid #d6dfda; border-radius:5px; background:#fff; color:#4e5d58; cursor:pointer; text-align:center; }.wpa-presets button:hover { border-color:var(--wpa-blue); color:var(--wpa-blue); }.wpa-presets i { font-size:19px; }.wpa-presets span { font-size:11px; font-weight:700; }.wpa-presets small { color:#7d8984; font-size:10px; }.wpa-full { width:100%; margin-top:10px; }.wpa-status { min-height:24px; margin-top:10px; color:var(--wpa-blue); font-size:12px; line-height:1.5; }
.wpa-bays { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }.wpa-bays button { width:38px; height:38px; border:1px solid #cbd3d0; border-radius:4px; background:#fff; color:#44524e; cursor:pointer; }.wpa-bays button[aria-pressed=true] { border-color:var(--wpa-blue); color:#fff; background:var(--wpa-blue); }.wpa-selected-title { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:13px; }.wpa-selected-title strong { font-size:16px; }.wpa-selected-title span { color:var(--wpa-muted); font-size:11px; }
.wpa-layouts { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.wpa-layouts button { display:flex; align-items:center; gap:7px; min-height:40px; padding:8px 9px; border:1px solid #d7dfdc; border-radius:4px; background:#fff; color:#4c5b56; cursor:pointer; font-size:11px; }.wpa-layouts button i { color:#71827c; font-size:15px; }.wpa-layouts button[aria-pressed=true] { border-color:var(--wpa-blue); color:var(--wpa-blue); background:#edf5fc; }.wpa-fittings { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }.wpa-fittings input { height:36px; padding:5px; font-size:12px; }
.wpa-accessory-catalog { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; max-height:270px; overflow:auto; }.wpa-accessory-catalog .wp-accessory-card { min-width:0; padding:7px; gap:7px; }.wpa-accessory-catalog .wp-accessory-card img { width:45px; height:45px; }.wpa-accessory-catalog .wp-accessory-copy strong { font-size:11px; }.wpa-accessory-catalog .wp-accessory-copy small { font-size:10px; }.wpa-accessory-list { display:grid; gap:6px; max-height:260px; overflow:auto; margin-top:9px; }.wpa-accessory-list .wp-accessory-row { padding:8px; }.wpa-accessory-list .wp-accessory-fields { grid-template-columns:repeat(2,1fr); }.wpa-accessory-list .wp-accessory-fields input { height:31px; font-size:11px; }
.wpa-bay-actions { display:flex; align-items:center; gap:6px; margin-top:16px; }.wpa-bay-actions .wpa-button { margin-left:auto; }.wpa-summary { margin-top:20px; padding-top:16px; border-top:1px solid var(--wpa-line); }.wpa-summary-size { font-size:25px; font-weight:750; }.wpa-summary-size small { color:var(--wpa-muted); font-size:11px; font-weight:400; }.wpa-summary p { margin:6px 0 11px; color:var(--wpa-muted); font-size:12px; line-height:1.6; }.wpa-fit { display:flex; gap:7px; padding:9px; background:#edf4ef; color:#315a43; font-size:11px; line-height:1.5; }.wpa-fit[data-warning=true] { background:#fff1e8; color:#8a3a13; }.wpa-fit ul { margin:0; padding:0; list-style:none; }.wpa-parts { margin:11px 0; }.wpa-parts div { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #edf0ee; font-size:11px; }.wpa-parts dt { color:var(--wpa-muted); }.wpa-parts dd { margin:0; font-weight:700; }.wpa-details { margin:0; padding:0; list-style:none; }.wpa-details li { display:flex; justify-content:space-between; gap:6px; padding:5px 0; color:#697571; font-size:11px; }.wpa-details button { padding:0; border:0; background:none; color:#44524e; cursor:pointer; text-align:left; }.wpa-right-footer { margin-top:14px; }.wpa-right-footer .wpa-button { width:100%; }
.wpa-stage-top { position:absolute; z-index:4; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; pointer-events:none; }.wpa-stage-top > * { pointer-events:auto; }.wpa-view-switch { display:flex; padding:4px; border:1px solid #d5dbd8; border-radius:6px; background:#fffffff0; box-shadow:0 2px 9px #33413c14; }.wpa-view-switch button { min-width:54px; min-height:38px; padding:8px 11px; border:0; border-radius:4px; background:transparent; color:#52605c; cursor:pointer; font-size:13px; font-weight:650; }.wpa-view-switch button[aria-pressed=true] { color:#fff; background:#26302d; }.wpa-stage-actions { display:flex; gap:7px; }
.wpa-canvas-tools { position:absolute; z-index:4; top:86px; left:18px; display:grid; gap:8px; }.wpa-canvas-tools .wpa-button { min-width:130px; text-align:left; box-shadow:0 4px 12px #25352d14; }.wpa-canvas-tools .wpa-button.primary { box-shadow:0 8px 20px rgba(0,88,163,.22); }.wpa-object-tools { display:flex; gap:6px; padding:5px; width:max-content; border:1px solid #d5ddda; border-radius:6px; background:#ffffffe8; box-shadow:0 4px 12px #25352d14; }.wpa-object-tools .wpa-square { width:34px; height:34px; }
.wpa-stage-bottom { position:absolute; z-index:4; right:18px; bottom:18px; left:18px; display:flex; align-items:center; gap:9px; color:#53615d; font-size:12px; pointer-events:none; }.wpa-stage-bottom > * { pointer-events:auto; }.wpa-stage-bottom label, .wpa-stage-bottom span { display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid #d6ddda; border-radius:5px; background:#fffffff0; }.wpa-stage-bottom span { margin-right:auto; }
@media (max-width:1180px) { .wpa-body { grid-template-columns:minmax(0,1fr) 360px; }.wpa-dock-tabs { width:360px; }.wpa-title p { display:none; }.wpa-link { display:none; }.wpa-header { gap:12px; }.wpa-brand { min-width:auto; } }
@media (max-width:860px) { .wp-standalone-body { overflow:hidden; }.wp-standalone { min-height:0; }.wpa-header { height:58px; flex-basis:58px; padding:0 12px; gap:10px; }.wpa-brand strong,.wpa-title p,.wpa-header-actions .wpa-button:not(.primary),.wpa-header-actions .wpa-link { display:none; }.wpa-title { min-width:0; }.wpa-title h1 { font-size:15px; }.wpa-header-actions { gap:4px; }.wpa-header-actions .wpa-square { width:34px; height:34px; }.wpa-header-actions .primary { min-height:34px; padding:6px 9px; font-size:12px; }.wpa-body { display:block; position:relative; }.wpa-stage { position:absolute; inset:0; }.wpa-left,.wpa-right { position:absolute; z-index:10; top:0; right:0; bottom:0; width:min(380px,calc(100vw - 52px)); padding:78px 18px 24px; box-shadow:-8px 0 24px #26342c25; }.wpa-dock-tabs { z-index:11; width:min(380px,calc(100vw - 52px)); padding:10px 18px; }.wpa-body.is-dock-collapsed .wpa-left,.wpa-body.is-dock-collapsed .wpa-right { display:none; }.wpa-view-switch button { min-width:0; padding:7px 9px; font-size:12px; }.wpa-view-switch button:nth-child(2),.wpa-view-switch button:nth-child(3),.wpa-view-switch button:nth-child(4) { display:none; }.wpa-stage-top { top:12px; left:12px; right:12px; }.wpa-canvas-tools { top:70px; left:12px; }.wpa-stage-bottom { right:12px; bottom:12px; left:12px; }.wpa-stage-bottom span { display:none; }.wpa-stage-bottom label { margin-left:auto; }.wpa-stage-bottom label + label { margin-left:0; } }
@media (max-width:500px) { .wpa-brand { min-width:31px; }.wpa-title h1 { font-size:14px; }.wpa-header-actions .primary { font-size:0; width:36px; padding:0; }.wpa-header-actions .primary i { font-size:14px; }.wpa-left,.wpa-right { width:calc(100vw - 32px); }.wpa-canvas-tools .wpa-button:not(.primary) { display:none; }.wpa-stage-bottom label:first-of-type { display:none; }.wpa-view-switch button { padding:7px 8px; }.wpa-room-fields,.wpa-fields-grid { grid-template-columns:1fr; }.wpa-fields-grid label { grid-column:auto!important; }.wpa-fittings { grid-template-columns:repeat(3,1fr); } }

/* Cabinet-first standalone workflow, inspired by product configurators. */
.wpa-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.wpa-right #wpFinishName[hidden] { display:none!important; }
.wpa-config-grid label { display:grid; gap:6px; color:#5d6a65; font-size:12px; font-weight:600; }
.wpa-config-grid input,.wpa-config-grid select { width:100%; min-width:0; height:42px; padding:7px 10px; border:1px solid #c7d1cc; border-radius:4px; background:#fff; color:var(--wpa-ink); }
.wpa-width-presets { display:flex; align-items:center; gap:6px; margin-top:10px; color:var(--wpa-muted); font-size:11px; }
.wpa-width-presets span { margin-right:auto; }
.wpa-width-presets button { min-width:44px; height:32px; padding:4px 8px; border:1px solid #cbd4cf; border-radius:4px; background:#fff; color:#34413e; font-size:11px; cursor:pointer; }
.wpa-width-presets button:hover { border-color:var(--wpa-blue); color:var(--wpa-blue); }
.wpa-add-cabinet { width:100%; min-height:50px; margin:0 0 13px; font-size:15px; box-shadow:0 4px 12px #0058a326; }
.wpa-bays { min-height:40px; margin:0 0 14px; }
.wpa-selected-title { margin:0 0 7px; }
.wpa-layouts { gap:6px; }
.wpa-layouts button { min-height:44px; padding:7px 6px; font-size:11px; }
.wpa-layouts button i { display:none; }
.wpa-more-options { margin-top:14px; border-top:1px solid var(--wpa-line); }
.wpa-more-options summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:46px; color:#34413e; font-size:13px; font-weight:700; cursor:pointer; list-style:none; }
.wpa-more-options summary::-webkit-details-marker { display:none; }
.wpa-more-options summary::after { content:"+"; color:var(--wpa-blue); font-size:18px; font-weight:500; }
.wpa-more-options[open] summary::after { content:"−"; }
.wpa-more-options summary span { margin-left:auto; color:var(--wpa-muted); font-size:11px; font-weight:400; }
.wpa-more-options .wpa-fields-grid { padding-bottom:12px; }
.wpa-more-options .wpa-hint { margin:0 0 10px; }
.wpa-shop-options .wpa-accessory-catalog { max-height:240px; overflow:auto; }
.wpa-summary { margin-top:16px; padding-top:12px; }
.wpa-summary-size { font-size:22px; }
.wpa-bay-actions { margin-top:12px; padding-top:10px; border-top:1px solid var(--wpa-line); }
.wpa-bay-actions .wpa-square { width:36px; height:36px; }
.wpa-right-footer { margin-top:12px; padding-top:10px; border-top:1px solid var(--wpa-line); background:var(--wpa-panel); }
.wpa-body[data-has-cabinet="false"] .wpa-selected-title,.wpa-body[data-has-cabinet="false"] .wpa-config-grid,.wpa-body[data-has-cabinet="false"] .wpa-section-title,.wpa-body[data-has-cabinet="false"] .wpa-layouts,.wpa-body[data-has-cabinet="false"] .wpa-summary,.wpa-body[data-has-cabinet="false"] .wpa-bay-actions { display:none; }
.wpa-body[data-has-cabinet="false"] .wpa-add-cabinet { margin-bottom:8px; }
.wpa-body[data-has-cabinet="false"] .wpa-more-options:not(.wpa-autofit-options) { display:none; }
.wpa-body[data-has-cabinet="false"] .wpa-right-footer { margin-top:16px; }
.wpa-body[data-has-cabinet="false"] .wpa-right::after { content:"添加后即可在画布中拖动柜体，并继续设置尺寸。"; display:block; padding:13px 12px; border:1px dashed #cbd7d1; border-radius:5px; background:#f7faf8; color:#63716c; font-size:12px; line-height:1.6; }
.wpa-body[data-mode="furniture"] #wpStageDrawWall,.wpa-body[data-mode="furniture"] #wpStageRoomPanel,.wpa-body[data-mode="furniture"] #wpPlanCenter,.wpa-body[data-mode="furniture"] #wpStageAddCabinet { display:none; }
.wpa-body[data-mode="room"] #wpStageAddCabinet { display:none; }
.wpa-body[data-mode="furniture"] .wpa-canvas-tools { top:78px; }
@media (max-width:860px) { .wpa-config-grid { gap:8px; }.wpa-config-grid input,.wpa-config-grid select { height:38px; } }
@media (max-width:500px) { .wpa-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.wpa-config-grid label { grid-column:auto!important; } }
@media (max-width:860px) {
  .wpa-left,.wpa-right { top:40%; right:0; bottom:0; left:0; width:100%; max-height:none; padding:72px 16px 20px; border:0; border-top:1px solid var(--wpa-line); box-shadow:0 -8px 24px #26342c25; }
  .wpa-dock-tabs { top:40%; right:0; width:100%; padding:10px 16px; border:0; background:#fff; }
}
.wpa-canvas-tools .wpa-move-cabinet { display:flex; align-items:center; gap:8px; border:1px solid #0058a3; color:#0058a3; font-weight:700; }
.wpa-move-cabinet[aria-pressed="true"] { background:#0058a3; color:#fff; }
.wpa-move-cabinet:disabled { opacity:.5; }
.wpa-stage-status { position:absolute; z-index:4; left:18px; right:18px; bottom:72px; width:fit-content; max-width:calc(100% - 36px); margin:0; padding:9px 13px; border:1px solid #d5dfda; border-radius:6px; background:#fffffff2; box-shadow:0 3px 15px #25352d12; pointer-events:none; }
.wpa-stage-status:empty { display:none; }
.wpa-stage-status[data-error="true"] { color:#a03916; border-color:#e7bca9; }
@media (max-width:860px) {
  .wpa-body:not(.is-dock-collapsed) .wpa-stage { bottom:60%; }
  .wpa-canvas-tools { top:70px!important; gap:5px; }
  .wpa-canvas-tools .wpa-move-cabinet { display:flex!important; min-width:110px; min-height:36px; padding:6px 10px; font-size:12px; }
  .wpa-stage-status { left:12px; right:12px; bottom:12px; max-width:calc(100% - 24px); font-size:11px; padding:6px 9px; }
  .wpa-stage-bottom { display:none; }
}