:root { --ink:#17243d; --muted:#60708a; --blue:#175cd3; --line:#dce4ef; --page:#f3f6fa; }
html,body { margin:0; background:var(--page); color:var(--ink); font-family:Inter,"Segoe UI",sans-serif; }
.app-shell { min-height:100vh; background:radial-gradient(circle at 50% 12%,#fff 0,#f7f9fc 32rem,var(--page) 60rem); }
.topbar { height:76px; padding:0 clamp(24px,6vw,88px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); box-sizing:border-box; }
.brand { gap:12px; } .brand-mark { width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:#fff;background:var(--blue);box-shadow:0 7px 18px rgba(23,92,211,.25); }
.brand-copy { display:flex;flex-direction:column;line-height:1.05; } .brand-copy span:first-child { font-weight:800;letter-spacing:.07em;font-size:15px; } .brand-copy span:last-child { color:var(--muted);font-size:13px;margin-top:5px; }
.local-badge { display:flex;align-items:center;gap:7px;color:#166534;background:#ecfdf3;border:1px solid #bbf7d0;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:650; } .local-badge vaadin-icon { width:15px; }
.account-actions { gap:6px; }
.archive-download { display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:6px;color:var(--blue);text-decoration:none;font-weight:650;background:#eef4ff; }
.archive-download vaadin-icon { width:16px;height:16px; }
.structured-view { max-width:1400px;margin:0 auto;padding:28px clamp(18px,4vw,54px);box-sizing:border-box; }
.structured-warning { display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #f2c94c;border-radius:10px;background:#fffbeb;color:#713f12; }
.structured-warning p { margin:0; } .structured-warning vaadin-icon { flex:0 0 auto; }
.structured-modified { color:var(--muted);font-size:13px; }
.structured-page { width:100%;padding-top:22px; }
.create-invoice-view { width:min(1120px,calc(100% - 36px));margin:0 auto;padding:34px 0 64px;gap:22px;box-sizing:border-box; }
.create-intro h1 { margin:16px 0 6px;letter-spacing:-.025em; }.create-intro p { margin:0;color:var(--muted); }
.form-section { width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px!important;box-shadow:0 8px 30px rgba(29,48,78,.06);box-sizing:border-box; }
.form-section h2 { margin:0 0 18px;font-size:21px; }.form-section vaadin-grid { border-radius:10px;overflow:hidden; }
.invoice-totals { gap:14px; }.total-box { background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px!important;flex:1; }
.total-caption { color:var(--muted);font-size:13px; }.total-value { font-size:22px;font-weight:800;margin-top:5px; }.invoice-totals .total-box:last-child { border-color:#9bbcf2;background:#f3f7ff; }
.content { width:min(760px,calc(100% - 32px));margin:0 auto;padding:72px 0 56px;flex:1;box-sizing:border-box; }
.hero { text-align:center;align-items:center; } .eyebrow { color:var(--blue);background:#eaf2ff;border-radius:999px;padding:6px 12px;font-weight:750;letter-spacing:.1em;font-size:12px; }
.hero h1 { font-size:clamp(34px,6vw,52px);line-height:1.06;letter-spacing:-.035em;margin:20px 0 16px; } .hero .intro { max-width:640px;color:var(--muted);font-size:18px;line-height:1.6;margin:0; }
.upload-card { margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 60px rgba(29,48,78,.1);padding:clamp(24px,5vw,42px); }
.title-row { gap:16px; } .step-number { flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#fff;background:var(--ink);font-weight:800; }
.card-title>span { display:block;font-size:20px;font-weight:750; } .card-title p { color:var(--muted);margin:6px 0 0;line-height:1.5; }
.invoice-upload { display:block;margin-top:28px;padding:34px 20px;border:1.5px dashed #aab9ce;border-radius:14px;background:#f8fafd;text-align:center; }
.file-state { display:block;color:var(--muted);text-align:center;font-size:14px;margin:15px 0 20px; } .file-state.file-ready { color:#166534;font-weight:650; }
.convert-button { width:100%; } .privacy-note { gap:9px;color:var(--muted);background:#f7f9fc;border-radius:10px;padding:12px 14px;font-size:12px;line-height:1.45;margin-top:22px; }
.privacy-note vaadin-icon { color:#166534;width:18px;flex:0 0 auto; } .footer { display:flex;justify-content:center;gap:9px;padding:22px;color:#7b899e;font-size:12px;border-top:1px solid var(--line); }
.pdf-dialog iframe { border:0;min-height:65vh; } .download-link { display:inline-flex;flex-direction:row-reverse;align-items:center;gap:8px;color:white;background:var(--blue);text-decoration:none;border-radius:6px;padding:9px 16px;font-weight:650; }
@media(max-width:760px){.topbar{height:auto;min-height:68px;padding:10px 18px;gap:10px}.local-badge{display:none}.account-actions{flex-wrap:wrap;justify-content:flex-end}.brand-copy{display:none}.content{padding-top:46px}.hero .intro{font-size:16px}.upload-card{margin-top:32px}.footer span:nth-child(n+2){display:none}.invoice-totals{flex-direction:column}.form-section{padding:18px!important}}