*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --cream:#F5F0E8;--warm:#FDFAF5;--charcoal:#1E1E1A;--terra:#C4663A;
  --sage:#7A9E7E;--sand:#D4B896;--muted:#8A8578;--border:#E2DBD0;
  --panel:#F9F5EF;--dark:#1A1814;--warn:#E5A83A;--good:#7A9E7E;
}
html,body{height:100%;overflow:hidden;font-family:'DM Sans',sans-serif;font-weight:300;background:var(--charcoal);color:var(--charcoal);}
.topbar{height:46px;background:var(--dark);display:flex;align-items:center;justify-content:space-between;padding:0 1.2rem;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;z-index:50;}
.logo{font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;text-decoration:none;}
.logo em{color:var(--terra);font-style:italic;}
.top-tools{display:flex;align-items:center;gap:0.35rem;flex-wrap:nowrap;}
.tool-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.7);padding:0.3rem 0.65rem;border-radius:2px;font-family:'DM Sans',sans-serif;font-size:0.75rem;cursor:pointer;display:flex;align-items:center;gap:0.3rem;transition:all 0.15s;white-space:nowrap;}
.tool-btn:hover{background:rgba(255,255,255,0.12);color:#fff;}
.tool-btn.active{background:var(--terra);border-color:var(--terra);color:#fff;}
.tool-sep{width:1px;height:20px;background:rgba(255,255,255,0.1);margin:0 0.1rem;}
.tool-sep-lg{width:1px;height:20px;background:rgba(255,255,255,0.18);margin:0 0.5rem;}
.tool-btn-accent{background:rgba(196,102,58,0.18);border-color:rgba(196,102,58,0.5);color:rgba(255,255,255,0.9);}
.tool-btn-accent:hover{background:rgba(196,102,58,0.35);border-color:var(--terra);color:#fff;}

.unit-toggle{display:flex;align-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;}
.unit-btn{background:transparent;border:none;color:rgba(255,255,255,0.55);padding:0.3rem 0.55rem;font-family:'DM Sans',sans-serif;font-size:0.73rem;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.unit-btn:hover{color:#fff;background:rgba(255,255,255,0.08);}
.unit-btn.active{background:var(--terra);color:#fff;}
.modal-unit-toggle{display:flex;gap:0.4rem;margin-bottom:1.2rem;}
.modal-unit-btn{flex:1;padding:0.45rem;border:1.5px solid var(--border);border-radius:2px;background:var(--panel);font-family:'DM Sans',sans-serif;font-size:0.8rem;cursor:pointer;text-align:center;transition:all 0.15s;color:var(--charcoal);}
.modal-unit-btn:hover{border-color:var(--terra);}
.modal-unit-btn.active{border-color:var(--terra);background:rgba(196,102,58,0.08);color:var(--terra);font-weight:500;}
.app-body{display:flex;height:calc(100vh - 46px);}
.sidebar-left{width:200px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.sidebar-title{padding:0.7rem 0.9rem 0.45rem;font-size:0.67rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);}
.search-box{padding:0.45rem 0.65rem;border-bottom:1px solid var(--border);}
.search-box input{width:100%;background:#fff;border:1px solid var(--border);padding:0.32rem 0.5rem;border-radius:2px;font-size:0.77rem;font-family:'DM Sans',sans-serif;color:var(--charcoal);}
.search-box input:focus{outline:none;border-color:var(--terra);}
.furniture-cats{flex:1;overflow-y:auto;padding:0.35rem 0;}
.furniture-cats::-webkit-scrollbar{width:3px;}
.furniture-cats::-webkit-scrollbar-thumb{background:var(--border);}
.cat-header{padding:0.38rem 0.85rem;font-size:0.67rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;display:flex;justify-content:space-between;user-select:none;}
.cat-header:hover{color:var(--charcoal);}
.cat-items{padding:0.18rem 0.45rem;display:flex;flex-direction:column;gap:2px;}
.furn-item{display:flex;align-items:center;gap:0.5rem;padding:0.42rem 0.5rem;border-radius:2px;cursor:grab;border:1px solid transparent;transition:all 0.12s;user-select:none;}
.furn-item:hover{background:#fff;border-color:var(--border);}
.furn-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0;}
.furn-name{font-size:0.76rem;line-height:1.2;}
.furn-dims{font-size:0.63rem;color:var(--muted);}
.canvas-area{flex:1;background:#E8EEF4;position:relative;overflow:hidden;}
.canvas-bg{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(100,120,160,0.12) 1px,transparent 1px);background-size:22px 22px;pointer-events:none;}
#roomCanvas{position:relative;cursor:default;box-shadow:0 8px 32px rgba(80,100,140,0.18),0 2px 8px rgba(80,100,140,0.10);}
.room-svg{position:absolute;top:0;left:0;}
.furniture-on-canvas{position:absolute;cursor:grab;user-select:none;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1.5px solid transparent;border-radius:3px;filter:drop-shadow(0 2px 4px rgba(60,80,120,0.18));}
.furniture-on-canvas:hover{border-color:rgba(80,120,200,0.5);box-shadow:0 0 0 3px rgba(80,120,200,0.12);z-index:10!important;filter:drop-shadow(0 4px 8px rgba(60,80,120,0.25));}
.furniture-on-canvas.selected{border-color:#4878D0!important;box-shadow:0 0 0 3px rgba(72,120,208,0.25)!important;z-index:20!important;filter:drop-shadow(0 4px 10px rgba(60,80,140,0.3));}
.furn-label{font-size:9px;color:#1A2840;font-family:'DM Sans',sans-serif;text-align:center;line-height:1.2;padding:1px 4px;pointer-events:none;background:rgba(255,255,255,0.88);border-radius:3px;border:1px solid rgba(80,120,200,0.2);}
.furn-emoji{font-size:1.25rem;pointer-events:none;line-height:1;}
.rotate-handle{position:absolute;top:-20px;right:-20px;width:18px;height:18px;background:var(--terra);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;color:#fff;opacity:0;transition:opacity 0.15s;}
.furniture-on-canvas.selected .rotate-handle{opacity:1;}
.delete-handle{position:absolute;top:-20px;left:-20px;width:18px;height:18px;background:#E06C75;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;color:#fff;opacity:0;transition:opacity 0.15s;}
.furniture-on-canvas.selected .delete-handle{opacity:1;}
.measure-tip{position:absolute;background:rgba(0,0,0,0.75);color:#fff;font-size:0.63rem;padding:2px 6px;border-radius:2px;pointer-events:none;white-space:nowrap;z-index:100;display:none;}
.zoom-controls{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0.35rem;background:rgba(30,45,80,0.82);backdrop-filter:blur(8px);border:1px solid rgba(150,180,230,0.25);border-radius:4px;padding:0.22rem 0.4rem;}
.zoom-btn{background:transparent;border:none;color:rgba(255,255,255,0.7);font-size:0.9rem;cursor:pointer;padding:0.12rem 0.38rem;border-radius:2px;transition:all 0.12s;}
.zoom-btn:hover{background:rgba(255,255,255,0.1);color:#fff;}
.zoom-label{font-size:0.68rem;color:rgba(255,255,255,0.5);min-width:32px;text-align:center;}
.mode-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(196,102,58,0.93);border-radius:3px;padding:0.32rem 1rem;font-size:0.76rem;color:#fff;font-weight:500;pointer-events:none;display:none;letter-spacing:0.02em;white-space:nowrap;}
.mode-banner.visible{display:block;}
.sidebar-right{width:210px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.panel-tabs{display:flex;border-bottom:1px solid var(--border);}
.panel-tab{flex:1;padding:0.62rem 0.35rem;font-size:0.68rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;text-align:center;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all 0.15s;}
.panel-tab.active{color:var(--terra);border-bottom-color:var(--terra);}
.panel-content{flex:1;overflow-y:auto;padding:0.85rem;}
.panel-content::-webkit-scrollbar{width:3px;}
.panel-content::-webkit-scrollbar-thumb{background:var(--border);}






}












.prop-empty{text-align:center;padding:1.5rem 0.5rem;font-size:0.77rem;color:var(--muted);line-height:1.6;}
.prop-section{margin-bottom:0.95rem;}
.prop-label{font-size:0.66rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:0.32rem;}
.prop-name{font-family:'Playfair Display',serif;font-size:0.97rem;font-weight:700;margin-bottom:0.55rem;}
.prop-row{display:flex;gap:0.38rem;margin-bottom:0.38rem;}
.prop-field{flex:1;}
.prop-field label{display:block;font-size:0.63rem;color:var(--muted);margin-bottom:0.16rem;}
.prop-field input{width:100%;background:#fff;border:1px solid var(--border);padding:0.28rem 0.42rem;border-radius:2px;font-size:0.77rem;font-family:'DM Sans',sans-serif;}
.prop-field input:focus{outline:none;border-color:var(--terra);}
.prop-colors{display:flex;gap:0.32rem;flex-wrap:wrap;margin-top:0.18rem;}
.color-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.12s;}
.color-swatch.active,.color-swatch:hover{border-color:var(--charcoal);}
.prop-btn{width:100%;background:var(--charcoal);color:#fff;border:none;padding:0.42rem;border-radius:2px;font-family:'DM Sans',sans-serif;font-size:0.77rem;cursor:pointer;margin-top:0.32rem;transition:background 0.15s;}
.prop-btn:hover{background:var(--terra);}
.prop-btn.danger{background:#E06C75;}
.prop-btn.danger:hover{background:#c0506a;}
.warn-strip{padding:0.42rem 0.75rem;background:#FFF8ED;border-top:1px solid rgba(229,168,58,0.3);font-size:0.71rem;color:#7A5820;display:flex;align-items:center;gap:0.4rem;min-height:28px;}
.warn-strip.ok{background:#F0F7F1;border-top-color:rgba(122,158,126,0.3);color:#3A6040;}
/* TOAST */
.toast-wrap{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.toast{background:var(--charcoal);color:#fff;padding:0.55rem 1.1rem 0.55rem 0.85rem;border-radius:4px;font-size:0.8rem;display:flex;align-items:center;gap:0.6rem;box-shadow:0 8px 24px rgba(0,0,0,0.35);animation:toastIn 0.25s ease both;white-space:nowrap;border-left:3px solid #E06C75;}
.toast.ok{border-left-color:var(--sage);}
.support-toast{background:var(--charcoal);color:#fff;padding:1rem 1.2rem;border-radius:4px;font-size:0.82rem;box-shadow:0 8px 32px rgba(0,0,0,0.45);animation:toastIn 0.25s ease both;border-left:3px solid var(--terra);max-width:420px;line-height:1.5;pointer-events:all;}
.support-toast-msg{color:rgba(255,255,255,0.85);margin-bottom:0.75rem;}
.support-toast-actions{display:flex;gap:0.5rem;align-items:center;}
.support-toast-btn{background:var(--terra);color:#fff;border:none;padding:0.4rem 0.9rem;border-radius:3px;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;transition:background 0.15s;white-space:nowrap;}
.support-toast-btn:hover{background:#b05530;}
.support-toast-dismiss{background:transparent;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.5);padding:0.4rem 0.7rem;border-radius:3px;font-family:'DM Sans',sans-serif;font-size:0.78rem;cursor:pointer;transition:all 0.15s;}
.support-toast-dismiss:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}
.furniture-on-canvas.overlapping{outline:2.5px solid #E06C75!important;outline-offset:1px;}
/* Wall elements (windows/doors) as draggable DOM nodes */
.wall-elem{position:absolute;cursor:grab;z-index:15;user-select:none;display:flex;align-items:center;justify-content:center;}
.wall-elem:hover .wall-delete{opacity:1;}
.wall-elem.selected-wall{outline:2px solid var(--terra);outline-offset:2px;}
.wall-delete{position:absolute;top:-18px;left:2px;width:16px;height:16px;background:#E06C75;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;color:#fff;opacity:0;transition:opacity 0.15s;z-index:30;}
.wall-rotate{position:absolute;top:-18px;right:2px;width:16px;height:16px;background:var(--terra);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;color:#fff;opacity:0;transition:opacity 0.15s;z-index:30;}
.wall-elem:hover .wall-delete,.wall-elem:hover .wall-rotate{opacity:1;}
.wall-label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(20,20,16,0.7);color:#fff;font-size:8px;padding:1px 4px;border-radius:2px;pointer-events:none;}


/* Collapsible sidebar */
.sidebar-left.collapsed{width:32px;}
.sidebar-left.collapsed .sidebar-title,
.sidebar-left.collapsed .search-box,
.sidebar-left.collapsed .furniture-cats{display:none;}
.sidebar-toggle{
  position:absolute;top:50%;right:-12px;transform:translateY(-50%);
  width:24px;height:40px;background:var(--panel);border:1px solid var(--border);
  border-left:none;border-radius:0 4px 4px 0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;color:var(--muted);z-index:10;transition:all 0.15s;
}
.sidebar-toggle:hover{background:var(--cream);color:var(--charcoal);}
.sidebar-left{position:relative;transition:width 0.2s ease;}

/* ── MOBILE RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px){
  /* ── MOBILE BASE ─────────────────────────────────────────────── */
  html,body{overflow:hidden!important;}
  .topbar{padding:0 0.6rem;height:48px;overflow-x:auto;}
  .top-tools{gap:0.25rem;}
  .tool-btn{padding:0.28rem 0.5rem;font-size:0.7rem;}
  .unit-btn{padding:0.28rem 0.42rem;font-size:0.7rem;}

  /* Stack layout: topbar → furniture → ptz → canvas (fills rest) */
  .app-body{
    flex-direction:column;
    height:calc(100vh - 48px);
    height:calc(100dvh - 48px);
    overflow:hidden;
    position:relative;
    display:flex;
  }

  /* Furniture strip */
  .sidebar-left{
    width:100%;height:72px;flex-shrink:0;
    border-right:none;border-bottom:1px solid var(--border);
    flex-direction:row;overflow:hidden;
  }
  .sidebar-title{display:none;}
  .search-box{display:none;}
  .furniture-cats{
    display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:0.3rem 0.5rem;gap:0.3rem;white-space:nowrap;
    scrollbar-width:none;
  }
  .furniture-cats::-webkit-scrollbar{display:none;}
  .cat-group{display:inline-flex;flex-direction:row;gap:0.25rem;align-items:center;}
  .cat-header{display:none;}
  .cat-items{display:inline-flex;flex-direction:row;padding:0;gap:0.25rem;}
  .furn-item{
    flex-direction:column;align-items:center;gap:0.15rem;
    padding:0.3rem 0.45rem;min-width:52px;border:1px solid var(--border);
    background:#fff;border-radius:3px;
  }
  .furn-icon{font-size:1.2rem;width:auto;}
  .furn-dims{display:none;}
  .furn-name{font-size:0.62rem;text-align:center;line-height:1.1;white-space:normal;max-width:52px;}

  /* PTZ row — between furniture and canvas */
  .ptz-row{
    display:flex!important;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:3px 8px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    width:100%;
    min-height:122px;
    height:122px;
    flex-shrink:0;
    overflow:visible;
    position:relative;
    z-index:5;
  }
  .ptz-grid{
    display:grid!important;
    grid-template-columns:repeat(3,36px);
    grid-template-rows:repeat(3,36px);
    gap:2px;
  }
  .ptz-btn{
    width:36px!important;height:36px!important;
    background:#fff;border:1.5px solid var(--border);
    border-radius:7px;font-size:1rem;
    display:flex!important;align-items:center;justify-content:center;
    cursor:pointer;color:var(--charcoal);
    -webkit-tap-highlight-color:transparent;
    user-select:none;touch-action:manipulation;
  }
  .ptz-btn:active{background:var(--terra)!important;color:#fff!important;border-color:var(--terra)!important;}
  .ptz-empty{width:36px!important;height:36px!important;background:transparent;}
  .ptz-centre{
    width:36px!important;height:36px!important;
    display:flex!important;align-items:center;justify-content:center;
    font-size:1rem;color:var(--terra);
    background:rgba(196,102,58,0.1);border-radius:7px;
    border:1.5px solid rgba(196,102,58,0.3);
  }
  .ptz-steps{display:flex;flex-direction:column;align-items:center;gap:3px;}
  .ptz-label{font-size:0.6rem;color:var(--muted);text-transform:uppercase;}
  .ptz-step-btn{
    width:32px;padding:3px 0;font-size:0.7rem;font-weight:600;
    background:#fff;border:1.5px solid var(--border);border-radius:4px;
    cursor:pointer;color:var(--muted);touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .ptz-step-btn.active{background:var(--terra);color:#fff;border-color:var(--terra);}
  .ptz-hint{font-size:0.6rem;color:var(--muted);text-align:center;max-width:56px;line-height:1.3;}

  /* Canvas fills remaining space */
  .canvas-area{flex:1;min-height:0;overflow:auto;}

  /* P&T panel — FLOATING overlay at bottom, not in flex flow */
  .sidebar-right{
    position:fixed!important;
    bottom:0;left:0;right:0;
    width:100%;
    height:36px;
    background:var(--panel);
    border-top:2px solid var(--border);
    flex-direction:column;
    overflow:hidden;
    transition:height 0.25s ease;
    z-index:100;
    box-shadow:0 -4px 16px rgba(0,0,0,0.12);
  }
  .sidebar-right.panel-expanded{
    height:55vh;
  }
  .panel-tabs{flex-shrink:0;height:36px;display:flex;align-items:center;}
  .panel-tab{padding:0.4rem 0.5rem!important;font-size:0.7rem!important;}
  .panel-collapse-btn{
    margin-left:auto;
    padding:0.3rem 0.8rem!important;
    font-size:0.85rem!important;
    color:var(--terra)!important;
    font-weight:700!important;
    border-bottom:none!important;
    cursor:pointer;
  }
  .panel-content{padding:0.6rem;overflow-y:auto;font-size:0.85rem;flex:1;}
  .panel-content.active-panel{display:block!important;}
  .warn-strip{display:none!important;}

  /* Modal full screen */
  .modal{width:100%;max-width:100%;max-height:100vh;border-radius:0;padding:1.2rem;}
  .template-grid{grid-template-columns:repeat(3,1fr);gap:0.4rem;}
  .zoom-controls{bottom:44px;}
  #zoomFit{background:var(--terra)!important;color:#fff!important;font-weight:700;padding:0.15rem 0.55rem!important;border-radius:3px;}
}

@media (max-width: 480px){
  .template-grid{grid-template-columns:repeat(2,1fr);}
  .tool-btn span, .tool-sep{display:none;}
  .tool-btn{padding:0.28rem 0.4rem;}
}

/* ── PTZ Move Pad (mobile only) ─────────────────────────────── */
/* PTZ hidden on desktop only */
@media(min-width:769px){.ptz-row{display:none!important;}}

/* ── Mobile onboarding tip ───────────────────────────────────── */
.mobile-tip{display:none;}
@media(max-width:768px){
  .mobile-tip{
    display:flex;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:rgba(30,30,26,0.88);
    color:#fff;
    border-radius:12px;
    padding:1.2rem 1.4rem;
    flex-direction:column;
    align-items:center;
    gap:0.6rem;
    z-index:50;
    max-width:260px;
    text-align:center;
    backdrop-filter:blur(6px);
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
    pointer-events:all;
    animation:tipFadeIn 0.4s ease both;
  }
  .mobile-tip.hidden{display:none!important;}
  .mobile-tip-icon{font-size:2rem;}
  .mobile-tip-title{font-size:0.95rem;font-weight:700;font-family:'DM Sans',sans-serif;color:#fff;}
  .mobile-tip-text{font-size:0.8rem;font-family:'DM Sans',sans-serif;color:rgba(255,255,255,0.8);line-height:1.5;}
  .mobile-tip-btn{
    margin-top:0.3rem;
    background:var(--terra);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:0.5rem 1.4rem;
    font-size:0.85rem;
    font-family:'DM Sans',sans-serif;
    font-weight:600;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  @keyframes tipFadeIn{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
}

.shop-btn{
  display:flex;align-items:center;justify-content:center;gap:0.4rem;
  width:100%;margin-top:0.5rem;
  background:#FF9900;color:#111;
  border:none;border-radius:3px;
  padding:0.52rem;
  font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:700;
  cursor:pointer;text-decoration:none;
  transition:background 0.15s;
}
.shop-btn:hover{background:#e88a00;}
.shop-btn svg{flex-shrink:0;}
/* Print / PDF styles */
@media print{
  body{overflow:visible!important;}
  .topbar,.sidebar-left,.sidebar-right,.zoom-controls,.mode-banner,.toast-wrap{display:none!important;}
  .app-body{height:auto!important;}
  .canvas-area{overflow:visible!important;background:#fff!important;align-items:flex-start!important;justify-content:flex-start!important;padding:20px!important;}
  #roomCanvas{box-shadow:none!important;margin:0 auto!important;}
  .wall-delete,.rotate-handle,.delete-handle{display:none!important;}
  .furn-label{color:#333!important;text-shadow:none!important;background:rgba(255,255,255,0.8)!important;}
}
.modal-warn{background:#FFF3E0;border:1px solid rgba(229,168,58,0.5);border-radius:3px;padding:0.7rem 0.85rem;margin-bottom:1rem;font-size:0.8rem;color:#7A5010;line-height:1.55;display:none;}
.modal-warn.visible{display:flex;gap:0.6rem;align-items:flex-start;}
.modal-warn-ico{flex-shrink:0;font-size:1rem;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(20,20,16,0.88);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.hidden{display:none;}
.modal{background:var(--warm);border:1px solid var(--border);border-radius:4px;padding:1.8rem;width:580px;max-width:96vw;max-height:92vh;overflow-y:auto;}
.modal h2{font-family:'Playfair Display',serif;font-size:1.35rem;margin-bottom:0.25rem;}
.modal-sub{font-size:0.8rem;color:var(--muted);margin-bottom:1.4rem;line-height:1.6;}
.modal-section-title{font-size:0.67rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.7rem;}
.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.55rem;margin-bottom:1.4rem;}
.template-card{background:var(--panel);border:1.5px solid var(--border);border-radius:3px;padding:0.75rem 0.45rem;text-align:center;cursor:pointer;transition:all 0.15s;}
.template-card:hover{border-color:var(--terra);background:#fff;}
.template-card.active{border-color:var(--terra);background:rgba(196,102,58,0.06);}
.template-svg{display:block;margin:0 auto 0.45rem;}
.template-name{font-size:0.73rem;font-weight:500;}
.template-desc{font-size:0.62rem;color:var(--muted);margin-top:0.12rem;}
.dim-row{display:flex;gap:1rem;align-items:flex-end;margin-bottom:1rem;}
.dim-field label{display:block;font-size:0.73rem;color:var(--muted);margin-bottom:0.2rem;}
.dim-field input{width:78px;background:#fff;border:1px solid var(--border);padding:0.38rem 0.48rem;border-radius:2px;font-size:0.84rem;font-family:'DM Sans',sans-serif;}
.dim-field input:focus{outline:none;border-color:var(--terra);}
.draw-instructions{background:var(--cream);border:1px solid var(--border);border-radius:3px;padding:0.85rem;margin-bottom:0.9rem;font-size:0.79rem;line-height:1.65;}
.draw-instructions strong{display:block;margin-bottom:0.28rem;}
.modal-actions{display:flex;gap:0.55rem;justify-content:flex-end;margin-top:1.1rem;}
.modal-btn{padding:0.5rem 1.1rem;border-radius:2px;font-family:'DM Sans',sans-serif;font-size:0.8rem;cursor:pointer;border:none;font-weight:500;}
.modal-btn.primary{background:var(--terra);color:#fff;}
.modal-btn.primary:hover{background:#b05530;}
.modal-btn.secondary{background:transparent;color:var(--charcoal);border:1px solid var(--border);}
.modal-btn.secondary:hover{background:var(--cream);}
kbd{background:var(--border);padding:1px 5px;border-radius:2px;font-size:0.73rem;}