:root{--bg:#f7f7f9;--surface:#fff;--text:#1c1c22;--muted:#6b6b76;--border:#e3e3e8;--primary:#4f46e5;--primary-hover:#4338ca;--primary-text:#fff;--danger:#dc2626;--ok:#16a34a;--warn:#d97706;--radius:10px;--shadow:0 1px 2px #0000000f, 0 2px 8px #0000000a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#121216;--surface:#1c1c22;--text:#ececf1;--muted:#9a9aa6;--border:#2e2e36;--primary:#6d68f0;--primary-hover:#837ff5;--shadow:none}}*{box-sizing:border-box}body{background:var(--bg);margin:0}a{color:var(--primary)}h1{margin:0 0 1rem;font-size:1.4rem}.muted{color:var(--muted)}.small{font-size:.8rem}.error{color:var(--danger)}.page-center{text-align:center;place-content:center;justify-items:center;gap:.75rem;min-height:100dvh;padding:1rem;display:grid}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;gap:.35rem;padding:.5rem .9rem;font-size:.9rem;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:disabled{opacity:.6;cursor:default}.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-text)}.btn.primary:hover:not(:disabled){background:var(--primary-hover)}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover:not(:disabled){background:color-mix(in srgb, var(--text) 7%, transparent);border-color:#0000}.btn.danger{color:var(--danger)}.btn.small{padding:.25rem .55rem;font-size:.8rem}input{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:8px;min-width:0;padding:.5rem .65rem}input:focus-visible,.btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.auth-page{place-items:center;min-height:100dvh;padding:1rem;display:grid}.auth-card{background:var(--surface);border:1px solid var(--border);width:min(380px,100%);box-shadow:var(--shadow);border-radius:14px;padding:1.75rem}.auth-card .logo{margin-bottom:1.25rem}.form{gap:.9rem;margin-bottom:1rem;display:grid}.form label{gap:.3rem;font-size:.9rem;display:grid}.logo{color:var(--text);align-items:center;gap:.5rem;font-weight:650;text-decoration:none;display:inline-flex}.topbar{z-index:5;background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:1rem;padding:.6rem 1rem;display:flex;position:sticky;top:0}.search{flex:1;max-width:420px;margin-left:auto}.menu{position:relative}.menu summary{list-style:none}.menu summary::-webkit-details-marker{display:none}.menu-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:.2rem;min-width:200px;padding:.5rem;display:grid;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 24px #0000001f}.menu-panel p{margin:.25rem .5rem .4rem}.menu-panel .btn{justify-content:flex-start}.dashboard-main{max-width:1200px;margin:0 auto;padding:1.25rem 1rem 3rem}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.toolbar-actions{gap:.5rem;display:flex}.tabs{background:color-mix(in srgb, var(--text) 6%, transparent);border-radius:9px;padding:3px;display:inline-flex}.tabs button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:.35rem .9rem;font-size:.9rem}.tabs button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.notice{border-radius:var(--radius);background:color-mix(in srgb, var(--primary) 10%, var(--surface));justify-content:space-between;align-items:center;gap:1rem;padding:.4rem .4rem .4rem .9rem;font-size:.9rem;display:flex}.empty{text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius);padding:3rem 1rem}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;display:flex;overflow:hidden}.thumb{aspect-ratio:16/10;border-bottom:1px solid var(--border);background:#fff;place-items:center;display:grid;overflow:hidden}.thumb img{object-fit:contain;width:100%;height:100%;padding:.5rem}.thumb-placeholder{color:#c4c4cc;font-size:2rem}.card-body{padding:.65rem .75rem .5rem}.card-title{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.95rem;font-weight:600;overflow:hidden}.card-title-input{width:100%;padding:.15rem .35rem;font-weight:600}.card-body p{margin:.2rem 0 .4rem}.card-actions{gap:.15rem;margin-left:-.45rem;display:flex}.editor-page{height:100dvh;position:relative}.badge{background:color-mix(in srgb, var(--text) 8%, transparent);color:var(--muted);white-space:nowrap;border-radius:999px;padding:.2rem .55rem;font-size:.75rem}.save-status{color:var(--muted);align-items:center;gap:.4rem;min-width:0;font-size:.8rem;display:inline-flex}.save-status .label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.save-status .dot{background:var(--ok);border-radius:50%;flex:none;width:8px;height:8px}.save-unsaved .dot,.save-saving .dot{background:var(--warn)}.save-offline .dot,.save-error .dot{background:var(--danger)}.save-offline,.save-error{color:var(--danger)}.canvas-actions{align-items:center;gap:.5rem;display:flex}.canvas-btn{border-radius:.5rem;height:2.25rem;padding:0 .85rem}.save-status.compact{height:2.25rem;margin-left:0;padding:0 .25rem}.save-status.compact .dot{width:10px;height:10px}.floating{z-index:10;background:var(--surface);box-shadow:var(--shadow);border-radius:8px;position:absolute;top:4rem;left:50%;transform:translate(-50%)}.banner{margin:0;padding:.5rem 1rem}.modal{border:1px solid var(--border);background:var(--surface);width:min(560px,100% - 2rem);color:var(--text);border-radius:14px;padding:0}.modal::backdrop{background:#00000059}.modal-body{padding:1rem 1.25rem 1.25rem}.modal header{justify-content:space-between;align-items:center;display:flex}.modal h2{margin:0;font-size:1.1rem}.share-list{gap:.5rem;padding:0;list-style:none;display:grid}.share-list li{gap:.4rem;display:flex}.share-list input{flex:1;font-size:.85rem}@media (width<=640px){.hide-sm{display:none}.topbar{gap:.5rem}.canvas-actions .save-status .label{max-width:7rem}}