/* Designer Estrutural — page-specific styles. Reuses the ART COLOR palette (see :root
   in designer-estrutural.html, copied from index.html) so the tool feels native to the site. */

.sd-app{
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:100vh;
  background:var(--charcoal-950);
  color:var(--ivory-100);
  font-family:var(--sans);
}

/* Top toolbar */
.sd-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; border-bottom:1px solid var(--line-soft);
  background:var(--charcoal-900);
}
.sd-topbar h1{
  font-family:var(--serif); font-weight:440; font-size:19px; letter-spacing:.01em; color:var(--ivory-100);
}
.sd-topbar .sd-back{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--parchment-dim); text-decoration:none; margin-right:16px; opacity:.8;
}
.sd-topbar .sd-back:hover{opacity:1; color:var(--brass-300);}
.sd-topbar-left{display:flex; align-items:center;}
.sd-topbar-right{display:flex; align-items:center; gap:10px;}

.sd-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px; border-radius:4px; border:1px solid var(--line-soft);
  background:transparent; color:var(--ivory-100); cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:6px;
}
.sd-btn:hover{border-color:var(--brass-300); color:var(--brass-300);}
.sd-btn.primary{background:var(--brass-500); border-color:var(--brass-500); color:var(--charcoal-950); font-weight:600;}
.sd-btn.primary:hover{background:var(--brass-300); border-color:var(--brass-300); color:var(--charcoal-950);}

select.sd-select{
  font-family:var(--mono); font-size:11px; background:var(--charcoal-900); color:var(--ivory-100);
  border:1px solid var(--line-soft); border-radius:4px; padding:7px 8px;
}

/* Middle: sidebar / canvas / properties */
.sd-body{
  display:grid;
  grid-template-columns:64px 1fr 260px;
  min-height:0;
}

.sd-tools{
  background:var(--charcoal-900); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:6px;
  overflow-y:auto;
}
.sd-tool-btn{
  width:44px; height:44px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--parchment-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  position:relative; transition:.15s;
}
.sd-tool-btn:hover{background:rgba(217,183,135,0.08); color:var(--ivory-100);}
.sd-tool-btn.active{background:var(--brass-500); color:var(--charcoal-950); border-color:var(--brass-500);}
.sd-tool-btn .sd-tooltip{
  position:absolute; left:52px; top:50%; transform:translateY(-50%);
  background:var(--charcoal-900); border:1px solid var(--line-soft); color:var(--ivory-100);
  padding:5px 10px; border-radius:4px; font-family:var(--mono); font-size:11px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:.15s; z-index:20;
}
.sd-tool-btn:hover .sd-tooltip{opacity:1;}
.sd-tool-divider{width:32px; height:1px; background:var(--line-soft); margin:6px 0;}

.sd-canvas-wrap{
  position:relative; background:#12181a; overflow:hidden; min-width:0; min-height:0;
}
.sd-canvas-wrap canvas{display:block; cursor:crosshair;}

.sd-properties{
  background:var(--charcoal-900); border-left:1px solid var(--line-soft);
  padding:16px; overflow-y:auto;
}
.sd-props-title{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--brass-300); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--line-soft);
}
.sd-props-empty{color:var(--parchment-dim); font-size:13px; line-height:1.5;}
.sd-props-readonly{font-size:12.5px; color:var(--parchment-dim); line-height:1.7; margin:4px 0 12px;}
.sd-properties label{
  display:block; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--parchment-dim); margin-bottom:12px;
}
.sd-properties input, .sd-properties select{
  display:block; width:100%; margin-top:6px; padding:8px 9px;
  background:var(--charcoal-950); border:1px solid var(--line-soft); border-radius:4px;
  color:var(--ivory-100); font-family:var(--sans); font-size:13px;
}
.sd-properties input:focus, .sd-properties select:focus{outline:none; border-color:var(--brass-300);}

/* Bottom status bar */
.sd-statusbar{
  display:flex; align-items:center; gap:20px; padding:8px 20px;
  background:var(--charcoal-900); border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; color:var(--parchment-dim);
}
.sd-statusbar .sd-status-msg{color:var(--brass-300); margin-left:auto;}
.sd-statusbar button.sd-status-toggle{
  background:none; border:1px solid var(--line-soft); color:var(--parchment-dim);
  border-radius:3px; padding:3px 8px; font-family:var(--mono); font-size:10.5px; cursor:pointer;
}
.sd-statusbar button.sd-status-toggle.active{color:var(--brass-300); border-color:var(--brass-300);}

@media (max-width: 900px){
  .sd-body{grid-template-columns:52px 1fr;}
  .sd-properties{position:fixed; right:0; top:0; bottom:0; width:260px; transform:translateX(100%); transition:.2s; z-index:30;}
  .sd-properties.open{transform:translateX(0);}
}