:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:#273c37;background:#f7f9f8;font-synthesis:none;--green:#216651;--muted:#7b8983;--line:#e5ebe7;--work:#26765c;--study:#4873ab;--life:#b67c29;font-size:16px}
*{box-sizing:border-box}
body{margin:0}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button,a,input,textarea,select{touch-action:manipulation}
button{color:inherit}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #85bba7;outline-offset:3px}
input:focus,textarea:focus,select:focus{outline:2px solid #78ae99;outline-offset:2px}
a{color:inherit;text-decoration:none}
button{border:0;background:none}
svg{width:20px;height:20px;vertical-align:middle}
 [hidden]{display:none!important}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:236px;flex:none;background:#fff;border-right:1px solid var(--line);padding:34px 22px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:2}
.brand{display:flex;align-items:center;gap:12px;padding:0 12px;margin-bottom:38px;font-size:27px;font-weight:700;letter-spacing:2px}
.brand-mark{display:grid;place-items:center;background:var(--green);color:#fff;width:40px;height:44px;border-radius:12px}
.brand-mark svg{width:27px;height:27px}
.brand small{display:block;font-size:9px;letter-spacing:2px;font-weight:500;margin-top:4px;color:#708078}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:white;border:1px solid var(--green);border-radius:8px;font-size:14px;font-weight:600;padding:12px 19px;transition:background .15s,transform .15s}
.primary:hover{background:#174f3e}
.primary:active{transform:translateY(1px)}
.new-note{width:100%;margin-bottom:28px;justify-content:flex-start;height:45px;padding:0 13px}
.plus{font-size:24px;font-weight:300}
.new-note kbd{margin-left:auto;background:#ffffff16;border-color:#ffffff30;color:#d4e4dd}
kbd{font-family:inherit;font-size:11px;border:1px solid #dde4df;padding:2px 5px;border-radius:4px;color:#91a098;white-space:nowrap}
.nav-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 12px;margin:3px 0;border-radius:7px;color:#748078;font-size:14px;min-height:46px}
.nav-item:hover{background:#f4f7f5}
.nav-item.active{background:#eaf3ee;color:#205e49;font-weight:600}
.nav-count{margin-left:auto;font-size:12px;color:#93a299;font-variant-numeric:tabular-nums}
.active .nav-count{color:#387f63}
.nav-label{font-size:12px;color:#9aa69f;letter-spacing:1px;padding-left:12px;margin:27px 0 10px}
.category-dot{width:9px;height:9px;border-radius:3px;margin:0 5px}
.category-dot.work{background:#69aa8d}
.category-dot.study{background:#7a9fcf}
.category-dot.life{background:#d8b26e}
.sidebar-tags{margin-top:7px}
.sidebar-tags>div{display:flex;gap:7px;flex-wrap:wrap;padding:4px 8px}
.tag-button{font-size:12px;color:#89968e;border:1px solid #e7ece8;border-radius:5px;padding:5px 7px}
.tag-button:hover,.tag-button.selected{background:#eaf3ee;color:var(--green);border-color:#c3dccc}
.sidebar-bottom{margin-top:auto;padding-top:40px}
.account-button{width:100%;border-top:1px solid var(--line);margin-top:15px;padding:21px 3px 0;display:flex;align-items:center;gap:10px;text-align:left}
.avatar{width:36px;height:36px;display:inline-grid;place-items:center;flex:none;background:#ebf1e9;border-radius:50%;color:#5b7862;font-size:14px}
.account-button strong{font-size:13px;display:block;max-width:102px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-button small{display:block;font-size:11px;color:#94a199;margin-top:4px}
.account-button>span:last-child{margin-left:auto;color:#93a198}
.main{margin-left:236px;min-width:0;flex:1}
.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 45px;background:#ffffff88}
.breadcrumb{font-size:13px;color:#95a29a;display:flex;gap:15px;align-items:center}
.breadcrumb strong{font-weight:500;color:#5d7066}
.breadcrumb>span{color:#c8d1cb}
.sync-status{font-size:12px;color:#82998b;display:flex;align-items:center;gap:7px}
.sync-status:before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#78a889}
.sync-status.error{color:#b06a51}
.sync-status.error:before{background:#b06a51}
.workspace{padding:44px 45px 20px;max-width:1600px;margin:auto}
.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;gap:20px}
.eyebrow{font-size:10px;letter-spacing:2.3px;color:#94a198;margin-bottom:12px}
h1{font-size:30px;letter-spacing:1px;font-weight:650;margin:0 0 13px;line-height:1.4}
.heading-dot{color:#54a17b;padding-left:4px}
.page-heading p{margin:0;color:#89958d;font-size:14px;line-height:1.7}
.today{font-size:12px;color:#93a097;line-height:1.9;text-align:right;white-space:nowrap}
.today strong{display:block;color:#687f70;font-weight:500;font-size:14px}
.space-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:37px}
.space-card{background:#f0f6f2;border:1px solid #e1ece4;border-radius:10px;display:flex;align-items:center;text-align:left;gap:14px;padding:20px;min-width:0;transition:transform .18s,border-color .18s}
.space-card:hover{transform:translateY(-2px);border-color:#b7d1c0}
.space-card.study{background:#f0f4f9;border-color:#e0e8f1}
.space-card.life{background:#faf6ed;border-color:#eee7d7}
.space-icon{width:40px;height:40px;border-radius:10px;background:#e0eee5;color:var(--work);display:grid;place-items:center;flex:none}
.study .space-icon{background:#e2eaf6;color:var(--study)}
.life .space-icon{background:#f2e9d6;color:var(--life)}
.space-card strong{display:block;font-size:16px;font-weight:600;letter-spacing:1px}
.space-card small{display:block;color:#8b9a8f;font-size:12px;margin-top:7px;white-space:nowrap}
.study small{color:#8c9caf}
.life small{color:#a3987e}
.space-total{font-size:24px;color:#a7baab;margin-left:auto;font-weight:300}
.study .space-total{color:#a7b8ce}
.life .space-total{color:#c8bda7}
.notes-toolbar{display:flex;gap:12px;margin-bottom:28px}
.search-box{display:flex;align-items:center;gap:11px;flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 15px;height:46px;color:#9ba89f}
.search-box input{width:100%;min-width:0;border:none;outline:none;background:transparent;font-size:14px;color:#334f40;height:100%}
.search-box:focus-within{border-color:#8fb69c;box-shadow:0 0 0 2px #a0c7ad25}
.search-box input:focus{outline:none}
.search-box input::placeholder{color:#a0aba4}
.notes-toolbar select{font-size:13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#738478;padding:0 12px;max-width:130px}
.view-switch{display:flex;background:#fff;border:1px solid var(--line);padding:5px;border-radius:8px;gap:3px}
.icon-button{border-radius:5px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:#8c9b91;flex:none}
.icon-button:hover{background:#edf3ee;color:var(--green)}
.view-switch .active{background:#edf4ee;color:var(--green)}
.results-heading{display:flex;align-items:center;gap:15px;margin-bottom:19px;min-height:25px}
.results-heading h2{margin:0;font-size:16px;font-weight:600}
.results-heading h2 span{font-size:12px;margin-left:7px;background:#e9eee9;color:#84998c;border-radius:4px;padding:2px 6px;font-weight:500}
.results-hint{margin-left:auto;color:#a7b1aa;font-size:12px}
.text-button{font-size:12px;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;align-items:stretch}
.note-card{position:relative;display:flex;flex-direction:column;border:1px solid #e4eae5;border-radius:10px;padding:21px 21px 0;background:#fff;min-width:0;min-height:264px;transition:box-shadow .2s,transform .2s}
.note-card:hover{box-shadow:0 5px 20px #354d3910;transform:translateY(-2px)}
.note-top{display:flex;align-items:center;justify-content:space-between;height:24px;margin-bottom:14px}
.note-tools{display:flex;align-items:center;gap:3px}
.note-tools .icon-button{width:27px;height:27px}
.note-tools svg{width:16px;height:16px}
.note-tools .is-pinned{color:#78a388}
.badge{font-size:11px;padding:4px 7px;border-radius:4px;background:#edf5ef;color:var(--work);display:inline-flex;align-items:center;gap:5px}
.badge:before{content:"";width:4px;height:4px;border-radius:1px;background:currentColor;opacity:.65}
.badge.study{color:var(--study);background:#edf2fa}
.badge.life{color:var(--life);background:#fbf5e8}
.note-card h3{font-size:16px;font-weight:600;line-height:1.5;margin:0 0 10px;overflow-wrap:anywhere}
.note-title-button{padding:0;text-align:left;line-height:inherit;font-weight:inherit;width:100%}
.note-title-button:hover{color:var(--green)}
.note-preview{font-size:14px;line-height:1.95;color:#8b968f;margin:0 0 14px;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;min-height:80px}
.note-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 17px}
.note-tags span{color:#98a49c;background:#f5f7f4;border-radius:3px;padding:3px 6px;font-size:11px}
.note-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;border-top:1px solid #f0f3f0;padding:12px 0;color:#b0b9b2;font-size:11px;gap:8px}
.copy-button{font-size:12px;color:#678773;display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:5px;white-space:nowrap;background:#f2f7f2}
.copy-button:hover{background:#e1eee5;color:#27654a}
.copy-button svg{width:14px;height:14px}
.add-card{border:1px dashed #d6e2d8;border-radius:10px;min-height:264px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#8ca191;background:#f3f7f333;gap:12px;transition:background .2s}
.add-card:hover{background:#edf4ee}
.add-card>span{font-size:25px;border:1px solid #d7e3d8;border-radius:50%;display:grid;place-items:center;width:37px;height:37px;margin-bottom:0;font-weight:200}
.add-card strong{font-size:14px;font-weight:500}
.add-card small{font-size:12px;color:#a4b1a7}
.workspace-footer{display:flex;justify-content:space-between;color:#b3bcb5;font-size:11px;margin-top:46px;padding-top:19px;border-top:1px solid #e7ece7}
.notes-grid.list{grid-template-columns:1fr}
.list .note-card{min-height:unset;display:grid;grid-template-columns:120px 1fr 170px;gap:0 20px;padding:18px 22px;align-items:center}
.list .note-top{margin:0}
.list .note-card h3{margin:0}
.list .note-preview{grid-column:2;min-height:unset;-webkit-line-clamp:1;margin:6px 0}
.list .note-tags{grid-column:2;margin:0}
.list .note-footer{grid-column:3;grid-row:1 / 4;border:0;flex-direction:column;gap:13px;justify-content:center}
.list .add-card{min-height:80px;flex-direction:row}
.empty-state{grid-column:1/-1;text-align:center;padding:55px 20px;color:#7e9184}
.empty-state h3{font-size:18px;color:#4f6f5a}
.empty-state p{font-size:14px;line-height:1.8}
.empty-state svg{width:36px;height:36px}
.empty-state .primary{margin-top:12px}
.error-state{grid-column:1/-1;padding:35px;background:white;border:1px solid var(--line);border-radius:10px;text-align:center;font-size:14px;color:#9a6959}
.loading-state{grid-column:1/-1;padding:70px 20px;text-align:center;color:#8b9e8f;font-size:14px}
dialog{border:1px solid #e1e9e3;border-radius:16px;color:#314939;padding:0;box-shadow:0 24px 100px #152e2930;max-height:90dvh;overflow:auto}
dialog::backdrop{background:#102b2655;backdrop-filter:blur(5px)}
.mini-note{background:#ffffff0c;border:1px solid #ffffff24;border-radius:9px;padding:18px 17px;margin-top:27px;transform:rotate(-2deg)}
.mini-note>span{font-size:10px;color:#a6cdb7}
.mini-note strong{display:block;font-size:14px;font-weight:500;margin-top:12px}
.mini-note>div{font-size:11px;color:#95bfa9;margin-top:10px}
form label{display:block;font-size:13px;color:#65816d}
form label>input,form label>select{display:flex;width:100%;margin-top:9px;border:1px solid #dfe7e1;border-radius:7px;background:white;padding:12px;color:#314939;font-size:14px}
.wide{width:100%}
.form-error{color:#b35640;line-height:1.6;font-size:13px;white-space:pre-wrap;margin:12px 0;min-height:0}
.form-error:empty{display:none}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:15px}
.dialog-heading h2{font-size:19px;font-weight:600;margin:0}
.editor-dialog{width:min(680px,calc(100vw - 28px));padding:28px}
.editor-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.editor-meta label:first-child{display:flex;align-items:center;gap:12px}
.editor-meta select{width:100px;padding:7px;margin:0}
.pin-toggle{display:flex!important;align-items:center;gap:8px}
.pin-toggle input{width:15px;height:15px;accent-color:var(--green);margin:0}
.editor-title{width:100%;border:0;padding:10px 0;font-size:23px;font-weight:550;color:#31563c;background:transparent}
.editor-title::placeholder{color:#adb9af}
.editor-dialog textarea{width:100%;min-height:240px;resize:vertical;border:0;background:#f8faf7;border-radius:8px;padding:16px;font-size:15px;line-height:1.9;color:#526a5b;margin-top:14px}
.editor-dialog textarea::placeholder{color:#b0bbb2}
.editor-counter{display:flex;justify-content:space-between;font-size:11px;color:#a9b5ac;margin:10px 0 20px;gap:10px}
.tags-field{display:flex;align-items:center;gap:15px}
.tags-field input{margin:0;flex:1;padding:10px;font-size:13px;min-width:0}
.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:21px;border-top:1px solid var(--line)}
.secondary{border:1px solid #dce5de;background:white;color:#64816c;font-size:13px;padding:12px 17px;border-radius:7px}
.secondary:hover{background:#f2f6f1}
.save-hint{font-size:11px;color:#a8b3aa;margin-right:auto}
.danger-text{font-size:12px;color:#b0705a;padding:7px 0;margin-right:auto}
.danger-text:not([hidden])+.save-hint{display:none}
.account-dialog{width:min(490px,calc(100vw - 28px));padding:28px}
.account-summary{display:flex;gap:13px;align-items:center;margin:12px 0 24px}
.account-summary strong{font-size:16px;overflow-wrap:anywhere}
.account-summary p{font-size:13px;line-height:1.8;color:#8d9b90;margin:8px 0 0}
.account-summary .avatar{width:45px;height:45px;font-size:19px}
.account-dialog details{padding:18px 0;border-top:1px solid var(--line);font-size:14px}
.account-dialog form{padding-top:22px}
.account-dialog form label{margin-bottom:17px}
.account-dialog .wide{margin-top:24px}
.confirm-dialog{width:min(430px,calc(100vw - 30px));padding:28px}
.confirm-dialog h2{font-size:19px;margin:0 0 15px}
.confirm-dialog>p{font-size:14px;line-height:1.8;color:#86978b}
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:20;background:#224d3d;color:#fff;padding:13px 22px;border-radius:9px;font-size:14px;box-shadow:0 6px 25px #223c3525;max-width:calc(100vw - 30px);text-align:center;line-height:1.7}
.toast button{color:#c8e4cb;text-decoration:underline;margin-left:12px}
.toast.error{background:#885541}
mark{background:#f3e9ba;color:inherit;border-radius:2px}
body:has(dialog[open]){overflow:hidden}

@media(min-width:1500px){.notes-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.notes-grid.list{grid-template-columns:1fr}
}
@media(max-width:1150px){.sidebar{width:210px;padding-left:16px;padding-right:16px}
.main{margin-left:210px}
.topbar{padding:0 30px}
.workspace{padding:34px 30px 20px}
.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.space-card{padding:16px 12px;gap:10px}
.space-card small{font-size:11px}
.space-icon{width:33px;height:36px}
.space-total{font-size:20px}
.space-cards{gap:10px}
.page-heading .today{display:none}
.results-hint{display:none}
}

@media(max-width:760px){.app-shell{display:block}
.sidebar{position:sticky;top:0;width:auto;padding:13px 18px 10px;flex-direction:row;flex-wrap:wrap;gap:10px;border-right:0;border-bottom:1px solid var(--line)}
.brand{font-size:20px;padding:0;margin:0;gap:8px;letter-spacing:1px}
.brand small{display:none}
.brand-mark{width:30px;height:32px;border-radius:8px}
.brand-mark svg{width:22px;height:22px}
.new-note{width:auto;margin:0 0 0 auto;height:34px;padding:0 10px;font-size:12px}
.new-note kbd{display:none}
.new-note .plus{font-size:19px}
.sidebar nav{order:3;display:flex;flex:1 0 100%;gap:3px;overflow-x:auto;scrollbar-width:none}
.sidebar nav .nav-label{display:none}
.nav-item{width:auto;white-space:nowrap;padding:9px 10px;min-height:36px;font-size:12px;gap:6px;margin:0}
.nav-item svg{width:15px;height:15px}
.nav-count{font-size:10px;margin-left:3px}
.category-dot{width:7px;height:7px;margin:0 3px}
.sidebar-tags{display:none}
.sidebar-bottom{margin:0;padding:0}
.sidebar-bottom>.nav-item{display:none}
.account-button{padding:0;border:0;margin:0;width:32px}
.account-button>span:not(.avatar){display:none}
.avatar{width:32px;height:32px}
.main{margin:0}
.topbar{padding:0 20px;height:46px}
.breadcrumb{font-size:11px;gap:10px}
.sync-status{font-size:10px}
.workspace{padding:25px 20px 18px}
.page-heading{margin-bottom:23px}
.eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:9px}
h1{font-size:25px;margin-bottom:10px}
.page-heading p{font-size:12px;line-height:1.8}
.space-cards{gap:8px;margin-bottom:23px}
.space-card{flex-direction:column;align-items:flex-start;padding:14px;gap:9px;position:relative}
.space-card strong{font-size:14px}
.space-card small{display:none}
.space-total{position:absolute;right:12px;top:16px;font-size:17px}
.space-icon{height:30px;width:30px;border-radius:8px}
.space-icon svg{width:17px;height:17px}
.notes-toolbar{gap:8px;flex-wrap:wrap;margin-bottom:23px}
.search-box{height:44px;padding:0 12px;flex-basis:100%}
.search-box kbd{display:none}
.notes-toolbar select{height:34px;font-size:12px;flex:1;max-width:none}
.view-switch{padding:2px}
.view-switch .icon-button{height:27px;width:30px}
.results-heading{margin-bottom:16px}
.results-heading h2{font-size:15px}
.notes-grid{gap:13px;grid-template-columns:repeat(2,minmax(0,1fr))}
.note-card{padding:15px 14px 0;min-height:256px}
.note-card h3{font-size:15px}
.note-preview{font-size:13px;line-height:1.9;min-height:74px}
.note-top{margin-bottom:12px}
.note-footer{font-size:10px;flex-wrap:wrap;gap:5px}
.copy-button{font-size:11px;padding:5px}
.note-tags{gap:4px}
.note-tags span{font-size:10px}
.add-card{min-height:256px;padding:15px}
.add-card strong{font-size:13px}
.add-card small{font-size:10px;line-height:1.8;text-align:center}
.workspace-footer{margin-top:30px;font-size:10px;gap:15px}
.workspace-footer>span:last-child{display:none}
.list .note-card{grid-template-columns:1fr auto;gap:5px;padding:15px}
.list .note-top{grid-column:1}
.list .note-card h3,.list .note-preview,.list .note-tags{grid-column:1}
.list .note-footer{grid-column:2;grid-row:1/5;padding-left:10px}
.editor-dialog{padding:22px 18px;max-height:94dvh}
.editor-title{font-size:20px}
.editor-dialog textarea{min-height:210px;font-size:16px}
.save-hint{display:none}
.dialog-actions{gap:8px;flex-wrap:wrap}
.dialog-actions .primary,.dialog-actions .secondary{padding:11px 13px;font-size:12px}
.tags-field input{font-size:12px}
.account-dialog{padding:23px}
.editor-meta{margin-bottom:15px}
.editor-counter{font-size:10px}
.toast{bottom:20px;font-size:13px}
.account-dialog .wide{margin-top:15px}
}

@media(max-width:380px){.notes-grid{grid-template-columns:1fr}
.note-card{min-height:240px}
.sidebar{padding-left:12px;padding-right:12px}
.nav-item{padding-left:8px;padding-right:8px}
.workspace{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}


.mobile-trash{display:none}
.no-tags{font-size:12px;color:#a4b1a6}
.clipboard-helper{position:fixed;left:-9999px;top:0}
.note-preview{font-size:16px;line-height:1.8;min-height:86px}
.editor-dialog textarea{font-size:16px}
@media(max-width:760px){.mobile-trash{display:flex}
.note-preview{font-size:14px;min-height:76px}
}


.storage-explanation{padding:18px;background:#f1f6f1;border-radius:9px}
.storage-explanation strong{font-size:16px}
.storage-explanation p{font-size:14px;line-height:1.9;color:#819286;margin:12px 0 0}
.backup-actions{display:grid;gap:10px;margin:23px 0 15px}
.backup-actions .wide{margin:0}
.backup-hint{font-size:12px;line-height:1.9;color:#97a69b}
.recovery-details{margin-top:15px}
.recovery-details summary{color:#9bab9e;font-size:12px}

.backup-download{display:block;padding:12px;background:#eaf3ee;border:1px solid #c7ddce;border-radius:7px;font-size:13px;text-align:center;overflow-wrap:anywhere;color:#216651;text-decoration:underline;text-underline-offset:3px}