:root{--bg: #f4f6fb;--text: #1b2733;--muted: #596d80;--panel: #ffffff;--panel-subtle: #f8fafc;--border: #dde3ed;--line: #dde3ed;--focus-ring: #3b82f6;--primary: #1f4f94;--primary-hover: #183f76;--ghost-border: #c9d4e5;--ghost-text: #24405d;color:var(--text);background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;min-width:320px;background:var(--bg);color:var(--text);line-height:1.45}button,input{font:inherit}#root{width:100%;min-height:100%;color:inherit}.app-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:48px 0 56px}.hero-panel{margin-bottom:18px;display:grid;gap:8px}.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);grid-template-areas:"dropzone panel" "result-panel result-panel";gap:14px}.dropzone{grid-area:dropzone}.panel{grid-area:panel}.result-panel{grid-area:result-panel;width:100%}.status-message{margin:14px 0 0;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ghost-text);padding:10px 12px;font-size:.95rem;box-shadow:0 2px 14px #0914200a}.eyebrow{margin:0;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700}h1,h2,p{margin:0}h1{max-width:760px;font-size:clamp(2rem,6vw,3rem);line-height:1.1}h2{font-size:1.1rem;line-height:1.3}p{color:var(--muted);line-height:1.65}.hero-copy{margin-top:4px;max-width:620px;font-size:1rem}.dropzone,.panel,.result-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:0 2px 14px #0914200a}.dropzone{display:grid;gap:10px}.dropzone-icon{width:28px;height:28px;color:var(--primary)}.file-button{position:relative;display:inline-flex;width:fit-content;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--ghost-border);border-radius:8px;padding:10px 14px;color:var(--ghost-text);font-weight:600;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.file-button:hover{border-color:var(--primary);color:var(--primary)}.file-button:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}.file-button input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;cursor:pointer}.selected-file{margin:6px 0 0;padding:10px 12px;border-radius:8px;border:1px dashed var(--line);background:var(--panel-subtle);color:var(--muted);font-size:.95rem;word-break:break-all}.button-row,.result-heading{display:flex;gap:8px;align-items:center;justify-content:space-between}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:120px;border-radius:8px;border:1px solid transparent;padding:10px 14px;font-weight:600;cursor:pointer;transition:filter .2s ease,transform .05s ease}.primary-button{background:var(--primary);color:#fff;border-color:var(--primary)}.primary-button:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.ghost-button{background:var(--panel);color:var(--ghost-text);border-color:var(--ghost-border)}.ghost-button:hover{border-color:var(--primary);color:var(--primary)}button:disabled,.file-button.is-disabled{cursor:not-allowed;opacity:.55}button:focus-visible,input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.result-heading{margin-bottom:10px}.result-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}.result-list li{border:1px solid var(--line);border-radius:8px;display:flex;justify-content:space-between;gap:10px;padding:10px 12px;font-size:.94rem}.result-list li span:first-child{min-width:0;overflow-wrap:anywhere}.result-list li span:last-child{color:var(--muted);white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 840px){.app-shell{width:calc(100% - 24px);padding-top:28px}.workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"dropzone" "panel" "result-panel"}.dropzone,.panel,.result-panel{width:100%}.button-row,.result-heading{flex-direction:column;align-items:stretch}.button-row button,.result-heading .primary-button{width:100%}}
