:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#152b3a;background:#edf3f5;--ink:#152b3a;--muted:#5c707c;--line:#cbd9df;--surface:#fff;--accent:#176b73;--accent-strong:#0e4f5b;--soft:#e4f1f1;--focus:#d7eef0}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:linear-gradient(135deg,#edf3f5 0%,#f7faf9 58%,#e8f0f1 100%);color:var(--ink)}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.app-shell{width:min(1080px,calc(100% - 32px));margin:0 auto;padding:28px 0 40px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:4px 0 24px;border-bottom:1px solid var(--line)}
.kicker{margin:0 0 8px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.08em}.topbar h1{margin:0;font-size:30px;line-height:1.12;letter-spacing:0}.subtitle{margin:8px 0 0;color:var(--muted);font-size:14px}.local-badge{border:1px solid #a9c7cb;background:#f8ffff;color:var(--accent-strong);border-radius:999px;padding:7px 10px;font-size:12px;white-space:nowrap}
.workspace{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:16px;margin-top:20px}.upload-column,.config-column,.results-section,.action-bar{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
.section-heading,.action-bar,.eye-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.section-heading h2,.action-bar h2{margin:0;font-size:16px;line-height:1.3}.section-heading span,.eye-heading span{color:var(--muted);font-size:12px}.upload-zone{display:flex;min-height:210px;margin-top:14px;padding:22px;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:1.5px dashed #91b4b9;border-radius:8px;background:#f7fbfb;text-align:center;color:var(--muted)}.upload-zone:hover{border-color:var(--accent);background:#f0f8f8}.upload-zone input{position:absolute;width:1px;height:1px;opacity:0}.upload-zone strong{color:var(--ink);font-size:16px}.upload-zone span:last-child{font-size:12px}.upload-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--soft);color:var(--accent);font-size:25px;font-weight:400}.preview-wrap{display:flex;align-items:center;gap:10px;margin-top:14px}.preview-wrap img{display:block;width:92px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.settings-form{display:grid;gap:10px;margin-top:14px}.settings-form label{display:grid;gap:5px;color:var(--muted);font-size:12px}.settings-form input,.settings-form select{width:100%;border:1px solid var(--line);border-radius:6px;padding:9px 10px;color:var(--ink);background:#fbfdfd}.microcopy{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.action-bar{display:flex;align-items:center;margin-top:16px;background:#123047;color:#fff;border-color:#123047}.action-bar h2{color:#fff}.action-bar p{margin:4px 0 0;color:#c1d3d9;font-size:12px}.primary-button,.secondary-button,.quiet-button{border:1px solid var(--line);border-radius:6px;padding:9px 13px;font-weight:700;line-height:1.25}.primary-button{background:var(--accent);color:#fff;border-color:var(--accent)}.primary-button:hover{background:var(--accent-strong)}.action-bar .primary-button{background:#f1c76b;color:#172c36;border-color:#f1c76b;white-space:nowrap}.secondary-button{background:var(--soft);color:var(--accent-strong);border-color:#abd0d1}.quiet-button{background:#fff;color:var(--muted)}.quiet-button:hover{border-color:#8da6ae;color:var(--ink)}button:disabled{cursor:not-allowed;opacity:.5}
.results-section{margin-top:16px}.eyes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.eye-panel{border:1px solid var(--line);border-radius:8px;padding:14px;background:#fbfdfd}.eye-heading h3{margin:0;font-size:15px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px;margin-top:12px}.field{display:grid;gap:4px}.field label{font-size:11px;color:var(--muted)}.field input{width:100%;min-width:0;border:1px solid var(--line);border-radius:5px;padding:8px;background:#fff;color:var(--ink)}.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.privacy-note{margin-top:14px;color:var(--muted);font-size:12px}.privacy-note summary{cursor:pointer;color:var(--accent-strong);font-weight:700}.privacy-note p{line-height:1.6;max-width:75ch}
@media(max-width:720px){.app-shell{width:min(100% - 20px,560px);padding-top:18px}.topbar{gap:12px}.topbar h1{font-size:25px}.workspace{grid-template-columns:1fr}.upload-zone{min-height:160px}.action-bar{align-items:stretch;flex-direction:column;gap:12px}.action-bar .primary-button{width:100%}}
@media(max-width:460px){.app-shell{width:calc(100% - 16px)}.topbar{display:block}.local-badge{display:inline-block;margin-top:12px}.upload-column,.config-column,.results-section,.action-bar{padding:13px}.section-heading{align-items:flex-start;flex-direction:column;gap:3px}.field-grid{grid-template-columns:1fr}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-actions .primary-button{grid-column:1/-1}.result-actions button{min-width:0;padding:9px 7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}