:root {
    --bg: #f7f8fa;
    --fg: #1d2433;
    --muted: #6b7280;
    --accent: #1f6feb;
    --border: #e4e7eb;
    --error: #b42318;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background: var(--bg);
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--border);
}
.topnav .brand a { font-weight: 600; color: var(--fg); text-decoration: none; }
.topnav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.topnav ul a { color: var(--muted); text-decoration: none; padding: 0.25rem 0.5rem; }
.topnav ul a.active, .topnav ul a:hover { color: var(--accent); }
.topnav .nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.topnav .icon-button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem; border-radius: 6px;
    background: transparent; border: 1px solid var(--border);
    color: var(--fg); font-size: 0.875rem; line-height: 1; cursor: pointer; text-decoration: none;
    font-family: inherit;
}
.topnav .icon-button:hover { background: var(--bg); color: var(--accent); border-color: var(--accent); }
.topnav .icon-button[data-active] { background: var(--bg); color: var(--accent); border-color: var(--accent); }
.topnav .icon-button svg { display: block; }
.topnav .account-email { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flash {
    padding: 0.625rem 0.875rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9375rem;
}
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash-warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

.password-reveal {
    display: flex; align-items: center; gap: 0.75rem; padding: 1rem;
    background: #f9fafb; border: 1px solid var(--border); border-radius: 6px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.password-reveal code {
    flex: 1; font-size: 1.0625rem; user-select: all; word-break: break-all;
}

main { padding: 2rem; max-width: 1100px; margin: 0 auto; }

h1 { margin-top: 0; }
.muted { color: var(--muted); }

.auth-card {
    max-width: 360px; margin: 6rem auto; padding: 2rem;
    background: white; border: 1px solid var(--border); border-radius: 8px;
}
.auth-card h1 { text-align: center; margin: 0 0 1.5rem; }
.auth-card form label { display: block; margin-bottom: 1rem; font-size: 0.875rem; color: var(--muted); }
.auth-card form input {
    display: block; width: 100%; padding: 0.5rem 0.625rem; margin-top: 0.25rem;
    border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;
}
.auth-card form button {
    width: 100%; padding: 0.625rem; background: var(--accent); color: white;
    border: 0; border-radius: 4px; font-size: 1rem; cursor: pointer;
}
.auth-card .error {
    background: #fef2f2; color: var(--error); padding: 0.5rem 0.75rem;
    border-radius: 4px; margin-bottom: 1rem; font-size: 0.875rem;
}

.page-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0; }

.btn-primary, .btn-secondary {
    display: inline-block; padding: 0.5rem 1rem; border-radius: 4px;
    font-size: 0.9375rem; text-decoration: none; cursor: pointer; border: 0;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { opacity: 0.92; }
.btn-secondary {
    background: transparent; color: var(--fg); border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg); }

.data-table {
    width: 100%; border-collapse: collapse; background: white;
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.data-table th, .data-table td {
    padding: 0.625rem 0.875rem; text-align: left; border-bottom: 1px solid var(--border);
}
.data-table th {
    background: #f9fafb; font-size: 0.8125rem; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--muted); font-weight: 600;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table a { color: var(--accent); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.row-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.row-actions a, .row-actions button { font-size: 0.875rem; }

.inline-form { display: inline; }
.link-button {
    background: none; border: 0; color: var(--error); cursor: pointer;
    padding: 0; font: inherit; text-decoration: underline;
}

.empty-state {
    background: white; border: 1px dashed var(--border); border-radius: 6px;
    padding: 2rem; text-align: center; color: var(--muted);
}
.empty-state a { color: var(--accent); }

.form-stack { max-width: 560px; display: flex; flex-direction: column; gap: 1rem; }
.form-stack label {
    display: block; font-size: 0.875rem; color: var(--muted);
}
.form-stack input, .form-stack textarea, .form-stack select {
    display: block; width: 100%; padding: 0.5rem 0.625rem; margin-top: 0.25rem;
    border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;
    background: white; color: var(--fg); font-family: inherit;
}
.form-stack textarea { resize: vertical; min-height: 4rem; }
.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.error-inline { color: var(--error); font-size: 0.8125rem; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
.form-stack h3 { margin: 1rem 0 0.25rem; font-size: 1rem; color: var(--muted); font-weight: 600; }

.status {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.status-draft { background: #e5e7eb; color: #4b5563; }
.status-sent  { background: #dbeafe; color: #1e40af; }
.status-paid  { background: #d1fae5; color: #065f46; }
.status-void  { background: #fee2e2; color: #991b1b; }

.invoice-form { display: flex; flex-direction: column; gap: 1rem; max-width: 900px; }
.invoice-form .form-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
.invoice-form label { display: block; font-size: 0.875rem; color: var(--muted); }
.invoice-form input, .invoice-form select, .invoice-form textarea {
    display: block; width: 100%; padding: 0.5rem 0.625rem; margin-top: 0.25rem;
    border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;
    background: white; color: var(--fg); font-family: inherit;
}
.invoice-form h3 { margin: 1rem 0 0.5rem; }

.line-items-table input, .line-items-table select {
    padding: 0.375rem 0.5rem; border: 1px solid var(--border); border-radius: 4px;
    font-size: 0.9375rem; width: 100%; background: white; font-family: inherit;
}
.line-items-table .qty-input, .line-items-table .price-input { text-align: right; }
.line-items-table th:nth-child(1), .line-items-table td:nth-child(1) { width: 12rem; }
.line-items-table th:nth-child(3), .line-items-table td:nth-child(3),
.line-items-table th:nth-child(4), .line-items-table td:nth-child(4) { width: 7rem; }
.line-items-table th:nth-child(5), .line-items-table td:nth-child(5) { width: 5rem; text-align: right; }

.invoice-section { margin-top: 2rem; }
.invoice-section h3 { margin-bottom: 0.5rem; }
.header-actions { display: flex; gap: 0.5rem; }
.status-buttons { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.data-table tfoot td { padding: 0.75rem 0.875rem; background: #f9fafb; }