:root{
  --bg:#0b1220; --card:#111827; --muted:#94a3b8; --accent:#22c55e; --text:#e5e7eb; --line:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line); background:#0d1426;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:200px; height:auto;
  background:#ffffff; border:2px solid #e5e7eb; border-radius:16px;
  padding:8px; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.title{font-size:18px; font-weight:800; letter-spacing:.3px}
.meta{display:flex; gap:8px; align-items:center}
.pill{padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#0f172a; font-size:12px}
.pill-link{color:#93c5fd; text-decoration:none}

/* Layout */
.layout{display:grid; grid-template-columns:360px 1fr; gap:16px; padding:16px 20px}
@media (max-width: 1100px){ .layout{grid-template-columns:1fr} }

.panel{display:flex; flex-direction:column; gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px 14px; box-shadow:0 10px 30px rgba(0,0,0,.3)
}
.card h2{margin:0 0 8px 0; font-size:16px}
.row{display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap}
.input, select, input[type="number"], input[type="range"]{
  background:#0f172a; border:1px solid var(--line); border-radius:10px;
  color:var(--text); padding:10px 12px; font-size:14px; outline:none
}
.btn{
  background:#1f2937; border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:8px
}
.btn:hover{background:#273245}
.btn-primary{background:#22c55e; border-color:#16a34a; color:#04130a; font-weight:700}
.btn-primary:hover{background:#16a34a}
.hint,.muted{color:var(--muted); font-size:12px}

/* Workspace */
.workspace{
  position:relative;
  background:#0d1426; border:1px solid var(--line); border-radius:16px; padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
/* Tło koloru produktu (UI) */
.canvas-bg{
  position:absolute; inset:14px 14px auto 14px;
  height:52px; border-radius:12px;
  background:#1f2937; border:1px dashed #374151;
  display:flex; align-items:center; padding:0 12px; color:#cbd5e1; font-size:12px;
}
.canvas-bg::before{
  content:"Kolor produktu (podgląd)";
  opacity:.7;
}
.canvas-wrap{
  margin-top:60px;
  overflow:auto; display:flex; align-items:center; justify-content:center;
  min-height:50vh; background:#0b1220; border:1px dashed #374151; border-radius:12px;
}
canvas{max-width:100%}
.footer{padding:6px 0; color:var(--muted); font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.footer-bottom{padding:12px 20px; color:var(--muted); font-size:12px; border-top:1px solid var(--line);}