:root { font-family: 'Segoe UI', Arial, sans-serif; color: #24363d; background: #f3f6f7; font-size: 15px; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: white; border-bottom: 1px solid #d3dfe2; padding: 20px 32px; display: flex; align-items: center; gap: 22px; }
header strong { color: #21654e; font-size: 24px; }
header span { font-size: 14px; color: #52636a; }
main { max-width: 490px; margin: 64px auto; padding: 0 20px; }
.notice { border-left: 3px solid #97701a; background: #fff6df; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
section { background: white; padding: 28px; border: 1px solid #d3dfe2; border-radius: 6px; }
h1 { font-size: 24px; margin: 0 0 10px; } h2 { font-size: 20px; color: #21654e; }
p { line-height: 1.6; } .intro { color: #52636a; margin: 0 0 24px; }
label { display: block; font-weight: 600; margin: 16px 0 7px; }
input { width: 100%; padding: 11px; border: 1px solid #91a5ad; border-radius: 4px; font: inherit; }
button { width: 100%; padding: 12px; background: #21654e; color: white; border: 0; border-radius: 4px; font: inherit; font-weight: 600; margin-top: 24px; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; } button:hover:not(:disabled) { background: #184d3b; }
:focus-visible { outline: 3px solid #2779ae; outline-offset: 3px; }
dialog { width: min(1450px,96vw); max-height: 92vh; overflow: auto; border: 1px solid #91a5ad; border-radius: 8px; padding: 24px; color: inherit; }
dialog::backdrop { background: #172b3a99; }
.invoice-link { width: auto; padding: 0; margin: 0; background: transparent; color: #21654e; text-align: left; text-decoration: underline; }
.invoice-link:hover:not(:disabled) { background: #eaf0f2; }
td:first-child { white-space: nowrap; }
footer { color: #52636a; line-height: 1.6; margin-top: 20px; font-size: 13px; }
#status { margin-bottom: 0; } #status:empty { display: none; } #status.error { color: #a12a25; }
dl { display: grid; grid-template-columns: 85px 1fr; gap: 12px; } dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
main.signed-in { max-width: 1600px; margin-top: 24px; }
.signed-in #title, .signed-in .intro, .signed-in #account > h2, .signed-in #account > p { display: none; }
.signed-in #account { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.signed-in #logout { width: auto; margin: 0 0 0 auto; }
.signed-in #import-area { flex-basis: 100%; }
#invoice-area { margin-top: 16px; padding: 20px; }
.list-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.list-heading button { width: auto; margin: 0; }
.filters { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 16px; }
.filters input, .filters select { display: block; margin-top: 8px; width: 100%; padding: 10px; font: inherit; border: 1px solid #91a5ad; border-radius: 4px; background: white; }
.table-scroll { overflow: auto; max-height: 65vh; }
#panel-nav { display: flex; gap: 12px; margin-bottom: 16px; }
#panel-nav button { width: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 10px; border-bottom: 1px solid #d3dfe2; text-align: left; }
th { background: #eaf0f2; position: sticky; top: 0; white-space: nowrap; }
td:nth-child(2), td:nth-child(3) { font-weight: 600; }
td:nth-child(4), td:nth-child(5) { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: #f7f9fa; }
@media(max-width: 800px) { .filters { grid-template-columns: 1fr 1fr; } }
@media(max-width: 500px) { header { padding: 16px 20px; gap: 12px; } header span { max-width: 150px; } main { margin: 28px auto; } section { padding: 22px; } }