/* CduCodes FINAL REQUEST REDESIGN — scoped, additive, preserves existing product logic */
:root{--fr-accent:#00d6a3;--fr-blue:#4f8cff;--fr-line:#dbe8e5;--fr-text:#142b34;--fr-muted:#70858b;--fr-card:#fff;--fr-shadow:0 24px 70px rgba(16,55,62,.09)}
.admin-command-center{position:relative;display:grid;grid-template-columns:minmax(260px,1fr) minmax(340px,520px);gap:18px;align-items:center;margin:0 0 26px;padding:24px;border:1px solid var(--fr-line);border-radius:24px;background:linear-gradient(135deg,#fbfffe 0%,#f1faf7 55%,#f7fbff 100%);box-shadow:var(--fr-shadow);overflow:visible;z-index:30}
.command-copy .section-label{color:#00a983}.command-copy h2{margin:5px 0 5px;font-size:22px;letter-spacing:-.035em}.command-copy p{margin:0;color:var(--fr-muted);font-size:12px;line-height:1.55;max-width:600px}
.admin-user-search{height:54px;display:flex;align-items:center;gap:11px;padding:0 13px 0 16px;border:1px solid #cfe1dd;border-radius:16px;background:#fff;box-shadow:0 12px 35px rgba(27,75,80,.08);transition:.2s ease}.admin-user-search:focus-within{border-color:var(--fr-accent);box-shadow:0 0 0 5px rgba(0,214,163,.10),0 18px 40px rgba(0,214,163,.10)}.admin-user-search>span{font-size:25px;color:#00a983}.admin-user-search input{width:100%;border:0;outline:0;background:transparent;color:var(--fr-text);font-weight:800;font-size:14px}.admin-user-search kbd{border:1px solid #d8e5e2;background:#f5faf8;border-radius:7px;padding:4px 7px;color:#7d9196;font-size:10px}
.admin-user-search-results{position:absolute;right:24px;top:calc(100% - 8px);width:min(520px,calc(100% - 48px));padding:8px;border:1px solid #d7e5e2;border-radius:17px;background:rgba(255,255,255,.99);box-shadow:0 28px 70px rgba(13,50,59,.18);z-index:100;backdrop-filter:blur(18px)}.admin-user-search-results a{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;gap:11px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;color:var(--fr-text)}.admin-user-search-results a:hover{background:#effaf7}.admin-user-search-results strong,.admin-user-search-results small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-user-search-results small{margin-top:3px;color:#789097;font-size:10px}.admin-user-search-results b{color:#00a983}.search-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#e9fff8,#d9eefc);border:1px solid #cce4de;font-weight:950;color:#117e69}.search-no-users{padding:17px 12px;color:#789097;font-size:12px}.search-no-users strong{color:var(--fr-text)}
.admin-payment-amount b,.transaction-paid-cell b,.transaction-inr-cell b{font-variant-numeric:tabular-nums;letter-spacing:-.02em}.admin-payment-amount b{font-size:17px}.admin-payment-amount small,.transaction-inr-cell small,.transaction-paid-cell small{display:block;margin-top:4px;color:#789097;font-size:10px}.transaction-inr-cell b,.transaction-paid-cell b{font-size:15px}.transaction-inr-cell{min-width:145px}
.admin-submissions-page .admin-header{display:grid;grid-template-columns:minmax(280px,1fr);gap:18px}.admin-submissions-page .submission-pro-filters{width:100%;min-width:0}.admin-submissions-page .submission-filter-form{display:grid;grid-template-columns:minmax(220px,1.65fr) repeat(5,minmax(120px,1fr)) auto;align-items:center;gap:10px;padding:12px;border-radius:18px;position:relative;z-index:40}.admin-submissions-page .submission-filter-form>*{min-width:0}.admin-submissions-page .submission-search,.admin-submissions-page .pro-select{width:100%;box-sizing:border-box}.admin-submissions-page .submission-filter-row{margin:15px 0 14px}.admin-submissions-page .admin-submissions-table-wrap{position:relative;z-index:1}
/* Dropdowns are contained and layered instead of painting over the page */
.admin-submissions-page select{position:relative;z-index:5}.admin-submissions-page .submission-filter-form{overflow:visible}.admin-submissions-page .submission-filter-form select{appearance:auto}.admin-submissions-page .submission-filter-form .btn{white-space:nowrap}
body:not(.light-theme) .admin-command-center{background:linear-gradient(135deg,#0d1a20,#10242a 60%,#101e2b);border-color:#263c43}body:not(.light-theme) .admin-command-center{color:#e7f5f1}body:not(.light-theme) .command-copy p{color:#8da3a8}body:not(.light-theme) .admin-user-search{background:#0d1c22;border-color:#304850}body:not(.light-theme) .admin-user-search input{color:#e8f5f2}body:not(.light-theme) .admin-user-search kbd{background:#14272e;border-color:#2b4148}body:not(.light-theme) .admin-user-search-results{background:#0d1b21;border-color:#2b4249}body:not(.light-theme) .admin-user-search-results a{color:#e8f5f2}body:not(.light-theme) .admin-user-search-results a:hover{background:#14282e}body:not(.light-theme) .search-no-users{color:#8da3a8}
@media(max-width:1280px){.admin-submissions-page .submission-filter-form{grid-template-columns:1.6fr repeat(3,minmax(130px,1fr));}.admin-submissions-page .submission-filter-form .submission-search{grid-column:1/-1}.admin-command-center{grid-template-columns:1fr}.admin-user-search-results{left:24px;right:auto;width:calc(100% - 48px)}}
@media(max-width:760px){.admin-command-center{padding:18px;border-radius:19px}.admin-submissions-page .submission-filter-form{grid-template-columns:1fr}.admin-submissions-page .submission-filter-form .submission-search{grid-column:auto}.admin-submissions-page .submission-filter-row{overflow:auto;flex-wrap:nowrap;padding-bottom:3px}.admin-user-search-results{left:12px;right:12px;width:auto}.admin-command-center{margin-bottom:18px}}

/* V15.1 REQUEST-FIX: make the requested behavior visually unmistakable */
.admin-revenue-hero{position:relative;overflow:hidden}.admin-revenue-hero strong{font-variant-numeric:tabular-nums}.revenue-conversion-badge{display:inline-flex;margin-top:9px;padding:5px 9px;border-radius:999px;font-size:9px;letter-spacing:.09em;font-weight:950;background:rgba(0,214,163,.12);color:#00d6a3;border:1px solid rgba(0,214,163,.28)}
.revenue-rule-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0;padding:13px 16px;border:1px solid rgba(0,214,163,.18);border-radius:15px;background:linear-gradient(90deg,rgba(0,214,163,.06),rgba(79,140,255,.05));font-size:11px}.revenue-rule-banner strong,.revenue-rule-banner span{display:block}.revenue-rule-banner span{margin-top:3px;color:#789097}.revenue-rule-banner a{white-space:nowrap;color:#00c99a;text-decoration:none;font-weight:900}.lb-podium-card[data-profile-url],.lb-row[data-profile-url]{cursor:pointer}.lb-podium-card[data-profile-url]:focus-visible,.lb-row[data-profile-url]:focus-visible{outline:2px solid #00d6a3;outline-offset:3px}.lb-row[data-profile-url]:hover{transform:translateY(-1px)}
@media(max-width:1100px){.admin-submissions-page .submission-filter-form{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-submissions-page .submission-filter-form .submission-search{grid-column:1/-1}.admin-submissions-page .submission-filter-form .btn{grid-column:1/-1}.revenue-rule-banner{align-items:flex-start;flex-direction:column;gap:9px}}
@media(max-width:700px){.admin-submissions-page .submission-filter-form{grid-template-columns:1fr}.admin-submissions-page .submission-filter-form .submission-search{grid-column:auto}.admin-submissions-page .submission-filter-form .btn{grid-column:auto}.revenue-rule-banner{padding:12px}.revenue-rule-banner a{font-size:10px}}
body:not(.light-theme) .revenue-rule-banner span{color:#8da3a8}

.profile-viewing-banner{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 15px;border:1px solid rgba(0,214,163,.22);border-radius:15px;background:linear-gradient(90deg,rgba(0,214,163,.08),rgba(79,140,255,.06));color:#dcece9}.profile-viewing-banner>span{font-size:22px}.profile-viewing-banner div{min-width:0;flex:1}.profile-viewing-banner strong,.profile-viewing-banner small{display:block}.profile-viewing-banner strong{font-size:12px}.profile-viewing-banner small{margin-top:3px;color:#8da3a8;font-size:10px}.profile-viewing-banner a{white-space:nowrap;color:#00d6a3;text-decoration:none;font-weight:900;font-size:11px}.admin-learner-link{color:inherit;text-decoration:none}.admin-learner-link:hover strong{color:#00d6a3}.admin-learner-link small{display:block;margin-top:3px;color:#789097}@media(max-width:650px){.profile-viewing-banner{align-items:flex-start}.profile-viewing-banner a{margin-left:auto}}


/* =========================================================
   V16 — ADMIN MICRO-CARD + STATEMENT VISUAL REDESIGN
   ========================================================= */
.admin-page{max-width:1280px;padding-top:30px;padding-bottom:70px}
.admin-header{padding-bottom:20px;margin-bottom:18px}
.admin-header h1{font-size:30px}
.admin-stats-6{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:18px}
.admin-stat-card{min-height:116px!important;padding:15px!important;border-radius:17px!important;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;position:relative;overflow:hidden!important}
.admin-stat-card>div{min-width:0;position:relative;z-index:2}
.admin-stat-card .admin-stat-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;margin:0!important;font-size:17px;line-height:1;background:rgba(0,230,160,.09);border:1px solid rgba(0,230,160,.18);box-shadow:0 8px 22px rgba(0,230,160,.08);animation:adminEmojiFloat 2.8s ease-in-out infinite;position:relative;z-index:3}
.admin-stat-card:nth-child(2) .admin-stat-icon{animation-delay:.15s}.admin-stat-card:nth-child(3) .admin-stat-icon{animation-delay:.3s}.admin-stat-card:nth-child(4) .admin-stat-icon{animation-delay:.45s}.admin-stat-card:nth-child(5) .admin-stat-icon{animation-delay:.6s}.admin-stat-card:nth-child(6) .admin-stat-icon{animation-delay:.75s}
.admin-stat-card>div>span{font-size:8px!important;letter-spacing:.1em}.admin-stat-card strong{font-size:23px!important;margin-top:4px!important}.admin-stat-card small{font-size:8px!important;margin-top:3px!important}
.admin-card-orb{position:absolute;right:-34px;bottom:-42px;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,160,.20) 0%,rgba(0,230,160,.08) 34%,transparent 68%);filter:blur(.2px);pointer-events:none;animation:adminOrbPulse 3.8s ease-in-out infinite}
.admin-stat-card:nth-child(2) .admin-card-orb{background:radial-gradient(circle,rgba(82,151,255,.18),rgba(82,151,255,.06) 35%,transparent 68%);animation-delay:.2s}.admin-stat-card:nth-child(3) .admin-card-orb{background:radial-gradient(circle,rgba(170,102,255,.18),rgba(170,102,255,.06) 35%,transparent 68%);animation-delay:.4s}
.admin-grid-main{gap:11px}.admin-grid-main .admin-card{min-height:156px!important;padding:20px!important;border-radius:19px!important}.admin-grid-main .admin-card-icon{font-size:22px!important;margin-bottom:10px!important;animation:adminEmojiFloat 3s ease-in-out infinite}.admin-grid-main .admin-card h2{font-size:17px!important}.admin-grid-main .admin-card p{min-height:36px!important;font-size:10px!important;line-height:1.45!important}.admin-grid-main .admin-card strong{margin-top:10px!important;font-size:10px!important}
.admin-grid-main .admin-card:after{content:"";position:absolute;right:-48px;bottom:-54px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,160,.15),rgba(0,230,160,.04) 38%,transparent 70%);animation:adminOrbPulse 4.2s ease-in-out infinite;pointer-events:none}.admin-grid-main .admin-card:nth-child(2):after{background:radial-gradient(circle,rgba(82,151,255,.14),rgba(82,151,255,.035) 38%,transparent 70%)}.admin-grid-main .admin-card:nth-child(3):after{background:radial-gradient(circle,rgba(170,102,255,.14),rgba(170,102,255,.035) 38%,transparent 70%)}
.admin-command-center{margin-top:18px;margin-bottom:18px;padding:18px 20px;border-radius:19px}
.admin-payment-overview{margin-top:18px!important}.payment-kpis{gap:10px!important;margin:14px 0 16px!important}.payment-kpis article{padding:16px!important;border-radius:17px!important;min-height:105px}.payment-kpis article strong{font-size:24px!important}.admin-revenue-hero strong{font-size:27px!important}.admin-payment-row{padding:11px 13px!important;border-radius:13px!important}.admin-payment-amount b{font-size:16px!important}
@keyframes adminEmojiFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes adminOrbPulse{0%,100%{transform:scale(.94);opacity:.65}50%{transform:scale(1.12);opacity:1}}

/* Statement: original currency is always the primary amount; INR is the admin-normalized value. */
.transaction-detail-hero{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr) auto!important;align-items:center!important;gap:16px!important;padding:17px 18px!important}
.statement-money-main,.statement-money-converted{position:relative;min-width:0;padding:12px 14px;border-radius:15px;border:1px solid rgba(0,230,160,.15);background:rgba(0,230,160,.045);overflow:hidden}
.statement-money-converted{background:linear-gradient(135deg,rgba(0,230,160,.12),rgba(82,151,255,.055));border-color:rgba(0,230,160,.28)}
.statement-money-main>span,.statement-money-converted>span{display:block;color:#8aa0a5;font-size:8px;font-weight:950;letter-spacing:.12em}
.statement-money-main strong{display:block;margin-top:5px;font-size:30px;line-height:1.05;letter-spacing:-.035em}.statement-money-converted strong{display:block;margin-top:5px;font-size:27px;line-height:1.05;color:#68f4cc;letter-spacing:-.035em}
.statement-money-main small,.statement-money-converted small{display:block;margin-top:5px;color:#8ca2a7;font-size:9px;line-height:1.35}.statement-money-converted small{color:#76cdb7}
.statement-money-main::after,.statement-money-converted::after{content:"";position:absolute;right:-28px;bottom:-34px;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(0,230,160,.17),transparent 68%);animation:adminOrbPulse 3.2s ease-in-out infinite}
.statement-money-converted::after{background:radial-gradient(circle,rgba(82,151,255,.18),transparent 68%);animation-delay:.25s}
.transaction-detail-hero .transaction-detail-status{margin-left:0;white-space:nowrap;position:relative;z-index:2;animation:statusBreathe 2.6s ease-in-out infinite}
@keyframes statusBreathe{0%,100%{box-shadow:0 0 0 rgba(0,230,160,0)}50%{box-shadow:0 0 22px rgba(0,230,160,.14)}}
.transaction-detail-grid article strong[data-emoji]::before{display:inline-grid!important;place-items:center;width:25px;height:25px;margin-right:7px;border-radius:8px;background:rgba(0,230,160,.08);animation:statementEmojiPulse 2.2s ease-in-out infinite}
.transaction-detail-grid article:nth-child(3n+2) strong[data-emoji]::before{background:rgba(82,151,255,.09);animation-delay:.2s}.transaction-detail-grid article:nth-child(3n) strong[data-emoji]::before{background:rgba(170,102,255,.09);animation-delay:.4s}
@keyframes statementEmojiPulse{0%,100%{transform:translateY(0) scale(1) rotate(0)}50%{transform:translateY(-2px) scale(1.08) rotate(4deg)}}
body.light-theme .admin-stat-card .admin-stat-icon{background:rgba(0,170,130,.07);border-color:#c8e6df}.statement-money-main,.statement-money-converted{background:linear-gradient(135deg,#f8fffd,#eef9f6);border-color:#cfe6df}.statement-money-converted{background:linear-gradient(135deg,#eafaf5,#edf5ff);border-color:#bfe0d7}.statement-money-main strong{color:#18343d}.statement-money-converted strong{color:#008d70}.statement-money-main small,.statement-money-converted small{color:#71878c}
@media(max-width:1150px){.admin-stats-6{grid-template-columns:repeat(3,1fr)}.transaction-detail-hero{grid-template-columns:1fr 1fr auto!important}}
@media(max-width:780px){.admin-page{padding-top:22px}.admin-stats-6{grid-template-columns:repeat(2,1fr)}.transaction-detail-hero{grid-template-columns:1fr!important}.transaction-detail-hero .transaction-detail-status{justify-self:start}.admin-grid-main .admin-card{min-height:145px!important}}
@media(max-width:500px){.admin-stats-6{grid-template-columns:1fr}.admin-stat-card{min-height:100px!important}.statement-money-main strong{font-size:25px}.statement-money-converted strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){.admin-stat-card .admin-stat-icon,.admin-card-orb,.admin-grid-main .admin-card-icon,.admin-grid-main .admin-card:after,.statement-money-main::after,.statement-money-converted::after,.transaction-detail-hero .transaction-detail-status,.transaction-detail-grid article strong[data-emoji]::before{animation:none!important}}

/* ================================================================
   V17 — ADMIN CARD / STATEMENT VISUAL SYSTEM
   Requested: 3x2 admin cards, green-only orbs, animated emojis,
   white dark-theme cards + black typography, inverse light theme.
   ================================================================ */
.admin-stats-3x2{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:18px!important;
}
.admin-stats-3x2 .admin-stat-card{
  min-height:132px!important;
  background:#fff!important;
  color:#0a1114!important;
  border:1px solid rgba(0,180,135,.28)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.admin-stats-3x2 .admin-stat-card>div>span,
.admin-stats-3x2 .admin-stat-card small,
.admin-stats-3x2 .admin-stat-card strong{color:#0a1114!important}
.admin-stats-3x2 .admin-stat-icon{
  background:#e9fff7!important;
  border-color:#9be8d2!important;
  animation:adminEmojiFloat 2.5s ease-in-out infinite,adminEmojiGlow 2.5s ease-in-out infinite!important;
}
.admin-stats-3x2 .admin-card-orb,
.admin-grid-main .admin-card:after{
  width:128px!important;height:128px!important;
  right:-38px!important;bottom:-48px!important;
  background:radial-gradient(circle,rgba(0,150,105,.30) 0%,rgba(0,190,135,.16) 35%,rgba(0,190,135,.05) 54%,transparent 72%)!important;
  animation:adminOrbPulse 3.3s ease-in-out infinite!important;
}
.admin-grid-main .admin-card{position:relative;overflow:hidden}
.admin-grid-main .admin-card-icon{position:relative;z-index:2;animation:adminEmojiFloat 2.8s ease-in-out infinite,adminEmojiGlow 2.8s ease-in-out infinite!important}

/* Every statement tile is intentionally neutral/white in dark mode so the
   admin statement reads like a clean financial report. All circles stay green. */
.transaction-drawer{
  background:#0b1519!important;
}
.transaction-detail-grid article,
.transaction-detail-hero,
.statement-money-main,
.statement-money-converted{
  background:#fff!important;
  color:#050b0d!important;
  border-color:#b7dfd3!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.transaction-detail-grid article>span,
.transaction-detail-hero span,
.statement-money-main>span,
.statement-money-converted>span{
  color:#234044!important;
}
.transaction-detail-grid article>strong,
.transaction-detail-grid article small,
.transaction-detail-hero strong,
.transaction-detail-hero small,
.statement-money-main strong,
.statement-money-main small,
.statement-money-converted strong,
.statement-money-converted small{
  color:#050b0d!important;
}
.transaction-detail-grid article>strong[data-emoji]::before,
.transaction-detail-hero strong[data-emoji]::before,
.statement-money-main strong::before,
.statement-money-converted strong::before{
  background:#dcfff3!important;
  border:1px solid #9be8d2!important;
  animation:statementEmojiPulse 1.9s ease-in-out infinite!important;
}
.transaction-detail-grid article::before{color:#00a978!important}
.statement-money-main::after,
.statement-money-converted::after{
  width:112px!important;height:112px!important;
  right:-34px!important;bottom:-42px!important;
  background:radial-gradient(circle,rgba(0,165,115,.28),rgba(0,190,135,.12) 38%,transparent 70%)!important;
  animation:adminOrbPulse 2.9s ease-in-out infinite!important;
}
.statement-money-converted::after{animation-delay:.35s!important}
.transaction-detail-status{background:#d9fff1!important;color:#007c5d!important;border:1px solid #8fe2cc!important}

/* Emoji motion should feel alive but not distracting. */
@keyframes adminEmojiGlow{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1);filter:drop-shadow(0 0 0 rgba(0,190,135,0))}
  35%{transform:translateY(-3px) rotate(-4deg) scale(1.06);filter:drop-shadow(0 5px 8px rgba(0,190,135,.20))}
  70%{transform:translateY(1px) rotate(4deg) scale(1.02);filter:drop-shadow(0 2px 6px rgba(0,190,135,.14))}
}

/* Light theme: inverse card treatment, with high-contrast white type. */
body.light-theme .admin-stats-3x2 .admin-stat-card,
body.light-theme .transaction-detail-grid article,
body.light-theme .transaction-detail-hero,
body.light-theme .statement-money-main,
body.light-theme .statement-money-converted{
  background:linear-gradient(145deg,#0d1b20,#142a30)!important;
  color:#fff!important;
  border-color:#28565b!important;
  box-shadow:0 14px 34px rgba(20,55,59,.20),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.light-theme .admin-stats-3x2 .admin-stat-card>div>span,
body.light-theme .admin-stats-3x2 .admin-stat-card small,
body.light-theme .admin-stats-3x2 .admin-stat-card strong,
body.light-theme .transaction-detail-grid article>span,
body.light-theme .transaction-detail-hero span,
body.light-theme .statement-money-main>span,
body.light-theme .statement-money-converted>span,
body.light-theme .transaction-detail-grid article>strong,
body.light-theme .transaction-detail-grid article small,
body.light-theme .transaction-detail-hero strong,
body.light-theme .transaction-detail-hero small,
body.light-theme .statement-money-main strong,
body.light-theme .statement-money-main small,
body.light-theme .statement-money-converted strong,
body.light-theme .statement-money-converted small{color:#fff!important}
body.light-theme .admin-stats-3x2 .admin-stat-icon{background:#17352f!important;border-color:#2b6b5c!important}
body.light-theme .transaction-detail-grid article>strong[data-emoji]::before,
body.light-theme .transaction-detail-hero strong[data-emoji]::before{background:#15352e!important;border-color:#2b6b5c!important}
body.light-theme .transaction-detail-status{background:#d9fff1!important;color:#007c5d!important}

@media(max-width:900px){.admin-stats-3x2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.admin-stats-3x2{grid-template-columns:1fr!important}.admin-stats-3x2 .admin-stat-card{min-height:108px!important}}

/* ================================================================
   V18 — FINAL ADMIN VISUAL PASS
   - 6 dashboard KPIs = clean 3 x 2 layout
   - larger centered typography
   - statement tiles size/flow themselves by content importance
   - green-only animated orbs
   - animated emoji badges
   - theme-safe contrast
   ================================================================ */

/* ---------- ADMIN DASHBOARD: 6 KPI CARDS ---------- */
.admin-stats-3x2{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.admin-stats-3x2 .admin-stat-card{
  min-height:148px!important;
  height:148px!important;
  padding:18px 20px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:7px!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  border-radius:18px!important;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease!important;
}
.admin-stats-3x2 .admin-stat-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 20px 42px rgba(0,150,105,.16),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.admin-stats-3x2 .admin-stat-card>div{
  width:100%;
  min-width:0;
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.admin-stats-3x2 .admin-stat-card .admin-stat-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  margin:0 0 2px!important;
  border-radius:14px!important;
  font-size:23px!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
  transform-origin:center;
  animation:adminKpiEmoji 2.7s ease-in-out infinite!important;
}
.admin-stats-3x2 .admin-stat-card>div>span{
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
}
.admin-stats-3x2 .admin-stat-card strong{
  display:block!important;
  margin:3px 0 0!important;
  font-size:31px!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  font-weight:950!important;
  font-variant-numeric:tabular-nums;
}
.admin-stats-3x2 .admin-stat-card small{
  display:block!important;
  margin:3px 0 0!important;
  font-size:10px!important;
  line-height:1.3!important;
  font-weight:750!important;
}

/* Green-only, larger bottom-right orb. */
.admin-stats-3x2 .admin-card-orb{
  width:150px!important;
  height:150px!important;
  right:-42px!important;
  bottom:-58px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(0,185,125,.38) 0%,rgba(0,170,115,.22) 30%,rgba(0,155,105,.10) 49%,transparent 73%)!important;
  filter:blur(.2px)!important;
  z-index:1!important;
  animation:adminGreenOrb 3.5s ease-in-out infinite!important;
}
.admin-stats-3x2 .admin-stat-card:nth-child(2) .admin-card-orb,
.admin-stats-3x2 .admin-stat-card:nth-child(3) .admin-card-orb,
.admin-stats-3x2 .admin-stat-card:nth-child(4) .admin-card-orb,
.admin-stats-3x2 .admin-stat-card:nth-child(5) .admin-card-orb,
.admin-stats-3x2 .admin-stat-card:nth-child(6) .admin-card-orb{
  background:radial-gradient(circle,rgba(0,185,125,.38) 0%,rgba(0,170,115,.22) 30%,rgba(0,155,105,.10) 49%,transparent 73%)!important;
}

/* ---------- STATEMENT: CONTENT-AWARE 3-COLUMN FLOW ---------- */
.transaction-detail-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row dense!important;
  gap:12px!important;
  align-items:stretch!important;
}
.transaction-detail-grid article{
  grid-column:span 4!important;
  min-width:0!important;
  min-height:96px!important;
  padding:15px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  border-radius:15px!important;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease!important;
}
.transaction-detail-grid article:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 18px 34px rgba(0,150,105,.13)!important;
}
/* Compact cards stay compact; only long identifiers get wider rows. */
.transaction-detail-grid article.transaction-detail-payment,
.transaction-detail-grid article.transaction-detail-order{grid-column:span 8!important}
.transaction-detail-grid article.transaction-detail-fx,
.transaction-detail-grid article.transaction-detail-signature,
.transaction-detail-grid article.transaction-detail-fx-time{grid-column:span 12!important}

.transaction-detail-grid article>span{
  position:relative;
  z-index:4;
  font-size:9px!important;
  line-height:1.25!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
  text-transform:uppercase;
}
.transaction-detail-grid article>strong{
  position:relative;
  z-index:4;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin-top:8px!important;
  padding:9px 11px!important;
  border-radius:10px!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:900!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.transaction-detail-grid article>strong[data-emoji]::before,
.transaction-detail-hero strong[data-emoji]::before{
  content:attr(data-emoji)!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  border-radius:9px!important;
  margin:0!important;
  font-size:15px!important;
  line-height:1!important;
  background:#dcfff3!important;
  border:1px solid #9be8d2!important;
  animation:statementEmojiAlive 2.15s ease-in-out infinite!important;
  transform-origin:center!important;
}
.transaction-detail-grid article small{
  position:relative;
  z-index:4;
  margin-top:6px!important;
  font-size:9px!important;
  line-height:1.4!important;
  font-weight:700!important;
  overflow-wrap:anywhere!important;
}

/* Every statement tile gets the same green lower-right orb. */
.transaction-detail-grid article::after{
  content:""!important;
  position:absolute!important;
  width:100px!important;
  height:100px!important;
  right:-31px!important;
  bottom:-38px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(0,175,120,.28) 0%,rgba(0,165,112,.14) 39%,transparent 72%)!important;
  opacity:.9!important;
  pointer-events:none!important;
  z-index:1!important;
  animation:statementGreenOrb 3.4s ease-in-out infinite!important;
}
.transaction-detail-grid article:nth-child(2n)::after{animation-delay:.35s!important}
.transaction-detail-grid article:nth-child(3n)::after{animation-delay:.7s!important}

/* Replace the old blue/purple decorative spark colors with green. */
.transaction-detail-grid article::before{
  color:#00b77e!important;
  background:transparent!important;
  animation:statementSparkGreen 2.4s ease-in-out infinite!important;
}

/* Hero money blocks: white/black in dark mode, with green animation. */
.transaction-detail-hero{
  grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr) auto!important;
}
.statement-money-main,.statement-money-converted{
  position:relative!important;
  overflow:hidden!important;
}
.statement-money-main strong,
.statement-money-converted strong{
  position:relative;
  z-index:4;
  color:#050b0d!important;
  font-size:30px!important;
}
.statement-money-main::after,
.statement-money-converted::after{
  width:125px!important;
  height:125px!important;
  right:-36px!important;
  bottom:-46px!important;
  background:radial-gradient(circle,rgba(0,175,120,.30),rgba(0,165,112,.14) 38%,transparent 71%)!important;
  animation:statementGreenOrb 3.1s ease-in-out infinite!important;
}
.statement-money-converted::after{animation-delay:.4s!important}

/* Dark theme = clean white financial statement cards + black typography. */
body:not(.light-theme) .transaction-drawer,
body:not(.light-theme) .transaction-drawer-head{
  background:#0a1519!important;
}
body:not(.light-theme) .transaction-detail-grid article,
body:not(.light-theme) .transaction-detail-hero,
body:not(.light-theme) .statement-money-main,
body:not(.light-theme) .statement-money-converted{
  background:#fff!important;
  color:#050b0d!important;
  border-color:#b9ddd4!important;
}
body:not(.light-theme) .transaction-detail-grid article>span,
body:not(.light-theme) .transaction-detail-grid article small,
body:not(.light-theme) .transaction-detail-hero span,
body:not(.light-theme) .statement-money-main>span,
body:not(.light-theme) .statement-money-converted>span{
  color:#243b40!important;
}
body:not(.light-theme) .transaction-detail-grid article>strong,
body:not(.light-theme) .transaction-detail-hero strong,
body:not(.light-theme) .statement-money-main strong,
body:not(.light-theme) .statement-money-converted strong{
  color:#050b0d!important;
}
body:not(.light-theme) .transaction-detail-grid article>strong{
  background:#effbf7!important;
  border-color:#9edaca!important;
}

/* Light theme = dark statement surfaces with clear white report text. */
body.light-theme .transaction-detail-grid article,
body.light-theme .transaction-detail-hero,
body.light-theme .statement-money-main,
body.light-theme .statement-money-converted{
  background:linear-gradient(145deg,#0d1b20,#142a30)!important;
  color:#fff!important;
  border-color:#28565b!important;
}
body.light-theme .transaction-detail-grid article>span,
body.light-theme .transaction-detail-grid article small,
body.light-theme .transaction-detail-hero span,
body.light-theme .statement-money-main>span,
body.light-theme .statement-money-converted>span,
body.light-theme .transaction-detail-grid article>strong,
body.light-theme .transaction-detail-hero strong,
body.light-theme .statement-money-main strong,
body.light-theme .statement-money-converted strong{
  color:#fff!important;
}
body.light-theme .transaction-detail-grid article>strong{
  background:#12312d!important;
  border-color:#34786a!important;
}
body.light-theme .transaction-detail-grid article>strong[data-emoji]::before,
body.light-theme .transaction-detail-hero strong[data-emoji]::before{
  background:#173b34!important;
  border-color:#3d8978!important;
}

/* Dashboard theme-safe cards. */
body.light-theme .admin-stats-3x2 .admin-stat-card{
  background:linear-gradient(145deg,#0d1b20,#142a30)!important;
  color:#fff!important;
  border-color:#28565b!important;
}
body.light-theme .admin-stats-3x2 .admin-stat-card>div>span,
body.light-theme .admin-stats-3x2 .admin-stat-card strong,
body.light-theme .admin-stats-3x2 .admin-stat-card small{color:#fff!important}
body.light-theme .admin-stats-3x2 .admin-stat-icon{background:#173b34!important;border-color:#3d8978!important}

@keyframes adminKpiEmoji{
  0%,100%{transform:translateY(0) rotate(0) scale(1);filter:drop-shadow(0 0 0 rgba(0,190,135,0))}
  30%{transform:translateY(-5px) rotate(-5deg) scale(1.08);filter:drop-shadow(0 5px 8px rgba(0,190,135,.28))}
  65%{transform:translateY(2px) rotate(4deg) scale(1.02);filter:drop-shadow(0 2px 6px rgba(0,190,135,.18))}
}
@keyframes statementEmojiAlive{
  0%,100%{transform:translateY(0) rotate(0) scale(1);filter:drop-shadow(0 0 0 rgba(0,190,135,0))}
  35%{transform:translateY(-3px) rotate(-5deg) scale(1.10);filter:drop-shadow(0 4px 7px rgba(0,190,135,.25))}
  70%{transform:translateY(1px) rotate(4deg) scale(1.03);filter:drop-shadow(0 2px 5px rgba(0,190,135,.16))}
}
@keyframes adminGreenOrb{
  0%,100%{transform:scale(.92);opacity:.68}
  50%{transform:scale(1.13);opacity:1}
}
@keyframes statementGreenOrb{
  0%,100%{transform:scale(.90) translate3d(0,0,0);opacity:.62}
  50%{transform:scale(1.15) translate3d(-4px,-4px,0);opacity:1}
}
@keyframes statementSparkGreen{
  0%,100%{transform:translateY(0) rotate(0);opacity:.45}
  50%{transform:translateY(-4px) rotate(15deg);opacity:1}
}

@media(max-width:1150px){
  .admin-stats-3x2{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .transaction-detail-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .transaction-detail-grid article{grid-column:span 2!important}
  .transaction-detail-grid article.transaction-detail-payment,
  .transaction-detail-grid article.transaction-detail-order{grid-column:span 4!important}
  .transaction-detail-grid article.transaction-detail-fx,
  .transaction-detail-grid article.transaction-detail-signature,
  .transaction-detail-grid article.transaction-detail-fx-time{grid-column:span 6!important}
}
@media(max-width:900px){
  .admin-stats-3x2{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important}
  .transaction-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .transaction-detail-grid article,
  .transaction-detail-grid article.transaction-detail-payment,
  .transaction-detail-grid article.transaction-detail-order{grid-column:span 1!important}
  .transaction-detail-grid article.transaction-detail-fx,
  .transaction-detail-grid article.transaction-detail-signature,
  .transaction-detail-grid article.transaction-detail-fx-time{grid-column:span 2!important}
  .transaction-detail-hero{grid-template-columns:1fr 1fr!important}
  .transaction-detail-hero .transaction-detail-status{grid-column:1/-1;justify-self:start}
}
@media(max-width:560px){
  .admin-stats-3x2{grid-template-columns:1fr!important}
  .admin-stats-3x2 .admin-stat-card{height:132px!important;min-height:132px!important}
  .transaction-detail-grid{grid-template-columns:1fr!important}
  .transaction-detail-grid article,
  .transaction-detail-grid article.transaction-detail-payment,
  .transaction-detail-grid article.transaction-detail-order,
  .transaction-detail-grid article.transaction-detail-fx,
  .transaction-detail-grid article.transaction-detail-signature,
  .transaction-detail-grid article.transaction-detail-fx-time{grid-column:span 1!important}
  .transaction-detail-hero{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  .admin-stats-3x2 .admin-stat-icon,
  .admin-stats-3x2 .admin-card-orb,
  .transaction-detail-grid article::after,
  .transaction-detail-grid article::before,
  .transaction-detail-grid article>strong[data-emoji]::before,
  .transaction-detail-hero strong[data-emoji]::before,
  .statement-money-main::after,
  .statement-money-converted::after{animation:none!important}
}

/* ================================================================
   V18.1 — FINAL THEME + TYPE POLISH
   Dark theme: dark cards + white typography.
   Light theme: white cards + black typography.
   Statement follows the same theme contract.
   ================================================================ */

/* ADMIN DASHBOARD — six KPI cards */
.admin-stats-3x2 .admin-stat-card{
  min-height:150px!important;
  padding:18px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:7px!important;
}
.admin-stats-3x2 .admin-stat-card .admin-stat-icon{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:14px!important;
  font-size:25px!important;
  margin:0 0 2px!important;
}
.admin-stats-3x2 .admin-stat-card>div{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.admin-stats-3x2 .admin-stat-card>div>span{
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}
.admin-stats-3x2 .admin-stat-card strong{
  display:block!important;
  margin:6px 0 0!important;
  font-size:31px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  font-variant-numeric:tabular-nums!important;
}
.admin-stats-3x2 .admin-stat-card small{
  display:block!important;
  margin:5px 0 0!important;
  font-size:10px!important;
  line-height:1.35!important;
  font-weight:700!important;
}

/* DARK THEME — dashboard cards */
body:not(.light-theme) .admin-stats-3x2 .admin-stat-card{
  background:linear-gradient(145deg,#0b171c,#10242a)!important;
  color:#fff!important;
  border-color:#2a555b!important;
  box-shadow:0 14px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body:not(.light-theme) .admin-stats-3x2 .admin-stat-card>div>span,
body:not(.light-theme) .admin-stats-3x2 .admin-stat-card strong,
body:not(.light-theme) .admin-stats-3x2 .admin-stat-card small{
  color:#fff!important;
}
body:not(.light-theme) .admin-stats-3x2 .admin-stat-icon{
  background:#102e2b!important;
  border-color:#1ca987!important;
  box-shadow:0 8px 24px rgba(0,214,163,.18)!important;
}

/* LIGHT THEME — dashboard cards */
body.light-theme .admin-stats-3x2 .admin-stat-card{
  background:#fff!important;
  color:#080d10!important;
  border-color:#c7ded9!important;
  box-shadow:0 12px 30px rgba(26,65,70,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
body.light-theme .admin-stats-3x2 .admin-stat-card>div>span,
body.light-theme .admin-stats-3x2 .admin-stat-card strong,
body.light-theme .admin-stats-3x2 .admin-stat-card small{
  color:#080d10!important;
}
body.light-theme .admin-stats-3x2 .admin-stat-icon{
  background:#eafff7!important;
  border-color:#9be8d2!important;
  box-shadow:0 8px 24px rgba(0,180,135,.14)!important;
}

/* TRANSACTION STATEMENT — theme follows the page, never the opposite theme. */
body:not(.light-theme) .transaction-drawer{
  background:#081419!important;
}
body:not(.light-theme) .transaction-detail-grid article,
body:not(.light-theme) .transaction-detail-hero,
body:not(.light-theme) .statement-money-main,
body:not(.light-theme) .statement-money-converted{
  background:linear-gradient(145deg,#0c1a20,#11272d)!important;
  color:#fff!important;
  border-color:#28545a!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body:not(.light-theme) .transaction-detail-grid article>span,
body:not(.light-theme) .transaction-detail-grid article>strong,
body:not(.light-theme) .transaction-detail-grid article small,
body:not(.light-theme) .transaction-detail-hero span,
body:not(.light-theme) .transaction-detail-hero strong,
body:not(.light-theme) .transaction-detail-hero small,
body:not(.light-theme) .statement-money-main>span,
body:not(.light-theme) .statement-money-main strong,
body:not(.light-theme) .statement-money-main small,
body:not(.light-theme) .statement-money-converted>span,
body:not(.light-theme) .statement-money-converted strong,
body:not(.light-theme) .statement-money-converted small{
  color:#fff!important;
}
body:not(.light-theme) .transaction-detail-grid article>strong{
  background:#10332f!important;
  border-color:#398a79!important;
}
body:not(.light-theme) .transaction-detail-grid article>strong[data-emoji]::before,
body:not(.light-theme) .transaction-detail-hero strong[data-emoji]::before,
body:not(.light-theme) .statement-money-main strong::before,
body:not(.light-theme) .statement-money-converted strong::before{
  background:#123b35!important;
  border-color:#3b9a84!important;
}

/* Light statement = white report cards + black report text. */
body.light-theme .transaction-drawer{
  background:#eef3f2!important;
}
body.light-theme .transaction-detail-grid article,
body.light-theme .transaction-detail-hero,
body.light-theme .statement-money-main,
body.light-theme .statement-money-converted{
  background:#fff!important;
  color:#080d10!important;
  border-color:#c7ded9!important;
  box-shadow:0 12px 30px rgba(25,62,67,.13),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body.light-theme .transaction-detail-grid article>span,
body.light-theme .transaction-detail-grid article>strong,
body.light-theme .transaction-detail-grid article small,
body.light-theme .transaction-detail-hero span,
body.light-theme .transaction-detail-hero strong,
body.light-theme .transaction-detail-hero small,
body.light-theme .statement-money-main>span,
body.light-theme .statement-money-main strong,
body.light-theme .statement-money-main small,
body.light-theme .statement-money-converted>span,
body.light-theme .statement-money-converted strong,
body.light-theme .statement-money-converted small{
  color:#080d10!important;
}
body.light-theme .transaction-detail-grid article>strong{
  background:#edfff9!important;
  border-color:#9ad8ca!important;
}
body.light-theme .transaction-detail-grid article>strong[data-emoji]::before,
body.light-theme .transaction-detail-hero strong[data-emoji]::before,
body.light-theme .statement-money-main strong::before,
body.light-theme .statement-money-converted strong::before{
  background:#dcfff3!important;
  border-color:#9be8d2!important;
}

/* Larger, easier-to-read statement typography. */
.transaction-drawer-head h2,
#transaction-drawer-title{
  font-size:27px!important;
  line-height:1.12!important;
}
.transaction-drawer-head p,
#transaction-drawer-subtitle{
  font-size:12px!important;
}
.transaction-detail-grid article{
  min-height:104px!important;
  padding:17px!important;
}
.transaction-detail-grid article>span{
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.11em!important;
}
.transaction-detail-grid article>strong{
  min-height:42px!important;
  padding:8px 12px!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
}
.transaction-detail-grid article>strong[data-emoji]::before{
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  margin-right:9px!important;
  border-radius:9px!important;
  font-size:17px!important;
}
.transaction-detail-grid article small{
  font-size:10px!important;
  line-height:1.4!important;
}
.transaction-detail-hero{
  padding:20px!important;
  gap:18px!important;
}
.statement-money-main,
.statement-money-converted{
  padding:15px 17px!important;
}
.statement-money-main>span,
.statement-money-converted>span{
  font-size:10px!important;
  letter-spacing:.11em!important;
}
.statement-money-main strong{
  font-size:37px!important;
  line-height:1!important;
}
.statement-money-converted strong{
  font-size:34px!important;
  line-height:1!important;
}
.statement-money-main small,
.statement-money-converted small{
  font-size:10px!important;
  line-height:1.4!important;
}
.transaction-detail-status{
  font-size:11px!important;
  font-weight:950!important;
  padding:9px 14px!important;
}

/* Keep the green decorative circles consistent in both themes. */
.admin-stats-3x2 .admin-card-orb,
.transaction-detail-grid article::after,
.statement-money-main::after,
.statement-money-converted::after{
  background:radial-gradient(circle,rgba(0,165,115,.32),rgba(0,190,135,.13) 38%,transparent 70%)!important;
}

@media(max-width:900px){
  .admin-stats-3x2 .admin-stat-card{min-height:142px!important}
  .admin-stats-3x2 .admin-stat-card strong{font-size:28px!important}
  .transaction-detail-grid article{min-height:96px!important}
}
@media(max-width:560px){
  .admin-stats-3x2 .admin-stat-card{min-height:136px!important}
  .transaction-detail-grid article>strong{font-size:14px!important}
  .statement-money-main strong{font-size:31px!important}
  .statement-money-converted strong{font-size:28px!important}
}

/* V20 FINAL TRANSACTION ORDER / SIZING
   Exact flow: Payment ID + FX snapshot | Signature + FX retrieved | Webhook + Order ID + QR. */
.transaction-detail-grid{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:12px!important;
}
.transaction-detail-grid article.transaction-detail-half{grid-column:span 6!important;min-width:0!important;}
.transaction-detail-grid article.transaction-detail-third{grid-column:span 4!important;min-width:0!important;}
.transaction-detail-grid article.transaction-detail-payment,
.transaction-detail-grid article.transaction-detail-fx,
.transaction-detail-grid article.transaction-detail-signature,
.transaction-detail-grid article.transaction-detail-fx-time{grid-column:span 6!important;}
.transaction-detail-grid article.transaction-detail-webhook,
.transaction-detail-grid article.transaction-detail-order,
.transaction-detail-grid article.transaction-detail-qr{grid-column:span 4!important;}
.transaction-detail-grid article.transaction-detail-half>strong{font-size:15px!important;min-height:48px!important;}
.transaction-detail-grid article.transaction-detail-third>strong{font-size:14px!important;min-height:44px!important;}
.transaction-detail-grid article.transaction-detail-fx>strong{font-size:15px!important;}
.transaction-detail-grid article.transaction-detail-payment>strong,
.transaction-detail-grid article.transaction-detail-signature>strong{font-size:14px!important;}
.transaction-detail-grid article.transaction-detail-half small{font-size:10px!important;}
@media(max-width:780px){
  .transaction-detail-grid article.transaction-detail-half,
  .transaction-detail-grid article.transaction-detail-third{grid-column:span 12!important;}
}


/* ================================================================
   V26 FINAL — TRUE 3-COLUMN STATEMENT GRID + REVENUE STATUS
   ================================================================ */
.transaction-detail-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:12px!important;
  align-items:stretch!important;
}
.transaction-detail-grid article,
.transaction-detail-grid article.transaction-detail-payment,
.transaction-detail-grid article.transaction-detail-order,
.transaction-detail-grid article.transaction-detail-fx,
.transaction-detail-grid article.transaction-detail-signature,
.transaction-detail-grid article.transaction-detail-fx-time{
  grid-column:auto!important;
  min-width:0!important;
  width:auto!important;
  min-height:100px!important;
  box-sizing:border-box!important;
}
.transaction-detail-grid article>strong{overflow-wrap:anywhere!important;word-break:break-word!important}

/* Revenue and original amount are deliberately equal-width hero cards. */
.transaction-detail-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:12px!important;
}
.statement-money-main,.statement-money-converted{
  min-width:0!important;
  min-height:104px!important;
  box-sizing:border-box!important;
}
.statement-money-converted{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto!important;
  column-gap:10px!important;
  align-items:center!important;
}
.statement-money-converted>span:first-child{grid-column:1/-1!important}
.statement-money-converted>strong{grid-column:1!important;grid-row:2!important}
.statement-money-converted>small{grid-column:1!important;grid-row:3!important}
.statement-money-converted .transaction-detail-status{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
  position:relative!important;
  white-space:nowrap!important;
  z-index:5!important;
}
.transaction-detail-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:34px!important;
  padding:7px 13px!important;
  border-radius:999px!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
  box-sizing:border-box!important;
}

/* Drawer must remain internally scrollable when the statement is taller than the viewport. */
.transaction-drawer{max-height:calc(100vh - 24px)!important;overflow:hidden!important}
.transaction-drawer-content{max-height:calc(100vh - 120px)!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important}

@media(max-width:900px){
  .transaction-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .transaction-detail-grid{grid-template-columns:1fr!important}
  .transaction-detail-hero{grid-template-columns:1fr!important}
  .statement-money-converted{grid-template-columns:1fr!important}
  .statement-money-converted>span:first-child,.statement-money-converted>strong,.statement-money-converted>small,.statement-money-converted .transaction-detail-status{grid-column:1!important}
  .statement-money-converted .transaction-detail-status{grid-row:auto!important;justify-self:start!important}
}