:root {
    color-scheme: light;
    --ink: #20241f;
    --muted: #73796f;
    --line: #e8e9e3;
    --paper: #fff;
    --canvas: #f7f8f4;
    --green: #245b45;
    --green-dark: #174b37;
    --mint: #e7f1eb;
    --orange: #e4a76d;
    --danger: #a22f32;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(232, 239, 226, .72), transparent 38rem),
        var(--canvas);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }

.topbar {
    height: 78px;
    border-bottom: 1px solid rgba(33, 48, 35, .08);
    background: rgba(255, 255, 255, .76);
}

.topbar-inner, .footer-inner {
    width: min(1120px, calc(100% - 48px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 730; letter-spacing: -.055em; }

.brand-mark {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: var(--green);
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -.08em;
    box-shadow: 0 5px 13px rgba(36, 91, 69, .17);
}

.private-badge { display: inline-flex; align-items: center; gap: 8px; color: #667067; font-size: 12px; font-weight: 650; }
.private-badge span { color: #70a184; font-size: 9px; }
.account-actions { display: flex; align-items: center; gap: 20px; }
.account-name { color: #687168; font-size: 13px; }
.account-actions form { margin: 0; }
.logout-button, .clear-button { border: 0; background: transparent; color: var(--green); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; }
.logout-button:hover, .clear-button:hover { color: var(--green-dark); text-decoration: underline; }
.install-app-button { border: 1px solid rgba(36, 91, 69, .24); border-radius: 8px; padding: 8px 11px; background: #fff; color: var(--green); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.install-app-button:hover { border-color: var(--green); background: var(--mint); }
.install-app-button[hidden] { display: none; }

main { flex: 1; }
.page-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.hero-section { padding: 77px 0 49px; text-align: center; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 17px; color: #687468; font-size: 10px; font-weight: 760; letter-spacing: .15em; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #78a488; box-shadow: 0 0 0 4px rgba(120, 164, 136, .14); }
h1 { margin: 0; font-size: clamp(42px, 6.3vw, 67px); font-weight: 650; letter-spacing: -.07em; line-height: 1.035; }
h1 span { color: var(--green); }
.hero-copy { margin: 17px auto 31px; color: var(--muted); font-size: 16px; line-height: 1.6; }

.converter-card {
    width: min(630px, 100%);
    margin: 0 auto;
    padding: 13px;
    border: 1px solid rgba(33, 48, 35, .09);
    border-radius: 19px;
    background: var(--paper);
    box-shadow: 0 20px 60px rgba(39, 50, 36, .075), 0 2px 7px rgba(39, 50, 36, .035);
    text-align: left;
}

.drop-zone {
    position: relative;
    min-height: 211px;
    padding: 28px 18px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c9d3c9;
    border-radius: 12px;
    background: #fbfcf9;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.drop-zone:hover, .drop-zone.is-dragging { border-color: #73967d; background: #f3f8f2; }
.drop-zone.is-dragging { transform: scale(.995); }
.drop-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.drop-zone:focus-within { outline: 3px solid rgba(36, 91, 69, .22); outline-offset: 3px; }
.upload-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 12px; color: var(--green); }
.upload-icon svg { width: 44px; height: 44px; }
.drop-title { font-size: 15px; font-weight: 690; }
.drop-subtitle { margin-top: 6px; color: var(--muted); font-size: 12px; }
.browse-link { color: var(--green); font-weight: 680; text-decoration: underline; text-underline-offset: 2px; }

.selection-panel { padding: 16px 8px 3px; }
.selection-heading { display: flex; align-items: center; justify-content: space-between; color: #555f55; font-size: 12px; font-weight: 680; }
.clear-button { padding: 4px 0; font-size: 12px; }
.file-list { display: grid; gap: 7px; margin: 10px 0 3px; padding: 0; list-style: none; }
.file-row { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #eef0ea; border-radius: 9px; background: #fff; }
.file-type { width: 32px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #9e4944; background: #fbefed; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.file-details { min-width: 0; flex: 1; }
.file-name { overflow: hidden; color: #343b34; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.file-size { margin-top: 2px; color: #92988e; font-size: 10px; }
.file-check { color: #5a8768; font-size: 15px; }
.selection-warning { margin: 7px 2px 0; color: var(--danger); font-size: 12px; }

.conversion-modes { margin: 16px 1px 0; padding: 0; border: 0; }
.conversion-modes legend { margin-bottom: 8px; color: #59645b; font-size: 11px; font-weight: 700; }
.mode-option { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 7px; padding: 10px 11px; border: 1px solid #e8ebe5; border-radius: 9px; background: #fff; cursor: pointer; }
.mode-option-selected { border-color: #b9cebe; background: #f7faf6; }
.mode-option input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--green); }
.mode-copy { display: grid; gap: 3px; }
.mode-copy strong { color: #344139; font-size: 12px; font-weight: 680; }
.mode-copy small { color: #7e877e; font-size: 10px; line-height: 1.45; }

.primary-button {
    min-height: 49px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--green);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 680;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.convert-button { width: 100%; margin-top: 14px; padding-left: 17px; }
.primary-button:not(:disabled):hover { background: var(--green-dark); box-shadow: 0 7px 15px rgba(36, 91, 69, .18); transform: translateY(-1px); }
.primary-button:disabled { color: #9ca39b; background: #eceee9; cursor: not-allowed; }
.button-arrow { font-size: 20px; font-weight: 400; line-height: 1; }
.primary-button.is-loading { opacity: .78; cursor: progress; }
.card-guidance { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 6px 2px; color: #7c847b; }
.guidance-icon { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #aeb7ad; border-radius: 50%; font-size: 9px; font-family: Georgia, serif; font-weight: 700; }
.card-guidance p { margin: 0; font-size: 10px; }
.card-guidance p span { padding: 0 4px; color: #b2b8ae; }
.privacy-note { margin: 15px 0 0; color: #7b847a; font-size: 11px; }
.privacy-note span { margin-right: 5px; color: #66836b; }
.conversion-note { max-width: 630px; margin: -35px auto 50px; color: #858c82; font-size: 10px; line-height: 1.5; }

.upload-errors { margin: 3px 4px 12px; }
.validation-message { color: var(--danger); font-size: 12px; }
.validation-message:empty { display: none; }
.validation-message ul { margin: 0; padding-left: 19px; }

.steps-section { display: flex; align-items: flex-start; justify-content: center; gap: 16px; padding: 29px 0 62px; border-top: 1px solid rgba(41, 57, 41, .08); }
.step-card { width: 190px; text-align: center; }
.step-number { display: block; margin-bottom: 11px; color: #a1a79d; font-size: 9px; font-weight: 720; letter-spacing: .11em; }
.step-icon { height: 35px; display: grid; place-items: center; margin: 0 auto 10px; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.pdf-icon { width: 29px; border: 1px solid #e6beb8; border-radius: 5px; color: #a35248; background: #fff9f7; }
.convert-icon { width: 35px; border: 1px solid #c5d7ca; border-radius: 50%; color: var(--green); background: #f3f8f2; font-size: 19px; font-weight: 400; }
.odt-icon { width: 29px; border: 1px solid #b6c9dd; border-radius: 5px; color: #527092; background: #f6f9fc; }
.step-card h2 { margin: 0; font-size: 12px; font-weight: 690; letter-spacing: -.01em; }
.step-card p { max-width: 182px; margin: 6px auto 0; color: #838a80; font-size: 10px; line-height: 1.5; }
.step-connector { padding-top: 71px; color: #bbc2b8; font-size: 11px; letter-spacing: 2px; }

.login-shell { width: min(450px, calc(100% - 40px)); margin: 80px auto; }
.login-card { padding: 36px; border: 1px solid rgba(33, 48, 35, .09); border-radius: 17px; background: var(--paper); box-shadow: 0 18px 50px rgba(39, 50, 36, .07); }
.login-card .brand-mark { margin-bottom: 24px; }
.login-card .eyebrow { justify-content: flex-start; margin-bottom: 10px; }
.login-card h1 { font-size: 34px; letter-spacing: -.055em; }
.login-intro { margin: 9px 0 26px; color: var(--muted); font-size: 13px; }
.field-group { display: grid; gap: 7px; margin-bottom: 17px; }
.field-group label { color: #485149; font-size: 12px; font-weight: 650; }
.field-group .form-control { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #dfe3dc; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 13px; }
.field-group .form-control:focus { border-color: #73967d; outline: 3px solid rgba(36, 91, 69, .12); }
.remember-row { display: flex; align-items: center; gap: 8px; margin: 3px 0 20px; color: #687168; font-size: 12px; }
.remember-row input { accent-color: var(--green); }
.w-100 { width: 100%; }

.site-footer { min-height: 58px; border-top: 1px solid rgba(41, 57, 41, .08); color: #899087; }
.footer-inner { font-size: 10px; }
.footer-dot { padding: 0 3px; color: #b6bcb2; }

@media (max-width: 600px) {
    .topbar { height: 66px; }
    .topbar-inner, .footer-inner, .page-shell { width: min(100% - 32px, 1120px); }
    .account-name { display: none; }
    .hero-section { padding: 58px 0 39px; }
    .hero-copy { max-width: 320px; margin-top: 13px; font-size: 14px; }
    .conversion-note { margin-top: -25px; }
    .converter-card { padding: 9px; border-radius: 15px; }
    .drop-zone { min-height: 190px; }
    .card-guidance { align-items: flex-start; justify-content: flex-start; padding: 13px 4px 3px; }
    .card-guidance p { line-height: 1.5; }
    .steps-section { gap: 5px; padding: 26px 0 42px; }
    .step-card { width: 30%; }
    .step-card p { font-size: 9px; }
    .step-card h2 { font-size: 10px; }
    .step-connector { padding-top: 69px; font-size: 8px; letter-spacing: 0; }
    .footer-inner { gap: 12px; font-size: 9px; }
    .footer-inner span:last-child { text-align: right; }
    .login-shell { margin: 52px auto; }
    .login-card { padding: 26px; }
}