:root{--bg:#F5F5F0;--bg-list:#FFFFFF;--bg-detail:#FFFFFF;--card:#FFFFFF;--border:#E5E5E5;--fg:#000000;--fg-secondary:#666666;--fg-tertiary:#999999;--accent:#FFD60A;--accent-dark:#F5C800;--danger:#FF3B30;--success:#34C759;--font-s:15px;--font-l:17px;--font-xl:22px}
:root[data-theme="dark"]{--bg:#000000;--bg-list:#1C1C1E;--bg-detail:#1C1C1E;--card:#2C2C2E;--border:#3A3A3C;--fg:#FFFFFF;--fg-secondary:#8E8E93;--fg-tertiary:#636366;--accent:#FFD60A;--accent-dark:#F5C800;--danger:#FF3B30;--success:#34C759}
:root[data-font="large"]{--font-s:17px;--font-l:19px;--font-xl:24px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--fg);height:100vh;overflow:hidden;-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{width:0;height:0}

#loginOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#loginOverlay.hidden{opacity:0;pointer-events:none}
.login-card{width:90%;max-width:340px;padding:40px 28px;background:var(--bg-list);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.1)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo h1{font-size:28px;font-weight:700;letter-spacing:-1px}
.login-logo p{font-size:var(--font-s);color:var(--fg-tertiary);margin-top:8px}
.login-field{margin-bottom:16px;position:relative}
.login-field input{width:100%;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--fg);font-size:var(--font-l);outline:none;font-family:inherit}
.login-field input:focus{border-color:var(--accent)}
.login-field input::placeholder{color:var(--fg-tertiary)}
.login-btn{width:100%;padding:12px;border:none;border-radius:8px;background:var(--accent);color:#000;font-size:var(--font-l);font-weight:600;cursor:pointer;margin-top:8px}
.login-btn:active{background:var(--accent-dark)}
.login-error{margin-top:12px;padding:10px 14px;border-radius:8px;background:rgba(255,59,48,.1);color:var(--danger);font-size:var(--font-s);display:none}
.login-error.show{display:block}
.pwd-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--fg-secondary);cursor:pointer;font-size:var(--font-s)}

.modal-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
.modal-overlay.show{display:flex}
.modal-card{width:90%;max-width:340px;background:var(--bg-list);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-header h2{font-size:var(--font-l);font-weight:600;color:var(--fg)}
.modal-close{font-size:24px;color:var(--fg-tertiary);cursor:pointer;padding:0 8px}
.modal-body{padding:20px}

#appBody{display:flex;height:100vh}
#listView{width:320px;background:var(--bg-list);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh}
.list-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.list-header h1{font-size:22px;font-weight:700;letter-spacing:-0.5px;color:var(--fg)}
.list-header .header-add-btn{padding:8px 12px;border:none;border-radius:6px;background:transparent;color:var(--fg);font-size:var(--font-s);font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap}
.list-header .header-add-btn:hover{color:var(--accent)}
.list-header .header-add-btn:active{color:var(--accent-dark)}
.list-search{padding:10px 16px;border-bottom:1px solid var(--border)}
.search-input{width:100%;padding:10px 14px 10px 36px;background:var(--bg);border:none;border-radius:20px;color:var(--fg);font-size:var(--font-s);outline:none;font-family:inherit}
.search-input::placeholder{color:var(--fg-tertiary)}
.search-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--fg-tertiary);font-size:var(--font-s)}
.search-wrap{position:relative}

.tag-filter{padding:8px 16px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;max-height:72px;overflow-y:auto}
.tag-filter .filter-all{padding:3px 8px;font-size:12px;color:var(--fg-secondary);cursor:pointer;border-radius:6px;margin-right:4px}
.tag-filter .filter-all.active{background:var(--accent);color:#000}
.tag-filter .tag-item{padding:3px 8px;font-size:12px;color:var(--fg-secondary);cursor:pointer;border-radius:6px;background:var(--bg)}
.tag-filter .tag-item.active{background:var(--accent);color:#000}

.detail-tags{padding:12px 20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.detail-tags .tag-label{font-size:12px;color:var(--fg-tertiary);margin-right:4px}
.detail-tags .tag-add{padding:3px 8px;font-size:12px;color:var(--accent);cursor:pointer;border-radius:6px;border:1px solid var(--accent)}
.detail-stars{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:4px}
.detail-stars .star-label{font-size:12px;color:var(--fg-tertiary);margin-right:8px}
.star-btn{font-size:18px;color:var(--fg-tertiary);cursor:pointer;padding:2px}
.star-btn.active{color:var(--accent)}
.star-btn:hover{color:var(--accent)}

.tag-input-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.tag-input-modal.show{display:flex}
.tag-input-card{width:90%;max-width:300px;background:var(--bg-list);border-radius:12px;padding:20px}
.tag-input-card h3{font-size:var(--font-l);margin-bottom:16px;color:var(--fg)}
.tag-input-card input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:var(--font-s);color:var(--fg);margin-bottom:12px;font-family:inherit}
.tag-input-card .tag-suggestions{margin-bottom:16px}
.tag-input-card .suggest-tag{display:inline-block;padding:4px 8px;font-size:12px;color:var(--fg-secondary);background:var(--bg);border-radius:6px;margin-right:4px;margin-bottom:4px;cursor:pointer}
.tag-input-card .suggest-tag:hover{background:var(--accent);color:#000}
.tag-input-card .btn-group{display:flex;gap:8px}
.tag-input-card .btn-group button{flex:1;padding:10px;border:none;border-radius:8px;font-size:var(--font-s);cursor:pointer;font-family:inherit}
.tag-input-card .btn-cancel{background:var(--bg);color:var(--fg-secondary)}
.tag-input-card .btn-confirm{background:var(--accent);color:#000}
.list-content{flex:1;overflow-y:auto;padding:4px 0}
.note-row{padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.note-row:hover{background:rgba(0,0,0,.02)}
.note-row.active{background:rgba(255,214,10,.1)}
.nr-title{font-size:var(--font-l);font-weight:500;color:var(--fg);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-preview{font-size:var(--font-s);color:var(--fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.nr-meta{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.nr-date{color:var(--fg-tertiary)}
.nr-star{color:var(--accent);font-size:16px}
.nr-tag-row{display:flex;gap:4px;margin-bottom:4px}
.tag-chip{padding:3px 8px;font-size:12px;color:var(--fg-secondary);border-radius:6px;background:var(--bg)}
.list-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--fg-tertiary)}
.fab-btn{position:absolute;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#000;font-size:28px;font-weight:300;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,214,10,.4);transition:transform .1s}
.fab-btn:active{transform:scale(.95)}

#detailView{flex:1;background:var(--bg-detail);display:flex;flex-direction:column;height:100vh;position:relative}
.detail-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.back-btn{font-size:var(--font-xl);font-weight:300;color:var(--fg);cursor:pointer;padding:4px 8px;display:none}
.detail-actions{margin-left:auto;display:flex;gap:8px}
.action-btn{font-size:var(--font-s);color:var(--fg-secondary);cursor:pointer;padding:6px 10px;border-radius:6px}
.action-btn:hover{background:rgba(0,0,0,.05)}
.detail-title{padding:16px 20px 8px}
.detail-title input{width:100%;font-size:22px;font-weight:600;color:var(--fg);background:transparent;border:none;outline:none;font-family:inherit}
.detail-date{padding:0 20px 12px;font-size:13px;color:var(--fg-tertiary)}
.detail-content{flex:1;overflow-y:auto;padding:0 20px 60px}
.detail-content p{margin-bottom:16px;line-height:1.65;font-size:var(--font-l);color:var(--fg)}
.detail-content h1,.detail-content h2,.detail-content h3{margin:20px 0 10px;font-weight:600}
.detail-content h1{font-size:20px}.detail-content h2{font-size:18px}.detail-content h3{font-size:var(--font-l)}
.detail-content pre{background:#1C1C1E;border-radius:8px;padding:14px;margin:14px 0;overflow-x:auto}
.detail-content code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:var(--font-s)}
.detail-content :not(pre)>code{background:var(--card);padding:2px 5px;border-radius:4px;color:var(--accent)}
.detail-content img{max-width:100%;border-radius:8px;margin:14px 0}
.detail-content blockquote{border-left:3px solid var(--accent);padding:8px 14px;margin:14px 0;background:rgba(255,214,10,.08);border-radius:0 6px 6px 0;color:var(--fg-secondary)}
.detail-content ul,.detail-content ol{padding-left:20px;margin-bottom:14px}
.detail-content li{margin-bottom:5px}
.detail-content a{color:var(--accent);text-decoration:none}

.editor-area{flex:1;overflow-y:auto}
.editor-textarea{width:100%;height:100%;min-height:400px;padding:0 20px 60px;background:transparent;border:none;color:var(--fg);font-family:inherit;font-size:var(--font-l);line-height:1.65;resize:none;outline:none}
.editor-textarea::placeholder{color:var(--fg-tertiary)}
.editor-img-btn{cursor:pointer;color:var(--fg-secondary);font-size:var(--font-s);padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:none}
.editor-img-btn:hover{background:rgba(0,0,0,.05)}
.editor-actions{position:absolute;bottom:0;left:0;right:0;padding:12px 20px;background:var(--bg-detail);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.editor-btn{padding:8px 16px;border-radius:8px;border:none;font-size:var(--font-s);cursor:pointer;font-family:inherit;font-weight:500}
.editor-btn-primary{background:var(--accent);color:#000}
.editor-btn-primary:active{background:var(--accent-dark)}
.editor-btn-secondary{background:var(--card);color:var(--fg-secondary)}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fg-tertiary)}
.empty-state p{font-size:var(--font-l);margin-top:8px}

.action-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bg-list);border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .25s;z-index:1000;padding:16px}
.action-sheet.show{transform:translateY(0)}
.action-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:999}
.action-sheet-overlay.show{opacity:1;pointer-events:all}
.action-item{padding:14px 20px;border-radius:8px;font-size:var(--font-l);color:var(--fg);cursor:pointer;text-align:center;margin-bottom:8px}
.action-item:hover{background:rgba(0,0,0,.05)}
.action-item-danger{color:var(--danger)}
.action-item-cancel{background:rgba(0,0,0,.08);font-weight:600}


#detailMetaFixed{background:var(--bg-detail);border-top:1px solid var(--border);padding:12px 20px}
#detailTagsFixed{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
#detailStarsFixed{display:flex;align-items:center;gap:4px}

#toastContainer{position:fixed;top:20px;right:20px;left:20px;z-index:2000}
.toast{padding:12px 16px;border-radius:8px;font-size:var(--font-s);text-align:center;margin-bottom:8px;background:rgba(0,0,0,.8);color:#fff;opacity:0;transform:translateY(-20px);transition:all .25s}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:768px){
    #listView{width:100%;position:absolute;left:0;top:0;z-index:100;transform:translateX(0)}
    #listView.hidden{transform:translateX(-100%)}
    #detailView{width:100%;position:absolute;left:0;top:0;z-index:50}
    .back-btn{display:block}
    .fab-btn{right:20px;bottom:20px}
    .detail-header{padding:12px 16px}
    .detail-title{padding:12px 16px 6px}
    .detail-title input{font-size:20px}
    .detail-date{padding:0 16px 10px}
    .detail-content{padding:0 16px 50px}
    .editor-textarea{padding:0 16px 50px}
    .editor-actions{padding:10px 16px}
    .search-input{font-size:var(--font-s)}
    .note-row{padding:12px 14px}
}