*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #4f6ef7;--primary-dark: #3b5bdb;--primary-light: #eef1ff;--primary-bg: #eef1ff;--bg: #f5f6fa;--sidebar-bg: #ffffff;--sidebar-text: #1a2332;--sidebar-sub: #8e98a8;--sidebar-border: #eaedf2;--sidebar-hover: #f4f6fb;--sidebar-active-bg: #eef1ff;--sidebar-active-border: #4f6ef7;--card-bg: #ffffff;--text: #1a2332;--text-light: #6b7688;--border: #eaedf2;--accent: #22c55e;--tag-bg: #eef1ff;--tag-color: #4f6ef7;--shadow-sm: 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.06)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans SC,PingFang SC,sans-serif;color:var(--text);background:var(--bg);height:100vh;overflow:hidden}#app{display:flex;height:100vh}#sidebar{width:280px;min-width:280px;background:#fff;border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;overflow:hidden;box-shadow:1px 0 8px #00000008}.sidebar-header{padding:20px 16px 16px;border-bottom:1px solid var(--sidebar-border);background:linear-gradient(135deg,#fafbff,#fff)}.sidebar-logo{display:flex;align-items:center;gap:14px}.sidebar-logo-img{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 2px 6px #4f6ef733}.sidebar-logo-text h2{font-size:1.15em;font-weight:700;color:var(--sidebar-text);line-height:1.2}.sidebar-logo-text .sidebar-subtitle{font-size:.78em;color:var(--sidebar-sub);margin-top:2px;font-weight:400}.word-list-sidebar{flex:1;overflow-y:auto;padding:0}.word-list-sidebar::-webkit-scrollbar{width:3px}.word-list-sidebar::-webkit-scrollbar-thumb{background:#d0d5e0;border-radius:2px}.word-list-sidebar .loading{text-align:center;padding:40px 20px;color:var(--sidebar-sub);font-size:.9em}.month-group{border-bottom:1px solid #f0f2f5}.month-group:last-child{border-bottom:none}.month-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px 20px;cursor:pointer;font-size:.82em;font-weight:700;color:#566573;letter-spacing:.03em;-webkit-user-select:none;user-select:none;transition:all .15s;position:relative}.month-header:after{content:"";position:absolute;bottom:0;left:20px;right:16px;height:1px;background:var(--sidebar-border);opacity:.6}.month-header:hover{background:#f7f8fc;color:var(--primary)}.month-header .month-left{display:flex;align-items:center;gap:8px}.month-header .month-count{font-weight:500;color:#b0b8c8;font-size:.85em;background:#f0f2f5;padding:0 7px;border-radius:8px;line-height:1.6}.month-toggle{font-size:.55em;color:#c0c8d8;transition:transform .2s;display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;background:#f0f2f5;border-radius:4px}.month-toggle.collapsed{transform:rotate(-90deg)}.month-items{overflow:hidden;transition:max-height .25s ease}.month-items.collapsed{max-height:0!important}.sidebar-item{display:flex;align-items:center;padding:10px 16px 10px 28px;cursor:pointer;transition:all .15s}.sidebar-item:hover{background:var(--sidebar-hover)}.sidebar-item.active{background:linear-gradient(90deg,var(--sidebar-active-bg) 0%,#fff 100%);position:relative}.sidebar-item.active:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--sidebar-active-border);border-radius:0 3px 3px 0}.sidebar-item .date-badge{width:36px;height:36px;border-radius:10px;background:var(--primary-light);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;margin-right:12px;transition:all .2s}.sidebar-item.active .date-badge{background:linear-gradient(135deg,var(--primary) 0%,#6c5ce7 100%);color:#fff;box-shadow:0 2px 8px #4f6ef740}.sidebar-item .date-badge .month{font-size:.55em;color:var(--primary);line-height:1;font-weight:600}.sidebar-item.active .date-badge .month{color:#ffffffd9}.sidebar-item .date-badge .day{font-size:1em;font-weight:700;line-height:1.2}.sidebar-item .item-info{flex:1;min-width:0}.sidebar-item .item-title{font-size:.88em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sidebar-text);transition:color .15s}.sidebar-item.active .item-title{color:var(--primary-dark)}.sidebar-item .item-meta{font-size:.72em;color:#b0b8c8;margin-top:2px}.detail-hero{margin:0 0 28px;border-radius:14px;overflow:hidden}.hero-bg{position:relative;min-height:320px;display:flex;align-items:flex-end;padding:60px 48px 40px;background-size:cover;background-position:center;background-color:var(--primary);overflow:hidden}.hero-bg:before{content:"";display:block;padding-top:56.25%}.hero-bg:not([style*=background-image]):before{padding-top:30%}.hero-bg{min-height:0;padding:0}.hero-overlay,.hero-content{position:absolute;left:0;right:0}.hero-overlay{top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000000bf,#00000059,#0000001a)}.hero-content{bottom:0;padding:40px 48px;z-index:1;color:#fff;width:100%}.hero-bg:not([style*=background-image]){min-height:260px;padding:60px 48px 40px;display:flex}.hero-bg:not([style*=background-image]):before{display:none}.hero-bg:not([style*=background-image]) .hero-overlay{display:none}.hero-bg:not([style*=background-image]) .hero-content{position:relative;padding:0}.hero-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}.hero-emoji{font-size:1.5em;line-height:1}.hero-seq{font-size:.82em;background:#ffffff2e;padding:2px 10px;border-radius:10px;font-weight:500}.hero-title{font-size:2em;font-weight:700;margin-bottom:10px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.3)}.hero-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}.hero-item{display:inline-block;padding:2px 10px;border-radius:6px;font-size:.8em;font-weight:500}.hero-category{background:#8b5cf68c;color:#ede9fe}.hero-createdate{background:#14b8a68c;color:#ccfbf1}.hero-idium{font-size:.95em;font-style:italic;margin-bottom:12px;padding:4px 12px;border-radius:8px;background:#f59e0b59;color:#fef3c7;display:inline-block;text-shadow:0 1px 1px rgba(0,0,0,.2)}.hero-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}.hero-tag-blue{padding:2px 10px;border-radius:12px;font-size:.75em;font-weight:500;background:#3b82f699;color:#dbeafe}.hero-tag-green{padding:2px 10px;border-radius:12px;font-size:.75em;font-weight:500;background:#22c55e99;color:#dcfce7}.hero-tag-purple{padding:2px 10px;border-radius:12px;font-size:.75em;font-weight:500;background:#8b5cf699;color:#ede9fe}.hero-tag-orange{padding:2px 10px;border-radius:12px;font-size:.75em;font-weight:500;background:#f59e0b99;color:#fef3c7}.hero-tag-pink{padding:2px 10px;border-radius:12px;font-size:.75em;font-weight:500;background:#ec489999;color:#fce7f3}.hero-tag-teal{padding:2px 10px;border-radius:12px;font-size:.75em;font-weight:500;background:#14b8a699;color:#ccfbf1}#content{flex:1;overflow-y:auto;padding:36px 48px;background:var(--bg);max-width:1024px;margin:0 auto}@media(min-width:1324px){#content{padding:36px 48px 36px 36px}}#content::-webkit-scrollbar{width:6px}#content::-webkit-scrollbar-thumb{background:#d0d5e0;border-radius:3px}.welcome{text-align:center;padding:120px 20px}.welcome-icon{font-size:3.6em;margin-bottom:16px}.welcome h1{font-size:1.8em;margin-bottom:10px;color:var(--text);font-weight:700}.welcome p{color:var(--text-light);font-size:1em}.welcome-hint{margin-top:14px;font-size:.85em!important;color:#b0b8c8!important}.word-card{background:var(--card-bg);border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow-sm);border:1px solid var(--sidebar-border);transition:box-shadow .2s}.word-card:hover{box-shadow:var(--shadow-md)}.word-card .word-header{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.word-card .word-number{font-size:.82em;color:var(--primary);font-weight:600;min-width:24px}.word-card .word-text{font-size:1.4em;font-weight:700;color:var(--primary-dark)}.word-card .word-phonetic{font-size:.95em;color:var(--sidebar-sub);font-weight:400}.word-card .word-pos{font-size:.88em;color:var(--text-light);margin-bottom:12px}.word-card .word-pos .pos{color:var(--accent);font-weight:600}.word-card .word-example{background:var(--primary-light);border-radius:10px;padding:14px 16px;margin-bottom:10px}.word-card .word-example .sentence-en{color:var(--text);margin-bottom:5px;line-height:1.6;font-size:.95em}.word-card .word-example .sentence-zh{color:var(--text-light);font-size:.88em}.word-card .word-tip{font-size:.85em;color:var(--text-light);padding:10px 14px;background:#fffbeb;border-radius:8px;border-left:3px solid #f6c23e}.word-card .word-tip:before{content:"💡 "}@media(max-width:768px){#sidebar{width:100%;min-width:100%;max-height:45vh}#app{flex-direction:column}#content{padding:20px}.detail-hero{margin:0 0 20px;border-radius:10px}.hero-content{padding:24px 20px}.hero-title{font-size:1.5em}}