* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: #d5dee8;
    color: #1c2833;
    font-family: Tahoma, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.35;
}
button, input, select { font: inherit; color: inherit; }
a { color: #1d4f86; }
.shell { min-height: 100%; padding: 8px; }
.titlebar {
    background: #e7eef6;
    border: 1px solid #8ea3b8;
    border-bottom: 0;
    padding: 4px 8px;
    font-weight: 700;
    color: #1c3d5a;
}
.tabs {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    background: #d5dee8;
    border: 1px solid #8ea3b8;
    border-bottom: 0;
    padding: 6px 6px 0;
}
.tabs a {
    display: inline-block;
    text-decoration: none;
    color: #24384c;
    background: #e4ebf3;
    border: 1px solid #8ea3b8;
    border-bottom: 0;
    padding: 4px 14px;
    margin-bottom: -1px;
}
.tabs a.active {
    background: #f7f9fb;
    font-weight: 700;
    color: #16324d;
    padding-bottom: 5px;
}
.logout-form { margin: 0 0 4px auto; }
.account-form { max-width: 320px; }
.workspace {
    background: #f7f9fb;
    border: 1px solid #8ea3b8;
    padding: 8px;
}
.flash {
    border: 1px solid #b7c6d6;
    background: #fff;
    padding: 6px 8px;
    margin-bottom: 8px;
}
.flash.ok { background: #eef6ee; border-color: #9cba9c; color: #1e5a28; }
.flash.error { background: #fdeeee; border-color: #d7a3a3; color: #8a2a2a; }
.records-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}
.panel {
    border: 1px solid #9aafc3;
    background: #f7f9fb;
    padding: 8px;
}
.block { margin-bottom: 8px; }
fieldset {
    border: 1px solid #9aafc3;
    background: #fff;
    margin: 0 0 8px;
    padding: 8px 8px 6px;
}
legend {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: #1d4f86;
}
.field { margin-bottom: 6px; }
.field label, .muted-label {
    display: block;
    margin-bottom: 2px;
    color: #24384c;
    font-size: 12px;
}
input[type="text"], input[type="date"], select {
    width: 100%;
    height: 24px;
    border: 1px solid #7f9db9;
    background: #fff;
    border-radius: 0;
    padding: 2px 6px;
}
input[readonly] { background: #eef2f6; color: #1c2833; }
input:focus, select:focus { outline: 1px solid #3d6ea5; border-color: #3d6ea5; }
.invoice-box {
    border: 1px solid #6f8eae;
    background: #f4f8fc;
    padding: 6px;
    margin: 6px 0;
}
.invoice-box label { font-weight: 700; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn, button.btn {
    display: inline-block;
    border: 1px solid #7d94ab;
    background: #e7eef6;
    color: #1c2833;
    border-radius: 0;
    padding: 3px 10px;
    text-decoration: none;
    cursor: pointer;
    line-height: 16px;
}
.btn:hover, button.btn:hover { background: #dce7f3; }
.btn-primary { background: #d6e4f5; border-color: #5d7ea3; }
.btn-primary:hover { background: #c9dbf1; }
.btn-small { padding: 1px 6px; font-size: 12px; }
.btn.btn-cancel, button.btn.btn-cancel { background: #e6e6e6; border-color: #8a8a8a; color: #333; }
.btn.btn-cancel:hover, button.btn.btn-cancel:hover { background: #dadada; }
.btn.btn-danger, button.btn.btn-danger { background: #c75050; border-color: #9d3a3a; color: #fff; }
.btn.btn-danger:hover, button.btn.btn-danger:hover { background: #b84545; }
.btn[disabled] { color: #8a97a3; background: #eef2f6; cursor: default; }
.diff {
    border: 1px solid #b7c6d6;
    background: #f4f7fa;
    color: #24384c;
    padding: 6px 8px;
    min-height: 28px;
}
.diff.missing { background: #fdeeee; border-color: #e2b4b4; color: #8a2a2a; }
.diff.excess { background: #fff6df; border-color: #e2d0a0; color: #7a5a12; }
.diff.balanced { background: #eef6ee; border-color: #b7d0b7; color: #1e5a28; }
.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
.panel-head h2, .workspace h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1d4f86;
}
.grand { font-size: 12px; color: #24384c; text-align: right; }
.grand strong { display: block; font-size: 14px; }
.filters, .quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
.filters-gap { margin-top: 8px; }
.filters .field { margin: 0; min-width: 140px; }
.quick .btn.active { background: #d6e4f5; border-color: #5d7ea3; font-weight: 700; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; }
table.table-invoices { min-width: 520px; }
th, td {
    border: 1px solid #c5d0dc;
    padding: 4px 6px;
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}
th:first-child, td:first-child, td.col-status, td.col-actions, th.left, td.left { text-align: left; }
th { background: #e6eef6; color: #24384c; font-size: 12px; font-weight: 700; }
tbody tr:hover td { background: #f4f8fc; }
.row-edit td { background: #eef4fb; }
.col-status.missing { background: #fdeeee; color: #8a2a2a; }
.col-status.excess { background: #fff6df; color: #7a5a12; }
.col-status.balanced { background: #eef6ee; color: #1e5a28; }
.status-note { display: block; font-weight: 400; white-space: normal; max-width: 240px; }
.inline { display: inline; }
.help { color: #4d6070; font-size: 12px; margin: 0 0 8px; }
.summary-table { min-width: 0; max-width: 520px; margin-bottom: 8px; }
.summary-table td:last-child { font-weight: 700; }
.channel-table { min-width: 420px; }
.channel-table th, .channel-table td { white-space: normal; }
.empty { color: #4d6070; }
.status-line { margin: 8px 0; }
#formWarn:empty, #invoiceWarn:empty { display: none; }
.modal-back {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 40, 51, 0.28);
    z-index: 30;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.modal-back.is-open {
    display: flex;
    animation: modal-in 0.12s linear;
}
@keyframes modal-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal {
    position: relative;
    width: 340px;
    max-width: 100%;
    background: #f7f9fb;
    border: 1px solid #8ea3b8;
    padding: 10px 12px 12px;
}
.modal h3 { margin: 0 24px 8px 0; font-size: 14px; color: #1d4f86; }
.modal p { margin: 0 0 3px; }
.modal .actions { margin-top: 10px; }
.modal-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 20px;
    padding: 0;
    border: 1px solid #7d94ab;
    background: #e7eef6;
    cursor: pointer;
    line-height: 16px;
}
.delete-back { z-index: 80; }
.delete-back.is-open { animation: none; }
.delete-modal {
    width: 360px;
    background: #f7f7f7;
    border: 1px solid #9a9a9a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    padding: 14px 16px 12px;
}
.delete-modal h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1c2833;
}
.delete-modal p { margin: 0 0 6px; color: #1c2833; }
.delete-modal .actions { margin-top: 14px; justify-content: flex-end; }
.toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 90;
    max-width: calc(100% - 24px);
    background: #f7f9fb;
    border: 1px solid #8ea3b8;
    box-shadow: 0 2px 6px rgba(28, 40, 51, 0.18);
    padding: 8px 12px;
    text-align: center;
}
.toast.ok { background: #f4faf4; border-color: #9cba9c; color: #1e5a28; }
.toast.error { background: #fdf6f6; border-color: #d7a3a3; color: #8a2a2a; }
.form-grid { display: grid; grid-template-columns: 220px 140px auto; gap: 8px; align-items: end; }
.form-grid .field { margin: 0; }
@media (max-width: 900px) {
    .records-layout { grid-template-columns: 1fr; }
    .shell { padding: 4px; }
    .grand { text-align: left; }
    .form-grid { grid-template-columns: 1fr; }
}
body.login-page {
    margin: 0;
    min-height: 100vh;
    height: auto;
    background: #e6e6e6;
}
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
}
.login-card {
    width: 100%;
    max-width: 340px;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #cfd6df;
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(28, 40, 51, 0.08);
}
.login-card h1 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #1c2833;
}
.login-card .field { margin-bottom: 12px; }
.login-card .field label { margin-bottom: 4px; font-size: 12px; }
.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    border: 1px solid #bfc7d1;
    border-radius: 4px;
    padding: 0 10px;
    background: #fff;
}
.login-error {
    margin: 0 0 12px;
    padding: 6px 8px;
    border: 1px solid #e0b4b4;
    background: #fdf6f6;
    color: #8a2a2a;
    font-size: 12px;
}
button.btn.btn-login {
    width: 100%;
    height: 38px;
    border-radius: 4px;
    padding: 0 10px;
    line-height: 36px;
    background: #2d6dad;
    border-color: #24598c;
    color: #fff;
}
button.btn.btn-login:hover { background: #265f98; }