* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#06060e; --panel:#0c0c1a; --border:rgba(160,120,255,0.2);
  --accent:#a078ff; --accent2:#ff78c8; --text:#d8d0f0; --muted:#6a6080;
}
body {
  min-height:100vh; background:var(--bg); color:var(--text);
  font-family:'Noto Sans Myanmar',sans-serif;
  display:flex; flex-direction:column; align-items:center;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(160,120,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,120,255,0.03) 1px,transparent 1px);
  background-size:40px 40px;
}
header { position:relative; z-index:1; text-align:center; padding:2.5rem 1rem 1.5rem; }
header h1 {
  font-family:'Cinzel',serif; font-weight:900;
  font-size:clamp(1.4rem,3.5vw,2.2rem); letter-spacing:0.12em;
  background:linear-gradient(135deg,#a078ff,#ff78c8,#78c8ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
header p { margin-top:.4rem; font-size:.85rem; color:var(--muted); letter-spacing:.08em; }

.main {
  position:relative; z-index:1; width:min(1000px,96vw);
  display:grid; grid-template-columns:300px 1fr;
  gap:2rem; padding:0 0 3rem; align-items:start;
}
@media(max-width:680px){ .main{ grid-template-columns:1fr; } }

.panel {
  background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:1.8rem 1.6rem;
  display:flex; flex-direction:column; gap:1.4rem;
}
label {
  display:block; font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.5rem;
  font-family:'Cinzel',serif;
}
input[type=text] {
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:8px;
  padding:.75rem 1rem; color:var(--text);
  font-family:'Noto Sans Myanmar',sans-serif; font-size:1.25rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder { color:var(--muted); font-size:.95rem; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(160,120,255,.15); }

.gender-row { display:flex; gap:.75rem; }
.gbtn {
  flex:1; padding:.65rem .5rem; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:var(--muted);
  font-family:'Noto Sans Myanmar',sans-serif; font-size:.9rem; cursor:pointer; transition:all .2s;
}
.gbtn:hover { border-color:var(--accent); color:var(--text); }
.gbtn.on { background:rgba(160,120,255,.15); border-color:var(--accent); color:var(--accent); }

.style-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.swatch {
  padding:.55rem .4rem; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-family:'Cinzel',serif;
  font-size:.72rem; letter-spacing:.05em; cursor:pointer; transition:all .2s; text-align:center;
}
.swatch:hover { border-color:var(--accent); color:var(--text); }
.swatch.on { border-color:var(--accent); background:rgba(160,120,255,.12); color:var(--accent); }

.color-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.cpick {
  width:28px; height:28px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; transition:transform .2s, border-color .2s;
}
.cpick:hover,.cpick.on { transform:scale(1.25); border-color:#fff; }

.gen-btn {
  width:100%; padding:.9rem; border:none; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-family:'Cinzel',serif; font-size:1rem; font-weight:600;
  letter-spacing:.1em; cursor:pointer;
  transition:opacity .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 20px rgba(160,120,255,.4);
}
.gen-btn:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 8px 30px rgba(160,120,255,.5); }
.gen-btn:active { transform:translateY(0); }
.gen-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.dl-btn {
  width:100%; padding:.65rem; border:1px solid var(--border);
  border-radius:10px; background:transparent; color:var(--muted);
  font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.08em;
  cursor:pointer; transition:all .2s;
}
.dl-btn:hover { border-color:var(--accent); color:var(--accent); }

.canvas-area {
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:2rem; display:flex; flex-direction:column; align-items:center;
  gap:1.2rem; min-height:500px; justify-content:center;
}
#sigil-canvas {
  border-radius:12px; max-width:100%; height:auto;
  box-shadow:0 0 60px rgba(160,120,255,.15);
  transition:box-shadow .3s, opacity .5s, transform .5s;
}
#sigil-canvas:hover { box-shadow:0 0 80px rgba(160,120,255,.3); }
.canvas-label { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.15em; color:var(--muted); }

.placeholder {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1rem; opacity:.4;
}
.placeholder svg { width:80px; height:80px; }
.placeholder p { font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.12em; color:var(--muted); }

.spinner {
  width:42px; height:42px; display:none;
  border:2px solid rgba(160,120,255,.2); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.err { color:#ff6688; font-size:.85rem; font-style:italic; display:none; text-align:center; }