:root{--color-primary:#36c;--color-accent:#f90;--color-background:#fff;--color-surface:#f8f9fa;--color-border:#e1e4e8;--color-text:#24292e;--color-text-secondary:#586069;--color-error:#d73a49;--color-warning:#fff3cd;--color-warning-border:#ffe69c;--color-warning-text:#856404;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius:8px;--shadow:0 1px 3px #0000001f, 0 1px 2px #0000003d;--shadow-lg:0 4px 6px #0000001a, 0 2px 4px #0000000f}*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-background);color:var(--color-text);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6}#root{min-height:100vh}.screen{flex-direction:column;min-height:100vh;display:flex}.header{background:var(--color-primary);color:#fff;padding:var(--spacing-lg) var(--spacing-xl);box-shadow:var(--shadow)}.header h1{margin:0;font-size:1.5rem;font-weight:600}.content{padding:var(--spacing-xl);flex:1;width:100%;max-width:800px;margin:0 auto}.loading-state,.error-state,.empty-state{padding:var(--spacing-xl);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:400px;display:flex}.spinner{border:4px solid var(--color-border);border-top-color:var(--color-primary);width:48px;height:48px;margin-bottom:var(--spacing-lg);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{color:var(--color-text-secondary);margin:0}.error-state{color:var(--color-error)}.error-icon{margin-bottom:var(--spacing-md);font-size:3rem}.error-state h2{margin:0 0 var(--spacing-sm) 0;color:var(--color-text)}.error-message,.empty-state p{color:var(--color-text-secondary);margin:0 0 var(--spacing-lg) 0}.warning-banner{background:var(--color-warning);border:1px solid var(--color-warning-border);color:var(--color-warning-text);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius);margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.warning-subtext{opacity:.8;font-size:.875rem}.article-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow)}.article-title{margin:0 0 var(--spacing-lg) 0;color:var(--color-text);font-size:1.75rem;font-weight:700;line-height:1.3}.article-extract{color:var(--color-text);margin-bottom:var(--spacing-lg);font-size:1rem;line-height:1.8}.article-link{color:var(--color-primary);align-items:center;font-weight:500;text-decoration:none;transition:color .2s;display:inline-flex}.article-link:hover{color:var(--color-accent);text-decoration:underline}.actions{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);flex-wrap:wrap;display:flex}.button-primary,.button-secondary{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius);cursor:pointer;border:none;font-family:inherit;font-size:1rem;font-weight:500;transition:all .2s}.button-primary{background:var(--color-primary);color:#fff}.button-primary:hover{box-shadow:var(--shadow-lg);background:#2952a3;transform:translateY(-1px)}.button-primary:active{box-shadow:var(--shadow);transform:translateY(0)}.button-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.button-secondary:hover{background:var(--color-border);border-color:var(--color-text-secondary)}.button-secondary:active{background:var(--color-surface)}.metadata{text-align:center;color:var(--color-text-secondary);padding-top:var(--spacing-md);border-top:1px solid var(--color-border);font-size:.875rem}@media (width<=640px){.header{padding:var(--spacing-md) var(--spacing-lg)}.header h1{font-size:1.25rem}.content,.article-card{padding:var(--spacing-lg)}.article-title{font-size:1.5rem}.actions{flex-direction:column}.button-primary,.button-secondary{width:100%}.warning-banner{flex-direction:column;align-items:flex-start}}
