:root { color-scheme: light; --ink: #17263b; --muted: #667784; --paper: #f5f3ed; --line: #d9e1df; --green: #155f4b; --coral: #d65e48; --mint: #e8f2ed; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button { cursor: pointer; font: inherit; }
button:disabled { cursor: not-allowed; opacity: .48; }
.shell { width: min(100% - 36px, 1020px); margin: auto; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #dfe4dc; }
.brand-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }.brand-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; }.wordmark { color: var(--ink); font-size: 20px; font-weight: 850; letter-spacing: -1px; }.wordmark span { color: var(--coral); }
.local-badge,.eyebrow { color: #74877f; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.hero { max-width: 760px; padding: 50px 0 36px; }.hero .eyebrow { margin: 0 0 13px; }h1,h2,p { margin-top: 0; }h1 { margin-bottom: 18px; font: 500 clamp(44px, 8vw, 78px)/.97 Georgia, "Times New Roman", serif; letter-spacing: -.058em; }h1 em { color: var(--coral); font-weight: 500; }.intro { max-width: 640px; margin: 0; color: #536573; font-size: 18px; }
.workspace,.results,.limits { margin-bottom: 20px; padding: clamp(20px,4vw,32px); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 35px #1d3a2910; }.workspace-heading,.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }.workspace-heading .eyebrow,.result-heading .eyebrow { margin: 0 0 4px; }.workspace-heading h2,.result-heading h2,.limits h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }.limit { color: var(--muted); font-size: 13px; white-space: nowrap; }
.dropzone { position: relative; display: flex; min-height: 106px; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 17px; border: 1px dashed #9bb6a6; border-radius: 12px; background: #f7faf5; color: var(--green); cursor: pointer; text-align: center; }.dropzone strong { font-size: 16px; }.dropzone span { color: var(--muted); font-size: 13px; }.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.dropzone:focus-within { outline: 3px solid #9abd65; outline-offset: 3px; }.dropzone.dragging { border-color: var(--green); background: var(--mint); box-shadow: inset 0 0 0 2px #155f4b22; }
.mode-picker { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 18px; padding: 0; border: 0; }.mode-picker legend { margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 750; }.mode-picker label,.file-select { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 650; }.mode-picker input,.file-select input { accent-color: var(--green); }
.add-edit-controls { margin: 18px 0 12px; }.coordinate-warning { margin: 0 0 15px; padding: 12px 14px; border-radius: 9px; background: #fff3e4; color: #744b18; font-size: 13px; }.coordinate-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.coordinate-fields label { display: grid; gap: 5px; font-size: 13px; font-weight: 750; }.coordinate-fields label span { color: var(--muted); font-size: 11px; font-weight: 500; }.coordinate-fields input { width: 100%; min-height: 44px; padding: 8px 11px; border: 1px solid #c9d7d0; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }.coordinate-fields input:focus { outline: 3px solid #9abd65; outline-offset: 1px; }.coordinate-preview { min-height: 24px; margin: 12px 0; color: var(--muted); font-size: 13px; }.coordinate-preview.ready { color: var(--green); font-weight: 700; }.coordinate-preview.invalid { color: #a4382c; }.selection-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; color: var(--muted); font-size: 12px; }.add-edit-controls > .primary { margin-top: 16px; }.file-select { white-space: nowrap; }.existing .state-badge { color: #8b5912; }
.privacy-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #f5f8f4; color: #52655c; }.privacy-note p { margin: 0; font-size: 13px; }.privacy-note strong { color: var(--green); }.privacy-dot { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 6px; border-radius: 50%; background: #568c66; }
.input-footer { display: flex; align-items: center; justify-content: space-between; margin: 13px 1px 0; color: var(--muted); font-size: 12px; }.text-button { padding: 3px 7px; border: 0; background: transparent; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }.status { min-height: 25px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }.status.error { color: #a4382c; font-weight: 650; }.status.success { color: #17684d; }.status.warning { color: #8b5912; }
.primary,.download-one { min-height: 42px; padding: 0 15px; border: 1px solid var(--green); border-radius: 9px; background: var(--green); color: #fff; font-size: 13px; font-weight: 750; }.primary:hover:not(:disabled),.download-one:hover { background: #104b3b; }.results-note { margin: -6px 0 17px; color: var(--muted); font-size: 13px; }.file-results { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.file-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 2px; border-bottom: 1px solid #e8ece9; }.file-copy { min-width: 0; display: grid; gap: 3px; }.file-name { overflow-wrap: anywhere; font-size: 14px; }.file-meta { color: var(--muted); font-size: 12px; }.file-action { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 12px; }.state-badge { color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap; }.clear .state-badge { color: #576d7c; }.error .state-badge { color: #a4382c; }.download-one { min-height: 36px; padding: 0 12px; white-space: nowrap; }
.limits { background: #e8f2ed; box-shadow: none; }.limits .eyebrow { margin-bottom: 5px; }.limits h2 { margin-bottom: 11px; }.limits p:not(.eyebrow) { max-width: 820px; margin: 0 0 9px; color: #506b60; font-size: 14px; }.limits p:last-child { margin-bottom: 0; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 15px 0 35px; color: var(--muted); font-size: 12px; }.hidden { display: none !important; }
:focus-visible { outline: 3px solid #d59d41; outline-offset: 3px; }
.replacement-confirmation { margin-top: 18px; padding: 16px; border: 1px solid #c9d7d0; border-radius: 10px; background: #f5f8f4; }
.replacement-confirmation h3 { margin: 0 0 8px; font-size: 17px; }
.replacement-confirmation p { margin: 0 0 12px; font-size: 14px; overflow-wrap: anywhere; }
.replacement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 640px) { .shell { width: min(100% - 24px, 1020px); }.topbar { min-height: 64px; }.hero { padding: 38px 0 26px; }.intro { font-size: 16px; }.workspace-heading,.result-heading { align-items: flex-start; }.workspace-heading { flex-direction: column; gap: 7px; }.workspace,.results,.limits { border-radius: 12px; }.result-heading { flex-wrap: wrap; }.file-row { align-items: flex-start; flex-direction: column; gap: 9px; }.file-action { width: 100%; justify-content: space-between; }.limit { white-space: normal; }.coordinate-fields { grid-template-columns: 1fr; }.selection-tools { align-items: flex-start; }footer { flex-direction: column; } }