@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--bg:#f5f6f8;--panel:#fff;--panel2:#fafafa;--text:#111318;--muted:#727783;--line:#e7e8ec;--shadow:0 18px 50px rgba(20,24,35,.08);--accent:#111318;--accent2:#30343c;--good:#1e9b62}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--text)}body{transition:background .35s,color .35s}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}
[data-theme=dark]{--bg:#0d0f12;--panel:#15181d;--panel2:#111419;--text:#f5f6f7;--muted:#969ba5;--line:#282c33;--shadow:0 20px 60px rgba(0,0,0,.35);--accent:#f5f6f7;--accent2:#dfe2e7}
.topbar,.editor-topbar{height:76px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;z-index:20}
.brand{display:flex;gap:11px;align-items:center;font:800 19px Manrope}.brand-mini,.brand-mark{display:grid;place-items:center;background:var(--text);color:var(--bg);border-radius:13px}.brand-mini{width:38px;height:38px}.top-actions,.editor-actions{display:flex;align-items:center;gap:10px}.searchbox{height:43px;width:min(340px,34vw);background:var(--panel2);border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;gap:9px;padding:0 11px;color:var(--muted)}.searchbox input{border:0;outline:0;background:transparent;color:var(--text);width:100%}.searchbox kbd{font-size:10px;border:1px solid var(--line);padding:3px 6px;border-radius:5px}.circle-btn{width:43px;height:43px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:13px;display:grid;place-items:center;transition:.25s}.circle-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.circle-btn.small{width:36px;height:36px;border-radius:10px}.new-btn,.dark-btn,.shine-btn{border:0;border-radius:12px;background:var(--text);color:var(--bg);height:43px;padding:0 16px;display:inline-flex;align-items:center;gap:9px;font-weight:700;position:relative;overflow:hidden;transition:.25s}.new-btn:hover,.dark-btn:hover,.shine-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.18)}.shine-btn:after,.new-btn:after,.dark-btn:after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25),transparent 65%);animation:shine 3.2s infinite}@keyframes shine{65%,100%{transform:translateX(120%)}}.content{max-width:1240px;margin:auto;padding:56px 4vw 90px}.hero-row{display:flex;justify-content:space-between;align-items:end;gap:20px}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--muted);margin-bottom:9px}.hero-row h1{font:800 42px Manrope;margin:0;letter-spacing:-1.5px}.count-pill{font-size:14px;background:var(--panel);border:1px solid var(--line);padding:5px 9px;border-radius:9px;vertical-align:middle}.muted{color:var(--muted);margin:9px 0 0}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:48px 0 20px}.filter-tabs{display:flex;gap:5px}.filter-tabs button{border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:9px}.filter-tabs button.active,.filter-tabs button:hover{background:var(--panel);color:var(--text);box-shadow:0 3px 15px rgba(0,0,0,.04)}.view-buttons{display:flex;gap:6px}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.notes-grid.list-view{grid-template-columns:1fr}.note-card{min-height:230px;background:var(--panel);border:1px solid var(--line);border-radius:20px;position:relative;overflow:hidden;transition:.28s}.note-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--text) 20%,var(--line))}.card-main{display:block;padding:23px}.card-icon{width:40px;height:40px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);margin-bottom:24px}.note-card h2{font:700 18px Manrope;margin:0 34px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-card p{font-size:13px;line-height:1.65;color:var(--muted);min-height:42px;margin:0 0 24px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta{display:flex;gap:15px;color:var(--muted);font-size:11px}.card-menu{position:absolute;right:15px;top:17px;display:flex;gap:3px}.card-menu button,.card-menu a{border:0;background:transparent;color:var(--muted);width:30px;height:30px;display:grid;place-items:center;border-radius:8px}.card-menu button:hover,.card-menu a:hover{background:var(--panel2);color:var(--text)}.empty{text-align:center;padding:90px 20px}.empty-icon{font-size:45px;color:var(--muted)}.empty h2{font:800 25px Manrope;margin:15px 0 5px}.empty p{color:var(--muted);margin-bottom:22px}.hidden{display:none!important}.toast{position:fixed;right:24px;bottom:24px;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);font-size:13px;transform:translateY(20px);opacity:0;pointer-events:none;transition:.3s;z-index:99}.toast.show{transform:none;opacity:1}
.auth-page{display:grid;place-items:center;min-height:100vh;background:#0d0f12;overflow:hidden}.auth-glow{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(90px);opacity:.15;background:white}.glow-a{top:-160px;left:-120px}.glow-b{bottom:-190px;right:-100px}.login-card{width:min(430px,92vw);padding:42px;background:#15181d;border:1px solid #292d34;border-radius:25px;box-shadow:0 35px 100px #0008;color:#f6f7f8;position:relative;z-index:1}.brand-mark{width:52px;height:52px;margin-bottom:25px}.login-card h1{font:800 32px Manrope;margin:0}.login-card .muted{color:#9298a2;line-height:1.6;margin-bottom:28px}.login-card label:not(.check){display:block;font-size:12px;font-weight:700;margin:17px 0 7px;color:#b9bdc5}.input-wrap{height:49px;border:1px solid #30343c;border-radius:12px;background:#101216;display:flex;align-items:center;padding:0 14px;gap:10px}.input-wrap>i{color:#777d88}.input-wrap input{background:transparent;border:0;outline:0;color:white;width:100%;height:100%}.icon-btn{background:transparent;border:0;color:#777d88}.check{display:flex;align-items:center;gap:9px;font-size:12px;color:#9da2ac;margin:18px 0}.full{width:100%;justify-content:center}.secure-note{text-align:center;color:#6f7580;font-size:11px;margin-top:22px}.alert{background:#341a1e;color:#ffb5bd;border:1px solid #5d2b33;padding:11px;border-radius:10px;font-size:12px;display:flex;gap:8px}
@media(max-width:900px){.notes-grid{grid-template-columns:repeat(2,1fr)}.searchbox{width:220px}}@media(max-width:650px){.topbar,.editor-topbar{padding:0 16px}.brand>span:last-child{display:none}.top-actions{gap:6px}.searchbox{width:42px;padding:0 12px}.searchbox input,.searchbox kbd{display:none}.new-btn span{display:none}.new-btn{width:43px;padding:0;justify-content:center}.content{padding:35px 16px 70px}.hero-row{align-items:start;flex-direction:column}.hero-row h1{font-size:34px}.hero-row .dark-btn{display:none}.toolbar{margin:30px 0 16px}.filter-tabs button{padding:8px 7px;font-size:11px}.notes-grid{grid-template-columns:1fr}.login-card{padding:32px 25px}}