:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#1e293b;background-color:#f8fafc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;min-height:100vh}#root{width:100%;min-height:100vh}a{font-weight:500;color:#3b82f6;text-decoration:inherit}a:hover{color:#2563eb}h1,h2,h3,h4,h5,h6{margin:0}button{font-family:inherit}:root{--color-bg: #f8fafc;--color-surface: #ffffff;--color-surface-hover: #f1f5f9;--color-border: #e2e8f0;--color-border-focus: #cbd5e1;--color-text: #1e293b;--color-text-muted: #475569;--color-text-secondary: #64748b;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-error: #ef4444;--color-error-bg: rgba(239, 68, 68, .1);--color-success: #22c55e;--color-success-bg: rgba(34, 197, 94, .1);--color-favorite: #f43f5e;--color-favorite-bg: rgba(244, 63, 94, .1);--color-github: #24292e;--color-github-hover: #2f363d;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--transition: .15s ease}body{background-color:var(--color-bg);color:var(--color-text)}.auth-container{max-width:480px;margin:0 auto;padding:2.5rem;min-height:100vh;display:flex;flex-direction:column;justify-content:center}.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-lg)}.auth-container h1{margin:0 0 .5rem;font-size:1.75rem;font-weight:600;text-align:center;letter-spacing:-.02em}.auth-subtitle{text-align:center;color:var(--color-text-muted);margin-bottom:2rem;font-size:.95rem}.auth-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500;font-size:.875rem;color:var(--color-text)}.form-group input{padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.95rem;background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition)}.form-group input::placeholder{color:var(--color-text-secondary)}.form-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f626}.form-group input:disabled{opacity:.5;cursor:not-allowed}.btn-primary{padding:.75rem 1.5rem;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:.95rem;font-weight:500;cursor:pointer;transition:background var(--transition),transform var(--transition)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-github{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.75rem 1.5rem;background:var(--color-github);color:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.95rem;font-weight:500;cursor:pointer;transition:background var(--transition),border-color var(--transition)}.btn-github:hover:not(:disabled){background:var(--color-github-hover);border-color:var(--color-border-focus)}.btn-github:disabled{opacity:.5;cursor:not-allowed}.btn-github svg{width:20px;height:20px;fill:currentColor}.btn-logout{padding:.5rem 1rem;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.btn-logout:hover{background:var(--color-surface-hover);color:var(--color-text);border-color:var(--color-border-focus)}.divider{display:flex;align-items:center;margin:1.5rem 0}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid var(--color-border)}.divider span{padding:0 1rem;color:var(--color-text-secondary);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.error-message{display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem;background:var(--color-error-bg);color:var(--color-error);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);margin-bottom:1.25rem;font-size:.875rem}.feed-warnings{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.feed-warning{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#f59e0b1a;color:#d97706;border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-md);font-size:.875rem}.feed-warning.rate-limit{background:#ef44441a;color:var(--color-error);border-color:#ef444433}.auth-link{text-align:center;margin-top:1.5rem;color:var(--color-text-muted);font-size:.9rem}.auth-link a{color:var(--color-primary);text-decoration:none;font-weight:500;transition:color var(--transition)}.auth-link a:hover{color:var(--color-primary-hover);text-decoration:underline}.loading{display:flex;justify-content:center;align-items:center;height:100vh;color:var(--color-text-muted);font-size:.95rem}.feed-container{max-width:800px;margin:0 auto;padding:1.5rem;min-height:100vh}.feed-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0 1.5rem;border-bottom:1px solid var(--color-border);margin-bottom:2rem}.feed-header h1{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}.logo-icon{flex-shrink:0}.user-info{display:flex;align-items:center;gap:1rem}.user-info span{color:var(--color-text-muted);font-size:.875rem}.nav-links{display:flex;gap:1rem}.nav-link{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;font-weight:500;padding:.5rem .75rem;border-radius:var(--radius-sm);transition:all var(--transition)}.nav-link:hover{color:var(--color-text);background:var(--color-surface-hover)}.feed-empty{text-align:center;padding:4rem 2rem;color:var(--color-text-muted)}.feed-empty p{margin:.5rem 0;font-size:1rem}.feed-empty a{color:var(--color-primary);text-decoration:none}.feed-empty a:hover{text-decoration:underline}.container{max-width:600px;margin:0 auto;padding:2rem;min-height:100vh;display:flex;flex-direction:column;justify-content:center}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-lg)}.card h1{margin:0 0 .5rem;font-size:1.5rem;font-weight:600}.card .subtitle{color:var(--color-text-muted);margin:0 0 1.5rem;font-size:.9rem}.keyword-form{margin-bottom:1.5rem}.input-group{display:flex;gap:.75rem}.input-group input{flex:1;padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.95rem;background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition)}.input-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f626}.input-group button{padding:.75rem 1.25rem;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;cursor:pointer;transition:background var(--transition)}.input-group button:hover:not(:disabled){background:var(--color-primary-hover)}.input-group button:disabled{opacity:.5;cursor:not-allowed}.keywords-list{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.keyword-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.9rem}.keyword-value{color:var(--color-text)}.delete-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;color:var(--color-text-muted);border:none;border-radius:50%;font-size:1rem;line-height:1;cursor:pointer;transition:all var(--transition)}.delete-button:hover{background:var(--color-error-bg);color:var(--color-error)}.empty-message{color:var(--color-text-muted);font-size:.9rem;text-align:center;padding:1rem}.actions{display:flex;gap:.75rem;justify-content:flex-end}.actions button.secondary{padding:.625rem 1rem;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.actions button.secondary:hover{background:var(--color-surface-hover);color:var(--color-text);border-color:var(--color-border-focus)}.feed-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.feed-controls h2{margin:0;font-size:1.25rem;font-weight:600}.feed-controls-right{display:flex;align-items:center;gap:1rem}.sort-control{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.sort-control label{color:var(--color-text-muted);white-space:nowrap}.sort-select{padding:.375rem .75rem;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;cursor:pointer;transition:all var(--transition)}.sort-select:hover{border-color:var(--color-border-focus)}.sort-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #3b82f626}.min-score-input{width:60px;padding:.375rem .5rem;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;text-align:center;transition:all var(--transition)}.min-score-input:hover{border-color:var(--color-border-focus)}.min-score-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #3b82f626}.btn-refresh{padding:.5rem 1rem;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.btn-refresh:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-border-focus)}.btn-refresh:disabled{opacity:.5;cursor:not-allowed}.articles-list{display:flex;flex-direction:column;gap:1rem}.article-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem 1.25rem;transition:border-color var(--transition)}.article-card:hover{border-color:var(--color-border-focus)}.article-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.5rem}.article-title{color:var(--color-text);text-decoration:none;font-size:1rem;font-weight:500;line-height:1.4}.article-title:hover{color:var(--color-primary)}.article-domain{color:var(--color-text-secondary);font-size:.8rem}.article-meta{display:flex;flex-wrap:wrap;gap:.75rem;color:var(--color-text-muted);font-size:.8rem}.article-score{color:var(--color-primary);font-weight:500}.article-keywords{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.keyword-tag{padding:.25rem .5rem;background:#3b82f61f;color:var(--color-primary);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}.tag-tag{padding:.25rem .5rem;background:#22c55e1f;color:var(--color-success);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}.sidebar-tag-item{display:flex;align-items:center;gap:.25rem}.tag-indicator{color:var(--color-success);font-weight:600}.sidebar-tags{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.source-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;letter-spacing:.02em;flex-shrink:0}.source-badge-hn{background:#f60;color:#fff}.source-badge-qiita{background:#55c500;color:#fff}.source-badge-zenn{background:#3ea8ff;color:#fff}.source-badge-newsapi{background:#e74c3c;color:#fff}.source-badge-default{background:var(--color-text-secondary);color:#fff}.source-badge-sm{padding:.0625rem .375rem;font-size:.6rem}.feed-loading{text-align:center;padding:3rem;color:var(--color-text-muted)}.feed-info{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border);color:var(--color-text-secondary);font-size:.8rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:.5rem}.feed-hint{position:relative;display:inline-flex;align-items:center}.hint-icon{color:var(--color-text-secondary);cursor:help;opacity:.7;transition:opacity var(--transition)}.hint-icon:hover{opacity:1}.hint-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:.5rem .75rem;background:var(--color-text);color:var(--color-surface);font-size:.75rem;line-height:1.4;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;visibility:hidden;transition:opacity var(--transition),visibility var(--transition);pointer-events:none;z-index:100;margin-bottom:.5rem;box-shadow:var(--shadow-md)}.hint-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--color-text)}.feed-hint:hover .hint-tooltip{opacity:1;visibility:visible}.article-actions{display:flex;gap:.5rem;margin-top:.75rem}.btn-action{padding:.375rem .75rem;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.btn-action:hover{background:var(--color-surface-hover);color:var(--color-text);border-color:var(--color-border-focus)}.btn-action-label{display:flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;transition:all var(--transition)}.btn-action-label:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text);border-color:var(--color-border-focus)}.btn-action-label:disabled{cursor:default}.btn-action-label.btn-read{color:var(--color-success);border-color:var(--color-success);background:var(--color-success-bg)}.btn-action-label.btn-saved{color:var(--color-favorite);border-color:var(--color-favorite);background:var(--color-favorite-bg)}.btn-action-label.btn-saved:hover{background:#f43f5e33}.feed-layout{min-height:100vh;position:relative}.feed-layout .feed-container{max-width:800px;margin:0 auto}.sidebar-toggle-label{font-size:.75rem;font-weight:500;writing-mode:vertical-rl;text-orientation:mixed}.keyword-sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;transform:translate(-100%);transition:transform var(--transition);z-index:99;box-shadow:var(--shadow-md)}.keyword-sidebar.open{transform:translate(0)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1rem;border-bottom:1px solid var(--color-border)}.sidebar-header.sidebar-section-header{border-bottom:none;padding-bottom:.5rem}.sidebar-header h3{margin:0;font-size:1rem;font-weight:600}.keyword-count{font-size:.75rem;color:var(--color-text-muted);background:var(--color-bg);padding:.25rem .5rem;border-radius:var(--radius-sm)}.sidebar-error{padding:.75rem 1rem;background:var(--color-error-bg);color:var(--color-error);font-size:.8rem;border-bottom:1px solid rgba(239,68,68,.2)}.sidebar-form{display:flex;gap:.5rem;padding:1rem;border-bottom:1px solid var(--color-border)}.sidebar-form input{flex:1;padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition)}.sidebar-form input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #3b82f626}.sidebar-form button{padding:.5rem .75rem;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:background var(--transition)}.sidebar-form button:hover:not(:disabled){background:var(--color-primary-hover)}.sidebar-form button:disabled{opacity:.5;cursor:not-allowed}.sidebar-keywords{flex:1;overflow-y:auto;padding:.5rem}.sidebar-loading,.sidebar-empty{padding:1rem;text-align:center;color:var(--color-text-muted);font-size:.875rem}.sidebar-keyword-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;margin-bottom:.25rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;transition:border-color var(--transition)}.sidebar-keyword-item:hover{border-color:var(--color-border-focus)}.sidebar-keyword-item span{color:var(--color-text);word-break:break-all}.sidebar-delete-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;color:var(--color-text-muted);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);flex-shrink:0}.sidebar-delete-btn:hover{background:var(--color-error-bg);color:var(--color-error)}.sidebar-read-btn{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);flex-shrink:0}.sidebar-read-btn:hover,.sidebar-read-btn.read{background:#22c55e1a;border-color:#22c55e;color:#22c55e}.sidebar-read-btn.read:hover{background:#64748b1a;border-color:var(--color-border);color:var(--color-text-muted)}.sidebar-toggle-left{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:100;display:flex;align-items:center;gap:.25rem;padding:.75rem .5rem;background:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-border);border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm)}.sidebar-toggle-left:hover{background:var(--color-surface-hover);color:var(--color-text)}.left-sidebar-open .sidebar-toggle-left{left:280px}.sidebar-toggle-right{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:100;display:flex;align-items:center;gap:.25rem;padding:.75rem .5rem;background:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-border);border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md);cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm)}.sidebar-toggle-right:hover{background:var(--color-surface-hover);color:var(--color-text)}.right-sidebar-open .sidebar-toggle-right{right:var(--favorites-sidebar-width, 360px)}.favorites-sidebar{position:fixed;right:0;top:0;width:360px;min-width:280px;max-width:600px;height:100vh;background:var(--color-surface);border-left:1px solid var(--color-border);display:flex;flex-direction:column;transform:translate(100%);transition:transform var(--transition);z-index:99;box-shadow:var(--shadow-md)}.favorites-sidebar.open{transform:translate(0)}.favorites-sidebar.resizing{transition:none;-webkit-user-select:none;user-select:none}.sidebar-resize-handle{position:absolute;left:0;top:0;width:6px;height:100%;cursor:ew-resize;background:transparent;transition:background var(--transition);z-index:10}.sidebar-resize-handle:hover,.sidebar-resize-handle.dragging{background:var(--color-primary);opacity:.5}.sidebar-favorites{flex:1;overflow-y:auto;padding:.5rem}.sidebar-favorite-item{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;margin-bottom:.5rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--transition)}.sidebar-favorite-item:hover{border-color:var(--color-border-focus)}.sidebar-favorite-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.sidebar-favorite-header .article-main{flex:1;min-width:0}.sidebar-favorite-header .article-title{font-size:.875rem}.sidebar-favorite-header .article-domain{font-size:.7rem}.sidebar-favorite-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.sidebar-favorite-content .article-meta{font-size:.7rem}.sidebar-favorite-read{display:inline-flex;align-items:center;gap:.25rem;color:var(--color-success);font-weight:500}.sidebar-sources{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.source-filter-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition)}.source-filter-item:hover{border-color:var(--color-border-focus);background:var(--color-surface-hover)}.source-filter-item.selected{border-color:var(--color-primary);background:#3b82f614}.source-hint{position:relative;display:inline-flex;align-items:center;flex-shrink:0;margin-left:auto;padding:.25rem}.source-hint .hint-icon{color:var(--color-text-secondary);cursor:help;opacity:.5;transition:opacity var(--transition)}.source-hint:hover .hint-icon{opacity:1}.hint-tooltip-right{left:auto;right:0;transform:none;white-space:normal;width:200px;text-align:left}.hint-tooltip-right:after{left:auto;right:8px;transform:none}.source-hint:hover .hint-tooltip{opacity:1;visibility:visible}.source-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--color-primary)}.source-filter-info{display:flex;flex-direction:column;gap:.125rem}.source-filter-label{font-size:.9rem;font-weight:500;color:var(--color-text)}.source-filter-description{font-size:.75rem;color:var(--color-text-muted)}.sidebar-warning{padding:.75rem 1rem;margin:.75rem;background:#f59e0b1a;color:#b45309;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-sm);font-size:.8rem;text-align:center}.sidebar-description{margin:0 1rem .75rem;font-size:.75rem;color:var(--color-text-muted);line-height:1.4}@media(max-width:768px){.keyword-sidebar,.favorites-sidebar{width:100%;max-width:300px}.left-sidebar-open .sidebar-toggle-left{left:300px}.right-sidebar-open .sidebar-toggle-right{right:300px}}