:root{font:14px "Segoe UI",Tahoma,sans-serif;color:#10283e;background:#edf3f7}
*{box-sizing:border-box}
body,h1,h2,p{margin:0}
[hidden]{display:none!important}
header{display:flex;align-items:center;gap:16px;padding:16px 22px;color:#fff;background:#10283e}
header img{width:117px;padding:6px;background:white;border-radius:9px}
header small{color:#c2d8e8;letter-spacing:.11em}
h1{font-size:23px}
h2{font-size:19px}
main{padding:20px}
#account,.toolbar,.tabs,footer{display:flex;align-items:center;gap:8px}
#account{margin-inline-start:auto;flex-wrap:wrap}
.toolbar,footer{justify-content:space-between}
button{font:inherit;font-weight:650;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:8px 12px;color:white;background:#125c47;white-space:nowrap}
button:hover:not(:disabled){filter:brightness(.93)}
button:disabled{cursor:default;opacity:.5}
button:focus-visible{outline:2px solid #278bbf;outline-offset:2px}
.secondary{color:#17394d;background:white;border-color:#c7d9e5}
.tabs{padding:4px;background:#dce7ef;border-radius:10px;gap:3px}
.tabs button{color:#36546b;background:transparent}
.tabs button[aria-pressed=true]{color:#125c47;background:white;box-shadow:0 1px 3px #10283e20}
.table,#login{background:white;border:1px solid #cfdee9;border-radius:13px}
.table{overflow:auto;margin-block:12px}
table{width:100%;min-width:670px;border-collapse:collapse}
th,td{padding:11px;text-align:start;border-bottom:1px solid #e4edf3}
th{font-size:12px;color:#36546b;background:#f3f7fa;white-space:nowrap}
td code{display:block;color:#587488;font-size:11px;margin-top:4px;text-align:start}
#empty{padding:32px;text-align:center;color:#587488}
#empty:empty{display:none}
footer{color:#587488;font-size:12px}
.badge{display:inline-block;padding:4px 7px;border-radius:6px;white-space:nowrap;color:#36546b;background:#e9eff5}
.trial{color:#164d78;background:#e5f2fd}
.paid{color:#145b3c;background:#e1f3e8}
.pending{color:#805100;background:#fff1d5}
.expired{color:#a62b35}
#login{max-width:445px;margin:45px auto;padding:26px;text-align:center}
#login p,dialog p{margin:12px 0;color:#496579;line-height:1.6;overflow-wrap:anywhere}
.google{font-size:18px;color:#326ce5;margin-inline-end:7px}
.error{color:#91222c!important;background:#fff0f0;border:1px solid #f2bdc0;border-radius:8px;padding:9px 12px;margin-bottom:12px}
dialog{width:min(440px,calc(100% - 30px));border:1px solid #cfdee9;border-radius:14px;padding:20px;color:#10283e;box-shadow:0 14px 48px #10283e44}
dialog::backdrop{background:#10283e68}
#code-box{background:#edf5f2;border-radius:8px;padding:9px}
#code{font-size:15px;user-select:all}
@media(max-width:580px){header,main{padding:12px}header img{width:78px}h1{font-size:18px}#account{font-size:11px}}

td{overflow-wrap:anywhere}
.action-heading,.actions{text-align:right}
.actions{white-space:nowrap}
.actions button + button{margin-inline-start:6px}
.danger{color:#a92234;background:#fff2f3;border-color:#edb2ba}
#expiry-input,#amount-input{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #c7d9e5;border-radius:8px;font:inherit}
#amount-input{margin-bottom:12px}
#expiry-form label{font-weight:650}
#expiry-zone{font-size:12px}
.delete-controls{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:760px){
  header{flex-wrap:wrap}
  #account{overflow-wrap:anywhere}
  .toolbar,.tabs,footer{flex-wrap:wrap}
  .table{overflow:visible;background:transparent;border:0}
  .table table,.table tbody{display:block;min-width:0}
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table tbody{display:grid;gap:12px}
  .table tr{display:grid;background:white;border:1px solid #cfdee9;border-radius:12px;padding:4px 12px}
  .table td{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr);align-items:center;gap:8px;padding:8px 0}
  td[data-label]::before{content:attr(data-label);color:#36546b;font-weight:650}
  td .badge{justify-self:start}
  td.business{display:block;padding-block:10px}
  td.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;border:0}
  .actions button + button{margin-inline-start:0}
  #empty{background:#fff;border-radius:12px}
}

.filters,.summary,.analytics{display:grid;gap:10px;margin-block:12px}
.filters{grid-template-columns:repeat(3,minmax(120px,1fr)) minmax(115px,.85fr) repeat(2,minmax(80px,.65fr)) auto;align-items:end}
.filters label{display:grid;gap:5px;font-size:12px;font-weight:650;color:#36546b}
.filters input,.filters select{width:100%;min-width:0;border:1px solid #c7d9e5;border-radius:8px;padding:8px 10px;background:white;color:#10283e;font:14px "Segoe UI",sans-serif}
.summary{grid-template-columns:repeat(4,minmax(0,1fr))}
.summary div,.analytics-card{background:white;border:1px solid #cfdee9;border-radius:12px;padding:13px}
.summary span{display:block;color:#36546b;font-size:12px}
.summary strong{display:block;margin-top:4px;font-size:22px;overflow-wrap:anywhere}
.summary div:last-child strong{color:#125c47}
.edit{background:#126ca8}
.analytics{grid-template-columns:repeat(2,minmax(0,1fr))}
.analytics-card h2{font-size:16px}
.analytics-card p{color:#587488;font-size:12px;margin:5px 0 9px}
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;color:#36546b;font-size:12px}
.chart-legend span::before{content:'';display:inline-block;width:12px;height:3px;margin:0 5px 3px 0;border-radius:3px;background:#078455}
.chart-legend span:nth-child(2)::before{background:#1473af}
#activity-chart{display:block;width:100%;max-height:205px}
#activity-chart text{font-size:11px;fill:#496579}
.country-scroll{max-height:228px;overflow:auto}
.countries{min-width:0}
.countries td,.countries th{padding:8px}
.countries th{position:sticky;top:0}
.countries td:last-child,.countries th:last-child{text-align:right}
@media(max-width:1040px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:660px){
  .filters,.summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics{grid-template-columns:1fr}
}

.analytics-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.analytics-heading p{margin:0;margin-inline-start:auto;text-align:right}
.country-label{display:inline-flex;align-items:center;gap:7px}
.country-label img{flex:none;object-fit:contain;border-radius:2px}

.tabs button.has-pending{
  color:#a1172a;
  border-color:#e17b89;
  background:#ffe5e9;
  animation:pending-alert 1.6s ease-in-out infinite alternate;
}
@keyframes pending-alert{
  from{background:#ffe5e9}
  to{background:#b42335;color:white;border-color:#b42335}
}
@media(prefers-reduced-motion:reduce){
  .tabs button.has-pending{animation:none}
}