:root{--g:linear-gradient(135deg,#fff 0%,#c084fc 30%,#7c3aed 55%,#2e1065 80%,#000 100%);--acc:#c084fc;--acc2:#7c3aed;--bg:#08060d;--card:#120c1c;--line:#2e1065}*,:before,:after{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{background:var(--bg);color:#ece6f5;margin:0;font-family:system-ui,sans-serif}header{border-bottom:2px solid #0000;border-image:var(--g) 1;align-items:center;gap:12px;height:56px;padding:8px 16px;display:flex}.logo{background:var(--g);color:#fff;border-radius:10px;place-items:center;width:40px;height:40px;font-size:22px;display:grid}h1{background:linear-gradient(90deg,#fff,#c084fc 60%,#7c3aed);color:#0000;-webkit-background-clip:text;margin:0;font-size:20px}header p{opacity:.65;margin:2px 0 0;font-size:13px}#sync{opacity:.6;margin-left:auto;font-size:12px}main{justify-content:center;padding:8px 12px;display:flex}#office{min-width:0;max-width:100%}#stage{background:var(--g);border-radius:12px;max-width:100%;padding:3px;display:inline-block;position:relative;box-shadow:0 0 40px #7c3aed55}canvas#c{max-width:100%;image-rendering:pixelated;background:#000;border-radius:10px;display:block}#tag{border:1px solid var(--acc);color:#fff;white-space:nowrap;pointer-events:none;background:#000d;border-radius:6px;align-items:center;gap:6px;padding:3px 8px;font-size:12px;display:flex;position:absolute;transform:translate(-50%,-100%)}.dot{border-radius:50%;flex:none;width:9px;height:9px;display:inline-block}aside{z-index:20;background:var(--card);border:1px solid var(--acc2);border-radius:12px;width:min(320px,100vw - 24px);max-height:calc(100vh - 76px);padding:18px;position:fixed;top:64px;right:12px;overflow:auto;box-shadow:0 10px 40px #000c}aside .ava{background:var(--g);border-radius:16px;width:112px;height:112px;margin:4px auto 10px;padding:3px}aside .ava canvas{width:100%;height:100%;image-rendering:pixelated;background:#1e1030;border-radius:13px;display:block}aside h2{text-align:center;margin:4px 0}#p-title{opacity:.75;text-align:center;margin:2px 0 12px}.st{align-items:center;gap:8px;font-size:13px;display:flex}select,input{color:#ece6f5;border:1px solid var(--line);font:inherit;background:#1a1128;border-radius:8px;padding:7px 9px;font-size:13px}select:focus,input:focus{outline:1px solid var(--acc)}.btn{text-align:center;color:#fff;background:linear-gradient(90deg,#c084fc,#7c3aed);border-radius:10px;margin:14px 0;padding:11px;font-weight:700;text-decoration:none;display:block}.btn:hover{filter:brightness(1.15)}h3{opacity:.8;margin:12px 0 6px;font-size:14px}.add{gap:6px;display:flex}.add input{flex:1;min-width:0}.add button,.mini{background:var(--acc2);color:#fff;cursor:pointer;font:inherit;border:0;border-radius:8px;padding:7px 11px;font-size:13px}.mini{background:#2a1a40;padding:3px 7px;font-size:12px}.mini:hover{background:var(--acc2)}.tlist{max-height:220px;margin:0 0 8px;padding:0;list-style:none;overflow:auto}.tlist li{border-bottom:1px solid #ffffff10;align-items:center;gap:6px;padding:6px 0;font-size:13px;display:flex}.tlist li span{flex:1}.tag{opacity:.9;white-space:nowrap;background:#2a1a40;border-radius:6px;padding:2px 6px;font-size:10px}code{opacity:.4;word-break:break-all;margin-top:10px;font-size:10px;display:block}#close{color:#fff;cursor:pointer;background:0 0;border:0;font-size:16px;position:absolute;top:10px;right:10px}#board{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 12px 12px;padding:16px}#board summary{cursor:pointer;margin-bottom:10px;list-style:none}#board summary::-webkit-details-marker{display:none}#board summary h2{margin:0;font-size:17px;display:inline}#board summary:after{content:" ▾";opacity:.6}#board:not([open]) summary:after{content:" ▸"}#board:not([open]) summary{margin:0}#b-add{flex-wrap:wrap;max-width:760px;margin-bottom:14px}.cols{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.col{border:1px solid var(--line);background:#0d0915;border-radius:10px;min-height:120px;padding:10px}.col h4{justify-content:space-between;margin:0 0 8px;font-size:13px;display:flex}.col h4 b{color:var(--acc)}.card{background:#1a1128;border:1px solid #3b2364;border-radius:8px;margin-bottom:8px;padding:8px;font-size:13px}.card .who{opacity:.7;margin:4px 0 6px;font-size:11px}.card .acts{gap:4px;display:flex}.empty{opacity:.4;font-size:12px}footer{text-align:center;opacity:.5;padding:10px;font-size:11px}footer a{color:var(--acc)}@media (width<=700px){.cols{grid-template-columns:1fr}header p,#sync{display:none}header{height:48px}h1{font-size:16px}aside{border-radius:12px 12px 0 0;width:100%;max-height:70vh;inset:auto 0 0}}
