:root{
  --primary:#126b9b;
  --primary-dark:#0d567e;
  --accent:#d9a120;
  --text:#24313a;
  --muted:#697781;
  --line:#d9e0e5;
  --bg:#f4f7f9;
  --danger:#c23c32;
  --success:#1a7f4b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Tahoma,Arial,sans-serif;
  background:linear-gradient(180deg,#edf3f6 0,#f8fafb 100%);
  color:var(--text);
}
.page{min-height:100vh;padding:28px 14px}
.card{
  max-width:850px;margin:auto;background:#fff;border-radius:22px;
  box-shadow:0 18px 55px rgba(25,60,80,.11);overflow:hidden;
}
.hero{
  display:flex;align-items:center;gap:26px;padding:28px 34px;
  border-bottom:1px solid #eef2f4;background:#fff;
}
.logo{width:360px;max-width:48%;height:auto;object-fit:contain}
.hero h1{margin:0 0 8px;font-size:30px;color:var(--primary)}
.hero p{margin:0;color:var(--muted);line-height:1.8}
.notice{
  margin:24px 34px 0;padding:14px 16px;background:#f6fafc;
  border:1px solid #deebf0;border-radius:12px;line-height:1.8;color:#41515c;
}
form{padding:28px 34px 36px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field span{font-size:17px;font-weight:700}
.field b{color:#d55b4a}
input,select{
  width:100%;height:52px;border:1px solid var(--line);border-radius:12px;
  padding:0 14px;font:inherit;background:#fff;color:var(--text);outline:none;
  transition:.2s border-color,.2s box-shadow;
}
input:focus,select:focus{
  border-color:#79abc4;box-shadow:0 0 0 4px rgba(18,107,155,.08);
}
.upload input{height:auto;padding:13px}
small{color:var(--muted)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:24px 0 18px;line-height:1.7}
.consent input{width:19px;height:19px;margin-top:3px}
button{
  width:100%;height:56px;border:0;border-radius:13px;background:var(--primary);
  color:#fff;font:700 18px Tahoma,Arial,sans-serif;cursor:pointer;position:relative;
}
button:hover{background:var(--primary-dark)}
button:disabled{opacity:.65;cursor:not-allowed}
.spinner{
  display:none;width:22px;height:22px;border:3px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;
}
button.loading .btnText{display:none}
button.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.status{display:none;margin-top:18px;padding:14px 16px;border-radius:12px;line-height:1.7}
.status.success{display:block;background:#eef9f3;color:var(--success);border:1px solid #c9ead8}
.status.error{display:block;background:#fff2f0;color:var(--danger);border:1px solid #f0d0cc}
@media(max-width:720px){
  .page{padding:0}
  .card{border-radius:0;min-height:100vh}
  .hero{padding:22px 20px;flex-direction:column;text-align:center;gap:14px}
  .logo{max-width:100%;width:520px}
  .hero h1{font-size:26px}
  .notice{margin:18px 18px 0}
  form{padding:22px 18px 30px}
  .grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
}


.hero-copy{flex:1}
.hero-copy p{font-weight:700;color:#51636e}
.license-card{
  margin:24px 34px 0;
  padding:20px;
  border:1px solid #dce8ed;
  border-radius:16px;
  background:linear-gradient(135deg,#f7fbfc,#eef7f7);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.license-info{flex:1}
.license-info h2{
  margin:0 0 12px;
  color:var(--primary);
  font-size:20px;
}
.license-grid{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(120px,auto);
  gap:8px 18px;
  line-height:1.6;
}
.license-grid span{color:var(--muted);font-weight:700}
.license-grid strong{color:var(--text);direction:ltr;text-align:right}
.license-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  min-height:48px;
  padding:0 20px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
.license-btn:hover{background:var(--primary-dark)}
@media(max-width:720px){
  .license-card{margin:18px 18px 0;flex-direction:column;align-items:stretch}
  .license-grid{grid-template-columns:1fr auto;font-size:14px}
  .license-btn{width:100%}
}

.donation-card{
  margin:18px 34px 0;
  padding:18px 20px;
  border:1px solid #d7e8e2;
  border-radius:16px;
  background:linear-gradient(135deg,#f7fffb,#eef9f4);
  box-shadow:0 8px 24px rgba(15,106,156,.06);
}
.donation-title{
  color:var(--primary);
  font-size:20px;
  font-weight:800;
  margin-bottom:6px;
}
.donation-bank{
  color:var(--text);
  font-weight:700;
  margin-bottom:12px;
}
.donation-grid{
  display:grid;
  grid-template-columns:minmax(140px,auto) 1fr;
  gap:8px 14px;
  align-items:center;
}
.donation-grid span{
  color:var(--muted);
  font-weight:700;
}
.donation-grid strong{
  direction:ltr;
  text-align:right;
  color:var(--text);
  font-size:16px;
  overflow-wrap:anywhere;
}
@media(max-width:720px){
  .donation-card{margin:14px 18px 0}
  .donation-grid{grid-template-columns:1fr}
  .donation-grid strong{text-align:left}
}

.copy-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}
.copy-row strong{
  flex:1;
}
.copy-btn{
  appearance:none;
  border:1px solid #b8d7ca;
  background:#ffffff;
  color:var(--primary);
  font:inherit;
  font-weight:800;
  padding:7px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:.18s ease;
  white-space:nowrap;
}
.copy-btn:hover{
  background:#f0fbf6;
  transform:translateY(-1px);
}
.copy-btn.copied{
  background:#e7f7ef;
  color:#18794e;
  border-color:#9bd0b4;
}
@media(max-width:720px){
  .copy-row{justify-content:space-between}
}


/* V15 — Fix donation number layout */
.donation-card{
  overflow:hidden;
}
.donation-grid{
  display:grid !important;
  grid-template-columns:140px minmax(0,1fr) !important;
  gap:12px 16px !important;
  align-items:center !important;
  width:100% !important;
}
.donation-grid > span{
  white-space:nowrap !important;
}
.copy-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-width:0 !important;
  width:100% !important;
}
.copy-row strong{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
  text-align:left !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
}
.copy-btn{
  flex:0 0 auto !important;
  min-width:64px;
}
@media(max-width:720px){
  .donation-grid{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  .donation-grid > span{
    margin-top:4px;
  }
  .copy-row{
    width:100% !important;
  }
  .copy-row strong{
    font-size:14px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}


/* V16 — clear donation cards */
.donation-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
}
.donation-item{
  background:#fff;
  border:1px solid #dbe8e3;
  border-radius:14px;
  padding:14px 16px;
  min-width:0;
}
.donation-label{
  font-weight:800;
  color:var(--muted);
  font-size:14px;
  margin-bottom:8px;
}
.donation-value-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  direction:ltr !important;
  min-width:0;
}
.donation-value{
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:24px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  color:var(--text) !important;
  white-space:nowrap !important;
  text-align:left !important;
  letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
  overflow-x:auto;
  scrollbar-width:none;
}
.donation-value::-webkit-scrollbar{display:none}
.iban-value{
  font-size:20px !important;
}
.copy-icon-btn{
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  padding:0 !important;
  border-radius:9px !important;
  border:1px solid #b8d7ca !important;
  background:#f8fffb !important;
  color:var(--primary) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  font-weight:700 !important;
  cursor:pointer;
}
.copy-icon-btn:hover{background:#edf8f2 !important}
.copy-icon-btn.copied{
  background:#e7f7ef !important;
  color:#18794e !important;
  border-color:#9bd0b4 !important;
}
@media(max-width:720px){
  .donation-grid{
    grid-template-columns:1fr !important;
  }
  .donation-value{
    font-size:21px !important;
  }
  .iban-value{
    font-size:17px !important;
  }
}

/* V17: full numbers with compact labeled copy button */
.donation-item{overflow:visible!important}
.donation-value-row{
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 gap:8px!important;direction:ltr!important;width:100%!important;min-width:0!important
}
.donation-value{
 flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;
 overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;
 font-size:22px!important;letter-spacing:0!important
}
.iban-value{font-size:17px!important}
.copy-icon-btn{
 flex:0 0 auto!important;width:auto!important;min-width:60px!important;height:34px!important;
 padding:0 8px!important;gap:4px!important;white-space:nowrap!important;font-size:14px!important
}
.copy-icon-btn span{font-size:12px!important;font-weight:800!important}
@media(max-width:720px){
 .donation-value-row{flex-wrap:wrap!important}
 .donation-value{flex:0 0 100%!important;max-width:100%!important;font-size:20px!important}
 .iban-value{font-size:15px!important}
 .copy-icon-btn{margin-top:2px!important}
}