:root{
  --panel:#171a22;
  --panel-2:#0e1117;
  --text:#eef2ff;
  --muted:#9aa3b2;
  --chip:#212633;
  --accent:#ff9f3c;
  --shadow:0 14px 40px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  overflow:hidden;
  cursor: default;
}

#app.hidden{ display:none !important; }

.panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:380px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--panel);
  border-radius:28px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.08);
  padding:10px 12px 14px;
}
.panel__header{display:flex;align-items:center;gap:12px;padding:10px}
.avatar{width:46px;height:46px;border-radius:999px;background:linear-gradient(180deg,#f4b463,#ff8a1f);box-shadow:inset 0 0 0 3px rgba(0,0,0,.28)}
.title{flex:1;font-weight:900}
.btn-icon{width:40px;height:40px;border-radius:14px;border:none;cursor:pointer;background:#242a38;color:#fff}

.section{padding:12px 10px}
.section + .section{border-top:1px solid rgba(255,255,255,.06)}
.section__label{display:flex;align-items:center;gap:10px;font-weight:800}
.square{width:18px;height:18px;border-radius:6px;background:#fbbf24}

.input{margin-top:10px}
.input input{width:100%;background:var(--panel-2);color:var(--text);border:none;border-radius:16px;padding:12px 14px;outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.input small{display:block;color:var(--muted);margin-top:6px}

.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:10px}
.swatch{width:64px;height:64px;border-radius:100px;position:relative;cursor:pointer;outline:2px solid transparent;outline-offset:4px}
.swatch.selected{outline-color:#fff}
.swatch::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px rgba(0,0,0,.35)}

.actions{display:flex;gap:12px;padding:8px 10px}
.btn{flex:1;padding:12px 16px;border-radius:16px;border:none;cursor:pointer;font-weight:800;background:#2a3244;color:#e9eefc}
.btn-primary{flex:1;padding:12px 16px;border-radius:16px;border:none;cursor:pointer;font-weight:900;background:linear-gradient(180deg,#ffb24f,#ff8a1d);color:#1b1e28}
.btn:hover,.btn-primary:hover{filter:brightness(1.05)}