*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#fff;--bg-secondary:#f6f8fa;--bg-tertiary:#eaeef2;--bg-inset:#f6f8fa;--bg-emphasis:#0969da;--bg-emphasis-hover:#0860ca;--text-primary:#1f2328;--text-secondary:#656d76;--text-tertiary:#8b949e;--text-link:#0969da;--text-inverse:#fff;--border-default:#d1d9e0;--border-muted:#e1e4e8;--border-emphasis:#0969da;--color-success:#1a7f37;--color-success-bg:#dafbe1;--color-danger:#cf222e;--color-danger-bg:#ffebe9;--color-warning:#9a6700;--color-warning-bg:#fff8c5;--color-attention:#bf8700;--color-attention-bg:#fff8c5;--color-done:#8250df;--color-done-bg:#fbefff;--gradient-primary:linear-gradient(180deg, #f0f6fc 0%, #c9d1d9 100%);--gradient-success:linear-gradient(180deg, #1a7f37 0%, #116329 100%);--gradient-danger:linear-gradient(180deg, #cf222e 0%, #a40e26 100%);--gradient-attention:linear-gradient(180deg, #bf8700 0%, #9a6700 100%);--shadow-small:0 1px 0 #1f23280a;--shadow-medium:0 3px 6px #8c959f26;--shadow-large:0 8px 24px #8c959f33;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--space-3xl:48px}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background:var(--bg-secondary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}.container{max-width:1280px;padding:0 var(--space-xl);margin:0 auto}.header{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-muted);background:#fffffff2;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;height:60px;display:flex}.logo{align-items:center;gap:var(--space-sm);color:var(--text-primary);font-size:1.1rem;font-weight:600;display:flex}.logo svg{color:var(--text-primary)}.logo-sub{color:var(--text-tertiary);font-size:.75rem;font-weight:400}.tab-nav{gap:var(--space-xs);padding:var(--space-sm);background:var(--bg-secondary);border:1px solid var(--border-muted);border-radius:var(--radius-md);margin:var(--space-xl) 0;width:fit-content;display:flex}.tab-btn{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;background:0 0;border:1px solid #0000;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.tab-btn:hover{color:var(--text-primary);background:var(--bg-primary)}.tab-btn.active{color:var(--text-primary);background:var(--bg-primary);border-color:var(--border-default);box-shadow:var(--shadow-small)}.hero{text-align:center;padding:var(--space-3xl) 0 var(--space-2xl)}.hero h1{margin-bottom:var(--space-md)}.hero h1 .gradient-text{color:var(--text-link)}.hero-subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem}.input-section{gap:var(--space-xl);margin-bottom:var(--space-xl);grid-template-columns:1fr 1fr;display:grid}@media (width<=768px){.input-section{grid-template-columns:1fr}}.input-panel{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-xl)}.input-panel:hover{box-shadow:var(--shadow-small)}.input-panel-header{align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.input-panel-icon{background:var(--bg-secondary);border:1px solid var(--border-muted);border-radius:var(--radius-md);width:40px;height:40px;color:var(--text-secondary);justify-content:center;align-items:center;display:flex}.input-panel-icon svg{color:var(--text-secondary)}.input-panel-title{font-size:1rem;font-weight:600}.input-panel-desc{color:var(--text-tertiary);font-size:.8rem}.textarea-wrapper{position:relative}.textarea-field{width:100%;min-height:200px;padding:var(--space-md);background:var(--bg-inset);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);resize:vertical;outline:none;font-size:.875rem;line-height:1.6;transition:border-color .2s,box-shadow .2s}.textarea-field::placeholder{color:var(--text-tertiary)}.textarea-field:focus{border-color:var(--border-emphasis);box-shadow:0 0 0 3px #0969da26}.char-count{bottom:var(--space-sm);right:var(--space-md);color:var(--text-tertiary);font-size:.75rem;font-family:var(--font-mono);position:absolute}.or-divider{align-items:center;gap:var(--space-sm);margin:var(--space-lg) 0;color:var(--text-tertiary);font-size:.8rem;display:flex}.or-divider:before,.or-divider:after{content:"";background:var(--border-muted);flex:1;height:1px}.upload-zone{padding:var(--space-xl);border:1px dashed var(--border-default);border-radius:var(--radius-md);cursor:pointer;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;font-size:.875rem;transition:all .2s;display:flex}.upload-zone:hover,.upload-zone.dragover{border-color:var(--border-emphasis);color:var(--text-link);background:#0969da0d}.upload-zone-icon{margin-bottom:var(--space-sm);color:var(--text-tertiary)}.upload-zone input[type=file]{display:none}.analyze-wrapper{text-align:center;margin-bottom:var(--space-3xl)}.analyze-btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-family:var(--font-body);color:var(--text-inverse);background:var(--bg-emphasis);border-radius:var(--radius-md);cursor:pointer;border:1px solid #1b1f2426;font-size:.875rem;font-weight:500;transition:background-color .2s;display:inline-flex}.analyze-btn:hover:not(:disabled){background:var(--bg-emphasis-hover)}.analyze-btn:disabled{opacity:.5;cursor:not-allowed}.analyze-btn-hint{margin-top:var(--space-sm);color:var(--text-tertiary);font-size:.8rem;display:block}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{padding:var(--space-md) var(--space-lg);background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);text-align:center;margin-bottom:var(--space-xl);font-size:.875rem}.results-section{padding-bottom:var(--space-3xl)}.results-header{text-align:center;margin-bottom:var(--space-2xl)}.results-header h2{justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.score-section{margin-bottom:var(--space-2xl);justify-content:center;display:flex}.score-card{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-2xl);text-align:center;min-width:320px}.gauge-container{width:180px;height:180px;margin:0 auto var(--space-lg);position:relative}.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}.gauge-bg{fill:none;stroke:var(--bg-tertiary);stroke-width:10px}.gauge-fill{fill:none;stroke-width:10px;stroke-linecap:round;transition:stroke-dashoffset 1.5s,stroke .5s}.gauge-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.gauge-score{font-family:var(--font-mono);font-size:3rem;font-weight:700;line-height:1}.gauge-label{color:var(--text-tertiary);margin-top:var(--space-xs);font-size:.8rem}.score-verdict{margin-bottom:var(--space-sm);font-size:1.1rem;font-weight:600}.score-feedback{color:var(--text-secondary);max-width:400px;margin:0 auto;font-size:.9rem}.keywords-section{margin-bottom:var(--space-2xl)}.keywords-grid{gap:var(--space-xl);grid-template-columns:1fr 1fr;display:grid}@media (width<=768px){.keywords-grid{grid-template-columns:1fr}}.keyword-panel{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-lg)}.keyword-panel-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);font-size:.9rem;font-weight:600;display:flex}.keyword-count-badge{border-radius:var(--radius-full);font-size:.75rem;font-weight:500;font-family:var(--font-mono);padding:2px 8px}.keyword-count-badge.matched{background:var(--color-success-bg);color:var(--color-success)}.keyword-count-badge.missing{background:var(--color-danger-bg);color:var(--color-danger)}.keywords-list{gap:var(--space-sm);flex-wrap:wrap;display:flex}.keyword-tag{border-radius:var(--radius-full);font-size:.8rem;font-family:var(--font-mono);align-items:center;gap:4px;padding:4px 10px;display:inline-flex}.keyword-tag.matched{background:var(--color-success-bg);color:var(--color-success)}.keyword-tag.missing{background:var(--color-danger-bg);color:var(--color-danger)}.bullets-section{margin-top:var(--space-2xl)}.bullets-section-title{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xl);font-size:1.1rem;display:flex}.bullet-card{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:var(--space-lg)}.bullet-card-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;font-size:.8rem;font-weight:500;display:flex}.bullet-number{background:var(--bg-secondary);border:1px solid var(--border-muted);border-radius:var(--radius-full);width:24px;height:24px;font-size:.75rem;font-weight:600;font-family:var(--font-mono);justify-content:center;align-items:center;display:flex}.bullet-comparison{gap:var(--space-lg);grid-template-columns:1fr 1fr;display:grid}@media (width<=768px){.bullet-comparison{grid-template-columns:1fr}}.bullet-side{padding:var(--space-md);border-radius:var(--radius-sm);position:relative}.bullet-side.original{background:var(--color-danger-bg);border:1px solid #cf222e33}.bullet-side.improved{background:var(--color-success-bg);border:1px solid #1a7f3733}.bullet-side-label{text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-sm);align-items:center;gap:4px;font-size:.7rem;font-weight:600;display:flex}.bullet-side.original .bullet-side-label{color:var(--color-danger)}.bullet-side.improved .bullet-side-label{color:var(--color-success)}.bullet-text{color:var(--text-primary);font-size:.875rem;line-height:1.6}.bullet-explanation{align-items:flex-start;gap:var(--space-sm);margin-top:var(--space-md);padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.8rem;line-height:1.5;display:flex}.copy-btn{top:var(--space-sm);right:var(--space-sm);background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;font-family:var(--font-body);cursor:pointer;align-items:center;gap:4px;padding:4px 8px;transition:all .2s;display:flex;position:absolute}.copy-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.roast-input-section{padding-bottom:var(--space-3xl)}.roast-header{text-align:center;padding:var(--space-2xl) 0}.roast-icon{margin-bottom:var(--space-md);color:var(--color-danger)}.roast-header h2{margin-bottom:var(--space-sm)}.roast-subtitle{color:var(--text-secondary);font-size:1rem}.roast-input-panel{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);max-width:700px;padding:var(--space-xl);margin:0 auto}.roast-input{min-height:250px}.roast-btn{justify-content:center;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-md) var(--space-xl);margin-top:var(--space-lg);font-family:var(--font-body);color:var(--text-inverse);background:var(--color-danger);border-radius:var(--radius-md);cursor:pointer;border:1px solid #1b1f2426;font-size:.875rem;font-weight:500;transition:background-color .2s;display:flex}.roast-btn:hover:not(:disabled){background:#b51924}.roast-btn:disabled{opacity:.5;cursor:not-allowed}.roast-hint{margin-top:var(--space-sm);color:var(--text-tertiary);text-align:center;font-size:.8rem}.spinner-icon{animation:.7s linear infinite spin}.roast-results-section{max-width:800px;padding-bottom:var(--space-3xl);margin:0 auto}.roast-results-header{text-align:center;margin-bottom:var(--space-2xl)}.roast-results-header h2{justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.roast-score-card{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-2xl);text-align:center;margin-bottom:var(--space-xl)}.roast-score-display{margin-bottom:var(--space-lg)}.roast-score-number{font-family:var(--font-mono);font-size:5rem;font-weight:700;line-height:1}.roast-score-label{color:var(--text-tertiary);margin-top:var(--space-xs);font-size:.9rem}.roast-overall{color:var(--text-secondary);max-width:500px;margin:0 auto;font-size:1.1rem;font-style:italic;line-height:1.6}.roast-grades-grid{gap:var(--space-md);margin-bottom:var(--space-2xl);grid-template-columns:repeat(4,1fr);display:grid}@media (width<=768px){.roast-grades-grid{grid-template-columns:repeat(2,1fr)}}.grade-card{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-lg);text-align:center}.grade-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:var(--space-sm);font-size:.75rem;font-weight:600}.grade-value{font-family:var(--font-mono);margin-bottom:var(--space-sm);font-size:2rem;font-weight:700;line-height:1}.grade-bar{background:var(--bg-tertiary);border-radius:var(--radius-full);height:4px;overflow:hidden}.grade-fill{border-radius:var(--radius-full);height:100%;transition:width 1s}.roast-issues-section{margin-bottom:var(--space-2xl)}.roast-issues-section h3{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xl);font-size:1.1rem;display:flex}.roast-issue-card{background:var(--bg-primary);border:1px solid var(--border-muted);border-left:3px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:var(--space-lg)}.roast-issue-card.severity-critical{border-left-color:var(--color-danger);background:#cf222e08}.roast-issue-card.severity-warning{border-left-color:var(--color-warning);background:#9a670008}.roast-issue-card.severity-nitpick{border-left-color:var(--bg-emphasis);background:#0969da08}.roast-issue-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.roast-issue-icon{color:var(--text-secondary)}.roast-issue-category{font-size:.9rem;font-weight:600}.roast-severity-badge{text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius-full);margin-left:auto;padding:2px 8px;font-size:.7rem;font-weight:500}.roast-severity-badge.severity-critical{background:var(--color-danger-bg);color:var(--color-danger)}.roast-severity-badge.severity-warning{background:var(--color-warning-bg);color:var(--color-warning)}.roast-severity-badge.severity-nitpick{background:var(--color-success-bg);color:var(--color-success)}.roast-problem{color:var(--text-primary);margin-bottom:var(--space-sm);font-size:.9rem}.roast-quote{color:var(--text-secondary);margin-bottom:var(--space-md);padding-left:var(--space-md);border-left:2px solid var(--border-muted);font-size:1rem;font-style:italic}.roast-fix{align-items:flex-start;gap:var(--space-sm);color:var(--color-success);padding:var(--space-sm) var(--space-md);background:var(--color-success-bg);border-radius:var(--radius-sm);font-size:.85rem;display:flex}.quick-wins-section{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:var(--space-2xl)}.quick-wins-section h3{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);color:var(--color-attention);font-size:1rem;display:flex}.quick-wins-intro{color:var(--text-tertiary);margin-bottom:var(--space-md);font-size:.85rem}.quick-wins-list{margin:0;padding:0;list-style:none}.quick-wins-list li{align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) 0;color:var(--text-primary);border-bottom:1px solid var(--border-muted);font-size:.875rem;display:flex}.quick-wins-list li:last-child{border-bottom:none}.quick-wins-list li svg{color:var(--color-success);flex-shrink:0;margin-top:2px}.roast-comparison{gap:var(--space-lg);grid-template-columns:1fr 1fr;display:grid}@media (width<=768px){.roast-comparison{grid-template-columns:1fr}}.comparison-card{background:var(--bg-primary);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--space-lg)}.comparison-card.highlight-green{border-left:3px solid var(--color-success)}.comparison-card.highlight-red{border-left:3px solid var(--color-danger)}.comparison-card h4{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);font-size:.9rem;display:flex}.comparison-card.highlight-green h4{color:var(--color-success)}.comparison-card.highlight-red h4{color:var(--color-danger)}.comparison-card p{color:var(--text-secondary);font-size:.875rem;line-height:1.6}.footer{text-align:center;padding:var(--space-2xl) 0;color:var(--text-tertiary);border-top:1px solid var(--border-muted);background:var(--bg-primary);font-size:.8rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:.4s both fadeInUp}.stagger-1{animation-delay:0s}.stagger-2{animation-delay:50ms}.stagger-3{animation-delay:.1s}.stagger-4{animation-delay:.15s}.stagger-5{animation-delay:.2s}