:root{--primary-color:#f4f4f4;--secondary-color:#ffffff;--accent-color:#FF7D00;--text-color:#333;--border-color:#dddddd;--primary-dark:#404040;--secondary-dark:#092C5B}html{font-size:16px}body{font-family:'Segoe UI','Microsoft JhengHei',Arial,sans-serif;margin:0;padding:0;background-color:var(--primary-color);color:var(--text-color);line-height:1.7}.page-container{display:flex;flex-direction:column;gap:15px;padding:15px;max-width:1600px;margin:0 auto}.panel{background-color:var(--secondary-color);padding:20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);width:100%;box-sizing:border-box;border:1px solid var(--border-color)}h1{text-align:center;width:100%;margin-bottom:10px;padding-top:10px;font-size:1.8rem;color:var(--secondary-dark)}h2{font-size:1.4rem;margin-bottom:15px;color:var(--primary-dark);}h3{font-size:1.2rem;margin-bottom:12px;color:var(--secondary-dark);}label{display:block;margin-bottom:6px;font-weight:600;color:var(--text-color);font-size:1rem}input[type="number"],input[type="text"]{width:100%;padding:10px;margin-bottom:15px;border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;font-size:1rem}button,.btn{color:white;padding:10px 16px;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .2s ease,border-color .2s ease,transform .2s ease;margin-right:8px;margin-bottom:8px;background-color:var(--accent-color)}button:hover,.btn:hover{background-color:#e66a00;transform:scale(1.03)}button:active,.btn:active{background-color:#cc5c00}.btn-primary{background-color:var(--accent-color)}.btn-primary:hover{background-color:#e66a00}.btn-primary:active{background-color:#cc5c00}.btn-secondary{background-color:#6c757d}.btn-secondary:hover{background-color:#5a6268}.btn-secondary:active{background-color:#545b62}.btn-danger{background-color:#dc3545}.btn-danger:hover{background-color:#c82333}.btn-danger:active{background-color:#bd2130}.btn-info{background-color:#17a2b8}.btn-info:hover{background-color:#138496}.btn-info:active{background-color:#117a8b}.btn-success{background-color:#28a745}.btn-success:hover{background-color:#218838}.btn-success:active{background-color:#1e7e34}.btn-special{background-color:var(--secondary-dark)}.btn-special:hover{background-color:#072244}.btn-special:active{background-color:#051830}#add-wall-btn.active{background-color:#dc3545;border-color:#c82333}#add-wall-btn.active:hover{background-color:#c82333}.palette-item{padding:10px;margin-bottom:10px;background-color:#f0f0f0;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;text-align:center;font-size:.9rem;transition:background-color .2s ease;word-break:break-word}.palette-item:hover{background-color:#e0e0e0}.palette-item.dragging{cursor:grabbing!important;background-color:#d0d0d0!important}.scrollable-bathroom-preview{overflow:auto;width:100%;min-height:300px;flex-grow:1;padding-bottom:5px;border:1px solid var(--border-color);background-color:#fdfdfd;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;align-items:flex-start}#bathroom-area-container{position:relative;display:flex;justify-content:center;align-items:center;padding:30px}#bathroom-area{background-color:#f9f9f9;background-image:linear-gradient(rgba(0,0,0,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px);border:2px solid var(--border-color);position:relative;overflow:visible;transform-origin:top left;display:inline-block;min-height:400px}.dimension-annotation-x,.dimension-annotation-y{position:absolute;color:#555;display:flex;align-items:center;background-color:rgba(255,255,255,.8);padding:2px 5px;border-radius:3px}.dimension-annotation-x{left:50%;transform:translateX(-50%);flex-direction:column}.dimension-annotation-y{top:50%;transform:translateY(-50%) rotate(-90deg);flex-direction:column}.dim-label{font-weight:bold;margin-right:5px}.dimension-annotation-y .dim-label{margin-right:0;margin-bottom:5px}#temp-wall-preview{position:absolute;background-color:rgba(255,125,0,.4);border:1px dashed var(--accent-color);pointer-events:none;z-index:1005}.placed-item{position:absolute;background-color:rgba(9,44,91,.7);border:1px dashed var(--secondary-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:move;user-select:none;box-sizing:border-box;transform-origin:center center;touch-action:none;transition:border-color .2s ease,box-shadow .2s ease}.placed-item.selected{border:2px solid var(--accent-color);box-shadow:0 0 8px rgba(255,125,0,.5);z-index:1000!important}.placed-item .item-label,.placed-item .item-dimensions{text-align:center;background-color:rgba(255,255,255,.0);border-radius:3px;margin-bottom:2px;color:var(--secondary-color);transition:opacity .15s ease-in-out,background-color .15s ease-in-out,padding .15s ease-in-out,box-shadow .15s ease-in-out;opacity:.8;pointer-events:none}.placed-item .item-label{font-size:1em;white-space:normal;word-break:break-word;overflow-wrap:break-word;max-width:98%;padding:4px 8px;background-color:rgba(255,255,255,.92);color:var(--primary-dark);border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.12);margin:0 auto 2px auto;opacity:.92}.placed-item .item-dimensions{font-size:.75em;padding:1px 3px;background-color:rgba(255,255,255,.7)}.placed-item.selected .item-label{opacity:1;background-color:rgba(255,255,255,.95);padding:5px 10px;box-shadow:0 1px 5px rgba(9,44,91,.3)}.placed-item.selected .item-dimensions{opacity:1;background-color:rgba(255,255,255,.9);padding:2px 5px}.placed-item[data-type="wall-segment"]{background-color:var(--primary-dark);border:1px solid #202020;background-image:repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(255,255,255,.1) 9px,rgba(255,255,255,.1) 10px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,255,255,.05) 19px,rgba(255,255,255,.05) 20px);background-size:20px 10px;overflow:visible}.placed-item[data-type="wall-segment"] .item-label,.placed-item[data-type="wall-segment"] .item-dimensions{color:#f0f0f0;background-color:rgba(0,0,0,.5);opacity:.9}.placed-item[data-type="wall-segment"] .item-label{padding:2px 4px;font-size:.85em;max-width:95%}.placed-item[data-type="wall-segment"] .item-dimensions{padding:1px 3px;font-size:.7em}.placed-item[data-type="wall-segment"].selected .item-label,.placed-item[data-type="wall-segment"].selected .item-dimensions{background-color:rgba(0,0,0,.7);opacity:1}.placed-item[data-type="wall-segment"].selected .item-label{padding:3px 5px}.placed-item[data-type="wall-segment"].selected .item-dimensions{padding:2px 4px}.wall-end-cap{position:absolute;top:0;z-index:-1;background-color:var(--primary-dark);border:1px solid #202020;background-image:repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(255,255,255,.1) 9px,rgba(255,255,255,.1) 10px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,255,255,.05) 19px,rgba(255,255,255,.05) 20px);background-size:20px 10px;box-sizing:border-box}.rotate-handle,.delete-handle,.resize-handle{width:22px;height:22px;border-radius:50%;position:absolute;display:none;color:white;font-size:14px;text-align:center;line-height:22px;font-weight:bold;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:10}.rotate-handle{background-color:#4caf50;border:1px solid #388e3c;top:-11px;left:calc(50% - 11px);cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-repeat" viewBox="0 0 16 16"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.5A5.002 5.002 0 0 0 8 3zM3.5 13c1.552 0 2.94-.707-3.857-1.818a.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.5A5.002 5.002 0 0 0 8 13z"/></svg>') 8 8,auto}.delete-handle{background-color:#f44336;border:1px solid #d32f2f;top:-11px;right:-11px;cursor:pointer}.resize-handle{background-color:#2196F3;border:1px solid #1976D2;cursor:ew-resize}.resize-handle.start{left:-11px;top:calc(50% - 11px)}.resize-handle.end{right:-11px;top:calc(50% - 11px)}.placed-item.selected .rotate-handle,.placed-item.selected .delete-handle{display:block}.placed-item[data-type="wall-segment"].selected .resize-handle{display:block}.cta-section a{color:var(--accent-color);text-decoration:none;display:block;margin-bottom:8px;padding:10px;border-radius:4px;background-color:var(--secondary-color);border:1px solid var(--border-color);font-size:.9rem}.cta-section a:hover{text-decoration:underline;background-color:#f9f9f9}.cta-section .google-link{background-color:#e8f0fe;border-color:#d2e3fc;}.cta-section .google-link:hover{background-color:#dce7fd;}.cta-section.mobile-cta{display:block}.cta-section.desktop-cta{display:none}.cta-links-container{min-height:100px}.actions{margin-top:15px;text-align:center;padding:10px 0;border-top:1px solid var(--border-color);background:#fdfdfd;border-radius:0 0 8px 8px}.action-divider{display:inline-block;width:1px;background-color:#ccc;height:24px;margin:0 10px;vertical-align:middle}#add-custom-item-btn{margin-top:10px;}.instructions-section ul{padding-left:20px;font-size:.9rem;color:#555;margin-bottom:0;}.instructions-section li{margin-bottom:6px;}.instructions-section.desktop{display:none}.instructions-section.mobile{display:block}@media (min-width:992px){.page-container{display:grid;grid-template-columns:360px 1fr;grid-template-rows:auto 1fr;gap:20px;height:calc(100vh - 20px);padding:10px 20px;transition:grid-template-columns .3s ease-in-out}h1{grid-column:1 / -1;margin-bottom:15px;padding-top:0;}.sidebar-wrapper{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:15px;overflow-y:auto;padding-right:5px;max-height:calc(100vh - 100px);transition:transform .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease-in-out}.main-content-wrapper{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:15px;overflow-y:auto;max-height:calc(100vh - 100px)}.bathroom-wrapper{flex-grow:1;display:flex;flex-direction:column;min-height:0}.scrollable-bathroom-preview{min-height:450px}.instructions-section.mobile{display:none}.instructions-section.desktop{display:block}.cta-section.mobile-cta{display:none}.cta-section.desktop-cta{display:block}}#sidebar-toggle-btn{display:none}@media (min-width:992px){#sidebar-toggle-btn{display:block;position:absolute;top:28px;left:10px;z-index:1010;width:40px;height:40px;padding:0;font-size:1.5rem;line-height:40px;text-align:center;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2)}.page-container.sidebar-collapsed{grid-template-columns:0 1fr}.page-container.sidebar-collapsed .sidebar-wrapper{transform:translateX(-110%);padding:0;opacity:0;pointer-events:none}.page-container.sidebar-collapsed #sidebar-toggle-btn{left:10px}}body.drawing-mode #bathroom-area{cursor:crosshair}@media (max-width:380px){h1{font-size:1.4rem;}h2{font-size:1.1rem;}h3{font-size:1rem;}button,input{font-size:.85rem;}.palette-item{font-size:.8rem;}.placed-item .item-label{font-size:.9em;padding:3px 6px}.placed-item .item-dimensions{font-size:.7em}.rotate-handle,.delete-handle{width:20px;height:20px;line-height:20px;font-size:12px;top:-10px;}.rotate-handle{left:calc(50% - 10px);}.delete-handle{right:-10px;}}.ghost-image{position:absolute;pointer-events:none;opacity:.6;z-index:9999;transition:none}#bathroom-area.drag-over{border:3px dashed var(--accent-color);box-shadow:inset 0 0 15px rgba(255,125,0,.2)}.sidebar-tabs{display:flex;background-color:var(--primary-color);border-radius:8px 8px 0 0;overflow:hidden;border-bottom:1px solid var(--border-color)}.tab-link{flex:1;padding:12px 10px;background-color:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:.9rem;font-weight:600;color:#666;transition:background-color .2s,border-color .2s,color .2s;margin:0;border-radius:0}.tab-link:hover{background-color:#f0f0f0;color:var(--primary-dark)}.tab-link.active{background-color:var(--secondary-color);border-bottom:3px solid var(--accent-color);color:var(--accent-color)}.sidebar-content{border:1px solid var(--border-color);border-top:none;border-radius:0 0 8px 8px;background-color:var(--secondary-color)}.tab-content{display:none;padding:0}.tab-content.active{display:block}.tab-content .panel{box-shadow:none;border-radius:0;border:none;margin-bottom:0}.shepherd-element{background:var(--secondary-color);border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.2);max-width:380px}.shepherd-header{background-color:var(--secondary-dark);padding:12px 18px;border-radius:8px 8px 0 0}.shepherd-title{color:white;font-weight:600;font-size:1.1rem}.shepherd-text{padding:18px;font-size:.95rem;line-height:1.6;color:var(--text-color)}.shepherd-button{background-color:var(--accent-color);color:white;padding:8px 16px;border-radius:4px;font-size:.9rem;transition:background-color .2s;margin-right:8px}.shepherd-button:hover{background-color:#e66a00}.shepherd-button.shepherd-button-secondary{background-color:#e0e0e0;color:var(--text-color)}.shepherd-button.shepherd-button-secondary:hover{background-color:#ccc}.shepherd-arrow::before{background-color:var(--secondary-color)}#wall-draw-status,#scale-info{font-size:.9em;color:var(--text-color)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:none;justify-content:center;align-items:center;z-index:2000;animation:fadeIn .3s ease-out}.modal-content{background-color:var(--secondary-color);padding:25px;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.3);width:90%;max-width:450px;text-align:center;animation:scaleIn .3s ease-out}.modal-content h3{margin-top:0;color:var(--text-color)}.modal-content p{margin-bottom:20px;color:#555}.modal-buttons{display:flex;justify-content:center;gap:15px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu{display:none;position:absolute;z-index:1500;background-color:var(--secondary-color);border:1px solid var(--border-color);border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.2);padding:5px 0;min-width:150px}.context-menu button{display:block;width:100%;padding:8px 15px;text-align:left;border:none;background-color:transparent;color:var(--text-color);cursor:pointer;font-size:.9rem}.context-menu button:hover{background-color:var(--primary-color)}.context-menu button.danger{color:#dc3545}.context-menu button.danger:hover{background-color:#fbe9eb}