:root{--bg: #ffffff;--surface: #f5f5f5;--surface-hover: #ececec;--surface-active: #e0e0e0;--text: #1a1a1a;--text-muted: #666666;--text-inverse: #ffffff;--accent: #0066cc;--accent-hover: #0055aa;--accent-text: #ffffff;--border: #e0e0e0;--shadow: rgba(0, 0, 0, .08);--radius: 8px;--radius-sm: 4px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "SF Mono", "Fira Code", monospace;--font-size-sm: 13px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 22px;--sidebar-width: 260px;--list-width: 360px;--transition: .15s ease}[data-theme=dark]{--bg: #1a1a1a;--surface: #252525;--surface-hover: #303030;--surface-active: #3a3a3a;--text: #e0e0e0;--text-muted: #888888;--text-inverse: #1a1a1a;--accent: #4d9fff;--accent-hover: #3a8eef;--accent-text: #ffffff;--border: #333333;--shadow: rgba(0, 0, 0, .3)}[data-theme=sepia]{--bg: #f4ecd8;--surface: #ede0c8;--surface-hover: #e6d5b8;--surface-active: #dccc9e;--text: #3a3020;--text-muted: #7a6f5a;--text-inverse: #f4ecd8;--accent: #8b5e3c;--accent-hover: #7a4f2e;--accent-text: #ffffff;--border: #d4c4a8;--shadow: rgba(58, 48, 32, .1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%;overflow:hidden}body{font-family:var(--font);font-size:var(--font-size-base);color:var(--text);background-color:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea,select{font-family:inherit;font-size:inherit;color:var(--text);background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);outline:none;transition:border-color var(--transition)}input:focus,textarea:focus,select:focus{border-color:var(--accent)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-layout{display:flex;height:100%;overflow:hidden}.sidebar{width:var(--sidebar-width);flex-shrink:0;background-color:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:var(--spacing-md);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.sidebar-header h1{font-size:var(--font-size-xl);font-weight:700}.sidebar-content{flex:1;overflow-y:auto;padding:var(--spacing-sm) 0}.sidebar-section{margin-bottom:var(--spacing-sm)}.sidebar-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:var(--spacing-sm) var(--spacing-md)}.sidebar-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:background-color var(--transition);border-radius:0;-webkit-user-select:none;user-select:none}.sidebar-item:hover{background-color:var(--surface-hover)}.sidebar-item.active{background-color:var(--surface-active);font-weight:600}.sidebar-item .icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.sidebar-item .label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-item .count{font-size:var(--font-size-sm);color:var(--text-muted);flex-shrink:0}.sidebar-folder{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;-webkit-user-select:none;user-select:none}.sidebar-folder .folder-icon{width:16px;height:16px;transition:transform var(--transition)}.sidebar-folder.collapsed .folder-icon{transform:rotate(-90deg)}.sidebar-folder .label{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.sidebar-folder.active .label{color:var(--accent)}.sidebar-feeds{overflow:hidden}.sidebar-feeds.collapsed{display:none}.sidebar-feed{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xl);cursor:pointer;transition:background-color var(--transition);-webkit-user-select:none;user-select:none}.sidebar-feed:hover{background-color:var(--surface-hover)}.sidebar-feed.active{background-color:var(--surface-active);font-weight:600}.sidebar-feed .favicon{width:16px;height:16px;flex-shrink:0;border-radius:var(--radius-sm)}.sidebar-feed .label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-feed .count{font-size:var(--font-size-sm);color:var(--text-muted);flex-shrink:0}.sidebar-feed .feed-actions{display:none;gap:1px;flex-shrink:0}.sidebar-feed:hover .feed-actions,.sidebar-folder:hover .feed-actions{display:flex}.sidebar-feed:hover .count{display:none}.feed-action-btn{padding:2px;border-radius:var(--radius-sm);opacity:.6;transition:opacity var(--transition)}.feed-action-btn:hover{opacity:1;background-color:var(--surface-active)}.sidebar-footer{padding:var(--spacing-sm) var(--spacing-md);border-top:1px solid var(--border);display:flex;gap:var(--spacing-sm)}.article-list{width:var(--list-width);flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.article-list-header{padding:var(--spacing-md);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.article-list-header h2{font-size:var(--font-size-lg);font-weight:600}.article-list-content{flex:1;overflow-y:auto}.article-card-wrapper{position:relative;overflow:hidden}.article-card-swipe-bg{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;padding-left:var(--spacing-lg);color:#fff;opacity:0;transition:opacity var(--transition)}.article-card-swipe-bg.swipe-read{background:var(--accent)}.article-card-swipe-bg.swipe-unread{background:var(--text-muted)}.article-card-swipe-bg.swipe-visible{opacity:1}.article-card{position:relative;z-index:1;background-color:var(--bg);transition:transform .3s ease;padding:var(--spacing-md);border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none}.article-card.swipe-active{transition:none}.article-card:hover{background-color:var(--surface-hover)}.article-card.active{background-color:var(--surface-active)}.article-card.read .title{color:var(--text-muted);font-weight:400}.article-card .feed-name{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--spacing-xs)}.article-card .title{font-size:var(--font-size-base);font-weight:600;margin-bottom:var(--spacing-xs);line-height:1.3}.article-card .summary{font-size:var(--font-size-sm);color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.article-card .meta{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--text-muted)}.article-card .saved-indicator{color:var(--accent)}.article-view{flex:1;overflow-y:auto;padding:var(--spacing-xl);background-color:var(--bg)}.article-view .article-header{margin-bottom:var(--spacing-lg)}.article-view .article-feed{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--spacing-sm)}.article-view .article-title{font-size:var(--font-size-2xl);font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm)}.article-view .article-meta{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--text-muted)}.article-view .article-content{font-size:var(--font-size-lg);line-height:1.7;max-width:680px}.article-footer{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border);max-width:680px}.pull-indicator{position:fixed;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);font-size:var(--font-size-sm);color:var(--text-muted);pointer-events:none;z-index:200;transform:translateY(120px)}.pull-indicator svg{transition:transform var(--transition),color var(--transition)}.pull-indicator.pull-triggered{color:var(--accent)}.pull-indicator.pull-triggered svg{transform:scale(1.2)}.article-view.swipe-active{overscroll-behavior:contain}.article-view:not(.swipe-active) .pull-indicator{transition:transform .3s ease}.pull-indicator.pull-hidden{opacity:0}.article-view .article-content p{margin-bottom:var(--spacing-md)}.article-view .article-content img{max-width:100%;border-radius:var(--radius);margin:var(--spacing-md) 0}.article-view .article-content h1,.article-view .article-content h2,.article-view .article-content h3{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}.article-view .article-content a{color:var(--accent)}.article-view .article-actions{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border)}.btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:500;transition:background-color var(--transition),opacity var(--transition);background-color:var(--surface);border:1px solid var(--border);color:var(--text)}.btn:hover{background-color:var(--surface-hover)}.btn:active{background-color:var(--surface-active)}.btn-primary{background-color:var(--accent);color:var(--accent-text);border-color:var(--accent)}.btn-primary:hover{background-color:var(--accent-hover)}.btn-icon{padding:var(--spacing-sm);width:auto;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}.btn-ghost{background-color:transparent;border-color:transparent}.btn-ghost:hover{background-color:var(--surface-hover)}.login-view{display:flex;align-items:center;justify-content:center;height:100%;background-color:var(--surface)}.login-card{background-color:var(--bg);padding:var(--spacing-xl);border-radius:var(--radius);box-shadow:0 2px 16px var(--shadow);width:100%;max-width:400px}.login-card h1{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-md);text-align:center}.login-card .form-group{margin-bottom:var(--spacing-md)}.login-card label{display:block;font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);color:var(--text-muted)}.login-card input{width:100%}.login-card .btn-primary{width:100%;justify-content:center}.login-card .error{color:#d44;font-size:var(--font-size-sm);margin-bottom:var(--spacing-sm)}.settings-view{display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:var(--bg)}.settings-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--border)}.settings-header h1{font-size:var(--font-size-2xl)}.settings-content{flex:1;overflow-y:auto;padding:var(--spacing-xl);max-width:640px}.settings-section{margin-bottom:var(--spacing-xl)}.settings-section h2{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border)}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) 0}.settings-row label{font-weight:500}.settings-row .hint{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:var(--spacing-xs)}.theme-options{display:flex;gap:var(--spacing-sm)}.theme-option{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;transition:border-color var(--transition),background-color var(--transition)}.theme-option:hover{background-color:var(--surface-hover)}.theme-option.active{border-color:var(--accent);background-color:var(--surface)}.user-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.user-row{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface);border-radius:var(--radius-sm)}.user-row .user-info{display:flex;flex-direction:column}.user-row .user-email{font-weight:500}.user-row .user-name{font-size:var(--font-size-sm);color:var(--text-muted)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);padding:var(--spacing-xl);text-align:center}.empty-state .icon{font-size:48px;margin-bottom:var(--spacing-md)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background-color:var(--bg);border-radius:var(--radius);padding:var(--spacing-xl);width:100%;max-width:480px;box-shadow:0 8px 32px var(--shadow)}.modal h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md)}.modal .form-group{margin-bottom:var(--spacing-md)}.modal label{display:block;font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);color:var(--text-muted)}.modal input{width:100%}.modal .actions{display:flex;justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000004d;z-index:999}@media(max-width:1024px){:root{--sidebar-width: 220px;--list-width: 300px}}@media(max-width:768px){:root{--sidebar-width: 100%;--list-width: 100%}.app-layout{flex-direction:row}.sidebar,.article-list,.article-view{width:100%;flex:1;flex-shrink:0}.mobile-hidden{display:none!important}.mobile-back-btn{flex-shrink:0}.article-list-header h2{flex:1}.article-view{padding:var(--spacing-md)}.article-view .article-content{font-size:var(--font-size-base);padding-bottom:60px}.mobile-next-btn{position:fixed;bottom:var(--spacing-md);right:var(--spacing-md);z-index:200;box-shadow:0 2px 8px var(--shadow)}.article-list-header,.article-card{padding:var(--spacing-sm) var(--spacing-md)}.sidebar-header h1{font-size:var(--font-size-lg)}.modal{margin:var(--spacing-md);max-width:calc(100% - 2 * var(--spacing-md))}.settings-view{overflow-y:auto}.settings-view,.settings-header,.settings-content{width:100%;max-width:100%}.settings-content{padding:var(--spacing-md)}.theme-options{flex-wrap:wrap}}