* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", sans-serif; color: #152840; background: #eff4f8; }
header { background: #102038; color: #fff; padding: 14px clamp(16px,4vw,56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
header strong { font-size: 21px; }
header strong span { color: #9edfff; }
header form { display: flex; gap: 12px; align-items: center; }
main { max-width: 1400px; margin: auto; padding: 20px clamp(12px,3vw,36px) 48px; }
h1,h2 { margin: 0 0 14px; line-height: 1.2; }
h2 { font-size: 18px; }
.panel { background: #fff; border: 1px solid #d7e2eb; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.login { max-width: 420px; margin: 8vh auto; }
.login label { margin-bottom: 14px; }
label { display: grid; gap: 4px; font-weight: 600; }
input,select,button { font: inherit; min-height: 38px; border-radius: 6px; }
input,select { width: 100%; border: 1px solid #aebfce; padding: 6px 9px; color: inherit; background: white; }
button { border: 1px solid transparent; padding: 6px 14px; font-weight: 600; color: white; background: #145697; cursor: pointer; }
button.secondary { color: #18364f; background: #e7eff6; }
button:focus-visible,a:focus-visible { outline: 3px solid #32a0e0; outline-offset: 2px; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.panel > .filters { margin-bottom: 12px; }
td .filters { min-width: 290px; }
td .filters select { width: auto; max-width: 100%; }
.metrics,.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.metrics strong { display: block; font-size: 28px; }
.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
td,th { padding: 9px; border-bottom: 1px solid #dce6ee; vertical-align: top; }
th { white-space: nowrap; background: #edf4fa; }
.chart-row { margin-bottom: 12px; }
.track { display: flex; height: 13px; margin: 4px 0; background: #eef3f7; border-radius: 5px; overflow: hidden; }
.bar { background: #145697; }
.inbound { background: #067959; }
.feedback { background: #8053a8; }
.sms { background: #b26d12; }
.whatsapp { background: #267e9d; }
.pager { display: flex; gap: 16px; padding-top: 12px; }
.notice { padding: 10px 14px; background: #e5f4ed; border-radius: 6px; }
.notice.error { background: #fde8e8; }
.notice ul { margin: 0; padding-left: 18px; }
.key { max-width: 680px; font-family: monospace; }

.dashboard-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #cbd9e4; margin-bottom: 18px; }
.dashboard-tabs a { color: #234161; padding: 8px 12px; text-decoration: none; border-bottom: 3px solid transparent; }
.dashboard-tabs a[aria-current] { border-bottom-color: #145697; color: #145697; font-weight: 700; }

.partner-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; align-items: start; }
.partner-form textarea { width: 100%; padding: 8px 9px; border: 1px solid #aebfce; border-radius: 6px; font: inherit; color: inherit; resize: vertical; }
.partner-form > div:last-child { grid-column: 1 / -1; }

.partner-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(225px, 290px); gap: 18px; align-items: start; }
.dashboard-content { min-width: 0; }
.partner-overview { position: sticky; top: 18px; }
.partner-balance { display: grid; gap: 5px; padding: 14px; border-radius: 9px; background: #eaf3fc; }
.partner-balance strong { font-size: 30px; line-height: 1.15; }
.credit-action { display: inline-block; width: fit-content; background: #145697; color: white; border-radius: 6px; padding: 7px 12px; text-decoration: none; font-weight: 600; }
.partner-overview dl { margin: 12px 0 0; }
.partner-overview dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3eaf2; }
.partner-overview dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.credit-payment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 22px; align-items: start; }
.credit-payment figure { margin: 0; text-align: center; }
.credit-payment img { display: block; width: 100%; height: auto; border-radius: 8px; }
.credit-payment input[name="reference"] { max-width: 260px; }
.credit-check { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.credit-check input { width: auto; min-height: 0; }
@media (max-width: 840px) {
    .partner-dashboard { grid-template-columns: 1fr; }
    .partner-overview { position: static; grid-row: 1; }
}
@media (max-width: 640px) {
    .credit-payment { grid-template-columns: 1fr; }
    .credit-payment figure { width: min(100%, 300px); margin-inline: auto; }
}

header form { flex-wrap: wrap; }
header .profile-link,
header .profile-link:visited {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: 8px;
    background: #fff;
    color: #102038;
    font-weight: 600;
    text-decoration: none;
}
header .profile-link:hover { background: #e7f4ff; }
header .profile-link:focus-visible { outline: 2px solid #9edfff; outline-offset: 4px; }
.profile-panel { max-width: 780px; }
.profile-form { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.profile-wide { grid-column: 1 / -1; }
.profile-form small { color: #526578; font-weight: normal; }
.profile-form textarea { width: 100%; padding: 8px; border: 1px solid #aebdcc; border-radius: 6px; font: inherit; resize: vertical; }