.planning .click-prompt, .planning .controls-hint, .planning .joystick,
.planning .vertical-pad, .planning .walk-crosshair { display: none !important; }
.planning #canvas { cursor: crosshair; }
#planningPanel { position: fixed; z-index: 9; right: 16px; top: 156px; width: 320px; max-height: calc(100dvh - 178px); overflow: auto; padding: 18px; border: 1px solid #40536d; border-radius: 14px; background: #101b2cf5; color: #e5edf5; box-shadow: 0 12px 40px #0005; font-size: 12px; }
#planningPanel[hidden], .planning-labels[hidden], .planning-labels span[hidden] { display: none; }
#planningPanel h2 { font-size: 17px; margin-bottom: 10px; }
#planningPanel h3 { font-size: 14px; margin-top: 18px; }
#planningPanel p { color: #b3c4d6; line-height: 1.5; margin: 9px 0; }
#planningPanel label { display: grid; gap: 6px; margin: 12px 0; }
#planningPanel button, #planningPanel select, #planningPanel input { color: #e5edf5; background: #1b2a40; border: 1px solid #40536d; border-radius: 7px; padding: 8px; font: inherit; min-width: 0; }
#planningPanel input, #planningPanel select { width: 100%; }
#planningPanel input[type=range] { padding: 0; accent-color: #a7dfd1; }
#planningPanel button { cursor: pointer; }
#planningPanel button:disabled { opacity: .4; cursor: default; }
#planningPanel button[aria-pressed=true] { background: #a7dfd1; color: #102e29; }
#planningPanel .plan-row { display: flex; flex-wrap: wrap; gap: 5px; }
#planningPanel details { border-top: 1px solid #34475f; border-bottom: 1px solid #34475f; padding: 12px 0; margin-top: 12px; }
#planningPanel summary { cursor: pointer; }
#planningPanel .plan-small { font-size: 11px; }
#planMessage { color: #ffd278 !important; min-height: 36px; }
#planItems { list-style: none; }
#planItems li { display: grid; gap: 7px; padding: 12px 0; border-bottom: 1px solid #34475f; }
#planItems strong { color: #ffd278; font-size: 17px; }
#planItems small { color: #b3c4d6; line-height: 1.4; }
#planItems button { justify-self: end; }
.planning-labels { position: fixed; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.planning-labels span { position: absolute; border: 1px solid #ffd278; border-radius: 5px; background: #101b2ce8; color: #ffe1a9; padding: 5px 8px; font-size: 12px; max-width: 240px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #planningPanel { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; max-height: 36dvh; padding: 12px; }
  #planningPanel h2 { font-size: 15px; }
}
#planningPanel .plan-house, #planningPanel .plan-zones { border: 1px solid #547769; border-radius: 9px; padding: 12px; margin: 14px 0; background: #182f30; }
#planningPanel .plan-house h3, #planningPanel .plan-zones h3 { margin-top: 0; }
#planningPanel .plan-house .plan-row label { flex: 1; min-width: 70px; }
#planningPanel .plan-house details { margin-bottom: 12px; }
#planningPanel .plan-elements { padding: 12px; margin: 14px 0; border: 1px solid #4d7494; border-radius: 9px; background: #182b3b; }
#planningPanel .plan-elements h3 { margin-top: 0; }
#planningPanel .plan-elements .plan-row label { flex: 1; min-width: 75px; }
.planning-handles { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
.planning-handles[hidden], .plan-handle[hidden], #planElementEditor[hidden] { display: none; }
.plan-handle { position: absolute; pointer-events: auto; touch-action: none; transform: translate(-50%, -50%); border: 2px solid #9ad9ef; border-radius: 8px; color: white; background: #14384deb; padding: 6px 10px; min-height: 34px; font: 12px system-ui; cursor: grab; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-handle:active { cursor: grabbing; }
.plan-handle:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.plan-handle-rotate { border-color: #ffd278; border-radius: 22px; background: #594219ed; min-width: 56px; min-height: 38px; }
.plan-handle.selected { border-color: #fff; box-shadow: 0 0 0 2px #ffffff44; }
#planSignIn[hidden], .planning-toast[hidden] { display: none; }
#planningPanel #planSync.synced { color: #a7e9b5; }
.planning-toast { position: fixed; z-index: 40; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 20px; border: 1px solid #77d599; border-radius: 12px; background: #164b30; color: #effff3; box-shadow: 0 8px 30px #0006; font: 14px/1.4 system-ui; overflow-wrap: anywhere; pointer-events: none; }
.planning-toast.saving { background: #1b354f; border-color: #85adc9; color: #eef7ff; }