:root {
    --sky-top: #367cbe; --sky-mid: #85c4e9; --sky-bottom: #eaf4fb;  
    --text-dark: #2c4c7c; --text-light: #5f80a6;  
    --danger-red: #e76f51; --success-green: #2a9d8f; 
    --folder-col: #015185; --folder-bg: #fceed3;
    --base-font-size: 14px; 
}

body { margin: 0; padding: 0; font-family: "PingFang SC", -apple-system, sans-serif; background-color: #d1e3f0; display: flex; justify-content: center; font-size: var(--base-font-size); overflow: hidden; overscroll-behavior-y: none;}

.app-container { width: 100%; max-width: 600px; height: 100vh; height: 100dvh; background: linear-gradient(180deg, var(--sky-top) 0%, #85c4e9 35%, #eaf4fb 100%); position: relative; box-shadow: 0 10px 30px rgba(44, 76, 124, 0.2); overflow: hidden; display: flex; flex-direction: column;}

.bg-decorations { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.star { position: absolute; width: 14px; height: 14px; background: white; opacity: 0.3; clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%); animation: twinkle 4s infinite ease-in-out; }
@keyframes twinkle { 0%, 100% { opacity: 0.1; transform: scale(0.6) rotate(0deg); } 50% { opacity: 0.8; transform: scale(1.3) rotate(45deg); } }

.bird-decor { position: absolute; opacity: 0.25; color: white; }
@keyframes flyRight { 0% { transform: translateX(-50px) translateY(0) scaleX(-1); } 50% { transform: translateX(50vw) translateY(-30px) scaleX(-1); } 100% { transform: translateX(120vw) translateY(20px) scaleX(-1); } }
@keyframes flyLeft { 0% { transform: translateX(120vw) translateY(0); } 50% { transform: translateX(50vw) translateY(40px); } 100% { transform: translateX(-50px) translateY(-20px); } }

.view-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); background: transparent; }
#mainView { z-index: 10; } #taskHubView { z-index: 20; transform: translateX(100%); background: #eaf4fb; } #focusCardView { z-index: 30; transform: translateY(100%); background: #eaf4fb; } #skimCardView { z-index: 40; transform: translateY(100%); background: #eaf4fb; }

svg { display: block; pointer-events: none; } 
.ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle;}

.action-btns { display: flex; gap: 6px; opacity: 0.5; transition: 0.2s; align-items: center; } .task-card:hover .action-btns, .hub-item-card:hover .action-btns { opacity: 1; }
.action-btn { cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-dark); transition: 0.2s; }
.action-btn:hover { background: rgba(0,0,0,0.06); color: var(--sky-top); } .action-btn.del-btn:hover { color: var(--danger-red); background: rgba(231, 111, 81, 0.1); }
.action-btn.skim-btn-ico:hover { color: #f4a261; background: rgba(244, 162, 97, 0.1); }
.loop-btn { color: var(--text-light); }
.loop-btn:hover { color: #9b8bba; background: rgba(155, 139, 186, 0.1); }
.loop-btn.loop-active { color: #9b8bba; background: rgba(155, 139, 186, 0.15); }

.header { padding: max(30px, env(safe-area-inset-top)) 20px 10px 20px; display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 10; flex-shrink: 0;}
.editable-title { font-size: 1.7em; font-weight: 600; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.1); background: transparent; border: none; outline: none; width: 100%; margin: 0; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.editable-title:focus { border-bottom: 2px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); border-radius: 4px; }
.date-display { font-size: 0.9em; color: rgba(255, 255, 255, 0.85); margin-top: 6px; }

.top-icons { display: flex; gap: 10px; align-items: center; margin-top: 5px;}
.icon-btn { color: white; cursor: pointer; padding: 6px; transition: 0.3s; opacity: 0.8; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1);}
.icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.3); }

.tabs { display: flex; padding: 0 20px; gap: 20px; position: relative; z-index: 10; flex-shrink: 0;}
.tab { font-size: 1.05em; padding-bottom: 8px; cursor: pointer; color: rgba(255, 255, 255, 0.6); border-bottom: 3px solid transparent; transition: all 0.3s; }
.tab.active { color: #ffffff; font-weight: 600; border-bottom: 3px solid #ffffff; }

.sub-menu { display: none; padding: 10px 20px; gap: 8px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); z-index: 10; flex-shrink: 0; align-items: center; flex-wrap: wrap;}
.sub-menu.active { display: flex; animation: fadeIn 0.3s ease; }
.sub-menu-btn { background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.9); color: var(--text-dark); padding: 5px 10px; border-radius: 8px; font-size: 0.85em; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: 0.2s; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
.sub-menu-btn:hover { background: white; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.sub-menu-btn.active-mode { background: var(--danger-red); color: white; border-color: var(--danger-red); }

.content-area { flex: 1; padding: 15px 20px 120px 20px; position: relative; z-index: 10; overflow-y: auto;}
.view-section { display: none; animation: fadeIn 0.3s ease; } .view-section.active { display: block; }

.task-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04); transition: all 0.3s; position: relative; display: flex; flex-direction: column;}
.task-card.folder-card { border-left: 6px solid var(--folder-col); }
.task-card.folder-card:hover { background: var(--folder-bg); border-color: var(--folder-col); }
.task-card.is-done { opacity: 0.6; filter: grayscale(0.8); }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }

.task-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; flex-wrap: wrap;}
.task-title-group { flex: 1; display: flex; flex-direction: column; gap: 6px; cursor: pointer;}
.task-title { font-size: 1.15em; font-weight: 600; color: var(--text-dark); line-height: 1.4; display: flex; align-items: center; gap: 6px; word-break: break-all;}
.task-progress { font-size: 0.9em; color: #5f80a6; display: flex; justify-content: space-between; background: rgba(255,255,255,0.4); padding: 8px 12px; border-radius: 8px; align-items: center; cursor: pointer; }

.sort-controls { display: none; flex-direction: row; gap: 4px; align-items: center; background: rgba(133, 196, 233, 0.1); border-radius: 6px; padding: 2px;}
.edit-mode-active .sort-controls { display: flex; }
.drag-handle { cursor: grab; padding: 4px 8px; color: var(--sky-top); align-items: center; justify-content: center; border-radius: 4px; touch-action: none; }
.drag-handle:active { cursor: grabbing; background: rgba(133, 196, 233, 0.2); }
.edit-mode-active .task-progress, .edit-mode-active .task-title-group { pointer-events: none; }
.card-checkbox { display: none; margin-right: 10px; transform: scale(1.3); accent-color: var(--sky-top);}
.edit-mode-active .card-checkbox { display: inline-block; }

.hub-header { padding: max(20px, env(safe-area-inset-top)) 20px 20px 20px; display: flex; align-items: center; gap: 15px; background: var(--sky-top); color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 5;}
.btn-back { background: rgba(255,255,255,0.2); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; backdrop-filter: blur(4px); transition: 0.2s; }
.start-review-banner { background: var(--success-green); color: white; border-radius: 16px; padding: 18px; margin: 20px; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 1.1em; box-shadow: 0 4px 12px rgba(42, 157, 143, 0.3); transition: 0.2s; }
.start-review-banner.empty { background: rgba(255,255,255,0.5); cursor: default; box-shadow: none; color: var(--text-dark); border: 1px dashed #85c4e9;}
.hub-content { flex: 1; overflow-y: auto; padding: 0 20px 40px 20px;}
.hub-item-card { background: rgba(255,255,255,0.9); border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: row;}
.hub-item-card.is-done { opacity: 0.6; filter: grayscale(0.5); }
.hub-binder-edge { width: 26px; background: #eaf4fb; border-right: 1px dashed #85c4e9; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex-shrink: 0; padding: 10px 0; min-height: 60px;}
.hub-binder-hole { width: 12px; height: 12px; background: #d1e3f0; border-radius: 50%; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);}
.hub-item-main { flex: 1; display: flex; flex-direction: column; min-width: 0;}
.hub-item-title-bar { padding: 14px 16px 8px 16px; display: flex; flex-direction: column; align-items: flex-start; color: var(--text-dark); cursor: pointer; user-select: none; gap: 8px;}
.hub-item-title-bar .hub-item-name { font-weight: bold; font-size: 1.1em; word-break: break-word; overflow-wrap: break-word; line-height: 1.4; display: flex; align-items: center; gap: 8px; width: 100%;}
.hub-item-title-bar .hub-item-actions-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%;}
.hub-item-details { display: none; padding: 0 20px 20px 20px; border-top: 1px dashed rgba(95, 128, 166, 0.2); background: rgba(255,255,255,0.5); }
.hub-item-details.open { display: block; animation: fadeIn 0.3s ease; }
.status-badge { font-size: 0.75em; padding: 4px 10px; border-radius: 12px; background: #eaf4fb; color: var(--sky-top); font-weight: 600; white-space: nowrap; cursor: pointer; transition: 0.2s; border: 1px solid transparent;}
.status-badge:hover { border-color: var(--sky-top); background: white; }
.status-badge.due { background: rgba(231, 111, 81, 0.1); color: var(--danger-red); }
.status-badge.due:hover { border-color: var(--danger-red); background: white; }

.note-html-content { line-height: 1.7; font-size: 1em; color: var(--text-dark); background: rgba(255,255,255,0.7); padding: 15px; border-radius: 10px; min-height: 40px; margin-top: 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); word-break: break-all;}
.highlight-text { color: #b06262; font-weight: bold; background: rgba(212,160,160,0.25); padding: 0 4px; border-radius: 4px; }
.hl-blue { color: #5a7d9a; font-weight: bold; background: rgba(139,167,196,0.25); padding: 0 4px; border-radius: 4px; }
.hl-gold { color: #a08a4a; font-weight: bold; background: rgba(212,200,154,0.25); padding: 0 4px; border-radius: 4px; }
.hl-green { color: #6b8a6b; font-weight: bold; background: rgba(163,184,154,0.25); padding: 0 4px; border-radius: 4px; }
.cloze-text { background: var(--text-dark); color: transparent; padding: 0 6px; border-radius: 6px; cursor: pointer; transition: 0.2s; user-select: none; border: 1px solid rgba(0,0,0,0.1);}
.cloze-text.revealed { background: rgba(0,0,0,0.05); color: var(--danger-red); font-weight: bold; border-color: transparent;}

.free-textarea { width: 100%; min-height: 120px; background: #ffffff; border: 2px solid #85c4e9; border-radius: 8px; padding: 12px; font-size: 1em; color: var(--text-dark); resize: vertical; outline: none; box-sizing: border-box; font-family: inherit; }
.note-toolbar { display: flex; gap: 8px; margin: 10px 0 6px 0; flex-wrap: wrap; background: rgba(255,255,255,0.5); padding: 6px; border-radius: 8px;}
.note-toolbar button, .note-toolbar label { background: white; border: 1px solid #85c4e9; color: var(--text-dark); padding: 6px 10px; border-radius: 6px; font-size: 0.85em; cursor: pointer; display: flex; align-items: center; gap:4px; font-weight: 600;}
.focus-btn-small { background: var(--sky-top); color: white; border: none; padding: 8px 14px; border-radius: 8px; font-size: 0.9em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: bold;}

/* 无限嵌套折叠树 */
.outliner-tree { margin-top: 5px; display: flex; flex-direction: column; gap: 4px; }
.outline-node { margin-left: 24px; border-left: 2px solid rgba(133,196,233,0.3); padding-left: 8px; position: relative; transition: 0.2s; }
.outliner-tree > .outline-node { margin-left: 0; border-left: none; padding-left: 0; }

/* 大层级（根节点）样式 */
.outline-node.level-0 { margin-bottom: 12px; }
.outline-node.level-0 > .outline-row > .outline-toggle { font-size: 1.1em; margin-top: 6px; color: var(--sky-top); }
.outline-node.level-0 > .outline-row > div > .outline-text { font-size: 1.1em; font-weight: bold; color: var(--sky-top); border-bottom: 2px solid rgba(133,196,233,0.3); padding-bottom: 6px; margin-bottom: 4px; }
.outline-node.level-0 > .outline-row > div > .outline-input { font-size: 1.1em; font-weight: bold; color: var(--sky-top); border-bottom: 2px solid rgba(133,196,233,0.6); }

/* 小层级样式 */
.outline-node:not(.level-0) { margin-top: 4px; }
.outline-node:not(.level-0) > .outline-row > .outline-toggle { font-size: 0.85em; margin-top: 4px; color: #888; }
.outline-node:not(.level-0) > .outline-row > div > .outline-text { font-size: 0.95em; color: var(--text-dark); }

.outline-row { display: flex; align-items: flex-start; gap: 6px; position: relative; }
.outline-toggle { cursor: pointer; color: var(--sky-top); font-size: 0.9em; margin-top: 5px; width: 18px; text-align: center; user-select: none; font-weight:bold; transition: 0.2s;}
.outline-toggle:hover { color: var(--danger-red); transform: scale(1.2); }
.outline-input { width: 100%; border: none; border-bottom: 1px dashed #85c4e9; background: transparent; outline: none; font-size: 0.95em; color: var(--text-dark); padding: 4px 0; font-family: inherit; }
.outline-input:focus { border-bottom: 2px solid var(--sky-top); background: rgba(255,255,255,0.5); border-radius: 4px 4px 0 0; }
.outline-text { padding: 4px 0; color: var(--text-dark); word-break: break-all; line-height: 1.5; font-size: 0.95em; }
.outline-actions { display: flex; gap: 4px; opacity: 0; transition: 0.2s; align-items: center; margin-top: 2px; }
.outline-row:hover .outline-actions { opacity: 1; }
.outline-btn { background: transparent; border: none; cursor: pointer; font-size: 1.1em; padding: 2px 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center;}
.outline-btn.add { color: var(--sky-top); } .outline-btn.add:hover { background: rgba(133,196,233,0.2); }
.outline-btn.del { color: var(--danger-red); } .outline-btn.del:hover { background: rgba(231,111,81,0.2); }

.media-gallery { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.audio-wrap { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.8); padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); }
.audio-wrap audio { height: 30px; flex: 1; outline: none;}
.img-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.img-wrap { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); background: #fff;}
.img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.media-del { background: rgba(231, 111, 81, 0.9); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; font-weight: bold; position: absolute; top: 4px; right: 4px;}

.inline-add { display: flex; gap: 8px; width: 100%; box-sizing: border-box; align-items: center; margin-top:10px;}
.inline-add input { flex: 1; padding: 10px 14px; border: 1px dashed #85c4e9; border-radius: 8px; background: rgba(255,255,255,0.7); font-size: 0.95em; outline: none; }
.inline-add button { background: #85c4e9; color: white; border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; font-size: 0.95em; font-weight:bold;}

.focus-header { padding: max(15px, env(safe-area-inset-top)) 20px 15px 20px; display: flex; justify-content: space-between; align-items: center; color: var(--text-dark); border-bottom: 1px solid rgba(0,0,0,0.05); background: white; z-index:5; box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.focus-back { font-size: 1em; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; opacity: 0.8; }
.focus-big-title { font-size: 0.85em; opacity: 0.6; }

.focus-body { flex: 1; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; position: relative;}
.focus-item-name { font-size: 1.8em; font-weight: bold; color: var(--text-dark); text-align: center; margin-bottom: 20px; margin-top: 10px; word-break: break-all;}
.mask-toggle-area { display: flex; justify-content: center; margin-bottom: 15px; gap: 10px; flex-wrap:wrap;}
.btn-toggle-mask { background: #85c4e9; color: white; border: none; padding: 8px 20px; border-radius: 20px; font-size: 1em; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.btn-toggle-mask.hidden-mode { background: #cbd6e2; color: var(--text-dark); }
.focus-content-area { flex: 1; display: flex; flex-direction: column; transition: opacity 0.3s ease; position: relative; }
.focus-content-area.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; height: 0; overflow: hidden; margin:0; padding:0;}

.focus-actions { display: flex; gap: 10px; padding: 15px 20px max(30px, calc(20px + env(safe-area-inset-bottom))); background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); align-items: stretch; border-top: 1px solid rgba(0,0,0,0.05);}
.btn-huge { flex: 1; padding: 16px; border-radius: 16px; border: none; font-size: 1.1em; font-weight: 600; cursor: pointer; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1.2; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.2s;}
.btn-huge:active { transform: scale(0.97); }
.btn-huge.forget { background: #CC7C72; flex: 1; } .btn-huge.remember { background: #B9AF5F; flex: 1; } .btn-huge.close { background: #5f80a6; }
.btn-huge.nav { background: rgba(255,255,255,0.6); color: var(--text-dark); flex: 0.3; font-size: 1.2em; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 999; opacity: 0; transition: opacity 0.3s; }
.modal-overlay.show { display: flex; opacity: 1; }
.modal-content { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); width: 85%; max-width: 400px; border-radius: 20px; padding: 24px; transform: translateY(20px); transition: transform 0.3s; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column;}
.modal-overlay.show .modal-content { transform: translateY(0); }
.modal-title { font-size: 1.25em; font-weight: 600; color: var(--text-dark); margin-bottom: 20px; text-align: center; display: flex; justify-content: center; align-items: center; gap:8px;}
.form-control { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.1); padding: 10px 12px; border-radius: 10px; font-size: 1em; color: var(--text-dark); outline: none; font-family: inherit; margin-bottom: 15px;}
.modal-actions { display: flex; gap: 12px; margin-top: 24px; flex-shrink: 0;}
.btn { flex: 1; padding: 12px; border-radius: 10px; border: none; font-size: 1em; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px;}
.btn-cancel { background: rgba(0,0,0,0.05); color: #5f80a6; } .btn-save { background: #85c4e9; color: white; }

/* 树形勾选框样式 */
.tree-node { margin-top: 6px; color: var(--text-dark); }
.tree-node label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.95em; padding: 4px 0; font-weight:bold; }
.tree-node label:hover { color: var(--sky-top); }
.tree-node input[type="checkbox"] { transform: scale(1.2); accent-color: var(--sky-top); margin: 0;}
.tree-children { margin-left: 18px; border-left: 1px dashed rgba(133,196,233,0.6); padding-left: 10px; }
.tree-children label { font-weight: normal; font-size: 0.9em; }

.skim-header { padding: max(15px, env(safe-area-inset-top)) 20px 15px 20px; display: flex; justify-content: space-between; align-items: center; background: white; z-index:5; box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.skim-tools { display: flex; gap: 10px; }
.skim-btn { background: #85c4e9; color: white; border: none; padding: 6px 12px; border-radius: 8px; font-size: 0.9em; cursor: pointer; font-weight: bold;}
.skim-content-area { flex: 1; padding: 20px 20px max(100px, env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.skim-card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); display: flex; border: 1px solid rgba(133, 196, 233, 0.3); overflow: hidden; resize: vertical; min-height: 120px; max-height: 80vh; position: relative;}
.skim-binder-edge { width: 30px; background: #eaf4fb; border-right: 1px dashed #85c4e9; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex-shrink: 0; padding: 15px 0;}
.skim-hole { width: 14px; height: 14px; background: #d1e3f0; border-radius: 50%; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0;}
.skim-col { flex: 1; padding: 15px; overflow-y: auto; position: relative; transition: 0.3s; display: flex; flex-direction: column; justify-content: center; }
.skim-col.left-col { border-right: 1px solid rgba(0,0,0,0.05); background: #fcfdfe; flex: 0.6; }
.skim-col.right-col { background: #ffffff; flex: 1.4;}
.mist-active .mist-content { filter: blur(6px); opacity: 0.1; user-select: none; pointer-events: none; }
.mist-overlay { position: absolute; inset: 0; background: rgba(133, 196, 233, 0.65); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; color: white; font-weight: bold; cursor: pointer; font-size: 1.1em; letter-spacing: 2px;}
.mist-active .mist-overlay { display: flex; }

.timeline-item { position: relative; margin-bottom: 20px; border-left: 2px solid #85c4e9; padding-left: 18px; margin-left: 10px;}
.timeline-item::before { content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; background: white; border: 2px solid var(--sky-top); border-radius: 50%; }
.timeline-title { font-size: 1.05em; color: var(--text-dark); display: flex; align-items: center; gap: 6px; margin-bottom: 6px;}
.timeline-detail { font-size: 0.95em; color: var(--text-light); line-height: 1.6; background: rgba(255,255,255,0.6); padding: 8px 12px; border-radius: 8px; word-break: break-all;}

.floating-action-bar { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: var(--sky-top); color: white; padding: 12px 24px; border-radius: 30px; display: flex; gap: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; align-items: center; opacity: 0; pointer-events: none; visibility: hidden; white-space: nowrap;}
.floating-action-bar.show { bottom: max(30px, calc(15px + env(safe-area-inset-bottom))); opacity: 1; pointer-events: auto; visibility: visible;}

.add-btn { position: fixed; right: calc(50% - 270px); bottom: 50px; width: 56px; height: 56px; background: linear-gradient(135deg, var(--sky-top), #85c4e9); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2em; box-shadow: 0 6px 16px rgba(54, 124, 190, 0.4); cursor: pointer; z-index: 100; transition: transform 0.2s; }
.add-btn:active { transform: scale(0.9); }
@media (max-width: 600px) { .add-btn { right: 20px; bottom: max(80px, calc(50px + env(safe-area-inset-bottom))); } }

.trash-item { background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.05); padding: 10px; border-radius: 8px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}

.memo-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:12px; font-size:0.85em; font-weight:bold; background:#eaf4fb; color:var(--sky-top); }
.memo-badge.urgent { background:rgba(231,111,81,0.1); color:var(--danger-red); }
.memo-badge.done { background:rgba(42,157,143,0.1); color:var(--success-green); }
/* 修复中英文换行单词被截断的问题 */
.task-title, .hub-item-title-bar span, .note-html-content { word-wrap: break-word; word-break: break-word; }

/* 任务详情页多选编辑模式 */
.hub-checkbox { display: none; margin-right: 10px; transform: scale(1.3); accent-color: var(--sky-top); }
.hub-edit-active .hub-checkbox { display: inline-block; }
.hub-edit-active .action-btns { display: none; }

/* Tag 标签样式 */
.tag-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 600; white-space: nowrap; border: 1px solid transparent; cursor: default; }
#focusCardView .tag-badge { font-size: 1em; padding: 6px 12px; border-radius: 16px; }
.tag-badge-editable { cursor: pointer; }
.tag-badge-editable:hover { opacity: 0.7; }
.tag-badge .tag-del { display: none; cursor: pointer; margin-left:2px; font-size:1.2em; line-height:1; }
.tag-badge-editable .tag-del { display: inline; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tag-picker-option { padding: 4px 12px; border-radius: 12px; font-size: 0.8em; font-weight: 600; cursor: pointer; border: 1px dashed rgba(0,0,0,0.15); background: rgba(255,255,255,0.5); transition: 0.2s; white-space: nowrap; }
.tag-picker-option:hover, .tag-picker-option.selected { background: var(--sky-top); color: white; border-color: var(--sky-top); }
.tag-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px; background: rgba(255,255,255,0.3); z-index: 10; flex-shrink: 0; align-items: center; }
.tag-filter-btn { padding: 4px 12px; border-radius: 12px; font-size: 0.8em; font-weight: 600; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.6); transition: 0.2s; white-space: nowrap; }
.tag-filter-btn.active { background: var(--sky-top); color: white; border-color: var(--sky-top); }
.tag-manage-modal-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.tag-manage-color-dot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(0,0,0,0.1); flex-shrink: 0; }

/* 搜索框 */
.search-bar { padding: 10px 20px; background: rgba(255,255,255,0.25); z-index: 10; flex-shrink: 0; }
.search-bar input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.7); outline: none; font-size: 0.95em; color: var(--text-dark); font-family: inherit; }

/* 星星高亮样式 */
.star-active { color: #f4a261 !important; }
.star-active svg { fill: #fceed3; }
/* 彻底修复所有英文单词、标题异常断行(被腰斩)的问题 */
.task-title, 
.hub-item-title-bar span, 
.focus-item-name, 
#hubTaskTitle, 
.outline-text, 
.note-html-content { 
    word-break: normal !important; 
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important; 
    white-space: normal !important;
}

/* 智能分点活页纸动画与样式 */
.smart-split-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    perspective: 1000px;
}
.smart-split-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid rgba(133, 196, 233, 0.3);
    display: flex;
    flex-direction: row;
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
    transition: opacity 0.3s;
}
.smart-split-page.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.smart-split-page.tear-off {
    animation: tearOffAnim 0.6s forwards cubic-bezier(0.55, 0.085, 0.68, 0.53);
    z-index: 3;
}
.smart-split-page.tear-in {
    animation: tearInAnim 0.6s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
}
@keyframes tearOffAnim {
    0% { transform: rotate(0deg) translateY(0) translateX(0); opacity: 1; }
    40% { transform: rotate(-5deg) translateY(20px) translateX(10px); opacity: 0.8; }
    100% { transform: rotate(15deg) translateY(100vh) translateX(50px); opacity: 0; }
}
@keyframes tearInAnim {
    0% { transform: rotate(15deg) translateY(100vh) translateX(50px); opacity: 0; }
    60% { transform: rotate(-5deg) translateY(20px) translateX(10px); opacity: 0.8; }
    100% { transform: rotate(0deg) translateY(0) translateX(0); opacity: 1; }
}
.split-binder-edge {
    width: 30px;
    background: #eaf4fb;
    border-right: 1px dashed #85c4e9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    flex-shrink: 0;
    padding: 15px 0;
    border-radius: 12px 0 0 12px;
}
.split-hole {
    width: 14px;
    height: 14px;
    background: #d1e3f0;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.split-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}
.split-title {
    font-size: 1.15em;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(133, 196, 233, 0.3);
    padding-bottom: 8px;
}
.split-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
}
.split-btn {
    background: var(--sky-top);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}
.split-btn:disabled {
    background: #cbd6e2;
    cursor: not-allowed;
}
.split-progress {
    font-size: 0.9em;
    color: var(--text-light);
    font-weight: bold;
}

/* 智能导入按钮样式 */
.smart-source-btn {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.smart-source-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.smart-source-btn:active {
    transform: scale(0.98);
}
.smart-preview-task {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(133,196,233,0.3);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.smart-preview-task-title {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.smart-preview-item {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9em;
}
.smart-preview-item .item-idx {
    background: var(--sky-top);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 1px;
}
.smart-preview-item .item-text {
    flex: 1;
    color: var(--text-dark);
    line-height: 1.4;
}
.smart-preview-item .item-tags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 4px;
}