.friends-page[data-v-7e371a40]{gap:22px;display:grid}.friends-header[data-v-7e371a40]{align-items:center;gap:16px;display:flex}.friends-header h2[data-v-7e371a40]{margin:0;font-size:32px}.back-button[data-v-7e371a40]{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:12px;padding:8px 18px;font-weight:600;transition:background .2s}.back-button[data-v-7e371a40]:hover{background:#f2f5fa}.friends-section[data-v-7e371a40]{gap:14px;display:grid}.friends-section h3[data-v-7e371a40]{color:#36415a;margin:0;font-size:16px;font-weight:700}.send-request-form[data-v-7e371a40]{gap:12px;display:grid}.request-item[data-v-7e371a40]{background:#fbfcff;border:1px solid #e5eaf3;border-radius:16px;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.request-info[data-v-7e371a40]{gap:4px;display:grid}.request-sender[data-v-7e371a40]{color:#172033;font-weight:600}.request-message[data-v-7e371a40]{color:#7d889f;font-size:13px}.request-actions[data-v-7e371a40]{flex-shrink:0;gap:8px;display:flex}.accept-button[data-v-7e371a40],.reject-button[data-v-7e371a40]{cursor:pointer;border:0;border-radius:12px;padding:8px 16px;font-weight:600;transition:background .2s}.accept-button[data-v-7e371a40]{color:#fff;background:#536dfe}.accept-button[data-v-7e371a40]:hover{background:#4258e0}.reject-button[data-v-7e371a40]{color:#a43f3f;background:#fff1f1}.reject-button[data-v-7e371a40]:hover{background:#ffe0e0}.empty-hint[data-v-7e371a40]{color:#7d889f;padding:8px 0;font-size:14px}.pixel-shell[data-v-78551371]{flex-direction:column;height:100%;display:flex;position:relative}.top-bar[data-v-78551371]{background:#fff;border-bottom:1px solid #eef1f6;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.top-left[data-v-78551371]{align-items:center;gap:8px;min-width:0;display:flex}.canvas-name[data-v-78551371]{color:#172033;font-size:15px;font-weight:700}.canvas-size[data-v-78551371]{color:#a0abbf;font-size:12px;font-weight:600}.canvas-select[data-v-78551371]{color:#53607a;cursor:pointer;background:#fbfcff;border:1px solid #d9e0ed;border-radius:8px;padding:4px 8px;font-size:13px}.top-right[data-v-78551371]{align-items:center;gap:6px;display:flex}.top-button[data-v-78551371]{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:8px;align-items:center;gap:5px;padding:6px 10px;font-size:13px;font-weight:600;transition:background .2s;display:inline-flex}.top-button[data-v-78551371]:hover{background:#f2f5fa}.user-dropdown[data-v-78551371]{position:relative}.dropdown-menu[data-v-78551371]{z-index:10;background:#fff;border:1px solid #e5eaf3;border-radius:8px;min-width:100px;padding:4px;display:none;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 8px 24px #1e375a1f}.dropdown-menu.visible[data-v-78551371]{display:block}.dropdown-menu button[data-v-78551371]{color:#53607a;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;width:100%;padding:6px 10px;font-weight:600;transition:background .2s,color .2s}.dropdown-menu button[data-v-78551371]:hover{color:#a43f3f;background:#fff1f1}.toolbar-row[data-v-78551371]{background:#f9faff;border-bottom:1px solid #eef1f6;flex-shrink:0;align-items:center;gap:6px;padding:6px 16px;display:flex}.tool-button[data-v-78551371]{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:8px;align-items:center;gap:5px;padding:5px 10px;font-size:13px;font-weight:600;transition:background .2s;display:inline-flex}.tool-button[data-v-78551371]:hover{background:#eef1f6}.tool-button[data-v-78551371]:disabled{opacity:.5;cursor:not-allowed}.export-wrap[data-v-78551371]{position:relative}.export-menu[data-v-78551371]{z-index:10;background:#fff;border:1px solid #e5eaf3;border-radius:8px;min-width:110px;padding:4px;display:none;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 8px 24px #1e375a1f}.export-menu.visible[data-v-78551371]{display:block}.export-menu button[data-v-78551371]{color:#53607a;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;width:100%;padding:6px 10px;font-size:13px;font-weight:600;transition:background .2s}.export-menu button[data-v-78551371]:hover{background:#eef1f6}.new-canvas-bar[data-v-78551371]{background:#f9faff;border-bottom:1px solid #eef1f6;flex-shrink:0;align-items:center;gap:8px;padding:8px 16px;display:flex}.new-name-input[data-v-78551371]{background:#fff;border:1px solid #d9e0ed;border-radius:8px;outline:none;flex:1;min-width:100px;padding:6px 10px;font-size:13px}.new-name-input[data-v-78551371]:focus{border-color:#6d63ff}.new-dim-label[data-v-78551371]{color:#53607a;align-items:center;gap:4px;font-size:12px;font-weight:600;display:flex}.new-dim-input[data-v-78551371]{text-align:center;background:#fff;border:1px solid #d9e0ed;border-radius:6px;outline:none;width:50px;padding:4px 6px;font-size:13px}.new-dim-input[data-v-78551371]:focus{border-color:#6d63ff}.primary-button.small[data-v-78551371]{color:#fff;cursor:pointer;background:linear-gradient(135deg,#536dfe,#8f56ff);border:0;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:700}.primary-button.small[data-v-78551371]:disabled{opacity:.6;cursor:not-allowed}.secondary-button.small[data-v-78551371]{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600}.loading-area[data-v-78551371]{flex:1;justify-content:center;align-items:center;display:flex}.state-box[data-v-78551371]{color:#7d889f;background:#f2f5fa;border-radius:12px;padding:24px;font-weight:600}.canvas-workspace[data-v-78551371]{-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;min-height:0;display:flex}.canvas-area[data-v-78551371]{flex:1;justify-content:center;align-items:center;padding:16px;display:flex;overflow:auto}.pixel-cell[data-v-78551371]{cursor:pointer;transition:filter .1s;position:relative}.pixel-cell[data-v-78551371]:hover{filter:brightness(1.18)}.pixel-hit-area[data-v-78551371]{border-radius:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-bar[data-v-78551371]{background:#fff;border-top:1px solid #eef1f6;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:6px;padding:12px 16px;display:flex}.color-swatch[data-v-78551371]{cursor:pointer;box-sizing:border-box;border-radius:5px;flex-shrink:0;width:26px;height:26px;transition:transform .12s}.color-swatch[data-v-78551371]:hover{transform:scale(1.15)}.color-swatch.active[data-v-78551371]{transform:scale(1.2);box-shadow:0 0 0 2px #172033}.color-input-wrap[data-v-78551371]{align-items:center;gap:6px;margin-left:auto;display:flex}.color-picker[data-v-78551371]{cursor:pointer;background:0 0;border:none;border-radius:5px;width:28px;height:28px;padding:0}.color-picker[data-v-78551371]::-webkit-color-swatch-wrapper{padding:0}.color-picker[data-v-78551371]::-webkit-color-swatch{border:1px solid #d9e0ed;border-radius:3px}.color-hex[data-v-78551371]{color:#53607a;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.fade-leave-active[data-v-78551371]{transition:opacity .5s}.fade-enter-active[data-v-78551371]{transition:opacity .2s}.fade-enter-from[data-v-78551371],.fade-leave-to[data-v-78551371]{opacity:0}.message-overlay[data-v-78551371]{z-index:10;pointer-events:none;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;top:68px;left:50%;transform:translate(-50%)}.message[data-v-78551371]{white-space:nowrap;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:8px;margin:0;padding:8px 16px;line-height:1.5}.message.success[data-v-78551371]{color:#267a54;background:#effaf4e0}.message.error[data-v-78551371]{color:#a43f3f;background:#fff1f1e0}.canvas-area[data-v-78551371]{flex:1;justify-content:center;align-items:center;gap:16px;padding:16px;display:flex;overflow:auto}.clear-btn[data-v-78551371]{color:#a0abbf;cursor:pointer;background:#fff;border:1px solid #e5eaf3;border-radius:8px;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;padding:10px 8px;font-size:11px;font-weight:600;transition:color .2s,border-color .2s;display:flex}.clear-btn[data-v-78551371]:hover{color:#a43f3f;border-color:#f5c6c6}.modal-overlay[data-v-78551371]{z-index:100;background:#1720337a;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog[data-v-78551371]{background:#fff;border-radius:16px;width:360px;max-width:90vw;padding:28px;box-shadow:0 24px 48px #1e375a2e}.modal-title[data-v-78551371]{color:#172033;margin:0 0 8px;font-size:18px}.modal-desc[data-v-78551371]{color:#7d889f;margin:0 0 16px;font-size:14px;line-height:1.6}.modal-hint[data-v-78551371]{color:#53607a;margin:0 0 8px;font-size:14px}.modal-input[data-v-78551371]{box-sizing:border-box;background:#fbfcff;border:1px solid #d9e0ed;border-radius:10px;outline:none;width:100%;padding:10px 12px;font-size:15px;transition:border-color .2s}.modal-input[data-v-78551371]:focus{border-color:#a43f3f}.modal-actions[data-v-78551371]{gap:8px;margin-top:16px;display:flex}.modal-actions .secondary-button[data-v-78551371]{flex:1}.danger-button[data-v-78551371]{color:#fff;cursor:pointer;background:#d43f3f;border:0;border-radius:10px;flex:1;padding:10px;font-size:14px;font-weight:700;transition:opacity .2s}.danger-button[data-v-78551371]:disabled{cursor:not-allowed;opacity:.4}.danger-button[data-v-78551371]:not(:disabled):hover{opacity:.88}.bgcolor-wrap[data-v-78551371]{position:relative}.bgcolor-dropdown[data-v-78551371]{z-index:10;background:#fff;border:1px solid #e5eaf3;border-radius:8px;min-width:80px;padding:6px;display:none;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 8px 24px #1e375a1f}.bgcolor-dropdown.visible[data-v-78551371]{display:block}.bgcolor-item[data-v-78551371]{color:#53607a;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:5px 8px;font-size:12px;font-weight:600;transition:background .15s;display:flex}.bgcolor-item[data-v-78551371]:hover{background:#eef1f6}.bgcolor-item.active[data-v-78551371]{outline-offset:-2px;background:#e8ebf3;outline:2px solid #172033}.bgcolor-swatch[data-v-78551371]{border:1px solid #00000014;border-radius:3px;flex-shrink:0;width:18px;height:18px;display:inline-block}.bgcolor-hex[data-v-78551371]{font-variant-numeric:tabular-nums}.gallery-shell[data-v-9c8725b6]{flex-direction:column;height:100%;min-height:400px;display:flex}.gallery-header[data-v-9c8725b6]{background:#fff;border-bottom:1px solid #eef1f6;flex-shrink:0;align-items:center;gap:12px;padding:8px 16px;display:flex}.top-button[data-v-9c8725b6]{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:8px;align-items:center;gap:5px;padding:6px 10px;font-size:13px;font-weight:600;transition:background .2s;display:inline-flex}.top-button[data-v-9c8725b6]:hover{background:#f2f5fa}.gallery-title[data-v-9c8725b6]{color:#172033;margin:0;font-size:16px;font-weight:700}.message[data-v-9c8725b6]{flex-shrink:0;margin:0;padding:8px 16px}.message.error[data-v-9c8725b6]{color:#a43f3f;background:#fff1f1}.loading-area[data-v-9c8725b6]{flex:1;justify-content:center;align-items:center;display:flex}.state-box[data-v-9c8725b6]{color:#7d889f;background:#f2f5fa;border-radius:12px;padding:24px;font-weight:600}.gallery-grid[data-v-9c8725b6]{flex-wrap:wrap;flex:1;align-content:flex-start;gap:12px;padding:16px;display:flex;overflow-y:auto}.artwork-card[data-v-9c8725b6]{cursor:pointer;background:#fff;border:1px solid #e5eaf3;border-radius:12px;width:180px;transition:box-shadow .2s,border-color .2s;position:relative;overflow:hidden}.artwork-card[data-v-9c8725b6]:hover{border-color:#c5cdda;box-shadow:0 4px 12px #1e375a14}.artwork-delete-btn[data-v-9c8725b6]{color:#a0abbf;cursor:pointer;opacity:0;z-index:2;background:#ffffffd9;border:none;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;transition:opacity .2s,color .2s,background .2s;display:flex;position:absolute;top:6px;right:6px}.artwork-card:hover .artwork-delete-btn[data-v-9c8725b6]{opacity:1}.artwork-delete-btn[data-v-9c8725b6]:hover{color:#a43f3f;background:#fff1f1}.artwork-preview[data-v-9c8725b6]{box-sizing:border-box;background:#f2f5fa;justify-content:center;align-items:center;width:180px;height:180px;display:flex}.preview-grid[data-v-9c8725b6]{border:1px solid #d9e0ed}.preview-cell[data-v-9c8725b6]{aspect-ratio:1}.artwork-info[data-v-9c8725b6]{border-top:1px solid #f2f5fa;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.artwork-name[data-v-9c8725b6]{color:#172033;font-size:14px;font-weight:600}.artwork-size[data-v-9c8725b6]{color:#a0abbf;font-size:12px;font-weight:600}.modal-overlay[data-v-9c8725b6]{z-index:100;background:#1720337a;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog[data-v-9c8725b6]{background:#fff;border-radius:16px;width:360px;max-width:90vw;padding:28px;box-shadow:0 24px 48px #1e375a2e}.modal-title[data-v-9c8725b6]{color:#172033;margin:0 0 8px;font-size:18px}.modal-desc[data-v-9c8725b6]{color:#53607a;margin:0 0 20px;font-size:14px;line-height:1.6}.modal-actions[data-v-9c8725b6]{gap:8px;display:flex}.modal-actions .secondary-button[data-v-9c8725b6]{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:10px;flex:1;padding:10px;font-size:14px;font-weight:700;transition:background .2s}.modal-actions .secondary-button[data-v-9c8725b6]:hover{background:#f2f5fa}.danger-button[data-v-9c8725b6]{color:#fff;cursor:pointer;background:#d43f3f;border:0;border-radius:10px;flex:1;padding:10px;font-size:14px;font-weight:700;transition:opacity .2s}.danger-button[data-v-9c8725b6]:hover{opacity:.88}.site-footer[data-v-61c1fb62]{text-align:center;grid-column:1/-1;padding:16px 24px}.site-footer a[data-v-61c1fb62]{color:#a0abbf;font-size:12px;text-decoration:none;transition:color .15s}.site-footer a[data-v-61c1fb62]:hover{color:#6d63ff}.site-footer .footer-sep[data-v-61c1fb62]{color:#c5ccdb;margin:0 8px;font-size:11px}.site-footer .gongan-link[data-v-61c1fb62]{color:#a0abbf;align-items:center;gap:4px;font-size:12px;text-decoration:none;transition:color .15s;display:inline-flex}.site-footer .gongan-link[data-v-61c1fb62]:hover{color:#6d63ff}.site-footer .gongan-badge[data-v-61c1fb62]{width:auto;height:14px;display:block}:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}.page-shell{grid-template-columns:minmax(0,1fr) minmax(340px,440px);align-items:stretch;gap:32px;width:min(1120px,100% - 32px);min-height:100vh;margin:0 auto;padding:48px 0;display:grid}.page-shell.home-layout{grid-template-columns:1fr;padding-top:16px}.hero-card,.panel{border:1px solid #7a8aab2e;border-radius:28px;box-shadow:0 24px 80px #1e375a1f}.hero-card{color:#fff;background:radial-gradient(circle at 20% 18%,#ffffff59 0 8%,#0000 9%),radial-gradient(circle at 82% 14%,#ffffff47 0 6%,#0000 7%),linear-gradient(135deg,#536dfe 0%,#7c4dff 48%,#ff6fae 100%);flex-direction:column;justify-content:flex-end;min-height:560px;padding:48px;display:flex;position:relative;overflow:hidden}.hero-card:before{content:"";background-color:#0000;background-image:linear-gradient(90deg,#ffffff2e 1px,#0000 1px),linear-gradient(#ffffff2e 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:340px;height:340px;position:absolute;inset:auto -80px -120px auto;transform:rotate(12deg)}.brand-mark{letter-spacing:.04em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff29;border:2px solid #ffffffb3;border-radius:18px;place-items:center;width:64px;height:64px;font-weight:800;display:grid;position:absolute;top:36px;left:36px}.eyebrow{color:inherit;letter-spacing:.12em;text-transform:uppercase;opacity:.72;margin:0 0 12px;font-size:13px;font-weight:800}h1,h2{margin:0;line-height:1.08}h1{letter-spacing:-.06em;max-width:560px;font-size:clamp(42px,8vw,86px)}h2{color:#172033;letter-spacing:-.04em;font-size:32px}.hero-copy,.form-hint,.welcome-text{color:#172033ad;line-height:1.7}.hero-copy{color:#ffffffd1;max-width:520px;margin:24px 0 0;font-size:18px}.panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffeb;flex-direction:column;justify-content:center;padding:40px;display:flex}.tabs{background:#eef2f8;border-radius:999px;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:28px;padding:6px;display:grid}.tabs button{color:#657089;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:10px 16px}.tabs button.active{color:#172033;background:#fff;font-weight:700;box-shadow:0 8px 20px #1e375a14}.form-hint{margin:12px 0 24px}.auth-form{gap:18px;display:grid}label{color:#36415a;gap:8px;font-size:14px;font-weight:700;display:grid}input{color:#172033;background:#fbfcff;border:1px solid #d9e0ed;border-radius:16px;outline:none;width:100%;padding:14px 16px;transition:border-color .2s,box-shadow .2s,background .2s}input:focus{background:#fff;border-color:#6d63ff;box-shadow:0 0 0 4px #6d63ff1f}.primary-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#536dfe,#8f56ff);border:0;border-radius:16px;width:100%;padding:15px 18px;font-weight:800;transition:transform .2s,box-shadow .2s,opacity .2s;box-shadow:0 16px 30px #536dfe47}.primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 20px 38px #536dfe57}.primary-button:disabled{cursor:not-allowed;opacity:.68}.message,.state-box{border-radius:16px;padding:12px 14px;line-height:1.5}.message{margin:0 0 16px}.message.error{color:#a43f3f;background:#fff1f1}.message.success{color:#267a54;background:#effaf4}.state-box{color:#53607a;background:#f2f5fa}.home-view{flex-direction:column;height:100%;min-height:400px;display:flex}@media (width<=860px){.page-shell{grid-template-columns:1fr;padding:24px 0}.hero-card{min-height:360px;padding:32px}.panel{padding:28px}}.home-header{border-bottom:1px solid #eef1f6;justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.home-time{color:#7d889f;font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.home-actions{align-items:center;gap:8px;display:flex}.friend-button{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:10px;align-items:center;gap:6px;padding:6px 12px;font-weight:600;transition:background .2s,border-color .2s;display:inline-flex}.friend-button:hover{background:#f2f5fa;border-color:#c5cdda}.user-dropdown{position:relative}.user-button{color:#36415a;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 10px;font-weight:700;transition:background .2s}.user-button:hover{background:#f2f5fa}.dropdown-menu{z-index:10;background:#fff;border:1px solid #e5eaf3;border-radius:12px;min-width:110px;padding:4px;display:none;position:absolute;top:100%;right:0;box-shadow:0 8px 24px #1e375a1f}.user-dropdown:hover .dropdown-menu{display:block}.dropdown-menu button{color:#53607a;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;width:100%;padding:6px 10px;font-weight:600;transition:background .2s,color .2s}.dropdown-menu button:hover{color:#a43f3f;background:#fff1f1}.secondary-button{color:#53607a;cursor:pointer;background:#fff;border:1px solid #d9e0ed;border-radius:16px;width:100%;padding:15px 18px;font-weight:700;transition:background .2s,border-color .2s}.secondary-button:hover{background:#f2f5fa;border-color:#c5cdda}