:root{
  --bg:#050b18;
  --panel:rgba(13,22,41,0.75);
  --card:rgba(20,31,52,0.9);
  --stroke:#1f2a44;
  --accent:#0ea5e9;
  --accent-2:#f97316;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --shadow:0 20px 60px rgba(0,0,0,0.35);
  font-family:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:radial-gradient(circle at 20% 20%,#0b1a2c 0%,#050b18 40%),radial-gradient(circle at 80% 0%,#0b2f3b 0%,#050b18 35%),radial-gradient(circle at 40% 80%,#112133 0%,#050b18 40%);color:var(--text);height:100vh;overflow:hidden;}
.page{height:100vh;display:flex;flex-direction:column;padding:16px;} 
.layout{display:grid;grid-template-columns:320px 1fr;gap:16px;flex:1;min-height:0;}
.panel{background:var(--panel);border:1px solid var(--stroke);border-radius:20px;padding:18px;backdrop-filter:blur(10px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;overflow-y:auto;}
.label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;}
.code-block .code{font-size:32px;font-weight:700;letter-spacing:0.16em;background:var(--card);padding:12px;border:1px solid var(--stroke);border-radius:14px;text-align:center;}
.input-row{display:flex;gap:10px;margin-top:10px;}
.input-row input{flex:1;background:var(--card);border:1px solid var(--stroke);border-radius:12px;padding:12px 14px;color:var(--text);font-size:15px;outline:none;}
.input-row input:focus{border-color:var(--accent);}
button{border:none;border-radius:12px;padding:12px 16px;font-weight:700;font-size:14px;cursor:pointer;transition:transform 120ms ease,box-shadow 120ms ease,background 120ms ease;color:#0b1020;background:linear-gradient(135deg,var(--accent),#22d3ee);box-shadow:0 12px 30px rgba(14,165,233,0.35);}
button:hover{transform:translateY(-1px);}
button:active{transform:translateY(0);}
button.ghost{background:var(--card);color:var(--text);box-shadow:none;border:1px solid var(--stroke);}
.auth{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.user{font-size:16px;font-weight:600;}
.auth-actions{display:flex;gap:10px;}
.hint{background:linear-gradient(135deg,rgba(15,23,42,0.85),rgba(14,165,233,0.18));border:1px solid var(--stroke);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px;color:var(--muted);line-height:1.4;}
.canvas-wrap{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--stroke);background:radial-gradient(circle at 10% 10%,rgba(14,165,233,0.12),transparent 40%),radial-gradient(circle at 80% 80%,rgba(249,115,22,0.12),transparent 35%),var(--panel);box-shadow:var(--shadow);min-height:0;height:100%;}
#board{width:100%;height:100%;display:block;}
.overlay{position:absolute;top:14px;right:14px;display:flex;gap:10px;flex-wrap:wrap;pointer-events:none;}
.pill{padding:10px 14px;border-radius:999px;background:var(--card);border:1px solid var(--stroke);font-weight:600;font-size:13px;color:var(--muted);}
@media (max-width:1024px){.layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;}.panel{order:2;max-height:300px;}.canvas-wrap{order:1;}}
@media (max-width:768px){.page{padding:12px;}.topbar{flex-direction:column;align-items:stretch;}.layout{gap:12px;grid-template-rows:auto 1fr;}.panel{padding:14px;gap:14px;}}