/* public/style.css */
:root{
  --bg:#0b0b0d;--ink:#d8d8d8;--muted:#9b9b9b55;--red:#e01931;--red2:#a10e1f;
  --card:#141417;--edge:#2a2a2f;--glow:0 0 20px rgba(224,25,49,.45),0 0 60px rgba(224,25,49,.25);
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{margin:0;background:#0b0b0d;color:var(--ink);font-family:'Rajdhani',system-ui,Segoe UI,Arial,Helvetica,sans-serif}
.header{display:flex;align-items:baseline;gap:12px;justify-content:space-between;padding:16px 24px}
h1{font-family:'UnifrakturMaguntia',cursive;font-size:48px;line-height:1;color:#f1f1f1;text-shadow:0 2px 0 #000,0 0 24px #a10e1f;margin:0}
.sigil{color:var(--red)} .tag{opacity:.7;font-family:'Bebas Neue',sans-serif;letter-spacing:2px;margin:0}

.main{
  display:grid;grid-template-columns:minmax(480px,1fr) 360px;gap:20px;
  padding:0 20px 20px 20px;height:calc(100vh - 92px);
}
.left{
  display:flex;flex-direction:column;gap:10px;height:100%;
  background:linear-gradient(180deg,#131317,#0f0f13);border:1px solid var(--edge);border-radius:16px;padding:12px;
  box-shadow:inset 0 0 50px #0006
}
.wheel-wrap{
  flex:1 1 auto;min-height:320px;border-radius:12px;border:1px solid #23232a;background:#0e0e12;
  display:grid;place-items:center;overflow:hidden;
}
canvas{display:block;max-width:100%;max-height:100%}

.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:8px}
.btn{cursor:pointer;border:1px solid #2a2a2f;background:#121218;color:#ededed;border-radius:10px;padding:10px 14px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.btn.slim{padding:8px 12px}
.btn.primary{border-color:var(--red2);background:linear-gradient(180deg,#2a0a10,#12060a);box-shadow:var(--glow)}
.btn.danger{border-color:#4a0a12;background:#1b0a0f}
.toggle{display:flex;gap:8px;align-items:center;opacity:.8}

.right{display:flex;flex-direction:column;gap:16px;min-width:320px}
.panel{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:14px}
.panel h2{margin:0 0 10px 0;font-family:'Bebas Neue',sans-serif;letter-spacing:1px}
textarea,input[type="text"]{width:100%;background:#0e0e12;border:1px solid #26262b;color:#f2f2f2;border-radius:10px;padding:10px;outline:none}
.row{display:flex;gap:10px;align-items:center;margin-top:8px}
.list{display:flex;flex-direction:column;gap:8px;max-height:26vh;overflow:auto}
.item{display:grid;grid-template-columns:1fr auto 80px 32px;gap:8px;align-items:center;background:#101015;border:1px solid #23232a;border-radius:10px;padding:8px}
.color{height:36px;border:1px solid #2a2a30;background:#000;border-radius:8px}
.weights{display:flex;flex-direction:column;gap:8px;max-height:18vh;overflow:auto}
.weight{display:grid;grid-template-columns:1fr 110px;gap:8px;align-items:center}

.result{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center}
.hidden{display:none}
.result-card{background:linear-gradient(180deg,#18131a,#0f0c0f);border:1px solid #3a1a22;border-radius:16px;padding:24px;min-width:320px;box-shadow:var(--glow);text-align:center}
.result-title{font-family:'Bebas Neue',sans-serif;letter-spacing:2px;color:#ddd}
.result-text{font-family:'UnifrakturMaguntia',cursive;color:#ffefef;font-size:40px;text-shadow:0 0 22px #a10e1f,0 0 60px #a10e1f;margin:10px 0 18px}

@media (max-width:1000px){.main{grid-template-columns:1fr}.right{order:-1}}