:root{
  --sage:#264a3b; --gold:#c9a227; --page:#f6f4ea; --ink:#223c31; --mut:#6b7a72;
  --hair:#e0dccb; --card:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;background:var(--page);color:var(--ink);min-height:100vh}
.hidden{display:none !important}
.app-header{background:var(--sage);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 20px}
.app-header .h-logo{width:44px;height:auto;display:block}
.app-header h1{font-family:'Playfair Display',serif;font-size:21px;font-weight:600;letter-spacing:.5px}
.app-header p{font-size:10.5px;opacity:.85}
.app-header .backlink{margin-left:auto;color:#fff;text-decoration:none;font-size:12.5px;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 13px;white-space:nowrap}
.app-header .backlink + .backlink{margin-left:0}
.tg-ui b{font-weight:600}
#needLogin{display:flex;justify-content:center;padding:60px 20px}
.login-note{background:#fff;border-radius:16px;padding:36px 40px;text-align:center;box-shadow:0 8px 30px rgba(34,60,49,.08);max-width:380px}
.login-note img{width:140px;margin:0 auto 12px;display:block}
.login-note h2{font-family:'Playfair Display',serif;margin-bottom:8px}
.login-note p{font-size:13.5px;color:var(--mut);margin-bottom:18px}
#layMain{display:flex;gap:0;min-height:calc(100vh - 64px)}
.panel{width:330px;flex:0 0 330px;background:#fff;border-right:1px solid var(--hair);padding:18px;overflow-y:auto}
.panel section{margin-bottom:22px}
.panel h3{font-family:'Playfair Display',serif;font-size:16px;color:var(--sage);margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--gold)}
.field{margin-bottom:10px}
.field label{display:block;font-size:11.5px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.field input,.field select{width:100%;padding:8px 10px;border:1px solid var(--hair);border-radius:8px;font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff}
.field input:focus,.field select:focus{outline:2px solid var(--gold);outline-offset:1px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sqft{font-size:13px;color:var(--mut)}
.sqft b{color:var(--sage)}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.palette button{border:1px solid var(--hair);background:#fbf9f3;border-radius:9px;padding:9px 6px;font-family:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;transition:all .15s}
.palette button:hover{border-color:var(--gold);background:#f7f0dd}
.palette button .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.hint{font-size:11.5px;color:var(--mut);margin-top:8px;line-height:1.5}
.btn-solid{display:inline-block;background:var(--sage);color:#fff;border:none;border-radius:9px;padding:10px 18px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none}
.btn-solid.big{width:100%;padding:12px;font-size:14.5px}
.btn-ghost{width:100%;margin-top:8px;background:none;border:1px solid var(--hair);border-radius:9px;padding:9px;font-family:inherit;font-size:12.5px;color:var(--mut);cursor:pointer}
.btn-danger{width:100%;background:#fbeaea;border:1px solid #e5b8b8;color:#a33;border-radius:9px;padding:9px;font-family:inherit;font-size:12.5px;cursor:pointer}
.canvas-wrap{flex:1;padding:24px;overflow:auto;display:flex;align-items:flex-start;justify-content:center}
#map{background:#fff;border:1px solid var(--hair);border-radius:6px;box-shadow:0 6px 24px rgba(34,60,49,.07);touch-action:none;max-width:100%}
.el{cursor:grab}
.el.sel{cursor:grabbing}
.el .selring{display:none}
.el.sel .selring{display:block}
.el text{font-family:'Poppins',sans-serif;pointer-events:none;user-select:none}
@media (max-width:900px){
  #layMain{flex-direction:column}
  .panel{width:100%;flex:none;border-right:none;border-bottom:1px solid var(--hair)}
  .canvas-wrap{padding:12px}
}

@media (max-width:700px){
  .app-header{padding:8px 10px;gap:8px;flex-wrap:wrap}
  .app-header .h-logo{width:34px}
  .app-header h1{font-size:16px}
  .app-header p{display:none}
  .app-header > div{margin-right:auto;min-width:0}
  .app-header .backlink{margin-left:0;font-size:11px;padding:4px 9px}
}
.toast{position:sticky;top:8px;margin:0 auto;background:#a33;color:#fff;font-size:13px;padding:9px 16px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .2s;width:max-content;max-width:90%}
.toast.show{opacity:1}
.canvas-wrap{flex-direction:column;align-items:center}