* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", "Helvetica Neue", "Cairo", sans-serif; background: #0b0d12; color: #e7ecf2; }
a { color: #6db4ff; text-decoration: none; }

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid #1a2030; background: #0e1118;
  position: sticky; top: 0; z-index: 10;
}
.brand a { color: #fff; font-weight: 700; letter-spacing: 0.5px; }
#user-nav { display: flex; gap: 10px; align-items: center; }

.page { padding: 28px 24px; max-width: 1200px; margin: 0 auto; }
h1 { font-weight: 600; margin: 0 0 6px; font-size: 28px; }
.muted { color: #8893a6; font-size: 14px; }

.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 22px;
}
.card {
  background: #131722; border: 1px solid #1f2535; border-radius: 12px;
  padding: 18px; cursor: pointer; transition: transform .12s, border-color .12s;
}
.card:hover { transform: translateY(-2px); border-color: #3a4a6e; }
.card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.card .badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px;
  background: #1a2440; color: #6db4ff; margin-inline-start: 8px;
}
.card .badge.public { background: #1d3a1e; color: #76d97a; }
.card .badge.shared { background: #3a3120; color: #ddb96b; }

#canvas-host {
  width: 100%; height: 640px; background: #05070b;
  border: 1px solid #1f2535; border-radius: 12px; margin-top: 14px; overflow: hidden;
}
.controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

.btn-primary, .btn-ghost {
  border: 1px solid #2a3550; border-radius: 8px; padding: 8px 14px;
  background: #1a2440; color: #e7ecf2; font-size: 14px; cursor: pointer;
}
.btn-primary { background: #2b5cd0; border-color: #2b5cd0; }
.btn-primary:hover { background: #3b6de0; }
.btn-ghost:hover  { background: #1f2945; }
.back { margin-bottom: 14px; }

.gallery {
  display: grid; gap: 8px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.gallery .thumb {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  background: #1a2030; border-radius: 8px; cursor: zoom-in;
  border: 1px solid #1f2535;
}
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.lightbox img { max-width: 95vw; max-height: 95vh; box-shadow: 0 8px 40px rgba(0,0,0,.6); }

.auth-card {
  max-width: 380px; background: #131722; border: 1px solid #1f2535;
  border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.auth-card input {
  background: #0b0d12; border: 1px solid #1f2535; border-radius: 8px;
  color: #e7ecf2; padding: 10px 12px; font-size: 14px;
}
.row { display: flex; gap: 10px; }