/* ===== Theme tokens ===== */
:root{
  --ink:#0e1116;
  --panel:#11151c;
  --muted:#2a2f3a;
  --line:#222734;
  --accent:#50e3a4;
  --accent2:#67b3ff;
  --danger:#ff6b6b;
  --warn:#ffd166;
  --ok:#95f985;
  --text:#e6edf3;
  --sub:#a8b3bd;
  --ghost:#7a8591;
  --chip:#1b2230;
  --chip2:#273044;
}

html,body{height:100%;margin:0}
body{
  display:grid;grid-template-rows:auto 1fr;
  background:linear-gradient(180deg,#0b1017,#0e131b 40%,#0b1119);
  color:var(--text);
  font:14px/1.2 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* ===== Header ===== */
header{
  display:flex;gap:.75rem;align-items:center;
  padding:.6rem .8rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0f141d,#0c1119);
}
header h1{font-size:14px;margin:0;letter-spacing:.4px;color:var(--sub);font-weight:600}
.badge{font-size:12px;background:var(--chip2);color:var(--accent2);padding:.15rem .45rem;border:1px solid #2c3a53;border-radius:999px}

/* ===== Two-column layout ===== */
.row{display:grid;grid-template-columns:300px 1fr;gap:0;min-height:calc(100vh - 44px)}
aside{border-right:1px solid var(--line);background:radial-gradient(1200px 400px at -400px -200px,#131b28,transparent),linear-gradient(180deg,#0f141d,#0c1118)}
main{position:relative}

/* ===== Left dock ===== */
#dock{display:flex;flex-direction:column;height:100%}
.panel{padding:.8rem;border-bottom:1px solid var(--line)}
.panel h3{margin:.2rem 0 .6rem;font-size:12px;color:#8b99aa;letter-spacing:.4px;text-transform:uppercase}

/* Buttons / chips / helpers */
button,.btn{
  background:#162030;border:1px solid #223145;color:#cfe4ff;
  padding:.4rem .6rem;border-radius:.5rem;cursor:pointer;font-size:13px;display:inline-block;text-align:center
}
.btn{ display:inline-flex; align-items:center; margin:0 }
button:hover,.btn:hover{border-color:#2f4a71}
button[data-kind=danger]{border-color:#704040;color:#ff7f7f}
.help{font-size:12px;color:#7f8b98;margin-top:.4rem}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#141b26;border:1px solid #263247;padding:.1rem .25rem;border-radius:.3rem;color:#a8c6ff}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--chip);border:1px solid #273142;border-radius:999px;padding:.1rem .5rem;color:#aab8cc;font-size:12px}
.sep{height:1px;background:#222a3a;margin:.5rem 0}
.switch{display:inline-flex;gap:.5rem;align-items:center;border:1px solid #223145;background:#162030;color:#cfe4ff;padding:.3rem .6rem;border-radius:.5rem}
.switch input{accent-color:var(--accent)}

/* Inputs */
label{display:block;color:#a1adba;font-size:12px;margin:.4rem 0 .2rem}
input[type=text],input[type=number],select{
  width:100%;box-sizing:border-box;background:#111826;border:1px solid #263247;color:#d7e3ee;
  border-radius:.4rem;padding:.38rem .5rem;font-size:13px
}
input[type=range]{width:100%}
.hidden-file{position:fixed;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}

/* ===== Viewport area ===== */
#viewer{position:absolute;inset:0;background:#0a0f16}
#viewer > canvas#viewport{position:absolute;inset:0;display:block}

/* Non-interactive overlay strip (optional; empty by default) */
#overlay{
  position:absolute;left:0;top:0;right:0;
  pointer-events:none;
  padding:.6rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
#overlay .chip{backdrop-filter:blur(6px);background:rgba(21,29,44,.72);border-color:#2c3751}

/* Drag target & placeholder text */
#droptarget{position:absolute;inset:.6rem;border:1px dashed #334058;border-radius:.75rem;display:none;place-content:center;color:#9fb3c6;background:rgba(22,28,40,.35)}
#droptarget.show{display:grid}
#placeholder{
  position:absolute;inset:0;display:grid;place-content:center;
  color:#9fb3c6;text-align:center;padding:20px
}

/* ===== In-viewport toolbar & HUD ===== */
.viewport-toolbar{
  position:absolute;top:.6rem;right:.6rem;
  display:flex;gap:.3rem;
  pointer-events:auto; z-index:20;
}
.viewport-toolbar button{
  background:#141b26;border:1px solid #263247;color:#cfe4ff;border-radius:.4rem;padding:.3rem .45rem;font-size:13px
}
.viewport-info{position:absolute;bottom:.6rem;left:.6rem;font-size:12px;color:#7f8b98;z-index:15}

/* ===== Details elements (if used) ===== */
details{border:1px solid #263247;background:#111826;border-radius:.6rem;margin:.5rem 0}
details summary{cursor:pointer;font-weight:700;color:#cfe4ff;padding:.5rem .6rem;list-style:none}
details > *:not(summary){padding:.6rem}

/* ===== Responsive ===== */
@media (max-width: 920px){
  .row{grid-template-columns:1fr}
  aside{order:2}
  main{order:1;min-height:60vh}
}