body{font-family:Inter,system-ui,Arial,sans-serif;background:radial-gradient(800px circle at 20% 20%,#6b6bff33 0,#0f0f10 60%),#0f0f10;margin:0}.card{width:680px;margin:40px auto;background:#16171a;border-radius:16px;padding:18px;color:#e6fff3;box-shadow:0 10px 36px #0009}.card.connected{width:1040px}.header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.dot{width:14px;height:14px;border-radius:50%;background:#00f3a5;box-shadow:0 0 10px #00f3a5}.header h1{margin:0;color:#7ef3c1;font-size:20px}.banner{border:1px solid #0bd0a5;border-radius:8px;padding:8px 10px;margin:10px 0;font-size:14px;background:#0e1f1b;color:#9be6c9}.banner.bad{border-color:#ff6b6b;background:#281a1a;color:#ffd1d1}.banner.ok{border-color:#0bd0a5;background:#0e1f1b;color:#9be6c9}.center{text-align:center;padding:18px}.emoji{font-size:42px;margin:8px 0}.controls{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:10px;background:#1f2024;border-radius:10px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0f1014;border:1px solid #2a2b30;border-radius:10px;padding:8px}.control-group,.shape-bar{display:flex;align-items:center;gap:8px}.tool-column{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid #2a2b30;border-radius:10px;background:#1f2024}.shape-btn{width:28px;height:28px;border-radius:6px;background:#2b2d31;color:#e6fff3;border:1px solid #3a3b40;display:flex;align-items:center;justify-content:center}.shape-btn.active{border-color:#00f3a5;box-shadow:0 0 0 2px #00f3a5}.upload-group span{margin-right:6px;opacity:.9}.canvas-frame{padding:8px;border:1px solid #2a2b30;border-radius:10px;background:#0f1014}.canvas{display:block;margin:0 auto;border-radius:8px;background:#fff;box-shadow:0 6px 18px #0006;cursor:crosshair}button{cursor:pointer;padding:10px 14px;border-radius:10px;border:none}.btn{background:#2b2d31;color:#e6fff3}.btn-primary{background:#00f3a5;color:#000;font-weight:700}.btn-danger{background:#ff6b6b;color:#000;font-weight:700}.status{text-align:center;font-size:13px;color:#ffd;margin-top:10px}.link{color:#9be6c9;text-decoration:underline;display:block;text-align:center;margin-top:8px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#16171a;border-radius:12px;padding:18px;width:380px;color:#e6fff3;box-shadow:0 10px 36px #0009}.spinner{width:20px;height:20px;border:3px solid #3a3b40;border-top-color:#00f3a5;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-actions{text-align:right;margin-top:12px}button:disabled{opacity:.6;cursor:not-allowed}.workspace{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.shape-sidebar{width:96px;background:#1f2024;border:1px solid #2a2b30;border-radius:10px;padding:8px}.shape-sidebar-header{font-weight:700;margin-bottom:8px;cursor:pointer;opacity:.95;background:#0f4a3b;color:#c9ffe6;border:1px solid #156955;border-radius:8px;padding:6px 8px}.shape-list{display:flex;flex-direction:column;gap:6px;max-height:408px;overflow-y:auto}.shape-item{width:100%;height:34px;border-radius:8px;background:#2b2d31;color:#e6fff3;border:1px solid #3a3b40;display:flex;align-items:center;justify-content:center}.shape-item.active{border-color:#00f3a5;box-shadow:0 0 0 2px #00f3a5}.action-column{display:flex;flex-direction:column;gap:6px}