:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: #16211b;
    background: #f3f6f4;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1440px; margin: 0 auto; padding: 40px 28px 80px; }
header {
    display: flex; align-items: end; justify-content: space-between; gap: 24px;
    margin-bottom: 24px;
}
h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1; margin: 6px 0 0; letter-spacing: -.04em; }
.eyebrow { color: #46725d; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
form { display: grid; gap: 6px; min-width: 210px; }
label { font-size: 13px; color: #65736b; }
select {
    border: 1px solid #ccd6d0; border-radius: 12px; padding: 12px 14px;
    background: white; font: inherit;
}
.table-shell { overflow: auto; border-radius: 18px; background: white; box-shadow: 0 12px 40px rgba(32,61,46,.08); }
table { border-collapse: collapse; width: 100%; min-width: 900px; }
th, td { padding: 14px 16px; border-bottom: 1px solid #e8eeea; text-align: left; }
th { position: sticky; top: 0; background: #e8f2ec; color: #395447; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.bank { font-weight: 750; }
.rate { display: inline-block; background: #d9f4e3; color: #135d35; border-radius: 999px; padding: 5px 9px; font-weight: 800; }
.note { color: #68736d; font-size: 13px; }
.empty { background: white; border: 1px dashed #aebdb5; border-radius: 18px; padding: 32px; color: #58675f; }
@media (max-width: 720px) {
    main { padding: 24px 14px; }
    header { align-items: stretch; flex-direction: column; }
}


.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:42px; }
.brand { color:#16211b; font-weight:850; text-decoration:none; }
.nav-actions { display:flex; align-items:center; gap:18px; }
.nav-actions a { color:#315c48; text-decoration:none; font-weight:700; }
.nav-actions form, .inline-form { display:flex; min-width:0; }
.current-user { color:#65736b; }
button, input { font:inherit; }
button { border:1px solid #cbd7d0; border-radius:10px; padding:9px 12px; background:#fff; cursor:pointer; }
button:hover { border-color:#5e8b75; }
button.primary { border:0; background:#176b45; color:#fff; font-weight:800; padding:12px 18px; }
.link-button { border:0; padding:0; color:#315c48; background:transparent; font-weight:700; }
input {
    width:100%; border:1px solid #ccd6d0; border-radius:12px; padding:12px 14px;
    background:#fff; color:#16211b;
}
.stack { display:grid; gap:16px; }
.stack label, .user-create-grid label { display:grid; gap:7px; color:#53645b; }
.auth-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(145deg,#edf4ef,#dcebe2); }
.auth-shell { width:min(460px,100%); padding:20px; }
.auth-card { background:#fff; border-radius:24px; padding:36px; box-shadow:0 24px 70px rgba(25,65,44,.16); }
.auth-card h1 { font-size:38px; margin-bottom:12px; }
.muted { color:#66766d; margin-bottom:28px; }
.alert { border-radius:12px; padding:12px 14px; margin:16px 0; }
.alert.error { background:#fee8e7; color:#8a211c; }
.alert.success { background:#def4e7; color:#155d38; }
.panel { background:#fff; border-radius:18px; padding:24px; margin-bottom:24px; box-shadow:0 12px 40px rgba(32,61,46,.08); }
.panel h2 { margin-top:0; }
.user-create-grid { display:grid; grid-template-columns:1fr 1.4fr 1fr 1.4fr auto; align-items:end; gap:14px; }
.inline-form { gap:8px; }
.status { display:inline-block; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:800; }
.status.active { background:#d9f4e3; color:#135d35; }
.status.blocked { background:#fee8e7; color:#8a211c; }
@media (max-width: 1000px) {
    .user-create-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px) {
    .topbar, .nav-actions { align-items:flex-start; flex-direction:column; }
    .auth-card { padding:26px 20px; }
    .user-create-grid { grid-template-columns:1fr; }
}


.active-link { color:#16211b !important; border-bottom:2px solid #176b45; }
.nowrap { white-space:nowrap; }
.rate-cell { color:#135d35; font-weight:850; white-space:nowrap; }
.matrix-table th:nth-child(n+4):nth-child(-n+7),
.matrix-table td:nth-child(n+4):nth-child(-n+7) { text-align:right; }
.calculator-form { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:14px; align-items:end; }
.calculator-form label { display:grid; gap:7px; }
.offer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
.offer-card { background:#fff; border-radius:18px; padding:22px; box-shadow:0 12px 40px rgba(32,61,46,.08); }
.offer-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.offer-head h2 { margin:5px 0 18px; font-size:22px; }
.offer-rate { font-size:30px; line-height:1; font-weight:900; color:#135d35; white-space:nowrap; }
.offer-card dl { margin:0; display:grid; gap:10px; }
.offer-card dl div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid #edf1ee; padding-bottom:8px; }
.offer-card dt { color:#6b786f; }
.offer-card dd { margin:0; text-align:right; font-weight:750; }
.login-copy { font-size:24px; font-weight:850; color:#16211b; margin-top:0; }
@media (max-width:720px) {
    .calculator-form { grid-template-columns:1fr; }
}


.wide-main { max-width:none; padding-left:20px; padding-right:20px; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.matrix-filters { display:flex; align-items:end; gap:12px; }
.matrix-filters label { min-width:180px; }
.history-matrix-shell { max-height:calc(100vh - 230px); border-radius:12px; }
.history-matrix { width:max-content; min-width:100%; font-variant-numeric:tabular-nums; }
.history-matrix th, .history-matrix td { padding:9px 11px; }
.history-matrix thead tr:first-child th { top:0; z-index:5; }
.history-matrix thead tr:nth-child(2) th { top:37px; z-index:5; }
.history-matrix .date-group { text-align:center; border-left:2px solid #aebfb5; }
.history-matrix tbody td:nth-child(4n + 5) { border-left:2px solid #d5dfd9; }
.sticky-col { position:sticky; background:#fff; z-index:3; }
thead .sticky-col { background:#e8f2ec; z-index:8 !important; }
.col-bank { left:0; min-width:160px; max-width:160px; }
.col-product { left:160px; min-width:190px; max-width:190px; box-shadow:5px 0 8px rgba(25,50,38,.06); }
.history-matrix tbody tr:hover td { background:#f5faf7; }
.history-matrix tbody tr:hover .sticky-col { background:#f5faf7; }
@media (max-width:720px) {
    .page-heading, .matrix-filters { align-items:stretch; flex-direction:column; }
    .history-matrix-shell { max-height:none; }
}


.history-filters { display:grid; grid-template-columns:170px 140px 155px 155px auto; gap:10px; align-items:end; }
.history-filters label { display:grid; gap:6px; }
@media (max-width:1100px) {
    .history-filters { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
    .history-filters { grid-template-columns:1fr; }
}


.history-matrix tbody tr.bank-separator td {
    border-top:4px solid #8da99a;
}
.history-matrix tbody tr.bank-separator:first-child td {
    border-top:0;
}
.history-matrix tbody tr.bank-separator .bank {
    color:#103f2b;
    font-size:14px;
}
