:root{--bg:#0d0f14;--panel:#161a22;--panel2:#1d2230;--line:#2a3142;--text:#e6e9ef;--mute:#8a93a6;--acc:#4f8cff;--ok:#2ecc71;--bad:#e74c3c}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;margin:0;background:var(--bg);color:var(--text)}
[hidden]{display:none!important}
#signin-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:14px;padding:20px;text-align:center}
#signin-screen h1{margin:0;font-size:2rem}
#signin-screen p{color:var(--mute);margin:0}
#not-configured{background:#3a1717;border:1px solid #a33;padding:12px 16px;border-radius:8px;max-width:460px;line-height:1.45}
#user-bar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
#user-bar .brand{font-weight:700;margin-right:auto}
#user-pic{width:30px;height:30px;border-radius:50%}
#user-email{color:var(--mute);font-size:.85em}
button,select,textarea{font:inherit;color:var(--text)}
button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}
button:hover{border-color:var(--acc)}
button.primary{background:var(--acc);border-color:var(--acc);color:#fff}
#app{display:grid;grid-template-columns:minmax(0,1fr) 380px;height:calc(100vh - 47px)}
#stage{position:relative;min-height:320px}
#stage canvas{display:block;width:100%;height:100%}
#sync{position:absolute;left:12px;top:12px;font-size:.8rem;padding:4px 8px;border-radius:6px;background:#0008}
#sync.ok{color:var(--ok)} #sync.bad{color:var(--bad)}
#side{background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:14px}
h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 6px}
.alg-item{padding:9px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:pointer;background:var(--panel2)}
.alg-item.active{border-color:var(--acc)}
.alg-item .n{font-weight:600}.alg-item code{display:block;color:var(--mute);font-size:.8rem;margin-top:3px}
.notes{font-size:.85rem;color:var(--mute);line-height:1.45;background:var(--panel2);padding:10px;border-radius:8px}
textarea{width:100%;min-height:64px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:6px}
.pill{border-radius:999px;padding:4px 11px;font-size:.85rem}
.pill.on{background:var(--acc);border-color:var(--acc);color:#fff}
#moves{display:flex;flex-wrap:wrap;gap:4px;font-family:ui-monospace,monospace}
#moves span{padding:3px 7px;border-radius:5px;background:var(--panel2);border:1px solid var(--line)}
#moves span.done{opacity:.45}
#moves span.cur{background:var(--acc);border-color:var(--acc);color:#fff;opacity:1}
#err{color:var(--bad);font-size:.85rem;min-height:1em}
@media (max-width:820px){#app{grid-template-columns:1fr;height:auto}#stage{height:55vh}#side{border-left:0;border-top:1px solid var(--line)}}