/* =========================================================
   OZO UI Kit — compiled stylesheet
   Source architecture is mirrored in src/style.tailwind.css.
   Semantic component classes are intentionally used in HTML.
   ========================================================= */
:root {
  --primary: #6d28d9;
  --primary-2: #4f46e5;
  --primary-3: #7c3aed;
  --primary-soft: #f5f3ff;
  --primary-soft-2: #ede9fe;
  --green: #22a95a;
  --green-2: #16a34a;
  --green-soft: #effaf3;
  --red: #dc5a5a;
  --red-soft: #fff2f2;
  --orange: #f59e0b;
  --orange-soft: #fff7ed;
  --ink: #111827;
  --text: #2a2f3a;
  --muted: #6f7684;
  --faint: #9ca3af;
  --line: #e8eaf0;
  --line-soft: #f0f1f5;
  --surface: #ffffff;
  --page: #fbfbfd;
  --sidebar: 244px;
  --topbar: 72px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 28px rgba(31, 25, 54, .045);
  --shadow-hover: 0 14px 34px rgba(31, 25, 54, .075);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, input, button, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
iconify-icon { display: inline-flex; align-items: center; justify-content: center; }
.a3k { display: none !important; }
.a3s { color: var(--green) !important; }
.a3m { color: var(--red) !important; }
.a3r { color: var(--primary) !important; }

/* Layout ================================================== */
.ozo-app-body { min-height: 100vh; background: #fff; }
.a9 { min-height: 100vh; }
.aa {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  z-index: 70;
}
.a7j { display: block; padding: 0 3px 24px; }
.a7j img { width: 174px; height: auto; }
.a7l { display: flex; flex-direction: column; gap: 5px; }
.a7k {
  min-height: 42px;
  border-radius: 9px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4e5562;
  font-size: 12px;
  font-weight: 500;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.a7k iconify-icon { font-size: 19px; color: #5f6673; }
.a7k:hover { background: #f8f7ff; color: var(--primary); transform: translateX(1px); }
.a7k:hover iconify-icon { color: var(--primary); }
.a7k.a38 { color: var(--primary); background: var(--primary-soft); font-weight: 650; }
.a7k.a38 iconify-icon { color: var(--primary); }
.a7m {
  margin-top: auto;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fcfbff 100%);
}
.a7p {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 10px;
}
.a7p iconify-icon { font-size: 20px; }
.a7m strong { display: block; font-size: 11px; }
.a7m p { margin: 4px 0 12px; color: var(--muted); font-size: 9px; line-height: 1.6; }

.a8 { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.ab {
  height: var(--topbar);
  min-height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 34px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #f0f1f4;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
.a8l { display: none; }
.a8k { display: flex; align-items: center; gap: 17px; }
.a2R {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  display: inline-grid; place-items: center;
  color: #565d69;
  border-radius: 9px;
  transition: .18s ease;
}
.a2R:hover { background: #f6f5fb; color: var(--primary); }
.a2R iconify-icon { font-size: 20px; }
.a58 { position: relative; }
.a59 {
  position: absolute; top: 0; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--primary);
  color: #fff; border: 2px solid #fff;
  font-size: 8px; line-height: 12px; font-weight: 700;
}
.a5W { display: flex; align-items: center; gap: 10px; min-width: 126px; }
.a5S { width: 38px; height: 38px; border-radius: 50%; }
.a5U { display: flex; flex-direction: column; line-height: 1.2; }
.a5U strong { font-size: 11px; font-weight: 700; }
.a5U span { margin-top: 4px; color: var(--green); font-size: 9px; font-weight: 700; }
.a5T { font-size: 15px; color: #7b818b; margin-left: auto; }
.a5h {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 30px 36px 46px;
  flex: 1;
}
.a7 { display: none; color: var(--faint); font-size: 10px; text-align: center; padding: 18px 20px 28px; }
.a5j { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.a5i h1, .a1J h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.55px;
  font-weight: 780;
}
.a5i p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.a1J { margin-bottom: 22px; }
.a1J .a21 { display: block; margin-bottom: 3px; color: #4b5563; font-size: 10px; font-weight: 600; }
.a1J h1 { font-size: 22px; }

/* Surfaces & shared UI ==================================== */
.a7T {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.a7T:hover { box-shadow: var(--shadow-hover); }
.a6V { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.a6V h2, .a6V h3 { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: -.1px; }
.a6V p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.a8g { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: 9px; font-weight: 700; }
.a27 { display: block; color: #636b77; font-size: 9px; }
.a6U { height: 1px; background: var(--line-soft); margin: 20px 0; }

.aI {
  min-height: 39px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.aI iconify-icon { font-size: 16px; }
.aI:hover { transform: translateY(-1px); }
.aO {
  color: #fff;
  background: linear-gradient(90deg, var(--primary), #5936e6 55%, var(--primary-2));
  box-shadow: 0 6px 14px rgba(99, 58, 219, .16);
}
.aO:hover { box-shadow: 0 9px 20px rgba(99, 58, 219, .23); }
.aN { color: #3f4550; border-color: #dde0e7; background: #fff; }
.aN:hover { border-color: #cfc8f3; color: var(--primary); }
.aS { background: #faf9ff; color: var(--primary); border-color: #ece8fa; }
.aL { background: #fff; border-color: #dfe2e8; color: #343a45; box-shadow: 0 2px 6px rgba(31, 41, 55, .02); }
.aR { min-height: 32px; padding: 0 13px; font-size: 9px; }
.aU { min-height: 27px; padding: 0 10px; font-size: 8px; border-radius: 6px; }
.aM { min-height: 46px; font-size: 11px; }
.aK { width: 100%; }
.a28 { min-height: 31px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; color: #5b616c; font-size: 8.5px; }
.a28 iconify-icon { font-size: 13px; }
.a7A { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 8px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.a7A iconify-icon { font-size: 11px; }
.a7C { color: var(--green); background: var(--green-soft); }
.a7x { color: var(--red); background: var(--red-soft); }
.a8z { display: inline-flex; border-radius: 999px; padding: 4px 7px; font-size: 7.5px; font-weight: 700; }
.a8z.a3t { color: var(--primary); background: var(--primary-soft); }
.a8z.a3j { color: var(--green); background: var(--green-soft); }
.a54 {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 13px 15px;
  border: 1px solid #e9e5fb;
  border-radius: 9px;
  background: #faf9ff;
  color: #565d68;
  font-size: 9px;
  line-height: 1.55;
}
.a54 iconify-icon { flex: 0 0 auto; font-size: 17px; margin-top: 1px; }
.a57 { background: #faf9ff; color: #565d68; }
.a57 > iconify-icon, .a57 .a56 { color: var(--primary); }
.a55 { background: var(--green-soft); border-color: #ddf3e5; color: #45574d; }
.a55 > iconify-icon { color: var(--green); }
.a54.a1n { padding: 10px 12px; font-size: 8px; }
.a54 strong { color: #333943; }

/* Dashboard =============================================== */
.a1I { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(320px, .95fr); gap: 18px; align-items: start; }
.a1K, .a1L { display: flex; flex-direction: column; gap: 16px; }
.aE { min-height: 210px; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.aF { position: relative; z-index: 2; }
.a2O { display: block; margin-top: 5px; font-size: 32px; line-height: 1.1; letter-spacing: -1.15px; font-weight: 800; }
.a8x { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 9px; font-weight: 650; }
.a8x iconify-icon { font-size: 13px; }
.a2N { display: flex; gap: 8px; margin-top: 18px; }
.a9e { width: 230px; margin-right: 14px; }
.a7u { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.a7t { padding: 15px 16px; min-height: 110px; display: flex; flex-direction: column; align-items: flex-start; }
.a7v { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 11px; }
.a7v iconify-icon { font-size: 18px; }
.a7v.a3t { background: var(--primary-soft); color: var(--primary); }
.a7v.a3j { background: var(--green-soft); color: var(--green); }
.a7t > span:not(.a7v) { color: var(--muted); font-size: 8.5px; }
.a7t > strong { margin-top: 3px; font-size: 13px; font-weight: 760; }
.a19 { padding: 20px 20px 17px; }
.a1c { height: 255px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
.a1e { padding: 4px 0 22px; display: flex; flex-direction: column; justify-content: space-between; color: #a0a5af; font-size: 7px; }
.a1a { position: relative; border-bottom: 1px solid #eceef2; background: repeating-linear-gradient(to bottom, transparent 0, transparent 53px, #f1f2f5 54px); }
.a1a svg { position: absolute; inset: 7px 0 25px; width: 100%; height: calc(100% - 32px); overflow: visible; }
.a15 { fill: url(#ozo-chartFill); }
.a18 { fill: none; stroke: #6d28d9; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.a1d { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: space-between; color: #a1a6b0; font-size: 7px; }
.a1b { position: absolute; right: 10%; top: 23%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 8px 18px rgba(31, 41, 55, .08); display: flex; flex-direction: column; }
.a1b small { color: var(--faint); font-size: 7px; }
.a1b strong { font-size: 9px; margin-top: 2px; }
.a6n { padding: 20px 18px 13px; }
.a3 { display: flex; flex-direction: column; }
.a4 { min-height: 64px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.a4:last-child { border-bottom: 0; }
.a2 { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 8px; display: grid; place-items: center; }
.a2 iconify-icon { font-size: 15px; }
.a2.a3j { color: var(--green); background: var(--green-soft); }
.a2.a3v { color: var(--red); background: var(--red-soft); }
.a2.a3r { color: var(--primary); background: #f1edff; }
.a1 { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.a1 strong { font-size: 9px; font-weight: 650; }
.a1 span { margin-top: 3px; color: var(--faint); font-size: 7.5px; }
.a0 { font-size: 9px; font-weight: 750; white-space: nowrap; }

/* Plans / invest ========================================== */
.a5D { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 17px; }
.a5B { padding: 20px 18px; min-height: 150px; }
.a5F { display: block; color: #5c6470; font-size: 9px; font-weight: 650; }
.a5G { display: block; margin-top: 15px; color: var(--green); font-size: 14px; }
.a5C { height: 1px; background: var(--line-soft); margin: 18px 0 13px; }
.a5H { display: block; margin-top: 5px; font-size: 12px; }
.a5L { padding: 20px; margin-bottom: 16px; }
.a2S { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 24px; }
.a2U { display: flex; align-items: center; gap: 10px; }
.a2T { width: 32px; height: 32px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.a2T iconify-icon { font-size: 16px; }
.a2U > div { display: flex; flex-direction: column; }
.a2U span:not(.a2T) { color: var(--muted); font-size: 8px; }
.a2U strong { margin-top: 3px; font-size: 10px; }
.a7s { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr); gap: 18px; align-items: start; }
.a2Z { max-width: 1080px; }
.a2k { padding: 22px; }
.a7H { padding: 22px; }
.aG { padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; margin-bottom: 19px; }
.aG span { color: var(--muted); font-size: 8px; }
.aG strong { margin-top: 3px; font-size: 18px; }
.aG small { color: var(--faint); font-size: 7.5px; margin-top: 2px; }
.a2r { margin-bottom: 16px; }
.a2q { display: block; margin-bottom: 8px; color: #343a44; font-size: 9px; font-weight: 650; }
.a2m { min-height: 43px; position: relative; border: 1px solid #dfe2e8; border-radius: 8px; background: #fff; display: flex; align-items: center; transition: border-color .16s ease, box-shadow .16s ease; }
.a2m:focus-within { border-color: #9d85ec; box-shadow: 0 0 0 3px rgba(109,40,217,.06); }
.a2m input, .a2m select, .a2m textarea { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #343943; font-size: 10px; padding: 0 13px; }
.a2m input { height: 41px; }
.a2m input::placeholder, .a2m textarea::placeholder { color: #a3a8b2; }
.a2m.a2F input { padding-left: 31px; }
.a2X { position: absolute; left: 12px; color: #6b7280; font-size: 10px; }
.a2m.a2E > iconify-icon { position: absolute; left: 13px; color: #68707d; font-size: 16px; pointer-events: none; }
.a2m.a2E input { padding-left: 42px; padding-right: 40px; }
.a26 { position: absolute; right: 7px; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #69717d; display: grid; place-items: center; }
.a26 iconify-icon { font-size: 17px; }
.a74 select { appearance: none; height: 41px; padding-right: 36px; }
.a74 > iconify-icon { position: absolute; right: 12px; color: #727986; font-size: 14px; pointer-events: none; }
.a76 { display: flex; flex-direction: column; gap: 8px; }
.a73 { width: 100%; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; display: flex; align-items: center; gap: 10px; text-align: left; transition: .16s ease; }
.a73:hover { border-color: #d3cdf1; }
.a73.a3x { border-color: #8b6deb; box-shadow: 0 0 0 1px rgba(109,40,217,.08); background: #fefeff; }
.a79 { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%; border: 1px solid #c7cbd3; position: relative; }
.a73.a3x .a79 { border-color: var(--primary); }
.a73.a3x .a79::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.a77 { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.a77 strong { font-size: 9px; }
.a77 small { margin-top: 3px; color: var(--green); font-size: 8px; font-weight: 600; }
.a78 { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.a78 small { color: var(--muted); font-size: 7px; }
.a78 strong { margin-top: 3px; font-size: 8px; }
.a6 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.a6.a29 { grid-template-columns: repeat(5,1fr); }
.a6.a31 { grid-template-columns: repeat(5,1fr); }
.a6 button { min-height: 31px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #555d69; font-size: 8.5px; }
.a6 button:hover, .a6 button.a38 { color: var(--primary); border-color: #9a82eb; background: #faf9ff; }
.a7I { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 9px; }
.a7I span { color: var(--muted); }
.a7J { margin-top: 14px; padding: 13px; border-radius: 9px; background: var(--primary-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 9px; }
.a7J strong { color: var(--primary); }

/* Wallet ================================================== */
.a9f { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 18px; max-width: 1050px; }
.a9g, .aH { padding: 22px; }
.a9h { min-height: 170px; display: flex; align-items: center; justify-content: space-between; }
.a9q { display: block; margin-top: 5px; font-size: 30px; letter-spacing: -1px; }
.a9m { width: 180px; }
.a98 { min-height: 55px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.a98:last-child { border-bottom: 0; }
.a9o { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; }
.a9o iconify-icon { font-size: 14px; }
.a9o.a3j { color: var(--green); background: var(--green-soft); }
.a9o.a3t { color: var(--primary); background: var(--primary-soft); }
.a9o.a3v { color: var(--red); background: var(--red-soft); }
.a98 > span:not(.a9o) { color: var(--muted); font-size: 8.5px; }
.a98 strong { font-size: 9px; }
.a5v { display: grid; grid-template-columns: 34px 1fr auto 32px; align-items: center; gap: 10px; }
.a5y, .a6G { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; }
.a5v > div { display: flex; flex-direction: column; }
.a5v > div strong { font-size: 9px; }
.a5v > div span { margin-top: 2px; color: var(--muted); font-size: 7.5px; }
.a5v code { color: #535b67; font-size: 8px; }

/* Transactions ============================================ */
.a8w { max-width: 920px; padding: 16px 20px 20px; }
.a8p, .a72 { display: flex; align-items: center; gap: 4px; padding-bottom: 14px; overflow-x: auto; }
.a8p button, .a72 button { min-height: 30px; border: 0; border-radius: 7px; padding: 0 14px; background: transparent; color: #707783; font-size: 8.5px; white-space: nowrap; }
.a8p button.a38, .a72 button.a38 { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.a8s { margin-bottom: 17px; }
.a8v { min-height: 62px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); }
.a8r { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center; }
.a8r iconify-icon { font-size: 15px; }
.a8r.a3j { color: var(--green); background: var(--green-soft); }
.a8r.a3v { color: var(--red); background: var(--red-soft); }
.a8r.a3r { color: var(--primary); background: #f1edff; }
.a8n { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.a8n strong { font-size: 9px; }
.a8n span { margin-top: 3px; color: var(--faint); font-size: 7.5px; }
.a8m { font-size: 9px; }

/* Investments ============================================= */
.a1s { max-width: 780px; }
.a1r { max-width: 820px; }
.a72 { border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 4px; margin-bottom: 14px; }
.a72 button { flex: 1; }
.a33 { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.a32 { padding: 18px; }
.a37 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a37 > div { display: flex; align-items: baseline; gap: 10px; }
.a35 { color: var(--green); font-size: 10px; }
.a37 > div span { color: var(--green); font-size: 8px; font-weight: 600; }
.a34 { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin: 16px 0 14px; }
.a34 > div { display: flex; flex-direction: column; }
.a34 span { color: var(--faint); font-size: 7.5px; }
.a34 strong { margin-top: 4px; font-size: 9px; }
.a36 { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 7.5px; }
.a64 { height: 5px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.a64.a63 { height: 6px; }
.a62 { display: block; width: 26%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #31b66e, #41c77b); }
.a62[data-ozo-progress="10"] { width: 10%; }
.a62[data-ozo-progress="26"] { width: 26%; }
.a62[data-ozo-progress="60"] { width: 60%; }
.a62[data-ozo-progress="62"] { width: 62%; }
.a62[data-ozo-progress="70"] { width: 70%; }
.a62[data-ozo-progress="80"] { width: 80%; }
.a62.a3t { background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.a32 .aI { margin-top: 14px; }
.a1V { min-height: 220px; border: 1px dashed #dfe1e7; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 14px; }
.a1V iconify-icon { font-size: 30px; color: #b3b7c0; margin-bottom: 8px; }
.a1V strong { font-size: 10px; }
.a1V span { font-size: 8px; margin-top: 4px; }

/* Calculator =============================================== */
.aX { max-width: 720px; }
.aV { padding: 20px; }
.aW { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px; border: 1px solid #eeeaf9; border-radius: 10px; background: #faf9ff; margin: 5px 0 16px; }
.aW > div { display: flex; flex-direction: column; }
.aW span { color: var(--muted); font-size: 7.5px; }
.aW strong { margin-top: 4px; font-size: 13px; }
.aX > .a54 { margin-top: 13px; }

/* Missions ================================================= */
.a4z { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.5fr); gap: 18px; max-width: 1050px; align-items: start; }
.a4v, .a61 { padding: 20px; }
.a4L { margin-bottom: 15px; }
.a4y { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 10px; }
.a4x { min-height: 70px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 12px; }
.a2P { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.a2P iconify-icon { font-size: 18px; }
.a2P.a3q { background: var(--orange-soft); color: #e77b16; }
.a2P.a3j { background: var(--green-soft); color: var(--green); }
.a4x > div { display: flex; flex-direction: column; }
.a4x span:not(.a2P) { color: var(--muted); font-size: 7.5px; }
.a4x strong { margin-top: 3px; font-size: 11px; }
.a4H { min-height: 58px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 9px; }
.a4K { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.a4K iconify-icon { font-size: 14px; }
.a4H > strong { flex: 1; font-size: 8.5px; font-weight: 600; }
.a4E { color: var(--green); font-size: 8px; font-weight: 700; }
.a4w { color: var(--green); font-size: 17px; }
.a61 p { color: var(--muted); font-size: 8px; line-height: 1.65; margin: 13px 0 15px; }

/* Loyalty ================================================== */
.a4s { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; max-width: 880px; }
.a4r { min-height: 110px; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.a4r > span, .a3T > div > span { color: var(--muted); font-size: 8px; }
.a4r > strong, .a3T > div > strong { margin-top: 7px; color: var(--primary); font-size: 19px; }
.a3T { flex-direction: row; justify-content: space-between; align-items: center; }
.a3T > div { display: flex; flex-direction: column; }
.a3T > div > strong { color: var(--ink); font-size: 14px; }
.a3R { width: 55px; height: 55px; border-radius: 14px; display: grid; place-items: center; color: #7b8493; background: linear-gradient(145deg,#f0f2f5,#d9dde5); border: 1px solid #d8dce3; }
.a3R iconify-icon { font-size: 32px; }
.a4o, .a4q { max-width: 880px; padding: 19px; margin-top: 14px; }
.a4o .a6V { margin-bottom: 12px; }
.a4o .a6V span { color: var(--muted); font-size: 8px; }
.a4p { min-height: 64px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line-soft); }
.a4p > div { flex: 1; display: flex; flex-direction: column; }
.a4p > div strong { font-size: 9px; }
.a4p > div span { margin-top: 2px; color: var(--muted); font-size: 7.5px; }
.a4q > .aI { margin-top: 15px; }

/* Salary =================================================== */
.a6N { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.a6L { padding: 20px; }
.a6M { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.a6S { display: flex; align-items: center; gap: 10px; }
.a6P { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.a6P iconify-icon { font-size: 20px; }
.a6S > div { display: flex; flex-direction: column; }
.a6S strong { font-size: 11px; }
.a6S span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.a6Q { margin: 20px 0 9px; }
.a6Q > span { color: var(--muted); font-size: 8.5px; }
.a6Q > div { margin-top: 4px; display: flex; justify-content: space-between; align-items: end; }
.a6Q > div strong { font-size: 20px; line-height: 1; }
.a6Q > div span { font-size: 11px; font-weight: 700; }
.a6O { color: var(--muted); font-size: 8px; margin: 8px 0 18px; }
.a6R { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 16px 0; margin-bottom: 14px; border-top: 1px solid var(--line-soft); }
.a6R > div { display: flex; flex-direction: column; }
.a6R > div:first-child { border-right: 1px solid var(--line-soft); }
.a6R span { color: var(--muted); font-size: 8px; }
.a6R strong { margin-top: 4px; font-size: 12px; }
.a6L .a54 { margin-top: 14px; }
.a5P, .a7X { padding: 20px; margin-top: 16px; }
.a5Q { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; }
.a5R { position: relative; text-align: center; }
.a5R:not(:last-child)::after { content: "›"; position: absolute; right: -12px; top: 17px; color: #a8adb6; font-size: 18px; }
.a5R > span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 9px; color: var(--primary); background: var(--primary-soft); }
.a5R:nth-child(3) > span { color: var(--green); background: var(--green-soft); }
.a5R > span iconify-icon { font-size: 20px; }
.a5R strong { display: block; font-size: 8.5px; }
.a5R p { margin: 4px auto 0; max-width: 140px; color: var(--muted); font-size: 7.2px; line-height: 1.55; }
.a7W { width: 100%; overflow-x: auto; }
.a1M { width: 100%; border-collapse: collapse; min-width: 760px; }
.a1M th { padding: 10px 9px; border-bottom: 1px solid var(--line); text-align: left; color: #7d8490; font-size: 7.5px; font-weight: 600; white-space: nowrap; }
.a1M td { padding: 10px 9px; border-bottom: 1px solid var(--line-soft); color: #353b45; font-size: 8px; }
.a1M tbody tr:last-child td { border-bottom: 0; }
.a1M td:first-child { display: flex; align-items: center; gap: 8px; }
.a1H td { background: #fbf9ff; }
.a1H td:first-child { border-left: 1px solid #ddd5f8; border-radius: 7px 0 0 7px; }
.a1H td:last-child { border-right: 1px solid #ddd5f8; border-radius: 0 7px 7px 0; }
.a41 { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.a41 iconify-icon { font-size: 14px; }
.a44 { color: #16a34a; background: #dcfce7; }
.a3S { color: #b86b2b; background: #f6e7da; }
.a43 { color: #788391; background: #e6e9ee; }
.a3Y { color: #d69706; background: #fff5ce; }
.a42 { color: #6d28d9; background: #ede9fe; }
.a3U { display: inline-flex; border-radius: 5px; background: var(--primary); color: #fff; padding: 4px 7px; font-size: 7px; white-space: nowrap; }
.a7X .a54 { margin-top: 12px; }
.a6K { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(270px,.55fr); gap: 16px; margin-top: 16px; }
.a2Q, .a53 { padding: 18px; }
.a1o { min-width: 620px; }
.a53 ul { list-style: none; padding: 0; margin: 0; }
.a53 li { display: flex; gap: 8px; margin: 0 0 10px; color: #5f6672; font-size: 8px; line-height: 1.55; }
.a53 li iconify-icon { flex: 0 0 auto; color: var(--green); font-size: 13px; margin-top: 1px; }
.a6K + .a54 { margin-top: 16px; }

/* Team ===================================================== */
.a6z { max-width: 850px; padding: 18px; }
.a1u { display: flex; gap: 9px; }
.a1u .a2m { flex: 1; }
.a7g { display: block; margin-top: 10px; color: var(--muted); font-size: 8px; }
.a7r { display: flex; gap: 8px; margin-top: 7px; }
.a7q { width: 32px; height: 32px; border: 1px solid transparent; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.a7q iconify-icon { font-size: 21px; }
.a7q.a3n { border-color: var(--line); color: #666d78; }
.a8b { max-width: 850px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.a8a { min-height: 105px; padding: 15px; display: flex; flex-direction: column; }
.a8a > span { color: var(--muted); font-size: 7.5px; }
.a8a > strong { margin-top: 5px; color: var(--primary); font-size: 18px; }
.a8a > small { margin-top: 4px; color: #565d68; font-size: 7.5px; }
.a8a > a { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 7.5px; }
.a7Y, .a1h { max-width: 850px; padding: 18px; margin-top: 14px; }
.a8d { margin-bottom: 5px; }
.a85 { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.a86 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a86 h3 { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 9px; }
.a3V { width: 8px; height: 8px; border-radius: 50%; background: #b59d3e; }
.a3W { background: #31b56c; }
.a3X { background: #e4a11a; }
.a1g { display: inline-flex; align-items: center; gap: 4px; color: #5d6470; font-size: 7.5px; }
.a1g iconify-icon { font-size: 12px; }
.a8c { min-width: 560px; }
.a3Z { margin-top: 8px; margin-left: 9px; }
.a1i { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.a1i h3 { margin: 0 0 10px; font-size: 9px; }
.a1i p { margin: 7px 0; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8px; }
.a1i p strong { color: var(--ink); }

/* Payment flows ============================================ */
.a2j { margin: 0; }
.a2g { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-bottom: 20px; }
.a2f { position: relative; display: flex; align-items: center; gap: 8px; color: #9a9faa; }
.a2f:not(:last-child)::after { content: ""; position: absolute; left: 27px; right: -6px; top: 13px; height: 1px; background: #e5e7eb; z-index: 0; }
.a2f span { width: 26px; height: 26px; position: relative; z-index: 1; border-radius: 50%; display: grid; place-items: center; background: #f2f3f6; color: #8d939d; font-size: 8px; font-weight: 750; }
.a2f strong { position: relative; z-index: 1; background: #fff; padding-right: 8px; font-size: 8px; }
.a2f.a38 { color: var(--primary); }
.a2f.a38 span { background: var(--primary); color: #fff; }
.a5u { padding: 22px; }
.a5s { min-height: 65px; }
.a6l { width: 50px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #f5f6f8; color: #4b5563; }
.a6l iconify-icon { font-size: 20px; }
.a6l.a3c { background: #1f2937; color: #fff; }
.a6l.a3c iconify-icon { font-size: 18px; }
.a5s .a77 small { color: var(--muted); font-weight: 400; }
.a5s .a79 { margin-left: auto; }
.a5u > .a54 { margin-bottom: 18px; }
.a7D { border: 1px solid #ece9f7; border-radius: 9px; background: #fbfaff; padding: 12px 14px; margin: 16px 0; }
.a7D > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 8px; }
.a7D > div span { color: #6d7480; }
.a7E { margin-top: 4px; padding-top: 9px !important; border-top: 1px solid #e5e1f2; font-weight: 700; }
.a6Z { margin-top: 14px; }
.aA { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 18px; padding: 14px 15px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 10px; }
.aA > div:first-child { display: flex; flex-direction: column; }
.aA > div:first-child span { color: var(--muted); font-size: 8px; }
.aA > div:first-child strong { margin-top: 4px; color: var(--green); font-size: 19px; }
.aA p { margin: 4px 0; display: flex; justify-content: space-between; gap: 12px; font-size: 8px; }
.aA p span { color: var(--muted); }

/* Support / Settings ======================================= */
.a7Q { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 18px; max-width: 1000px; }
.a7P, .a7R, .a7d { padding: 21px; }
.a8h { min-height: 120px; align-items: stretch; }
.a8h textarea { min-height: 118px; resize: vertical; padding-top: 11px; }
.a7R { text-align: center; }
.a7S { width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.a7S iconify-icon { font-size: 29px; }
.a7R h2 { margin: 0; font-size: 15px; }
.a7R > p { margin: 8px auto 18px; color: var(--muted); font-size: 8.5px; line-height: 1.65; max-width: 270px; }
.a7K { min-height: 53px; display: flex; align-items: center; gap: 10px; text-align: left; border-top: 1px solid var(--line-soft); }
.a7K > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.a7K > span iconify-icon { font-size: 15px; }
.a7K > div { display: flex; flex-direction: column; }
.a7K small { color: var(--muted); font-size: 7px; }
.a7K strong { margin-top: 2px; font-size: 8.5px; }
.a7f { display: flex; flex-direction: column; gap: 14px; max-width: 950px; }
.a7e { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 14px; }
.a7c { min-height: 64px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line-soft); }
.a7b { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
.a7b iconify-icon { font-size: 16px; }
.a7a { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.a7a strong { font-size: 9px; }
.a7a span { margin-top: 3px; color: var(--muted); font-size: 7.5px; }
.a7U { width: 36px; height: 20px; flex: 0 0 36px; border: 0; border-radius: 999px; background: #d8dce3; padding: 2px; transition: .2s ease; }
.a7U span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: transform .2s ease; }
.a7U.a3o { background: var(--primary); }
.a7U.a3o span { transform: translateX(16px); }
.a6X { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line-soft); }
.a6X > div { display: flex; align-items: center; gap: 10px; }
.a6X > div > div { display: flex; flex-direction: column; }
.a6X strong { font-size: 9px; }
.a6X span:not(.a7b) { margin-top: 3px; color: var(--muted); font-size: 7.5px; }

/* Auth ===================================================== */
.ozo-auth-body { min-height: 100vh; background: radial-gradient(circle at 50% 0%, #fff 0, #f8f9fc 60%, #f4f5f9 100%); }
.ar { min-height: 100vh; padding: 14px 18px 18px; display: flex; flex-direction: column; align-items: center; }
.ae {
  width: min(100%, 500px);
  min-height: 720px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 17px;
  box-shadow: 0 16px 38px rgba(31, 41, 55, .06);
  padding: 20px 30px 26px;
  position: relative;
}
.al { display: flex; align-items: center; justify-content: space-between; }
.al img { width: 178px; }
.a3K { min-height: 34px; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 6px; color: #333945; font-size: 9.5px; }
.a3K iconify-icon { font-size: 13px; }
.ad { position: absolute; top: 26px; left: 22px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #343a44; z-index: 3; }
.ad iconify-icon { font-size: 21px; }
.an { max-width: 400px; margin: 26px auto 0; }
.ap { margin-top: 13px; }
.ac { width: 190px; height: 160px; object-fit: contain; margin: 0 auto 4px; }
.ap .ac { width: 174px; height: 142px; }
.au { text-align: center; margin-bottom: 22px; }
.au h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.45px; }
.au p { margin: 7px auto 0; max-width: 330px; color: #69707c; font-size: 10px; line-height: 1.55; }
.ak .a2r { margin-bottom: 10px; }
.am { text-align: right; margin: -1px 0 14px; }
.am a { color: var(--primary); font-size: 9.5px; font-weight: 600; }
.ag { height: 28px; display: flex; align-items: center; gap: 10px; color: #777e89; font-size: 8.5px; }
.ag::before, .ag::after { content: ""; height: 1px; flex: 1; background: #eceef2; }
.a2t { font-size: 18px; font-weight: 800; background: conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0); -webkit-background-clip: text; color: transparent; }
.at { margin: 17px 0 0; text-align: center; color: #4f5662; font-size: 9.5px; }
.at a { color: var(--primary); font-weight: 650; }
.a1f { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 13px; color: #5e6571; font-size: 8.5px; line-height: 1.5; }
.a1f input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); }
.a1f a { color: var(--primary); }
.a5A > iconify-icon { position: absolute; left: 13px; color: #68707d; font-size: 16px; }
.a5z { height: 22px; margin-left: 40px; padding-right: 10px; border-right: 1px solid #e2e4e8; display: inline-flex; align-items: center; gap: 4px; color: #59606b; font-size: 8.5px; white-space: nowrap; }
.a5z strong { font-weight: 600; }
.a5A input { padding-left: 10px; }
.aq { margin: 20px 0 0; }
.aj { width: min(100%, 1060px); margin-top: 14px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #e9e5f6; border-radius: 12px; background: linear-gradient(90deg,#fbf9ff,#f8f7ff); box-shadow: var(--shadow); }
.ah { min-height: 82px; padding: 14px 18px; display: flex; align-items: center; gap: 11px; border-right: 1px solid #e9e5f6; }
.ah:last-child { border-right: 0; }
.ai { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.ai.a3j { background: var(--green-soft); color: var(--green); }
.ai iconify-icon { font-size: 21px; }
.ah > div { display: flex; flex-direction: column; }
.ah strong { font-size: 9px; }
.ah span:not(.ai) { margin-top: 3px; color: #5f6673; font-size: 7.5px; line-height: 1.5; }


/* Readability & marketplace quality scale ================== */
.a7k { font-size: 13px; }
.a7m strong { font-size: 12px; }
.a7m p { font-size: 10.5px; }
.a5U strong { font-size: 12px; }
.a5U span { font-size: 10px; }
.a5i h1, .a1J h1 { font-size: 27px; }
.a5i p { font-size: 12.5px; }
.a1J .a21 { font-size: 12px; }
.a1J h1 { font-size: 25px; }
.a6V h2, .a6V h3 { font-size: 15px; }
.a6V p { font-size: 11px; }
.a8g { font-size: 11px; }
.a27 { font-size: 11px; }
.aI { min-height: 41px; font-size: 12px; }
.aR { min-height: 34px; font-size: 10.5px; }
.aU { min-height: 29px; font-size: 10px; }
.aM { min-height: 48px; font-size: 13px; }
.a28 { min-height: 34px; font-size: 10.5px; }
.a7A { font-size: 9.5px; }
.a8z { font-size: 9px; }
.a54 { font-size: 10.5px; }
.a54.a1n { font-size: 9.5px; }
.aE { min-height: 224px; }
.a2O { font-size: 36px; }
.a8x { font-size: 11px; }
.a7t { min-height: 118px; }
.a7t > span:not(.a7v) { font-size: 10.5px; }
.a7t > strong { font-size: 15px; }
.a1e, .a1d { font-size: 9px; }
.a1b small { font-size: 8.5px; }
.a1b strong { font-size: 11px; }
.a1 strong { font-size: 11.5px; }
.a1 span { font-size: 9.5px; }
.a0 { font-size: 11px; }
.a5F { font-size: 11px; }
.a5G { font-size: 18px; }
.a5H { font-size: 14px; }
.a2U span:not(.a2T) { font-size: 10px; }
.a2U strong { font-size: 12px; }
.aG span { font-size: 10px; }
.aG small { font-size: 9.5px; }
.a2q { font-size: 11.5px; }
.a2m input, .a2m select, .a2m textarea { font-size: 12px; }
.a2X { font-size: 12px; }
.a77 strong { font-size: 11.5px; }
.a77 small { font-size: 10px; }
.a78 small { font-size: 9px; }
.a78 strong { font-size: 10.5px; }
.a6 button { font-size: 10.5px; }
.a7I, .a7J { font-size: 11px; }
.a98 > span:not(.a9o) { font-size: 10.5px; }
.a98 strong { font-size: 11px; }
.a5v > div strong { font-size: 11px; }
.a5v > div span { font-size: 9.5px; }
.a5v code { font-size: 9.5px; }
.a8p button, .a72 button { font-size: 10.5px; }
.a8n strong { font-size: 11.5px; }
.a8n span { font-size: 9.5px; }
.a8m { font-size: 11.5px; }
.a35 { font-size: 12px; }
.a37 > div span { font-size: 10px; }
.a34 span { font-size: 9.5px; }
.a34 strong { font-size: 11px; }
.a36 { font-size: 9.5px; }
.a1V strong { font-size: 12px; }
.a1V span { font-size: 10px; }
.aW span { font-size: 9.5px; }
.aW strong { font-size: 15px; }
.a4x span:not(.a2P) { font-size: 9.5px; }
.a4x strong { font-size: 13px; }
.a4H > strong { font-size: 11px; }
.a4E { font-size: 10px; }
.a61 p { font-size: 10px; }
.a4r > span, .a3T > div > span { font-size: 10px; }
.a4p > div strong { font-size: 11.5px; }
.a4p > div span { font-size: 9.5px; }
.a6S strong { font-size: 13px; }
.a6S span { font-size: 10px; }
.a6Q > span { font-size: 10px; }
.a6O { font-size: 9.5px; }
.a6R span { font-size: 9.5px; }
.a6R strong { font-size: 13px; }
.a5R strong { font-size: 10.5px; }
.a5R p { font-size: 9px; max-width: 155px; }
.a1M th { font-size: 9.5px; }
.a1M td { font-size: 10.5px; }
.a3U { font-size: 8.5px; }
.a53 li { font-size: 10px; }
.a7g { font-size: 10px; }
.a8a > span { font-size: 9.5px; }
.a8a > small { font-size: 9.5px; }
.a8a > a { font-size: 9.5px; }
.a86 h3 { font-size: 11px; }
.a1g { font-size: 9.5px; }
.a1i h3 { font-size: 11px; }
.a1i p { font-size: 10px; }
.a2f span { font-size: 10px; }
.a2f strong { font-size: 10px; }
.a7D > div { font-size: 10px; }
.aA > div:first-child span { font-size: 10px; }
.aA p { font-size: 10px; }
.a7R > p { font-size: 10.5px; }
.a7K small { font-size: 9px; }
.a7K strong { font-size: 10.5px; }
.a7a strong, .a6X strong { font-size: 11px; }
.a7a span, .a6X span:not(.a7b) { font-size: 9.5px; }
.a3K { font-size: 11px; }
.au h1 { font-size: 27px; }
.au p { font-size: 12px; }
.am a { font-size: 11px; }
.ag { font-size: 10.5px; }
.at { font-size: 11.5px; }
.a1f { font-size: 10.5px; }
.a5z { font-size: 10.5px; }
.ah strong { font-size: 11px; }
.ah span:not(.ai) { font-size: 9.5px; }

/* Mobile navigation ======================================== */
.a4M, .a4X, .a4Z { display: none; }

/* Responsive =============================================== */
@media (max-width: 1280px) {
  :root { --sidebar: 224px; }
  .aa { padding-left: 15px; padding-right: 15px; }
  .a7j img { width: 165px; }
  .a5h { padding-left: 28px; padding-right: 28px; }
  .a1I { grid-template-columns: minmax(0,1.8fr) minmax(285px,.8fr); }
  .a9e { width: 205px; }
  .a5Q { gap: 10px; }
}

@media (max-width: 1050px) {
  .a1I, .a9f, .a4z, .a7Q, .a6K, .a7s { grid-template-columns: 1fr; }
  .a1L { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .a1L > * { height: 100%; }
  .a5D { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .a2S { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .a9f, .a7Q { max-width: 860px; }
  .a7H { max-width: none; }
  .a5R p { max-width: 115px; }
}

@media (max-width: 860px) {
  body { padding-bottom: 68px; }
  .aa { display: none; }
  .a8 { margin-left: 0; }
  .ab { height: 62px; min-height: 62px; padding: 0 14px; justify-content: space-between; }
  .a8l { display: block; }
  .a8l img { width: 146px; }
  .a5U, .a5T { display: none; }
  .a5W { min-width: auto; }
  .a5S { width: 34px; height: 34px; }
  .a5h { max-width: 760px; padding: 20px 15px 28px; }
  .a5j { margin-bottom: 18px; }
  .a5i h1, .a1J h1 { font-size: 21px; }
  .a5i p { font-size: 10px; }
  .a1L { display: flex; }
  .a6N { grid-template-columns: 1fr; }
  .a5Q { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 12px; }
  .a5R::after { display: none; }
  .a34 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .a8b { grid-template-columns: repeat(3,1fr); }
  .aj { grid-template-columns: repeat(2,1fr); }
  .ah:nth-child(2) { border-right: 0; }
  .ah:nth-child(-n+2) { border-bottom: 1px solid #e9e5f6; }
  .a4M {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    height: 68px;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
  }
  .a4Y { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #8b919b; font-size: 7.5px; }
  .a4Y iconify-icon { font-size: 20px; }
  .a4Y.a38 { color: var(--primary); font-weight: 700; }
  .a4Z { position: fixed; inset: 0; z-index: 110; background: rgba(17,24,39,.32); opacity: 0; visibility: hidden; transition: .2s ease; }
  .a4Z.a3p { display: block; opacity: 1; visibility: visible; }
  .a4X { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; right: 0; z-index: 120; width: min(86vw,330px); padding: 18px; background: #fff; box-shadow: -12px 0 34px rgba(31,41,55,.15); transform: translateX(105%); transition: transform .22s ease; }
  .a4X.a3p { transform: translateX(0); }
  .a1Q { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
  .a1Q img { width: 150px; }
  .a1S { padding-top: 10px; overflow-y: auto; }
  .a1R { min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border-radius: 8px; color: #565d68; font-size: 11px; }
  .a1R iconify-icon { font-size: 18px; }
  .a1R.a38 { color: var(--primary); background: var(--primary-soft); font-weight: 650; }
  .a7 { display: block; }
}

@media (max-width: 620px) {
  .a5h { padding-left: 12px; padding-right: 12px; }
  .a5j { flex-direction: column; }
  .a1J { margin-bottom: 16px; }
  .aE { min-height: 190px; padding: 20px; }
  .a9e { width: 150px; margin-right: -8px; }
  .a2O { font-size: 28px; }
  .a7u { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .a1c { height: 220px; }
  .a5D, .a2S, .a4s, .a7e { grid-template-columns: 1fr; }
  .a5B { min-height: 130px; }
  .a8b { grid-template-columns: 1fr; }
  .a8a { min-height: 90px; }
  .a4y { grid-template-columns: 1fr; }
  .a34 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .aW { grid-template-columns: 1fr; }
  .a5Q { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .a1i { grid-template-columns: 1fr; }
  .aA { grid-template-columns: 1fr; }
  .a6.a29, .a6.a31 { grid-template-columns: repeat(3,1fr); }
  .a2f strong { display: none; }
  .a2f:not(:last-child)::after { left: 26px; right: -1px; }
  .ar { padding: 0; background: #fff; }
  .ae { width: 100%; min-height: auto; border: 0; border-radius: 0; box-shadow: none; padding: 17px 18px 22px; }
  .al img { width: 156px; }
  .an { margin-top: 22px; }
  .ap { margin-top: 9px; }
  .ac { width: 170px; height: 145px; }
  .ap .ac { width: 152px; height: 126px; }
  .au h1 { font-size: 20px; }
  .aj { width: 100%; margin: 0; border-radius: 0; border-left: 0; border-right: 0; grid-template-columns: 1fr; }
  .ah { border-right: 0 !important; border-bottom: 1px solid #e9e5f6 !important; }
  .ah:last-child { border-bottom: 0 !important; }
  .a1u { flex-direction: column; }
  .a1u .aI { width: 100%; }
}

@media (max-width: 430px) {
  .a8l img { width: 132px; }
  .a5i h1, .a1J h1 { font-size: 19px; }
  .aE { min-height: 178px; }
  .a9e { width: 126px; margin-right: -16px; }
  .a2O { font-size: 25px; }
  .a2N .aI { min-height: 35px; padding: 0 14px; font-size: 9px; }
  .a7t { min-height: 103px; }
  .a5v { grid-template-columns: 32px 1fr 32px; }
  .a5v code { display: none; }
  .a4H { gap: 7px; }
  .a4H > strong { font-size: 8px; }
  .a4E { font-size: 7px; }
  .a37 { align-items: flex-start; }
  .a34 { gap: 10px; }
  .a6L { padding: 17px; }
  .a5Q { grid-template-columns: 1fr 1fr; }
  .au { margin-bottom: 18px; }
  .an { max-width: 100%; }
}

/* =========================================================
   V4 — Client fidelity + marketplace polish
   ========================================================= */
:root {
  --primary: #6436e8;
  --primary-2: #5b35dd;
  --primary-3: #7b56ef;
  --primary-soft: #f5f2ff;
  --primary-soft-2: #eee8ff;
  --green: #25ad66;
  --green-2: #179b55;
  --green-soft: #effaf4;
  --ink: #171923;
  --text: #343845;
  --muted: #747b88;
  --faint: #a2a8b2;
  --line: #e7e9ef;
  --line-soft: #f0f1f5;
  --surface: #ffffff;
  --page: #ffffff;
  --sidebar: 238px;
  --topbar: 76px;
  --radius: 13px;
  --radius-sm: 9px;
  --shadow: 0 4px 18px rgba(38, 32, 69, .035);
  --shadow-hover: 0 10px 30px rgba(38, 32, 69, .07);
}

html { font-size: 16px; }
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, input, button, select, textarea { letter-spacing: -.01em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(100,54,232,.16);
  outline-offset: 2px;
}

.aa {
  width: var(--sidebar);
  padding: 25px 18px 21px;
  border-right-color: #ebedf2;
}
.a7j { padding: 0 2px 26px; }
.a7j img { width: 165px; }
.a7l { gap: 5px; }
.a7k {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #424956;
}
.a7k iconify-icon { font-size: 18px; color: #505865; }
.a7k.a38 { font-weight: 600; background: #f4f0ff; color: #6034de; }
.a7m {
  padding: 14px 13px 13px;
  border-radius: 11px;
  box-shadow: none;
  background: #fff;
}
.a7o { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.a7p {
  width: 38px; height: 38px; flex: 0 0 38px;
  margin: 0;
  border: 1px solid #e7e0ff;
  background: #f6f2ff;
}
.a7p iconify-icon { font-size: 20px; }
.a7n { min-width: 0; }
.a7m strong { font-size: 11.5px; line-height: 1.35; }
.a7m p { margin: 4px 0 0; font-size: 9.5px; line-height: 1.55; color: #737987; }
.a7m .aI { min-height: 34px; font-size: 10px; }

.ab {
  height: var(--topbar);
  min-height: var(--topbar);
  padding: 0 28px;
  border-bottom: 0;
  background: rgba(255,255,255,.98);
}
.a8k { gap: 12px; }
.a2R { width: 38px; height: 38px; }
.a2R iconify-icon { font-size: 20px; }
.a59 { top: 2px; right: 0; min-width: 17px; height: 17px; line-height: 13px; font-size: 8px; }
.a5W { min-width: 138px; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
.a5W:hover { background: #faf9fd; }
.a5S { width: 40px; height: 40px; }
.a5U strong { font-size: 11.5px; }
.a5U span { margin-top: 3px; font-size: 9.5px; }

.a5h {
  width: 100%;
  max-width: 1240px;
  padding: 18px 28px 42px;
}
.a5j { margin-bottom: 22px; }
.a5i h1, .a1J h1 {
  font-size: 23px;
  letter-spacing: -.55px;
  font-weight: 700;
}
.a5i p { margin-top: 6px; font-size: 10.5px; color: #6f7683; }
.a1J { margin-bottom: 18px; }
.a1J .a21 { font-size: 10.5px; font-weight: 500; }
.a1J h1 { font-size: 21px; }

.a7T {
  border-color: #e8e9ee;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.a7T:hover { box-shadow: 0 8px 28px rgba(42,33,76,.045); }
.a6V { margin-bottom: 16px; }
.a6V h2, .a6V h3 { font-size: 12.5px; font-weight: 650; }
.a6V p { font-size: 9.5px; }
.a27 { font-size: 10px; color: #68707d; }
.a8g { font-size: 9.5px; }

.aI {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.aM { min-height: 45px; font-size: 11.5px; }
.aR { min-height: 32px; font-size: 9.5px; }
.aU { min-height: 28px; font-size: 9px; }
.aO { background: linear-gradient(90deg,#5d35df,#6436e8 55%,#5d42e5); box-shadow: none; }
.aO:hover { box-shadow: 0 7px 18px rgba(92,54,224,.18); }
.aN { border-color: #dfe1e7; }
.a7A { font-size: 8.5px; padding: 4px 8px; }
.a54 { font-size: 9.5px; padding: 12px 13px; }
.a54.a1n { font-size: 9px; }
.a2q { margin-bottom: 6px; font-size: 10.5px; font-weight: 600; }
.a2m { min-height: 44px; border-radius: 7px; border-color: #e0e3e9; }
.a2m input, .a2m select, .a2m textarea { font-size: 11px; }
.a2m:focus-within { border-color: #a796eb; box-shadow: 0 0 0 3px rgba(100,54,232,.08); }

/* Dashboard */
.a1I { grid-template-columns: minmax(0, 1.8fr) minmax(300px, .78fr); gap: 14px; }
.a1K, .a1L { gap: 14px; }
.aE { min-height: 188px; padding: 22px 24px; }
.a2O { margin-top: 3px; font-size: 29px; letter-spacing: -.9px; }
.a8x { margin-top: 7px; font-size: 9px; }
.a2N { margin-top: 15px; }
.a9e { width: 205px; }
.a7u { gap: 10px; }
.a7t { min-height: 96px; padding: 13px 14px; }
.a7v { width: 31px; height: 31px; margin-bottom: 8px; }
.a7v iconify-icon { font-size: 16px; }
.a7t > span:not(.a7v) { font-size: 8.5px; }
.a7t > strong { margin-top: 3px; font-size: 12px; }
.a19, .a6n { padding: 16px; }
.a4 { min-height: 57px; }
.a1 strong { font-size: 10px; }
.a1 span { font-size: 8px; }
.a0 { font-size: 9.5px; }

/* Plans / forms / wallet */
.a5D { gap: 10px; }
.a5B { min-height: 150px; padding: 17px; cursor: pointer; }
.a5B:hover { border-color: #d8d0f7; transform: translateY(-1px); }
.a5F { font-size: 9px; }
.a5G { font-size: 16px; }
.a5H { font-size: 12px; }
.a5L { padding: 18px; }
.a2k, .a7H, .aV, .a5u { padding: 20px; }
.a73 { min-height: 61px; padding: 10px 12px; }
.a77 strong { font-size: 10.5px; }
.a77 small { font-size: 8.8px; }
.a78 small { font-size: 8px; }
.a78 strong { font-size: 9.5px; }
.aG strong { font-size: 18px; }
.a9g, .aH { padding: 20px; }
.a9q { font-size: 27px; }

/* Transactions */
.a8w { max-width: 100%; padding: 15px 18px 18px; }
.a8p { gap: 5px; }
.a8p button { min-height: 32px; font-size: 9.5px; }
.a8v {
  min-height: 64px;
  padding: 4px 2px;
  cursor: pointer;
  border-radius: 7px;
  transition: background .16s ease;
}
.a8v:hover { background: #fbfaff; }
.a8n strong { font-size: 10px; }
.a8n span { font-size: 8px; }
.a8m { font-size: 10px; }
.a8v .a6J { color: #a3a8b1; font-size: 15px; margin-left: 4px; }

/* Investments */
.a1s { max-width: 940px; }
.a32 { padding: 18px; }
.a35 { font-size: 11px; }
.a37 > div span { font-size: 9px; }
.a34 span { font-size: 8.5px; }
.a34 strong { font-size: 10px; }
.a36 { font-size: 8.5px; }

/* Missions / loyalty */
.a4H > strong { font-size: 10px; }
.a4E { font-size: 9px; }
.a4r > span, .a3T > div > span { font-size: 9px; }
.a4p > div strong { font-size: 10px; }
.a4p > div span { font-size: 8.5px; }

/* Salary & rewards — match supplied UI */
.a6N { gap: 16px; }
.a6L { padding: 22px; min-height: 352px; }
.a6M { align-items: center; }
.a6P { width: 40px; height: 40px; border-radius: 9px; }
.a6P iconify-icon { font-size: 20px; }
.a6S strong { font-size: 12px; font-weight: 650; }
.a6S span { font-size: 9px; }
.a6Q { margin: 24px 0 8px; }
.a6Q > span { font-size: 9.5px; }
.a6Q > div { margin-top: 5px; }
.a6Q > div strong { font-size: 22px; font-weight: 650; }
.a6Q > div span { font-size: 11px; }
.a63 { height: 6px; }
.a6O { margin: 8px 0 18px; font-size: 9px; }
.a6R { padding: 18px 0; margin-bottom: 15px; }
.a6R span { font-size: 8.8px; }
.a6R strong { margin-top: 5px; font-size: 12px; }
.a6L .aI { min-height: 43px; }
.a6L .a54 { margin-top: 14px; min-height: 48px; align-items: center; }
.a5P, .a7X { padding: 20px; margin-top: 16px; }
.a5Q { gap: 14px; }
.a5R > span { width: 43px; height: 43px; margin-bottom: 8px; }
.a5R strong { font-size: 9.5px; font-weight: 650; }
.a5R p { font-size: 8px; line-height: 1.45; max-width: 130px; }
.a1M th { padding: 10px 9px; font-size: 8.5px; font-weight: 550; }
.a1M td { padding: 10px 9px; font-size: 9.5px; }
.a7X .a1M td { font-size: 9.5px; }
.a2Q, .a53 { padding: 17px; }
.a53 li { font-size: 9px; margin-bottom: 8px; }

/* Team */
.a6z, .a8b, .a7Y, .a1h { max-width: 100%; }
.a6z { padding: 18px; }
.a8a { min-height: 104px; padding: 15px; }
.a8a > span { font-size: 8.5px; }
.a8a > strong { font-size: 17px; }
.a8a > small, .a8a > a { font-size: 8.5px; }
.a7Y, .a1h { padding: 18px; }
.a86 h3 { font-size: 10px; }
.a8c { min-width: 640px; }
.a88 { cursor: pointer; }
.a88:hover td { background: #fbfaff; }
.a82 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.a7Z { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.a7Z span { display: block; font-size: 8.5px; color: var(--muted); }
.a7Z strong { display: block; margin-top: 5px; font-size: 15px; color: var(--primary); }

/* Payment flow */
.a1r { max-width: 720px; }
.a2g { margin-bottom: 18px; }
.a2f strong { font-size: 9px; }
.a2f span { font-size: 9px; }
.a2f.a3b span { background: #eaf8f0; color: var(--green); }
.a2f.a3b::after { background: #ccbdf8; }
.a2e { display: none; }
.a2e.a38 { display: block; }
.a2b { display: flex; gap: 10px; margin-top: 4px; }
.a2b .aI { flex: 1; }
.a1p { padding: 14px; border: 1px solid #e8e9ef; border-radius: 9px; background: #fbfbfd; }
.a1q { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 38px; border-bottom: 1px solid #eceef2; font-size: 9.5px; }
.a1q:last-child { border-bottom: 0; }
.a1q span { color: var(--muted); }
.a1q strong { color: var(--ink); }
.a2h { text-align: center; padding: 18px 8px 6px; }
.a2i { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.a2i iconify-icon { font-size: 34px; }
.a2h h2 { margin: 0; font-size: 17px; }
.a2h p { margin: 7px auto 18px; max-width: 430px; color: var(--muted); font-size: 10px; }

/* Auth */
.ozo-auth-body { background: #f8f9fc; }
.ar { padding: 14px 18px 18px; }
.ae {
  width: min(100%, 520px);
  min-height: 735px;
  padding: 22px 30px 28px;
  border-radius: 15px;
  border-color: #e7e8ee;
  box-shadow: 0 12px 38px rgba(36,32,63,.055);
}
.al img { width: 165px; }
.a3K { font-size: 10px; }
.an { max-width: 405px; margin-top: 30px; }
.ap { margin-top: 16px; }
.ac { width: 195px; height: 165px; }
.ap .ac { width: 178px; height: 145px; }
.au { margin-bottom: 20px; }
.au h1 { font-size: 24px; font-weight: 700; }
.au p { max-width: 350px; font-size: 10.5px; }
.ak .a2r { margin-bottom: 9px; }
.ak .a2m { min-height: 44px; }
.ak .a2m input { font-size: 10.5px; }
.am a { font-size: 10px; }
.at { font-size: 10px; }
.a1f { font-size: 9.5px; }
.aj { width: min(100%, 1090px); margin-top: 13px; }
.ah { min-height: 78px; padding: 13px 16px; }
.ah strong { font-size: 10px; }
.ah span:not(.ai) { font-size: 8.5px; }

/* Country selector */
.a5A { overflow: visible; }
.a1B { position: relative; margin-left: 38px; height: 28px; flex: 0 0 auto; }
.a1F { height: 28px; padding: 0 10px 0 0; border: 0; border-right: 1px solid #e2e4e8; background: transparent; display: inline-flex; align-items: center; gap: 5px; color: #515865; font-size: 9.5px; }
.a1F img.a2a { width:18px;height:14px;object-fit:cover;border-radius:3px;flex:0 0 auto; }
.a1F iconify-icon:last-child { font-size: 11px; color: #8e949d; }
.a1z { position: absolute; top: 34px; left: -36px; width: 235px; max-height: 250px; overflow-y: auto; padding: 6px; border: 1px solid #e1e3e8; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(31,35,48,.13); z-index: 150; display: none; }
.a1z.a3p { display: block; }
.a1x { width: 100%; min-height: 38px; border: 0; border-radius: 7px; background: transparent; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 0 9px; text-align: left; color: #3f4652; font-size: 9.5px; }
.a1x:hover { background: #f7f5ff; color: var(--primary); }
.a1x img.a1y { width:22px;height:16px;object-fit:cover;border-radius:3px;border:1px solid #edf0f5; }
.a1x small { color: #8b919b; }
.a5A input { padding-left: 10px; }

/* Dropdowns */
.a8G { position: fixed; min-width: 230px; padding: 8px; border: 1px solid #e5e7ec; border-radius: 11px; background: #fff; box-shadow: 0 16px 38px rgba(30,33,45,.13); z-index: 500; display: none; }
.a8G.a3p { display: block; }
.a5M { padding: 8px 9px 10px; border-bottom: 1px solid #eff0f3; }
.a5M strong { display: block; font-size: 10.5px; }
.a5M span { display: block; margin-top: 2px; font-size: 8.5px; color: var(--muted); }
.a5N { min-height: 39px; padding: 0 9px; border-radius: 7px; display: flex; align-items: center; gap: 9px; font-size: 9.5px; color: #4e5562; }
.a5N:hover { background: #f8f6ff; color: var(--primary); }
.a5N iconify-icon { font-size: 17px; }
.a5a { display: grid; grid-template-columns: 32px 1fr; gap: 9px; padding: 9px; border-radius: 8px; }
.a5a:hover { background: #faf9fd; }
.a5a > span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.a5a strong { display: block; font-size: 9px; }
.a5a small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }

/* Modal + toast */
.a8D { position: fixed; inset: 0; padding: 20px; background: rgba(18,20,28,.42); backdrop-filter: blur(2px); z-index: 700; display: none; align-items: center; justify-content: center; }
.a8D.a3p { display: flex; }
.a8B { width: min(100%, 520px); max-height: calc(100vh - 40px); overflow: auto; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(18,20,28,.24); }
.a8F { min-height: 58px; padding: 0 18px; border-bottom: 1px solid #eceef2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a8F h3 { margin: 0; font-size: 13px; }
.a8E { padding: 18px; }
.a8A { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; background: #faf9ff; margin-bottom: 14px; }
.a8A > span { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--primary); }
.a8A iconify-icon { font-size: 22px; }
.a8A strong { display: block; font-size: 12px; }
.a8A small { display: block; margin-top: 2px; font-size: 9px; color: var(--muted); }
.a1N { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.a1O { padding: 11px; border: 1px solid #eceef2; border-radius: 9px; }
.a1O span { display: block; font-size: 8px; color: var(--muted); }
.a1O strong { display: block; margin-top: 4px; font-size: 10px; word-break: break-word; }
.a8C { display: flex; gap: 9px; padding: 0 18px 18px; }
.a8C .aI { flex: 1; }
.a8I { position: fixed; top: 18px; right: 18px; z-index: 900; display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.a8H { min-width: 280px; max-width: 360px; padding: 12px 13px; border: 1px solid #e4e6eb; border-radius: 10px; background: #fff; box-shadow: 0 15px 40px rgba(30,33,45,.13); display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: start; opacity: 0; transform: translateY(-8px); transition: .2s ease; }
.a8H.a3A { opacity: 1; transform: translateY(0); }
.a8H > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.a8H strong { display: block; font-size: 9.5px; }
.a8H small { display: block; margin-top: 2px; font-size: 8.5px; color: var(--muted); }

/* Form validation */
.a2m.a2C { border-color: #e27a7a; box-shadow: 0 0 0 3px rgba(220,90,90,.08); }
.a2l { display: block; margin-top: 5px; color: #cf5757; font-size: 8px; }

@media (min-width: 1500px) {
  .a5h { max-width: 1300px; }
}

@media (max-width: 1280px) {
  :root { --sidebar: 220px; }
  .a7j img { width: 156px; }
  .a5h { max-width: 1080px; padding-left: 24px; padding-right: 24px; }
  .a1I { grid-template-columns: minmax(0,1.7fr) minmax(280px,.8fr); }
}

@media (max-width: 1050px) {
  .a5h { max-width: 880px; }
  .a1I { grid-template-columns: 1fr; }
  .a1L { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .a6N { grid-template-columns: 1fr 1fr; }
  .a6L { min-height: 340px; }
}

@media (max-width: 860px) {
  .a5h { max-width: 760px; padding: 18px 15px 28px; }
  .a5i h1, .a1J h1 { font-size: 20px; }
  .a5i p { font-size: 10px; }
  .a1L { display: flex; }
  .a6N { grid-template-columns: 1fr; }
  .a6L { min-height: auto; }
  .ae { min-height: auto; }
  .a8I { left: 12px; right: 12px; top: 12px; }
  .a8H { min-width: 0; max-width: none; width: 100%; }
}

@media (max-width: 620px) {
  body { font-size: 13px; }
  .aE { min-height: 185px; }
  .a9e { width: 140px; }
  .a82 { grid-template-columns: 1fr; }
  .a1N { grid-template-columns: 1fr; }
  .ae { padding: 16px 18px 22px; }
  .an { margin-top: 18px; }
  .au h1 { font-size: 21px; }
  .a1z { left: -38px; width: 220px; }
  .a2b { flex-direction: column-reverse; }
}

/* Final readable type scale: no micro-copy that disappears at common browser zooms */
.a1e, .a1d { font-size: 9px; }
.a1b small { font-size: 9px; }
.a1b strong { font-size: 11px; }
.a2U span:not(.a2T) { font-size: 9.5px; }
.a2U strong { font-size: 11px; }
.aG span { font-size: 9.5px; }
.aG small { font-size: 9px; }
.a6 button { font-size: 9.5px; }
.a98 > span:not(.a9o) { font-size: 9.5px; }
.a5v > div strong { font-size: 10.5px; }
.a5v > div span, .a5v code { font-size: 9px; }
.a72 button { font-size: 10px; }
.a37 > div span, .a34 span, .a36 { font-size: 9.5px; }
.a34 strong { font-size: 10.5px; }
.a1V span, .aW span, .a4x span:not(.a2P), .a4E, .a61 p { font-size: 9.5px; }
.a4H > strong { font-size: 10.5px; }
.a4r > span, .a3T > div > span, .a4o .a6V span, .a4p > div span { font-size: 9.5px; }
.a4p > div strong { font-size: 10.5px; }
.a6S strong { font-size: 13px; }
.a6S span, .a6Q > span, .a6O, .a6R span { font-size: 10px; }
.a6R strong { font-size: 13px; }
.a5R strong { font-size: 10.5px; }
.a5R p { font-size: 9px; }
.a1M th { font-size: 10px; }
.a1M td { font-size: 11px; }
.a3U { font-size: 9px; }
.a53 li { font-size: 9.5px; }
.a7g, .a8a > span, .a8a > small, .a8a > a, .a1g, .a1i p, .a2f strong, .a7D > div, .aA > div:first-child span, .aA p { font-size: 9.5px; }
.a7R > p { font-size: 10.5px; }
.a7K small { font-size: 9px; }
.a7K strong, .a7a strong, .a6X strong { font-size: 10.5px; }
.a7a span, .a6X span:not(.a7b) { font-size: 9.5px; }
.ak .a2m input { font-size: 12px; }
.au p, .am a, .at, .a1f, .a1F { font-size: 10.5px; }
.ah strong { font-size: 10.5px; }
.ah span:not(.ai) { font-size: 9.5px; }
.a4Y { font-size: 9.5px; }

.a8H.a3i > span { background: #fff2f2; color: #d85c5c; }
.a62.a3B { width: 0; }
.a3Q { margin: 0; color: #656c78; font-size: 11px; line-height: 1.7; }
.a3Q p { margin: 0 0 10px; }
.a3Q p:last-child { margin-bottom: 0; }
.a3Q h2, .a3Q h3 { margin: 14px 0 7px; color: #25213a; line-height: 1.35; }
.a3Q h2 { font-size: 15px; }
.a3Q h3 { font-size: 13px; }
.a3Q ul, .a3Q ol { margin: 7px 0 10px; padding-left: 20px; }
.a3Q li { margin: 3px 0; }
.a3Q ol > li[data-list="bullet"] { list-style-type: disc; }
.a3Q blockquote { margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--primary-soft); border-radius: 0 7px 7px 0; }
.a3Q a { color: var(--primary); text-decoration: underline; }
.a3Q .ql-align-center { text-align: center; }
.a3Q .ql-align-right { text-align: right; }
.a3Q .ql-align-justify { text-align: justify; }

.a62[data-ozo-progress="100"] { width: 100%; }

.a2P.a3t { background: var(--primary-soft); color: var(--primary); }

/* =========================================================
   V5 POLISH — Client fidelity + marketplace readability
   ========================================================= */
:root {
  --sidebar: 238px;
  --topbar: 76px;
  --radius: 13px;
  --shadow: 0 7px 24px rgba(37, 29, 66, .045);
  --shadow-hover: 0 12px 30px rgba(37, 29, 66, .07);
}
body {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.006em;
}

/* Sidebar: sized and composed like the client reference */
.aa { padding: 23px 16px 18px; }
.a7j { padding: 0 3px 24px; }
.a7j img { width: 166px; }
.a7l { gap: 4px; }
.a7k {
  min-height: 43px;
  padding: 0 11px;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.2;
}
.a7k iconify-icon { font-size: 19px; }
.a7m {
  margin-top: auto;
  padding: 13px 12px 12px;
  border: 1px solid #eeeaf9;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(73, 51, 128, .055);
}
.a7o { gap: 9px; margin-bottom: 11px; align-items: flex-start; }
.a7p {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #e7defe;
  background: #f7f3ff;
}
.a7p iconify-icon { font-size: 18px; }
.a7m strong { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.a7m p { margin: 3px 0 0; font-size: 10.5px; line-height: 1.5; color: #707684; }
.a7m .aI { min-height: 34px; font-size: 11px; border-radius: 7px; }

/* Topbar + page type */
.ab { padding: 0 30px; }
.a5U strong { font-size: 13px; }
.a5U span { font-size: 10.5px; }
.a5h { max-width: 1280px; padding: 29px 32px 48px; }
.a5j { margin-bottom: 24px; }
.a5i h1, .a1J h1 { font-size: 27px; font-weight: 750; letter-spacing: -.55px; }
.a1J h1 { font-size: 25px; }
.a1J .a21 { font-size: 12.5px; }
.a5i p { margin-top: 6px; font-size: 12.5px; line-height: 1.55; }
.a27 { font-size: 11.5px; }
.a6V h2, .a6V h3 { font-size: 15px; }
.a6V p { font-size: 11.5px; }
.a8g { font-size: 11.5px; }

/* Forms */
.a2r { margin-bottom: 15px; }
.a2q { margin-bottom: 7px; font-size: 12px; font-weight: 650; }
.a2m { min-height: 48px; border-radius: 8px; }
.a2m input { height: 46px; }
.a2m input,
.a2m select,
.a2m textarea { font-size: 13px; line-height: 1.4; }
.a2m.a2E > iconify-icon { font-size: 18px; left: 14px; }
.a2m.a2E input { padding-left: 44px; }
.a2m textarea { min-height: 128px; padding-top: 13px; padding-bottom: 13px; }
.a2l { margin-top: 6px; font-size: 10.5px; font-weight: 550; }
.a1f { gap: 9px; font-size: 11.5px; line-height: 1.55; }
.a1f input { width: 15px; height: 15px; margin-top: 1px; }

/* Buttons + pills */
.aI { min-height: 42px; padding: 0 18px; font-size: 12.5px; border-radius: 8px; }
.aM { min-height: 48px; font-size: 13px; }
.aR { min-height: 35px; font-size: 11px; }
.aU { min-height: 31px; font-size: 10.5px; padding: 0 11px; }
.a28 { min-height: 35px; font-size: 11px; }
.a7A { font-size: 10px; padding: 5px 9px; }
.a8z { font-size: 9.5px; }
.a54 { padding: 13px 15px; font-size: 11.5px; line-height: 1.55; }
.a54.a1n { font-size: 10.5px; }

/* Dashboard */
.aE { min-height: 225px; padding: 27px 28px; }
.a2O { font-size: 36px; }
.a8x { font-size: 11px; }
.a7t { min-height: 118px; padding: 16px; }
.a7t > span:not(.a7v) { font-size: 10.5px; }
.a7t > strong { margin-top: 3px; font-size: 15px; }
.a1 strong { font-size: 12px; }
.a1 span { font-size: 10px; }
.a0 { font-size: 11.5px; }
.a1e, .a1d { font-size: 9.5px; }

/* Plans / investment / wallet */
.a5F { font-size: 11.5px; }
.a5G { font-size: 18px; }
.a5H { font-size: 14px; }
.a2U span:not(.a2T), .aG span { font-size: 10.5px; }
.a2U strong { font-size: 12px; }
.aG small { font-size: 10px; }
.a77 strong { font-size: 12.5px; }
.a77 small { font-size: 10.5px; }
.a78 small { font-size: 9.5px; }
.a78 strong { font-size: 11px; }
.a6 button { font-size: 11px; }
.a7I, .a7J, .a7D > div { font-size: 11.5px; }
.a98 > span:not(.a9o) { font-size: 11px; }
.a98 strong { font-size: 12px; }
.a5v > div strong { font-size: 12px; }
.a5v > div span, .a5v code { font-size: 10px; }

/* Tabs */
.a72 { gap: 5px; }
.a8p button, .a72 button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 550;
}
.a8p button.a38, .a72 button.a38 { font-weight: 700; }

/* Tables + list typography */
.a1M th { padding: 11px 10px; font-size: 10.5px; letter-spacing: .005em; }
.a1M td { padding: 11px 10px; font-size: 11.5px; line-height: 1.45; }
.a8v { min-height: 66px; }
.a8n strong { font-size: 12px; }
.a8n span { font-size: 10px; }
.a8m { font-size: 12px; }
.a35 { font-size: 12.5px; }
.a37 > div span { font-size: 10.5px; }
.a34 span, .a36 { font-size: 10px; }
.a34 strong { font-size: 11.5px; }

/* Missions / loyalty */
.a4x span:not(.a2P) { font-size: 10px; }
.a4x strong { font-size: 13.5px; }
.a4H > strong { font-size: 11.5px; }
.a4E { font-size: 10.5px; }
.a61 p { font-size: 10.5px; }
.a4r > span, .a3T > div > span { font-size: 10.5px; }
.a4p > div strong { font-size: 12px; }
.a4p > div span { font-size: 10px; }

/* Salary & rewards: closer to the supplied client screen */
.a6N { gap: 18px; }
.a6L { min-height: 360px; padding: 22px; }
.a6S strong { font-size: 13.5px; }
.a6S span { font-size: 10.5px; }
.a6Q > span { font-size: 10.5px; }
.a6Q > div strong { font-size: 23px; }
.a6Q > div span { font-size: 12px; }
.a6O { font-size: 10px; }
.a6R span { font-size: 10px; }
.a6R strong { font-size: 13.5px; }
.a5R strong { font-size: 11px; }
.a5R p { font-size: 9.8px; line-height: 1.5; }
.a53 li { font-size: 10.5px; line-height: 1.6; }
.a3U { font-size: 9.5px; }

/* Team */
.a7g { font-size: 10.5px; }
.a8a > span, .a8a > small, .a8a > a { font-size: 10.5px; }
.a8a > strong { font-size: 19px; }
.a86 h3 { font-size: 12px; }
.a1g { font-size: 10px; }
.a1i h3 { font-size: 12px; }
.a1i p { font-size: 10.5px; }
.a8e { display: grid; grid-template-columns: minmax(220px, 1fr) 170px; gap: 10px; align-items: end; padding: 14px 0 4px; }
.a89 { min-height: 40px; }
.a89 input { height: 38px; font-size: 12px; }
.a84 { height: 40px; width: 100%; border: 1px solid #e0e3e9; border-radius: 8px; background: #fff; color: #454c58; padding: 0 11px; font-size: 11.5px; outline: none; }
.a84:focus { border-color: #a796eb; box-shadow: 0 0 0 3px rgba(100,54,232,.08); }
.a83 { display: none; padding: 18px 10px; text-align: center; color: var(--muted); font-size: 11px; }
.a83.a3A { display: block; }
.a88 { cursor: pointer; }
.a88:hover td { background: #fbfaff; }

/* Flow / deposit / withdrawal */
.a2f span { font-size: 11px; }
.a2f strong { font-size: 10.5px; }
.a1q { min-height: 41px; font-size: 11px; }
.a2h h2 { font-size: 19px; }
.a2h p { font-size: 11px; }
.aA > div:first-child span, .aA p { font-size: 10.5px; }

/* Support / settings */
.a7R > p { font-size: 11.5px; }
.a7K small { font-size: 10px; }
.a7K strong { font-size: 11.5px; }
.a7a strong, .a6X strong { font-size: 11.5px; }
.a7a span, .a6X span:not(.a7b) { font-size: 10px; }

/* Authentication */
.ar { padding: 16px 18px 20px; }
.ae {
  width: min(100%, 550px);
  min-height: 750px;
  padding: 23px 32px 28px;
}
.al img { width: 170px; }
.a3K { font-size: 11.5px; }
.an { max-width: 430px; margin-top: 28px; }
.ap { margin-top: 13px; }
.ac { width: 198px; height: 166px; }
.ap .ac { width: 176px; height: 143px; }
.au { margin-bottom: 22px; }
.au h1 { font-size: 27px; font-weight: 750; }
.au p { max-width: 365px; font-size: 12px; line-height: 1.55; }
.ak .a2r { margin-bottom: 11px; }
.ak .a2m { min-height: 48px; }
.ak .a2m input { height: 46px; font-size: 13px; }
.am a { font-size: 11.5px; }
.ag { font-size: 11px; }
.at { font-size: 11.5px; }
.aj { width: min(100%, 1100px); }
.ah { min-height: 86px; padding: 15px 17px; }
.ah strong { font-size: 11.5px; }
.ah span:not(.ai) { font-size: 10px; }

/* Country picker */
.a1B { height: 32px; margin-left: 40px; }
.a1F { height: 32px; font-size: 11.5px; gap: 6px; }
.a1F img.a2a { width:20px;height:15px;object-fit:cover;border-radius:3px; }
.a1z { top: 38px; width: 290px; max-height: 330px; padding: 7px; }
.a1A { max-height: 265px; overflow-y: auto; padding-right: 2px; }
.a1E { position: sticky; top: 0; z-index: 2; padding: 2px 2px 7px; background: #fff; }
.a1D { min-height: 38px; border: 1px solid #e2e4e9; border-radius: 7px; display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.a1D iconify-icon { color: #858b96; font-size: 15px; }
.a1D input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 11.5px; color: #3d4450; }
.a1x { min-height: 40px; grid-template-columns: 25px 1fr auto; font-size: 11.5px; padding: 0 9px; }
.a1x iconify-icon { font-size: 19px; }
.a1x small { font-size: 10.5px; }
.a1w { display: none; padding: 14px 10px; text-align: center; color: var(--muted); font-size: 11px; }
.a1w.a3A { display: block; }

/* Popovers, modal, toast */
.a5M strong { font-size: 12px; }
.a5M span { font-size: 10px; }
.a5N { min-height: 42px; font-size: 11.5px; }
.a5a strong { font-size: 10.5px; }
.a5a small { font-size: 9.5px; }
.a8B { width: min(100%, 560px); }
.a8F { min-height: 62px; }
.a8F h3 { font-size: 15px; }
.a8E { padding: 20px; }
.a8A strong { font-size: 13px; }
.a8A small { font-size: 10px; }
.a1O span { font-size: 9.5px; }
.a1O strong { font-size: 11.5px; }
.a8H { min-width: 310px; padding: 13px 14px; }
.a8H strong { font-size: 11px; }
.a8H small { font-size: 10px; line-height: 1.45; }

/* FAQ / tickets / KYC additions */
.a7O { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 16px; margin-top: 16px; }
.a23, .a8i, .a3C { padding: 20px; }
.a24 { border-top: 1px solid var(--line-soft); }
.a24:first-of-type { border-top: 0; }
.a25 { width: 100%; min-height: 48px; border: 0; background: transparent; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; color: var(--ink); font-size: 12px; font-weight: 650; }
.a25 iconify-icon { font-size: 17px; color: #858b96; transition: transform .18s ease; }
.a24.a3p .a25 iconify-icon { transform: rotate(180deg); color: var(--primary); }
.a22 { display: none; padding: 0 28px 14px 0; color: var(--muted); font-size: 10.8px; line-height: 1.65; }
.a24.a3p .a22 { display: block; }
.a8j { min-height: 54px; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; cursor: pointer; }
.a8j:first-of-type { border-top: 0; }
.a8j strong { display: block; font-size: 11.5px; }
.a8j small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.a3G { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 18px; border: 1px solid #e7e4f6; border-radius: 10px; background: #faf9ff; }
.a3H { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--primary); }
.a3H iconify-icon { font-size: 22px; }
.a3G strong { display: block; font-size: 12px; }
.a3G span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.a3J { min-height: 120px; border: 1px dashed #cfc8e9; border-radius: 10px; background: #fcfbff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px; text-align: center; color: var(--muted); cursor: pointer; }
.a3J:hover { border-color: #a894eb; background: #faf8ff; }
.a3J iconify-icon { font-size: 26px; color: var(--primary); }
.a3J strong { color: var(--ink); font-size: 11.5px; }
.a3J span { font-size: 10px; }
.a3J input { display: none; }
.a3D { color: var(--green); font-weight: 650; }

@media (max-width: 1050px) {
  .a5h { padding-left: 24px; padding-right: 24px; }
  .a7O { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body { font-size: 14px; }
  .a5h { padding: 19px 15px 32px; }
  .a5i h1, .a1J h1 { font-size: 22px; }
  .a5i p { font-size: 11.5px; }
  .a8e { grid-template-columns: 1fr; }
  .ae { width: 100%; }
}
@media (max-width: 620px) {
  .ae { padding: 18px 18px 24px; }
  .au h1 { font-size: 23px; }
  .au p { font-size: 11.5px; }
  .ak .a2m input { font-size: 12.5px; }
  .ah strong { font-size: 11px; }
  .ah span:not(.ai) { font-size: 9.8px; }
  .a1z { left: -40px; width: 275px; }
  .a1M th { font-size: 10px; }
  .a1M td { font-size: 11px; }
}

.a2n { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 12px; }
.a80 { cursor: pointer; }
.a80:hover td { background: #fbfaff; }
@media (max-width: 620px) { .a2n { grid-template-columns: 1fr; } }

/* V5.1 final readability floor */
.a1e, .a1d, .a1b small { font-size: 10.5px; }
.a78 small, .a3U, .a5a small, .a1O span, .a8j small { font-size: 10.5px; }
.a5R p, .a53 li, .a4p > div span, .a34 span, .a36 { font-size: 10.5px; }
.ah span:not(.ai), .a7K small, .a7a span, .a6X span:not(.a7b) { font-size: 10.5px; }
.a4Y { font-size: 10.5px; }
.a1V span, .aW span, .a61 p { font-size: 10.5px; }
.a8a > span, .a8a > small, .a8a > a { font-size: 10.5px; }
.a1x small { font-size: 10.5px; }
.a8H small { font-size: 10.5px; }
@media (max-width: 620px) {
  .a4Y { font-size: 10px; }
  .a5i p, .a6V p { font-size: 11px; }
}
.as { margin-top: 8px; display: inline-flex; }
.a8H.a3l > span { background: #f3f0ff; color: var(--primary); }

html, body { overflow-x: hidden; }
@media (max-width: 860px) {
  .a4X { visibility: hidden; pointer-events: none; }
  .a4X.a3p { visibility: visible; pointer-events: auto; }
}

/* =========================================================
   V6 — Client review video refinements
   ========================================================= */

/* Readability: remove micro typography and bring hierarchy closer to client UI */
body { font-size: 15px; }
.a7k { font-size: 14px; }
.a7m strong { font-size: 13px; }
.a7m p { font-size: 11.5px; line-height: 1.55; }
.a7m .aI { font-size: 11.5px; }
.a5U strong { font-size: 13px; }
.a5U span { font-size: 11px; }
.a5i h1, .a1J h1 { font-size: 27px; }
.a5i p, .a1J .a21 { font-size: 13px; }
.a6V h2, .a6V h3 { font-size: 15.5px; }
.a6V p, .a27, .a8g { font-size: 12px; }
.a2q { font-size: 12.5px; }
.a2m input, .a2m select, .a2m textarea { font-size: 13px; }
.aI { font-size: 12.5px; }
.aR { font-size: 11.5px; }
.aU { font-size: 11px; }
.a7A, .a8z { font-size: 10.5px; }
.a54, .a54.a1n { font-size: 11.5px; }

/* Dashboard / cards */
.a7t > span:not(.a7v), .a2U span:not(.a2T), .aG span,
.a98 > span:not(.a9o), .a5v > div span,
.a77 small, .a78 small, .a37 > div span,
.a34 span, .a36, .a4x span:not(.a2P),
.a4E, .a61 p, .a4r > span, .a3T > div > span,
.a4p > div span, .a6S span, .a6Q > span,
.a6O, .a6R span, .a5R p, .a53 li,
.a8a > span, .a8a > small, .a8a > a, .a1g,
.a1i p, .a2f strong, .a2f span, .a7K small,
.a7a span, .a6X span:not(.a7b), .a1O span,
.a5a small, .a8j small, .a8H small { font-size: 11px; }
.a7t > strong, .a2U strong, .a98 strong, .a5v > div strong,
.a77 strong, .a78 strong, .a34 strong,
.a4H > strong, .a4p > div strong, .a6S strong,
.a6R strong, .a5R strong, .a86 h3, .a1i h3,
.a7K strong, .a7a strong, .a6X strong,
.a5a strong, .a8j strong { font-size: 12.5px; }
.a1M th { font-size: 11.5px; }
.a1M td { font-size: 12.5px; }
.a8p button, .a72 button { font-size: 12px; }
.a8n strong, .a8m { font-size: 12.5px; }
.a8n span { font-size: 11px; }
.a1e, .a1d, .a1b small { font-size: 10.5px; }
.a1b strong { font-size: 12px; }

/* Sidebar must remain usable on short screens */
.aa {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d9d4e7 transparent;
}
.aa::-webkit-scrollbar { width: 6px; }
.aa::-webkit-scrollbar-thumb { background: #d9d4e7; border-radius: 999px; }
.a7l { flex: 0 0 auto; }
.a7m { flex: 0 0 auto; }
.a7o { align-items: center; }
.a7p {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  box-shadow: inset 0 0 0 1px rgba(100,54,232,.04);
}
.a7m .aI { min-height: 36px; }

/* Support contacts */
.a7M { color: inherit; text-decoration: none; position: relative; }
.a7M:hover { background: #fbfaff; }
.a7M .a7L { margin-left: auto; color: #9aa0aa; font-size: 16px; }
.a7M > span iconify-icon[icon="logos:whatsapp-icon"],
.a7M > span iconify-icon[icon="logos:telegram"] { font-size: 18px; }

/* Transaction pagination */
.a8t {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: 6px;
}
.a5l { display: flex; align-items: center; gap: 6px; }
.a5k {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #656c78;
  font-size: 11.5px;
  font-weight: 650;
  display: inline-grid;
  place-items: center;
}
.a5k:hover:not(:disabled), .a5k.a38 {
  border-color: #c9bdf3;
  color: var(--primary);
  background: var(--primary-soft);
}
.a5k:disabled { opacity: .4; cursor: not-allowed; }
.a5k iconify-icon { font-size: 17px; }
.a5m { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 11px; }

/* Recovery method selector */
.af { min-height: 720px; }
.ao { max-width: 455px; }
.a6t { display: grid; gap: 10px; margin-bottom: 16px; }
.a6q {
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid #e1e3e9;
  border-radius: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  gap: 12px;
  align-items: center;
  text-align: left;
  color: var(--ink);
}
.a6q:hover { border-color: #cfc4f2; background: #fcfbff; }
.a6q.a3x { border-color: #9d8ce7; background: #faf8ff; box-shadow: 0 0 0 3px rgba(100,54,232,.06); }
.a6s { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.a6s iconify-icon { font-size: 22px; }
.a6r { min-width: 0; display: flex; flex-direction: column; }
.a6r strong { font-size: 13px; }
.a6r small { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.a6q .a79 { justify-self: end; }

/* Auth width requested in review video */
.ae {
  width: min(calc(100% - 28px), 620px);
  padding-left: 38px;
  padding-right: 38px;
}
.an { max-width: 470px; }
.ak .a2m input { font-size: 13px; }
.au p, .am a, .at, .a1f, .a1F { font-size: 12px; }
.ah strong { font-size: 12px; }
.ah span:not(.ai) { font-size: 10.8px; }
.a1x { font-size: 12px; }
.a1x small { font-size: 11px; }

/* Mobile header + More drawer should behave like a real sidebar */
@media (max-width: 860px) {
  .ab {
    height: 66px;
    min-height: 66px;
    padding: 0 12px 0 14px;
    gap: 10px;
  }
  .a8l img { width: 140px; }
  .a8k { gap: 6px; margin-left: auto; }
  .a5W { padding: 0; min-width: 36px; }
  .a5S { width: 36px; height: 36px; }
  .a58 { width: 36px; height: 36px; }
  .a4Y { font-size: 10.5px; }
  .a4X {
    left: 0;
    right: auto;
    width: min(88vw, 340px);
    padding: 18px 16px 16px;
    box-shadow: 12px 0 34px rgba(31,41,55,.15);
    transform: translateX(-105%);
    overflow-y: auto;
  }
  .a4X.a3p { transform: translateX(0); }
  .a1Q { position: sticky; top: -18px; z-index: 2; background: #fff; padding-top: 2px; }
  .a1Q img { width: 158px; }
  .a1S { flex: 0 0 auto; overflow: visible; padding-top: 10px; }
  .a1R { min-height: 45px; font-size: 13px; }
  .a1R iconify-icon { font-size: 19px; }
  .a1U { margin-top: 16px; }
  .a5i h1, .a1J h1 { font-size: 23px; }
  .a5i p { font-size: 12px; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  .ab { padding-left: 12px; padding-right: 10px; }
  .a8l img { width: 132px; }
  .a5h { padding-left: 14px; padding-right: 14px; }
  .a5i h1, .a1J h1 { font-size: 22px; }
  .a6V h2, .a6V h3 { font-size: 14.5px; }
  .a1M th { font-size: 11px; }
  .a1M td { font-size: 12px; }
  .a8n strong, .a8m { font-size: 12px; }
  .a8n span { font-size: 10.5px; }
  .ar { padding: 8px 6px 14px; background: #f7f8fb; }
  .ae {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 20px 24px;
    border: 1px solid #e7e8ee;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(36,32,63,.05);
  }
  .an { width: 100%; max-width: 100%; }
  .au h1 { font-size: 24px; }
  .au p { font-size: 12px; }
  .aj { margin-top: 10px; border-radius: 12px; border-left: 1px solid #e9e5f6; border-right: 1px solid #e9e5f6; }
  .a6q { grid-template-columns: 38px 1fr 18px; min-height: 72px; padding: 11px 12px; }
  .a6s { width: 38px; height: 38px; }
  .a6r strong { font-size: 12.5px; }
  .a6r small { font-size: 11px; }
  .a5k { min-width: 34px; height: 34px; padding: 0 8px; }
}
body.a1T { overflow: hidden; }
.a2d .a2i { background: var(--red-soft); color: var(--red); }
.a2f { cursor: pointer; }
.a2f:not(.a38):not(.a3b) { cursor: default; }
@media (max-width: 430px) {
  .a2N .aI { min-height: 38px; padding: 0 14px; font-size: 11.5px; }
}

/* V6.1 — robust mobile drawer fallback */
@media (max-width: 860px) {
  .a4M {
    z-index: 200;
  }
  .a4Y[data-ozo-mobile-menu] {
    position: relative;
    z-index: 2;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .a4Z {
    z-index: 260;
  }
  .a4X {
    display: flex !important;
    z-index: 270;
    visibility: hidden;
    pointer-events: none;
    will-change: transform;
  }
  .a4X.a3p,
  body.a1T .a4X {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .a4Z.a3p,
  body.a1T .a4Z {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   V7 final interaction + visual QA overrides
   ========================================================= */
body { font-size: 14px; }
.a7k { font-size: 13px; }
.a7n strong { font-size: 12.5px; }
.a7n p { font-size: 11.5px; line-height: 1.5; }
.a5i h1 { letter-spacing: -.02em; }
.a2q { font-size: 12.5px; font-weight: 650; }
.a2m input, .a2m select, .a2m textarea, textarea { font-size: 13px; }
.a2l { display: block; margin-top: 6px; color: #dc2626; font-size: 11.5px; font-weight: 600; }
.a2m.a2C { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
.a2W { display:block; margin-top:6px; color:var(--muted); font-size:11.5px; }

/* Authentication is intentionally full-white with no floating bordered card. */
.ozo-auth-body, .ar { background: #fff !important; }
.ar { padding: 0 18px 22px !important; }
.ae {
  width: min(100%, 760px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  padding: 18px 28px 26px !important;
  min-height: auto !important;
}
.al { padding-bottom: 8px; }
.an { width: min(100%, 520px); margin-left:auto; margin-right:auto; }
.ap { width: min(100%, 560px); }
.au h1 { font-size: 25px; line-height: 1.15; letter-spacing: -.025em; }
.au p { font-size: 13px; line-height: 1.55; }
.ak .a2m { min-height: 48px; }
.ak input { font-size: 13px; }
.aj { width: min(100%, 1080px); }
.a1F { font-size: 12px !important; }
.a1x { font-size: 12.5px !important; }
.a1z { z-index: 500 !important; }

/* Recovery wizard */
.a6y { width: min(100%, 560px); }
.a6v { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; align-items:center; margin: 4px 0 24px; }
.a6v i { display:block; height:2px; background:#ececf2; }
.a6w { appearance:none; border:0; background:transparent; display:grid; justify-items:center; gap:5px; color:#9aa0aa; padding:0; cursor:default; }
.a6w span { width:30px; height:30px; border-radius:50%; border:1px solid #e1e3e8; display:grid; place-items:center; background:#fff; font-size:12px; font-weight:700; }
.a6w small { font-size:10.5px; font-weight:600; }
.a6w.a38 { color:var(--primary); }
.a6w.a38 span { color:#fff; border-color:var(--primary); background:var(--primary); box-shadow:0 5px 14px rgba(109,40,217,.18); }
.a6w.a3b { color:var(--green); cursor:pointer; }
.a6w.a3b span { color:#fff; border-color:var(--green); background:var(--green); }
.a6u { display:none; }
.a6u.a38 { display:block; animation: recoveryFade .18s ease; }
@keyframes recoveryFade { from { opacity:.35; transform:translateY(4px); } to { opacity:1; transform:none; } }
.a6V.a1n { margin-bottom:16px; }
.a6V.a1n h2 { font-size:17px; }
.a6V.a1n p { font-size:12px; }
.a6p { margin:0 0 16px; }
.a6p button { display:flex; align-items:center; justify-content:center; gap:7px; }
.a6p iconify-icon { font-size:17px; }
.a6x { margin:2px auto 12px; display:flex; justify-content:center; color:var(--primary); }

/* Transaction page: pagination and view-all are both visible and usable. */
.a8u { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.a8u .a8t { margin-top:0; }
.a8t.a3f { opacity:.45; pointer-events:none; }
.a8u > .aI { min-height:36px; }

/* Better interactive affordance */
[data-ozo-tab], [data-ozo-filter-transactions], .a88, .a8v, [data-ozo-faq-question], [data-ozo-select-card], [data-ozo-plan-open] { touch-action:manipulation; }
.a8v, .a88 { cursor:pointer; }
.a8v:hover { background:#fbfaff; }
.a88:hover td { background:#fbfaff; }

@media (max-width: 760px) {
  .ar { padding:0 !important; }
  .ae { width:100% !important; padding:14px 18px 26px !important; }
  .an, .ap, .a6y { width:100%; }
  .au h1 { font-size:23px; }
  .au p { font-size:12.5px; }
  .ak .a2m { min-height:50px; }
  .a8u { align-items:stretch; }
  .a8u > .aI { width:100%; justify-content:center; }
  .a6w small { font-size:9.5px; }
  .a6w span { width:28px; height:28px; }
}

/* =========================================================
   V7.1 — mobile missions, auto-hide scrollbars, right panels
   ========================================================= */

/* Small, elegant scrollbars that become visible only while scrolling. */
html,
.aa,
.a4X,
.a2K,
.a1z,
.a8B {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
html::-webkit-scrollbar,
.aa::-webkit-scrollbar,
.a4X::-webkit-scrollbar,
.a2K::-webkit-scrollbar,
.a1z::-webkit-scrollbar,
.a8B::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
html::-webkit-scrollbar-track,
.aa::-webkit-scrollbar-track,
.a4X::-webkit-scrollbar-track,
.a2K::-webkit-scrollbar-track,
.a1z::-webkit-scrollbar-track,
.a8B::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
.aa::-webkit-scrollbar-thumb,
.a4X::-webkit-scrollbar-thumb,
.a2K::-webkit-scrollbar-thumb,
.a1z::-webkit-scrollbar-thumb,
.a8B::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}
html.a3w,
.aa.a3w,
.a4X.a3w,
.a2K.a3w,
.a1z.a3w,
.a8B.a3w {
  scrollbar-color: #c8c3d5 transparent;
}
html.a3w::-webkit-scrollbar-thumb,
.aa.a3w::-webkit-scrollbar-thumb,
.a4X.a3w::-webkit-scrollbar-thumb,
.a2K.a3w::-webkit-scrollbar-thumb,
.a1z.a3w::-webkit-scrollbar-thumb,
.a8B.a3w::-webkit-scrollbar-thumb {
  background: #c8c3d5;
}
html.a3w::-webkit-scrollbar-thumb:hover,
.aa.a3w::-webkit-scrollbar-thumb:hover,
.a4X.a3w::-webkit-scrollbar-thumb:hover,
.a2K.a3w::-webkit-scrollbar-thumb:hover,
.a1z.a3w::-webkit-scrollbar-thumb:hover,
.a8B.a3w::-webkit-scrollbar-thumb:hover {
  background: #aba4be;
}

/* Header right-side drawers */
body.a2H { overflow: hidden; }
.a2I {
  position: fixed;
  inset: 0;
  z-index: 620;
  background: rgba(20, 22, 31, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.a2I.a3p {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.a2J {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 630;
  width: min(390px, 92vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #ebe9f2;
  box-shadow: -18px 0 52px rgba(30, 33, 45, .14);
  transform: translateX(104%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .24s ease, visibility .24s ease;
}
.a2J.a3p {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.a2M {
  min-height: 116px;
  padding: 24px 22px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #eeedf2;
}
.a2M > div { min-width: 0; }
.a5p {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.a2M h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.a2M p {
  margin: 7px 0 0;
  max-width: 270px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.a5o {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #e8e7ee;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #727887;
}
.a5o:hover { color: var(--primary); background: #faf8ff; border-color: #dcd5f4; }
.a5o iconify-icon { font-size: 21px; }
.a2K {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}
.a2L {
  flex: 0 0 auto;
  padding: 15px 18px 18px;
  border-top: 1px solid #eeedf2;
  background: #fff;
}
.a2L .aI { min-height: 44px; gap: 8px; }
.a2L .aI iconify-icon { font-size: 18px; }
.a5q {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #727887;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.a5q button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 650;
}
.a5r { margin-top: 12px; }
.a7h {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 8px;
  gap: 11px;
  align-items: start;
  min-height: 82px;
  padding: 12px 10px;
  border-radius: 11px;
  color: var(--ink);
  text-decoration: none;
  transition: background .16s ease;
}
.a7h:hover { background: #faf9fd; }
.a7h + .a7h { border-top: 1px solid #f0eff3; border-top-left-radius: 0; border-top-right-radius: 0; }
.a7h.a3z { background: #fbfaff; }
.a7i {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
}
.a7i.a3j { background: var(--green-soft); color: var(--green); }
.a7i.a3q { background: var(--orange-soft); color: #e77b16; }
.a7i iconify-icon { font-size: 20px; }
.a7h div { min-width: 0; }
.a7h strong { display: block; font-size: 12.5px; line-height: 1.35; }
.a7h p { margin: 4px 0 0; color: #69707d; font-size: 11px; line-height: 1.45; }
.a7h small { display: block; margin-top: 6px; color: #a0a5ae; font-size: 10px; }
.a8J { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--primary); }
.a59.a3g { display: none; }

/* Profile drawer */
.a5Y {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 15px;
  margin-bottom: 18px;
  border: 1px solid #ebe8f5;
  border-radius: 13px;
  background: linear-gradient(135deg, #fbfaff 0%, #fff 100%);
}
.a5Y img { width: 58px; height: 58px; border-radius: 50%; }
.a5Y strong { display: block; font-size: 14px; }
.a5Y span { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a5Y em { display: inline-flex; margin-top: 7px; padding: 4px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9.5px; font-style: normal; font-weight: 750; }
.a5X { margin-top: 15px; }
.a5X > span { display: block; padding: 0 6px 8px; color: #959aa5; font-size: 9.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.a5X > a {
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  padding: 8px 8px;
  border-radius: 10px;
  color: #4f5663;
}
.a5X > a:hover { background: #faf9fd; color: var(--primary); }
.a5X > a > iconify-icon:first-child { font-size: 20px; color: #6d7481; }
.a5X > a:hover > iconify-icon:first-child { color: var(--primary); }
.a5X > a div { min-width: 0; }
.a5X > a strong { display: block; color: var(--ink); font-size: 12px; }
.a5X > a small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.a5X .a4u { justify-self: end; font-size: 16px; color: #a2a7b0; }
.a5V {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #f2d5d5;
  border-radius: 9px;
  background: #fffafa;
  color: #d45252;
  font-size: 12px;
  font-weight: 650;
}
.a5V iconify-icon { font-size: 18px; }

/* Notifications page */
.a5e { max-width: 980px; }
.a5f { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.a5f .a72 { margin:0; width:min(100%, 430px); }
.a5b { padding: 8px 16px; }
.a5c {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:82px;
  padding:12px 4px;
  border-bottom:1px solid var(--line-soft);
}
.a5c:last-child { border-bottom:0; }
.a5c > div { min-width:0; }
.a5c strong { display:block; font-size:12.5px; }
.a5c p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.a5c time { color:#9ba1aa; font-size:10.5px; white-space:nowrap; }

/* Missions: prevent horizontal overflow and make every action reachable on phones. */
.a4z,
.a4v,
.a61,
.a4L,
.a4A,
.a4H { min-width: 0; }

@media (max-width: 620px) {
  .a4z { display: block; width: 100%; max-width: 100%; }
  .a4v, .a61 { width: 100%; max-width: 100%; padding: 14px; }
  .a61 { margin-top: 14px; }
  .a4L {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    overflow: hidden;
    padding: 4px;
  }
  .a4L button {
    min-width: 0;
    min-height: 36px;
    padding: 0 4px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    font-size: 9.5px;
  }
  .a4y { gap: 8px; }
  .a4x { min-height: 68px; padding: 11px; }
  .a4H {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 9px;
    row-gap: 3px;
    min-height: 72px;
    padding: 10px 0;
  }
  .a4K {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 30px;
    height: 30px;
  }
  .a4H > strong {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    min-width: 0;
    font-size: 11.5px !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .a4E {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    font-size: 10px !important;
    white-space: nowrap;
  }
  .a4H > .aI,
  .a4w {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    justify-self: end;
  }
  .a4H > .aI { min-width: 48px; min-height: 30px; padding: 0 10px; font-size: 10px; }
  .a4w { font-size: 18px; }
}

@media (max-width: 430px) {
  .a5h { overflow-x: clip; }
  .a4v { padding: 12px; }
  .a4L button { font-size: 8.8px; }
  .a4H { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; }
  .a4K { width: 28px; height: 28px; }
  .a4H > strong { font-size: 11px !important; }
  .a4E { font-size: 9.5px !important; }
  .a2J { width: min(92vw, 360px); }
  .a2M { min-height: 104px; padding: 20px 16px 15px; }
  .a2M h2 { font-size: 18px; }
  .a2K { padding: 14px 12px; }
  .a2L { padding: 12px; }
  .a7h { grid-template-columns: 40px minmax(0, 1fr) 7px; gap: 9px; padding: 11px 8px; }
  .a7i { width: 40px; height: 40px; }
  .a7h strong { font-size: 12px; }
  .a7h p { font-size: 10.5px; }
  .a5Y { grid-template-columns: 52px minmax(0,1fr); padding: 13px; }
  .a5Y img { width:52px; height:52px; }
}

@media (max-width: 620px) {
  .a5f { align-items: stretch; }
  .a5f .a72 { width: 100%; }
  .a5b { padding: 6px 12px; }
  .a5c {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    min-height: 82px;
    padding: 12px 0;
  }
  .a5c time {
    grid-column: 2;
    margin-top: -4px;
    white-space: normal;
  }
}

/* =========================================================
   OZO UI additions
   Calculator/VIP navigation, payment currencies, OTP verify,
   VIP reward targets and mission decision modal
   ========================================================= */
.a1G {margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 9px;border-radius:999px;background:#f4f0ff;color:var(--primary);font-size:10px;font-weight:750;letter-spacing:.02em;flex:0 0 auto}.a5s.a3x .a1G{background:#ede7ff}.a5s .a79{margin-left:0}.a2m.a2G input{padding-right:58px}.a2Y{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#5f6673;font-size:10.5px;font-weight:700;pointer-events:none}.a1Z{margin-top:9px;padding:10px 12px;border:1px solid #e7e1fb;border-radius:10px;background:#fbf9ff;display:flex;align-items:center;gap:10px}.a20{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#eee9ff;color:var(--primary);flex:0 0 auto}.a20 iconify-icon{font-size:16px}.a1Z>div{min-width:0;display:flex;flex-direction:column;gap:2px}.a1Z>div>span{color:var(--muted);font-size:9.5px}.a1Z>div>span em{display:inline-flex;margin-left:5px;padding:2px 5px;border-radius:999px;background:#ece7ff;color:var(--primary);font-size:8px;font-style:normal;font-weight:700}.a1Z strong{color:var(--ink);font-size:11px}.a1Z small{color:var(--green);font-size:10px;font-weight:650}.a5g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:4px}.a5g input{width:100%;height:52px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-align:center;font:inherit;font-size:20px;font-weight:700;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.a5g input:focus{border-color:#8b6deb;box-shadow:0 0 0 3px rgba(109,40,217,.08)}.a5g.a2C input{border-color:#ef4444;background:#fff8f8}.a2p{display:block;margin-top:8px;color:var(--muted);font-size:10px;line-height:1.45}.a8N{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:14px;color:var(--muted);font-size:10.5px}.a8f{border:0;padding:0;background:transparent;color:var(--primary);font:inherit;font-weight:650;cursor:pointer}.a8f:disabled{color:#a0a6b0;cursor:default}.a8Y{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(190px,.65fr));gap:14px;max-width:1120px}.a92{padding:18px;min-height:122px;display:flex;align-items:center;gap:13px}.a94{display:block}.a93{display:flex;align-items:center;gap:12px}.a93>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.a93>div>span,.a92>div>span{color:var(--muted);font-size:10px}.a93>div>strong,.a92>div>strong{color:var(--ink);font-size:15px}.a93>div>small,.a92>div>small{color:var(--muted);font-size:9.5px;line-height:1.4}.a8T,.a8R{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#eee9ff;color:var(--primary);flex:0 0 auto}.a8T iconify-icon{font-size:24px}.a8R iconify-icon{font-size:20px}.a8R.a3j{background:var(--green-soft);color:var(--green)}.a8R.a3t{background:#f1edff;color:var(--primary)}.a8Z{display:flex;justify-content:space-between;align-items:center;margin-top:15px;color:var(--muted);font-size:10px}.a8Z strong{color:var(--primary)}.a90{margin:9px 0 0;color:var(--muted);font-size:9.5px;line-height:1.5}.a8S{max-width:1120px;margin-top:14px;padding:18px}.a96{margin-bottom:18px}.a91{align-items:flex-start}.a91>div p{margin:4px 0 0;color:var(--muted);font-size:10px}.a8Q{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.a8P{min-height:92px;padding:13px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:flex-start;gap:10px}.a8P>span{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#f2eeff;color:var(--primary);flex:0 0 auto}.a8P>span iconify-icon{font-size:17px}.a8P>div{min-width:0;display:flex;flex-direction:column;gap:3px}.a8P strong{font-size:10.5px}.a8P small{color:var(--muted);font-size:9px;line-height:1.45}.a95{margin-top:5px}.a8V{min-width:780px}.a8U{display:inline-flex;align-items:center;gap:8px;min-width:105px}.a8U>strong{font-size:10px}.a8U>small{color:var(--muted);font-size:9px}.a6F{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:15px}.a6E{padding:15px;border:1px solid var(--line);border-radius:11px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center}.a6E>div{min-width:0;display:flex;flex-direction:column;gap:3px}.a6E>div span{color:var(--muted);font-size:9.5px}.a6E>div strong{font-size:12px}.a6E>div small{color:var(--muted);font-size:9px}.a6E>b{color:var(--primary);font-size:13px}.a97{margin-top:14px}.a4B{display:flex;align-items:flex-start;gap:13px}.a4C{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}.a4C iconify-icon{font-size:23px}.a4C.a3u{color:var(--green);background:var(--green-soft)}.a4C.a3r{color:var(--primary);background:#f0ecff}.a4B>div{min-width:0}.a4B>div>span{color:var(--green);font-size:10px;font-weight:750}.a4B h3{margin:3px 0 5px;font-size:15px}.a4B p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}.a4D{margin-top:16px;padding:12px;border-radius:10px;display:flex;gap:10px;align-items:flex-start}.a4D>iconify-icon{margin-top:1px;font-size:18px}.a4D>div{display:flex;flex-direction:column;gap:2px}.a4D strong{font-size:10.5px}.a4D span{color:var(--muted);font-size:9.5px;line-height:1.45}.a4D.a3u{background:#f0fbf5;color:var(--green)}.a4D.a3r{background:#f6f3ff;color:var(--primary)}@media(max-width:1100px){.a8Y{grid-template-columns:repeat(2,minmax(0,1fr))}.a94{grid-column:1/-1}.a8Q{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.a1G{min-width:40px;height:24px;padding:0 7px;font-size:9px}.a1Z{padding:9px 10px}.a5g{gap:6px}.a5g input{height:46px;border-radius:9px;font-size:18px}.a8N{flex-wrap:wrap}.a8Y,.a6F{grid-template-columns:1fr}.a94{grid-column:auto}.a92{min-height:104px;padding:14px}.a8S{padding:13px}.a8Q{grid-template-columns:1fr}.a91{gap:10px}.a91 .aI{width:100%}.a6E{grid-template-columns:auto minmax(0,1fr)}.a6E>b{grid-column:2}}@media(max-width:390px){.a5g{gap:4px}.a5g input{height:42px;font-size:16px}}
.a62[data-ozo-progress="72"]{width:72%}

/* V7.3: recharge-based VIP, withdrawal wallet manager, welcome bonus */
.a8Y {
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(220px, .7fr));
}
.a8W {
  min-width: 0;
  overflow: hidden;
  align-items: center;
}
.a8X {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.a8X > span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}
.a8X > strong {
  display: block;
  width: 100%;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.a8X > small {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.45;
}

.a6W {
  align-items: center;
  gap: 14px;
}
.a6W > div {
  min-width: 0;
}
.a6W > div > h2 {
  margin-bottom: 3px;
}
.a6W > div > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.a6W .aI {
  flex: 0 0 auto;
}
.a9k {
  display: grid;
  gap: 9px;
}
.a9l {
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.a9l:first-child {
  border-top: 0;
}
.a9l .a5y {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 18px;
}
.a9l .a5y iconify-icon {
  font-size: 20px;
}
.a5v > .a9i {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.a9i .a2R {
  width: 30px;
  height: 30px;
}
.a2R.a3e {
  color: #dc4c4c;
  background: #fff2f2;
}
.a9d,
.a9L {
  padding: 16px;
  border: 1px dashed #dfe2ea;
  border-radius: 11px;
  background: #fbfcfd;
  display: flex;
  align-items: center;
  gap: 11px;
}
.a9d > span,
.a9L > span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f1edff;
  color: var(--primary);
  flex: 0 0 auto;
}
.a9d > div,
.a9L > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.a9d strong,
.a9L strong {
  font-size: 11px;
}
.a9d small,
.a9L small {
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.45;
}
.a9M {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 9.5px;
}
.a9M a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}
.a9n .a2p {
  margin-top: 7px;
}
.a9A .a2i {
  background: #f0ebff;
  color: var(--primary);
}
.a9z {
  display: inline-flex;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3efff;
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.a9s {
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d9f4e5;
  border-radius: 10px;
  background: #f4fcf7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.a9s span {
  color: var(--muted);
  font-size: 10px;
}
.a9s strong {
  color: var(--green);
  font-size: 18px;
}

@media (max-width: 1100px) {
  .a8Y {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .a94 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .a8Y {
    grid-template-columns: 1fr;
  }
  .a94 {
    grid-column: auto;
  }
  .a8X > strong {
    font-size: 16px;
  }
  .a6W {
    align-items: flex-start;
  }
  .a6W .aI {
    width: auto;
  }
  .a9l {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
  .a9l code {
    display: none;
  }
  .a9M {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   V7.4 Security verification refinements
   ========================================================= */
.aJ { background:#fff1f1; border:1px solid #f5c6c6; color:#d83a3a; }
.aJ:hover { background:#ffe8e8; border-color:#efaaaa; color:#bd2e2e; }
.a8C { flex-wrap:wrap; }
.a8C .aI { min-width:132px; }
.a71 { padding:13px 14px; border:1px solid #e5e7ec; border-radius:11px; display:flex; align-items:center; gap:11px; margin-bottom:15px; background:#fbfcfd; }
.a71 > span { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; }
.a71 > span iconify-icon { font-size:20px; }
.a71 > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.a71 strong { font-size:11.5px; }
.a71 small { color:var(--muted); font-size:9.5px; line-height:1.45; }
.a71.a3h { border-color:#d7f1e2; background:#f4fcf7; }
.a71.a3h > span { background:#e6f8ee; color:var(--green); }
.a71.a3d { border-color:#f2d5d5; background:#fff7f7; }
.a71.a3d > span { background:#ffe8e8; color:#dc4c4c; }
.az { text-align:center; margin-bottom:12px; }
.az strong { display:block; font-size:13px; }
.az p { max-width:410px; margin:5px auto 0; color:var(--muted); font-size:10px; line-height:1.55; }
.ax { display:flex; justify-content:center; margin:8px 0 14px; }
.aw { width:190px; height:190px; padding:10px; border:1px solid #e5e7ec; border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(31,35,48,.07); }
.aw img { width:100%; height:100%; object-fit:contain; display:block; }
.ay { margin-bottom:14px; text-align:center; }
.ay > span { display:block; color:var(--muted); font-size:9.5px; margin-bottom:6px; }
.ay > div { min-height:42px; padding:7px 8px 7px 12px; border:1px solid var(--line); border-radius:9px; background:#fafbfc; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ay code { color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; font-weight:700; letter-spacing:.04em; overflow-wrap:anywhere; }
.ay button { min-height:30px; padding:0 9px; border:0; border-radius:7px; background:#efeaff; color:var(--primary); display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:9.5px; font-weight:700; cursor:pointer; }
.av { padding:13px; border:1px solid var(--line); border-radius:10px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:14px; }
.av > span:first-child { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:#f1edff; color:var(--primary); }
.av > div { display:flex; flex-direction:column; gap:2px; }
.av strong { font-size:10.5px; }
.av small { color:var(--muted); font-size:9px; }
.a7d .a5A { min-width:0; }
.a7d .a1B { margin-left:40px; }
.a7d .a1z { left:-38px; width:min(280px,calc(100vw - 48px)); }
.a9I { display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; }
.a9I > span { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:#f1edff; color:var(--primary); flex:0 0 auto; }
.a9I > span iconify-icon { font-size:20px; }
.a9I strong { display:block; font-size:12px; }
.a9I p { margin:4px 0 0; color:var(--muted); font-size:9.5px; line-height:1.5; }
.a9K { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:13px; }
.a9J { min-height:78px; padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; text-align:left; color:var(--ink); cursor:pointer; }
.a9J:hover { border-color:#cfc2fb; background:#fcfbff; }
.a9J.a3x { border-color:#8c72ef; box-shadow:0 0 0 3px rgba(102,61,230,.07); background:#fbf9ff; }
.a9J.a3f { opacity:.5; cursor:not-allowed; background:#f7f8fa; }
.a9J > span:first-child { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:#f1edff; color:var(--primary); }
.a9J > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.a9J strong { font-size:10.5px; }
.a9J small { color:var(--muted); font-size:8.8px; line-height:1.4; }
.a9J .a79 { width:17px; height:17px; }
.a8M { min-height:58px; padding:10px 11px; border:1px solid #e6e0fb; border-radius:10px; background:#faf8ff; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; margin-bottom:13px; }
.a8M > span { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:#ece6ff; color:var(--primary); }
.a8M > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.a8M strong { font-size:10px; }
.a8M small { color:var(--muted); font-size:8.8px; line-height:1.4; }
@media (max-width:760px) {
  .aw { width:172px; height:172px; }
  .a9K { grid-template-columns:1fr; }
  .a8M { grid-template-columns:auto minmax(0,1fr); }
  .a8M .aI { grid-column:1/-1; width:100%; }
  .a8C .aI { min-width:0; flex:1 1 calc(50% - 5px); }
}

/* Password recovery account summary ======================== */
.a6o { width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; margin:2px 0 18px; border:1px solid var(--line); border-radius:12px; background:#faf9ff; }
.a6o > span { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); font-size:20px; flex:0 0 auto; }
.a6o > div { min-width:0; flex:1; display:grid; gap:1px; }
.a6o small { color:var(--muted); font-size:11px; }
.a6o strong { font-size:13px; overflow-wrap:anywhere; }
.a6o a { color:var(--primary); font-size:12px; font-weight:700; }

/* OZO audit hardening: filter/navigation links use the same reusable controls. */
.a8p a,
.a72 a { min-height: 30px; border: 0; border-radius: 7px; padding: 0 14px; background: transparent; color: #707783; font-size: 12px; white-space: nowrap; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.a8p a.a38,
.a72 a.a38 { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.a72 a { flex:1; }
.a8o { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:12px; }
.a8o .a2m { min-width:150px; width:auto; flex:0 1 190px; }
.a5d { max-width:360px; }
@media (max-width: 640px) {
  .a8o { align-items:stretch; }
  .a8o .a2m,
  .a8o .aI { width:100%; flex:1 1 100%; }
}
.aB{width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex:0 0 64px}.aB img{width:100%;height:100%;object-fit:cover}.a70 .a2m input[type=file]{padding:.55rem}
.a2s { display:flex; align-items:center; gap:10px; margin:10px 0 12px; padding:11px 13px; border:1px solid #e6e8ef; border-radius:10px; background:#fafbff; }
.a2s strong, .a2s small { display:block; }
.a2s strong { font-size:12px; color:#222936; }
.a2s small { margin-top:2px; font-size:10px; color:#7b8290; line-height:1.45; }
.a9b{display:grid;gap:12px}.a9c{display:grid;gap:5px;padding:12px 14px;border:1px solid var(--ozo-border,#e8e8f2);border-radius:12px}.a9c span{font-size:12px;color:var(--ozo-text-muted,#7b8094)}.a9c strong,.a9c code{font-size:14px;color:var(--ozo-text,#171827);overflow-wrap:anywhere}.a9c code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* App download ================================================= */
.a1P{display:grid;gap:22px;padding:28px}.a1P .a2h{margin:0}.a1P .a1N{grid-template-columns:repeat(2,minmax(0,1fr))}.a1P .a1O>span{display:flex;align-items:center;gap:8px}.a1P .a1O iconify-icon{font-size:20px}.aP{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.aP .aI[disabled]{opacity:.68;cursor:not-allowed}
@media(max-width:640px){.a1P{padding:20px}.a1P .a1N,.aP{grid-template-columns:1fr}}

/* Auth language selection */
.a3P { display: grid; gap: 8px; }
.a3L { min-height: 54px; padding: 9px 11px; border: 1px solid #eceef2; border-radius: 10px; display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 10px; color: #3f4652; text-decoration: none; transition: border-color .16s ease, background .16s ease; }
.a3L:hover { border-color: #c9bff4; background: #faf9ff; color: var(--primary); }
.a3L.a3x { border-color: #cfc5f7; background: #f8f6ff; }
.a3N { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.a3N iconify-icon { font-size: 19px; }
.a3L strong { display: block; font-size: 12px; color: #303641; }
.a3L small { display: block; margin-top: 2px; font-size: 9.5px; color: var(--muted); }
.a3M { font-size: 17px; color: var(--primary); }
.a3O { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 11px; }

/* Laravel dynamic-state adapters ============================================
   These classes are used only where backend-driven states have no static
   counterpart in the V7.5 HTML demo. They deliberately reuse the same V7.5
   spacing, borders, typography and component rhythm so empty/real-data states
   do not fall back to unstyled browser layout. */
.a1W { min-height: 190px; padding: 34px 24px; border: 1px solid #eceef2; border-radius: 12px; background: #fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; }
.a1W > iconify-icon { font-size: 30px; color: var(--primary); }
.a1W h3 { margin:0; font-size:15px; color:var(--ink); }
.a1W p { margin:0 0 4px; max-width:430px; color:var(--muted); font-size:11px; line-height:1.55; }
.a1X { min-height:120px; padding:22px 18px; }
.a5n { display:flex; justify-content:center; margin-top:18px; }
.a7V { padding: 20px; margin-top:18px; }
.a1t { width:100%; }

.a4J { min-width:0; }
.a4J strong { display:block; }
.a4J p { margin:3px 0 0; color:var(--muted); font-size:10.5px; line-height:1.45; }
.a4J small { display:block; margin-top:4px; color:#8c929e; font-size:9.5px; }
.a4I { margin-left:auto; display:flex; align-items:center; }
.a4F { padding:20px; align-self:start; }
.a4G { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.a4G iconify-icon { font-size:24px; }
.a4F h2 { margin:14px 0 4px; font-size:15px; }
.a4F > strong { font-size:12px; }
.a4F > p { margin:6px 0 14px; color:var(--muted); font-size:10.5px; line-height:1.5; }
.a4F .aI { margin-top:15px; }

.a6H { padding:20px; }
.a6B { display:grid; gap:10px; }
.a6D { min-height:68px; padding:12px 14px; border:1px solid #eceef2; border-radius:10px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; }
.a6C { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.a6C iconify-icon { font-size:20px; }
.a40 { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }

.a9p { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.a9p > div { padding:14px; border:1px solid #eceef2; border-radius:10px; background:#fff; }
.a9p span { display:block; color:var(--muted); font-size:9.5px; }
.a9p strong { display:block; margin-top:5px; font-size:16px; }
.a9j { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.a9j iconify-icon { font-size:20px; }
.a6I { display:flex; align-items:center; gap:6px; margin-left:auto; }

.a87 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.a81 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.a81 > div { padding:12px; border:1px solid #eceef2; border-radius:9px; }
.a4t { display:flex; align-items:center; gap:9px; }
.a6T { min-height:40px; border:1px solid #e2e4e9; border-radius:8px; display:flex; align-items:center; gap:8px; padding:0 11px; background:#fff; }
.a6T input { width:100%; border:0; outline:0; background:transparent; }
.a6A { display:flex; gap:8px; align-items:center; }

.a8q { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.a7N { display:grid; gap:10px; }
.a2o { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

.a7F { padding:20px; }
.a7G { display:grid; gap:9px; }
.a7G > div { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid #f0f1f4; }
.a7G > div:last-child { border-bottom:0; }
.a75 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.a6m { display:flex; flex-wrap:wrap; gap:7px; }
.a52 { display:flex; align-items:center; }
.a2V { display:flex; align-items:flex-start; gap:8px; padding:11px 12px; border-radius:9px; background:#faf9ff; color:#646b77; font-size:10px; line-height:1.5; }
.a2V iconify-icon { flex:0 0 auto; font-size:17px; color:var(--primary); }

.a2c { padding:20px; }
.a5t { display:grid; gap:9px; }
.a5w { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.a1Y { padding:14px; border:1px solid #eceef2; border-radius:10px; background:#fafbff; }
.aD { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:10.5px; }

.a3I { padding:22px; }
.a3I .a7y { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.a3I .a7y iconify-icon { font-size:25px; }
.a3E { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:start; padding:12px; border:1px solid #eceef2; border-radius:10px; }
.a3F { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.a8L { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.a8K { min-height:140px; padding:18px; border:1px dashed #cfd3dc; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:#fcfcfe; }

.a17 { height:180px; display:flex; align-items:flex-end; gap:8px; }
.a16 { flex:1; min-width:8px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#7c52ef,#b89eff); }

.aQ { background:#f6f4ff; color:var(--primary); border:1px solid #e5dffc; }

@media (max-width: 760px) {
  .a9p,.a87,.a81,.a75,.a2o,.a8L { grid-template-columns:1fr; }
  .a8q { align-items:stretch; flex-direction:column; }
}
.a1v { padding:14px 10px; text-align:center; color:var(--muted); font-size:11px; }
.a1v.a3k { display:none; }
.a5O { min-height:64px; padding:11px 0; border-bottom:1px solid #eff0f3; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.a5O:last-child { border-bottom:0; }
.a6Y { display:grid; gap:10px; }
.a6Y > * { min-width:0; }
.a3y { color:var(--green); }
.a50 { display:none !important; }

/* Local development email verification helper. Never rendered on non-local hosts. */
.a4n{width:100%;margin:0 0 14px;padding:11px 13px;border:1px solid #dcd3ff;border-radius:10px;background:#faf8ff;display:flex;align-items:center;gap:10px;color:var(--primary)}
.a4n>iconify-icon{font-size:20px;flex:0 0 auto}.a4n>div{display:flex;flex-direction:column;gap:2px}.a4n strong{font-size:10.5px}.a4n span{font-size:15px;font-weight:800;letter-spacing:.18em;color:var(--ink)}

.a1F .a2a{display:block;width:20px;height:15px;object-fit:cover;border-radius:3px;flex:0 0 auto}.a1x .a1y{display:block;width:23px;height:17px;object-fit:cover;border-radius:3px;border:1px solid #edf0f5}
.a99{padding-left:42px}.a99 select{padding-left:4px}.a9a{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;object-fit:cover;border-radius:50%;border:1px solid #e4e7ed;z-index:2}

.aI:disabled,
.aI[aria-disabled="true"] {
    opacity: .58;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Full-page blocking loader */
.ozo-page-loader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: rgba(248,250,255,.86); backdrop-filter: blur(7px); pointer-events: all; cursor: wait; }
.ozo-page-loader[hidden] { display: none !important; }
.ozo-page-loader [data-ozo-page-loader-card] { min-width: 220px; padding: 24px 28px; border: 1px solid #e2e8f5; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(20,38,90,.16); display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.ozo-page-loader [data-ozo-page-loader-card] .aT { width: 28px; height: 28px; border-width: 3px; }
.ozo-page-loader [data-ozo-page-loader-title] { font-size: 15px; color: #101a36; }
.ozo-page-loader [data-ozo-page-loader-message] { color: #77819a; font-size: 12px; }
html.ozo-page-loading, body.ozo-page-loading { cursor: wait !important; overflow: hidden !important; }

/* Investment purchase availability */
.a5B.a3f, .a73.a3f { opacity: .58; filter: grayscale(.18); cursor: not-allowed !important; }
.a5B.a3f:hover { transform: none !important; box-shadow: inherit !important; }
.a5J { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.a5I { display:inline-flex; padding:5px 9px; border-radius:999px; background:#fff0f2; color:#dc3b55; font-size:10px; font-weight:700; white-space:nowrap; }
.a5E { display:block; margin-top:12px; color:var(--muted); font-size:10px; }
.a30 { margin: 0 0 18px; }

/* Keep country selectors above surrounding cards */
.a5A, .a1B { overflow: visible !important; }
.a5A:focus-within, .a1B:focus-within { position: relative; z-index: 120; }

/* Sidebar breathing room before support */
.a7m { margin-top: 22px !important; }

.a6l img { width:100%; height:100%; object-fit:contain; border-radius:10px; }
.a60 { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fbfcff; }
.aC { width:62px; height:62px; }
.a5Z { min-width:0; display:flex; flex-direction:column; gap:3px; }
.a5Z strong { font-size:13px; }
.a5Z span, .a5Z small { color:var(--muted); font-size:10px; }
.a5 ul,.a5 ol { margin:6px 0 0 18px; }
.a5 p { margin:4px 0; }
@media (max-width:700px){ .a60{grid-template-columns:auto 1fr}.a60 .aI{grid-column:1/-1;width:100%;} }

/* Mobile app download */
.a4R{display:flex;align-items:center;gap:18px;padding:24px 26px;margin-bottom:18px;background:linear-gradient(135deg,#fff 0%,#f8f7ff 100%)}
.a4S{width:56px;height:56px;flex:0 0 56px;border-radius:18px;display:grid;place-items:center;background:#f0ebff;color:#6437eb;font-size:30px}
.a4R h2{margin:0 0 6px;font-size:20px;color:#10182f}.a4R p{margin:0;color:#7b849d;font-size:13px;line-height:1.55}
.a4Q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.a4N{display:flex;flex-direction:column;gap:22px;padding:26px;min-height:310px}
.a4N.a3a{background:linear-gradient(180deg,#fff 0%,#fbfbfe 100%)}
.a4O{display:flex;align-items:center;justify-content:space-between;gap:14px}
.a4V{width:58px;height:58px;border:1px solid #e6eaf3;border-radius:18px;display:grid;place-items:center;background:#fff;font-size:30px;box-shadow:0 8px 24px rgba(24,35,74,.06)}
.a4T{color:#111827}.a4P{flex:1}.a4P h3{margin:0 0 8px;font-size:18px;color:#121a30}.a4P p{margin:0;color:#7b849d;font-size:13px;line-height:1.65}
.a4W{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;background:#f2f4f8;color:#7b849d;font-size:11px;font-weight:700;white-space:nowrap}
.a4W.a39{background:#eafaf3;color:#1ca66b}
.a4U{margin-top:18px}
@media(max-width:760px){.a4Q{grid-template-columns:1fr}.a4R{align-items:flex-start;padding:20px}.a4N{min-height:0;padding:22px}}


/* =========================================================
   V12 — interaction reliability and polished loading state
   ========================================================= */
button.a7h,
button.a5c {
  width: 100%;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.a7h:focus-visible,
button.a5c:focus-visible {
  box-shadow: 0 0 0 3px rgba(109,40,217,.10);
}
button.a5c:hover { background: #fbfaff; }

.a1B.a1C { z-index: 700; }
.a1B.a1C .a1z { z-index: 710 !important; }

.ozo-page-loader {
  background: rgba(247,249,253,.78);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.ozo-page-loader [data-ozo-page-loader-card] {
  position: relative;
  min-width: 250px;
  max-width: calc(100vw - 40px);
  padding: 30px 30px 27px;
  border: 1px solid rgba(218,224,238,.92);
  border-radius: 20px;
  background: linear-gradient(180deg,#fff 0%,#fbfcff 100%);
  box-shadow: 0 28px 80px rgba(24,35,69,.17), 0 2px 10px rgba(24,35,69,.05);
  overflow: hidden;
}
.ozo-page-loader [data-ozo-page-loader-card]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  transform: translateX(-100%);
  animation: ozoLoaderSweep 1.25s ease-in-out infinite;
}
.ozo-page-loader [data-ozo-page-loader-card] .aT {
  width: 34px;
  height: 34px;
  border-width: 3px;
  box-shadow: 0 0 0 7px rgba(109,40,217,.055);
}
.ozo-page-loader [data-ozo-page-loader-title] {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: #111a32;
}
.ozo-page-loader [data-ozo-page-loader-message] {
  max-width: 210px;
  color: #737d94;
  font-size: 11.5px;
  line-height: 1.45;
}
html.ozo-page-loading,
body.ozo-page-loading {
  cursor: wait !important;
  overflow: hidden !important;
  user-select: none;
}
@keyframes ozoLoaderSweep {
  0% { transform: translateX(-100%); opacity: .35; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .ozo-page-loader [data-ozo-page-loader-card]::before { animation: none; transform: none; opacity: .65; }
}

/* =========================================================
   V19 persistent welcome-bonus dashboard reminder
   ========================================================= */
.a9A { padding: 10px 2px 2px; }
.a9A .a2i { margin-bottom: 10px; box-shadow: 0 9px 28px rgba(109,40,217,.13); }
.a9A > h2 { font-size: 22px; }
.a9w { margin-bottom: 12px !important; font-size: 11px !important; }
.a9F { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.a9F > label { display:block; margin-bottom:7px; color:var(--text); font-size:10px; font-weight:800; }
.a9G { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.a9G input { width:100%; min-width:0; height:40px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--text); font:inherit; font-size:10px; outline:none; }
.a9G .aI { min-width:112px; }
.a9r { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.a9r .aI { min-height:42px; justify-content:center; }
.a9D { margin-top:12px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fafbff; text-align:left; }
.a9D > span { display:block; margin-bottom:8px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.a9D > div { display:flex; flex-wrap:wrap; gap:8px; }
.a9C { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--text); font-size:9.5px; font-weight:700; text-decoration:none; }
.a9C iconify-icon { font-size:18px; }
@media (max-width:560px){
  .a9G { grid-template-columns:1fr; }
  .a9G .aI { width:100%; }
  .a9r { grid-template-columns:1fr; }
}

/* =========================================================
   V21 premium welcome-bonus reminder modal
   ========================================================= */
.a8D.a9v {
  padding: 24px;
  background: rgba(17, 20, 31, .54);
  backdrop-filter: blur(5px) saturate(.88);
  -webkit-backdrop-filter: blur(5px) saturate(.88);
}
.a8B.a51 {
  position: relative;
  width: min(100%, 680px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  background: linear-gradient(180deg,#fff 0%,#fff 82%,#fdfcff 100%);
  box-shadow: 0 34px 100px rgba(13,17,30,.3), 0 2px 10px rgba(13,17,30,.08);
}
.a51 .a8F {
  position: absolute;
  inset: 18px 18px auto auto;
  z-index: 5;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.a51 .a8F h3 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.a51 .a8F .a2R {
  width: 38px;
  height: 38px;
  border: 1px solid #e3e6ee;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #667085;
  box-shadow: 0 5px 16px rgba(26,31,44,.06);
  transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
}
.a51 .a8F .a2R:hover {
  border-color: #d3ccfa;
  background: #faf8ff;
  color: var(--primary);
  transform: rotate(4deg);
}
.a51 .a8F .a2R iconify-icon { font-size: 20px; }
.a51 .a8E { padding: 38px 36px 32px; }
.a51 .a8C { display: none !important; }

.a9A {
  width: 100%;
  text-align: center;
}
.a9y {
  position: relative;
  width: 126px;
  height: 108px;
  margin: 0 auto 2px;
  display: grid;
  place-items: center;
}
.a9y::before,
.a9y::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
}
.a9y::before {
  left: 10px;
  top: 40px;
  background: #f2ac45;
  box-shadow: 25px -24px 0 -1px #7855ed, 93px -10px 0 -1px #f2ac45, 105px 31px 0 -1px #7a57ec, 15px 64px 0 -2px #7a57ec;
}
.a9y::after {
  right: 12px;
  top: 29px;
  background: #7a57ec;
  box-shadow: -98px 9px 0 -2px #18b984, -78px 65px 0 -2px #f2ac45, -12px 58px 0 -2px #18b984;
}
.a9x {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%,#fbf9ff 0,#f3efff 50%,#ebe4ff 100%);
  color: var(--primary);
  box-shadow: 0 16px 38px rgba(96,54,224,.16), inset 0 0 0 1px rgba(109,74,230,.08);
}
.a9x::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(116,78,230,.12);
  border-radius: 50%;
}
.a9x iconify-icon { font-size: 48px; filter: drop-shadow(0 6px 10px rgba(95,50,220,.12)); }
.a9z {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto 10px;
  min-height: 26px;
  padding: 5px 12px;
  border: 1px solid #e8e1ff;
  border-radius: 999px;
  background: linear-gradient(180deg,#f8f5ff,#f1ebff);
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.a9A > h2 {
  margin: 0;
  color: #171c2b;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.a9w {
  max-width: 500px;
  margin: 12px auto 0 !important;
  color: #707789;
  font-size: 12.5px !important;
  line-height: 1.7;
}
.a9s {
  position: relative;
  width: 100%;
  min-height: 78px;
  margin-top: 24px;
  padding: 15px 20px;
  overflow: hidden;
  border: 1px solid #cfeedd;
  border-radius: 14px;
  background: linear-gradient(105deg,#f8fffb 0%,#f1fcf6 58%,#f7fff9 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
.a9s::after {
  content: '';
  position: absolute;
  right: 70px;
  bottom: -64px;
  width: 230px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(40,177,112,.09);
  box-shadow: 0 -10px 0 rgba(40,177,112,.035), 0 -20px 0 rgba(40,177,112,.025), 0 -30px 0 rgba(40,177,112,.02);
  pointer-events: none;
}
.a9t {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #485163;
  font-size: 12px;
  font-weight: 650;
}
.a9u {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f8ee;
  color: #1daf6a;
}
.a9u iconify-icon { font-size: 21px; }
.a9s strong {
  position: relative;
  z-index: 1;
  color: #16a766;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.a9F {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
  text-align: left;
}
.a9F > label {
  display: block;
  margin-bottom: 8px;
  color: #2f3747;
  font-size: 11px;
  font-weight: 750;
}
.a9G {
  display: grid;
  grid-template-columns: minmax(0,1fr) 136px;
  gap: 10px;
}
.a9H {
  min-width: 0;
  height: 48px;
  padding: 0 13px;
  border: 1px solid #e0e3eb;
  border-radius: 11px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: inset 0 1px 2px rgba(20,24,35,.025);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.a9H:focus-within { border-color: #c9bdf8; box-shadow: 0 0 0 3px rgba(105,66,224,.07); }
.a9H > iconify-icon { flex: 0 0 auto; color: var(--primary); font-size: 19px; }
.a9H input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #4e5665;
  font: inherit;
  font-size: 10.5px;
}
.a9B {
  min-height: 48px;
  justify-content: center;
  border: 1px solid #e0d8ff;
  border-radius: 11px;
  background: linear-gradient(180deg,#f8f5ff,#f2edff);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 750;
}
.a9B:hover { border-color: #cfc2ff; background: #eee8ff; color: var(--primary); }
.a9B iconify-icon { font-size: 18px; }
.a9r {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eceef3;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.a9r .aI {
  min-height: 50px;
  justify-content: center;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 750;
}
.a9r .aO {
  box-shadow: 0 12px 25px rgba(93,54,224,.2);
}
.a9r .aO:hover { transform: translateY(-1px); }
.a9r .aN { background:#fff; border-color:#dfe2e9; color:#4c5563; }
.a9r .aI iconify-icon { font-size: 18px; }
.a9D {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #eceef3;
  border-radius: 11px;
  background: #fbfbfd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.a9D > span {
  margin: 0;
  color: #72798a;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .055em;
  white-space: nowrap;
}
.a9D > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.a9C {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #e4e6ec;
  border-radius: 9px;
  background: #fff;
  color: #454d5b;
  font-size: 9.5px;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(24,29,41,.025);
}
.a9C:hover { border-color:#d7d0f5; color:var(--primary); }
.a9C iconify-icon { font-size: 18px; }

@media (max-width: 640px) {
  .a8D.a9v { padding: 10px; align-items: center; }
  .a8B.a51 { max-height: calc(100vh - 20px); border-radius: 18px; }
  .a51 .a8F { inset: 13px 13px auto auto; }
  .a51 .a8F .a2R { width: 34px; height: 34px; }
  .a51 .a8E { padding: 28px 18px 20px; }
  .a9y { width: 104px; height: 91px; }
  .a9x { width: 76px; height: 76px; }
  .a9x iconify-icon { font-size: 40px; }
  .a9A > h2 { font-size: 25px; }
  .a9w { max-width: 310px; font-size: 11.5px !important; }
  .a9s { min-height: 68px; margin-top: 18px; padding: 13px 14px; }
  .a9s strong { font-size: 21px; }
  .a9F { margin-top: 17px; }
  .a9G { grid-template-columns: 1fr; }
  .a9B { width: 100%; }
  .a9r { margin-top: 16px; padding-top: 16px; gap: 9px; }
  .a9r .aI { min-height: 46px; }
  .a9D { align-items:flex-start; flex-direction:column; }
  .a9D > div { justify-content:flex-start; }
}
@media (max-width: 390px) {
  .a9r { grid-template-columns: 1fr; }
}
/* V21 compatibility overrides for older welcome-bonus rules above. */
.a9A { padding: 0; }
.a9s .a9t > span:not(.a9u) {
  color: #485163;
  font-size: 12px;
}
.a9s .a9u {
  color: #1daf6a;
  font-size: inherit;
}

/* v28 client feedback */
.a5K { width:100%; margin-top:16px; min-height:42px; }
.a9E { display:block; color:var(--muted); font-size:11px; line-height:1.5; padding:8px 0 2px; }
.a5f .a72 a { display:flex; align-items:center; justify-content:center; gap:6px; }
.a5f .a72 a small { font-size:10px; line-height:1; font-weight:700; }

/* Dashboard platform guide card */
.a2B {
  padding: 18px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 12px 14px;
  align-items: start;
}
.a2A {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f3efff;
  color: #6d28d9;
  font-size: 25px;
}
.a2x { min-width: 0; }
.a2x h2 {
  margin: 1px 0 5px;
  font-size: 16px;
  line-height: 1.3;
  color: #111827;
}
.a2x p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.55;
}
.a2y {
  grid-column: 1 / -1;
  min-height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  color: #5b21b6;
  background: #faf8ff;
  border: 1px solid #ddd6fe;
  transition: .18s ease;
}
.a2y:hover {
  color: #4c1d95;
  background: #f3efff;
  border-color: #c4b5fd;
}
@media (max-width: 640px) {
  .a2B { padding: 16px; }
}

/* Dashboard platform guide status badge */
.a2z { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a2z h2 { margin-right:auto; }
.a2u {
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
  animation: ozoGuideBadgeFloat 2.4s ease-in-out infinite;
}
.a2u::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 7px;
  animation: ozoGuideBadgePulse 1.6s ease-in-out infinite;
}
.a2v {
  color:#065f46;
  background:linear-gradient(135deg,#ecfdf3 0%,#d1fadf 100%);
  border:1px solid #86efac;
}
.a2v::before {
  background:#16a34a;
  box-shadow:0 0 0 0 rgba(22,163,74,.45);
}
.a2w {
  color:#9a3412;
  background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%);
  border:1px solid #fdba74;
}
.a2w::before {
  background:#f97316;
  box-shadow:0 0 0 0 rgba(249,115,22,.45);
}
@keyframes ozoGuideBadgePulse {
  0% { transform: scale(.92); box-shadow:0 0 0 0 currentColor; }
  70% { transform: scale(1); box-shadow:0 0 0 8px transparent; }
  100% { transform: scale(.92); box-shadow:0 0 0 0 transparent; }
}
@keyframes ozoGuideBadgeFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

/* Trust center, certificates, withdrawal proof and shared live activity */
.aE{position:relative;overflow:hidden}.a14{position:absolute;right:22px;top:20px;z-index:3;display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;min-width:142px;padding:9px 11px;border:1px solid #ddd6fe;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 8px 22px rgba(79,46,183,.09);color:#26184d;text-decoration:none}.a14>span{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f2edff;color:#6735ed;font-size:20px}.a14 strong{font-size:12px;line-height:1.1}.a14 small{font-size:9px;color:#7d748f;margin-top:2px}.a14:hover{border-color:#8b5cf6;transform:translateY(-1px)}
.a4h{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:12px 15px;margin-top:14px;overflow:hidden}.a4j{display:flex;align-items:center;gap:8px;white-space:nowrap}.a4j>span,.a47{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#fff1f2;color:#e11d48;padding:4px 8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.a4j i,.a47 i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(225,29,72,.1);animation:ozoLivePulse 1.5s infinite}.a4j strong{font-size:12px}.a4l{min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}.a4k{display:flex;width:max-content;gap:36px;animation:ozoTickerMove 34s linear infinite}.a4h:hover .a4k{animation-play-state:paused}.a4i{white-space:nowrap;font-size:12px;color:#667085}.a4i b{color:#111827}.a4i strong{color:#16a267}.a4i em{font-style:normal;color:#8a94a6;font-size:10px}@keyframes ozoTickerMove{from{transform:translateX(0)}to{transform:translateX(-48%)}}@keyframes ozoLivePulse{0%,100%{opacity:1}50%{opacity:.35}}
.a5x{display:grid;grid-template-columns:minmax(0,760px) minmax(280px,330px);gap:24px;align-items:start;max-width:1120px}.a5x>.a2j{width:100%;min-width:0}.a46{padding:16px;position:sticky;top:88px}.a45{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.a45>div{display:flex;align-items:center;gap:8px}.a45 h2{font-size:16px;margin:0}.a45>iconify-icon{color:#7c3aed;font-size:20px}.a4b{display:flex;gap:5px;overflow:auto;padding-bottom:9px;border-bottom:1px solid #edf0f5}.a4b button{border:0;background:#f7f7fb;color:#7a8291;font-size:9px;font-weight:700;padding:6px 8px;border-radius:7px;white-space:nowrap}.a4b button.a38{background:#ede9fe;color:#6338df}.a4g{display:grid;max-height:320px;overflow-y:auto;overflow-x:hidden;scroll-behavior:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}.a4g::-webkit-scrollbar{display:none;width:0;height:0}.a4c{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #f0f2f6;min-height:64px}.a4c.a4e{animation:ozoLiveDrop .34s ease both}.a4c:last-child{border-bottom:0}.a4f{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;font-size:16px}.a49{background:#eafaf3;color:#159965}.a4m{background:#f0ecff;color:#6d3fe6}.a48{background:#fff6e7;color:#d58417}.a4d{min-width:0;display:grid;gap:2px}.a4d strong{font-size:10px;color:#172033;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.a4d span{font-size:10px;color:#6e7786}.a4d span b{color:#159965}.a4d small{font-size:8px;color:#9aa2b0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.a4a{padding:24px 8px;text-align:center;color:#8a93a2;font-size:11px}@keyframes ozoLiveDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.a10{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.aY{overflow:hidden}.a13{position:relative;display:block;height:220px;background:#f7f7fb;overflow:hidden}.a13 img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.a13:hover img{transform:scale(1.02)}.a12{height:100%;display:grid;place-items:center;align-content:center;gap:8px;color:#6d3fe6}.a12 iconify-icon{font-size:58px}.a11{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(17,24,39,.72);color:#fff}.aZ{padding:16px}.aZ h2{font-size:15px;margin:0 0 6px}.aZ p{font-size:11px;color:#707988;line-height:1.5;margin:0 0 8px}.aZ small{display:block;color:#9aa2b0;font-size:9px;margin-bottom:12px}.a8y{grid-column:1/-1;min-height:230px}
.a68{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}.a6h,.a69{padding:20px}.a6d{padding:6px 10px;border-radius:999px;background:#eafaf3;color:#14945f;font-size:11px;font-weight:800}.a67{display:grid;gap:2px}.a67 select,.a67 textarea{width:100%;border:0;outline:0;background:transparent;color:#192132;font:inherit}.a67 textarea{resize:vertical;padding:11px 0}.a6k{display:grid;place-items:center;text-align:center;gap:5px;border:1px dashed #c9bddf;border-radius:12px;padding:24px 12px;background:#fbfaff;cursor:pointer}.a6k iconify-icon{font-size:28px;color:#6d3fe6}.a6k strong{font-size:12px}.a6k small{font-size:9px;color:#858d9b}.a6k input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.a6b{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.a6b:not(.a2D){display:none}.a6a{position:relative;width:50px;height:50px;border-radius:9px;overflow:visible}.a6a img{width:50px;height:50px;display:block;object-fit:cover;border-radius:9px;border:1px solid #e5e7eb}.a6c{position:absolute;right:-5px;top:-5px;width:18px;height:18px;border:0;border-radius:50%;display:grid;place-items:center;background:#1f2937;color:#fff;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.18)}.a6f{display:grid}.a6g{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f5}.a6j{display:flex;flex-wrap:wrap;gap:5px;max-width:160px;align-content:flex-start}.a6i{width:50px;height:50px;border-radius:8px;overflow:hidden;background:#f5f4f8;display:block}.a6i img{width:100%;height:100%;object-fit:cover}.a6e{display:flex;align-items:center;justify-content:space-between;gap:8px}.a6e strong{font-size:11px}.a6g p{font-size:10px;color:#687181;margin:5px 0}.a6g small,.a6g em{display:block;font-size:8px;color:#9aa2b0;font-style:normal}.a6g em{color:#b45309;margin-top:3px}.a7A{font-size:8px;font-weight:800;text-transform:uppercase;padding:4px 7px;border-radius:999px}.a7z{background:#fff7dc;color:#9b6b00}.a7w{background:#e9f9f1;color:#138b59}.a7B{background:#fff0f0;color:#c23c3c}.a65{margin-top:20px}.a65>.a6V{margin-bottom:12px}.a8O{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#e9f9f1;color:#138b59;padding:4px 8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.a8O i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(19,139,89,.1)}.a66{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.a1j{overflow:hidden}.a1l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;background:#f4f4f8}.a1l .a1m:only-child{grid-column:1/-1;height:190px}.a1m{height:112px;display:block;position:relative;background:#f4f4f8;overflow:hidden}.a1m img{width:100%;height:100%;object-fit:cover}.a1m span{position:absolute;right:7px;top:7px;width:24px;height:24px;border-radius:7px;background:rgba(17,24,39,.7);color:#fff;display:grid;place-items:center;font-size:13px}.a1k{padding:14px}.a1k h3{font-size:16px;color:#14945f;margin:8px 0}.a1k p{font-size:10px;line-height:1.5;color:#687181;margin:0 0 10px}.a1k small{display:flex;align-items:center;gap:4px;color:#8a93a2;font-size:8px}
@media(max-width:1100px){.a5x{grid-template-columns:minmax(0,1fr)}.a46{position:static;max-width:none}.a4g{max-height:300px}.a10,.a66{grid-template-columns:repeat(2,minmax(0,1fr))}.a68{grid-template-columns:1fr}}
@media(max-width:720px){.a14{right:14px;top:14px;min-width:0;padding:7px}.a14>span{width:31px;height:31px}.a14 strong,.a14 small{display:none}.a9e{right:12px}.a4h{grid-template-columns:1fr;gap:8px;padding:11px 12px}.a4j strong{font-size:11px}.a10,.a66{grid-template-columns:1fr}.a13{height:210px}.a6h,.a69{padding:15px}.a1m{height:105px}.a1l .a1m:only-child{height:180px}.a5x{gap:14px}.a46{padding:14px}.a4g{max-height:290px}}

/* Searchable user timezone picker */
.db-timezone-field { overflow: visible; padding: 0; }
.db-timezone-picker { position: relative; width: 100%; min-width: 0; }
.db-timezone-trigger {
  width: 100%; min-height: 46px; padding: 0 13px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #343943; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.db-timezone-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-timezone-trigger iconify-icon { flex: 0 0 auto; color: #8e949d; font-size: 15px; transition: transform .16s ease; }
.db-timezone-picker.db-timezone-picker-open .db-timezone-trigger iconify-icon { transform: rotate(180deg); }
.db-timezone-options {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-height: 330px;
  padding: 7px; border: 1px solid #e1e3e8; border-radius: 10px; background: #fff;
  box-shadow: 0 14px 34px rgba(31,35,48,.13); z-index: 650; display: none;
}
.db-timezone-options.a3p { display: block; }
.db-timezone-search-wrap { position: sticky; top: 0; z-index: 2; padding: 2px 2px 7px; background: #fff; }
.db-timezone-search-field { min-height: 38px; border: 1px solid #e2e4e9; border-radius: 7px; display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.db-timezone-search-field:focus-within { border-color: #a796eb; box-shadow: 0 0 0 3px rgba(100,54,232,.08); }
.db-timezone-search-field iconify-icon { color: #858b96; font-size: 15px; }
.db-timezone-search-field input { width: 100%; min-width: 0; height: 36px; padding: 0; border: 0; outline: 0; background: transparent; color: #3d4450; font-size: 11.5px; }
.db-timezone-options-list { max-height: 265px; overflow-y: auto; padding-right: 2px; }
.db-timezone-option { width: 100%; min-height: 40px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; display: flex; align-items: center; text-align: left; color: #3f4652; font-size: 11.5px; cursor: pointer; }
.db-timezone-option:hover, .db-timezone-option[aria-selected="true"] { background: #f7f5ff; color: var(--primary); }
.db-timezone-option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-timezone-no-results { display: none; padding: 14px 10px; text-align: center; color: var(--muted); font-size: 11px; }
.db-timezone-no-results.a3A { display: block; }
.db-timezone-options-list { scrollbar-width: thin; scrollbar-color: rgba(86,72,130,.26) transparent; }
.db-timezone-options-list::-webkit-scrollbar { width: 6px; }
.db-timezone-options-list::-webkit-scrollbar-track { background: transparent; }
.db-timezone-options-list::-webkit-scrollbar-thumb { background: rgba(86,72,130,.26); border-radius: 999px; }
@media (max-width: 640px) {
  .db-timezone-options { width: min(100%, calc(100vw - 48px)); }
}