:root{--paper:#f6f1e4;--ink:#3a3a3a;--robot:#1e90ff;--tape:#f3d98b;--accent:#ff7a59}
*{box-sizing:border-box}
body{margin:0;font-family:'Patrick Hand',cursive;color:var(--ink);font-size:18px;
background:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 31px,#d9e3f0 31px 32px);}
header{display:flex;align-items:center;gap:14px;padding:16px 24px;flex-wrap:wrap}
h1{margin:0;font-size:46px;line-height:1}
.tag{margin:2px 0 0;opacity:.75}
#auth-status{margin-left:auto;font-size:15px}
main{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 20px;max-width:1150px;margin:auto}
@media(max-width:820px){main{grid-template-columns:1fr}}
.panel,#dash{background:#fffdf6;border:2.5px solid var(--ink);border-radius:14px 6px 16px 8px;padding:16px;box-shadow:4px 5px 0 #0002}
h2{margin:0 0 8px;font-size:28px}
canvas.paper{width:100%;aspect-ratio:1;background:#fffef9;border:2px dashed #999;border-radius:8px;touch-action:none;cursor:crosshair;display:block}
canvas.robot{cursor:default}
input{font-family:inherit;font-size:18px;padding:6px 10px;border:2px solid var(--ink);border-radius:8px;background:#fff;margin:6px 0;width:100%}
input[type=range],input[type=checkbox]{width:auto}
input[type=number]{width:90px}
label{display:block;margin:6px 0}
label.check{display:flex;gap:6px;align-items:center}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row input{flex:1;min-width:120px}
.tape{font-family:inherit;font-size:18px;background:var(--tape);border:none;padding:7px 14px;cursor:pointer;
transform:rotate(-1deg);box-shadow:1px 2px 0 #0003;margin:4px 0}
.tape:nth-child(even){transform:rotate(1.2deg)}
.tape:hover{animation:wig .3s}
.tape.accent{background:var(--accent);color:#fff}
.tape.small{font-size:15px}
.tape:disabled{opacity:.5}
@keyframes wig{25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1.5px solid var(--ink);border-radius:20px;padding:1px 10px;cursor:pointer;background:#fff}
.chip:hover{background:var(--tape)}
.rec{color:#e33;font-size:18px;animation:pulse 1s infinite}
.hidden{display:none}
@keyframes pulse{50%{opacity:.3}}
#gallery .grp{margin-top:10px}
#gallery .thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumb{position:relative}
.thumb canvas{width:60px;height:60px;border:1px solid #bbb;background:#fff;border-radius:4px}
.thumb button{position:absolute;top:-6px;right:-6px;border:none;background:#e33;color:#fff;border-radius:50%;width:18px;height:18px;font-size:11px;cursor:pointer;line-height:18px;padding:0}
.badge{background:var(--ink);color:#fff;border-radius:10px;padding:0 8px;font-size:14px}
.msg{min-height:24px;color:#555}
#dash{max-width:1150px;margin:20px auto}
.bar{height:12px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;margin:8px 0}
#prog{height:100%;width:0;background:var(--robot);transition:width .2s}
#lossChart{width:100%;height:140px;background:#fff;border:1px solid #ccc;border-radius:6px}
.mono{font-family:'JetBrains Mono',monospace;font-size:13px}
footer{text-align:center;padding:20px}
footer a{color:var(--ink)}
#bot.training{animation:bob .6s infinite alternate}
@keyframes bob{to{transform:translateY(-6px)}}