@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap";:root{--bg: #0c1018;--panel: #101624;--card: #121a2c;--border: #1e2535;--muted: #9aa4ba;--text: #e5e9f5;--accent: #7c81ff;--accent-2: #5fafff;--shadow: 0 20px 40px rgba(0, 0, 0, .25);font-family:Space Grotesk,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;background:radial-gradient(circle at 10% 20%,rgba(124,129,255,.08),transparent 25%),radial-gradient(circle at 80% 0%,rgba(95,175,255,.08),transparent 25%),var(--bg);color:var(--text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;background:transparent}#app{min-height:100vh}.app-shell{width:100%;max-width:none;margin:0 auto;padding:24px 24px 60px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}.brand{display:flex;align-items:center;gap:10px}.dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 12px #7c81ff99}.brand-title{font-size:18px;font-weight:600}.brand-sub{font-size:13px;color:var(--muted)}.safety-note{margin:4px 0 18px;padding:10px 12px;background:#7c81ff14;border:1px dashed rgba(124,129,255,.3);border-radius:10px;color:var(--muted);font-size:13px}.dashboard .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;box-shadow:var(--shadow)}.card:hover{transform:translateY(-2px);border-color:#7c81ff80}.thumb{width:100%;aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,#7c81ff26,#5fafff1f)}.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.thumb-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);font-size:12px;letter-spacing:.04em}.meta{margin-top:10px;display:flex;justify-content:space-between;gap:8px;align-items:center}.title{font-weight:600;font-size:15px;color:var(--text);max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.time{font-size:12px;color:var(--muted)}.new-card{display:grid;place-items:center;text-align:center;border:1px dashed rgba(124,129,255,.4);background:#7c81ff0f}.plus{font-size:32px;color:var(--accent);line-height:1}.new-label{margin-top:4px;font-size:13px;color:var(--muted)}.import-hint{margin-top:14px;color:var(--muted);font-size:13px}.delete{position:absolute;top:10px;right:10px;border:1px solid var(--border);background:#00000040;color:var(--muted);border-radius:999px;padding:6px 10px;font-size:11px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.delete:hover{background:#ff5c5c33;color:#ff8a8a;border-color:#ff5c5c99}.workspace{background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:#ffffff05;height:auto;max-height:none;overflow:visible}.toolbar .left,.toolbar .right{display:flex;align-items:center;gap:8px}.toolbar .right{justify-content:flex-end}.center{display:flex;align-items:center;justify-content:center;gap:8px}.title-input{width:min(360px,100%);background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:12px;font-size:14px}.title-input:focus{outline:1px solid rgba(124,129,255,.7);border-color:#7c81ffb3}.saving-dot{width:8px;height:8px;border-radius:50%;background:#62d98c;box-shadow:0 0 0 6px #62d98c26}.workspace-body{min-height:72vh}.editor{width:100%;min-height:72vh;background:var(--card);border:none;border-radius:0 0 18px 18px;overflow:hidden}.preview{width:100%;border:none;background:#0b0b0b;border-radius:0 0 18px 18px;overflow:hidden}button{font-family:inherit;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);padding:9px 14px;cursor:pointer;transition:transform .1s ease,border-color .15s ease,background .15s ease}button:hover{border-color:#7c81ffb3;transform:translateY(-1px)}button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#0c1018;font-weight:600}button.ghost{background:#ffffff0a}.top-actions button{height:34px}.drop-overlay{position:fixed;inset:0;background:#090c138c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:20}.drop-box{border:1px dashed rgba(124,129,255,.6);padding:24px 32px;border-radius:18px;color:var(--text);background:#7c81ff14;box-shadow:var(--shadow)}.toast{position:fixed;bottom:22px;right:22px;background:#151b2bf2;border:1px solid rgba(124,129,255,.6);color:var(--text);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);z-index:30}.footer{margin-top:28px;color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}.footer a{color:var(--text);text-decoration:none}.footer a:hover{color:var(--accent)}@media(max-width:720px){.topbar{flex-direction:column;align-items:flex-start}.toolbar{grid-template-columns:1fr;gap:10px}.toolbar .right,.center{justify-content:flex-start}}