*{margin:0;padding:0;box-sizing:border-box}
:root{--bg-primary:#f5f7fa;--bg-secondary:#fff;--text-primary:#303133;--text-secondary:#606266;--border-color:#e4e7ed;--shadow:0 2px 12px rgba(0,0,0,.1);--primary-color:#409eff;--primary-hover:#66b1ff;--danger-color:#f56c6c;--ann-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
[data-theme="dark"]{--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--text-primary:#e0e0e0;--text-secondary:#909399;--border-color:#434343;--shadow:0 2px 12px rgba(0,0,0,.3);--ann-gradient:linear-gradient(135deg,#232526 0%,#414345 100%)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6}
.container{display:flex;min-height:100vh}
.sidebar{width:70px;background:var(--bg-secondary);border-right:1px solid var(--border-color);position:fixed;height:100vh;z-index:100;display:flex;flex-direction:column}
.sidebar-scroll{flex:1;overflow-y:auto;padding:20px 0}
.sidebar-scroll::-webkit-scrollbar{width:0}
.sidebar-fixed{padding:10px 0 20px;display:flex;justify-content:center;border-top:1px solid var(--border-color)}
.sidebar-item{width:50px;height:50px;margin:8px auto;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;font-size:20px;color:var(--text-secondary)}
.sidebar-item:hover{background:var(--bg-primary);color:var(--primary-color)}
.sidebar-item.active{background:var(--primary-color);color:#fff}
.main-content{margin-left:70px;flex:1;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:15px 25px;background:var(--bg-secondary);border-radius:16px;box-shadow:var(--shadow);gap:20px}
.logo-section{display:flex;align-items:center;gap:15px;flex-shrink:0}
.logo{width:45px;height:45px;border-radius:50%;object-fit:cover;cursor:pointer;transition:.3s}
.logo:hover{transform:scale(1.1)}
.site-title{font-size:24px;font-weight:700;color:var(--primary-color);white-space:nowrap}
.search-box{flex:1;max-width:400px}
.search-box input{width:100%;padding:12px 20px;border:1px solid var(--border-color);border-radius:25px;background:var(--bg-primary);color:var(--text-primary)}
.search-box input:focus{outline:none;border-color:var(--primary-color)}
.header-actions{display:flex;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--bg-primary);cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:.3s}
.icon-btn:hover{background:var(--primary-color);color:#fff}
.announcement-bar{display:flex;align-items:center;padding:12px 20px;margin-bottom:24px;border-radius:12px;background:var(--ann-gradient);color:#fff;box-shadow:var(--shadow);overflow:hidden}
[data-theme="dark"] .announcement-bar{color:#e0e0e0}
.ann-label{font-weight:700;font-size:15px;white-space:nowrap}
.ann-divider{width:1px;height:20px;background:currentColor;opacity:.4;margin:0 15px;flex-shrink:0}
.ann-viewport{flex:1;height:24px;position:relative;overflow:hidden}
.ann-item{position:absolute;top:0;left:0;width:100%;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s ease;opacity:0}
.ann-item.enter{transform:translateY(100%);opacity:0}
.ann-item.active{transform:translateY(0);opacity:1}
.ann-item.exit{transform:translateY(-100%);opacity:0}
.ann-text{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-section{margin-bottom:40px;animation:fadeIn .5s}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.category-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.category-icon{font-size:28px;color:var(--primary-color)}
.category-title{font-size:22px;font-weight:700}
.category-count{color:var(--text-secondary);font-size:14px;margin-left:auto}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.card{background:var(--bg-secondary);border-radius:12px;padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:all .3s;border-left:4px solid var(--primary-color);position:relative;overflow:hidden}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.card-favorite{position:absolute;top:15px;right:15px;font-size:20px;color:var(--text-secondary);cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);z-index:2;display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:rgba(255,255,255,.5);border-radius:50%}
.card-favorite:hover{transform:scale(1.2);color:var(--danger-color)}
.card-favorite.active{color:var(--danger-color)}
.card-favorite.active i{font-weight:900;animation:heartBeat .3s}
@keyframes heartBeat{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding-right:20px}
.card-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg-primary);flex-shrink:0}
.card-title{font-size:16px;font-weight:600;flex:1}
.card-desc{color:var(--text-secondary);font-size:13px;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-link{color:var(--primary-color);font-size:12px;word-break:break-all;display:flex;align-items:center;gap:5px}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:.3s;backdrop-filter:blur(5px)}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{background:var(--bg-secondary);border-radius:16px;padding:30px;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;animation:modalSlideIn .3s}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{display:flex;align-items:center;gap:15px;margin-bottom:30px;justify-content:center}
.modal-title{font-size:24px;font-weight:700}
.setting-item{margin-bottom:25px;padding:20px;background:var(--bg-primary);border-radius:12px}
.setting-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.setting-label{display:flex;align-items:center;gap:10px;font-weight:600}
.setting-desc{color:var(--text-secondary);font-size:13px;margin-top:5px}
.switch{width:50px;height:26px;background:#dcdfe6;border-radius:13px;position:relative;cursor:pointer;transition:.3s}
.switch.active{background:var(--primary-color)}
.switch-handle{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:.3s}
.switch.active .switch-handle{left:27px}
.radio-group{display:flex;gap:15px;margin-top:10px}
.radio-option{flex:1;padding:12px;border:2px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px}
.radio-option:hover{border-color:var(--primary-color)}
.input-group{margin-top:10px}
.input-group input{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary)}
.logo-input-group{display:flex;gap:10px;align-items:center}
.logo-input-group input{flex:1}
.btn-reset{padding:12px 16px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;font-size:14px;transition:all .3s;white-space:nowrap}
.btn-reset:hover{background:var(--bg-secondary);border-color:var(--primary-color);color:var(--primary-color)}
[data-theme="dark"] .btn-reset{background:var(--bg-secondary);color:var(--text-secondary)}
.btn{padding:12px 30px;border:none;border-radius:8px;cursor:pointer;font-weight:600}
.btn-primary{background:var(--primary-color);color:#fff}
.btn-primary:hover{opacity:.9}
.modal-footer{text-align:center;margin-top:30px}
.confirm-modal{max-width:450px}
.confirm-header{font-size:22px;font-weight:700;text-align:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-color)}
.confirm-body{margin-bottom:25px}
.confirm-body p{color:var(--text-secondary);margin-bottom:15px}
.confirm-link{display:block;padding:12px;background:var(--bg-primary);border-radius:8px;color:var(--primary-color);text-decoration:none;word-break:break-all}
.confirm-footer{display:flex;gap:15px;justify-content:flex-end}
.empty-state,.error-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}
.empty-state i,.error-state i{font-size:48px;margin-bottom:20px;display:block}
*{-webkit-tap-highlight-color:transparent}
*:focus{outline:none}
.card,.card-link,a,button,.icon-btn,.sidebar-item,.btn{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
@media (max-width:768px){.sidebar{width:60px}.main-content{margin-left:60px}.header{flex-direction:column;gap:15px}.logo-section{width:100%;justify-content:center}.search-box{width:100%;max-width:none}.cards-grid{grid-template-columns:1fr}}