:root{--bg: #000000;--glass: rgba(22, 22, 26, .62);--line: rgba(255, 255, 255, .08);--fg: #ececef;--muted: #8a8a93;--accent: #6ea8fe;--ok: #46d39a;--warn: #f0b34e;--off: #6b6b73;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);overflow:hidden}body{color:var(--fg);position:fixed;top:0;right:0;bottom:0;left:0;width:100%;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.canvas{position:fixed;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--bg);cursor:crosshair}.install-hint{position:fixed;left:50%;transform:translate(-50%);top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:10px 12px 10px 14px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 40px #00000080;z-index:25;font-size:13px;color:var(--fg);animation:pop .25s cubic-bezier(.2,.9,.3,1.1)}.install-hint b{color:var(--accent)}.install-hint .x{width:26px;height:26px;flex:none;border:none;border-radius:9px;background:#ffffff14;color:var(--fg);cursor:pointer;font-size:15px}.toolbar{position:fixed;left:50%;transform:translate(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:4px;padding:7px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 44px #0000008c;z-index:20}.tbtn{width:46px;height:46px;border:none;border-radius:17px;background:transparent;color:var(--fg);display:grid;place-items:center;font-size:19px;cursor:pointer;transition:transform .14s ease,background .14s ease;-webkit-tap-highlight-color:transparent}.tbtn:hover{background:#ffffff14}.tbtn:active{transform:scale(.88)}.tbtn.active{background:#ffffff26}.tbtn .dot{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px #ffffff26 inset}.panel{position:fixed;left:50%;transform:translate(-50%);bottom:calc(78px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 24px));max-height:56vh;overflow:auto;background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 14px 50px #0009;z-index:19;animation:pop .18s cubic-bezier(.2,.9,.3,1.2);touch-action:pan-y}@keyframes pop{0%{opacity:0;transform:translate(-50%,8px) scale(.97)}}.panel h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.swatch{aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .12s}.swatch:active{transform:scale(.85)}.swatch.sel{border-color:#fff}.row{display:flex;align-items:center;gap:12px;margin-top:16px}.row input[type=range]{flex:1;accent-color:var(--accent)}.preview-dot{border-radius:50%;background:#fff;flex:none}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:9px 14px;border-radius:13px;border:1px solid var(--line);background:#ffffff0a;color:var(--fg);cursor:pointer;font-size:14px;transition:background .14s,transform .12s}.chip:active{transform:scale(.93)}.chip.sel{background:var(--accent);color:#04122e;border-color:transparent;font-weight:600}.sync-line{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}.sync-dot{width:10px;height:10px;border-radius:50%;flex:none}.sync-dot.on{background:var(--ok)}.sync-dot.off{background:var(--off)}.sync-dot.busy{background:var(--warn);animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}.muted{color:var(--muted);font-size:13px}.tree-item{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:10px;cursor:pointer;transition:background .12s}.tree-item:hover{background:#ffffff0d}.tree-item.cur{background:#6ea8fe29}.tree-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.tree-item .mini{opacity:0;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:7px}.tree-item:hover .mini{opacity:1}.tree-item .mini:hover{background:#ffffff1a;color:var(--fg)}.tree-actions{display:flex;gap:8px;margin-bottom:12px}.auth{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px}.auth-card{width:min(360px,100%);background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 20px 60px #0009;animation:pop .25s cubic-bezier(.2,.9,.3,1.1)}.brand{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}.tag{color:var(--muted);margin:0 0 22px;font-size:14px}.field{width:100%;padding:13px 14px;margin-bottom:12px;background:#00000059;border:1px solid var(--line);border-radius:13px;color:var(--fg);font-size:15px}.field:focus{outline:none;border-color:var(--accent)}.btn{width:100%;padding:13px;border:none;border-radius:13px;background:var(--accent);color:#04122e;font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s,filter .14s}.btn:active{transform:scale(.97)}.btn:hover{filter:brightness(1.06)}.btn.ghost{background:transparent;color:var(--muted);font-weight:500;margin-top:6px}.err{color:#ff6b6b;font-size:13px;min-height:18px;margin:2px 0 8px}
