/*
| The signed-in customer's pages, lifted from the source project.
|
| One sheet rather than scoped <style> blocks in each page, for the same reason
| shop.css and orders.css exist: Vue 2's scoped CSS cannot reach children a
| v-html renders, and these rules have to load *after* tailwindcss.css so the
| source's preflight-beating specificity tricks (`.so-page .so-btn`) still win.
| See TEMPLATE_STYLESHEETS in nuxt.config.js for the load order.
|
| Each block below is copied verbatim from the <style> block of the source view
| named above it, so a diff against the source stays readable. Anything this
| storefront needs and the source did not - a pager the Blade paginator used to
| draw, skeleton sizing - lives in its own clearly marked ADDITIONS block at the
| end of the section rather than being edited into the verbatim rules.
*/

/* =========================================================================
 | shop/orders.blade.php - "My shop orders"
 ========================================================================= */

/* My shop orders. Links scoped with .so-page so tailwind preflight can't strip them. */
.so-page{--so-accent:var(--theme-color,#8d44f3);padding:22px 14px 56px;background:linear-gradient(180deg,#fbfaff 0%,#f4f6fb 45%,#eef2f8 100%)}
.so-shell{max-width:840px;margin:0 auto}
.so-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.so-head h1{margin:0;color:#140b2e;font-size:22px;font-weight:900;letter-spacing:-.4px}
.so-head p{margin:4px 0 0;color:#6b7488;font-size:12.5px;line-height:1.5}
.so-page .so-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:40px;padding:0 18px;border:0;border-radius:11px;background-color:var(--so-accent);background-image:linear-gradient(135deg,#a069f7,#7b30e6);color:#fff;font-size:13px;font-weight:800;text-decoration:none;box-shadow:0 9px 20px rgba(123,48,230,.24)}
.so-page .so-btn:hover{opacity:.94}
.so-card{margin-bottom:13px;padding:17px;border:1px solid #ecebf4;border-radius:18px;background:#fff;box-shadow:0 6px 20px rgba(20,11,46,.05)}
.so-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed #ecebf4}
.so-code{display:block;color:#140b2e;font-size:14px;font-weight:900;letter-spacing:.4px}
.so-date{display:block;margin-top:2px;color:#8b93a5;font-size:11.5px;font-weight:700}
.so-status{flex:0 0 auto;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:800}
.so-items{display:flex;flex-direction:column;gap:7px}
.so-item{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:700}
.so-item span{color:#3f4859}
.so-item i{color:#8b93a5;font-style:normal;font-weight:800}
.so-item b{color:#140b2e;font-weight:900}
.so-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.so-meta span{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid #f1f0f8;border-radius:999px;background:#fbfaff;color:#140b2e;font-size:11.5px;font-weight:900}
.so-meta i{color:#8b93a5;font-style:normal;font-weight:700}
.so-address{margin:11px 0 0;color:#6b7488;font-size:12px;font-weight:600;line-height:1.55}
.so-wait{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:11px 13px;border:1px solid rgba(180,83,9,.18);border-radius:13px;background:linear-gradient(180deg,#fffbeb,#fff7e6)}
.so-wait p{margin:0;color:#92670a;font-size:12px;font-weight:800}
.so-page .so-btn-sm{height:34px;padding:0 15px;font-size:12px;background-image:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:0 8px 18px rgba(180,83,9,.22)}
.so-empty{padding:40px 22px;border:1px solid #ecebf4;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(20,11,46,.055);text-align:center}
.so-empty h2{margin:0;color:#140b2e;font-size:18px;font-weight:900}
.so-empty p{margin:7px 0 17px;color:#6b7488;font-size:13px;line-height:1.6}
.so-pager{margin-top:16px}
@media(max-width:560px){.so-page{padding:14px 10px 40px}.so-head{flex-direction:column;align-items:flex-start}.so-head h1{font-size:19px}}

/* ADDITIONS - not in the source sheet.
 |
 | The source's `.so-pager` only had to position whatever Blade's paginator
 | printed inside it; this storefront draws its own two-button pager, so the
 | buttons need rules. Shaped after .ord-pagination in orders.css so the two
 | history pages page identically.
 |
 | `.so-refresh` marks the card that is showing cached rows while a fresh
 | request is in flight, the same treatment .sk-refresh gives elsewhere. */
.so-pager{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.so-pager p{margin:0;margin-right:auto;color:#6b7488;font-size:12.5px;font-weight:700}
.so-page .so-pager button{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid #ecebf4;border-radius:9px;background-color:#fff;background-image:none;color:#3f4859;font-size:12px;font-weight:800;cursor:pointer}
.so-page .so-pager button:disabled{opacity:.45;cursor:default}
.so-page .so-pager button:not(:disabled):hover{border-color:var(--so-accent);color:var(--so-accent)}
@media(max-width:560px){.so-pager{flex-wrap:wrap}.so-pager p{width:100%;margin-bottom:8px}.so-page .so-pager button{flex:1;justify-content:center}}

/* =========================================================================
 | user/orders.blade.php + user/codes.blade.php - the `ord-*` screens
 |
 | Their whole stylesheet is already here as orders.css, which is that pair's
 | partials/order-codes-style.blade.php verbatim. What follows is only what the
 | port needs and the source did not: the source's "Pay Now" and "Reset" were
 | anchors to a Laravel route, and this storefront has to make them buttons
 | (there is no page to navigate to - the payment is an API call, and the filter
 | never leaves the page). A bare <button> keeps its native border and system
 | font, so both are reset to what the anchor rules already assume.
 ========================================================================= */
.ord-page button.ord-pay,.ord-page button.ord-reset-btn{border:0;font-family:inherit;cursor:pointer}
.ord-page button.ord-reset-btn{border:1px solid #e2e8f0}
.ord-page button.ord-pay:disabled,.ord-page button.ord-filter-btn:disabled{opacity:.6;cursor:default}

/* =========================================================================
 | user/account.blade.php - "My Account"
 |
 | The source's own comment, kept because it explains every `.acc-shell x`
 | selector below: tailwindcss.css is linked after this sheet and its preflight
 | contains `[type=submit],button{background-color:transparent;
 | background-image:none}`. An attribute selector ties a single class on
 | specificity, so every button rule is scoped with `.acc-shell` (0,2,0) to win,
 | and both background-color and background-image are set so
 | `background-image:none` cannot strip a gradient.
 |
 | One substitution throughout: the source interpolated `{{ $themeColor }}` into
 | this block from Blade. A static sheet cannot, so the colour is read from
 | `--acc-accent`, declared once on `.acc-shell` off the `--theme-color` custom
 | property that layouts/default.vue writes from the admin's theme setting - the
 | same indirection .so-page and .dev-page already use. The literal
 | `rgba(4,45,73,…)` shadows were literal in the source too.
 ========================================================================= */
.acc-shell{--acc-accent:var(--theme-color,#042d49);max-width:1080px;margin:0 auto;padding:18px 14px 52px;position:relative;z-index:2}

/* ---------- Hero ---------- */
.acc-hero{position:relative;overflow:hidden;padding:22px;margin-bottom:16px;border-radius:24px;background:linear-gradient(140deg,#ffffff 0%,#f7f9fc 55%,#eef3fa 100%);border:1px solid #e6ebf3;box-shadow:0 16px 44px rgba(15,23,42,.07);animation:accUp .5s ease both}
@keyframes accUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.acc-hero-orb{position:absolute;border-radius:50%;pointer-events:none}
.acc-hero-orb.one{top:-120px;right:-70px;width:280px;height:280px;background:radial-gradient(circle,rgba(31,120,255,.12),transparent 68%)}
.acc-hero-orb.two{bottom:-130px;left:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(245,158,11,.12),transparent 68%)}
.acc-hero-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acc-id{display:flex;align-items:center;gap:14px;min-width:0}
.acc-avatar{position:relative;width:68px;height:68px;flex-shrink:0}
.acc-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 18px rgba(15,23,42,.14)}
/* The first letter of the name, for an account with no picture - a password
   signup has none, and a Google profile need not. Same ring and shadow as the
   photo so the hero does not change shape between the two states. */
.acc-avatar-letter{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 18px rgba(15,23,42,.14);background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;font-size:28px;font-weight:900;line-height:1;text-transform:uppercase;user-select:none}
.acc-avatar-dot{position:absolute;bottom:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid #fff;animation:accPulse 2s ease-in-out infinite}
@keyframes accPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.acc-id-text{min-width:0}
.acc-id-text h1{font-size:22px;font-weight:800;color:#0a1628;margin:0 0 7px;line-height:1.2}
.acc-id-meta{display:flex;flex-wrap:wrap;gap:6px}
.acc-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #e6ebf3;font-size:11.5px;font-weight:700;color:#64748b}
.acc-chip svg{width:13px;height:13px}
.acc-chip-green{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.acc-live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e}
.acc-quick-links{display:flex;gap:8px;flex-wrap:wrap}
.acc-quick{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:11px;background:#fff;border:1px solid #e6ebf3;font-size:12.5px;font-weight:700;color:#334155;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.acc-quick:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,23,42,.09)}
.acc-quick svg{width:16px;height:16px;color:var(--acc-accent)}

/* ---------- Balance row (always side by side) ---------- */
.acc-balance-row{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.acc-bal-card{padding:16px;border-radius:18px;min-width:0;background:linear-gradient(140deg,#f8fafc,#eef2f9);border:1px solid #e2e8f0}
.acc-bal-coins{background:linear-gradient(140deg,#fffbeb,#fef3c7);border-color:#fcd34d}
.acc-bal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.acc-bal-label{font-size:10.5px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.6px}
.acc-bal-label-gold{color:#b45309}
.acc-bal-ico{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.acc-bal-ico svg{width:17px;height:17px}
.acc-bal-ico img{width:18px;height:18px;object-fit:contain}
.acc-bal-ico-blue{background:#dbeafe;color:#1d4ed8}
.acc-bal-ico-gold{background:#fde68a}
.acc-bal-amount{display:flex;align-items:center;gap:5px;margin:8px 0 12px;font-size:27px;font-weight:900;color:#0a1628;line-height:1}
.acc-bal-amount small{font-size:14px;font-weight:700;color:#64748b}
.acc-bal-amount img{width:24px;height:24px;object-fit:contain}
.acc-bal-amount-gold{color:#92400e}
/* ---------- Buttons ---------- */
.acc-shell .acc-btn,.acc-shell a.acc-btn,.acc-shell button.acc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;border:none;cursor:pointer;padding:10px 14px;border-radius:11px;font-size:12.5px;font-weight:800;line-height:1.2;color:#fff;text-decoration:none;transition:transform .16s ease,filter .16s ease}
.acc-shell .acc-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.acc-shell .acc-btn svg{width:15px;height:15px}
.acc-shell .acc-btn-primary{background-color:var(--acc-accent);background-image:linear-gradient(135deg,var(--acc-accent),#0a3f63);box-shadow:0 7px 18px rgba(4,45,73,.24)}
.acc-shell .acc-btn-gold{background-color:#d97706;background-image:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 7px 18px rgba(217,119,6,.28)}
.acc-shell .acc-btn-submit{width:auto;min-width:190px;margin:6px auto 0;padding:11px 26px;font-size:13.5px}

/* ---------- Bonus & Level / Leaderboard banners ----------
 |
 | Two banners on one line from 720px up and stacked below it. `1fr 1fr` rather
 | than `auto-fit`, because the pair is always exactly two: the row either splits
 | in half or it does not split at all, and neither banner is ever wider than its
 | twin. The top margin moved from the banner to the row so the two do not each
 | contribute one when they stack.
 */
.acc-level-row{display:grid;gap:10px;margin-top:12px}
@media (min-width:720px){.acc-level-row{grid-template-columns:1fr 1fr;gap:12px}}
.acc-level-banner{position:relative;z-index:1;display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:18px;text-decoration:none;background:linear-gradient(120deg,#111827,#1f2937 60%,#3b2508);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(15,23,42,.2);transition:transform .18s ease,box-shadow .18s ease}
.acc-level-banner:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(15,23,42,.28)}
.acc-level-ico{flex-shrink:0;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff}
.acc-level-ico svg{width:22px;height:22px}
.acc-level-copy{flex:1;min-width:0}
.acc-level-copy strong{display:block;font-size:14.5px;font-weight:800;color:#fff}
.acc-level-copy span{display:block;font-size:12px;color:#cbd5e1;margin-top:2px;line-height:1.45}
.acc-level-arrow{flex-shrink:0;color:#fbbf24}
.acc-level-arrow svg{width:22px;height:22px}
/*
 | The leaderboard twin. Same dark panel, cooler accent - the amber one is the
 | rank badge's colour and belongs to Bonus & Level, so reusing it here would have
 | made the two banners look like one control split in two.
 */
.acc-level-banner.is-leaderboard{background:linear-gradient(120deg,#111827,#1f2937 60%,#0b2f3a)}
.acc-level-banner.is-leaderboard .acc-level-ico{background:linear-gradient(135deg,#38bdf8,#0369a1)}
.acc-level-banner.is-leaderboard .acc-level-arrow{color:#38bdf8}

/* ---------- Stats ---------- */
.acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;animation:accUp .5s ease .08s both}
.acc-stat{display:flex;align-items:center;gap:11px;padding:14px;border-radius:16px;background:#fff;border:1px solid #eef0f4;box-shadow:0 6px 20px rgba(15,23,42,.04);transition:transform .16s ease,box-shadow .16s ease}
.acc-stat:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.08)}
.acc-stat-ico{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.acc-stat-ico svg{width:21px;height:21px}
.acc-stat-body{min-width:0}
.acc-stat-body span{display:block;font-size:10.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}
.acc-stat-body strong{display:block;font-size:17px;font-weight:900;color:#0a1628;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-stat-ok{color:#059669!important}

/* ---------- Cards ---------- */
.acc-card{padding:20px;margin-bottom:16px;border-radius:20px;background:#fff;border:1px solid #eef0f4;box-shadow:0 8px 30px rgba(15,23,42,.05);animation:accUp .5s ease .14s both}
.acc-head{margin-bottom:15px}
.acc-eyebrow{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--acc-accent)}
.acc-head h2{font-size:17px;font-weight:800;color:#0a1628;margin:2px 0 0;line-height:1.3}

/* ---------- Info grid ---------- */
.acc-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.acc-info{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:14px;background:#fbfcfe;border:1px solid #f0f2f6;min-width:0}
.acc-info-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(4,45,73,.06);color:var(--acc-accent)}
.acc-info-ico svg{width:17px;height:17px}
.acc-info>div{min-width:0}
.acc-info span{display:block;font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px}
.acc-info strong{display:block;font-size:13px;font-weight:700;color:#0a1628;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- Tabs & forms ---------- */
.acc-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:2px solid #eef0f4;margin-bottom:18px}
.acc-shell .acc-tab,.acc-shell button.acc-tab{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;margin-bottom:-2px;border:none;border-bottom:2px solid transparent;background-color:transparent;background-image:none;cursor:pointer;white-space:nowrap;font-size:13px;font-weight:800;color:#94a3b8;transition:color .18s ease}
.acc-shell .acc-tab svg{width:16px;height:16px}
.acc-shell .acc-tab:hover{color:var(--acc-accent)}
.acc-shell .acc-tab.is-active{color:var(--acc-accent);border-bottom-color:var(--acc-accent)}
.acc-panel{display:none}
.acc-panel.is-active{display:block}
.acc-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.acc-field-full{grid-column:1/-1}
.acc-field label{display:block;font-size:12px;font-weight:800;color:#334155;margin-bottom:6px}
.acc-field input{width:100%;padding:11px 13px;border:1px solid #e2e8f0;border-radius:11px;font-size:13.5px;color:#0f172a;background:#fbfcfe;transition:border-color .18s ease,box-shadow .18s ease}
.acc-field input:focus{outline:none;background:#fff;border-color:var(--acc-accent);box-shadow:0 0 0 3px rgba(4,45,73,.1)}
.acc-error{font-size:11.5px;font-weight:700;color:#b91c1c;margin:5px 0 0}

/* ---------- Responsive ---------- */
@media (max-width:992px){.acc-stats{grid-template-columns:repeat(2,1fr)}.acc-info-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.acc-hero-top{flex-direction:column;align-items:stretch}.acc-quick-links{display:grid;grid-template-columns:1fr 1fr}.acc-shell .acc-quick{justify-content:center}}
@media (max-width:560px){.acc-shell{padding:14px 12px 44px}.acc-hero{padding:16px 14px;border-radius:20px}.acc-id{gap:12px}.acc-avatar{width:58px;height:58px}.acc-avatar-letter{font-size:24px}.acc-id-text h1{font-size:19px}
/* Wallet + coins stay on one row on phones as well. */
.acc-balance-row{gap:9px}.acc-bal-card{padding:12px 11px;border-radius:15px}.acc-bal-amount{font-size:21px;margin:7px 0 10px}.acc-bal-amount img{width:20px;height:20px}.acc-bal-ico{display:none}.acc-shell .acc-btn{padding:9px 8px;font-size:11.5px;gap:4px}.acc-shell .acc-btn svg{width:13px;height:13px}.acc-level-banner{padding:12px 13px;gap:11px}.acc-level-copy span{font-size:11px}.acc-card{padding:16px 14px;border-radius:17px}.acc-info-grid{grid-template-columns:1fr}.acc-form-grid{grid-template-columns:1fr}.acc-shell .acc-btn-submit{width:100%;min-width:0}}
@media (max-width:400px){.acc-stats{gap:9px}.acc-stat{padding:11px;gap:9px}.acc-stat-ico{width:34px;height:34px;border-radius:10px}.acc-stat-body strong{font-size:15px}}

/* ADDITIONS - not in the source sheet.
 |
 | The source page was server-rendered, so it never had a loading state and its
 | two settings buttons could not be busy. This storefront fetches the account
 | over the API, so the hero and stats paint as skeletons first and the submit
 | buttons need a disabled look. `.acc-btn:disabled` also has to cancel the
 | hover lift, or a disabled button still rises under the cursor.
 |
 | `.acc-avatar .sk-circle` and `.acc-bal-amount .sk` only exist to size the
 | shared `.sk` primitives to the boxes they stand in for. */
.acc-shell .acc-btn:disabled{opacity:.65;cursor:default}
.acc-shell .acc-btn:disabled:hover{transform:none;filter:none}
.acc-avatar .sk-circle{width:100%;height:100%}
.acc-bal-amount .sk{width:96px;height:26px;border-radius:8px}
.acc-stat-body .sk{width:70%;height:15px;border-radius:6px}
.acc-info strong .sk{width:80%;height:13px;border-radius:5px}

/* =========================================================================
 | user/bonus_and_level.blade.php - "Bonus & Level"
 |
 | The source's own note, kept for the same reason it was written: tailwind's
 | preflight sets `[type=submit],button{background-color:transparent;
 | background-image:none}`, an attribute selector ties a single class, so every
 | button rule is scoped under `.bl-shell` to outrank it.
 |
 | `--rank-color` is set inline on `.bl-hero` and on each `.bl-rung`, exactly as
 | the Blade view set it, because it is per-rank data rather than a theme colour.
 ========================================================================= */
.bl-shell{max-width:1060px;margin:0 auto;padding:20px 14px 56px}
.bl-card{background:#fff;border:1px solid #eef0f4;border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:0 8px 30px rgba(15,23,42,.05)}
.bl-muted{font-size:13.5px;color:#6b7280;margin:0;line-height:1.6}

/* ---------- Hero ---------- */
.bl-hero{position:relative;overflow:hidden;border-radius:24px;padding:24px;margin-bottom:18px;background:linear-gradient(135deg,#111827 0%,#1e293b 55%,#0f172a 100%);box-shadow:0 18px 46px rgba(15,23,42,.26)}
.bl-hero-glow{position:absolute;top:-140px;right:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rank-color) 45%,transparent),transparent 66%);opacity:.55;pointer-events:none}
/* Fallback for browsers without color-mix() */
@supports not (background:color-mix(in srgb,red,blue)){.bl-hero-glow{background:radial-gradient(circle,rgba(245,158,11,.38),transparent 66%)}}
.bl-hero-body{position:relative;z-index:1;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bl-badge-col{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.bl-badge-wrap{position:relative;width:104px;height:104px;display:grid;place-items:center}
.bl-badge-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);border:2px solid var(--rank-color);box-shadow:0 0 26px -4px var(--rank-color);animation:blPulse 3.2s ease-in-out infinite}
@keyframes blPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}}
.bl-badge-img{position:relative;width:72px;height:72px;object-fit:contain}
.bl-level-chip{padding:4px 13px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.bl-hero-info{flex:1;min-width:240px}
.bl-eyebrow{display:inline-block;margin-bottom:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#e5e7eb;font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
.bl-rank-title{font-size:32px;font-weight:900;line-height:1.1;margin:0 0 5px;color:var(--rank-color);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.bl-rank-desc{font-size:13.5px;color:#cbd5e1;margin:0 0 16px;line-height:1.6}
.bl-rank-desc strong{color:#fff}
.bl-progress-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:700;color:#94a3b8;margin-bottom:6px}
.bl-progress-pct{color:var(--rank-color);font-weight:900;font-size:13px}
.bl-progress-track{height:9px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.10)}
.bl-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--rank-color),#fff8);box-shadow:0 0 14px -2px var(--rank-color);transition:width .6s ease}
.bl-progress-need{font-size:12.5px;color:#94a3b8;margin:9px 0 0}
.bl-progress-need strong{color:#fbbf24}

/* ---------- Hero stats ---------- */
.bl-hero-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.bl-hstat{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.bl-hstat-num{font-size:18px;font-weight:900;color:#fff;line-height:1.2}
.bl-hstat-num small{font-size:12px;font-weight:700;color:#94a3b8}
.bl-hstat-coins{display:inline-flex;align-items:center;gap:5px}
.bl-hstat-coins img{width:17px;height:17px;object-fit:contain}
.bl-hstat-cap{font-size:10.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}
.bl-hero-cta{position:relative;z-index:1;display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
/* ---------- Buttons ---------- */
.bl-shell .bl-btn,.bl-shell a.bl-btn,.bl-shell button.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;padding:11px 20px;border-radius:12px;font-size:13.5px;font-weight:800;text-decoration:none;color:#fff;line-height:1.2;transition:transform .18s ease,filter .18s ease}
.bl-shell .bl-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.bl-shell .bl-btn img{width:17px;height:17px;object-fit:contain}
.bl-shell .bl-btn-gold{background-color:#d97706;background-image:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 8px 20px rgba(217,119,6,.32)}
.bl-shell .bl-btn-outline{background-color:rgba(255,255,255,.08);background-image:none;border:1px solid rgba(255,255,255,.22);color:#e5e7eb}

/* ---------- Section heads ---------- */
.bl-section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bl-ico{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
.bl-ico-gold{background:#fef3c7;color:#b45309}
.bl-ico-green{background:#d1fae5;color:#047857}
.bl-ico-indigo{background:#e0e7ff;color:#4338ca}
.bl-section-title{font-size:17px;font-weight:800;color:#111827;margin:0;line-height:1.3}
.bl-section-sub{font-size:12px;font-weight:600;color:#9ca3af;margin:1px 0 0}

/*
  The "Top Ranked Users" rail this page used to carry had ~20 `.bl-lb*` rules
  here. Both the section and the API key that fed it are gone - see the docblock
  in pages/bonus-and-level.vue - so the rules went with them rather than being
  left as a block nothing can ever match.
*/
/* ---------- Rank ladder ---------- */
.bl-ladder{display:grid;gap:9px}
.bl-rung{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;border:1px solid #f1f2f6;background:#fcfcfd;transition:transform .15s ease}
.bl-rung:hover{transform:translateX(3px)}
.bl-rung.is-current{border-color:var(--rank-color);background:linear-gradient(90deg,rgba(0,0,0,.02),transparent);box-shadow:0 0 0 1px var(--rank-color),0 6px 18px rgba(15,23,42,.06)}
.bl-rung.is-locked{opacity:.58}
.bl-rung-badge{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid #eef0f4}
.bl-rung-badge img{width:30px;height:30px;object-fit:contain}
.bl-rung.is-locked .bl-rung-badge img{filter:grayscale(1)}
.bl-rung-info{flex:1;min-width:0}
.bl-rung-info strong{display:block;font-size:14px;font-weight:800;color:#111827}
.bl-rung-info span{display:block;font-size:11.5px;font-weight:600;color:#9ca3af;margin-top:1px}
.bl-rung-state{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;background:#f3f4f6;color:#9ca3af}
.bl-rung.is-current .bl-rung-state{background:#fef3c7;color:#b45309}
.bl-rung.is-unlocked .bl-rung-state{background:#d1fae5;color:#047857}

/* ---------- Perks ---------- */
.bl-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.bl-perk{padding:15px;border-radius:14px;border:1px solid #f1f2f6;background:#fcfcfd}
.bl-perk-ico{font-size:22px;line-height:1}
.bl-perk strong{display:block;font-size:13.5px;font-weight:800;color:#111827;margin:8px 0 3px}
.bl-perk p{font-size:12.5px;color:#6b7280;margin:0;line-height:1.55}

/* ---------- Coin activity ---------- */
.bl-activity{display:grid;gap:8px}
.bl-act-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;border:1px solid #f3f4f6;background:#fcfcfd}
.bl-act-ico{flex-shrink:0;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;font-weight:900}
.bl-act-ico.is-in{background:#d1fae5;color:#047857}
.bl-act-ico.is-out{background:#fee2e2;color:#b91c1c}
.bl-act-body{flex:1;min-width:0}
.bl-act-body strong{display:block;font-size:13px;font-weight:800;color:#111827}
.bl-act-body span{display:block;font-size:11.5px;color:#9ca3af;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-act-right{flex-shrink:0;text-align:right}
.bl-act-amt{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:900}
.bl-act-amt.is-in{color:#047857}
.bl-act-amt.is-out{color:#b91c1c}
.bl-act-amt img{width:15px;height:15px;object-fit:contain}
.bl-act-date{display:block;font-size:10.5px;font-weight:600;color:#9ca3af;margin-top:1px}

/* ---------- Empty ---------- */
.bl-empty{text-align:center;padding:26px 14px;color:#9ca3af}
.bl-empty svg{color:#d1d5db;margin-bottom:8px}
.bl-empty-coin{width:42px;height:42px;object-fit:contain;opacity:.45;margin-bottom:8px}
.bl-empty-title{font-size:15px;font-weight:800;color:#374151;margin:0 0 4px}
.bl-shell .bl-empty-cta{margin-top:14px}

/* ---------- Responsive ---------- */
@media (max-width:700px){.bl-hero-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bl-shell{padding:14px 12px 46px}.bl-hero{padding:18px 16px;border-radius:20px}.bl-hero-body{gap:16px}.bl-badge-wrap{width:84px;height:84px}.bl-badge-img{width:58px;height:58px}.bl-rank-title{font-size:25px}.bl-hero-cta{flex-direction:column}.bl-shell .bl-hero-cta .bl-btn{width:100%}.bl-card{padding:16px 14px;border-radius:16px}.bl-rung{padding:10px 12px;gap:11px}.bl-rung-state{padding:3px 8px;font-size:9.5px}.bl-act-row{padding:10px 11px;gap:10px}}

/* ADDITIONS - not in the source sheet.
 |
 | The Blade page had every figure in hand at render time. This one fetches them,
 | so the hero and the activity list paint as skeletons first - the sizes below
 | only exist to stand the shared `.sk` primitives up in the boxes they replace,
 | on the dark hero as well as on the white cards. */
.bl-hero .sk{background-color:rgba(255,255,255,.10)}
.bl-hero .sk::after{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.bl-badge-wrap .sk-circle{width:72px;height:72px}
.bl-rank-title .sk{display:block;width:190px;height:30px;border-radius:9px}
.bl-hstat-num .sk{display:block;width:64px;height:19px;border-radius:6px}
.bl-act-body .sk{display:block;height:13px;border-radius:5px}

/* ==========================================================================
   user/add-funds.blade.php
   --------------------------------------------------------------------------
   The source's own note, kept because it is still true of this sheet:
   tailwindcss.css is linked before this file, and its preflight sets
   `[type=submit],button{background-color:transparent;background-image:none}`.
   Attribute selectors tie a single class on specificity, so every button rule
   below is scoped with `.fund-shell` to outrank it, and sets both
   background-color and background-image.

   One substitution: `{{ $themeColor }}` -> `var(--fund-accent)`, declared on
   `.fund-shell` off the global `--theme-color` the layout writes.
   ========================================================================== */
.fund-shell{--fund-accent:var(--theme-color,#042d49);max-width:1080px;margin:0 auto;padding:18px 14px 52px;position:relative;z-index:2}
.fund-alert{display:flex;align-items:center;gap:9px;padding:12px 15px;border-radius:13px;margin-bottom:14px;font-size:13.5px;font-weight:700}
.fund-alert.is-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.fund-alert.is-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857}
.fund-alert-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.fund-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.fund-main{min-width:0;display:grid;gap:16px}
.fund-side{min-width:0}
.fund-card{background:#fff;border:1px solid #eef0f4;border-radius:20px;padding:20px;margin-bottom:16px;box-shadow:0 8px 30px rgba(15,23,42,.05)}
.fund-main .fund-card{margin-bottom:0}
.fund-muted{font-size:13px;color:#6b7280;margin:0;line-height:1.6}
.fund-hero{position:relative;overflow:hidden;padding:20px;border-radius:20px;background:linear-gradient(135deg,#111827 0%,#1f2937 58%,#0b2d46 100%);box-shadow:0 16px 40px rgba(15,23,42,.22)}
.fund-hero-orb{position:absolute;top:-120px;right:-70px;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 66%);pointer-events:none}
.fund-hero-row{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.fund-hero-label{display:block;font-size:10.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.7px}
.fund-hero-amount{display:flex;align-items:baseline;gap:6px;margin-top:6px;font-size:32px;font-weight:900;color:#fff;line-height:1}
.fund-hero-amount small{font-size:15px;font-weight:700;color:#94a3b8}
.fund-hero-ico{flex-shrink:0;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#93c5fd}
.fund-hero-ico svg{width:23px;height:23px}
.fund-hero-meta{position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);font-size:12px;font-weight:600;color:#94a3b8}
.fund-hero-meta strong{color:#fff}
.fund-hero-sep{width:4px;height:4px;border-radius:50%;background:#475569}
.fund-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fund-head-split{justify-content:space-between;flex-wrap:wrap;gap:12px}
.fund-head-left{display:flex;align-items:center;gap:12px;min-width:0}
.fund-ico{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.fund-ico svg{width:20px;height:20px}
.fund-ico-blue{background:#dbeafe;color:#1d4ed8}
.fund-ico-green{background:#d1fae5;color:#047857}
.fund-ico-red{background:#fee2e2;color:#dc2626}
.fund-ico-slate{background:#f1f5f9;color:#475569}
.fund-head h2{font-size:17px;font-weight:800;color:#0a1628;margin:0;line-height:1.3}
.fund-head p{font-size:12px;font-weight:600;color:#9ca3af;margin:1px 0 0}
.fund-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.fund-shell .fund-preset,.fund-shell button.fund-preset{display:inline-flex;align-items:baseline;justify-content:center;gap:3px;padding:12px 8px;border-radius:13px;cursor:pointer;background-color:#f8fafc;background-image:none;border:1.5px solid #e6ebf3;font-size:15px;font-weight:900;color:#0f172a;transition:transform .15s ease,border-color .15s ease,background-color .15s ease}
.fund-shell .fund-preset small{font-size:11px;font-weight:700;color:#94a3b8}
.fund-shell .fund-preset:hover{transform:translateY(-2px);border-color:var(--fund-accent)}
.fund-shell .fund-preset.is-active{background-color:rgba(4,45,73,.06);border-color:var(--fund-accent);color:var(--fund-accent)}
.fund-shell .fund-preset.is-active small{color:var(--fund-accent)}
.fund-field{margin-bottom:15px}
.fund-field label{display:block;font-size:12px;font-weight:800;color:#334155;margin-bottom:7px}
.fund-input-wrap{position:relative}
.fund-input-cur{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:800;color:#94a3b8;pointer-events:none}
.fund-field input{width:100%;padding:15px 16px 15px 48px;border:1.5px solid #e2e8f0;border-radius:14px;background:#fbfcfe;color:#0f172a;font-size:21px;font-weight:900;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;-moz-appearance:textfield}
.fund-field input::-webkit-outer-spin-button,.fund-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fund-field input:focus{outline:none;background:#fff;border-color:var(--fund-accent);box-shadow:0 0 0 4px rgba(4,45,73,.09)}
.fund-hint{font-size:11.5px;font-weight:600;color:#9ca3af;margin:8px 0 0}
.fund-hint strong{color:#475569}
.fund-error{font-size:12px;font-weight:800;color:#b91c1c;margin:7px 0 0;display:none}
.fund-error.is-shown{display:block}
.fund-summary{padding:12px 14px;border-radius:13px;margin-bottom:15px;background:#f8fafc;border:1px dashed #cbd5e1}
.fund-summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:700;color:#64748b}
.fund-summary-row+.fund-summary-row{margin-top:7px;padding-top:7px;border-top:1px solid #e2e8f0}
.fund-summary-row strong{font-size:14.5px;font-weight:900;color:#0f172a}
.fund-shell .fund-btn,.fund-shell a.fund-btn,.fund-shell button.fund-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;cursor:pointer;padding:14px 20px;border-radius:14px;font-size:14px;font-weight:800;line-height:1.2;color:#fff;text-decoration:none;transition:transform .16s ease,filter .16s ease}
.fund-shell .fund-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.fund-shell .fund-btn svg{width:17px;height:17px}
.fund-shell .fund-btn img{width:18px;height:18px;object-fit:contain}
.fund-shell .fund-btn-primary{background-color:var(--fund-accent);background-image:linear-gradient(135deg,var(--fund-accent),#0a4a75);box-shadow:0 10px 24px rgba(4,45,73,.26)}
.fund-shell .fund-btn-gold{background-color:#d97706;background-image:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 9px 22px rgba(217,119,6,.28);margin-top:16px}
.fund-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:11.5px;font-weight:600;color:#9ca3af;text-align:center}
.fund-secure svg{width:14px;height:14px;color:#10b981;flex-shrink:0}
.fund-video{position:relative;overflow:hidden;border-radius:15px;background:#0f172a;padding-top:56.25%}
.fund-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fund-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fund-steps li{display:flex;gap:11px;align-items:flex-start}
.fund-step-no{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(4,45,73,.07);color:var(--fund-accent);font-size:12px;font-weight:900}
.fund-steps strong{display:block;font-size:13.5px;font-weight:800;color:#0a1628}
.fund-steps span{display:block;font-size:12.5px;color:#6b7280;margin-top:2px;line-height:1.5}
.fund-dep{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:14px;background:#fbfcfe;border:1px solid #f0f2f6}
.fund-dep+.fund-dep{margin-top:9px}
.fund-dep-main{display:flex;align-items:center;gap:12px;min-width:0}
.fund-dep-ico{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.fund-dep-ico svg{width:19px;height:19px}
.fund-dep-ico.is-done{background:#d1fae5;color:#047857}
.fund-dep-ico.is-pending{background:#fef3c7;color:#b45309}
.fund-dep-info{min-width:0}
.fund-dep-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fund-dep-line strong{font-size:15.5px;font-weight:900;color:#0a1628}
.fund-dep-badge{padding:3px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.4px;text-transform:uppercase}
.fund-dep-badge.is-done{background:#d1fae5;color:#047857}
.fund-dep-badge.is-pending{background:#fef3c7;color:#b45309}
.fund-dep-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:11.5px;font-weight:600;color:#94a3b8}
.fund-dep-meta span{position:relative}
.fund-dep-meta span+span{padding-left:11px}
.fund-dep-meta span+span::before{content:'';position:absolute;left:3px;top:50%;width:3px;height:3px;border-radius:50%;background:#cbd5e1;transform:translateY(-50%)}
.fund-dep-trx{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fund-shell .fund-dep-pay{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:11px;background-color:#d97706;background-image:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px rgba(217,119,6,.26);transition:transform .15s ease}
.fund-shell .fund-dep-pay:hover{transform:translateY(-2px)}
.fund-empty{text-align:center;padding:30px 14px;color:#9ca3af}
.fund-empty svg{width:40px;height:40px;color:#d1d5db;margin-bottom:8px}
.fund-empty-title{font-size:15px;font-weight:800;color:#374151;margin:0 0 4px}
.fund-pagination{margin-top:16px;padding-top:14px;border-top:1px solid #f0f2f6;text-align:center}
@media (max-width:900px){.fund-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .fund-shell{padding:14px 12px 44px}
  .fund-card{padding:16px 14px;border-radius:17px}
  .fund-hero{padding:16px 15px;border-radius:18px}
  .fund-hero-amount{font-size:26px}
  .fund-presets{grid-template-columns:repeat(3,1fr);gap:7px}
  .fund-shell .fund-preset{padding:10px 4px;font-size:13.5px;border-radius:11px}
  .fund-field input{font-size:18px;padding:13px 14px 13px 44px}
  .fund-shell .fund-btn{padding:13px 16px;font-size:13px}
  .fund-dep{flex-direction:column;align-items:stretch;gap:10px}
  .fund-shell .fund-dep-pay{width:100%}
  .fund-dep-trx{max-width:150px}
}

/* --- ADDITIONS (not in the source view) -----------------------------------
   The Blade page was rendered with the figures in hand and its buttons could
   never be busy: it had no loading state, no disabled state and no gateway
   picker (the source read the single enabled gateway off gs()). ------------ */
.fund-shell .fund-btn:disabled{opacity:.65;cursor:default}
.fund-shell .fund-btn:disabled:hover{transform:none;filter:none}
.fund-shell .fund-preset:disabled{opacity:.55;cursor:default}
.fund-shell .fund-preset:disabled:hover{transform:none;border-color:#e6ebf3}
.fund-gateways{display:grid;gap:8px;margin-bottom:15px}
.fund-gate{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:13px;cursor:pointer;background:#fbfcfe;border:1.5px solid #e6ebf3;transition:border-color .15s ease,background-color .15s ease}
.fund-gate.is-active{border-color:var(--fund-accent);background:rgba(4,45,73,.04)}
.fund-gate input{position:absolute;opacity:0;width:0;height:0}
.fund-gate-mark{flex-shrink:0;width:17px;height:17px;border-radius:50%;border:2px solid #cbd5e1;display:grid;place-items:center}
.fund-gate.is-active .fund-gate-mark{border-color:var(--fund-accent)}
.fund-gate.is-active .fund-gate-mark::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--fund-accent)}
.fund-gate-copy{min-width:0}
.fund-gate-copy b{display:block;font-size:13.5px;font-weight:800;color:#0a1628}
.fund-gate-copy small{display:block;font-size:11.5px;font-weight:600;color:#94a3b8;margin-top:1px}
.fund-hero-amount .sk{width:120px;height:30px;border-radius:9px}
.fund-hero .sk{background-color:rgba(255,255,255,.10)}
.fund-hero .sk::after{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.fund-dep-skeleton{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:#fbfcfe;border:1px solid #f0f2f6}
.fund-dep-skeleton+.fund-dep-skeleton{margin-top:9px}
.fund-dep-skeleton .sk-circle{width:38px;height:38px;flex-shrink:0;border-radius:12px}
.fund-dep-sk-body{flex:1;min-width:0}
.fund-dep-sk-body .sk{display:block;height:14px;border-radius:6px}

/* ==========================================================================
   user/transactions.blade.php - the `trx-*` ledger
   --------------------------------------------------------------------------
   Nothing here is the source's: that view had no stylesheet of its own, only
   utility classes and the three `.transactions*` rules in custom-styles.css,
   and it drew five "Label: value" lines per row inside one bordered box. This
   block rebuilds it in the shape of the other signed-in screens - the add-funds
   hero, the shop-orders card, the `bl-*` section heads - and reuses their
   measurements deliberately, so a customer moving between Add Money and this
   page is looking at the same design and not two.

   Same two constraints as every block above: `--trx-accent` stands in for the
   `{{ $themeColor }}` a static sheet cannot interpolate, and every button rule
   is scoped with `.trx-shell` and sets both background properties, because
   tailwindcss.css's preflight resets `button{background-color:transparent;
   background-image:none}` and an attribute selector ties a single class.
   ========================================================================== */
.trx-shell{--trx-accent:var(--theme-color,#042d49);max-width:1080px;margin:0 auto;padding:18px 14px 52px;position:relative;z-index:2}

/* ---------- Balance hero ---------- */
.trx-hero{position:relative;overflow:hidden;padding:20px;margin-bottom:16px;border-radius:20px;background:linear-gradient(135deg,#111827 0%,#1f2937 58%,#0b2d46 100%);box-shadow:0 16px 40px rgba(15,23,42,.22)}
.trx-hero-orb{position:absolute;top:-120px;right:-70px;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 66%);pointer-events:none}
.trx-hero-row{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.trx-hero-label{display:block;font-size:10.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.7px}
.trx-hero-amount{display:flex;align-items:baseline;gap:6px;margin:6px 0 0;font-size:32px;font-weight:900;color:#fff;line-height:1}
.trx-hero-ico{flex-shrink:0;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#93c5fd}
.trx-hero-ico svg{width:23px;height:23px}
.trx-hero-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.trx-hstat{min-width:0}
.trx-hstat-cap{display:block;font-size:10.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.6px}
.trx-hstat-num{display:block;margin-top:4px;font-size:16px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trx-hstat-num.is-in{color:#6ee7b7}
.trx-hstat-num.is-out{color:#fca5a5}
/* The shimmer is tuned for a light card; on this one it has to run the other way. */
.trx-hero .sk{background-color:rgba(255,255,255,.10)}
.trx-hero .sk::after{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.trx-hero-amount .sk{width:130px;height:30px;border-radius:9px}
.trx-hstat-num .sk{display:block;width:72px;height:15px;border-radius:6px}
.trx-hero-cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}

/* ---------- Buttons ---------- */
.trx-shell .trx-btn,.trx-shell a.trx-btn,.trx-shell button.trx-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border:0;border-radius:12px;cursor:pointer;font-size:13px;font-weight:800;line-height:1.2;color:#fff;text-decoration:none;transition:transform .16s ease,filter .16s ease}
.trx-shell .trx-btn svg{width:15px;height:15px}
.trx-shell .trx-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.trx-shell .trx-btn-primary{background-color:var(--trx-accent);background-image:linear-gradient(135deg,var(--trx-accent),#0a4a75);box-shadow:0 10px 24px rgba(4,45,73,.26)}
.trx-shell .trx-btn-ghost{background-color:rgba(255,255,255,.10);background-image:none;border:1px solid rgba(255,255,255,.16);color:#e2e8f0}
/* The ghost button appears twice: over the dark hero, and in the empty state on
   a white card, where a translucent white fill on white is invisible. */
.trx-shell .trx-card .trx-btn-ghost{background-color:#f8fafc;background-image:none;border:1px solid #e6ebf3;color:#334155}

/* ---------- The ledger card ---------- */
.trx-card{background:#fff;border:1px solid #eef0f4;border-radius:20px;padding:20px;box-shadow:0 8px 30px rgba(15,23,42,.05)}
.trx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.trx-head-left{display:flex;align-items:center;gap:12px;min-width:0}
.trx-ico{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.trx-ico svg{width:20px;height:20px}
.trx-ico-slate{background:#f1f5f9;color:#475569}
.trx-head h2{margin:0;font-size:17px;font-weight:800;color:#0a1628;line-height:1.3}
.trx-head p{margin:1px 0 0;font-size:12px;font-weight:600;color:#9ca3af}

/* ---------- Filter ---------- */
.trx-tabs{display:inline-flex;gap:3px;padding:4px;border-radius:12px;background:#f1f5f9}
.trx-shell .trx-tab,.trx-shell button.trx-tab{padding:8px 14px;border:0;border-radius:9px;cursor:pointer;background-color:transparent;background-image:none;color:#64748b;font-family:inherit;font-size:12px;font-weight:800;transition:background-color .15s ease,color .15s ease}
.trx-shell .trx-tab:not(:disabled):hover{color:#0f172a}
.trx-shell .trx-tab.is-active{background-color:#fff;color:var(--trx-accent);box-shadow:0 2px 6px rgba(15,23,42,.08)}
.trx-shell .trx-tab:disabled{cursor:default}

/* ---------- Rows ---------- */
.trx-list{display:grid;gap:9px}
.trx-row{display:flex;gap:12px;padding:13px 14px;border-radius:14px;background:#fbfcfe;border:1px solid #f0f2f6}
.trx-row-ico{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.trx-row-ico svg{width:19px;height:19px}
.trx-row.is-in .trx-row-ico{background:#d1fae5;color:#047857}
.trx-row.is-out .trx-row-ico{background:#fee2e2;color:#dc2626}
.trx-row-body{flex:1;min-width:0}
.trx-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.trx-row-kind{font-size:14px;font-weight:900;color:#0a1628}
.trx-row-amt{flex-shrink:0;font-size:15.5px;font-weight:900;white-space:nowrap}
.trx-row.is-in .trx-row-amt{color:#047857}
.trx-row.is-out .trx-row-amt{color:#dc2626}
.trx-row-note{margin:3px 0 0;font-size:12.5px;font-weight:600;color:#6b7280;line-height:1.5}
.trx-row-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.trx-row-meta span{display:inline-flex;align-items:center;max-width:100%;padding:4px 10px;border:1px solid #eef0f4;border-radius:999px;background:#fff;color:#475569;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trx-row-trx{max-width:190px;letter-spacing:.3px}

/* ---------- Skeleton, empty, pager ---------- */
.trx-skeleton{display:flex;gap:12px;padding:13px 14px;border-radius:14px;background:#fbfcfe;border:1px solid #f0f2f6}
.trx-skeleton .sk-circle{width:38px;height:38px;flex-shrink:0;border-radius:12px}
.trx-sk-body{flex:1;min-width:0}
.trx-sk-body .sk{display:block;height:13px;margin-bottom:7px;border-radius:6px}
.trx-sk-body .sk:last-child{margin-bottom:0}
.trx-empty{padding:34px 16px;text-align:center;color:#9ca3af}
.trx-empty svg{width:40px;height:40px;color:#d1d5db;margin-bottom:9px}
.trx-empty-title{margin:0 0 4px;font-size:15px;font-weight:800;color:#374151}
.trx-empty-note{margin:0 0 16px;font-size:12.5px;font-weight:600;line-height:1.6}
.trx-pager{margin-top:16px;padding-top:14px;border-top:1px solid #f0f2f6;text-align:center}
@media (max-width:560px){
  .trx-shell{padding:14px 12px 44px}
  .trx-hero{padding:16px 15px;border-radius:18px}
  .trx-hero-amount{font-size:26px}
  .trx-hero-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .trx-hstat-num{font-size:13.5px}
  .trx-shell .trx-btn{flex:1;padding:11px 12px}
  .trx-card{padding:16px 14px;border-radius:17px}
  .trx-head{flex-direction:column;align-items:stretch}
  .trx-tabs{width:100%}
  .trx-shell .trx-tab{flex:1;padding:8px 6px}
  .trx-row-top{flex-direction:column;align-items:flex-start;gap:2px}
  .trx-row-trx{max-width:150px}
}