* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {

  width: 100%;

  min-height: 100%;

  font-family: Arial, sans-serif;

  background: #f3f4f6;
}

.planner-modal.active{

  overflow:hidden;
}

.planner-wrapper {

  position: relative;

  width: 100vw;

  height: 100vh;

  overflow: hidden;
}

#planner{
  width:100%;
  height:100%;
  display:block;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #f8fafc;
  cursor: crosshair;
}

.info-box {
  position: fixed;

  top: 20px;
  left: 20px;

  padding: 12px 16px;

  background: rgba(255,255,255,0.95);

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  z-index: 100;
}

.info-box p {
  font-size: 14px;
  color: #111827;
  margin-bottom: 6px;
}

.info-box p:last-child {
  margin-bottom: 0;
}

.planner-task-list {
  display: none;
}

.toolbar {

  position: absolute;

  top: 20px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 10px;

  padding: 10px;

  background:
    rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);

  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

  z-index: 999;
}

.tool {

  border: none;

  padding: 12px 18px;

  border-radius: 14px;

  background: white;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;

  white-space: nowrap;
}

.tool:hover {
  transform: translateY(-2px);
}

.tool.active {
  background: #2563eb;
  color: white;
}

.dimension-modal-overlay {

  position: fixed;

  inset: 0;

  z-index: 1600;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  background: rgba(15, 23, 42, 0.28);

  backdrop-filter: blur(6px);
}

.dimension-modal {

  width: min(420px, 100%);

  padding: 22px;

  border: 1px solid rgba(148, 163, 184, 0.28);

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.98);

  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.22);

  display: grid;

  gap: 14px;
}

.dimension-modal-icon {

  width: 44px;
  height: 44px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #e0f2fe;

  color: #0284c7;

  font-size: 12px;
  font-weight: 800;
}

.dimension-modal-copy h3 {

  font-size: 20px;
  line-height: 1.2;

  color: #0f172a;
}

.dimension-modal-copy p {

  margin-top: 4px;

  font-size: 14px;
  line-height: 1.45;

  color: #64748b;
}

.dimension-modal label {

  display: grid;

  gap: 7px;

  font-size: 13px;
  font-weight: 700;

  color: #334155;
}

.dimension-input-wrap {

  display: flex;

  align-items: center;

  border: 1px solid #cbd5e1;

  border-radius: 8px;

  overflow: hidden;

  background: #ffffff;
}

.dimension-input-wrap:focus-within {

  border-color: #0ea5e9;

  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
}

.dimension-input-wrap input {

  width: 100%;

  min-width: 0;

  border: 0;

  padding: 13px 14px;

  outline: none;

  font-size: 18px;
  font-weight: 700;

  color: #0f172a;
}

.dimension-input-wrap small {

  padding: 0 14px;

  color: #64748b;

  font-size: 13px;
  font-weight: 700;
}

.dimension-range-field {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.dimension-range-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #0f172a;
}

.dimension-range-value output {
  min-width: 3ch;
  text-align: right;
  font-size: 22px;
  font-weight: 900;
}

.dimension-range-value small {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.dimension-range-field input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.dimension-range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #dbeafe;
}

.dimension-range-field input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  appearance: none;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.36);
}

.dimension-range-field input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #dbeafe;
}

.dimension-range-field input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.36);
}

.dimension-range-field input[type="range"]:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.22);
  outline-offset: 2px;
}

.dimension-range-limits {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.dimension-modal-error {

  min-height: 18px;

  font-size: 13px;
  font-weight: 700;

  color: #dc2626;
}

.dimension-modal-actions {

  display: flex;

  justify-content: flex-end;

  gap: 10px;
}

.dimension-modal-actions button {

  border: 0;

  border-radius: 8px;

  padding: 12px 16px;

  font-size: 14px;
  font-weight: 800;

  cursor: pointer;
}

.dimension-cancel {

  background: #f1f5f9;

  color: #334155;
}

.dimension-submit {

  background: #0ea5e9;

  color: #ffffff;

  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.28);
}

.room-panel {

  position: absolute;

  top: 90px;
  left: 20px;

  width: 420px;

  padding: 20px;

  background: rgba(255,255,255,0.95);

  border-radius: 24px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

  display: flex;

  gap: 18px;

  z-index: 1000;
}





.room-title {

  position: absolute;

  top: -28px;
  left: 0;

  font-size: 14px;
  font-weight: 700;

  color: #111827;
}





.room-card {

  width: 120px;
  height: 150px;

  border-radius: 16px;

  border: 2px solid #e5e7eb;

  background: #f9fafb;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 14px;

  cursor: pointer;

  transition: 0.2s;

  position: relative;
}





.room-card:hover {

  transform: translateY(-3px);

  border-color: #3b82f6;
}





.room-card.active {

  border-color: #2563eb;

  background:
    rgba(59,130,246,0.08);
}





.room-label {

  font-size: 14px;
  font-weight: 600;

  color: #111827;
}





.shape {

  width: 72px;
  height: 72px;

  border: 3px solid #111827;

  background:
    rgba(59,130,246,0.15);
}
.room-card svg {

  display: block;

  margin: 0 auto 10px auto;
}

.room-card {

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.kitchen-layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px;
  color: #111827;
  font: inherit;
  text-align: center;
}

.kitchen-layout-card svg {
  flex: 0 0 auto;
  color: #334155;
}

.kitchen-layout-card strong {
  font-size: 16px;
  line-height: 1.2;
}

.kitchen-layout-card span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.kitchen-layout-card:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.32);
  outline-offset: 3px;
}

.room-card:hover {

  transform: translateY(-2px);

  border-color: #2563eb;

  box-shadow:
    0 10px 25px rgba(37,99,235,0.12);

  cursor: pointer;
}

.room-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}

@media (max-width:768px){

  .planner-wrapper{

    width:100vw;
    height:100dvh;

    overflow:hidden;

    touch-action:none;

    background:#f3f4f6;
  }

  #planner{

    width:100%;
    height:100%;
  }

  canvas{

    width:100%;
    height:100%;

    touch-action:none;
  }

  .info-box{

    top:12px;
    left:12px;
    right:12px;

    width:auto;

    padding:10px 14px;

    border-radius:16px;

    z-index:1000;
  }

  .info-box p{

    font-size:12px;

    margin-bottom:4px;
  }

  /* 🔥 TOOLBAR */

  .toolbar{

    position:fixed;

    left:12px;
    right:12px;
    bottom:12px;

    top:auto;

    transform:none;

    width:auto;

    display:flex;

    justify-content:space-between;

    gap:10px;

    padding:12px;

    border-radius:24px;

    z-index:3000;
  }

  .tool{

    flex:1;

    height:54px;

    padding:0 14px;

    border-radius:18px;

    font-size:15px;

    font-weight:700;
  }

  /* 🔥 ROOM PANEL */

  .room-panel{

    position:fixed;

    left:12px;
    right:12px;

    top:90px;

    bottom:95px;

    width:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    overflow-y:auto;

    padding:18px;

    border-radius:28px;

    z-index:2000;
  }

  .room-card{

    width:100%;

    height:150px;

    border-radius:22px;
  }

  .room-card svg{

    width:54px;
    height:54px;
  }

  .room-label{

    font-size:14px;

    text-align:center;

    line-height:1.4;
  }

  .room-title{

    position:static;

    grid-column:1/-1;

    margin-bottom:4px;

    font-size:14px;
  }
}

@media (max-width:768px){

  .room-panel{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    border-radius:0;

    padding:20px;

    overflow-y:auto;

    z-index:99999;

    background:#fff;

    display:flex;

    flex-direction:column;

    gap:16px;
  }

  .room-grid{

    grid-template-columns:
      repeat(2,1fr);

    gap:14px;
  }

  .room-card{

    width:100%;

    height:140px;
  }

  .toolbar{

    position:fixed;

    bottom:20px;

    left:50%;

    top:auto;

    transform:translateX(-50%);

    width:95%;

    overflow-x:auto;

    padding:12px;
  }

  .tool{

    flex-shrink:0;
  }

  .info-box{

    top:10px;

    left:10px;

    right:10px;

    width:auto;
  }
}

canvas{
  touch-action:none;
}

@media (max-width: 768px){

  .toolbar{

    left: 12px;
    right: 12px;

    width: auto;

    transform: none;





    display: flex;

    gap: 10px;

    justify-content: space-between;

    align-items: center;





    padding: 12px;

    border-radius: 24px;
  }






  .tool{

    flex: 1;

    min-width: 0;





    font-size: 18px;

    padding: 18px 12px;

    border-radius: 20px;
  }
}

@media (max-width: 768px){

  .planner-save-btn{

    top: 20px;
    right: 200px;

    bottom: auto;
    left: auto; 

    transform: none;

    padding: 12px 18px;

    font-size: 14px;

    border-radius: 14px;

    z-index: 2001;
  }

  .planner-close{

    top: 20px;
    right: 20px;

    width: 72px;
    height: 72px;

    z-index: 2002;
  }

}


.room-height-box{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 16px;

  background:#ffffff;

  border:1px solid #d1d5db;

  border-radius:14px;

  min-width:170px;
}

#roomHeight{

  width:80px;

  border:none;

  background:transparent;

  font-size:18px;

  font-weight:600;

  color:#111827;

  outline:none;
}

.toolbar{

  background:white;

  border-radius:18px;

  box-shadow:
  0 4px 20px rgba(0,0,0,.06);

  padding:12px;
}

.tool.active{

  background:#2563eb;

  color:white;

  box-shadow:
  0 8px 20px
  rgba(37,99,235,.25);
}

.toolbar{

  display:flex;
  align-items:center;
  gap:10px;

  padding:12px;

  background:#ffffff;

  border-radius:18px;

  box-shadow:
    0 6px 24px rgba(0,0,0,.06);
}

.tool{

  display:flex;
  align-items:center;
  gap:8px;

  padding:12px 16px;

  border:none;

  background:transparent;

  border-radius:12px;

  cursor:pointer;

  font-weight:600;

  transition:.2s;
}

.tool:hover{

  background:#f3f4f6;
}

.tool.active{

  background:#2563eb;

  color:#ffffff;
}

.tool svg{

  width:18px;
  height:18px;
}

.toolbar-spacer{

  flex:1;
}

.room-height-box{

  position:absolute;

  top:18px;
  right:22px;

  z-index:1200;

  display:flex;
  flex-direction:column;

  gap:6px;

  padding:12px 16px;

  border:1px solid #e5e7eb;

  border-radius:14px;

  background:#fafafa;
}

.room-height-label{

  display:flex;
  align-items:center;
  gap:6px;

  font-size:12px;

  color:#6b7280;
}

.room-height-input{

  display:flex;
  align-items:center;
  gap:8px;
}

.room-height-input input{

  width:70px;

  border:none;

  background:transparent;

  font-size:18px;

  font-weight:700;

  color:#111827;

  outline:none;
}

.room-height-input span{

  font-weight:600;

  color:#6b7280;
}

@media (max-width: 768px) {
  .desktop-only-tool {
    display: none !important;
  }
}
#openingTool[hidden],
#innerWallTool[hidden] {
  display: none !important;
}

/* Form-selected appliances stay hidden in both toolbar layouts. */
#plannerContainer .planner-tool[hidden]{display:none!important;}
#plannerDeleteSelected[hidden]{display:none!important;}