:root{--bg-app:#f4f6f8;--text-main:#1a202c;--text-muted:#4a5568;--text-light:#718096;--card-bg:#ffffffe0;--card-border:#e2e8f0e6;--badge-bg:#ebf8ff;--badge-text:#2b6cb0;--badge-border:#bee3f8;--accent-color:#3182ce;--accent-hover:#2b6cb0;--pill-bg:#1a202cbf;--pill-text:#f7fafc;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;font-family:var(--font-family);background-color:var(--bg-app);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.app-container{flex-direction:column;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.canvas-wrapper{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.bootstrap-overlay{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:16px;display:flex;position:absolute;top:0;left:0}.overlay-header{pointer-events:auto;-webkit-backdrop-filter:blur(8px);border:1px solid var(--card-border);background:#ffffffb8;border-radius:999px;justify-content:space-between;align-self:center;align-items:center;gap:12px;width:auto;max-width:96%;padding:6px 14px;display:flex;box-shadow:0 2px 10px #0000000d}.title-group{flex-direction:column;gap:6px;display:flex}.title-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.logo-icon{font-size:1.5rem;line-height:1}.app-title{color:var(--text-main);letter-spacing:-.02em;font-size:1rem;font-weight:700}.header-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.persistence-controls{position:relative}.persistence-status{max-width:240px;min-height:28px;color:var(--text-main);font:600 .72rem/1.2 var(--font-family);cursor:pointer;background:#fff;border:1px solid #cbd5e0;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;display:inline-flex}.persistence-status-dot{background:#48bb78;border-radius:50%;flex:none;width:7px;height:7px}.persistence-status-idle .persistence-status-dot,.persistence-status-loading .persistence-status-dot,.persistence-status-saving .persistence-status-dot,.persistence-status-saved-local .persistence-status-dot,.persistence-status-syncing .persistence-status-dot{background:#d69e2e}.persistence-status-recovered .persistence-status-dot,.persistence-status-offline .persistence-status-dot{background:#3182ce}.persistence-status-conflict .persistence-status-dot,.persistence-status-corrupt-save .persistence-status-dot,.persistence-status-error .persistence-status-dot,.persistence-status-action-required .persistence-status-dot{background:#e53e3e}.sync-conflict-backdrop{z-index:30;pointer-events:auto;background:#0f172a85;place-items:center;padding:76px 18px 24px;display:grid;position:absolute;inset:0;overflow-y:auto}.sync-conflict-dialog{width:min(760px,100%);color:var(--text-main);background:#fffffffa;border:1px solid #ffffffb8;border-radius:20px;flex-direction:column;gap:14px;padding:22px;display:flex;box-shadow:0 24px 70px #0f172a4d}.sync-conflict-icon{align-self:center;font-size:2rem}.sync-conflict-dialog h2,.sync-conflict-dialog>p{text-align:center}.sync-conflict-dialog>p,.sync-conflict-confirmation p,.sync-conflict-confirmation small{color:var(--text-muted);line-height:1.45}.sync-conflict-copies{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.sync-conflict-copy{background:#f8fafc;border:1px solid #dbe4ee;border-radius:14px;padding:14px}.sync-conflict-copy h3{margin-bottom:10px;font-size:.95rem}.sync-conflict-copy dl{gap:7px;display:grid}.sync-conflict-copy dl>div{justify-content:space-between;gap:12px;font-size:.76rem;display:flex}.sync-conflict-copy dt{color:var(--text-light)}.sync-conflict-copy dd{text-align:right;font-weight:650}.sync-conflict-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.sync-conflict-actions button{min-height:42px}.sync-conflict-confirmation{text-align:center;background:#fffaf0;border-radius:12px;flex-direction:column;gap:9px;padding:12px;display:flex}@media (width<=620px){.sync-conflict-backdrop{align-items:start;padding:70px 10px 16px}.sync-conflict-dialog{padding:16px}.sync-conflict-copies{grid-template-columns:1fr}}.persistence-menu{border:1px solid var(--card-border);width:min(340px,100vw - 24px);color:var(--text-main);-webkit-backdrop-filter:blur(12px);background:#fffffff7;border-radius:14px;flex-direction:column;gap:10px;padding:14px;display:flex;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 10px 30px #1a202c2e}.persistence-menu-heading,.persistence-actions,.persistence-confirmation{justify-content:space-between;align-items:center;gap:8px;display:flex}.persistence-menu-heading span{color:var(--text-light);font-size:.72rem}.persistence-actions,.persistence-confirmation{flex-wrap:wrap;justify-content:flex-start}.persistence-action{min-height:32px;color:var(--text-main);font:600 .74rem/1.2 var(--font-family);cursor:pointer;background:#fff;border:1px solid #cbd5e0;border-radius:9px;align-items:center;padding:6px 10px;display:inline-flex}.persistence-action:hover:not(:disabled){background:#f7fafc;border-color:#a0aec0}.persistence-action:disabled,.persistence-file-action.is-disabled{cursor:not-allowed;opacity:.5}.persistence-file-action input{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.persistence-danger{color:#9b2c2c;background:#fff5f5;border-color:#feb2b2}.persistence-warning,.persistence-error{font-size:.75rem;line-height:1.4}.persistence-warning{color:#744210}.persistence-error{color:#c53030}.persistence-preview{background:#f7fafc;border-radius:10px;flex-direction:column;gap:5px;padding:10px;font-size:.76rem;display:flex}.persistence-boot{text-align:center;width:100%;height:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:flex}.persistence-boot-icon{font-size:3rem}.persistence-boot small{max-width:520px;line-height:1.5}.identity-gate{border:1px solid var(--card-border);text-align:left;width:min(440px,100% - 32px);height:max-content;max-height:calc(100% - 104px);color:var(--text-main);-webkit-backdrop-filter:blur(14px);background:#fffffff5;border-radius:20px;flex-direction:column;align-items:stretch;gap:14px;margin:auto;padding:24px;display:flex;position:absolute;inset:72px 16px 16px;overflow-y:auto;box-shadow:0 18px 50px #1a202c29}.identity-gate-status{text-align:center;align-items:center}.identity-gate-icon{align-self:center;font-size:2.7rem;line-height:1}.identity-gate h2{text-align:center;font-size:1.25rem;line-height:1.2}.identity-gate p,.identity-gate small{line-height:1.5}.identity-gate>p,.identity-gate>small{color:var(--text-muted)}.identity-form{flex-direction:column;gap:12px;display:flex}.identity-form label{color:var(--text-muted);flex-direction:column;gap:5px;font-size:.78rem;font-weight:650;display:flex}.identity-form input{width:100%;min-height:42px;color:var(--text-main);font:500 .95rem/1.2 var(--font-family);background:#fff;border:1px solid #cbd5e0;border-radius:10px;padding:9px 11px}.identity-form input:focus{border-color:var(--accent-color);outline:3px solid #3182ce29}.identity-actions{flex-wrap:wrap;gap:9px;display:flex}.identity-primary,.identity-secondary,.logout-button{min-height:36px;font:650 .8rem/1.2 var(--font-family);cursor:pointer;border-radius:10px;padding:7px 12px}.identity-primary{border:1px solid var(--accent-color);background:var(--accent-color);color:#fff}.identity-primary:hover{background:var(--accent-hover)}.identity-secondary,.logout-button{color:var(--text-main);background:#fff;border:1px solid #cbd5e0}.identity-error{background:#fff5f5;border-radius:9px;padding:9px 10px;font-size:.8rem;color:#c53030!important}.user-identity{background:#fff;border:1px solid #cbd5e0;border-radius:999px;align-items:center;gap:7px;min-height:28px;padding:3px 4px 3px 10px;font-size:.72rem;display:inline-flex}.user-identity-label{text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-weight:700;overflow:hidden}.user-identity-offline,.user-identity-warning{color:#975a16;font-weight:700}.logout-button{border-radius:999px;min-height:24px;padding:3px 8px;font-size:.7rem}.lang-button{color:var(--text-main);cursor:pointer;background:#fff;border:1px solid #cbd5e0;border-radius:999px;align-items:center;gap:4px;padding:4px 10px;font-size:.75rem;font-weight:600;transition:all .15s;display:inline-flex}.lang-button:hover{background:#f7fafc;border-color:#a0aec0}.lang-button:active{transform:translateY(1px)}.overlay-footer{pointer-events:none;justify-content:center;align-items:center;gap:8px;width:100%;padding-bottom:8px;display:flex}.home-button,.mode-button{background:var(--pill-bg);color:var(--pill-text);-webkit-backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;border:none;border-radius:20px;align-items:center;gap:6px;padding:6px 16px;font-family:inherit;font-size:.8rem;font-weight:600;transition:transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 2px 10px #00000026}.mode-button:hover,.home-button:hover{transform:translateY(-1px);box-shadow:0 4px 14px #0003}.expand-button{color:#1e4630;background:#e6f4ea}.home-button:hover{transform:translateY(-1px);box-shadow:0 4px 14px #0003}.hamster-name-badge{color:#f0f4f8;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a1a24d9;border:1px solid #7fd4a8;border-radius:12px;padding:2px 10px;font-size:11px;font-weight:600}.edit-toolbar{pointer-events:auto;z-index:20;flex-direction:column;align-items:center;gap:8px;max-width:min(96%,860px);display:flex;position:absolute;bottom:58px;left:50%;transform:translate(-50%)}.palette-row,.toolbar-row{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--card-border);border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:8px 12px;display:flex;box-shadow:0 4px 20px #00000014}.palette-label{color:var(--text-muted);white-space:nowrap;font-size:.78rem;font-weight:700}.toolbar-hint{color:var(--text-light);font-size:.72rem}.item-chip{color:var(--text-main);cursor:pointer;background:#fff;border:1px solid #cbd5e0;border-radius:10px;align-items:center;gap:5px;min-height:34px;padding:7px 10px;font-family:inherit;font-size:.78rem;font-weight:600;transition:background .15s,transform .1s;display:inline-flex}.item-chip:hover{background:#f7fafc;border-color:#a0aec0}.item-chip:active{transform:translateY(1px)}.chip-size{color:var(--text-light);background:#edf2f7;border-radius:6px;padding:1px 5px;font-size:.66rem}.tool-status{white-space:nowrap;font-size:.78rem;font-weight:600}.status-valid{color:#2f855a}.status-invalid{color:#c53030}@media (width<=768px){.edit-toolbar{bottom:54px}.palette-row,.toolbar-row{max-width:100%}.bootstrap-overlay{padding:8px}.overlay-header{max-width:100%}.app-title{font-size:.9rem}.identity-gate{width:min(440px,100% - 16px);max-height:calc(100% - 84px);padding:20px;inset:68px 8px 8px}}@media (width<=480px){.overlay-header{border-radius:18px;flex-wrap:wrap;justify-content:center}.header-actions{max-width:100%}.user-identity-label{max-width:72px}.identity-gate{max-height:calc(100% - 120px);inset:104px 8px 8px}.edit-toolbar{width:calc(100% - 16px)}.palette-row{overscroll-behavior-x:contain;scrollbar-width:thin;flex-wrap:nowrap;justify-content:flex-start;width:100%;overflow-x:auto}.palette-row>*{flex:none}.title-row{gap:6px}.app-title{font-size:.82rem}.persistence-status{text-overflow:ellipsis;white-space:nowrap;max-width:132px;overflow:hidden}.persistence-menu{position:fixed;top:58px;right:8px}}.pwa-update-dialog-backdrop{-webkit-backdrop-filter:blur(6px);z-index:1000;background:#0f172ab3;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.pwa-update-dialog-content{text-align:center;border:1px solid var(--card-border);background:#fff;border-radius:20px;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:440px;padding:24px;display:flex;box-shadow:0 20px 40px #00000040}.pwa-update-icon{font-size:2.4rem;line-height:1}.pwa-update-title{color:var(--text-main);margin:0;font-size:1.25rem;font-weight:700}.pwa-update-desc{color:var(--text-muted);margin:0;font-size:.92rem;line-height:1.45}.pwa-update-status{border-radius:8px;width:100%;padding:6px 14px;font-size:.85rem;font-weight:600}.pwa-status-busy{color:#2b6cb0;background:#ebf8ff;border:1px solid #bee3f8}.pwa-status-error{color:#c53030;background:#fff5f5;border:1px solid #fed7d7}.pwa-update-actions{gap:10px;width:100%;margin-top:8px;display:flex}.pwa-btn{cursor:pointer;border:none;border-radius:12px;flex:1;padding:10px 16px;font-size:.92rem;font-weight:600;transition:background-color .15s,opacity .15s}.pwa-btn:disabled{opacity:.6;cursor:not-allowed}.pwa-btn-primary{background:var(--accent-color);color:#fff}.pwa-btn-primary:hover:not(:disabled){background:var(--accent-hover)}.pwa-btn-secondary{color:var(--text-main);background:#edf2f7}.pwa-btn-secondary:hover:not(:disabled){background:#e2e8f0}.pwa-offline-toast{color:#f8fafc;z-index:999;pointer-events:auto;background:#1e293b;border-radius:12px;align-items:center;gap:10px;padding:10px 16px;font-size:.88rem;display:flex;position:fixed;bottom:20px;left:20px;box-shadow:0 4px 16px #0003}.pwa-toast-icon{font-size:1.1rem}.pwa-toast-text{margin:0}.pwa-toast-dismiss{color:#cbd5e1;cursor:pointer;background:0 0;border:1px solid #ffffff40;border-radius:6px;padding:2px 8px;font-size:.78rem}.pwa-toast-dismiss:hover{color:#fff;background:#ffffff1a}.pwa-upgrade-banner{z-index:50;color:#92400e;text-align:center;pointer-events:auto;background:#fffbeb;border:1px solid #f6d58c;border-radius:12px;align-items:center;gap:8px;width:max-content;max-width:min(92vw,720px);padding:8px 12px;font-size:.85rem;font-weight:600;display:flex;position:fixed;top:72px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000014}.pwa-upgrade-check{color:#fff;min-height:32px;font:600 .8rem/1.2 var(--font-family);cursor:pointer;background:#2b6cb0;border:0;border-radius:9px;flex:none;padding:5px 10px}.pwa-upgrade-check:hover{background:#245a95}.pwa-btn:focus-visible,.pwa-toast-dismiss:focus-visible,.pwa-upgrade-check:focus-visible{outline-offset:2px;outline:3px solid #3182ce61}@media (width<=640px){.pwa-upgrade-banner{flex-wrap:wrap;justify-content:center;width:calc(100vw - 20px);top:68px}.pwa-update-actions{flex-direction:column}.pwa-offline-toast{bottom:10px;left:10px;right:10px}}