/* FINZO WALLET generated CSS bundle (app). Do not edit; edit the source files. */ /* ---- variables.css ---- */ /* ================= FINZO WALLET — Design Tokens ================= */ :root{ /* Neutral surfaces (LIGHT default) */ --bg:#f4f5fb; --bg-2:#eceef7; --surface:#ffffff; --surface-2:#f7f8fc; --text:#141625; --text-muted:#6b7192; --border:#e6e8f2; --shadow:0 10px 28px -18px rgba(30,32,60,.20); --shadow-sm:0 5px 16px -12px rgba(30,32,60,.24); --shadow-lg:0 22px 54px -24px rgba(30,32,60,.30); --success:#12b76a; --success-soft:#e7f8ef; --warning:#f79009; --warning-soft:#fff4e5; --danger:#f04438; --danger-soft:#fdecea; --info:#2e90fa; --info-soft:#e8f2ff; /* Accent (overridden by [data-color]) — default Royal Amethyst */ --primary:#6c4ff7; --primary-dark:#4f2fc4; --primary-ink:#4f2fc4; --primary-soft:#efecfe; --primary-contrast:#ffffff; --grad:linear-gradient(135deg,#6c4ff7 0%,#067ec0 100%); --card-mesh:linear-gradient(140deg,#2a1580 0%,#6a4cf5 100%); --grad-soft:linear-gradient(135deg,rgba(108,79,247,.12),rgba(6,126,192,.12)); --radius:20px; --radius-sm:13px; --radius-lg:26px; --control-h:48px; --touch-h:44px; /* 384-reference UI system. 384 CSS px remains the visual reference for spacing/type. Normal mobile browsers use the full available viewport width up to 559px so 390/393/ 412/414/430px phones do not get empty side gutters. At 560px and above, authenticated app pages stay on a centered 560px canvas instead of shrinking back to the older 384px desktop canvas. */ --design-w:384px; --app-w:560px; --nav-h:78px; --page-pad:16.8px; --sheet-pad:20.5px; --card-pad:16.8px; --grid-gap:11.15px; --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --ease:cubic-bezier(.22,1,.36,1); } /* Native FINZO Android WebView already accounts for Android system bars in its CSS viewport. Keep top/bottom safe-area tokens at zero inside the app so status/navigation insets are not counted twice by toasts, sheets or fixed UI. Browser/PWA surfaces continue to use the real safe-area insets. */ html.is-finzo-app,body.is-finzo-app{--safe-t:0px;--safe-b:0px} /* Tiny-phone safety: preserve the reference design until the viewport is genuinely narrow, then reduce only the spacing tokens needed to stay usable. */ @media(max-width:339px){ :root{ --page-pad:clamp(13px,4.375vw,14.8px); --sheet-pad:clamp(15px,5.34vw,18.1px); --card-pad:clamp(13px,4.375vw,14.8px); --grid-gap:clamp(7px,2.9vw,9.8px); } } /* ---------- DARK ---------- */ [data-theme="dark"]{ --bg:#0c0d16; --bg-2:#111324; --surface:#171a2b; --surface-2:#1e2136; --text:#f2f3fb; --text-muted:#9aa0c4; --border:#262a44; --shadow:0 14px 34px -22px rgba(0,0,0,.62); --shadow-sm:0 7px 18px -14px rgba(0,0,0,.72); --shadow-lg:0 26px 60px -28px rgba(0,0,0,.76); --success-soft:rgba(18,183,106,.14); --warning-soft:rgba(247,144,9,.14); --danger-soft:rgba(240,68,56,.16); --info-soft:rgba(46,144,250,.16); --primary-soft:rgba(115,94,232,.2); } /* ============ ACCENT PRESETS — FINZO premium palette (2026.10.15 v3) ============ Each theme = 3-colour mesh for wallet cards (--card-mesh) + a mid-tone accent. Mid-tone accents tuned for BOTH themes: white text on --primary stays >=5:1 (dark theme >=4.6:1) and the accent stays visible on dark surfaces. Each preset also tints the neutral surfaces with its own hue, so every theme feels distinct (strongest in dark mode). Generated in OKLCH; edit with care. */ [data-color="amethyst"]{--primary:#6c4ff7;--primary-dark:#5334c8;--primary-ink:#5334c8;--grad:linear-gradient(135deg,#6c4ff7 0%,#067ec0 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(63,178,255,0.9) 0%,rgba(63,178,255,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(106,76,245,0.95) 0%,rgba(106,76,245,0) 62%),linear-gradient(140deg,#2a1580 0%,#6a4cf5 100%);--primary-soft:#efecfe;--grad-soft:linear-gradient(135deg,rgba(108,79,247,0.12),rgba(6,126,192,0.12));--bg:#f4f5ff;--bg-2:#ecedfa;--surface-2:#f8f8ff;--border:#e1e2f3;} [data-theme="dark"][data-color="amethyst"]{--primary:#725bfa;--primary-dark:#583dd0;--primary-ink:#a6a5fb;--grad:linear-gradient(135deg,#725bfa 0%,#1584c7 100%);--primary-soft:rgba(114,91,250,0.2);--grad-soft:linear-gradient(135deg,rgba(114,91,250,0.16),rgba(6,126,192,0.14));--bg:#0d0d17;--bg-2:#13131e;--surface:#1a1a28;--surface-2:#212132;--border:#2c2d42;--text-muted:#a4a5cd;} [data-color="sapphire"]{--primary:#2563ec;--primary-dark:#1247bf;--primary-ink:#1247bf;--grad:linear-gradient(135deg,#2563ec 0%,#1282aa 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(98,208,255,0.9) 0%,rgba(98,208,255,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(31,91,224,0.95) 0%,rgba(31,91,224,0) 62%),linear-gradient(140deg,#0a1c4a 0%,#1f5be0 100%);--primary-soft:#e7eefd;--grad-soft:linear-gradient(135deg,rgba(37,99,236,0.12),rgba(18,130,170,0.12));--bg:#f1f6ff;--bg-2:#e7eefa;--surface-2:#f6f9ff;--border:#dce4f3;} [data-theme="dark"][data-color="sapphire"]{--primary:#2e6cf5;--primary-dark:#1a4fc7;--primary-ink:#86adfa;--grad:linear-gradient(135deg,#2e6cf5 0%,#0988b2 100%);--primary-soft:rgba(46,108,245,0.2);--grad-soft:linear-gradient(135deg,rgba(46,108,245,0.16),rgba(18,130,170,0.14));--bg:#0a0e17;--bg-2:#0f141f;--surface:#151c29;--surface-2:#1b2332;--border:#252f42;--text-muted:#96aace;} [data-color="blackgold"]{--primary:#906605;--primary-dark:#6d4c05;--primary-ink:#6d4c05;--grad:linear-gradient(135deg,#906605 0%,#997211 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(212,169,78,0.9) 0%,rgba(212,169,78,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(59,47,28,0.95) 0%,rgba(59,47,28,0) 62%),linear-gradient(140deg,#121212 0%,#3b2f1c 100%);--primary-soft:#f3eee4;--grad-soft:linear-gradient(135deg,rgba(144,102,5,0.12),rgba(153,114,17,0.12));--bg:#faf5ec;--bg-2:#f4ede1;--surface-2:#fcf9f2;--border:#ece3d4;} [data-theme="dark"][data-color="blackgold"]{--primary:#996e04;--primary-dark:#755306;--primary-ink:#cfa763;--grad:linear-gradient(135deg,#996e04 0%,#a1770b 100%);--primary-soft:rgba(153,110,4,0.2);--grad-soft:linear-gradient(135deg,rgba(153,110,4,0.16),rgba(153,114,17,0.14));--bg:#130d05;--bg-2:#1a1308;--surface:#231a0c;--surface-2:#2b2211;--border:#392d18;--text-muted:#bca681;} [data-color="rosegold"]{--primary:#a85365;--primary-dark:#833b4b;--primary-ink:#833b4b;--grad:linear-gradient(135deg,#a85365 0%,#9a6f57 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(242,195,168,0.9) 0%,rgba(242,195,168,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(183,110,121,0.95) 0%,rgba(183,110,121,0) 62%),linear-gradient(140deg,#6e2f4a 0%,#b76e79 100%);--primary-soft:#f5ecee;--grad-soft:linear-gradient(135deg,rgba(168,83,101,0.12),rgba(154,111,87,0.12));--bg:#fef2f4;--bg-2:#f9e9eb;--surface-2:#fff7f8;--border:#f2dee1;} [data-theme="dark"][data-color="rosegold"]{--primary:#b15b6d;--primary-dark:#8b4252;--primary-ink:#e698a5;--grad:linear-gradient(135deg,#b15b6d 0%,#a0755c 100%);--primary-soft:rgba(177,91,109,0.2);--grad-soft:linear-gradient(135deg,rgba(177,91,109,0.16),rgba(154,111,87,0.14));--bg:#160b0d;--bg-2:#1d1012;--surface:#271619;--surface-2:#301d20;--border:#40272b;--text-muted:#ca9ba2;} [data-color="emerald"]{--primary:#047d55;--primary-dark:#065e40;--primary-ink:#065e40;--grad:linear-gradient(135deg,#047d55 0%,#048963 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(110,231,183,0.9) 0%,rgba(110,231,183,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(13,122,85,0.95) 0%,rgba(13,122,85,0) 62%),linear-gradient(140deg,#053d2e 0%,#0d7a55 100%);--primary-soft:#e3f1ec;--grad-soft:linear-gradient(135deg,rgba(4,125,85,0.12),rgba(4,137,99,0.12));--bg:#eff9f3;--bg-2:#e4f2ea;--surface-2:#f4fbf7;--border:#d8e9df;} [data-theme="dark"][data-color="emerald"]{--primary:#04865c;--primary-dark:#086645;--primary-ink:#69bd96;--grad:linear-gradient(135deg,#04865c 0%,#158f69 100%);--primary-soft:rgba(4,134,92,0.2);--grad-soft:linear-gradient(135deg,rgba(4,134,92,0.16),rgba(4,137,99,0.14));--bg:#06110c;--bg-2:#0a1711;--surface:#0f2018;--surface-2:#15281f;--border:#1c3529;--text-muted:#89b59e;} [data-color="aurora"]{--primary:#157794;--primary-dark:#035971;--primary-ink:#035971;--grad:linear-gradient(135deg,#157794 0%,#07877d 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(46,230,214,0.9) 0%,rgba(46,230,214,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(91,52,214,0.95) 0%,rgba(91,52,214,0) 62%),linear-gradient(140deg,#0b4f6c 0%,#5b34d6 100%);--primary-soft:#e5f0f3;--grad-soft:linear-gradient(135deg,rgba(21,119,148,0.12),rgba(7,135,125,0.12));--bg:#edf8fc;--bg-2:#e2f1f7;--surface-2:#f3fbfe;--border:#d5e7ef;} [data-theme="dark"][data-color="aurora"]{--primary:#227f9c;--primary-dark:#05617a;--primary-ink:#71b7d1;--grad:linear-gradient(135deg,#227f9c 0%,#178d83 100%);--primary-soft:rgba(34,127,156,0.2);--grad-soft:linear-gradient(135deg,rgba(34,127,156,0.16),rgba(7,135,125,0.14));--bg:#051015;--bg-2:#08161c;--surface:#0c1f25;--surface-2:#11272e;--border:#18333d;--text-muted:#82b2c4;} [data-color="sunset"]{--primary:#c3410d;--primary-dark:#94300a;--primary-ink:#94300a;--grad:linear-gradient(135deg,#c3410d 0%,#a56d07 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(255,179,64,0.9) 0%,rgba(255,179,64,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(224,72,46,0.95) 0%,rgba(224,72,46,0) 62%),linear-gradient(140deg,#9a2a12 0%,#e0482e 100%);--primary-soft:#f8eae4;--grad-soft:linear-gradient(135deg,rgba(195,65,13,0.12),rgba(165,109,7,0.12));--bg:#fef3f0;--bg-2:#f9eae5;--surface-2:#fff7f5;--border:#f2dfda;} [data-theme="dark"][data-color="sunset"]{--primary:#cc4b1c;--primary-dark:#a33100;--primary-ink:#fd906e;--grad:linear-gradient(135deg,#cc4b1c 0%,#ab7314 100%);--primary-soft:rgba(204,75,28,0.2);--grad-soft:linear-gradient(135deg,rgba(204,75,28,0.16),rgba(165,109,7,0.14));--bg:#160b08;--bg-2:#1d110d;--surface:#271712;--surface-2:#301e18;--border:#402821;--text-muted:#ca9d8f;} [data-color="ruby"]{--primary:#cf2b4a;--primary-dark:#a40e33;--primary-ink:#a40e33;--grad:linear-gradient(135deg,#cf2b4a 0%,#cb4d66 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(255,122,144,0.9) 0%,rgba(255,122,144,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(179,18,63,0.95) 0%,rgba(179,18,63,0) 62%),linear-gradient(140deg,#4d0b1c 0%,#b3123f 100%);--primary-soft:#fae8eb;--grad-soft:linear-gradient(135deg,rgba(207,43,74,0.12),rgba(203,77,102,0.12));--bg:#fff2f3;--bg-2:#fae9e9;--surface-2:#fff7f7;--border:#f2dedf;} [data-theme="dark"][data-color="ruby"]{--primary:#d93651;--primary-dark:#ad1b3a;--primary-ink:#fc8d94;--grad:linear-gradient(135deg,#d93651 0%,#d2536b 100%);--primary-soft:rgba(217,54,81,0.2);--grad-soft:linear-gradient(135deg,rgba(217,54,81,0.16),rgba(203,77,102,0.14));--bg:#160b0b;--bg-2:#1e1011;--surface:#271617;--surface-2:#311d1e;--border:#402728;--text-muted:#cb9b9d;} [data-color="lavender"]{--primary:#7857d1;--primary-dark:#5c3da7;--primary-ink:#5c3da7;--grad:linear-gradient(135deg,#7857d1 0%,#a460a3 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(242,168,240,0.9) 0%,rgba(242,168,240,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(132,102,224,0.95) 0%,rgba(132,102,224,0) 62%),linear-gradient(140deg,#4b3aa8 0%,#8466e0 100%);--primary-soft:#f0edfa;--grad-soft:linear-gradient(135deg,rgba(120,87,209,0.12),rgba(164,96,163,0.12));--bg:#f6f4fe;--bg-2:#eeecf9;--surface-2:#f9f8ff;--border:#e4e2f2;} [data-theme="dark"][data-color="lavender"]{--primary:#7f60da;--primary-dark:#6245af;--primary-ink:#b2a1fc;--grad:linear-gradient(135deg,#7f60da 0%,#ab65aa 100%);--primary-soft:rgba(127,96,218,0.2);--grad-soft:linear-gradient(135deg,rgba(127,96,218,0.16),rgba(164,96,163,0.14));--bg:#0e0d16;--bg-2:#14121e;--surface:#1c1928;--surface-2:#232131;--border:#2f2c41;--text-muted:#a9a3cb;} [data-color="graphite"]{--primary:#5e6f87;--primary-dark:#455368;--primary-ink:#455368;--grad:linear-gradient(135deg,#5e6f87 0%,#6c798e 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(184,194,209,0.9) 0%,rgba(184,194,209,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(62,70,85,0.95) 0%,rgba(62,70,85,0) 62%),linear-gradient(140deg,#16191f 0%,#3e4655 100%);--primary-soft:#edeff2;--grad-soft:linear-gradient(135deg,rgba(94,111,135,0.12),rgba(108,121,142,0.12));--bg:#f2f6fd;--bg-2:#e8eef7;--surface-2:#f6f9fe;--border:#dde5ef;} [data-theme="dark"][data-color="graphite"]{--primary:#667690;--primary-dark:#4c5a6f;--primary-ink:#9faec5;--grad:linear-gradient(135deg,#667690 0%,#727f94 100%);--primary-soft:rgba(102,118,144,0.2);--grad-soft:linear-gradient(135deg,rgba(102,118,144,0.16),rgba(108,121,142,0.14));--bg:#0a0f15;--bg-2:#0f151c;--surface:#151c26;--surface-2:#1c242f;--border:#26303e;--text-muted:#98abc6;} [data-color="lagoon"]{--primary:#187a72;--primary-dark:#075c56;--primary-ink:#075c56;--grad:linear-gradient(135deg,#187a72 0%,#1481b0 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(76,195,255,0.9) 0%,rgba(76,195,255,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(13,143,134,0.95) 0%,rgba(13,143,134,0) 62%),linear-gradient(140deg,#063f45 0%,#0d8f86 100%);--primary-soft:#e6f0ef;--grad-soft:linear-gradient(135deg,rgba(24,122,114,0.12),rgba(20,129,176,0.12));--bg:#edf9f7;--bg-2:#e1f2f0;--surface-2:#f3fbfa;--border:#d5e9e6;} [data-theme="dark"][data-color="lagoon"]{--primary:#24827a;--primary-dark:#0a645e;--primary-ink:#73bab2;--grad:linear-gradient(135deg,#24827a 0%,#0c87ba 100%);--primary-soft:rgba(36,130,122,0.2);--grad-soft:linear-gradient(135deg,rgba(36,130,122,0.16),rgba(20,129,176,0.14));--bg:#041110;--bg-2:#071816;--surface:#0a201e;--surface-2:#102826;--border:#163532;--text-muted:#80b5af;} [data-color="plum"]{--primary:#a44f8f;--primary-dark:#80376f;--primary-ink:#80376f;--grad:linear-gradient(135deg,#a44f8f 0%,#b05d8c 100%);--card-mesh:radial-gradient(110% 85% at 100% 0%,rgba(228,140,188,0.9) 0%,rgba(228,140,188,0) 58%),radial-gradient(90% 90% at 0% 100%,rgba(126,47,108,0.95) 0%,rgba(126,47,108,0) 62%),linear-gradient(140deg,#33102e 0%,#7e2f6c 100%);--primary-soft:#f5ecf3;--grad-soft:linear-gradient(135deg,rgba(164,79,143,0.12),rgba(176,93,140,0.12));--bg:#fcf3f9;--bg-2:#f6e9f2;--surface-2:#fdf7fb;--border:#eedfe9;} [data-theme="dark"][data-color="plum"]{--primary:#ad5797;--primary-dark:#883e76;--primary-ink:#e294cc;--grad:linear-gradient(135deg,#ad5797 0%,#b66392 100%);--primary-soft:rgba(173,87,151,0.2);--grad-soft:linear-gradient(135deg,rgba(173,87,151,0.16),rgba(176,93,140,0.14));--bg:#140b11;--bg-2:#1b1018;--surface:#241720;--surface-2:#2d1d29;--border:#3c2836;--text-muted:#c29cb6;} [data-color="navratri"]{--primary:#ca303c;--primary-dark:#a21829;--primary-ink:#a21829;--grad:linear-gradient(135deg,#ca303c 0%,#b86905 100%);--card-mesh:linear-gradient(140deg,#ca303c 0%,#b86905 100%);--primary-soft:#f9e8ea;--grad-soft:linear-gradient(135deg,rgba(202,48,60,0.12),rgba(184,105,5,0.12));--bg:#fff3f2;--bg-2:#fae9e8;--surface-2:#fff7f6;--border:#f2dfdd;} [data-theme="dark"][data-color="navratri"]{--primary:#d43a45;--primary-dark:#aa222f;--primary-ink:#fd8785;--grad:linear-gradient(135deg,#d43a45 0%,#be6f14 100%);--primary-soft:rgba(212,58,69,0.2);--grad-soft:linear-gradient(135deg,rgba(212,58,69,0.16),rgba(184,105,5,0.14));--bg:#160b0a;--bg-2:#1e1010;--surface:#281616;--surface-2:#311d1c;--border:#402726;--text-muted:#cb9c99;} [data-color="diwali"]{--primary:#9c5d00;--primary-dark:#774709;--primary-ink:#774709;--grad:linear-gradient(135deg,#9c5d00 0%,#9c770f 100%);--card-mesh:linear-gradient(140deg,#9c5d00 0%,#9c770f 100%);--primary-soft:#f4ede3;--grad-soft:linear-gradient(135deg,rgba(156,93,0,0.12),rgba(156,119,15,0.12));--bg:#fcf4ed;--bg-2:#f7ece2;--surface-2:#fdf8f3;--border:#eee1d5;} [data-theme="dark"][data-color="diwali"]{--primary:#a56512;--primary-dark:#814d08;--primary-ink:#df9b53;--grad:linear-gradient(135deg,#a56512 0%,#a47c06 100%);--primary-soft:rgba(165,101,18,0.2);--grad-soft:linear-gradient(135deg,rgba(165,101,18,0.16),rgba(156,119,15,0.14));--bg:#140d06;--bg-2:#1b1209;--surface:#25190d;--surface-2:#2e2013;--border:#3c2b1a;--text-muted:#c3a384;} [data-color="holi"]{--primary:#be3383;--primary-dark:#981c66;--primary-ink:#981c66;--grad:linear-gradient(135deg,#be3383 0%,#8f59d9 50%,#1282cb 100%);--card-mesh:linear-gradient(140deg,#be3383 0%,#8f59d9 50%,#1282cb 100%);--primary-soft:#f8e9f1;--grad-soft:linear-gradient(135deg,rgba(190,51,131,0.12),rgba(18,130,203,0.12));--bg:#fdf2f7;--bg-2:#f8e9ef;--surface-2:#fef7fa;--border:#f0dee6;} [data-theme="dark"][data-color="holi"]{--primary:#c83d8b;--primary-dark:#a0266d;--primary-ink:#f684bd;--grad:linear-gradient(135deg,#c83d8b 0%,#955fe0 50%,#0b88d5 100%);--primary-soft:rgba(200,61,139,0.2);--grad-soft:linear-gradient(135deg,rgba(200,61,139,0.16),rgba(18,130,203,0.14));--bg:#150b10;--bg-2:#1c1016;--surface:#26161e;--surface-2:#2f1d25;--border:#3e2732;--text-muted:#c69bae;} [data-color="tiranga"]{--primary:#426ab8;--primary-dark:#2e5093;--primary-ink:#2e5093;--grad:linear-gradient(135deg,#af5a0a 0%,#426ab8 52%,#238142 100%);--card-mesh:linear-gradient(140deg,#af5a0a 0%,#426ab8 52%,#238142 100%);--primary-soft:#eaeff7;--grad-soft:linear-gradient(135deg,rgba(66,106,184,0.12),rgba(50,141,77,0.12));--bg:#f1f6ff;--bg-2:#e7eefa;--surface-2:#f6f9ff;--border:#dce4f3;} [data-theme="dark"][data-color="tiranga"]{--primary:#4972c1;--primary-dark:#34579b;--primary-ink:#86aaec;--grad:linear-gradient(135deg,#b85f04 0%,#4972c1 52%,#2b8748 100%);--primary-soft:rgba(73,114,193,0.2);--grad-soft:linear-gradient(135deg,rgba(73,114,193,0.16),rgba(50,141,77,0.14));--bg:#0a0e17;--bg-2:#0f141f;--surface:#151c29;--surface-2:#1b2332;--border:#252f42;--text-muted:#96aace;} [data-color="newyear"]{--primary:#2e6bc2;--primary-dark:#1b509c;--primary-ink:#1b509c;--grad:linear-gradient(135deg,#2e6bc2 0%,#8b61c3 50%,#cd4f89 100%);--card-mesh:linear-gradient(140deg,#2e6bc2 0%,#8b61c3 50%,#cd4f89 100%);--primary-soft:#e8eff8;--grad-soft:linear-gradient(135deg,rgba(46,107,194,0.12),rgba(205,79,137,0.12));--bg:#f0f6ff;--bg-2:#e7eefa;--surface-2:#f6f9ff;--border:#dbe5f3;} [data-theme="dark"][data-color="newyear"]{--primary:#3773cb;--primary-dark:#2258a4;--primary-ink:#7aabf5;--grad:linear-gradient(135deg,#3773cb 0%,#9167ca 50%,#d4558f 100%);--primary-soft:rgba(55,115,203,0.2);--grad-soft:linear-gradient(135deg,rgba(55,115,203,0.16),rgba(205,79,137,0.14));--bg:#090f17;--bg-2:#0e151f;--surface:#141c29;--surface-2:#1a2432;--border:#233042;--text-muted:#93abce;} /* Status colours (success / error / warning) stay the same in every theme so they never read as "just the theme colour". They are nudged only for accents that sit on the same hue, keeping credit/debit and error states distinct. */ [data-color="sunset"],[data-color="navratri"]{--danger:#d81b60;--danger-soft:#fde8ef;} [data-theme="dark"][data-color="sunset"],[data-theme="dark"][data-color="navratri"]{--danger:#e8336f;--danger-soft:rgba(232,51,111,.16);} [data-color="ruby"]{--danger:#e2580b;--danger-soft:#fff0e5;} [data-theme="dark"][data-color="ruby"]{--danger:#f06a1d;--danger-soft:rgba(240,106,29,.16);} [data-color="emerald"]{--success:#16a34a;--success-soft:#e7f6eb;} [data-theme="dark"][data-color="emerald"]{--success:#22b357;--success-soft:rgba(34,179,87,.15);} [data-color="diwali"],[data-color="blackgold"]{--warning:#e8650c;--warning-soft:#fff0e4;} [data-theme="dark"][data-color="diwali"],[data-theme="dark"][data-color="blackgold"]{--warning-soft:rgba(232,101,12,.15);} /* ---- base.css ---- */ /* ================= BASE ================= */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%;font-size:16px} @media(max-width:339px){html{font-size:clamp(15.25px,4.77vw,16px)}} body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.48; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .4s var(--ease),color .3s var(--ease); } h1,h2,h3,h4,p{margin:0} h1,h2,h3,h4{text-wrap:balance} small{line-height:1.45} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;min-width:0;max-width:100%} img{max-width:100%;display:block;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none} input,textarea,select{font-family:inherit;font-size:16px;min-width:0;max-width:100%}/* 16px = no iOS zoom */ ::selection{background:var(--primary);color:#fff} :focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* Hide Google Translate banner/toolbar */ .goog-te-banner-frame,.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame{display:none!important} body{top:0!important} .goog-tooltip,.goog-text-highlight{display:none!important;background:none!important;box-shadow:none!important} /* Scrollbars */ ::-webkit-scrollbar{width:0;height:0} /* Typography scale */ .h1{font-size:clamp(1.9rem,6vw,2.4rem);font-weight:800;letter-spacing:-.02em} .h2{font-size:1.125rem;font-weight:700;letter-spacing:-.01em} .eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)} .muted{color:var(--text-muted)} .tiny{font-size:.78rem} .center{text-align:center} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* utility */ .row{display:flex;align-items:center;min-width:0} .between{justify-content:space-between} .gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px} .mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px} .hidden{display:none!important} /* Android app download controls are never shown on iPhone/iPad/iPadOS. */ html.is-ios-client .android-download-only{display:none!important} html.is-ios-client .landing-bottom-actions{grid-template-columns:minmax(0,1fr)!important} .spin{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ================= RESPONSIVE FOUNDATION ================= Keep every page shrink-safe without scaling the whole UI. Normal phones (340px+) retain the 384-reference composition. */ .app,.main,.main>*{min-width:0} .main>*{max-width:100%} .card,.field,.toggle-row,.set-row,.sheet-body,.alert-card{min-width:0} .flex-min-0{min-width:0} pre,code{max-width:100%} pre{overflow:auto} @media(max-width:339px){ :root{--radius:clamp(18px,5.21vw,20px);--radius-sm:12px;--radius-lg:clamp(24px,6.77vw,26px)} } /* ================= 384 REFERENCE CONTRACT ================= Do not scale the whole document. Keep text readable and let dense content reflow only on genuinely tiny viewports (339px and below). */ @media(max-width:339px){ .row{min-width:0} .between{gap:8px} .card,.card-flat,.set-row,.toggle-row{max-width:100%} .card-flat{padding:var(--card-pad)} table{max-width:100%} } /* ---- layout.css ---- */ /* ================= LAYOUT / APP SHELL ================= */ .app{ width:100%;max-width:var(--app-w); margin:0 auto; min-height:100vh; min-height:100dvh; background:var(--bg); position:relative; box-shadow:0 0 80px -20px rgba(0,0,0,.15); } @media(min-width:560px){ .app{border-left:1px solid var(--border);border-right:1px solid var(--border)} } /* Live theme background: large, softly blurred floating color orbs. */ .theme-orbs{ position:fixed;top:0;left:50%;transform:translateX(-50%); width:min(var(--app-w),100vw);height:100vh;height:100dvh; z-index:0;pointer-events:none;user-select:none;overflow:hidden; contain:layout paint;isolation:isolate; } .theme-orb{ position:absolute;border-radius:50%; filter:blur(58px);-webkit-filter:blur(58px); opacity:.14;will-change:transform; background:color-mix(in srgb,var(--primary) 62%,white 38%); transform:translate3d(0,0,0); } .theme-orb:nth-child(1){width:300px;height:300px;left:-150px;top:-85px;animation:themeOrbA 31s ease-in-out infinite alternate} .theme-orb:nth-child(2){width:260px;height:260px;right:-125px;top:22%;opacity:.12;background:color-mix(in srgb,var(--primary-dark) 55%,white 45%);animation:themeOrbB 37s ease-in-out -8s infinite alternate} .theme-orb:nth-child(3){width:330px;height:330px;left:-145px;bottom:2%;opacity:.11;background:color-mix(in srgb,var(--primary) 48%,white 52%);animation:themeOrbC 42s ease-in-out -14s infinite alternate} .theme-orb:nth-child(4){width:245px;height:245px;right:-110px;bottom:-75px;opacity:.13;background:color-mix(in srgb,var(--primary-dark) 48%,white 52%);animation:themeOrbD 34s ease-in-out -5s infinite alternate} [data-theme="dark"] .theme-orb{opacity:.16} [data-theme="dark"] .theme-orb:nth-child(2){opacity:.14} [data-theme="dark"] .theme-orb:nth-child(3){opacity:.13} [data-theme="dark"] .theme-orb:nth-child(4){opacity:.15} @keyframes themeOrbA{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(90px,75px,0) scale(1.08)}66%{transform:translate3d(35px,185px,0) scale(.94)}100%{transform:translate3d(120px,115px,0) scale(1.04)}} @keyframes themeOrbB{0%{transform:translate3d(0,0,0) scale(.96)}35%{transform:translate3d(-105px,80px,0) scale(1.06)}70%{transform:translate3d(-45px,-100px,0) scale(1)}100%{transform:translate3d(-135px,25px,0) scale(1.1)}} @keyframes themeOrbC{0%{transform:translate3d(0,0,0) scale(1.05)}30%{transform:translate3d(120px,-95px,0) scale(.95)}68%{transform:translate3d(45px,-235px,0) scale(1.07)}100%{transform:translate3d(145px,-150px,0) scale(1)}} @keyframes themeOrbD{0%{transform:translate3d(0,0,0) scale(1)}38%{transform:translate3d(-120px,-75px,0) scale(1.1)}72%{transform:translate3d(-55px,-205px,0) scale(.94)}100%{transform:translate3d(-155px,-135px,0) scale(1.05)}} @media(max-width:339px){.theme-orb{filter:blur(52px);-webkit-filter:blur(52px)}.theme-orb:nth-child(1){width:260px;height:260px}.theme-orb:nth-child(3){width:290px;height:290px}} @media(prefers-reduced-motion:reduce){.theme-orb{animation:none!important;transform:none!important;opacity:.09}.theme-orb:nth-child(2),.theme-orb:nth-child(3),.theme-orb:nth-child(4){opacity:.08}} .main{position:relative;z-index:1} /* Ambient gradient glow behind app on desktop */ body::before{ content:"";position:fixed;inset:0;z-index:-1; background:radial-gradient(1200px 600px at 50% -10%,var(--primary-soft),transparent 60%); opacity:.7;pointer-events:none; } /* Top bar */ .topbar{ position:sticky;top:0;z-index:40; display:flex;align-items:center;justify-content:space-between; padding:14px var(--page-pad) 11px; background:linear-gradient(var(--bg),rgba(0,0,0,0) ); backdrop-filter:blur(8px); } .topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em} .topbar .brand img{width:34px;height:34px;border-radius:10px;box-shadow:var(--shadow-sm)} .icon-btn{ width:44px;height:44px;border-radius:14px;display:grid;place-items:center; background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-sm); transition:transform .18s var(--ease),background .2s;position:relative; } .icon-btn:active{transform:scale(.9)} .icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)} /* Main scroll area */ .main{ padding:6px var(--page-pad) calc(var(--nav-h) + 28px + var(--safe-b)); min-height:60vh; } /* View transition */ .view-enter{animation:viewIn .22s var(--ease)} @keyframes viewIn{from{opacity:.72;transform:translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.view-enter{animation:none!important}} /* ================= BOTTOM NAV ================= */ .bottomnav{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(8px + var(--safe-b)); width:min(var(--app-w) - 28px,92vw); height:var(--nav-h); background:var(--surface); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow-lg); display:flex;align-items:center;justify-content:space-around; z-index:50;padding:0 8px; } /* Android WebView already lays its viewport above the system navigation area. Re-applying CSS safe-area bottom inside the native app creates a large blank strip on phones using 3-button navigation, so keep the original floating navbar spacing inside FINZO App and reserve safe-area handling for browsers. */ body.is-finzo-app .bottomnav{bottom:8px} body.is-finzo-app .main{padding-bottom:calc(var(--nav-h) + 28px)} .nav-item{ position:relative;display:flex;flex-direction:column;align-items:center;gap:4px; color:var(--text-muted);font-size:0.682rem;font-weight:600; padding:8px 6px;flex:1;transition:color .25s var(--ease); } .nav-item i{font-size:1.18rem;transition:transform .3s var(--ease)} .nav-item.active{color:var(--primary)} .nav-item.active i{transform:translateY(-2px)} .nav-item:active i{transform:scale(.85)} /* animated indicator */ .nav-indicator{ position:absolute;top:8px;height:4px;width:26px;border-radius:4px; background:var(--grad);transition:left .38s var(--ease),width .38s var(--ease); box-shadow:0 4px 12px -2px var(--primary); } /* Earn — elevated FAB */ .nav-earn{transform:translateY(-16px)} .nav-earn .earn-orb{ width:60px;height:60px;border-radius:20px;display:grid;place-items:center; background:var(--grad);color:#fff;font-size:1.5rem; box-shadow:0 14px 30px -8px var(--primary); transition:transform .3s var(--ease); } .nav-earn.active .earn-orb,.nav-earn:active .earn-orb{transform:scale(.92) rotate(-6deg)} .nav-earn span{margin-top:2px} /* ================= SIDEBAR (RIGHT) ================= */ .sidebar-backdrop{position:fixed;inset:0;background:rgba(6,8,20,.5);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .3s} .sidebar-backdrop.open{opacity:1;pointer-events:auto} .sidebar{ position:fixed;top:0;right:0;height:100%;width:min(84vw,340px); background:var(--surface);z-index:70; transform:translateX(105%);transition:transform .42s var(--ease); box-shadow:var(--shadow-lg);display:flex;flex-direction:column; padding:24px 20px calc(24px + var(--safe-b)); } .sidebar.open{transform:none} .sidebar-user{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--radius-sm);background:var(--grad-soft)} .sidebar-user .avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--grad)} .sidebar-user-copy{min-width:0;flex:1}.sidebar-user-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar-user-complete{width:100%;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform .16s var(--ease),background .18s var(--ease)} .sidebar-user-complete:active{transform:scale(.985)}.sidebar-user-arrow{margin-left:auto;color:var(--primary);font-size:.85rem} .side-links{margin-top:22px;display:flex;flex-direction:column;gap:4px;overflow-y:auto} .side-link{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:14px;font-weight:600;color:var(--text);transition:background .2s,transform .15s} .side-link i{width:22px;text-align:center;color:var(--primary);font-size:1.05rem} .side-link:active{transform:scale(.97);background:var(--surface-2)} .side-link.danger{color:var(--danger)}.side-link.danger i{color:var(--danger)} .sidebar-download-app{position:relative;width:100%;min-height:66px;margin-top:14px;padding:10px 12px;border:0;border-radius:18px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;overflow:hidden;background:var(--grad);color:#fff;text-align:left;box-shadow:0 16px 32px -19px var(--primary);font:inherit;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .sidebar-download-app:before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;right:-35px;top:-47px;background:rgba(255,255,255,.12);pointer-events:none}.sidebar-download-app:active{transform:scale(.975);box-shadow:0 10px 22px -17px var(--primary)} .sidebar-download-icon{position:relative;z-index:1;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.sidebar-download-icon img{width:34px;height:34px;object-fit:cover;border-radius:9px}.sidebar-download-copy{position:relative;z-index:1;display:flex;min-width:0;flex-direction:column;gap:2px}.sidebar-download-copy b{font-size:.76rem;font-weight:900;letter-spacing:-.01em}.sidebar-download-copy small{font-size:0.648rem;line-height:1.35;color:rgba(255,255,255,.76);font-weight:650}.sidebar-download-arrow{position:relative;z-index:1;font-size:.74rem;color:#fff!important} /* ================= APP LOADER ================= */ .app-loader{ position:fixed;inset:0;z-index:9999;display:grid;place-items:center; background:var(--bg);transition:opacity .5s var(--ease),visibility .5s; } .app-loader.hide{opacity:0;visibility:hidden} .app-loader .logo-wrap{display:flex;flex-direction:column;align-items:center;gap:18px} .app-loader img{width:84px;height:84px;border-radius:24px;box-shadow:0 20px 50px -12px var(--primary);animation:pulseLogo 1.6s var(--ease) infinite} .app-loader .ring{width:44px;height:44px;border-radius:50%;border:3px solid var(--primary-soft);border-top-color:var(--primary);animation:spin .8s linear infinite} .app-loader .name{font-weight:800;letter-spacing:.02em} @keyframes pulseLogo{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}} /* Top-bar notification unread count */ .icon-btn .notification-badge{ position:absolute;top:-5px;right:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:999px; display:flex;align-items:center;justify-content:center;background:var(--danger);color:#fff;border:2px solid var(--bg); font-size:0.678rem;font-weight:800;line-height:1;box-shadow:0 5px 12px rgba(240,68,56,.28); opacity:0;transform:scale(.65);pointer-events:none;transition:opacity .2s var(--ease),transform .22s var(--ease); } .icon-btn .notification-badge.show{opacity:1;transform:scale(1)} /* Customer Support — uses the project's universal BottomSheet shell. */ .sheet.support-sheet-shell{background:color-mix(in srgb,var(--surface) 97%,var(--primary) 3%);border:1px solid color-mix(in srgb,var(--border) 84%,var(--primary) 16%);border-bottom:0;box-shadow:0 -24px 68px rgba(0,0,0,.28)} .sheet.support-sheet-shell .sheet-head{padding:8px 22px 16px} .sheet.support-sheet-shell .sheet-head h3{font-size:1.4rem;line-height:1.08;font-weight:900;letter-spacing:-.035em} .sheet.support-sheet-shell .sheet-close{width:44px;height:44px;background:color-mix(in srgb,var(--surface-2) 86%,var(--primary) 4%);color:var(--text-muted);box-shadow:0 8px 24px -20px rgba(0,0,0,.55)} .sheet.support-sheet-shell .sheet-body{padding:0 22px 26px} .support-sheet-content{padding:1px 0 4px} .support-telegram-hero{position:relative;margin-top:0;padding:20px 18px 17px;border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,#229ED9 9%,var(--surface)),color-mix(in srgb,#229ED9 4%,var(--surface-2)));border:1px solid color-mix(in srgb,#229ED9 30%,var(--border));display:grid;grid-template-columns:auto 1fr;gap:12px 15px;align-items:center;overflow:hidden} .support-telegram-hero:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-86px;top:-92px;background:rgba(34,158,217,.08);pointer-events:none} .support-telegram-logo{width:64px;height:64px;border-radius:21px;display:grid;place-items:center;background:#229ED9;color:#fff;font-size:1.72rem;box-shadow:0 16px 30px -18px rgba(34,158,217,.88)} .support-telegram-hero>div{display:flex;min-width:0;flex-direction:column;gap:2px} .support-telegram-hero small,.support-contact-row small{font-size:0.678rem;color:var(--text-muted);font-weight:800} .support-telegram-hero b{font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .support-telegram-hero>a{position:relative;z-index:2;grid-column:1/-1;min-height:55px;margin-top:4px;border-radius:17px;display:flex;justify-content:center;align-items:center;gap:10px;background:#229ED9;color:#fff;font-size:.79rem;font-weight:900;box-shadow:0 16px 28px -18px rgba(34,158,217,.9),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .16s,filter .2s} .support-telegram-hero>a:active{transform:translateY(1px) scale(.99)} .support-contact-list{display:grid;gap:10px;margin-top:15px} .support-contact-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;min-height:80px;padding:11px 14px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 10px 28px -27px rgba(0,0,0,.65)} .support-contact-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,var(--surface-2));color:var(--primary);font-size:1.08rem} .support-contact-row>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px} .support-contact-row b{font-size:.8rem;line-height:1.28;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .support-row-action{width:46px;height:46px;border:1px solid color-mix(in srgb,var(--border) 88%,var(--primary) 12%);border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--surface-2) 84%,var(--primary) 5%);color:var(--primary);font-size:.95rem} .support-channel-banner{position:relative;margin-top:15px;min-height:94px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:15px 16px;border-radius:22px;color:var(--text);border:1px solid color-mix(in srgb,#229ED9 24%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,#229ED9 10%,var(--surface)),color-mix(in srgb,var(--primary) 10%,var(--surface-2)));overflow:hidden} .support-channel-banner:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-42px;top:-52px;background:color-mix(in srgb,var(--primary) 9%,transparent)} .support-channel-banner>span{position:relative;z-index:2;width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#229ED9;color:#fff;font-size:1.24rem;box-shadow:0 13px 24px -17px rgba(34,158,217,.85)} .support-channel-banner>div{position:relative;z-index:2;display:flex;min-width:0;flex-direction:column;gap:3px} .support-channel-banner b{font-size:.79rem;line-height:1.25} .support-channel-banner small{font-size:0.676rem;color:var(--text-muted);line-height:1.45} .support-channel-banner>i{position:relative;z-index:2;color:var(--primary);font-size:.88rem} .support-icon-btn{width:38px;height:38px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:13px;background:var(--surface);color:var(--primary);display:grid;place-items:center;box-shadow:var(--shadow-sm);cursor:pointer} .support-label-btn{width:auto;min-width:104px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.7rem;font-weight:850;white-space:nowrap}.support-label-btn i{font-size:.82rem} .settings-title-row{margin-top:4px}.auth-wrap{position:relative}.auth-support-btn{position:absolute;right:4px;top:4px;z-index:3} @media(max-width:390px){.sheet.support-sheet-shell .sheet-head{padding-left:18px;padding-right:18px}.sheet.support-sheet-shell .sheet-body{padding-left:18px;padding-right:18px}.sheet.support-sheet-shell .sheet-head h3{font-size:1.3rem}.support-telegram-hero{padding:17px 15px 15px;border-radius:22px}.support-telegram-logo{width:58px;height:58px;border-radius:19px;font-size:1.5rem}.support-telegram-hero>a{min-height:52px}.support-contact-row{min-height:76px;padding:10px 12px}.support-contact-icon{width:48px;height:48px}.support-row-action{width:44px;height:44px}.support-channel-banner{min-height:88px;padding:13px 14px}.support-channel-banner>span{width:50px;height:50px}} /* ================= MOBILE-FULL / 384-REFERENCE APP SHELL ================= 384px remains the spacing/type reference, but real phones use their full viewport through 559px. From 560px upward, authenticated app pages are centered on a fixed 560px canvas so desktop/tablet views keep the intended mobile-first proportions without collapsing back to a narrow phone strip. Tiny-phone compacting still begins only at 339px and below. */ @media(max-width:559px){ :root{--app-w:100vw} body:not(.route-landing)>.app{ width:100%; max-width:100vw; margin-left:0; margin-right:0; border-left:0; border-right:0; } } @media(min-width:720px){ body.route-landing{--app-w:960px} body.route-landing .app{box-shadow:0 0 80px -26px rgba(0,0,0,.14)} } /* Keep the drawer on the app edge: full viewport on normal phones, centered app-canvas edge on wider tablet/desktop widths. */ @media(min-width:385px) and (max-width:719px){ body:not(.route-landing) .sidebar{right:calc((100vw - var(--app-w))/2)} } @media(min-width:720px){ body:not(.route-landing) .sidebar{right:calc((100vw - var(--app-w))/2)} } /* Only genuinely tiny widths adapt; 340px+ keeps the 384-reference composition. */ @media(max-width:339px){ .topbar{padding:12px var(--page-pad) 9px} .topbar .brand{gap:8px} .topbar .brand img{width:31px;height:31px;border-radius:9px} .icon-btn{width:40px;height:40px;border-radius:13px} .main{padding-top:4px;padding-bottom:calc(var(--nav-h) + 18px + var(--safe-b))} body.is-finzo-app .main{padding-bottom:calc(var(--nav-h) + 18px)} .bottomnav{width:calc(100vw - 12px);border-radius:23px;padding-left:5px;padding-right:5px} .nav-item{gap:3px;padding:7px 2px;font-size:0.672rem} .nav-item i{font-size:1.08rem} .nav-earn{transform:translateY(-13px)} .nav-earn .earn-orb{width:54px;height:54px;border-radius:18px;font-size:1.34rem} .nav-indicator{top:7px;width:22px} .sidebar{width:min(90vw,320px);padding-left:15px;padding-right:15px} } /* Very tall/wide devices should not stretch controls just because the viewport is wider. */ @media(min-width:441px){ body:not(.route-landing) .topbar, body:not(.route-landing) .main{width:100%} } /* ---- components.css ---- */ /* ================= COMPONENTS ================= */ /* Cards */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--card-pad);box-shadow:var(--shadow-sm);min-width:0} .card-flat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--card-pad);box-shadow:0 5px 16px -15px rgba(30,32,60,.28)} /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:var(--control-h);padding:12px clamp(14px,4.35vw,18px);border-radius:14px;font-weight:750;font-size:.92rem; background:var(--surface-2);color:var(--text); transition:transform .16s var(--ease),box-shadow .2s,opacity .2s; width:100%; } .btn:active{transform:scale(.97)} @media(hover:hover){ .btn:not([disabled]):hover{filter:brightness(1.015);box-shadow:var(--shadow-sm)} .btn-primary:not([disabled]):hover{box-shadow:0 13px 25px -15px var(--primary)} } .btn[disabled]{opacity:.55;pointer-events:none} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 24px -16px var(--primary)} .btn-ghost{background:var(--surface);border:1px solid var(--border)} .btn-soft{background:var(--primary-soft);color:var(--primary-dark)} .btn-danger{background:var(--danger);color:#fff} .btn-sm{min-height:38px;padding:8px 13px;font-size:.82rem;border-radius:11px;width:auto} .btn .ld{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff} .btn-loadmore-loading{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;cursor:wait}.btn-loadmore-spin{display:inline-block;width:17px;height:17px;flex:0 0 17px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;animation:spin .72s linear infinite}.btn-loadmore-loading:disabled{opacity:.78} .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.76rem;font-weight:700;background:var(--surface-2);color:var(--text-muted)} .chip-primary{background:var(--primary-soft);color:var(--primary-dark)} .badge{padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:800;text-transform:capitalize} .badge.active{background:var(--success-soft);color:var(--success)} .badge.completed{background:var(--info-soft);color:var(--info)} .badge.disabled,.badge.expired{background:var(--danger-soft);color:var(--danger)} /* Inputs */ .field{margin-bottom:16px} .field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:8px;color:var(--text)} .input,.textarea{ width:100%;min-height:var(--control-h);padding:13px clamp(13px,3.9vw,15px);border-radius:13px;border:1px solid var(--border); background:var(--surface);color:var(--text);transition:border-color .2s,box-shadow .2s; } .input:focus,.textarea:focus{outline:none;border-color:color-mix(in srgb,var(--primary) 72%,var(--border));box-shadow:0 0 0 3px var(--primary-soft)} .textarea{resize:vertical;min-height:110px} .input-group{position:relative} .input-group .suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-weight:700} /* Toggle */ .switch{position:relative;width:50px;height:30px;flex:none} .switch input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2} .switch .track{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .25s} .switch .thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .28s var(--ease);box-shadow:var(--shadow-sm)} .switch input:checked ~ .track{background:var(--grad)} .switch input:checked ~ .thumb{transform:translateX(20px)} .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)} .toggle-row:last-child{border-bottom:none} .toggle-row .tt{font-weight:700}.toggle-row .ts{font-size:.78rem;color:var(--text-muted)} /* Skeleton */ .skel{background:linear-gradient(100deg,var(--surface-2) 30%,var(--border) 50%,var(--surface-2) 70%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:12px} @keyframes shimmer{to{background-position:-200% 0}} .skel-line{height:14px;margin:8px 0;border-radius:8px} /* Empty state */ .empty{text-align:center;padding:44px 20px} .empty .ic{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;margin:0 auto 16px;background:var(--grad-soft);color:var(--primary);font-size:1.8rem} .empty h3{font-weight:800;margin-bottom:6px} .empty p{color:var(--text-muted);font-size:.9rem;margin-bottom:16px} /* ============ BOTTOM SHEET ============ */ .sheet-backdrop{position:fixed;inset:0;background:rgba(6,8,20,.55);backdrop-filter:blur(4px);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s} .sheet-backdrop.open{opacity:1;pointer-events:auto} .sheet{ position:fixed;left:50%;bottom:0;transform:translate(-50%,100%); width:min(var(--app-w),100vw);max-height:92vh; background:var(--surface);border-radius:24px 24px 0 0;z-index:90; transition:transform .42s var(--ease);display:flex;flex-direction:column; box-shadow:0 -18px 48px -26px rgba(0,0,0,.42); padding-bottom:var(--safe-b); } .sheet.open{transform:translate(-50%,0)} .sheet .handle{width:44px;height:5px;border-radius:5px;background:var(--border);margin:12px auto 4px} .sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px var(--sheet-pad) 12px;gap:10px;min-width:0} .sheet .sheet-head h3{font-weight:800;font-size:1.15rem} .sheet .sheet-close{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--text-muted)} .sheet .sheet-body{padding:4px var(--sheet-pad) 26px;overflow-y:auto;min-width:0} body.sheet-lock{overflow:hidden} /* ============ APP ALERT (center floating) ============ */ .alert-backdrop{position:fixed;inset:0;background:rgba(6,8,20,.55);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:clamp(12px,5.8vw,24px);opacity:0;pointer-events:none;transition:opacity .25s} .alert-backdrop.open{opacity:1;pointer-events:auto} .alert-card{ width:100%;max-width:352px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:25px 21px 20px;text-align:center; box-shadow:var(--shadow-lg);transform:scale(.85);transition:transform .35s var(--ease);position:relative; } .alert-backdrop.open .alert-card{transform:scale(1)} .alert-card .a-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:2rem} .a-ic.success{background:var(--success-soft);color:var(--success)} .a-ic.error{background:var(--danger-soft);color:var(--danger)} .a-ic.warning{background:var(--warning-soft);color:var(--warning)} .a-ic.info{background:var(--info-soft);color:var(--info)} .a-ic.confirm{background:var(--primary-soft);color:var(--primary)} .alert-card h3{font-weight:800;font-size:1.12rem;margin-bottom:6px} .alert-card p{color:var(--text-muted);font-size:.88rem;line-height:1.55} .alert-card .a-actions{display:flex;gap:10px;margin-top:22px} .alert-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--text-muted)} .alert-card.alert-prompt-card{text-align:left}.alert-prompt-card .a-ic{margin-left:auto;margin-right:auto}.alert-prompt-card h3,.alert-prompt-card>p{text-align:center}.a-prompt-field{display:block;margin-top:16px}.a-prompt-field>span{display:block;font-size:.78rem;font-weight:800;color:var(--text);margin-bottom:7px}.a-prompt-field .textarea{min-height:92px;padding:12px 13px;border-radius:13px;font-size:16px;background:var(--surface-2)}.a-prompt-field>small{display:block;min-height:16px;margin-top:5px;font-size:0.674rem;color:var(--danger);line-height:1.35}.alert-prompt-card .a-actions{margin-top:10px} /* ============ TOP TOAST ============ */ .toast-wrap{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:20001;width:min(var(--app-w) - 24px,94vw);padding-top:calc(12px + var(--safe-t));display:flex;flex-direction:column;gap:10px;pointer-events:none} .toast{ pointer-events:auto;background:var(--surface);border-radius:16px;padding:13px 14px 14px; box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:12px;position:relative;overflow:hidden; border:1px solid var(--border); transform:translateY(-140%);opacity:0;transition:transform .45s var(--ease),opacity .3s; } .toast.show{transform:none;opacity:1} .toast .t-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem;flex:none;color:#fff} .toast.success .t-ic{background:var(--success)} .toast.error .t-ic{background:var(--danger)} .toast.warning .t-ic{background:var(--warning)} .toast.info .t-ic{background:var(--info)} .toast .t-body{flex:1;min-width:0} .toast .t-title{font-weight:800;font-size:.9rem} .toast .t-msg{font-size:.82rem;color:var(--text-muted);margin-top:1px} .toast .t-close{color:var(--text-muted);padding:2px;font-size:.9rem} .toast .t-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--grad);width:100%;transform-origin:left;animation:toastbar linear forwards} @keyframes toastbar{from{transform:scaleX(1)}to{transform:scaleX(0)}} /* ============ PIN INPUT ============ */ .pin-dots{display:flex;justify-content:center;gap:16px;margin:22px 0} .pin-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);transition:all .2s var(--ease)} .pin-dot.filled{background:var(--grad);border-color:transparent;transform:scale(1.15)} .pin-dot.err{animation:shake .4s} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;margin:0 auto} .key{height:60px;border-radius:18px;background:var(--surface-2);font-size:1.4rem;font-weight:700;color:var(--text);transition:transform .12s,background .2s} .key:active{transform:scale(.9);background:var(--primary-soft)} .key.zero{grid-column:2} .key.del{color:var(--danger)} /* OTP boxes — six digits always stay inside narrow mobile cards. */ .otp-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,2vw,10px);width:min(100%,326px);margin:8px auto 4px} .otp-boxes input{width:100%;min-width:0;box-sizing:border-box;height:56px;text-align:center;font-size:1.4rem;font-weight:800;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);color:var(--text)} .otp-boxes input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)} @media(max-width:339px){.otp-boxes{gap:5px}.otp-boxes input{height:50px;border-radius:12px;font-size:1.2rem}} /* color swatches */ .swatches{display:flex;flex-wrap:wrap;gap:12px} .swatch{width:44px;height:44px;border-radius:14px;cursor:pointer;position:relative;transition:transform .18s var(--ease);border:2px solid transparent} .swatch:active{transform:scale(.9)} .swatch.sel{border-color:var(--text)} .swatch.sel::after{content:"\f00c";font-family:"Font Awesome 7 Pro";font-weight:900;position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem} /* list rows */ .lrow{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)} .lrow:last-child{border-bottom:none} .lrow .lic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;font-size:1.05rem} .lrow .lic.credit{background:var(--success-soft);color:var(--success)} .lrow .lic.debit{background:var(--danger-soft);color:var(--danger)} .lrow .lic.has-sender-avatar{position:relative;padding:0;overflow:hidden;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));box-shadow:0 6px 16px -14px rgba(20,25,45,.6)} .lrow .lic.has-sender-avatar>i{display:none} .tx-list-sender-avatar{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} .lrow .amt{font-weight:800;font-variant-numeric:tabular-nums} .amt.credit{color:var(--success)}.amt.debit{color:var(--text)} /* Wallet / Transaction History direct-page list tuning. */ #tx-list .lrow{border-bottom-color:color-mix(in srgb,var(--text) 18%,transparent)} #tx-list .lrow:last-child{border-bottom-color:transparent} #tx-list .lrow .amt{font-size:1.05rem;font-weight:850;line-height:1.2;white-space:nowrap} [data-theme="dark"] #tx-list .lrow{border-bottom-color:color-mix(in srgb,var(--text) 22%,transparent)} [data-theme="dark"] #tx-list .lrow:last-child{border-bottom-color:transparent} /* Short async transition loader (e.g. Telegram channel manager prefetch). */ .ui-busy-overlay{position:fixed;inset:0;z-index:98;display:grid;place-items:center;background:rgba(8,10,20,.28);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .16s ease} .ui-busy-overlay.show{opacity:1;pointer-events:auto} .ui-busy-card{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);color:var(--text);font-size:.82rem;font-weight:750} .ui-busy-spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--primary-soft);border-top-color:var(--primary);animation:spin .72s linear infinite;flex:none} /* Telegram Bot Alerts — dedicated Settings bottom sheet */ .tg-alert-loading{min-height:180px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--text-muted);font-size:.78rem}.tg-alert-loading i{color:var(--primary)} .tg-alert-account-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 5%,var(--surface-2)),var(--surface));box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden}.tg-alert-avatar,.tg-alert-connect-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:#229ED9;color:#fff;font-size:1.18rem;box-shadow:0 7px 18px rgba(34,158,217,.18)}.tg-alert-account-main{min-width:0;display:flex;flex-direction:column}.tg-alert-account-main small{font-size:0.654rem;color:var(--success);font-weight:850;letter-spacing:.01em}.tg-alert-account-main strong{font-size:.78rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tg-alert-account-main span{font-size:0.658rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tg-alert-change{justify-self:end;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:var(--primary-soft);color:var(--primary);font-size:0.654rem;font-weight:850;padding:7px 8px;border-radius:9px;white-space:nowrap;transition:transform .16s ease,background .16s ease}.tg-alert-change:active{transform:scale(.96)} .tg-alert-connect-card{text-align:center;padding:20px 15px 17px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);margin-bottom:12px}.tg-alert-connect-icon{margin:0 auto 10px;width:54px;height:54px;border-radius:18px;font-size:1.5rem}.tg-alert-connect-card h3{font-size:.9rem;margin:0}.tg-alert-connect-card p{max-width:360px;margin:7px auto 14px;color:var(--text-muted);font-size:0.68rem;line-height:1.55}.tg-alert-connect-card .btn{max-width:250px;margin:auto} .tg-alert-waiting{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px 12px;margin:0 0 12px;border-radius:13px;background:var(--info-soft);color:var(--info)}.tg-alert-waiting>i{font-size:.85rem}.tg-alert-waiting>div{display:flex;flex-direction:column;min-width:0}.tg-alert-waiting b{font-size:0.676rem}.tg-alert-waiting span{font-size:0.654rem;line-height:1.35;margin-top:2px}.tg-alert-waiting a{font-size:0.66rem;font-weight:850;color:var(--info);white-space:nowrap} .tg-alert-pref-head{padding:7px 2px 9px}.tg-alert-pref-head b{font-size:.77rem}.tg-alert-pref-head p{margin:4px 0 0;font-size:0.666rem;line-height:1.48;color:var(--text-muted)} .tg-alert-toggle-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0;background:transparent;transition:opacity .2s}.tg-alert-toggle-list.tg-alerts-disabled{opacity:.36;user-select:none}.tg-alert-toggle-list.tg-alerts-disabled .switch{pointer-events:none} .tg-alert-tile{min-width:0;min-height:112px;padding:10px 10px 9px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(150deg,var(--surface),var(--surface-2));box-shadow:0 4px 14px rgba(0,0,0,.035);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.tg-alert-tile:before{content:'';position:absolute;width:72px;height:72px;right:-26px;top:-28px;border-radius:50%;background:var(--primary-soft);opacity:.75;pointer-events:none}.tg-alert-tile.is-on{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 7%,transparent)}.tg-alert-tile>*{position:relative;z-index:1}.tg-alert-tile-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.tg-alert-mini-icon{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.7rem;border:1px solid color-mix(in srgb,var(--primary) 15%,transparent)}.tg-alert-switch{width:40px;height:24px}.tg-alert-switch .thumb{top:3px;left:3px;width:18px;height:18px}.tg-alert-switch input:checked~.thumb{transform:translateX(16px)}.tg-alert-tile-copy{min-width:0;flex:1;margin-top:8px}.tg-alert-tile-copy .tt{font-size:0.682rem;font-weight:850;line-height:1.2}.tg-alert-tile-copy .ts{font-size:0.648rem;line-height:1.32;color:var(--text-muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tg-alert-tile-state{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:7px;padding:3px 6px;border-radius:999px;background:var(--success-soft);color:var(--success);font-size:0.642rem;font-weight:850;line-height:1}.tg-alert-tile.is-off .tg-alert-tile-state{background:var(--surface-2);color:var(--text-muted)} .switch input:disabled{cursor:not-allowed} [data-theme="dark"] .tg-alert-account-card{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface-2));border-color:color-mix(in srgb,var(--primary) 22%,var(--border));box-shadow:0 8px 22px rgba(0,0,0,.2)}[data-theme="dark"] .tg-alert-tile{background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 4%,var(--surface)),var(--surface-2));box-shadow:0 6px 18px rgba(0,0,0,.16)}[data-theme="dark"] .tg-alert-tile.is-on{border-color:color-mix(in srgb,var(--primary) 36%,var(--border))}[data-theme="dark"] .tg-alert-change{background:color-mix(in srgb,var(--primary) 12%,var(--surface-2))} @media(max-width:339px){.tg-alert-account-card{gap:7px;padding:10px}.tg-alert-avatar{width:39px;height:39px;border-radius:13px}.tg-alert-change{font-size:0.646rem;padding:6px 7px}.tg-alert-toggle-list{gap:7px}.tg-alert-tile{padding:9px 8px;min-height:108px}.tg-alert-mini-icon{width:31px;height:31px;flex-basis:31px}.tg-alert-tile-copy .tt{font-size:0.674rem}.tg-alert-tile-copy .ts{font-size:0.642rem}} /* ================= USER GATEWAY API — SETTINGS ================= */ .gateway-api-shell{display:flex;flex-direction:column;gap:15px;padding-bottom:8px}.gateway-api-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:17px 16px;border-radius:20px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface-2));box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.gateway-api-hero:after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;right:-60px;top:-60px;background:var(--primary-soft);opacity:.82;pointer-events:none}.gateway-api-hero>*{position:relative;z-index:1}.gateway-api-hero.is-on{border-color:color-mix(in srgb,var(--primary) 34%,var(--border));box-shadow:0 10px 25px color-mix(in srgb,var(--primary) 9%,transparent)}.gateway-api-hero-icon{width:49px;height:49px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1.08rem;box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 22%,transparent)}.gateway-api-hero-copy{min-width:0;display:flex;flex-direction:column}.gateway-api-hero-copy>span{font-size:0.678rem;color:var(--primary);font-weight:900;text-transform:uppercase;letter-spacing:.07em}.gateway-api-hero-copy>b{font-size:.94rem;line-height:1.25;margin-top:3px}.gateway-api-hero-copy>small{font-size:.69rem;color:var(--text-muted);line-height:1.42;margin-top:3px}.gateway-api-main-switch{width:48px;height:28px}.gateway-api-main-switch .thumb{width:22px;height:22px}.gateway-api-main-switch input:checked~.thumb{transform:translateX(20px)} .gateway-api-section{border:1px solid var(--border);border-radius:19px;background:var(--surface);padding:16px;box-shadow:0 6px 19px rgba(24,27,51,.04);transition:opacity .2s,filter .2s,border-color .2s}.gateway-api-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.gateway-api-section-head>div{display:flex;flex-direction:column;min-width:0}.gateway-api-section-head>div>span{font-size:0.672rem;color:var(--text-muted);font-weight:850;text-transform:uppercase;letter-spacing:.075em}.gateway-api-section-head>div>b{font-size:.9rem;line-height:1.3;margin-top:3px}.gateway-api-pill{font-size:0.664rem;font-weight:900;padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);white-space:nowrap}.gateway-api-pill.ready{background:var(--success-soft);color:var(--success)}.gateway-api-pill.docs{background:var(--primary-soft);color:var(--primary)}.gateway-api-keys.is-disabled{opacity:.42;filter:saturate(.72)}.gateway-api-keys.is-disabled .gateway-copy-btn,.gateway-api-keys.is-disabled .gateway-api-regenerate,.gateway-api-keys.is-disabled .gateway-api-generate{pointer-events:none} .gateway-key-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--surface-2)}.gateway-key-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px 12px;border-top:1px solid var(--border)}.gateway-key-row:first-child{border-top:0}.gateway-key-meta{min-width:0;display:flex;flex-direction:column}.gateway-key-meta>span{font-size:0.674rem;font-weight:800;color:var(--text-muted);margin-bottom:5px}.gateway-key-meta>code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.gateway-key-meta>code.gateway-secret{font-size:.7rem}.gateway-key-meta>code.muted{color:var(--text-muted);font-family:var(--font);font-size:0.684rem}.gateway-copy-btn{width:37px;height:37px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:.76rem;transition:transform .15s}.gateway-copy-btn:active{transform:scale(.93)}.gateway-copy-btn:disabled{opacity:.35;cursor:not-allowed}.gateway-api-generate{margin-top:12px;height:47px;font-size:.76rem}.gateway-api-regenerate{display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:7px 2px;color:var(--primary);font-size:0.682rem;font-weight:850}.gateway-api-regenerate:disabled,.gateway-api-generate:disabled{opacity:.45}.gateway-key-foot{display:flex;align-items:flex-start;gap:8px;margin-top:9px;color:var(--text-muted);font-size:0.672rem;line-height:1.5}.gateway-key-foot i{color:var(--success);margin-top:2px} .gateway-doc-endpoint{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:11px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.gateway-doc-endpoint>span{font-size:0.66rem;font-weight:950;color:var(--success);background:var(--success-soft);padding:5px 7px;border-radius:8px}.gateway-doc-endpoint>code{font-size:0.684rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}.gateway-doc-endpoint>button{width:34px;height:34px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:.7rem}.gateway-doc-note{display:flex;align-items:flex-start;gap:9px;margin-top:11px;padding:12px;border-radius:14px;background:var(--primary-soft);color:var(--primary);font-size:0.68rem;line-height:1.5}.gateway-doc-note i{margin-top:2px}.gateway-doc-note b{font-weight:900}.gateway-doc-title{font-size:.72rem;font-weight:900;margin:16px 2px 9px}.gateway-doc-table{border:1px solid var(--border);border-radius:14px;overflow:hidden}.gateway-doc-table>div{display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1.2fr);align-items:center;gap:9px;padding:11px;border-top:1px solid var(--border);background:var(--surface-2)}.gateway-doc-table>div:first-child{border-top:0}.gateway-doc-table code{font-size:0.68rem;color:var(--primary);font-weight:850}.gateway-doc-table span{font-size:0.652rem;font-weight:900;color:var(--text-muted);text-transform:uppercase}.gateway-doc-table b{font-size:0.672rem;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gateway-param-grid{display:grid;grid-template-columns:1fr;gap:8px}.gateway-param-grid article{min-width:0;padding:12px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(150deg,var(--surface),var(--surface-2))}.gateway-param-grid article>div{display:flex;align-items:center;justify-content:space-between;gap:7px}.gateway-param-grid code{font-size:0.68rem;color:var(--primary);font-weight:900}.gateway-param-grid article>div span{font-size:0.65rem;text-transform:uppercase;color:var(--text-muted);font-weight:900}.gateway-param-grid article>b{display:block;font-size:0.686rem;margin-top:7px}.gateway-param-grid p{margin:4px 0 0;color:var(--text-muted);font-size:0.672rem;line-height:1.45}.gateway-code-box{position:relative;border-radius:14px;background:#10121d;border:1px solid rgba(255,255,255,.08);overflow:hidden}.gateway-code-box-error{background:#171013;border-color:rgba(255,130,130,.17)}.gateway-code-box>button{position:absolute;right:9px;top:9px;z-index:2;display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.1);color:#eef0ff;font-size:0.662rem;font-weight:850;backdrop-filter:blur(8px)}.gateway-code-box pre{margin:0;padding:16px 12px 14px;overflow:auto;color:#e2e5ff;font:500 .61rem/1.62 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;scrollbar-width:thin}.gateway-api-notice{display:flex;align-items:flex-start;gap:9px;padding:12px;border-radius:14px;margin-top:10px;font-size:0.676rem;line-height:1.48}.gateway-api-notice>i{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;flex:none}.gateway-api-notice>div{display:flex;flex-direction:column}.gateway-api-notice b{font-size:0.684rem}.gateway-api-notice span{margin-top:2px}.gateway-api-notice.warning{background:var(--warning-soft);color:var(--warning);margin:0}.gateway-api-notice.warning>i{background:color-mix(in srgb,var(--warning) 12%,transparent)} .gateway-doc-errors{display:grid;grid-template-columns:1fr;gap:8px}.gateway-doc-errors>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:flex-start;padding:11px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}.gateway-doc-errors code{min-width:34px;text-align:center;padding:4px 6px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:0.66rem;font-weight:950}.gateway-doc-errors span{display:flex;flex-direction:column;gap:3px;color:var(--text-muted);font-size:0.668rem;line-height:1.43}.gateway-doc-errors b{color:var(--text);font-size:0.676rem}.gateway-doc-errors b:after{content:': ';color:var(--text-muted)} .gateway-code-tabs{display:flex;align-items:center;gap:7px;margin:0 0 8px;padding:4px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);width:max-content;max-width:100%}.gateway-code-tabs button{min-width:62px;padding:8px 12px;border-radius:9px;color:var(--text-muted);font-size:0.676rem;font-weight:850;transition:background .16s,color .16s,box-shadow .16s}.gateway-code-tabs button.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.gateway-setup-code pre{max-height:390px;overflow:auto!important;padding-top:48px}.gateway-setup-code{max-height:430px}.gateway-setup-code>button{position:absolute;right:9px;top:9px}.gateway-code-box pre{max-height:300px;overflow:auto} [data-theme="dark"] .gateway-code-tabs{background:color-mix(in srgb,var(--surface-2) 95%,var(--primary))}[data-theme="dark"] .gateway-code-tabs button.active{background:color-mix(in srgb,var(--surface) 92%,var(--primary));color:var(--primary)} [data-theme="dark"] .gateway-api-hero{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface-2));border-color:color-mix(in srgb,var(--primary) 25%,var(--border));box-shadow:0 10px 26px rgba(0,0,0,.18)}[data-theme="dark"] .gateway-api-section{background:color-mix(in srgb,var(--surface) 94%,var(--primary));box-shadow:0 8px 22px rgba(0,0,0,.13)}[data-theme="dark"] .gateway-key-list,[data-theme="dark"] .gateway-doc-endpoint,[data-theme="dark"] .gateway-doc-table>div,[data-theme="dark"] .gateway-doc-errors>div{background:color-mix(in srgb,var(--surface-2) 94%,var(--primary))}[data-theme="dark"] .gateway-param-grid article{background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 95%,var(--primary)),var(--surface-2))}[data-theme="dark"] .gateway-code-box{background:#090b13;border-color:#282c43}[data-theme="dark"] .gateway-code-box-error{background:#120b0e;border-color:#402027} @media(max-width:339px){.gateway-api-hero{gap:10px;padding:14px 12px}.gateway-api-hero-icon{width:44px;height:44px;border-radius:14px}.gateway-api-hero-copy>b{font-size:.86rem}.gateway-api-hero-copy>small{font-size:0.676rem}.gateway-api-section{padding:13px}.gateway-key-meta>code{font-size:.7rem}.gateway-key-meta>code.gateway-secret{font-size:0.678rem}.gateway-doc-table>div{grid-template-columns:minmax(0,1fr) auto}.gateway-doc-table b{grid-column:1/-1;text-align:left;white-space:normal;margin-top:-1px}.gateway-code-box pre{font-size:0.664rem}.gateway-api-main-switch{width:44px;height:26px}.gateway-api-main-switch .thumb{width:20px;height:20px}.gateway-api-main-switch input:checked~.thumb{transform:translateX(18px)}} /* ================= IN-APP NOTIFICATION CENTER ================= */ .notification-sheet-content{padding-bottom:4px} .notification-list{display:flex;flex-direction:column;gap:10px} .notification-item{ position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 13px;border:1px solid var(--border);border-radius:18px; background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .18s var(--ease),border-color .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease); } .notification-item:active{transform:scale(.985)} .notification-item.expanded{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:0 12px 28px -22px color-mix(in srgb,var(--primary) 55%,transparent)} .notification-item.was-unread{border-color:color-mix(in srgb,var(--primary) 34%,var(--border));background:linear-gradient(135deg,var(--surface),var(--primary-soft))} .notification-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;font-size:1rem;background:var(--primary-soft);color:var(--primary)} .notification-icon.success{background:var(--success-soft);color:var(--success)} .notification-icon.warning{background:var(--warning-soft);color:var(--warning)} .notification-icon.info{background:var(--info-soft);color:var(--info)} .notification-main{min-width:0;flex:1} .notification-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px} .notification-category{font-size:0.678rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--primary)} .notification-meta-end{display:flex;align-items:center;gap:8px;min-width:0} .notification-time{font-size:0.682rem;font-weight:650;color:var(--text-muted);white-space:nowrap} .notification-expand-arrow{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:0.674rem;transition:transform .3s var(--ease),background .22s,color .22s,border-color .22s} .notification-item.expanded .notification-expand-arrow{transform:rotate(180deg);background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 22%,var(--border));color:var(--primary)} .notification-title{font-size:.91rem;font-weight:800;line-height:1.3;color:var(--text);padding-right:5px} .notification-message{ margin-top:5px;color:var(--text-muted);font-size:.76rem;line-height:1.52;white-space:pre-line;overflow:hidden;overflow-wrap:anywhere; max-height:3.5em;transition:max-height .34s var(--ease),color .24s var(--ease); } .notification-item.expanded .notification-message{max-height:720px;color:var(--text)} .notification-expand-content{max-height:0;opacity:0;overflow:hidden;transform:translateY(-4px);transition:max-height .34s var(--ease),opacity .22s ease,transform .3s var(--ease)} .notification-item.expanded .notification-expand-content{max-height:420px;opacity:1;transform:translateY(0)} .notification-new-dot{display:inline-block;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)} .notification-proof{width:100%;display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);color:var(--text);font-size:.72rem;font-weight:750;text-align:left} .notification-proof img{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--border)} .notification-proof span{display:flex;align-items:center;gap:6px} .notification-action{margin-top:10px;min-height:38px;padding:9px 12px;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:8px} .notification-action:active{transform:scale(.985)} .notification-attachment-viewer{display:flex;align-items:center;justify-content:center;width:min(78vw,330px);height:min(46dvh,390px);max-height:390px;margin:2px auto 0;padding:7px;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface-2)} .notification-attachment-viewer img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px;background:var(--surface)} .alert-card:has(.notification-attachment-viewer){max-height:calc(100dvh - 28px);overflow:hidden;display:flex;flex-direction:column;padding:22px 18px 18px} .alert-card:has(.notification-attachment-viewer)>.a-ic{width:48px;height:48px;flex:none;margin-bottom:9px;font-size:1.25rem} .alert-card:has(.notification-attachment-viewer)>h3{flex:none;margin-bottom:8px} .alert-card:has(.notification-attachment-viewer)>p{min-height:0;margin:0;overflow:hidden;display:flex;justify-content:center} .alert-card:has(.notification-attachment-viewer) .a-actions{flex:none;margin-top:13px} [data-theme="dark"] .notification-attachment-viewer{background:color-mix(in srgb,var(--surface-2) 94%,var(--primary));border-color:color-mix(in srgb,var(--border) 88%,var(--primary))} .notification-empty{text-align:center;padding:28px 12px 18px} .notification-empty-icon{width:70px;height:70px;border-radius:24px;margin:0 auto 14px;display:grid;place-items:center;background:var(--grad-soft);color:var(--primary);font-size:1.6rem;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border))} .notification-empty h3{font-size:1rem;font-weight:800;margin-bottom:6px} .notification-empty p{max-width:310px;margin:0 auto;color:var(--text-muted);font-size:.76rem;line-height:1.55} [data-theme="dark"] .notification-item.was-unread{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary-soft) 70%,var(--surface)))} [data-theme="dark"] .notification-expand-arrow{background:color-mix(in srgb,var(--surface-2) 92%,var(--primary));border-color:color-mix(in srgb,var(--border) 88%,var(--primary))} /* Transaction detail hero amount */ .tx-detail-amount{font-weight:850!important} .tx-detail-amount.credit{color:var(--success)!important}.tx-detail-amount.debit{color:var(--danger)!important} /* ===== Phase 33 — policies + unread notification dark mode ===== */ .auth-policy-copy{max-width:390px;margin:12px auto 0;padding:0 12px;text-align:center;color:var(--text-muted);font-size:.69rem;line-height:1.55} .auth-policy-copy button{display:inline;border:0;background:none;padding:0;color:var(--primary);font:inherit;font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} .legal-policy-sheet{display:flex;flex-direction:column;gap:14px;padding:2px 0 10px} .legal-policy-intro{padding:4px 2px 12px;border-bottom:1px solid var(--border)} .legal-policy-intro>span{display:inline-block;margin-bottom:7px;color:var(--primary);font-size:0.686rem;letter-spacing:.105em;font-weight:900} .legal-policy-intro p{margin:0;color:var(--text-muted);font-size:.82rem;line-height:1.72} .legal-policy-sections{display:flex;flex-direction:column;gap:0;background:transparent;border:0} .legal-policy-sections section{padding:15px 2px;border-bottom:1px solid var(--border)} .legal-policy-sections section:first-child{padding-top:4px}.legal-policy-sections section:last-child{border-bottom:0;padding-bottom:4px} .legal-policy-sections h4{margin:0 0 6px;font-size:.86rem;line-height:1.35;font-weight:850;color:var(--text)} .legal-policy-sections p{margin:0;color:var(--text-muted);font-size:.78rem;line-height:1.72} .legal-refund-link{width:100%;min-height:62px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--primary) 5%,var(--surface));color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left} .legal-refund-link>span{display:flex;flex-direction:column;min-width:0}.legal-refund-link b{font-size:.82rem}.legal-refund-link small{font-size:.72rem;color:var(--text-muted);margin-top:3px;line-height:1.4}.legal-refund-link>i{color:var(--primary);font-size:0.686rem} .legal-policy-note{text-align:center;margin:1px 0 0;color:var(--text-muted);font-size:0.686rem} [data-theme="dark"] .notification-item.was-unread{background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 88%,var(--primary) 12%),color-mix(in srgb,var(--surface-2) 92%,var(--primary) 8%));border-color:color-mix(in srgb,var(--primary) 42%,var(--border));box-shadow:0 12px 30px -28px color-mix(in srgb,var(--primary) 70%,transparent)} [data-theme="dark"] .notification-item.was-unread .notification-title{color:var(--text)} [data-theme="dark"] .notification-item.was-unread .notification-message{color:color-mix(in srgb,var(--text) 78%,var(--text-muted))} [data-theme="dark"] .notification-item.was-unread .notification-category{color:color-mix(in srgb,var(--primary) 72%,#fff)} /* Manager review quick rejection reasons */ .a-prompt-quick{margin-top:14px;text-align:left}.a-prompt-quick>span{display:block;margin-bottom:7px;font-size:.72rem;font-weight:800;color:var(--text-muted)}.a-prompt-reason-pills{display:flex;flex-wrap:wrap;gap:7px}.a-prompt-reason-pill{appearance:none;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--text);border-radius:999px;padding:7px 10px;font:inherit;font-size:.69rem;font-weight:750;line-height:1.15;cursor:pointer;transition:.18s ease;max-width:100%;white-space:normal;text-align:left}.a-prompt-reason-pill:hover,.a-prompt-reason-pill.active{border-color:color-mix(in srgb,var(--primary) 58%,var(--border));background:color-mix(in srgb,var(--primary) 15%,var(--surface));transform:translateY(-1px)} /* Phase 24 — optional per-user Gateway API IP Whitelisting */ .gateway-api-ip{position:relative}.gateway-ip-head{align-items:center}.gateway-ip-head>div>small{margin-top:4px;color:var(--text-muted);font-size:0.672rem;line-height:1.45;font-weight:600;text-transform:none;letter-spacing:0}.gateway-ip-switch{width:48px;height:28px;flex:none}.gateway-ip-switch .thumb{width:22px;height:22px}.gateway-ip-switch input:checked~.thumb{transform:translateX(20px)} .gateway-ip-body{transition:opacity .22s var(--ease),filter .22s var(--ease)}.gateway-api-ip.is-disabled .gateway-ip-body{opacity:.38;filter:saturate(.72)}.gateway-api-ip.is-disabled .gateway-ip-body input,.gateway-api-ip.is-disabled .gateway-ip-body button{pointer-events:none} .gateway-ip-note{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-radius:14px;background:color-mix(in srgb,var(--primary) 7%,var(--surface-2));color:var(--text-muted);font-size:0.674rem;line-height:1.5}.gateway-ip-note i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;flex:none;background:var(--primary-soft);color:var(--primary)}.gateway-ip-note.warning{background:var(--warning-soft);color:var(--warning)}.gateway-ip-note.warning i{background:color-mix(in srgb,var(--warning) 13%,transparent);color:var(--warning)} .gateway-ip-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:11px}.gateway-ip-add .input{height:43px;border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.684rem}.gateway-ip-add>button{min-width:88px;height:43px;padding:0 13px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--primary);color:#fff;font-size:0.682rem;font-weight:850;box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 18%,transparent)}.gateway-ip-add>button:disabled{opacity:.42;box-shadow:none} .gateway-ip-count{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 2px 7px}.gateway-ip-count span{font-size:0.672rem;font-weight:850;color:var(--text-muted)}.gateway-ip-count b{font-size:0.668rem;padding:4px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-muted)} .gateway-ip-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface-2)}.gateway-ip-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:8px 9px 8px 11px;border-top:1px solid var(--border)}.gateway-ip-row:first-child{border-top:0}.gateway-ip-row>span{display:flex;align-items:center;gap:8px;min-width:0}.gateway-ip-row>span i{color:var(--primary);font-size:.72rem}.gateway-ip-row code{font-size:0.682rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gateway-ip-row>button{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--danger) 9%,var(--surface));color:var(--danger);font-size:0.686rem}.gateway-ip-row>button:disabled{opacity:.38}.gateway-ip-empty{min-height:58px;padding:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:0.674rem}.gateway-ip-empty i{color:var(--primary)} [data-theme="dark"] .gateway-ip-list{background:color-mix(in srgb,var(--surface-2) 94%,var(--primary))} @media(max-width:339px){.gateway-ip-add{grid-template-columns:1fr}.gateway-ip-add>button{width:100%}.gateway-ip-switch{width:44px;height:26px}.gateway-ip-switch .thumb{width:20px;height:20px}.gateway-ip-switch input:checked~.thumb{transform:translateX(18px)}} /* v2026.09.07.2 — grouped Tools sheet. */ .tools-sheet-group{display:grid;gap:4px}.tools-sheet-group-creators{margin-top:18px;padding-top:14px;border-top:1px dashed var(--border)}.tools-sheet-label{display:flex;flex-direction:column;gap:2px;margin:0 5px 7px}.tools-sheet-label span{font-size:.78rem;font-weight:900;letter-spacing:.04em;color:var(--text)}.tools-sheet-label small{font-size:0.686rem;line-height:1.35;color:var(--text-muted)} /* v2026.09.07.13 — universal policy-to-support handoff. */ .legal-support-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 12px;align-items:center;padding:14px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:0 12px 28px -28px var(--primary)} .legal-support-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1rem} .legal-support-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.legal-support-copy b{font-size:.79rem;font-weight:900;line-height:1.3}.legal-support-copy small{color:var(--text-muted);font-size:0.686rem;line-height:1.5;font-weight:600} .legal-support-card>button{grid-column:1/-1;min-height:45px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));border-radius:13px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;font-family:inherit;font-size:.7rem;font-weight:900;box-shadow:0 12px 22px -18px var(--primary);transition:transform .15s var(--ease),filter .2s}.legal-support-card>button:active{transform:scale(.985)}.legal-support-card>button i{font-size:0.666rem} [data-theme="dark"] .legal-support-card{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 11%,var(--surface)),var(--surface-2))} /* FINZO website APK download feedback. The actual download starts immediately; this short blocking card simply makes the browser handoff visible. */ .finzo-download-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:24px;background:rgba(8,10,20,.42);backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease} .finzo-download-overlay.show{opacity:1;visibility:visible;pointer-events:auto} .finzo-download-card{width:min(86vw,310px);padding:24px 22px 22px;border-radius:24px;background:var(--surface);border:1px solid var(--border);box-shadow:0 26px 70px -28px rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text)} .finzo-download-brand{position:relative;width:74px;height:74px;margin-bottom:15px;display:grid;place-items:center} .finzo-download-brand img{width:58px;height:58px;border-radius:17px;object-fit:cover;background:#fff;box-shadow:0 14px 28px -20px rgba(0,0,0,.6)} .finzo-download-spin{position:absolute;inset:0;border-radius:50%;border:3px solid color-mix(in srgb,var(--primary) 17%,transparent);border-top-color:var(--primary);animation:spin .82s linear infinite} .finzo-download-card b{font-size:.88rem;font-weight:900;letter-spacing:-.015em} .finzo-download-card small{margin-top:6px;font-size:0.668rem;line-height:1.55;color:var(--text-muted);font-weight:650} /* v2026.09.10.31 — Theme-aware offline connection screen */ .network-offline-screen{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),visibility .22s var(--ease)} .network-offline-screen.show{opacity:1;visibility:visible;pointer-events:auto} .network-offline-card{width:min(100%,360px);padding:28px 24px 24px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:26px;background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 96%,var(--primary) 4%),var(--surface));box-shadow:var(--shadow-lg);text-align:center} .network-offline-icon{position:relative;width:74px;height:74px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.7rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 18%,transparent)} .network-offline-icon>.fa-slash{position:absolute;font-size:1.85rem} .network-offline-card h2{font-size:1.08rem;font-weight:850;letter-spacing:-.01em;color:var(--text)} .network-offline-card p{max-width:290px;margin:8px auto 0;color:var(--text-muted);font-size:.82rem;line-height:1.6} .network-offline-wait{margin:18px auto 0;display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)} .network-offline-wait span{width:8px;height:8px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 0 color-mix(in srgb,var(--warning) 35%,transparent);animation:finzoOfflinePulse 1.4s ease-out infinite} .network-offline-wait em{font-style:normal;font-size:0.686rem;font-weight:750} @keyframes finzoOfflinePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warning) 34%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} [data-theme="dark"] .network-offline-screen{background:color-mix(in srgb,var(--bg) 92%,transparent)} @media(max-width:339px){.network-offline-card{padding:24px 18px 21px;border-radius:22px}.network-offline-icon{width:66px;height:66px;border-radius:21px}.network-offline-card p{font-size:.78rem}} /* ================= SMALL-PHONE REFLOW ================= */ @media(max-width:339px){ .card-flat{padding:14px} .btn{padding-top:13px;padding-bottom:13px;border-radius:14px;font-size:.92rem} .btn-sm{padding:9px 11px;font-size:.8rem} .field{margin-bottom:13px} .field label{margin-bottom:7px} .input,.textarea{border-radius:13px} .toggle-row{gap:10px} .switch{width:46px;height:28px} .switch .thumb{width:22px;height:22px} .switch input:checked~.thumb{transform:translateX(18px)} .sheet{border-radius:24px 24px 0 0} .sheet .sheet-head h3{font-size:1.08rem;min-width:0} .sheet .sheet-close{flex:0 0 34px} .alert-card{border-radius:22px;padding:23px 17px 18px} .alert-card .a-ic{width:62px;height:62px;margin-bottom:13px;font-size:1.7rem} .alert-card h3{font-size:1.08rem} .alert-card p{font-size:.86rem;overflow-wrap:anywhere} .alert-card .a-actions{gap:8px;margin-top:18px} .toast-wrap{width:calc(100vw - 14px)} .toast{padding:12px 12px 14px;gap:9px;border-radius:15px} .toast .t-ic{width:34px;height:34px;border-radius:11px} .pin-dots{gap:12px} .keypad{width:100%;max-width:268px;gap:9px} .key{height:56px;border-radius:16px} .tg-alert-toggle-list{grid-template-columns:1fr} .gateway-api-hero{grid-template-columns:auto minmax(0,1fr);gap:9px} .gateway-api-main-switch{grid-column:2;justify-self:start;margin-top:2px} } /* Long labels/values may wrap rather than force the whole card wider. */ .card b,.card strong,.sheet b,.sheet strong,.sheet p,.sheet small{overflow-wrap:anywhere} /* ================= 384 REFERENCE COMPONENT TUNING ================= */ @media(max-width:339px){ .btn{padding-left:clamp(13px,4.17vw,16px);padding-right:clamp(13px,4.17vw,16px);border-radius:15px} .field{margin-bottom:14px} .alert-backdrop{padding:12px} .alert-card{max-width:calc(100vw - 24px);padding:clamp(22px,6.5vw,25px) clamp(17px,5.2vw,20px) 20px;border-radius:24px} .alert-card .a-ic{width:64px;height:64px;font-size:1.8rem;margin-bottom:14px} .alert-card .a-actions{gap:8px;margin-top:18px} .toast-wrap{width:calc(100vw - 20px)} .toast{padding:12px 13px 14px;gap:10px;border-radius:16px} .pin-dots{gap:clamp(11px,3.65vw,14px)} .keypad{gap:10px;max-width:264px} .key{height:56px;border-radius:16px} } @media(max-width:339px){ .alert-card .a-actions{flex-direction:column-reverse} .alert-card .a-actions .btn{width:100%} } /* Cash-out profile-name gate */ .profile-name-gate-backdrop{position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:20px;background:rgba(10,12,20,.48);backdrop-filter:blur(5px)} .profile-name-gate{position:relative;width:min(100%,350px);padding:22px 18px 18px;border:1px solid var(--border);border-radius:20px;background:var(--surface,#fff);color:var(--text,#141625);box-shadow:var(--shadow-lg);text-align:center} .profile-name-gate-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:var(--surface-2);color:var(--text-muted,#6b7192);cursor:pointer} .profile-name-gate-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:var(--primary-soft);color:var(--primary);font-size:20px} .profile-name-gate h3{margin:0 0 6px;font-size:18px}.profile-name-gate>p{margin:0 6px 16px;color:var(--text-muted,#6b7192);font-size:13px;line-height:1.5} .profile-name-gate .field{text-align:left;margin-bottom:8px}.profile-name-gate-error{min-height:18px;margin:2px 0 8px;color:var(--danger);font-size:12px;text-align:left} /* Login approval overlay */ .login-2fa-backdrop{position:fixed;inset:0;z-index:10090;display:grid;place-items:center;padding:20px;background:rgba(10,12,20,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color-scheme:light dark} [data-theme="light"] .login-2fa-backdrop{background:rgba(20,24,40,.42)} [data-theme="dark"] .login-2fa-backdrop{background:rgba(0,0,0,.68)} .login-2fa-card{width:min(100%,350px);padding:24px 20px 20px;border:1px solid var(--border);border-radius:20px;background:var(--surface,#fff);color:var(--text,#141625);box-shadow:0 24px 64px -22px rgba(0,0,0,.45);text-align:center;opacity:1;isolation:isolate} [data-theme="dark"] .login-2fa-card{background:#171a2b;border-color:#2a2e49;box-shadow:0 28px 72px -24px rgba(0,0,0,.82)} .login-2fa-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 13px;border-radius:18px;background:rgba(37,170,225,.13);color:#229ED9;font-size:26px} .login-2fa-card.danger .login-2fa-icon{background:var(--danger-soft);color:var(--danger)}.login-2fa-card.warning .login-2fa-icon{background:var(--warning-soft);color:var(--warning)} .login-2fa-card h3{margin:0 0 7px;font-size:19px}.login-2fa-card>p{margin:0 0 15px;color:var(--text-muted,#6b7192);font-size:13px;line-height:1.55} .login-2fa-wait{display:flex;align-items:center;justify-content:center;gap:9px;margin:13px 0;padding:11px 12px;border-radius:13px;background:var(--surface-2);font-weight:700;font-size:13px} .login-2fa-card>small{display:block;margin:0 2px;color:var(--text-muted,#6b7192);font-size:11.5px;line-height:1.5}.login-2fa-card .btn{margin-top:15px} /* ================= v2026.09.13.47 · COMPONENT READABILITY ================= */ .a-prompt-field>small{font-size:.7rem} .tg-alert-account-main small,.tg-alert-account-main span,.tg-alert-change,.tg-alert-waiting span,.tg-alert-waiting a,.tg-alert-pref-head p,.tg-alert-tile-copy .ts,.tg-alert-tile-state{font-size:.7rem} .tg-alert-tile-copy .tt,.tg-alert-connect-card p,.tg-alert-waiting b{font-size:.74rem} .gateway-api-hero-copy>span,.gateway-api-section-head>div>span,.gateway-api-pill,.gateway-key-meta>span,.gateway-key-foot,.gateway-doc-endpoint>span,.gateway-doc-note,.gateway-doc-table code,.gateway-doc-table span,.gateway-doc-table b,.gateway-param-grid code,.gateway-param-grid article>div span,.gateway-param-grid p,.gateway-code-box>button,.gateway-api-notice,.gateway-doc-errors code,.gateway-doc-errors span,.gateway-doc-errors b,.gateway-code-tabs button,.gateway-api-hero-copy>small,.gateway-ip-head>div>small,.gateway-ip-note,.gateway-ip-count span,.gateway-ip-count b,.gateway-ip-empty,.notification-category,.finzo-download-card small{font-size:.7rem} .gateway-code-box pre{font-size:0.682rem} /* v2026.09.13.51 — clean profile-name gate */ .profile-name-gate-input-wrap{display:grid;gap:7px;text-align:left;margin-top:2px} .profile-name-gate-input-wrap .input{height:50px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border);font-size:14px;padding:0 14px} .profile-name-gate-input-wrap .input:focus{border-color:color-mix(in srgb,var(--primary) 62%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);background:var(--surface)} .profile-name-gate-input-wrap small{font-size:11.5px;line-height:1.45;color:var(--text-muted);padding:0 2px} .profile-name-gate #profile-name-gate-save{margin-top:2px} /* Scheduled maintenance notice: separate from the hard maintenance-mode gate. */ .scheduled-maintenance-banner{position:relative;z-index:12;margin:8px var(--page-pad,16px) 0;padding:11px 12px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%);display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;box-shadow:0 7px 22px rgba(15,23,42,.06)} .scheduled-maintenance-banner.active{border-color:color-mix(in srgb,#f59e0b 42%,var(--border));background:color-mix(in srgb,var(--surface) 92%,#f59e0b 8%)} .scheduled-maintenance-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)} .scheduled-maintenance-banner.active .scheduled-maintenance-icon{background:color-mix(in srgb,#f59e0b 14%,transparent);color:#d97706} .scheduled-maintenance-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.scheduled-maintenance-copy b{font-size:13px}.scheduled-maintenance-copy span{font-size:12px;line-height:1.45;color:var(--text)}.scheduled-maintenance-copy small{font-size:11px;color:var(--text-muted)} .scheduled-maintenance-countdown{font-size:11px;font-weight:800;white-space:nowrap;padding:6px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-muted)} .session-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 10px}.session-sheet-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}.session-sheet-head b{font-size:14px}.session-sheet-head small{font-size:12px;color:var(--text-muted);line-height:1.4} @media(max-width:339px){.scheduled-maintenance-banner{grid-template-columns:32px minmax(0,1fr)}.scheduled-maintenance-countdown{grid-column:2;justify-self:start}.session-sheet-head{align-items:flex-start;flex-direction:column}} .sla-timer{display:inline-flex;align-items:center;gap:5px;width:max-content;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid color-mix(in srgb,#22c55e 28%,var(--border));background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#15803d}.sla-timer.warning{border-color:color-mix(in srgb,#f59e0b 34%,var(--border));background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#b45309}.sla-timer.breached{border-color:color-mix(in srgb,#ef4444 36%,var(--border));background:color-mix(in srgb,#ef4444 10%,var(--surface));color:#dc2626} .sla-timer{display:inline-flex;align-items:center;gap:5px;width:max-content;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid color-mix(in srgb,#22c55e 28%,var(--border));background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#15803d}.sla-timer.warning{border-color:color-mix(in srgb,#f59e0b 34%,var(--border));background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#b45309}.sla-timer.breached{border-color:color-mix(in srgb,#ef4444 36%,var(--border));background:color-mix(in srgb,#ef4444 10%,var(--surface));color:#dc2626} /* Optional company details inside Terms / Privacy / Refund sheets. */ .legal-company-card{ padding:14px; border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border)); border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 5%,var(--surface-2)),var(--surface)); box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.5); } .legal-company-title{display:flex;align-items:center;gap:10px;min-width:0} .legal-company-title>i{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);box-shadow:var(--finzo-icon-depth-soft,0 7px 15px -12px var(--primary))} .legal-company-title>span{min-width:0;display:flex;flex-direction:column;gap:2px} .legal-company-title small{font-size:0.654rem;font-weight:850;letter-spacing:.07em;color:var(--text-muted)} .legal-company-title b{font-size:.78rem;color:var(--text);line-height:1.35} .legal-company-card>p{margin:10px 0 0;color:var(--text-muted);font-size:.72rem;line-height:1.6} .legal-company-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px} .legal-company-meta>span{min-width:0;padding:9px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px} .legal-company-meta small{font-size:0.646rem;color:var(--text-muted);font-weight:850;letter-spacing:.055em} .legal-company-meta b{font-size:0.678rem;color:var(--text);line-height:1.4;overflow-wrap:anywhere} [data-theme="dark"] .legal-company-card{box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.045)} @media(max-width:339px){.legal-company-meta{grid-template-columns:1fr}} /* Gateway API utility endpoints */ .gateway-api-shell,.gateway-api-docs,.gateway-extra-grid,.gateway-extra-api{min-width:0;max-width:100%} .gateway-api-docs{overflow:hidden} .gateway-extra-title{margin-top:20px} .gateway-extra-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} .gateway-extra-api{overflow:hidden;border:1px solid var(--border);border-radius:16px;padding:13px;background:linear-gradient(150deg,var(--surface),var(--surface-2))} .gateway-extra-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0} .gateway-extra-head>span{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary);flex:none} .gateway-extra-head>div{min-width:0;display:flex;flex-direction:column} .gateway-extra-head b{font-size:.78rem;overflow-wrap:anywhere} .gateway-extra-head small{font-size:.7rem;color:var(--text-muted);line-height:1.4;margin-top:2px;overflow-wrap:anywhere} .gateway-extra-api .gateway-doc-endpoint{min-width:0;width:100%;max-width:100%;padding:9px} .gateway-extra-api .gateway-doc-endpoint>code{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gateway-extra-api .gateway-code-tabs{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin} .gateway-extra-api .gateway-code-tabs button{flex:1 0 auto;min-width:68px} .gateway-extra-api .gateway-code-box{min-width:0;max-width:100%;width:100%} .gateway-extra-api .gateway-code-box pre{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:auto;white-space:pre;overscroll-behavior-inline:contain} .gateway-utility-code pre{max-height:330px;padding-top:48px} .gateway-utility-response pre{max-height:250px} .gateway-utility-subtitle{margin-top:13px} .gateway-extra-api>p{max-width:100%;margin:10px 1px 0;color:var(--text-muted);font-size:.7rem;line-height:1.5;overflow-wrap:anywhere} .gateway-extra-api>p code{color:var(--primary);font-weight:800;overflow-wrap:anywhere} [data-theme="dark"] .gateway-extra-api{background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 95%,var(--primary)),var(--surface-2))} @media(max-width:339px){ .gateway-extra-api{padding:11px} .gateway-extra-api .gateway-code-tabs button{min-width:62px;padding-inline:10px} } /* v161 — Gateway API dedicated Settings page */ .gateway-api-page{padding-bottom:8px}.gateway-api-page-heading{padding-bottom:14px}.gateway-api-page-host{min-width:0;width:100%}.gateway-api-page-host>.gateway-api-shell{width:100%}.gateway-api-page-loading{min-height:150px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--text-muted);font-size:.76rem;font-weight:700}.gateway-api-page-protected,.gateway-api-page-error{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.gateway-api-page-protected>i,.gateway-api-page-error>i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1rem}.gateway-api-page-protected>i{background:var(--primary-soft);color:var(--primary)}.gateway-api-page-error>i{background:var(--danger-soft);color:var(--danger)}.gateway-api-page-protected>div,.gateway-api-page-error>div{min-width:0;display:flex;flex-direction:column}.gateway-api-page-protected b,.gateway-api-page-error b{font-size:.84rem}.gateway-api-page-protected span,.gateway-api-page-error span{margin-top:3px;color:var(--text-muted);font-size:.69rem;line-height:1.45}.gateway-api-page-protected>.btn,.gateway-api-page-error>.btn{grid-column:1/-1;width:100%;margin-top:2px} /* v162 — Gateway Google Play Redeem Code API accordion */ .gateway-gp-api{padding:0;overflow:hidden}.gateway-gp-toggle{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 16px;text-align:left;background:transparent;color:var(--text)}.gateway-gp-toggle-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.95rem}.gateway-gp-toggle-copy{min-width:0;display:flex;flex-direction:column}.gateway-gp-toggle-copy small{font-size:0.674rem;color:var(--text-muted);font-weight:850;text-transform:uppercase;letter-spacing:.055em}.gateway-gp-toggle-copy b{font-size:.9rem;line-height:1.35;margin-top:2px}.gateway-gp-toggle-copy em{font-style:normal;color:var(--text-muted);font-size:.7rem;line-height:1.45;margin-top:2px}.gateway-gp-chevron{color:var(--text-muted);transition:transform .2s ease,color .2s ease}.gateway-gp-api.open .gateway-gp-chevron{transform:rotate(180deg);color:var(--primary)}.gateway-gp-body{display:grid;grid-template-rows:0fr;opacity:0;border-top:0 solid var(--border);min-width:0;max-width:100%;transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1),opacity .22s ease,border-top-width .24s ease}.gateway-gp-body-inner{min-height:0;overflow:hidden;padding:0 16px;transform:translateY(-6px);transition:padding .34s cubic-bezier(.22,1,.36,1),transform .28s ease}.gateway-gp-api.open .gateway-gp-body{grid-template-rows:1fr;opacity:1;border-top-width:1px}.gateway-gp-api.open .gateway-gp-body-inner{padding:2px 16px 16px;transform:none}.gateway-gp-body .gateway-doc-endpoint,.gateway-gp-body .gateway-code-box,.gateway-gp-body .gateway-doc-errors,.gateway-gp-body .gateway-param-grid{min-width:0;max-width:100%}.gateway-gp-body .gateway-code-box pre{width:100%;max-width:100%;box-sizing:border-box;overflow:auto;white-space:pre}.gateway-gp-tabs{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.gateway-gp-tabs button{flex:1 0 auto}.gateway-gp-code pre{max-height:380px;padding-top:48px}.gateway-gp-commission{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;margin:14px 0 4px;padding:13px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:15px;background:linear-gradient(145deg,var(--primary-soft),var(--surface))}.gateway-gp-commission>i{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.gateway-gp-commission>div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 9px;align-items:center}.gateway-gp-commission span{font-size:.7rem;color:var(--text-muted);font-weight:800}.gateway-gp-commission b{font-size:.92rem;color:var(--primary)}.gateway-gp-commission small{grid-column:1/-1;font-size:0.686rem;color:var(--text-muted);line-height:1.45;margin-top:3px}.gateway-gp-help{margin:10px 2px;color:var(--text-muted);font-size:.7rem;line-height:1.5}.gateway-gp-help code{color:var(--primary);font-weight:850}[data-theme="dark"] .gateway-gp-commission{background:linear-gradient(145deg,color-mix(in srgb,var(--primary-soft) 78%,var(--surface)),var(--surface-2))}@media(max-width:339px){.gateway-gp-toggle{gap:9px;padding:13px}.gateway-gp-toggle-icon{width:38px;height:38px}.gateway-gp-body-inner{padding-inline:12px}.gateway-gp-toggle-copy em{font-size:0.682rem}}@media(prefers-reduced-motion:reduce){.gateway-gp-body,.gateway-gp-body-inner,.gateway-gp-chevron{transition:none!important}} /* Gateway Mobile Recharge product API reuses the secure expandable product-card system. */ .gateway-mr-api .gateway-gp-toggle-icon{background:color-mix(in srgb,var(--primary-soft) 82%,var(--surface));color:var(--primary)} .gateway-mr-operators article p code{font-size:0.686rem;color:var(--primary);font-weight:850} .gateway-mr-api .gateway-doc-note+ .gateway-doc-note{margin-top:8px} /* v208 — Gateway API index cards + dedicated documentation pages */ .gateway-api-page-back{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-size:.78rem;transition:transform .15s ease,background .15s ease,color .15s ease} .gateway-api-page-back[hidden]{display:none!important}.gateway-api-page-back:active{transform:scale(.94)}.gateway-api-page-heading-copy{min-width:0} .gateway-api-nav-list{display:flex;flex-direction:column;gap:10px;min-width:0}.gateway-api-nav-card{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);text-align:left;box-shadow:0 6px 19px rgba(24,27,51,.04);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.gateway-api-nav-card:active{transform:scale(.985)}.gateway-api-nav-card:hover{border-color:color-mix(in srgb,var(--primary) 26%,var(--border));box-shadow:0 9px 24px color-mix(in srgb,var(--primary) 7%,transparent)} .gateway-api-nav-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1rem}.gateway-api-nav-icon.recharge{background:color-mix(in srgb,#22c55e 12%,var(--surface));color:#16a34a}.gateway-api-nav-icon.google{background:color-mix(in srgb,#4285f4 12%,var(--surface));color:#4285f4}.gateway-api-nav-copy{min-width:0;display:flex;flex-direction:column}.gateway-api-nav-copy small{font-size:0.668rem;color:var(--text-muted);font-weight:850;text-transform:uppercase;letter-spacing:.06em}.gateway-api-nav-copy b{font-size:.86rem;line-height:1.32;margin-top:2px}.gateway-api-nav-copy em{font-style:normal;color:var(--text-muted);font-size:0.686rem;line-height:1.42;margin-top:3px}.gateway-api-nav-arrow{color:var(--text-muted);font-size:.78rem}.gateway-api-main-balance{min-width:0}.gateway-api-main-balance>.gateway-extra-api{box-shadow:0 6px 19px rgba(24,27,51,.04)} .gateway-api-detail-shell .gateway-gp-api.open .gateway-gp-body{border-top-width:1px}.gateway-api-detail-shell .gateway-gp-toggle{cursor:default;pointer-events:none}.gateway-api-detail-shell .gateway-gp-chevron{display:none}.gateway-api-detail-shell .gateway-gp-toggle-copy em{max-width:520px} [data-theme="dark"] .gateway-api-nav-card{background:color-mix(in srgb,var(--surface) 94%,var(--primary));box-shadow:0 8px 22px rgba(0,0,0,.13)} @media(max-width:359px){.gateway-api-page-back{width:34px;height:34px;flex-basis:34px}.gateway-api-nav-card{gap:9px;padding:13px 12px}.gateway-api-nav-icon{width:40px;height:40px}.gateway-api-nav-copy em{font-size:0.678rem}} /* Gateway API callback URL settings */ .gateway-callback-card{overflow:hidden}.gateway-callback-card .gateway-api-section-head{align-items:flex-start}.gateway-callback-form{padding:0 16px 14px}.gateway-callback-form>label{display:block;margin-bottom:7px;font-size:.69rem;font-weight:850;color:var(--text)}.gateway-callback-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.gateway-callback-input-row .input{min-width:0;height:43px;font-size:.76rem}.gateway-callback-input-row>button{height:43px;padding:0 14px;border-radius:13px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:.72rem;font-weight:850;box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 20%,transparent)}.gateway-callback-input-row>button:disabled{opacity:.66}.gateway-callback-form>small{display:block;margin-top:8px;color:var(--text-muted);font-size:0.684rem;line-height:1.5}.gateway-callback-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;margin:0 16px 16px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--primary-soft) 55%,var(--surface));color:var(--text-muted);font-size:0.682rem;line-height:1.5}.gateway-callback-note>i{color:var(--primary);margin-top:2px}.gateway-callback-note code{font-size:0.678rem;color:var(--primary);font-weight:800}.gateway-callback-state.ready{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success);border-color:color-mix(in srgb,var(--success) 26%,var(--border))}@media(max-width:359px){.gateway-callback-input-row{grid-template-columns:1fr}.gateway-callback-input-row>button{width:100%}} /* v212 — Accept Payment via UPI Gateway product */ .gateway-api-nav-icon.accept{background:color-mix(in srgb,#8b5cf6 12%,var(--surface));color:#7c3aed} .gateway-upi-payment-docs .gateway-param-grid{grid-template-columns:1fr} .gateway-upi-flow-note{margin-top:0} .gateway-upi-flow-strip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:7px;margin:12px 16px 4px;padding:11px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)} .gateway-upi-flow-strip>span{min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--text-muted);font-size:0.678rem;font-weight:750;text-align:center}.gateway-upi-flow-strip>span>i{color:var(--primary)}.gateway-upi-flow-strip>span>b{width:17px;height:17px;flex:0 0 17px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.66rem}.gateway-upi-flow-strip>i{color:var(--text-muted);font-size:0.66rem}.gateway-upi-tabs{width:100%;overflow-x:auto} @media(max-width:520px){.gateway-upi-flow-strip{grid-template-columns:1fr 1fr;gap:8px}.gateway-upi-flow-strip>i{display:none}.gateway-upi-flow-strip>span{justify-content:flex-start;padding:7px 8px;border-radius:9px;background:var(--surface)}} /* Gateway API — compact entry to the independent live tester. */ .gateway-live-test-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 18px;padding:13px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 56%,var(--surface)),var(--surface));color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .15s,border-color .15s}.gateway-live-test-link:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 34%,var(--border))}.gateway-live-test-link>span{min-width:0;display:flex;align-items:center;gap:11px}.gateway-live-test-link>span>i{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:12px;background:var(--grad);color:#fff}.gateway-live-test-link>span>span{min-width:0;display:flex;flex-direction:column}.gateway-live-test-link small{color:var(--primary);font-size:0.658rem;font-weight:850;letter-spacing:.08em}.gateway-live-test-link b{margin-top:2px;font-size:.72rem}.gateway-live-test-link em{margin-top:2px;color:var(--text-muted);font-size:0.666rem;font-style:normal;line-height:1.35}.gateway-live-test-link>i{color:var(--primary);font-size:.72rem} /* v2026.09.26.220 — Gateway API dark-mode consistency + UPI flow reflow */ .gateway-api-nav-icon.wallet{background:color-mix(in srgb,#6366f1 12%,var(--surface));color:#6366f1} .gateway-upi-flow-strip{width:100%;box-sizing:border-box;margin:12px 0 4px} [data-theme="dark"] .gateway-api-nav-icon.wallet{background:color-mix(in srgb,#6366f1 18%,var(--surface));color:#8b8cff;border:1px solid color-mix(in srgb,#6366f1 20%,var(--border))} [data-theme="dark"] .gateway-live-test-link{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface-2));border-color:color-mix(in srgb,var(--primary) 25%,var(--border));box-shadow:0 8px 22px rgba(0,0,0,.14)} [data-theme="dark"] .gateway-live-test-link small,[data-theme="dark"] .gateway-live-test-link>i{color:color-mix(in srgb,var(--primary) 78%,#fff)} [data-theme="dark"] .gateway-callback-note{background:color-mix(in srgb,var(--primary) 10%,var(--surface-2));border-color:color-mix(in srgb,var(--primary) 27%,var(--border));color:color-mix(in srgb,var(--text) 72%,var(--text-muted))} [data-theme="dark"] .gateway-callback-note>i,[data-theme="dark"] .gateway-callback-note code{color:color-mix(in srgb,var(--primary) 76%,#fff)} [data-theme="dark"] .gateway-upi-flow-strip{background:color-mix(in srgb,var(--surface-2) 94%,var(--primary));border-color:color-mix(in srgb,var(--primary) 18%,var(--border))} @media(max-width:520px){ .gateway-upi-flow-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px} .gateway-upi-flow-strip>i{display:none} .gateway-upi-flow-strip>span{min-height:48px;justify-content:flex-start;gap:7px;padding:8px 9px;border:1px solid var(--border);border-radius:11px;background:var(--surface);text-align:left;line-height:1.28} .gateway-upi-flow-strip>span>i{width:20px;flex:0 0 20px;text-align:center} .gateway-upi-flow-strip>span>b{order:-1;width:20px;height:20px;flex-basis:20px;font-size:0.662rem} [data-theme="dark"] .gateway-upi-flow-strip>span{background:color-mix(in srgb,var(--surface) 94%,var(--primary));border-color:color-mix(in srgb,var(--primary) 17%,var(--border))} } @media(max-width:339px){.gateway-upi-flow-strip{grid-template-columns:1fr}.gateway-upi-flow-strip>span{min-height:44px}} .gateway-api-nav-icon.payout{background:color-mix(in srgb,#0ea5a4 12%,var(--surface));color:#0f8f8e} [data-theme="dark"] .gateway-api-nav-icon.payout{background:color-mix(in srgb,#14b8a6 18%,var(--surface));color:#5eead4;border:1px solid color-mix(in srgb,#14b8a6 20%,var(--border))} /* ===== Advanced Wallet Transaction Details ===== */ /* ===== Transaction Details — FINZO Concept 1 hero + Concept 3 details ===== */ .sheet.tx-detail-modal{border-radius:28px 28px 0 0;background:var(--surface);overflow:hidden} .sheet.tx-detail-modal .handle{width:48px;background:color-mix(in srgb,var(--text-muted) 34%,var(--border));margin-top:11px} .sheet.tx-detail-modal .sheet-head{padding-top:9px;padding-bottom:11px} .sheet.tx-detail-modal .sheet-head h3{font-size:1.18rem;font-weight:900;letter-spacing:-.018em} .sheet.tx-detail-modal .sheet-close{width:38px;height:38px;background:color-mix(in srgb,var(--surface-2) 92%,var(--primary) 8%);color:var(--text);border:1px solid color-mix(in srgb,var(--border) 88%,var(--primary) 12%)} .sheet.tx-detail-modal .sheet-body{padding-top:2px;padding-bottom:calc(24px + var(--safe-b))} .tx-detail-sheet{--tx-tone:var(--primary);--tx-tone-soft:var(--primary-soft);padding:0 0 4px} .tx-detail-tone-success{--tx-tone:var(--success);--tx-tone-soft:var(--success-soft)} .tx-detail-tone-danger{--tx-tone:var(--danger);--tx-tone-soft:var(--danger-soft)} .tx-detail-tone-pending{--tx-tone:var(--warning);--tx-tone-soft:var(--warning-soft)} .tx-detail-hero-card{position:relative;display:flex;align-items:center;gap:14px;min-height:136px;padding:18px 16px;border:1px solid color-mix(in srgb,var(--tx-tone) 20%,var(--border));border-radius:23px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--tx-tone) 10%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface)) 58%,color-mix(in srgb,var(--info) 8%,var(--surface)));box-shadow:0 18px 38px -34px color-mix(in srgb,var(--tx-tone) 78%,transparent)} .tx-detail-hero-card:before,.tx-detail-hero-card:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(.2px)} .tx-detail-hero-card:before{width:130px;height:130px;right:-46px;top:-58px;background:color-mix(in srgb,var(--tx-tone) 13%,transparent)} .tx-detail-hero-card:after{width:92px;height:92px;right:28px;bottom:-54px;background:color-mix(in srgb,var(--info) 10%,transparent)} .tx-detail-hero-icon{position:relative;z-index:2;width:64px;height:64px;flex:0 0 64px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--tx-tone) 18%,var(--surface)),color-mix(in srgb,var(--tx-tone) 7%,var(--surface)));color:var(--tx-tone);border:1px solid color-mix(in srgb,var(--tx-tone) 24%,var(--border));box-shadow:0 14px 28px -22px color-mix(in srgb,var(--tx-tone) 85%,transparent);font-size:1.45rem} .tx-detail-hero-icon.has-sender-avatar{background:color-mix(in srgb,var(--surface-2) 94%,var(--tx-tone));} .tx-detail-hero-icon.has-sender-avatar>.tx-detail-hero-default-icon{opacity:0} .tx-detail-hero-avatar{position:absolute;z-index:2;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:20px;object-fit:cover;display:block} .tx-detail-hero-icon>span{position:absolute;z-index:3;right:-5px;bottom:-5px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--tx-tone);color:#fff;border:3px solid var(--surface);font-size:0.684rem;box-shadow:0 5px 12px -7px var(--tx-tone)} .tx-detail-hero-main{position:relative;z-index:2;min-width:0;flex:1} .tx-detail-hero-main .tx-detail-amount{font-size:clamp(1.72rem,7.2vw,2.16rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 9px;white-space:nowrap} .tx-detail-hero-main .tx-detail-amount.debit{color:var(--text)!important} .tx-detail-hero-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0} .tx-detail-hero-meta>b{font-size:.76rem;line-height:1.25;font-weight:850;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .tx-detail-status{display:inline-flex;align-items:center;gap:5px;min-height:27px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--tx-tone) 12%,var(--surface));color:var(--tx-tone);border:1px solid color-mix(in srgb,var(--tx-tone) 22%,transparent);font-size:0.686rem;font-weight:900;text-transform:capitalize;white-space:nowrap} .tx-detail-status i{font-size:0.674rem} .tx-detail-hero-art{position:absolute;z-index:1;right:17px;top:50%;transform:translateY(-50%) rotate(-10deg);font-size:4.9rem;color:color-mix(in srgb,var(--tx-tone) 10%,transparent);pointer-events:none} .tx-detail-info-list{margin-top:12px;padding:0 14px;border:1px solid color-mix(in srgb,var(--border) 92%,var(--primary) 8%);border-radius:20px;background:var(--surface);box-shadow:0 12px 28px -30px rgba(20,25,45,.5);overflow:hidden} .tx-detail-info-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:70px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 88%,transparent)} .tx-detail-info-row:last-child{border-bottom:0} .tx-detail-info-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 8%,var(--surface-2));color:var(--primary);font-size:.83rem} .tx-detail-info-copy{min-width:0;display:flex;flex-direction:column;gap:3px} .tx-detail-info-copy>span{font-size:.69rem;line-height:1.2;color:var(--text-muted);font-weight:700} .tx-detail-info-copy>b{display:block;min-width:0;font-size:.82rem;line-height:1.36;font-weight:850;color:var(--text);overflow-wrap:anywhere;word-break:break-word} .tx-detail-copy{width:31px;height:31px;flex:0 0 31px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 9%,var(--surface-2));color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 13%,var(--border));font-size:.72rem;transition:transform .16s var(--ease),background .16s} .tx-detail-copy:active{transform:scale(.92);background:var(--primary-soft)} .tx-detail-balance-card{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:82px;margin-top:12px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--success) 18%,var(--border));border-radius:20px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--success) 9%,var(--surface)),color-mix(in srgb,var(--info) 7%,var(--surface)));box-shadow:0 14px 30px -30px color-mix(in srgb,var(--success) 70%,transparent)} .tx-detail-balance-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success);border:1px solid color-mix(in srgb,var(--success) 18%,var(--border));font-size:1rem} .tx-detail-balance-card>div{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;gap:3px} .tx-detail-balance-card>div>span{font-size:.7rem;color:var(--text-muted);font-weight:750} .tx-detail-balance-card>div>b{font-size:1rem;line-height:1.25;color:var(--text);font-weight:900} .tx-detail-balance-art{position:relative;z-index:2;color:var(--success);font-size:1.05rem;opacity:.86} .tx-detail-balance-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-35px;bottom:-65px;background:color-mix(in srgb,var(--info) 10%,transparent);pointer-events:none} [data-theme="dark"] .sheet.tx-detail-modal{background:color-mix(in srgb,var(--surface) 96%,#000)} [data-theme="dark"] .tx-detail-hero-card{background:linear-gradient(135deg,color-mix(in srgb,var(--tx-tone) 15%,var(--surface)),color-mix(in srgb,var(--surface-2) 96%,var(--primary)) 60%,color-mix(in srgb,var(--info) 9%,var(--surface)));border-color:color-mix(in srgb,var(--tx-tone) 26%,var(--border));box-shadow:0 20px 42px -32px color-mix(in srgb,var(--tx-tone) 62%,#000)} [data-theme="dark"] .tx-detail-info-list{background:color-mix(in srgb,var(--surface-2) 97%,var(--primary));border-color:color-mix(in srgb,var(--border) 88%,var(--primary) 12%);box-shadow:none} [data-theme="dark"] .tx-detail-info-row{border-bottom-color:color-mix(in srgb,var(--border) 82%,transparent)} [data-theme="dark"] .tx-detail-info-icon,[data-theme="dark"] .tx-detail-copy{background:color-mix(in srgb,var(--primary) 13%,var(--surface-2))} [data-theme="dark"] .tx-detail-balance-card{background:linear-gradient(135deg,color-mix(in srgb,var(--success) 11%,var(--surface)),color-mix(in srgb,var(--surface-2) 95%,var(--info)));border-color:color-mix(in srgb,var(--success) 22%,var(--border));box-shadow:none} @media(max-width:359px){.tx-detail-hero-card{gap:11px;padding:16px 13px;min-height:126px}.tx-detail-hero-icon{width:56px;height:56px;flex-basis:56px;border-radius:19px}.tx-detail-hero-main .tx-detail-amount{font-size:1.7rem}.tx-detail-info-list{padding:0 11px}.tx-detail-info-row{grid-template-columns:34px minmax(0,1fr) auto;gap:9px;min-height:66px}.tx-detail-info-icon{width:34px;height:34px;border-radius:11px}.tx-detail-info-copy>b{font-size:.77rem}.tx-detail-info-copy>span{font-size:0.678rem}.tx-detail-copy{width:28px;height:28px;flex-basis:28px}.tx-detail-balance-card{grid-template-columns:42px minmax(0,1fr) auto;padding:12px 13px}.tx-detail-balance-icon{width:42px;height:42px;border-radius:14px}} /* v2026.10.10.261 — transaction timestamp inside hero */ .tx-detail-hero-date{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:.76rem;font-weight:650;line-height:1.4;color:var(--text-muted)} .tx-detail-hero-date i{font-size:.77rem;color:var(--tx-tone)} /* ---- pages.css ---- */ /* ================= PAGE STYLES ================= */ /* ---- AUTH ---- */ .auth-wrap{padding:8px 4px 30px;min-height:78vh;display:flex;flex-direction:column} .auth-hero{text-align:center;margin:24px 0 30px} .auth-hero img{width:88px;height:88px;border-radius:26px;margin:0 auto 18px;box-shadow:0 20px 46px -14px var(--primary);animation:pulseLogo 2.4s var(--ease) infinite} .auth-hero h1{font-size:1.7rem;font-weight:800;letter-spacing:-.02em} .auth-hero p{color:var(--text-muted);margin-top:6px} .auth-methods{display:flex;flex-direction:column;gap:12px;margin-top:auto} .auth-btn{display:flex;align-items:center;gap:14px;padding:17px 18px;border-radius:18px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);font-weight:700;transition:transform .16s,box-shadow .2s} .auth-btn:active{transform:scale(.98)} .auth-btn i{width:26px;text-align:center;font-size:1.2rem;color:var(--primary)} .auth-btn.g i{color:#ea4335} .auth-legal{text-align:center;font-size:.74rem;color:var(--text-muted);margin-top:20px;line-height:1.6} /* ---- HOME ---- */ .profile-card{ position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(17px,5.34vw,22px);color:#fff; background:var(--grad);box-shadow:0 22px 50px -18px var(--primary); } .profile-card::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.14)} .profile-card::before{content:"";position:absolute;right:30px;bottom:-60px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.10)} .pc-top{display:flex;align-items:center;gap:14px;position:relative;z-index:2} .pc-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.4);background:rgba(255,255,255,.2);cursor:pointer} .pc-name{font-weight:800;font-size:1.05rem} .pc-id{font-size:.76rem;opacity:.85} .pc-balance{position:relative;z-index:2;margin-top:20px} .pc-balance .lbl{font-size:.76rem;opacity:.85;text-transform:uppercase;letter-spacing:.1em} .pc-balance .amt{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;margin-top:2px} .complete-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:700;margin-top:6px;cursor:pointer}.complete-pill-arrow{font-size:0.674rem;opacity:.9} .quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,3.4vw,14px);margin-top:18px} .qa{position:relative;overflow:hidden;min-width:0;border-radius:var(--radius);padding:clamp(14px,4.37vw,18px);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:transform .16s} .qa:active{transform:scale(.97)} .qa .qic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:12px;background:var(--primary-soft);color:var(--primary)} .qa.accent{background:var(--grad);color:#fff} .qa.accent .qic{background:rgba(255,255,255,.22);color:#fff} .qa .qt{font-weight:800} .qa .qs{font-size:.76rem;opacity:.8;margin-top:2px} .section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 2px 10px} .section-title h2{font-size:1rem;font-weight:800;letter-spacing:-.01em} .service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)} .service{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .service .sic{width:100%;aspect-ratio:1;border-radius:18px;display:grid;place-items:center;font-size:1.3rem;background:var(--surface);border:1px solid var(--border);color:var(--primary);position:relative} .service .soon{position:absolute;top:5px;right:5px;font-size:0.654rem;background:var(--warning-soft);color:var(--warning);padding:2px 5px;border-radius:6px;font-weight:800} .service span{font-size:0.686rem;font-weight:600;color:var(--text-muted)} /* Services availability hierarchy: live actions stay crisp while upcoming tiles recede. */ .service.is-live{cursor:pointer} .service.is-live .sic{border-color:color-mix(in srgb,var(--primary) 18%,var(--border));box-shadow:0 10px 24px -22px var(--primary);background:linear-gradient(145deg,color-mix(in srgb,var(--primary-soft) 42%,var(--surface)),var(--surface))} .service.is-live span{color:var(--text);font-weight:750} .service.is-soon{opacity:.84;filter:saturate(.68);cursor:default} .service.is-soon .sic{background:color-mix(in srgb,var(--surface-2) 84%,var(--surface));border-color:color-mix(in srgb,var(--border) 82%,transparent);color:var(--text-muted);box-shadow:none} .service.is-soon .soon{opacity:.86;filter:none;color:var(--warning);background:var(--warning-soft)} .service.is-soon span{color:var(--text-muted);font-weight:650} [data-theme="dark"] .service.is-soon{opacity:.80;filter:saturate(.58)} [data-theme="dark"] .service.is-live .sic{border-color:color-mix(in srgb,var(--primary) 25%,var(--border));box-shadow:0 12px 26px -23px var(--primary)} /* ---- WALLET ---- */ .wallet-hero{border-radius:var(--radius-lg);padding:clamp(18px,5.83vw,24px);background:var(--grad);color:#fff;box-shadow:0 22px 50px -18px var(--primary);position:relative;overflow:hidden} .wallet-hero .lbl{opacity:.85;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em} .wallet-hero .amt{font-size:2.3rem;font-weight:800;margin-top:4px} .wallet-sub{display:flex;gap:clamp(8px,2.9vw,12px);margin-top:18px;min-width:0} .wallet-sub .ws{flex:1;min-width:0;background:rgba(255,255,255,.16);border-radius:16px;padding:12px clamp(10px,3.4vw,14px);backdrop-filter:blur(6px)} .wallet-sub .ws .k{font-size:.7rem;opacity:.85} .wallet-sub .ws .v{font-weight:800;margin-top:2px} .tx-filters{display:flex;gap:8px;margin:20px 0 6px} .tx-filters .tf{padding:8px 16px;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--surface-2);color:var(--text-muted)} .tx-filters .tf.active{background:var(--grad);color:#fff} /* ---- SETTINGS ---- */ .settings-group{margin-top:22px} .settings-group .sg-title{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0 4px 10px} .set-row{display:flex;align-items:center;gap:clamp(10px,3.4vw,14px);padding:clamp(13px,3.9vw,16px);background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:10px;transition:transform .14s} .set-row:active{transform:scale(.985)} .set-row .sic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.05rem;flex:none} .set-row .st{font-weight:700}.set-row .ss{font-size:.76rem;color:var(--text-muted)} .set-row .chev{margin-left:auto;color:var(--text-muted)} .profile-edit{position:relative;width:96px;height:96px;margin:0 auto 8px} .profile-edit img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--grad);border:3px solid var(--surface);box-shadow:var(--shadow)} .profile-edit .edit-fab{position:absolute;right:0;bottom:0;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;border:3px solid var(--surface)} /* ====================================================================== HOME LAYOUTS — ten interchangeable dashboard compositions ====================================================================== */ .home-layout{position:relative;isolation:isolate;animation:homeLayoutIn .24s var(--ease)} .home-layout>*{position:relative} .home-layout>*:first-child{z-index:1} .home-layout>*:not(:first-child){z-index:2} @keyframes homeLayoutIn{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}} .home-layout button{font-family:inherit} .home-layout-edit{position:absolute;top:15px;right:15px;z-index:6;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--primary);box-shadow:var(--shadow-sm);transition:transform .15s,background .2s} .home-layout-edit:active{transform:scale(.92)} .profile-card .home-layout-edit,.home-lifafa-hero .home-layout-edit{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none;backdrop-filter:blur(8px)} .home-profile-surface{position:relative;display:flex;align-items:center;padding:16px 54px 16px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)} .home-profile-surface .pc-top{width:100%} .home-profile-surface .pc-name{color:var(--text)} .home-profile-surface .pc-id{color:var(--text-muted)} .home-profile-surface .pc-avatar{width:52px;height:52px;border:2px solid var(--border);background:var(--primary-soft)} .home-profile-surface.is-compact{padding-top:13px;padding-bottom:13px} .home-profile-copy{min-width:0} .home-profile-copy .pc-name,.home-profile-copy .pc-id{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .home-action-list{display:flex;flex-direction:column;gap:10px} .home-action{width:100%;display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-align:left;box-shadow:var(--shadow-sm);transition:transform .15s} .home-action:active{transform:scale(.985)} .home-action .ha-icon{width:44px;height:44px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:1.05rem;flex:none} .home-action .ha-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .home-action .ha-copy b{font-size:.9rem}.home-action .ha-copy small{font-size:.7rem;color:var(--text-muted)} .home-action .ha-arrow{font-size:.72rem;color:var(--text-muted)} .home-action.is-accent{background:var(--grad);color:#fff;border-color:transparent} .home-action.is-accent .ha-icon{background:rgba(255,255,255,.2);color:#fff} .home-action.is-accent .ha-copy small,.home-action.is-accent .ha-arrow{color:rgba(255,255,255,.78)} .home-tile{min-height:112px;padding:15px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;box-shadow:var(--shadow-sm);transition:transform .15s} .home-tile:active{transform:scale(.97)} .home-tile .ht-icon{width:42px;height:42px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:12px;font-size:1.03rem} .home-tile b{font-size:.83rem}.home-tile small{font-size:0.682rem;color:var(--text-muted);margin-top:2px} .home-tile.is-primary{background:var(--grad);border-color:transparent;color:#fff} .home-tile.is-primary .ht-icon{background:rgba(255,255,255,.2);color:#fff}.home-tile.is-primary small{color:rgba(255,255,255,.78)} /* Layout 7 — Classic */ .home-layout-7 .profile-card{padding-right:62px} .home-layout-7 .pc-balance{padding-right:0} /* Layout 3 — wallet first */ .home-layout-3 .home-wallet-focus{position:relative;margin-top:14px;padding:22px;border-radius:28px;background:var(--grad);color:#fff;box-shadow:0 20px 46px -22px var(--primary);overflow:hidden} .home-layout-3 .home-wallet-focus::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-55px;top:-65px;background:rgba(255,255,255,.13)} .hwf-label{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.78)} .hwf-label>button{padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;font-size:0.686rem;font-weight:700} .hwf-balance{position:relative;z-index:2;font-size:2.15rem;font-weight:800;letter-spacing:-.035em;margin:7px 0 20px} .hwf-actions{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px} .hwf-actions button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:15px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.16);font-weight:750;font-size:.8rem;backdrop-filter:blur(8px)} .home-layout-3 .services-strip{grid-template-columns:repeat(4,1fr)} .home-layout-3 .services-strip .sic{border-radius:15px;aspect-ratio:1.08} /* Layout 3 — action board */ .home-command-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch} .home-command-person .home-profile-surface{height:100%;box-shadow:none} .home-command-balance{min-width:138px;padding:16px 14px;border-radius:20px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));display:flex;flex-direction:column;justify-content:center;align-items:flex-end} .home-command-balance span{font-size:0.682rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.home-command-balance b{font-size:1.15rem;color:var(--primary);margin-top:4px} .home-tight-title{margin-top:20px} .home-command-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .home-command-grid .home-tile{min-height:118px} .home-shortcut-pills{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px} .home-shortcut-pills button{padding:11px 10px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:.7rem;font-weight:700} .home-shortcut-pills i{color:var(--primary);margin-right:5px} .home-layout-3 .services-compact .sic{aspect-ratio:1.18;border-radius:14px;background:var(--surface-2)} /* Layouts 2 & 4 — Lifafa / Pay focus */ .home-lifafa-hero{position:relative;overflow:hidden;border-radius:30px;background:var(--grad);color:#fff;padding:0 18px 18px;box-shadow:0 22px 52px -20px var(--primary)} .hlh-glow{position:absolute;width:210px;height:210px;border-radius:50%;right:-85px;top:62px;background:rgba(255,255,255,.12);filter:blur(2px)} .home-lifafa-hero .home-hero-profile{position:relative;z-index:3;margin:0 -18px;padding:15px 52px 14px 16px;border-bottom:1px solid rgba(255,255,255,.16)} .home-lifafa-hero .home-hero-profile .pc-avatar{width:42px;height:42px;border:2px solid rgba(255,255,255,.35)} .home-lifafa-hero .home-hero-profile .pc-name{font-size:.88rem}.home-lifafa-hero .home-hero-profile .pc-id{font-size:0.686rem} .hlh-content{position:relative;z-index:2;display:flex;align-items:center;gap:15px;padding:24px 2px 18px} .hlh-gift{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.18);font-size:1.65rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .hlh-kicker{display:block;font-size:0.676rem;text-transform:uppercase;letter-spacing:.11em;opacity:.8;margin-bottom:3px}.hlh-content h2{font-size:1.35rem;line-height:1.1}.hlh-content p{font-size:0.686rem;opacity:.8;margin-top:5px;max-width:220px} .hlh-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 13px 13px 15px;border-radius:19px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px)} .hlh-bottom>div{display:flex;flex-direction:column}.hlh-bottom small{font-size:0.674rem;opacity:.75}.hlh-bottom b{font-size:1rem;margin-top:1px}.hlh-bottom>button{padding:10px 13px;border-radius:13px;background:#fff;color:var(--primary-dark);font-weight:800;font-size:.73rem} .home-triple-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px} .home-triple-actions .home-tile{min-height:98px;padding:12px;align-items:center;justify-content:center;text-align:center}.home-triple-actions .ht-icon{width:38px;height:38px;margin:0 auto 9px}.home-triple-actions .home-tile b{width:100%;text-align:center}.home-triple-actions small{display:none} .home-history-banner{display:flex;width:100%;align-items:center;gap:12px;margin-top:10px;padding:13px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-sm);text-align:left} .home-history-banner>span{width:42px;height:42px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.home-history-banner>div{display:flex;flex-direction:column;flex:1}.home-history-banner b{font-size:.83rem}.home-history-banner small{font-size:0.682rem;color:var(--text-muted);margin-top:2px}.home-history-banner>i{font-size:.7rem;color:var(--text-muted)} .home-layout-1 .services-soft .sic,.home-layout-2 .services-soft .sic,.home-layout-4 .services-soft .sic{background:var(--grad-soft);border-color:transparent} /* Layout 5 — finance card */ .home-finance-card{position:relative;overflow:hidden;margin-top:14px;padding:20px;border-radius:28px;background:linear-gradient(145deg,var(--primary-dark),var(--primary));color:#fff;box-shadow:0 24px 56px -20px var(--primary)} .home-finance-card::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-70px;bottom:-100px;background:rgba(255,255,255,.11)} .hfc-top,.hfc-balance,.hfc-chip,.hfc-actions{position:relative;z-index:2}.hfc-top{display:flex;justify-content:space-between;align-items:center;font-size:0.67rem;letter-spacing:.14em;font-weight:800;opacity:.85}.hfc-top i{font-size:1rem;transform:rotate(90deg)} .hfc-balance{display:flex;flex-direction:column;margin:23px 0 20px}.hfc-balance small{font-size:0.682rem;opacity:.72}.hfc-balance b{font-size:2rem;letter-spacing:-.035em;margin-top:2px} .hfc-chip{display:flex;align-items:center;gap:11px;font-size:.78rem;opacity:.9}.hfc-chip>i{font-size:1.45rem}.hfc-chip span{letter-spacing:.08em} .hfc-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.hfc-actions button{padding:11px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.75rem;font-weight:750}.hfc-actions i{margin-right:5px} .home-finance-links{display:grid;grid-template-columns:1fr 1fr;gap:9px}.home-finance-links .home-action{padding:12px;gap:9px}.home-finance-links .ha-icon{width:38px;height:38px}.home-finance-links .ha-copy small{display:none}.home-finance-links .ha-arrow{display:none} .home-layout-5 .services-minimal .sic{box-shadow:none;background:transparent;border-color:var(--border)} /* Layout 6 — compact all-action dashboard */ .home-minimal-top .home-profile-surface{box-shadow:none;background:transparent;border:0;padding-left:2px;padding-top:5px;padding-bottom:7px} .home-minimal-top .home-layout-edit{right:2px;top:8px;background:var(--surface);box-shadow:none} .home-minimal-balance{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label icon" "amount icon";align-items:center;margin-top:8px;padding:18px;border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)} .home-minimal-balance>span{grid-area:label;font-size:0.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.home-minimal-balance>b{grid-area:amount;font-size:1.65rem;margin-top:2px}.home-minimal-balance>button{grid-area:icon;width:48px;height:48px;border-radius:16px;background:var(--primary-soft);color:var(--primary);font-size:1.1rem} .home-all-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px} .home-all-actions .home-tile{min-height:102px;padding:12px;align-items:center;text-align:center}.home-all-actions .ht-icon{width:40px;height:40px;margin-bottom:8px}.home-all-actions b{font-size:.76rem}.home-all-actions small{font-size:0.672rem} .home-layout-6 .home-services-title{margin-top:22px}.home-layout-6 .services-minimal-grid{gap:8px}.home-layout-6 .services-minimal-grid .sic{aspect-ratio:1.25;border-radius:13px;background:var(--surface-2);box-shadow:none}.home-layout-6 .services-minimal-grid .service span{font-size:0.674rem} /* Layout chooser sheet */ .home-layout-help{line-height:1.55;margin:-2px 2px 14px} .home-layout-picker{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-bottom:4px} .home-layout-option{position:relative;min-width:0;padding:10px;border-radius:19px;background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);text-align:left;transition:border-color .18s,transform .15s,background .18s} .home-layout-option:active{transform:scale(.97)}.home-layout-option.selected{border-color:var(--primary);background:var(--primary-soft)} .layout-preview{height:92px;border-radius:13px;background:var(--surface);border:1px solid var(--border);padding:7px;display:grid;gap:4px;overflow:hidden} .layout-preview span{display:block;border-radius:4px;background:var(--border)}.layout-preview .lp-head,.layout-preview .lp-balance{background:var(--primary-soft)} .lp-7{grid-template:14px 1fr 20px / 1fr 1fr}.lp-7 .lp-head{grid-column:1/3}.lp-7 .lp-balance{grid-column:1/3}.lp-7 .lp-c,.lp-7 .lp-d{display:none} .lp-2{grid-template:1fr 24px / 1fr 1fr 1fr}.lp-2 .lp-head{grid-column:1/4;background:var(--primary)}.lp-2 .lp-balance{display:none}.lp-2 .lp-a,.lp-2 .lp-b,.lp-2 .lp-c{display:block}.lp-2 .lp-d{display:none} .lp-3{grid-template:12px 1fr 16px / 1fr 1fr}.lp-3 .lp-head{grid-column:1/3}.lp-3 .lp-balance{grid-column:1/3;background:var(--primary)}.lp-3 .lp-c,.lp-3 .lp-d{display:none} .lp-4{grid-template:1fr 24px / 1fr 1fr 1fr}.lp-4 .lp-head{grid-column:1/4;background:var(--primary)}.lp-4 .lp-balance{display:none}.lp-4 .lp-a,.lp-4 .lp-b,.lp-4 .lp-c{display:block}.lp-4 .lp-d{display:none} .lp-5{grid-template:12px 1fr 18px / 1fr 1fr}.lp-5 .lp-head{grid-column:1/3}.lp-5 .lp-balance{grid-column:1/3;background:var(--primary-dark)}.lp-5 .lp-c,.lp-5 .lp-d{display:none} .lp-6{grid-template:18px 1fr 1fr / repeat(3,1fr)}.lp-6 .lp-head{grid-column:1/4}.lp-6 .lp-balance{display:none} .layout-option-copy{display:flex;flex-direction:column;padding:9px 2px 2px}.layout-option-copy b{font-size:.72rem;color:var(--primary)}.layout-option-copy span{font-size:.82rem;font-weight:800;margin-top:1px}.layout-option-copy small{font-size:0.672rem;color:var(--text-muted);margin-top:3px;line-height:1.3} .layout-check{position:absolute;top:7px;right:7px;width:23px;height:23px;border-radius:50%;display:none;place-items:center;background:var(--primary);color:#fff;font-size:0.674rem;box-shadow:0 3px 10px rgba(0,0,0,.18)}.home-layout-option.selected .layout-check{display:grid} [data-theme="dark"] .home-command-balance{border-color:var(--border)} [data-theme="dark"] .home-layout-option.selected{background:color-mix(in srgb,var(--primary) 14%,var(--surface-2))} [data-theme="dark"] .home-finance-card{background:linear-gradient(145deg,color-mix(in srgb,var(--primary-dark) 72%,#080912),var(--primary))} @media(max-width:390px){ .home-command-head{grid-template-columns:1fr}.home-command-balance{min-width:0;align-items:flex-start} .home-command-balance{display:grid;grid-template-columns:1fr auto;align-items:center}.home-command-balance b{margin:0} .home-layout-picker{gap:8px}.home-layout-option{padding:8px}.layout-preview{height:82px} .home-triple-actions{gap:7px}.home-triple-actions .home-tile{padding:10px}.home-all-actions{gap:7px} } /* Layout 1 — Earn & Cashout */ .home-earn-hero{ position:relative;overflow:hidden;padding:clamp(16px,4.85vw,20px);border-radius:28px; background:linear-gradient(145deg,var(--primary-dark),var(--primary)); color:#fff;box-shadow:0 24px 58px -23px var(--primary); } .heh-shine{ position:absolute;right:-65px;bottom:-95px;width:230px;height:230px; border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none; } .heh-profile{ position:relative;z-index:2;display:flex;align-items:center; justify-content:space-between;min-height:58px; } .heh-profile-user{ display:flex;align-items:center;gap:13px;min-width:0;padding-right:50px; } .heh-profile .pc-avatar{ width:56px;height:56px;flex:0 0 56px;border-radius:50%;object-fit:cover; border:3px solid rgba(255,255,255,.38);background:rgba(255,255,255,.18); } .heh-profile-copy{min-width:0} .heh-profile .pc-name{ color:#fff;font-size:1.02rem;font-weight:800;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } .heh-profile .pc-id{ margin-top:2px;color:rgba(255,255,255,.78);font-size:.73rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .heh-layout-edit{ position:absolute;top:0;right:0;width:38px;height:38px;display:grid; place-items:center;border-radius:13px;background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.20);color:#fff; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); cursor:pointer;transition:transform .15s ease,background .15s ease; } .heh-layout-edit:active{transform:scale(.92)} .heh-layout-edit i{font-size:.82rem} .heh-profile .complete-pill{ margin-top:5px;padding:4px 9px;background:rgba(255,255,255,.18); color:#fff;font-size:0.674rem; } .heh-separator{position:relative;z-index:2;margin:15px 0 0;border-top:1px dashed rgba(255,255,255,.38);opacity:.55} .heh-row{ position:relative;z-index:2;display:flex;align-items:center; justify-content:space-between;margin:15px 0 18px; } .heh-row>div{display:flex;flex-direction:column} .heh-row small{font-size:0.682rem;opacity:.72} .heh-row b{margin-top:2px;font-size:2rem;font-weight:800;letter-spacing:-.04em} .heh-orb{ width:58px;height:58px;display:grid;place-items:center;border-radius:20px; padding:0;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16); color:#fff;font-size:1.3rem;cursor:pointer; transition:transform .16s ease,background .16s ease,border-color .16s ease; } .heh-orb:active{transform:scale(.93);background:rgba(255,255,255,.23)} .heh-orb i{pointer-events:none} .heh-actions{ position:relative;z-index:2;display:grid; grid-template-columns:1.35fr .9fr;gap:9px; } .heh-actions button{ min-height:62px;border-radius:17px;font-weight:800;text-align:left; } .heh-earn{ display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:10px;padding:10px 13px;background:#fff;color:var(--primary-dark)!important; } .heh-earn>i:first-child{ width:36px;height:36px;display:grid;place-items:center;border-radius:12px; background:var(--primary-soft);color:var(--primary); } .heh-earn span,.heh-withdraw span{display:flex;flex-direction:column} .heh-earn b,.heh-withdraw b{font-size:.76rem} .heh-earn small,.heh-withdraw small{margin-top:2px;font-size:0.668rem;opacity:.72} .heh-earn>i:last-child{font-size:0.686rem} .heh-withdraw{ display:flex;align-items:center;justify-content:center;gap:9px;padding:10px; background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.16); color:#fff; } .home-earn-secondary{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2.2vw,9px);margin-top:12px; } .home-earn-secondary .home-tile{ min-height:96px;padding:12px 6px;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center; } .home-earn-secondary .ht-icon{ width:40px;height:40px;display:grid;place-items:center; margin:0 auto 8px;border-radius:14px; } .home-earn-secondary .home-tile b{width:100%;text-align:center} .home-earn-secondary .home-tile small{ width:100%;margin-top:2px;font-size:0.666rem;text-align:center; } .home-earn-history{ display:flex;align-items:center;width:100%;gap:12px;margin-top:10px; padding:13px 14px;border-radius:18px;background:var(--surface); border:1px solid var(--border);color:var(--text);text-align:left; box-shadow:var(--shadow-sm); } .home-earn-history>span{ width:42px;height:42px;flex:none;display:grid;place-items:center; border-radius:14px;background:var(--primary-soft);color:var(--primary); } .home-earn-history>div{ display:flex;flex:1;flex-direction:column;min-width:0; } .home-earn-history b{font-size:.8rem} .home-earn-history small{ margin-top:2px;font-size:0.674rem;color:var(--text-muted); } .home-earn-history>i{font-size:.7rem;color:var(--text-muted)} @media(max-width:339px){ .home-earn-hero{padding:17px} .heh-profile .pc-avatar{width:52px;height:52px;flex-basis:52px} .heh-actions{grid-template-columns:1.2fr .85fr} .home-earn-secondary{gap:7px} .home-earn-secondary .home-tile{padding-inline:4px} } /* Layout 8 — Rewards Hub */ .home-rewards-panel{position:relative;overflow:hidden;margin-top:13px;padding:20px;border-radius:28px;background:var(--grad-soft);border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));box-shadow:var(--shadow-sm)} .home-rewards-panel::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-85px;top:-85px;background:color-mix(in srgb,var(--primary) 12%,transparent)} .hrp-top,.hrp-balance,.hrp-create{position:relative;z-index:2}.hrp-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.hrp-top span{font-size:0.666rem;font-weight:850;letter-spacing:.12em;color:var(--primary)}.hrp-top h2{font-size:1.22rem;margin-top:3px;letter-spacing:-.025em}.hrp-gift{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:1.25rem;box-shadow:0 12px 26px -12px var(--primary)} .hrp-balance{display:flex;align-items:end;justify-content:space-between;margin:22px 0 15px;padding-top:15px;border-top:1px solid var(--border)}.hrp-balance span{font-size:0.68rem;color:var(--text-muted)}.hrp-balance b{font-size:1.45rem} .hrp-create{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:15px;background:var(--primary);color:#fff;font-size:.76rem;font-weight:850}.hrp-create i:last-child{font-size:0.68rem;margin-left:3px} .home-reward-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.home-reward-actions .home-action{padding:13px 12px}.home-reward-actions .ha-icon{width:40px;height:40px}.home-reward-actions .ha-copy small{font-size:0.664rem}.home-reward-actions .ha-arrow{display:none} .home-reward-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.home-reward-mini button{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 7px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:0.68rem;font-weight:750}.home-reward-mini i{color:var(--primary)} /* Layout 9 — Activity Pulse */ .home-activity-card{position:relative;overflow:hidden;min-height:174px;margin-top:13px;padding:19px;border-radius:27px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)} .hac-copy{position:relative;z-index:2;display:flex;flex-direction:column}.hac-copy>span{font-size:0.664rem;letter-spacing:.12em;color:var(--primary);font-weight:850}.hac-copy small{font-size:0.678rem;color:var(--text-muted);margin-top:20px}.hac-copy b{font-size:1.8rem;letter-spacing:-.04em;margin-top:2px}.hac-wallet{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:15px;background:var(--primary-soft);color:var(--primary);font-size:1rem} .hac-bars{position:absolute;left:19px;right:19px;bottom:17px;height:38px;display:flex;align-items:end;gap:7px}.hac-bars i{display:block;flex:1;border-radius:5px 5px 2px 2px;background:var(--primary-soft)}.hac-bars i:nth-child(1){height:25%}.hac-bars i:nth-child(2){height:45%}.hac-bars i:nth-child(3){height:38%}.hac-bars i:nth-child(4){height:75%;background:color-mix(in srgb,var(--primary) 38%,var(--primary-soft))}.hac-bars i:nth-child(5){height:58%}.hac-bars i:nth-child(6){height:90%;background:var(--primary)}.hac-bars i:nth-child(7){height:68%;background:color-mix(in srgb,var(--primary) 55%,var(--primary-soft))} .home-activity-primary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}.home-activity-primary .home-action{padding:13px 11px}.home-activity-primary .ha-icon{width:39px;height:39px}.home-activity-primary .ha-copy small{font-size:0.662rem}.home-activity-primary .ha-arrow{display:none} .home-activity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}.home-activity-grid .home-tile{min-height:89px;padding:9px 5px;text-align:center;align-items:center}.home-activity-grid .ht-icon{width:36px;height:36px;margin-bottom:7px}.home-activity-grid b{font-size:0.68rem}.home-activity-grid small{font-size:0.658rem} /* Layout 10 — Balanced Pro */ .home-pro-shell{overflow:hidden;border-radius:29px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)} .home-pro-profile .home-profile-surface{border:0;border-radius:0;box-shadow:none;margin:0;padding:15px 52px 12px 16px;background:transparent}.home-pro-profile .home-layout-edit{top:13px;right:13px} .home-pro-balance{position:relative;padding:17px 18px 19px;background:linear-gradient(135deg,var(--primary-soft),color-mix(in srgb,var(--surface) 76%,var(--primary-soft)));border-top:1px solid var(--border);display:grid;grid-template-columns:1fr auto;grid-template-areas:"lab link" "bal link";align-items:center}.home-pro-balance>span{grid-area:lab;font-size:0.674rem;color:var(--text-muted)}.home-pro-balance>b{grid-area:bal;font-size:1.62rem;letter-spacing:-.035em;margin-top:2px}.home-pro-balance>button{grid-area:link;color:var(--primary);font-size:0.68rem;font-weight:800;background:var(--surface);border:1px solid var(--border);padding:8px 10px;border-radius:12px}.home-pro-balance>button i{font-size:0.666rem;margin-left:4px} .home-pro-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border)}.home-pro-actions>button{position:relative;display:flex;flex-direction:column;align-items:center;padding:14px 5px 13px;color:var(--text);border-right:1px solid var(--border)}.home-pro-actions>button:last-child{border-right:0}.home-pro-actions>button>span{width:37px;height:37px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);margin-bottom:7px}.home-pro-actions b{font-size:0.676rem}.home-pro-actions small{font-size:0.658rem;color:var(--text-muted);margin-top:2px} .home-pro-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.home-pro-links>button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:11px;border-radius:15px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);text-align:left}.home-pro-links>button>i:first-child{color:var(--primary)}.home-pro-links span{display:flex;flex-direction:column}.home-pro-links b{font-size:0.686rem}.home-pro-links small{font-size:0.658rem;color:var(--text-muted);margin-top:1px}.home-pro-links>button>i:last-child{font-size:0.66rem;color:var(--text-muted)} /* Layout chooser previews 7–10 */ .lp-1{grid-template:12px 1fr 18px / 1.35fr .85fr}.lp-1 .lp-head{grid-column:1/3}.lp-1 .lp-balance{grid-column:1/3;background:var(--primary)}.lp-1 .lp-a{background:var(--primary)}.lp-1 .lp-c,.lp-1 .lp-d{display:none} .lp-8{grid-template:1fr 19px 15px / repeat(3,1fr)}.lp-8 .lp-head{grid-column:1/4;background:var(--primary-soft)}.lp-8 .lp-balance{display:none}.lp-8 .lp-a{grid-column:1/4;background:var(--primary)}.lp-8 .lp-d{display:none} .lp-9{grid-template:1fr 18px / repeat(4,1fr)}.lp-9 .lp-head{grid-column:1/5}.lp-9 .lp-balance{display:none}.lp-9 .lp-a{background:var(--primary)} .lp-10{grid-template:12px 1fr 21px / repeat(4,1fr)}.lp-10 .lp-head{grid-column:1/5}.lp-10 .lp-balance{grid-column:1/5;background:var(--primary-soft)} [data-theme="dark"] .home-rewards-panel{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface-2))} [data-theme="dark"] .home-pro-balance{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface-2))} [data-theme="dark"] .heh-earn{background:color-mix(in srgb,#fff 94%,var(--primary-soft))} @media(max-width:390px){ .heh-actions{grid-template-columns:1.25fr .85fr}.heh-row b{font-size:1.75rem}.heh-earn{padding:9px}.heh-withdraw{padding:8px 7px} .home-activity-grid{gap:6px}.home-activity-grid .home-tile{padding:8px 3px}.home-pro-actions>button{padding-inline:2px}.home-pro-actions b{font-size:0.668rem} .home-pro-links{gap:6px}.home-pro-links>button{padding:9px 7px;gap:6px}.home-pro-links small{display:none} } /* Balanced Pro — polished balanced dashboard */ .home-layout-10{position:relative} .home-layout-10 .home-pro-shell{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 12%,var(--surface)) 0%,var(--surface) 46%,color-mix(in srgb,var(--primary) 8%,var(--surface-2)) 100%);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));box-shadow:0 18px 46px -28px color-mix(in srgb,var(--primary) 48%,transparent),var(--shadow-sm)} .home-pro-glow{position:absolute;z-index:-1;pointer-events:none;border-radius:999px;filter:blur(2px)} .home-pro-glow-a{width:190px;height:190px;right:-88px;top:-104px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 22%,transparent),transparent 70%)} .home-pro-glow-b{width:155px;height:155px;left:-90px;bottom:34px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 12%,transparent),transparent 72%)} .home-layout-10 .home-pro-profile{position:relative;z-index:2} .home-layout-10 .home-pro-profile .home-profile-surface{padding:17px 54px 14px 17px;background:transparent} .home-layout-10 .home-pro-profile .pc-avatar{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,var(--surface)),0 8px 20px -12px var(--text)} .home-layout-10 .home-pro-profile .pc-name{font-weight:850;letter-spacing:-.015em} .home-layout-10 .home-pro-profile .home-layout-edit{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px);border-color:color-mix(in srgb,var(--primary) 18%,var(--border))} .home-layout-10 .home-pro-balance{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,var(--surface)) 0%,color-mix(in srgb,var(--primary) 8%,var(--surface)) 58%,color-mix(in srgb,var(--primary) 14%,var(--surface-2)) 100%);border-top:1px solid color-mix(in srgb,var(--primary) 14%,var(--border))} .home-pro-balance-copy{min-width:0;display:flex;flex-direction:column} .home-pro-balance-copy>span{display:flex;align-items:center;gap:6px;font-size:0.674rem;font-weight:750;color:var(--text-muted)} .home-pro-balance-copy>span i{color:var(--primary);font-size:0.686rem} .home-pro-balance-copy>b{font-size:1.78rem;line-height:1.12;letter-spacing:-.045em;margin-top:4px;color:var(--text)} .home-pro-balance-copy>small{font-size:0.662rem;color:var(--text-muted);margin-top:4px} .home-pro-wallet-btn{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));color:var(--primary);font-size:0.678rem;font-weight:850;box-shadow:0 8px 20px -18px var(--text);backdrop-filter:blur(10px)} .home-pro-wallet-btn i{font-size:0.666rem} .home-layout-10 .home-pro-actions{position:relative;z-index:2;border-top:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px)} .home-layout-10 .home-pro-actions>button{min-height:86px;padding:13px 4px 12px;border-right-color:color-mix(in srgb,var(--primary) 12%,var(--border));transition:transform .16s ease,background .16s ease} .home-layout-10 .home-pro-actions>button:active{transform:scale(.96);background:var(--primary-soft)} .home-layout-10 .home-pro-actions>button>span{width:40px;height:40px;border-radius:14px;margin-bottom:7px;background:linear-gradient(145deg,var(--primary-soft),color-mix(in srgb,var(--primary) 14%,var(--surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 10%,transparent)} .home-layout-10 .home-pro-actions b{font-size:0.678rem;font-weight:850} .home-layout-10 .home-pro-actions small{font-size:0.656rem} .home-layout-10 .home-pro-links{gap:9px;margin-top:11px} .home-layout-10 .home-pro-links>button{grid-template-columns:auto 1fr auto;min-height:58px;padding:10px 11px;border-radius:17px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 4%,var(--surface-2)));border-color:color-mix(in srgb,var(--primary) 12%,var(--border));box-shadow:0 10px 24px -22px var(--text);transition:transform .16s ease,border-color .16s ease} .home-layout-10 .home-pro-links>button:active{transform:scale(.975);border-color:color-mix(in srgb,var(--primary) 32%,var(--border))} .home-layout-10 .home-pro-links .home-pro-link-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)} .home-layout-10 .home-pro-links>button>.home-pro-link-icon+i{color:var(--primary)} .home-layout-10 .home-pro-links b{font-size:.69rem;font-weight:850} .home-layout-10 .home-pro-links small{font-size:0.656rem} [data-theme="dark"] .home-layout-10 .home-pro-shell{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 14%,var(--surface)) 0%,var(--surface) 48%,color-mix(in srgb,var(--primary) 9%,var(--surface-2)) 100%);border-color:color-mix(in srgb,var(--primary) 24%,var(--border))} [data-theme="dark"] .home-layout-10 .home-pro-balance{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 17%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface-2)))} [data-theme="dark"] .home-layout-10 .home-pro-actions{background:color-mix(in srgb,var(--surface) 90%,transparent)} @media(max-width:390px){ .home-pro-balance-copy>b{font-size:1.64rem}.home-pro-balance-copy>small{display:none}.home-pro-wallet-btn span{display:none}.home-pro-wallet-btn{width:38px;height:38px;padding:0;justify-content:center}.home-layout-10 .home-pro-actions>button{min-height:82px}.home-layout-10 .home-pro-actions>button>span{width:37px;height:37px}.home-layout-10 .home-pro-links>button{min-height:54px;padding:9px 8px}.home-layout-10 .home-pro-links .home-pro-link-icon{width:31px;height:31px} } /* ---- TRANSACTION HISTORY ADVANCED FILTER ---- */ .transactions-page .section-title{margin-bottom:8px} .tx-filter-line{display:flex;align-items:center;gap:9px;margin:0 0 8px} .tx-filter-line .tx-filters{flex:1;margin:0;min-width:0} .tx-advanced-toggle{width:38px;height:38px;flex:0 0 38px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:.76rem;transition:transform .16s var(--ease),background .2s,color .2s,border-color .2s} .tx-advanced-toggle:active{transform:scale(.94)} .tx-advanced-toggle.active{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))} .tx-advanced-wrap{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-4px);transition:grid-template-rows .3s var(--ease),opacity .22s ease,transform .3s var(--ease)} .tx-advanced-wrap.open{grid-template-rows:1fr;opacity:1;transform:none} .tx-advanced-inner{min-height:0;overflow:hidden} .tx-advanced-panel{margin:4px 0 13px;padding:14px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-2) 68%,var(--surface)));box-shadow:var(--shadow-sm)} .tx-search-field>span,.tx-date-field>span{display:block;margin:0 0 6px 2px;font-size:0.682rem;font-weight:800;color:var(--text-muted)} .tx-search-field>div{height:44px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1.5px solid var(--border);border-radius:14px;background:var(--surface);transition:border-color .18s,box-shadow .18s} .tx-search-field>div:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)} .tx-search-field i{color:var(--text-muted);font-size:.72rem} .tx-search-field input,.tx-date-field input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.76rem} .tx-search-field input::placeholder{color:color-mix(in srgb,var(--text-muted) 72%,transparent)} .tx-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px} .tx-date-field input{height:42px;padding:0 10px;border:1.5px solid var(--border);border-radius:13px;background:var(--surface);color-scheme:light} [data-theme="dark"] .tx-date-field input{color-scheme:dark} .tx-date-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)} .tx-search-btn{width:100%;min-height:44px;margin-top:13px;border-radius:14px;background:var(--grad);color:#fff;font-size:.74rem;font-weight:850;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 24px -18px var(--primary);position:relative;overflow:hidden} .tx-search-btn:active{transform:scale(.985)} .tx-search-state{margin:10px 0} .tx-state-loader,.tx-result-found,.tx-state-empty{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)} .tx-state-loader{min-height:126px;display:flex;align-items:center;justify-content:center;gap:14px;padding:22px} .tx-state-loader>div{display:flex;flex-direction:column;gap:3px}.tx-state-loader b{font-size:.82rem}.tx-state-loader small{font-size:0.682rem;color:var(--text-muted)} .tx-orbit-loader{width:36px;height:36px;border-radius:50%;border:3px solid var(--primary-soft);border-top-color:var(--primary);display:grid;place-items:center;animation:txOrbit .8s linear infinite;flex:none} .tx-orbit-loader i{width:7px;height:7px;border-radius:50%;background:var(--primary)} @keyframes txOrbit{to{transform:rotate(360deg)}} .tx-result-found{display:flex;align-items:center;gap:10px;padding:10px 12px;border-color:color-mix(in srgb,var(--success) 22%,var(--border));background:color-mix(in srgb,var(--success-soft) 42%,var(--surface))} .tx-result-found>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--success-soft);color:var(--success);font-size:0.686rem;flex:none} .tx-result-found>div{display:flex;flex-direction:column;gap:1px}.tx-result-found b{font-size:.7rem}.tx-result-found small{font-size:0.666rem;color:var(--text-muted)} .tx-state-empty{min-height:160px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .tx-state-empty>span{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted);font-size:1rem} .tx-state-empty>b{margin-top:11px;font-size:.8rem}.tx-state-empty>small{max-width:260px;margin-top:5px;font-size:0.678rem;line-height:1.5;color:var(--text-muted)} @media(max-width:339px){.tx-date-grid{gap:8px}.tx-advanced-panel{padding:12px}.tx-filters .tf{padding-left:13px;padding-right:13px}} /* ===== Phase 33 — Wallet polish + legal/settings links ===== */ .wallet-hero{ isolation:isolate; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 94%,#171a31),color-mix(in srgb,var(--primary-dark) 86%,#111827)); box-shadow:0 22px 46px -29px color-mix(in srgb,var(--primary) 85%,transparent); } .wallet-hero:before,.wallet-hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none} .wallet-hero:before{width:205px;height:205px;right:-92px;top:-102px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 60px rgba(255,255,255,.05)} .wallet-hero:after{width:112px;height:112px;right:-24px;top:-34px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)} .wallet-sub .ws{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.1)} .wallet-actions{position:relative;z-index:1} .wallet-recent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 2px 0} .wallet-recent-head h2{margin:0} .wallet-recent-head button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 9px;border-radius:10px;background:transparent;color:var(--primary);font-family:inherit;font-size:.72rem;font-weight:850} .wallet-recent-head button:active{background:var(--primary-soft);transform:scale(.97)} .wallet-recent-head button i{font-size:0.662rem} .wallet-recent-filters{margin:10px 0 10px} .settings-download-app{margin:8px 0 14px}.settings-policy-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;padding:10px 10px 4px;color:var(--text-muted)} .settings-policy-links button{border:0;background:none;color:var(--text-muted);font-family:inherit;font-size:.7rem;font-weight:750;padding:4px 2px} .settings-policy-links button:active{color:var(--primary)} .settings-policy-links span{font-size:0.666rem;opacity:.55} .policy-mini-status{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 11px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);color:var(--text-muted);font-size:.72rem;font-weight:750} .policy-mini-status.on{background:color-mix(in srgb,var(--success-soft) 62%,var(--surface));border-color:color-mix(in srgb,var(--success) 20%,var(--border));color:var(--success)} /* ===== Profile photo cropper — gesture-first, no range slider ===== */ .profile-cropper{padding:2px 0 4px} .profile-crop-stage-wrap{display:flex;justify-content:center;padding:4px 0 2px} .profile-crop-stage{ position:relative; width:min(76vw,300px); aspect-ratio:1; overflow:hidden; border-radius:50%; background:#0c0d12; touch-action:none; user-select:none; cursor:grab; box-shadow:0 18px 42px -24px rgba(0,0,0,.65),0 0 0 1px color-mix(in srgb,var(--border) 72%,transparent); isolation:isolate; } .profile-crop-stage:active{cursor:grabbing} .profile-crop-stage img{ position:absolute; left:50%;top:50%; max-width:none!important; max-height:none!important; pointer-events:none; user-select:none; -webkit-user-drag:none; will-change:width,height,transform; transform-origin:center; } .profile-crop-stage img.crop-animate{transition:width .18s var(--ease),height .18s var(--ease),transform .18s var(--ease)} .profile-crop-grid,.profile-crop-ring{position:absolute;inset:0;pointer-events:none} .profile-crop-grid{ z-index:2; opacity:.28; background: linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.6) 33.35%,rgba(255,255,255,.6) 33.65%,transparent 33.8%,transparent 66.2%,rgba(255,255,255,.6) 66.35%,rgba(255,255,255,.6) 66.65%,transparent 66.8%), linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.6) 33.35%,rgba(255,255,255,.6) 33.65%,transparent 33.8%,transparent 66.2%,rgba(255,255,255,.6) 66.35%,rgba(255,255,255,.6) 66.65%,transparent 66.8%); } .profile-crop-ring{z-index:3;border:2px solid rgba(255,255,255,.86);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} .profile-crop-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 4px 10px;color:var(--text-muted);font-size:0.676rem;font-weight:700;text-align:center} .profile-crop-hint i{color:var(--primary);font-size:0.682rem} .profile-crop-controls{display:grid;grid-template-columns:44px minmax(120px,1fr) 44px;align-items:center;gap:9px;max-width:300px;margin:0 auto 14px} .profile-crop-control,.profile-crop-reset{height:44px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);box-shadow:var(--shadow-sm);transition:transform .14s ease,background .14s ease,border-color .14s ease} .profile-crop-control{width:44px;border-radius:14px;display:grid;place-items:center;font-size:.72rem} .profile-crop-reset{border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;font-family:inherit;font-weight:850} .profile-crop-reset i{font-size:0.68rem;color:var(--primary)} .profile-crop-reset span{font-size:.72rem;min-width:38px;text-align:center} .profile-crop-control:active,.profile-crop-reset:active{transform:scale(.96);background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 28%,var(--border))} .profile-crop-actions{display:grid;grid-template-columns:.9fr 1.1fr;gap:9px} .profile-crop-actions .btn{margin:0;min-height:48px;padding-left:10px;padding-right:10px;gap:7px} .profile-crop-actions .btn i{font-size:.7rem} @media(max-width:339px){ .profile-crop-stage{width:min(74vw,268px)} .profile-crop-controls{max-width:268px} .profile-crop-actions{grid-template-columns:1fr} .profile-crop-hint{font-size:0.668rem} } /* Email OTP delivery hint inside the profile verification sheet. */ .email-otp-delivery-note{display:flex;align-items:flex-start;gap:10px;margin:0 0 13px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--warning) 18%,var(--border));border-radius:13px;background:var(--warning-soft);color:var(--warning);font-size:0.68rem;line-height:1.5}.email-otp-delivery-note>i{margin-top:2px;flex:none}.email-otp-delivery-note>div{min-width:0}.email-otp-delivery-note b{display:block;font-size:0.686rem;margin-bottom:2px}.email-otp-delivery-note span{display:block}.email-otp-delivery-note strong{font-weight:900} /* Account PIN reset request: inline progress + result inside the same settings sheet. */ .apin-reset-row.is-loading{pointer-events:none;opacity:.82} .apin-reset-row.is-loading .chev{opacity:.35} .apin-reset-spin{animation:apin-reset-rotate .72s linear infinite;transform-origin:center} @keyframes apin-reset-rotate{to{transform:rotate(360deg)}} .apin-reset-feedback{display:none;margin:-1px 2px 10px;padding:11px 12px;border-radius:13px;font-size:.82rem;line-height:1.42;align-items:flex-start;gap:9px;border:1px solid transparent} .apin-reset-feedback.success,.apin-reset-feedback.error{display:flex} .apin-reset-feedback.success{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 28%,transparent);color:var(--success)} .apin-reset-feedback.error{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 28%,transparent);color:var(--danger)} .apin-reset-feedback i{margin-top:2px;flex:none}.apin-reset-feedback span{min-width:0}.apin-reset-feedback b{font-weight:800;color:inherit} /* v2026.09.07.11 — PHP-driven Home promotional banner carousel. */ .home-promo-slider-host{margin-top:18px;min-height:0} .home-promo-slider{width:100%;min-width:0;overflow:hidden} .home-promo-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:18px;touch-action:pan-x pan-y} .home-promo-viewport::-webkit-scrollbar{display:none} .home-promo-track{display:flex;width:100%} .home-promo-slide{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;border-radius:18px;overflow:hidden;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--primary) 10%,var(--border));box-shadow:0 14px 34px -30px rgba(0,0,0,.55)} .home-promo-slide>a,.home-promo-download-trigger{display:block;width:100%;text-decoration:none}.home-promo-download-trigger{padding:0;border:0;background:transparent;cursor:pointer;text-align:inherit}.home-promo-slide img{display:block;width:100%;height:auto;aspect-ratio:20/7;object-fit:cover;border-radius:17px;background:var(--surface-2)} .home-promo-dots{display:flex;align-items:center;justify-content:center;gap:6px;min-height:24px;padding-top:8px} .home-promo-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 38%,transparent);opacity:.72;transition:width .32s var(--ease),background .32s var(--ease),opacity .32s var(--ease),transform .32s var(--ease)} .home-promo-dot.active{width:20px;background:var(--primary);opacity:1;transform:translateZ(0)} [data-theme="dark"] .home-promo-slide{border-color:color-mix(in srgb,var(--primary) 18%,var(--border));box-shadow:0 14px 34px -28px rgba(0,0,0,.8)} @media(max-width:390px){.home-promo-slider-host{margin-top:16px}.home-promo-viewport,.home-promo-slide{border-radius:16px}.home-promo-slide img{border-radius:15px}.home-promo-dots{padding-top:7px}} @media(prefers-reduced-motion:reduce){.home-promo-viewport{scroll-behavior:auto}.home-promo-dot{transition:none}} /* ================= RESPONSIVE PAGE COMPOSITION ================= Standard large phones keep the existing look. These rules only change layouts that become too dense on genuinely narrow viewports. */ .tx-filters{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none} .tx-filters .tf{flex:0 0 auto;white-space:nowrap} @media(max-width:339px){ .auth-wrap{padding-left:0;padding-right:0} .auth-hero{margin-top:18px;margin-bottom:24px} .auth-hero img{width:78px;height:78px;border-radius:23px} .auth-btn{gap:11px;padding:14px} .section-title{margin-top:22px;margin-bottom:10px} .profile-card::after{width:150px;height:150px} .profile-card::before{width:120px;height:120px} .qa .qic{width:42px;height:42px;margin-bottom:10px} .qa .qt{font-size:.88rem} .qa .qs{font-size:.7rem} .service{gap:6px;min-width:0} .service .sic{border-radius:15px;font-size:1.08rem} .service .soon{top:3px;right:3px;padding:2px 4px;font-size:0.64rem} .service span{font-size:0.672rem;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .wallet-hero .amt{font-size:2rem} .wallet-sub .ws .k{font-size:0.676rem} .wallet-sub .ws .v{font-size:.86rem;overflow-wrap:anywhere} .set-row .sic{width:38px;height:38px;border-radius:11px} .set-row .st{font-size:.87rem} .set-row .ss{font-size:.7rem;line-height:1.35} .set-row>div:nth-child(2){min-width:0;flex:1} .set-row .chev{flex:none} /* Home layout 1 */ .home-earn-hero{border-radius:24px} .heh-profile-user{gap:10px;padding-right:43px} .heh-profile .pc-avatar{width:49px;height:49px;flex-basis:49px} .heh-profile .pc-name{font-size:.92rem} .heh-profile .pc-id{font-size:0.684rem} .heh-profile .complete-pill{padding:3px 7px;font-size:0.662rem} .heh-layout-edit{width:34px;height:34px;border-radius:11px} .heh-row{margin:13px 0 15px} .heh-row b{font-size:1.64rem} .heh-orb{width:50px;height:50px;border-radius:17px;font-size:1.12rem} .heh-actions{grid-template-columns:minmax(0,1.28fr) minmax(92px,.86fr);gap:7px} .heh-actions button{min-height:58px;border-radius:15px} .heh-earn{gap:7px;padding:8px} .heh-earn>i:first-child{width:32px;height:32px;border-radius:10px} .heh-earn b,.heh-withdraw b{font-size:.69rem} .heh-earn small,.heh-withdraw small{font-size:0.654rem} .heh-withdraw{gap:6px;padding:8px 5px} .home-earn-secondary .home-tile{min-height:90px;padding:9px 3px;border-radius:17px} .home-earn-secondary .ht-icon{width:36px;height:36px;border-radius:12px;margin-bottom:7px} .home-earn-secondary .home-tile b{font-size:.72rem} .home-earn-secondary .home-tile small{font-size:0.658rem} .home-shortcut-pills{gap:6px} .home-shortcut-pills button{padding:10px 6px;font-size:0.676rem} /* Dense optional home layouts reflow instead of compressing their text. */ .home-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .home-pro-links{grid-template-columns:1fr} .home-pro-links>button,.home-layout-10 .home-pro-links>button{min-height:52px} .home-reward-mini{gap:5px} .home-reward-mini button{padding-left:4px;padding-right:4px;font-size:0.668rem} .home-finance-card,.home-rewards-panel,.home-activity-card{border-radius:23px} .home-layout-picker{grid-template-columns:1fr 1fr} .tx-date-grid{grid-template-columns:1fr} .tx-filter-line{align-items:flex-start} } @media(max-width:319px){ .home-layout-picker{grid-template-columns:1fr} .wallet-sub{flex-direction:column} } /* ================= 384 REFERENCE · TINY PHONE SAFETY ================= */ @media(max-width:339px){ .home-triple-actions,.home-all-actions{grid-template-columns:repeat(2,minmax(0,1fr))} .home-triple-actions .home-tile,.home-all-actions .home-tile{min-height:88px} .home-pro-actions{grid-template-columns:repeat(2,minmax(0,1fr))} .home-pro-actions>button:nth-child(2){border-right:0} .home-pro-actions>button:nth-child(-n+2){border-bottom:1px solid var(--border)} .home-layout-picker{grid-template-columns:1fr} } /* ================= v2026.09.13.47 · PAGE READABILITY ================= */ .set-row .ss{font-size:.75rem;line-height:1.45} .settings-policy-links button{font-size:.74rem}.settings-policy-links span{font-size:0.686rem} .profile-crop-hint,.email-otp-delivery-note{font-size:.72rem}.email-otp-delivery-note b{font-size:.75rem} .tx-search-field>span,.tx-date-field>span,.tx-state-loader small,.tx-result-found small,.tx-state-empty>small{font-size:.7rem} .wallet-recent-head button{font-size:.75rem} .qa .qs,.service span,.heh-profile .pc-id,.heh-earn small,.heh-withdraw small,.home-earn-secondary .home-tile small,.home-earn-history small,.hrp-top span,.hrp-balance span,.hac-copy>span,.hac-copy small,.home-activity-primary .ha-copy small,.home-activity-grid small,.home-pro-balance>span,.home-pro-actions small,.home-pro-links small,.home-pro-balance-copy>span,.home-pro-balance-copy>small,.home-layout-10 .home-pro-actions small,.home-layout-10 .home-pro-links small{font-size:.7rem} .home-activity-grid b,.home-pro-actions b,.home-pro-links b,.home-layout-10 .home-pro-actions b,.home-layout-10 .home-pro-links b{font-size:.73rem} @media(max-width:339px){.set-row .ss{font-size:.72rem}.service span,.heh-earn small,.heh-withdraw small,.home-earn-secondary .home-tile small,.home-shortcut-pills button,.home-reward-mini button{font-size:0.686rem}} /* ---- earn.css ---- */ /* ================= EARN / COIN WALLET ================= */ .earn-page{padding-top:18px;padding-bottom:10px}.earn-page>*{animation:earnRise .34s var(--ease) both}@keyframes earnRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .coin-wallet-card{position:relative;isolation:isolate;overflow:hidden;margin-bottom:20px;padding:clamp(16px,4.85vw,20px) clamp(15px,4.61vw,19px) 17px;border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 95%,#171a31),color-mix(in srgb,var(--primary-dark) 87%,#121625));color:#fff;box-shadow:0 22px 45px -29px var(--primary)} .coin-wallet-orbit{position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.11);border-radius:50%;pointer-events:none}.coin-wallet-orbit-a{width:185px;height:185px;right:-84px;top:-86px;box-shadow:inset 0 0 55px rgba(255,255,255,.055)}.coin-wallet-orbit-b{width:105px;height:105px;right:-25px;top:-27px;background:rgba(255,255,255,.045)} .coin-wallet-card-top,.coin-wallet-balance-row,.coin-wallet-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.coin-rate-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.13);font-size:0.654rem;font-weight:800;backdrop-filter:blur(7px)}.coin-wallet-worth{font-size:0.654rem;opacity:.72}.coin-wallet-worth b{font-size:0.686rem;margin-left:3px;color:#fff;opacity:1} .coin-wallet-balance-row{justify-content:flex-start;margin-top:25px;gap:12px}.coin-wallet-symbol{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);font-size:1rem;flex:none}.coin-wallet-balance{display:flex;align-items:baseline;gap:8px;min-width:0}.coin-wallet-balance strong{font-size:2.9rem;line-height:.95;font-weight:850;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap}.coin-wallet-balance span{font-size:0.664rem;letter-spacing:.12em;font-weight:850;opacity:.68} .coin-wallet-foot{margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15)}.coin-wallet-main{display:flex;flex-direction:column;gap:3px}.coin-wallet-main span{font-size:0.666rem;opacity:.68}.coin-wallet-main b{font-size:.84rem;font-weight:850}.coin-withdraw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:0 15px;border-radius:12px;background:#fff;color:color-mix(in srgb,var(--primary-dark) 88%,#111827);font-family:inherit;font-size:0.674rem;font-weight:900;box-shadow:0 8px 18px -14px rgba(0,0,0,.45);transition:transform .16s var(--ease)}.coin-withdraw-btn:active{transform:scale(.96)} .earn-options-head{margin:0 2px 10px}.earn-options-head>div{display:flex;flex-direction:column}.earn-options-head b{font-size:.84rem;font-weight:900}.earn-options-head small{margin-top:2px;font-size:0.666rem;color:var(--text-muted)} .earn-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}.earn-tile{position:relative;min-width:0;min-height:90px;padding:12px;border-radius:17px;background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 8%,var(--border));box-shadow:0 10px 24px -28px var(--text);color:var(--text);display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:9px;text-align:left;opacity:1!important;-webkit-text-fill-color:currentColor;transition:transform .16s var(--ease),border-color .2s,box-shadow .2s}.earn-tile.is-live{cursor:pointer}.earn-tile.is-live:active{transform:scale(.97)}.earn-tile.is-live:hover{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:0 15px 30px -28px var(--primary)}.earn-tile-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary);font-size:.88rem}.earn-tile-copy{display:flex;flex-direction:column;min-width:0;padding-right:30px}.earn-tile-copy b{font-size:0.686rem;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.earn-tile-copy small{margin-top:3px;font-size:0.65rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.earn-tile-meta{position:absolute;right:8px;top:8px;padding:4px 5px;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:0.626rem;font-weight:950;line-height:1;white-space:nowrap}.earn-tile-meta.done{background:var(--success-soft);color:var(--success)}.earn-tile-meta.soon{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:0.626rem;letter-spacing:.04em}.earn-tile-more .earn-tile-icon{background:var(--surface-2);border-color:var(--border);color:var(--text-muted)} .earn-record-shell{margin-bottom:4px}.earn-record-item{cursor:pointer}.earn-record-amount.credit{color:var(--success)}.earn-record-amount.debit{color:var(--info)}.earn-record-amount{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.earn-record-amount b{font-size:.72rem}.earn-record-amount small{font-size:0.646rem;color:var(--text-muted);font-weight:650}.earn-record-shell .af-history-action.icon{pointer-events:none} /* ================= DAILY CHECK-IN — open sheet ================= */ .sheet.earn-checkin-shell{max-height:calc(100dvh - 18px);border-radius:30px 30px 0 0}.sheet.earn-checkin-shell .sheet-head{padding:9px 20px 15px}.sheet.earn-checkin-shell .sheet-head h3{font-size:1.08rem;font-weight:850}.sheet.earn-checkin-shell .sheet-body{padding:2px 18px 30px}.checkin-sheet{display:flex;flex-direction:column;gap:17px;padding-bottom:5px} .checkin-overview{display:flex;align-items:stretch;justify-content:space-between;gap:12px;padding:19px 18px;border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border))}.checkin-overview-main{min-width:0;display:flex;align-items:flex-end;gap:6px}.checkin-overview-main>div{display:flex;flex-direction:column}.checkin-overview-main span{font-size:0.646rem;letter-spacing:.12em;font-weight:900;color:var(--text-muted)}.checkin-overview-main strong{margin-top:6px;font-size:2.25rem;line-height:.9;font-weight:900;letter-spacing:-.06em}.checkin-overview-main b{padding-bottom:2px;font-size:0.666rem;color:var(--text-muted)}.checkin-overview-side{display:flex;flex-direction:column;justify-content:center;text-align:right;gap:8px}.checkin-overview-side span{font-size:0.646rem;color:var(--text-muted)}.checkin-overview-side b{display:block;margin-top:1px;font-size:0.678rem} .checkin-today-card{position:relative;padding:19px 18px;border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.checkin-today-card.done{background:linear-gradient(145deg,color-mix(in srgb,var(--success) 7%,var(--surface)),var(--surface))}.checkin-kicker{font-size:0.644rem;letter-spacing:.12em;font-weight:900;color:var(--primary)}.checkin-today-copy h4{margin:7px 0 5px;font-size:1rem;font-weight:900}.checkin-today-copy p{max-width:290px;margin:0;color:var(--text-muted);font-size:0.672rem;line-height:1.55}.checkin-reward-chip{display:inline-flex;align-items:center;gap:6px;margin-top:13px;padding:7px 9px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:0.662rem;font-weight:900}.checkin-today-card.done .checkin-reward-chip{background:var(--success-soft);color:var(--success)}.checkin-main-btn{width:100%;min-height:48px;margin-top:15px;border-radius:14px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:0.686rem;font-weight:900;box-shadow:0 13px 24px -18px var(--primary);transition:transform .16s var(--ease)}.checkin-main-btn:active:not(:disabled){transform:scale(.985)}.checkin-main-btn.done{background:var(--success-soft);color:var(--success);box-shadow:none}.checkin-main-btn .ld,.coin-withdraw-submit .ld{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .72s linear infinite} .checkin-block{padding:18px 16px;border-radius:22px;background:var(--surface);border:1px solid var(--border)}.checkin-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.checkin-block-head>div{display:flex;flex-direction:column}.checkin-block-head b{font-size:.78rem;font-weight:900}.checkin-block-head small{margin-top:3px;font-size:0.656rem;line-height:1.45;color:var(--text-muted)}.checkin-block-head>i{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.75rem;flex:none} .checkin-milestones{display:flex;flex-direction:column;gap:10px}.checkin-milestone{position:relative;overflow:hidden;padding:14px;border-radius:16px;background:color-mix(in srgb,var(--primary) 3%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 10%,var(--border))}.checkin-milestone:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:color-mix(in srgb,var(--primary) 45%,transparent)}.checkin-milestone.complete{background:color-mix(in srgb,var(--success) 6%,var(--surface));border-color:color-mix(in srgb,var(--success) 24%,var(--border))}.checkin-milestone.complete:before{background:var(--success)}.checkin-milestone-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.checkin-milestone-copy{display:flex;align-items:center;gap:10px;min-width:0}.checkin-milestone-medal{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--primary);font-size:.7rem;flex:none}.checkin-milestone-copy>div{display:flex;flex-direction:column}.checkin-milestone-copy span{font-size:0.642rem;letter-spacing:.08em;font-weight:900;color:var(--text-muted)}.checkin-milestone-copy b{margin-top:2px;font-size:0.684rem;font-weight:900}.checkin-milestone-count{font-size:.72rem;font-weight:900}.checkin-milestone-count small{font-size:0.646rem;color:var(--text-muted)}.checkin-progress{height:6px;margin-top:12px;border-radius:999px;background:var(--surface);overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.checkin-progress span{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .55s var(--ease)}.checkin-milestone.complete .checkin-progress span{background:var(--success)}.checkin-milestone-foot{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:0.646rem;color:var(--text-muted)}.checkin-milestone-foot b{font-size:0.646rem;color:var(--text)} .checkin-history{display:flex;flex-direction:column}.checkin-history-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 1px;border-bottom:1px solid var(--border)}.checkin-history-row:last-child{border-bottom:0}.checkin-history-day{width:38px;height:38px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border)}.checkin-history-day span{font-size:0.625rem;color:var(--text-muted);font-weight:900}.checkin-history-day b{font-size:0.684rem}.checkin-history-copy{display:flex;flex-direction:column;min-width:0}.checkin-history-copy b{font-size:0.678rem}.checkin-history-copy small{margin-top:2px;font-size:0.646rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.checkin-history-amount{text-align:right}.checkin-history-amount b{font-size:0.672rem;color:var(--success)}.checkin-history-amount small{display:block;margin-top:2px;font-size:0.636rem;color:var(--text-muted)}.checkin-history-amount.legacy b{color:var(--text)}.checkin-empty{min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;color:var(--text-muted);font-size:0.666rem}.checkin-empty i{font-size:1.1rem;color:var(--primary)} /* ================= COIN WITHDRAW / RECORD DETAIL ================= */ .coin-withdraw-sheet,.coin-record-detail{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}.coin-withdraw-summary{padding:18px;border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));display:flex;flex-direction:column}.coin-withdraw-summary span{font-size:0.654rem;color:var(--text-muted)}.coin-withdraw-summary b{margin-top:5px;font-size:1.65rem;letter-spacing:-.04em}.coin-withdraw-summary b small{font-size:0.654rem;letter-spacing:.08em;color:var(--text-muted)}.coin-withdraw-summary em{margin-top:4px;font-style:normal;font-size:0.666rem;color:var(--text-muted)}.coin-withdraw-field{display:flex;flex-direction:column;gap:7px}.coin-withdraw-field>span{font-size:0.668rem;font-weight:800}.coin-withdraw-input-wrap{position:relative;width:100%;min-width:0}.coin-withdraw-input-wrap .coin-withdraw-input{width:100%;height:auto;min-height:51px;margin:0;padding:15px 70px 15px 16px;border-radius:15px;border:1.5px solid var(--border)!important;background:var(--surface)!important;color:var(--text)!important;-webkit-text-fill-color:var(--text);font-family:inherit;font-size:.78rem;font-weight:700;line-height:1.2;box-shadow:none!important;outline:none!important;transition:border-color .2s,box-shadow .2s}.coin-withdraw-input-wrap .coin-withdraw-input:focus{border-color:var(--primary)!important;box-shadow:0 0 0 4px var(--primary-soft)!important}.coin-withdraw-input-wrap .coin-withdraw-input::placeholder{color:var(--text-muted);opacity:.62}.coin-withdraw-all{position:absolute;right:9px;top:50%;transform:translateY(-50%);min-width:48px;height:33px;padding:0 10px;border:0;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-family:inherit;font-size:0.65rem;font-weight:900}.coin-conversion-row{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--border)}.coin-conversion-row span{font-size:0.668rem;color:var(--text-muted)}.coin-conversion-row b{font-size:.78rem}.coin-withdraw-rate{display:flex;align-items:flex-start;gap:7px;padding:10px 11px;border-radius:12px;background:var(--surface-2);color:var(--text-muted);font-size:0.654rem;line-height:1.45}.coin-withdraw-rate i{margin-top:1px;color:var(--primary)}.coin-withdraw-submit{min-height:48px}.coin-record-hero{padding:18px;border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 17%,var(--border));text-align:center}.coin-record-hero span{font-size:0.65rem;color:var(--text-muted)}.coin-record-hero strong{display:block;margin-top:4px;font-size:1.65rem;letter-spacing:-.04em}.coin-record-hero.credit strong{color:var(--success)}.coin-record-hero.debit strong{color:var(--info)}.coin-record-detail-list{border:1px solid var(--border);border-radius:17px;overflow:hidden}.coin-record-detail-row{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:11px 13px;border-bottom:1px solid var(--border)}.coin-record-detail-row:last-child{border-bottom:0}.coin-record-detail-row span{font-size:0.658rem;color:var(--text-muted)}.coin-record-detail-row b{max-width:65%;text-align:right;font-size:0.664rem;overflow-wrap:anywhere} [data-theme="dark"] .earn-tile{background:color-mix(in srgb,var(--primary) 2.5%,var(--surface))} @media(max-width:390px){.coin-wallet-balance strong{font-size:2.55rem}.coin-wallet-symbol{width:42px;height:42px}.earn-tile-grid{gap:8px}.earn-tile{padding:10px;grid-template-columns:37px minmax(0,1fr)}.earn-tile-icon{width:37px;height:37px}.checkin-overview{padding:17px 15px}.checkin-block{padding:16px 13px}} /* ================= PHASE 29 CHECK-IN POLISH ================= */ /* Current streak: vertically centered and number/label kept together. */ .checkin-overview-main{align-self:stretch;justify-content:center;align-items:flex-start;flex-direction:column;gap:5px} .checkin-overview-main>span{font-size:0.646rem;letter-spacing:.12em;font-weight:900;color:var(--text-muted)} .checkin-streak-value{display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:5px!important;line-height:1} .checkin-streak-value strong{margin:0!important;font-size:2.25rem;line-height:.92;font-weight:900;letter-spacing:-.06em} .checkin-streak-value b{padding:0!important;margin:0;font-size:0.666rem;color:var(--text-muted);font-weight:750} /* Restore the earlier minimal milestone rows instead of boxed/generated-looking cards. */ .checkin-milestones{display:flex;flex-direction:column;gap:0} .checkin-milestone{position:relative;overflow:visible;padding:13px 0 2px;border:0;border-top:1px solid var(--border);border-radius:0;background:transparent} .checkin-milestone:first-child{padding-top:0;border-top:0} .checkin-milestone:before{display:none!important} .checkin-milestone.complete{background:transparent;border-color:var(--border)} .checkin-milestone-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .checkin-milestone-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0} .checkin-milestone-copy span{font-size:0.636rem;letter-spacing:.09em;font-weight:900;color:var(--text-muted)} .checkin-milestone-copy b{margin-top:3px;font-size:0.68rem;font-weight:850} .checkin-milestone-top>strong{font-size:.72rem;font-weight:950;color:var(--primary);font-variant-numeric:tabular-nums} .checkin-milestone-top>strong small{font-size:0.646rem;color:var(--text-muted);font-weight:750} .checkin-milestone .checkin-progress{height:6px;margin-top:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:0} .checkin-milestone .checkin-progress>span{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .55s var(--ease)} .checkin-milestone-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px} .checkin-milestone-foot span,.checkin-milestone-foot b{font-size:0.64rem;color:var(--text-muted)} .checkin-milestone-foot b{font-weight:850} .checkin-milestone.complete .checkin-milestone-copy span,.checkin-milestone.complete .checkin-milestone-top>strong{color:var(--success)} .checkin-milestone.complete .checkin-progress>span{background:var(--success)} .checkin-milestone-earned{display:inline-flex;align-items:center;gap:5px;margin-top:7px;color:var(--success);font-size:0.646rem;font-weight:850} .checkin-milestone-earned i{font-size:0.65rem} /* Milestone reward history is intentionally separate from daily Check-in history. */ .milestone-history{display:flex;flex-direction:column} .milestone-history-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 1px;border-bottom:1px solid var(--border)} .milestone-history-row:last-child{border-bottom:0} .milestone-history-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.686rem} .milestone-history-copy{display:flex;flex-direction:column;min-width:0} .milestone-history-copy b{font-size:0.674rem;font-weight:850} .milestone-history-copy small{margin-top:3px;font-size:0.644rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .milestone-history-row>strong{font-size:0.67rem;color:var(--success);white-space:nowrap} .milestone-history-empty{min-height:105px} /* Coin record rows: only a plain chevron, no boxed action icon. */ .earn-record-amount{position:relative;padding-right:15px} .earn-record-chevron{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:0.658rem;color:var(--text-muted);opacity:.8} /* Withdraw input reset: prevents inherited form/button styles from collapsing the field. */ /* Record detail opens immediately; only its own content skeleton loads on cache miss. */ .coin-record-detail-host{min-height:170px} .coin-record-detail-loading{gap:14px} .coin-record-skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:12px} .coin-record-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 7%,transparent),transparent);animation:coinSkeleton 1.05s infinite} .coin-record-skeleton.hero{height:88px;border-radius:20px} .coin-record-detail-loading .coin-record-detail-list{padding:4px 12px} .coin-record-skeleton.row{height:36px;margin:7px 0} @keyframes coinSkeleton{100%{transform:translateX(100%)}} /* ================= PHASE 30 · SPIN & EARN ================= */ .sheet.earn-spin-shell{max-height:calc(100dvh - 12px);border-radius:30px 30px 0 0;overflow:hidden} .sheet.earn-spin-shell .sheet-head{padding:9px 20px 13px} .sheet.earn-spin-shell .sheet-head h3{font-size:1.08rem;font-weight:900;letter-spacing:-.02em} .sheet.earn-spin-shell .sheet-body{padding:2px 18px 34px;overscroll-behavior:contain} .spin-earn-sheet{display:flex;flex-direction:column;gap:20px;padding:0 0 6px} .spin-sheet-intro{padding:16px 17px 14px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)} .spin-sheet-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px} .spin-sheet-stats>div{display:flex;flex-direction:column;min-width:0} .spin-sheet-stats>div+div{padding-left:14px;border-left:1px solid var(--border)} .spin-sheet-stats span{font-size:0.636rem;letter-spacing:.12em;font-weight:900;color:var(--text-muted)} .spin-sheet-stats strong{margin-top:5px;font-size:1.22rem;line-height:1;font-weight:950;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .spin-sheet-stats strong small{font-size:0.64rem;letter-spacing:.05em;color:var(--text-muted);font-weight:850} .spin-limit-track{height:5px;margin-top:14px;border-radius:999px;background:var(--surface-2);overflow:hidden} .spin-limit-track>span{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .45s var(--ease)} .spin-limit-copy{display:block;margin-top:6px;font-size:0.64rem;color:var(--text-muted);font-weight:700;text-align:right} .spin-stage{position:relative;display:grid;place-items:center;min-height:330px;padding:11px 0 3px;isolation:isolate} .spin-wheel-halo{position:absolute;width:292px;height:292px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 18%,transparent) 0 54%,transparent 72%);filter:blur(14px);opacity:.72;z-index:-1} .spin-wheel-frame{position:relative;width:294px;height:294px;padding:9px;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 78%,#fff),color-mix(in srgb,var(--primary) 72%,#000));box-shadow:0 22px 48px -28px color-mix(in srgb,var(--primary) 75%,transparent),inset 0 0 0 1px rgba(255,255,255,.45)} .spin-wheel-frame:after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(255,255,255,.34);pointer-events:none} .spin-wheel{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;transform-origin:50% 50%;will-change:transform;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)} .spin-wheel.is-spinning{transition:transform 4.8s cubic-bezier(.12,.72,.08,1)} .spin-wheel-slices{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -22.5deg, color-mix(in srgb,var(--primary) 94%,#fff) 0deg 45deg, color-mix(in srgb,var(--primary) 74%,#111) 45deg 90deg, color-mix(in srgb,var(--primary) 86%,#fff) 90deg 135deg, color-mix(in srgb,var(--primary) 69%,#111) 135deg 180deg, color-mix(in srgb,var(--primary) 92%,#fff) 180deg 225deg, color-mix(in srgb,var(--primary) 72%,#111) 225deg 270deg, color-mix(in srgb,var(--primary) 84%,#fff) 270deg 315deg, color-mix(in srgb,var(--primary) 66%,#111) 315deg 360deg)} .spin-wheel-slices:after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -22.5deg,rgba(255,255,255,.30) 0deg 1deg,transparent 1deg 45deg);mix-blend-mode:screen;opacity:.55} .spin-wheel-label{position:absolute;left:50%;top:50%;width:66px;margin-left:-33px;margin-top:-20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28);transform:rotate(var(--slot-angle)) translateY(-105px) rotate(var(--slot-counter));transform-origin:33px 20px;z-index:2;pointer-events:none} .spin-wheel-label b{font-size:.79rem;line-height:1;font-weight:950;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .spin-wheel-label small{font-size:0.625rem;line-height:1.2;letter-spacing:.09em;font-weight:900;opacity:.92} .spin-wheel-center{position:absolute;left:50%;top:50%;width:82px;height:82px;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:var(--surface);border:6px solid color-mix(in srgb,var(--primary) 72%,#fff);box-shadow:0 8px 20px rgba(0,0,0,.20),inset 0 0 0 1px var(--border);z-index:6;pointer-events:none} .spin-wheel-center img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scale(1.16);transform-origin:center} .spin-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 8%,var(--surface)));border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:0 10px 22px -13px rgba(0,0,0,.48),0 0 0 4px color-mix(in srgb,var(--surface) 74%,transparent);z-index:8} .spin-pointer:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--primary) 35%,#fff)} .spin-pointer:after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:14px;height:14px;background:var(--primary);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))} .spin-pointer span{position:absolute;bottom:-1px;left:50%;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);background:var(--primary);z-index:-1} .spin-action-zone{display:flex;flex-direction:column;gap:10px} .spin-primary-btn{width:100%;min-height:54px;border:0;border-radius:16px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--grad);color:#fff;font-family:inherit;font-size:.7rem;font-weight:900;box-shadow:0 15px 28px -20px color-mix(in srgb,var(--primary) 85%,transparent);transition:transform .16s var(--ease),opacity .16s var(--ease)} .spin-primary-btn:active:not(:disabled){transform:scale(.985)} .spin-primary-btn.is-waiting{background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary);box-shadow:none;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border))} .spin-primary-btn.is-done{background:var(--success-soft);color:var(--success);box-shadow:none;opacity:1} .spin-countdown-ring{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid color-mix(in srgb,var(--primary) 35%,var(--border))} .spin-countdown-ring b{font-size:0.666rem;font-variant-numeric:tabular-nums} .spin-action-note{margin:0;padding:0 7px;text-align:center;color:var(--text-muted);font-size:0.656rem;line-height:1.55} .spin-action-note.is-ready{color:var(--success);font-weight:750} .spin-action-note.is-ready i{margin-right:4px} .spin-ad-unlock{display:flex;flex-direction:column;align-items:center;gap:15px;padding:4px 0 3px} .spin-ad-copy{width:100%;text-align:center;padding:0 14px} .spin-ad-copy>span{display:block;font-size:0.634rem;line-height:1;letter-spacing:.16em;font-weight:950;color:var(--primary)} .spin-ad-copy>b{display:block;margin-top:7px;font-size:.83rem;line-height:1.15;font-weight:950;letter-spacing:-.025em;color:var(--text)} .spin-ad-copy>p{max-width:310px;margin:7px auto 0;font-size:0.656rem;line-height:1.6;color:var(--text-muted)} .spin-ad-copy strong{color:var(--text);font-weight:900} .spin-ad-banner-wrap{position:relative;width:100%;padding:25px 12px 14px;border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));box-shadow:0 20px 36px -30px rgba(0,0,0,.4);overflow:hidden} .spin-ad-label{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:0.625rem;letter-spacing:.13em;font-weight:900;color:var(--text-muted);opacity:.78} .spin-ad-banner-list{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%} .spin-ad-banner{position:relative;width:100%;display:block;overflow:hidden;background:transparent;text-align:center} .spin-ad-frame{position:absolute;top:0;left:50%;display:block;border:0;background:transparent;translate:-50% 0} .spin-ad-or{display:flex;align-items:center;gap:10px;width:min(240px,78%);color:var(--text-muted)} .spin-ad-or:before,.spin-ad-or:after{content:"";height:1px;flex:1;background:var(--border)} .spin-ad-or span{font-size:0.625rem;line-height:1;letter-spacing:.12em;font-weight:900} .spin-ad-hint{display:flex;align-items:center;justify-content:center;min-height:31px;padding:0 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:0.646rem;font-weight:800;text-align:center} .spin-btn-loader{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;animation:spin .72s linear infinite} .spin-win-card{position:relative;overflow:hidden;padding:19px 16px 17px;border-radius:19px;text-align:center;background:linear-gradient(145deg,color-mix(in srgb,var(--success) 10%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--success) 25%,var(--border))} .spin-win-card:before{content:"";position:absolute;left:50%;top:-48px;width:160px;height:90px;transform:translateX(-50%);border-radius:50%;background:color-mix(in srgb,var(--success) 13%,transparent);filter:blur(18px)} .spin-win-kicker{position:relative;font-size:0.636rem;letter-spacing:.16em;font-weight:950;color:var(--success)} .spin-win-card strong{position:relative;display:block;margin-top:5px;color:var(--success);font-size:1.72rem;line-height:1;font-weight:950;letter-spacing:-.05em} .spin-win-card strong small{font-size:0.644rem;letter-spacing:.08em;font-weight:900} .spin-win-card p{position:relative;margin:6px 0 0;color:var(--text-muted);font-size:0.654rem} .spin-next-btn{min-height:43px;border-radius:13px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:0.672rem;font-weight:850} .spin-rules{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden} .spin-rules>div{display:grid;grid-template-columns:28px 1fr;align-items:start;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border)} .spin-rules>div:last-child{border-bottom:0} .spin-rules i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.666rem} .spin-rules span{padding-top:5px;color:var(--text-muted);font-size:0.654rem;line-height:1.48} .spin-rules b{color:var(--text);font-weight:850} .spin-history-block{padding:16px 15px 7px;border-radius:20px;background:var(--surface);border:1px solid var(--border)} .spin-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 1px 9px} .spin-history-head>div{display:flex;flex-direction:column} .spin-history-head b{font-size:.69rem;font-weight:900} .spin-history-head small{margin-top:3px;color:var(--text-muted);font-size:0.644rem} .spin-history-head>span{font-size:0.626rem;letter-spacing:.09em;color:var(--primary);font-weight:900} .spin-history-list{display:flex;flex-direction:column} .spin-history-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 1px;border-top:1px solid var(--border)} .spin-history-row>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.684rem} .spin-history-row>div{display:flex;flex-direction:column;min-width:0} .spin-history-row b{font-size:0.674rem;color:var(--success);font-weight:900} .spin-history-row small{margin-top:2px;color:var(--text-muted);font-size:0.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .spin-history-row em{font-style:normal;font-size:0.634rem;color:var(--text-muted)} .spin-history-empty{min-height:88px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:0.654rem;text-align:center} .spin-history-empty i{color:var(--primary)} @media(max-width:390px){ .sheet.earn-spin-shell .sheet-body{padding-left:14px;padding-right:14px} .spin-stage{min-height:300px} .spin-wheel-halo{width:270px;height:270px} .spin-wheel-frame{width:270px;height:270px} .spin-wheel-label{transform:rotate(var(--slot-angle)) translateY(-96px) rotate(var(--slot-counter))} } @media(max-width:339px){ .spin-wheel-halo{width:246px;height:246px}.spin-wheel-frame{width:246px;height:246px}.spin-stage{min-height:278px} .spin-wheel-label{transform:rotate(var(--slot-angle)) translateY(-85px) rotate(var(--slot-counter));width:60px;margin-left:-30px} .spin-wheel-label b{font-size:.7rem}.spin-wheel-center{width:74px;height:74px} } /* ================= Phase 32 — Free Lifafa ================= */ .sheet.earn-free-lifafa-shell{max-height:calc(100dvh - 14px);border-radius:30px 30px 0 0;overflow:hidden} .sheet.earn-free-lifafa-shell .sheet-head{padding:9px 20px 14px} .sheet.earn-free-lifafa-shell .sheet-head h3{font-size:1.08rem;font-weight:900;letter-spacing:-.02em} .sheet.earn-free-lifafa-shell .sheet-body{padding:3px 18px 36px;overscroll-behavior:contain} .free-lifafa-sheet{display:flex;flex-direction:column;gap:20px;padding-bottom:5px} .free-lf-intro{position:relative;overflow:hidden;padding:24px 22px 20px;border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 11%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));box-shadow:0 18px 42px -36px rgba(0,0,0,.45)} .free-lf-intro:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-78px;top:-88px;background:color-mix(in srgb,var(--primary) 12%,transparent);filter:blur(4px);pointer-events:none} .free-lf-kicker{position:relative;z-index:1;display:block;font-size:0.628rem;line-height:1;letter-spacing:.18em;font-weight:950;color:var(--primary)} .free-lf-intro h3{position:relative;z-index:1;margin:8px 0 0;font-size:1.02rem;line-height:1.17;font-weight:950;letter-spacing:-.035em;color:var(--text)} .free-lf-intro p{position:relative;z-index:1;max-width:430px;margin:8px 0 0;font-size:0.658rem;line-height:1.65;color:var(--text-muted)} .free-lf-summary{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;margin-top:19px;border-top:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));padding-top:15px} .free-lf-summary>div{display:flex;align-items:baseline;gap:7px;min-width:0} .free-lf-summary>div+div{padding-left:17px;border-left:1px solid var(--border)} .free-lf-summary b{font-size:1rem;line-height:1;font-weight:950;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums} .free-lf-summary span{font-size:0.636rem;color:var(--text-muted);font-weight:750} .free-lf-list-block{display:flex;flex-direction:column;gap:10px} .free-lf-list-block.claimed{padding-top:3px} .free-lf-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:0 3px} .free-lf-section-head>div{display:flex;flex-direction:column;gap:3px;min-width:0} .free-lf-section-head b{font-size:.72rem;font-weight:900;letter-spacing:-.015em;color:var(--text)} .free-lf-section-head small{font-size:0.64rem;color:var(--text-muted)} .free-lf-section-head>span{min-width:28px;height:23px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.636rem;font-weight:900} .free-lf-list{display:flex;flex-direction:column;gap:11px} .free-lf-card{position:relative;padding:16px 15px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 34px -34px rgba(0,0,0,.55);transition:border-color .18s var(--ease),transform .18s var(--ease)} .free-lf-card:active{transform:scale(.995)} .free-lf-card.is-claimed{background:color-mix(in srgb,var(--surface-2) 34%,var(--surface));opacity:.92} .free-lf-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .free-lf-type{display:inline-flex;align-items:center;gap:7px;color:var(--text-muted);font-size:0.634rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em} .free-lf-type i{color:var(--primary);font-size:0.656rem} .free-lf-live{display:inline-flex;align-items:center;gap:6px;font-size:0.634rem;font-weight:850;color:var(--success)} .free-lf-live i{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 11%,transparent)} .free-lf-claimed-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--success-soft);color:var(--success);font-size:0.628rem;font-weight:900} .free-lf-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;margin-top:13px} .free-lf-copy{min-width:0} .free-lf-copy h4{margin:0;font-size:.76rem;line-height:1.25;font-weight:900;letter-spacing:-.02em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .free-lf-copy p{margin:5px 0 0;font-size:0.646rem;line-height:1.48;color:var(--text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .free-lf-amount{text-align:right;display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto} .free-lf-amount small{font-size:0.625rem;letter-spacing:.14em;font-weight:950;color:var(--text-muted)} .free-lf-amount strong{margin-top:3px;font-size:1.05rem;line-height:1;font-weight:950;letter-spacing:-.04em;color:var(--primary);white-space:nowrap} .free-lf-amount span{margin-top:3px;font-size:0.625rem;color:var(--text-muted)} .free-lf-tasks{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px} .free-lf-task{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 9px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:0.634rem;font-weight:800} .free-lf-task i{font-size:0.662rem} .free-lf-task.telegram i{color:#2aabee}.free-lf-task.youtube i{color:#ff3030} .free-lf-progress{height:4px;margin-top:13px;border-radius:999px;background:var(--surface-2);overflow:hidden} .free-lf-progress>span{display:block;height:100%;border-radius:inherit;background:var(--grad)} .free-lf-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:11px} .free-lf-foot-meta{display:flex;flex-direction:column;gap:2px;min-width:0} .free-lf-foot-meta span{font-size:0.63rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .free-lf-open{min-height:38px;padding:0 12px;border:0;border-radius:12px;background:var(--grad);color:#fff;font-family:inherit;font-size:0.648rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 22px -18px color-mix(in srgb,var(--primary) 80%,transparent)} .free-lf-card.is-claimed .free-lf-open{background:var(--surface-2);border:1px solid var(--border);color:var(--text);box-shadow:none} .free-lf-claimed-line{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border);font-size:0.634rem;color:var(--text-muted)} .free-lf-claimed-line b{color:var(--success);font-weight:900} .free-lf-empty{min-height:180px;padding:28px 22px;border:1px dashed var(--border);border-radius:20px;background:color-mix(in srgb,var(--surface-2) 35%,var(--surface));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .free-lf-empty>div{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.85rem} .free-lf-empty b{margin-top:12px;font-size:0.686rem;font-weight:900;color:var(--text)} .free-lf-empty p{max-width:260px;margin:6px 0 0;font-size:0.644rem;line-height:1.55;color:var(--text-muted)} @media(max-width:390px){ .sheet.earn-free-lifafa-shell .sheet-body{padding-left:14px;padding-right:14px} .free-lf-intro{padding-left:18px;padding-right:18px} .free-lf-main{gap:10px} .free-lf-amount strong{font-size:.96rem} } /* ================= Phase 33 — Free Lifafa compact live list ================= */ .free-lifafa-sheet{gap:15px} .free-lf-intro{padding:20px 20px 18px;border-radius:21px;box-shadow:none} .free-lf-intro h3{font-size:.96rem} .free-lf-intro p{margin-top:7px;font-size:0.652rem;line-height:1.55} .free-lf-list-block{gap:8px} .free-lf-list{gap:9px} .free-lf-section-head{align-items:center;padding:0 2px} .free-lf-section-head>div{gap:2px} .free-lf-section-head b{font-size:.69rem} .free-lf-section-head small{font-size:0.636rem} .free-lf-section-head>span.free-lf-count-badge{height:auto;min-width:0;padding:6px 9px;border-radius:11px;display:flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));color:var(--primary)} .free-lf-count-badge>b{font-size:0.666rem;line-height:1;font-weight:950;color:inherit} .free-lf-count-badge>small{font-size:0.625rem;line-height:1;letter-spacing:.08em;font-weight:950;color:inherit} .free-lf-count-badge.muted{background:var(--surface-2);border-color:var(--border);color:var(--text-muted)} .free-lf-card{padding:13px;border-radius:17px;box-shadow:none} .free-lf-card.is-claimed{opacity:1;background:color-mix(in srgb,var(--surface-2) 42%,var(--surface))} .free-lf-card.is-owner{border-color:color-mix(in srgb,var(--primary) 28%,var(--border))} .free-lf-card-top{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px} .free-lf-type-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:.84rem;flex:none} .free-lf-type-icon.normal{background:linear-gradient(135deg,#7c5cff,#4ac1ff)} .free-lf-type-icon.dice{background:linear-gradient(135deg,#f97316,#ffcf6b)} .free-lf-type-icon.toss{background:linear-gradient(135deg,#12b8c4,#7fe9d8)} .free-lf-type-icon.scratch{background:linear-gradient(135deg,#f43f7a,#ffb3c6)} .free-lf-card-title{min-width:0;display:flex;flex-direction:column;gap:3px} .free-lf-card-title>b{font-size:0.686rem;line-height:1.15;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .free-lf-card-title>small{font-size:0.63rem;line-height:1.2;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .free-lf-amount{align-items:flex-end;min-width:58px} .free-lf-amount strong{margin:0;font-size:.86rem;line-height:1;font-weight:950;color:var(--primary)} .free-lf-amount span{margin-top:3px;font-size:0.625rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800} .free-lf-progress{height:5px;margin-top:11px} .free-lf-compact-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px} .free-lf-mini-meta{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap} .free-lf-mini-meta>span{font-size:0.626rem;color:var(--text-muted);white-space:nowrap} .free-lf-mini-meta>.free-lf-owner-tag{padding:4px 6px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-weight:900} .free-lf-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none} .free-lf-tasks{margin:0;display:flex;align-items:center;gap:5px;flex-wrap:nowrap} .free-lf-task{width:28px;height:28px;min-height:28px;padding:0;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border)} .free-lf-task i{font-size:.72rem} .free-lf-open{min-height:32px;padding:0 10px;border-radius:10px;font-size:0.636rem;gap:6px;box-shadow:none} .free-lf-open i{font-size:0.63rem} .free-lf-card.is-claimed .free-lf-open{min-height:32px} .free-lf-claimed-line{margin-top:9px;padding-top:8px;display:flex;align-items:flex-start;gap:7px;font-size:0.63rem;line-height:1.35} .free-lf-claimed-line>i{margin-top:1px;font-size:0.646rem} .free-lf-claimed-line>span{display:flex;flex-direction:column;gap:2px;min-width:0} .free-lf-claimed-line.win{color:var(--success)} .free-lf-claimed-line.win b{color:var(--success)} .free-lf-claimed-line.lose{color:var(--danger)} .free-lf-claimed-line.lose b{color:var(--danger)} .free-lf-claimed-line small{font-size:0.625rem;color:var(--text-muted)} @media(max-width:390px){ .free-lf-card{padding:12px} .free-lf-card-top{grid-template-columns:36px minmax(0,1fr) auto;gap:8px} .free-lf-type-icon{width:36px;height:36px;border-radius:11px;font-size:.8rem} .free-lf-amount strong{font-size:.8rem} .free-lf-compact-foot{gap:7px} .free-lf-open{padding:0 9px} } /* ================= Phase 34 — Free Lifafa readability + claimed treatment ================= */ .free-lf-kicker{font-size:0.658rem;letter-spacing:.14em} .free-lf-intro p{font-size:.72rem;line-height:1.55} .free-lf-section-head b{font-size:.78rem} .free-lf-section-head small{font-size:0.674rem} .free-lf-count-badge>b{font-size:0.686rem} .free-lf-count-badge>small{font-size:0.646rem;letter-spacing:.075em} .free-lf-card-title>b{font-size:.78rem;line-height:1.2} .free-lf-card-title>small{font-size:0.67rem;line-height:1.3} .free-lf-amount strong{font-size:.94rem} .free-lf-amount span{font-size:0.654rem;letter-spacing:.04em} .free-lf-amount.is-gift{min-width:58px;align-items:center} .free-lf-amount.is-gift strong{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.82rem} .free-lf-mini-meta>span{font-size:0.662rem;line-height:1.3} .free-lf-owner-tag{font-size:0.654rem!important} .free-lf-open{font-size:0.674rem;min-height:34px;padding:0 11px} .free-lf-open i{font-size:0.662rem} .free-lf-claimed-line{font-size:0.674rem;line-height:1.4} .free-lf-claimed-line>i{font-size:0.678rem} .free-lf-claimed-line small{font-size:0.662rem;line-height:1.35} .free-lf-list-block.claimed .free-lf-card.is-claimed{opacity:.72;filter:saturate(.82)} .free-lf-list-block.claimed .free-lf-card.is-claimed:active{opacity:.82} .free-lf-list-block.claimed .free-lf-open{opacity:1} .free-lf-empty b{font-size:.78rem} .free-lf-empty p{font-size:0.678rem;line-height:1.5} @media(max-width:390px){ .free-lf-card-title>b{font-size:.74rem} .free-lf-card-title>small{font-size:0.664rem} .free-lf-mini-meta>span{font-size:0.656rem} .free-lf-open{font-size:0.668rem} } /* ===== Phase 33 — Earn readability + ad loading states ===== */ .coin-rate-pill{font-size:0.678rem}.coin-wallet-worth{font-size:0.678rem}.coin-wallet-worth b{font-size:.8rem}.coin-wallet-balance span{font-size:0.682rem}.coin-wallet-main span{font-size:0.684rem}.coin-wallet-main b{font-size:.9rem}.coin-withdraw-btn{font-size:.7rem} .earn-options-head small{font-size:0.686rem}.earn-tile-copy b{font-size:.75rem}.earn-tile-copy small{font-size:0.674rem}.earn-tile-meta,.earn-tile-meta.soon{font-size:0.646rem}.earn-record-amount small{font-size:0.67rem} .checkin-overview-main span,.checkin-overview-side span{font-size:0.67rem}.checkin-overview-main b{font-size:0.684rem}.checkin-overview-side b{font-size:.72rem}.checkin-kicker{font-size:0.666rem}.checkin-today-copy p{font-size:.7rem}.checkin-reward-chip{font-size:0.678rem}.checkin-main-btn{font-size:.76rem}.checkin-block-head small{font-size:0.678rem}.checkin-milestone-copy span{font-size:0.662rem}.checkin-milestone-copy b{font-size:.72rem}.checkin-milestone-count small{font-size:0.666rem}.checkin-milestone-foot,.checkin-milestone-foot b{font-size:0.666rem} .spin-sheet-stats span{font-size:0.666rem}.spin-sheet-stats strong small{font-size:0.662rem}.spin-limit-copy{font-size:0.666rem}.spin-wheel-label small{font-size:0.63rem}.spin-countdown-ring b{font-size:0.686rem}.spin-action-note{font-size:0.68rem}.spin-ad-copy>span{font-size:0.662rem}.spin-ad-copy>p{font-size:0.682rem}.spin-ad-label{font-size:0.642rem}.spin-ad-or span{font-size:0.646rem}.spin-ad-hint{font-size:0.674rem}.spin-win-kicker{font-size:0.662rem}.spin-win-card strong small{font-size:0.666rem}.spin-win-card p{font-size:0.68rem}.spin-next-btn{font-size:.7rem}.spin-history-head small{font-size:0.67rem}.spin-history-head>span{font-size:0.65rem}.spin-history-row b{font-size:.7rem}.spin-history-row small{font-size:0.666rem}.spin-history-row em{font-size:0.66rem}.spin-history-empty{font-size:0.678rem} .spin-ad-banner{min-height:38px} .spin-ad-loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-2) 88%,var(--primary) 12%),var(--surface));color:var(--text-muted);opacity:1;transition:opacity .2s ease;pointer-events:none} .spin-ad-loading.done{opacity:0} .spin-ad-loading .ui-busy-spin{width:18px;height:18px;flex:none} .spin-ad-loading b{font-size:0.68rem;font-weight:800;color:var(--text-muted)} /* ================= Phase 2026.09.04.4 — Earn readability normalization ================= Keep the dense app layout, but avoid micro-text so the page feels consistent with the rest of FINZO on normal mobile displays. */ .coin-rate-pill{font-size:.7rem} .coin-wallet-worth{font-size:.7rem}.coin-wallet-worth b{font-size:.82rem} .coin-wallet-balance span{font-size:.7rem} .coin-wallet-main span{font-size:.7rem}.coin-wallet-main b{font-size:.94rem} .coin-withdraw-btn{font-size:.76rem} .earn-options-head b{font-size:.94rem}.earn-options-head small{font-size:.72rem;line-height:1.4} .earn-tile{min-height:96px;padding:13px} .earn-tile-copy b{font-size:.82rem}.earn-tile-copy small{font-size:0.686rem;line-height:1.35} .earn-tile-meta,.earn-tile-meta.soon{font-size:0.658rem;padding:5px 6px} .earn-record-amount b{font-size:.78rem}.earn-record-amount small{font-size:0.678rem} /* Check-in sheet */ .checkin-overview-main span,.checkin-overview-side span{font-size:0.682rem} .checkin-overview-main b{font-size:.72rem}.checkin-overview-side b{font-size:.8rem} .checkin-kicker{font-size:0.678rem}.checkin-today-copy p{font-size:.76rem} .checkin-reward-chip{font-size:.7rem}.checkin-main-btn{font-size:.8rem} .checkin-block-head small{font-size:0.686rem} .checkin-milestone-copy span{font-size:0.674rem}.checkin-milestone-copy b{font-size:.78rem} .checkin-milestone-count small{font-size:0.674rem}.checkin-milestone-foot,.checkin-milestone-foot b{font-size:0.674rem} /* Spin & Earn sheet */ .spin-sheet-stats span{font-size:0.678rem}.spin-sheet-stats strong small{font-size:0.674rem} .spin-limit-copy{font-size:0.678rem}.spin-wheel-label small{font-size:0.646rem} .spin-countdown-ring b{font-size:.74rem}.spin-action-note{font-size:.7rem} .spin-ad-copy>span{font-size:0.674rem}.spin-ad-copy>p{font-size:.7rem}.spin-ad-label{font-size:0.65rem} .spin-ad-or span{font-size:0.658rem}.spin-ad-hint{font-size:0.686rem} .spin-win-kicker{font-size:0.674rem}.spin-win-card strong small{font-size:0.678rem}.spin-win-card p{font-size:.7rem} .spin-next-btn{font-size:.75rem}.spin-history-head small{font-size:0.682rem}.spin-history-head>span{font-size:0.662rem} .spin-history-row b{font-size:.76rem}.spin-history-row small{font-size:0.678rem}.spin-history-row em{font-size:0.67rem}.spin-history-empty{font-size:0.686rem} .spin-ad-loading b{font-size:.7rem} /* Free Lifafa sheet — all secondary text stays comfortably readable. */ .free-lf-kicker{font-size:0.674rem;letter-spacing:.13em} .free-lf-intro h3{font-size:1.08rem}.free-lf-intro p{font-size:.76rem;line-height:1.55} .free-lf-summary span{font-size:0.674rem}.free-lf-summary b{font-size:1.06rem} .free-lf-section-head b{font-size:.84rem}.free-lf-section-head small{font-size:0.686rem;line-height:1.35} .free-lf-count-badge>b{font-size:.76rem}.free-lf-count-badge>small{font-size:0.662rem} .free-lf-card{padding:16px} .free-lf-card-title>b{font-size:.84rem;line-height:1.25}.free-lf-card-title>small{font-size:0.686rem;line-height:1.35} .free-lf-amount strong{font-size:1rem}.free-lf-amount span{font-size:0.67rem} .free-lf-mini-meta>span{font-size:0.674rem;line-height:1.35}.free-lf-owner-tag{font-size:0.666rem!important} .free-lf-open{font-size:.7rem;min-height:36px;padding:0 12px}.free-lf-open i{font-size:0.674rem} .free-lf-claimed-line{font-size:0.686rem;line-height:1.45}.free-lf-claimed-line>i{font-size:0.686rem}.free-lf-claimed-line small{font-size:0.674rem;line-height:1.4} .free-lf-empty b{font-size:.84rem}.free-lf-empty p{font-size:.7rem;line-height:1.5} @media(max-width:390px){ .earn-tile-copy b{font-size:.79rem}.earn-tile-copy small{font-size:0.682rem} .free-lf-card-title>b{font-size:.81rem}.free-lf-card-title>small{font-size:0.682rem} .free-lf-mini-meta>span{font-size:0.67rem}.free-lf-open{font-size:0.684rem} } /* v2026.09.04.15 — pending Daily Check-in indicator */ #earn-checkin-tile.checkin-pending::after{ content:"";position:absolute;right:8px;bottom:8px;width:9px;height:9px;border-radius:50%; background:#ef4444;border:2px solid var(--surface);box-shadow:0 3px 9px rgba(239,68,68,.38);z-index:3; } /* v2026.09.05.17 — normal-size Coin Wallet record typography */ .earn-record-shell .af-history-row>b{font-size:.86rem} .earn-record-shell .af-history-main>small{font-size:0.678rem;margin-top:4px} .earn-record-shell .af-history-main>span{font-size:.69rem;line-height:1.4;margin-top:4px} .earn-record-shell .earn-record-amount b{font-size:.86rem} .earn-record-shell .earn-record-amount small{font-size:0.678rem} .coin-record-detail-row span{font-size:0.678rem}.coin-record-detail-row b{font-size:0.686rem} /* ================= Phase 35 — Video Task partner guide ================= */ .earn-video-task-tile .earn-tile-icon{color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,var(--surface))} .video-task-sheet{display:flex;flex-direction:column;gap:16px;padding-bottom:8px;color:var(--text)} .video-task-intro{padding:2px 2px 0} .video-task-kicker{display:inline-flex;align-items:center;gap:7px;font-size:10.8px;font-weight:800;letter-spacing:.08em;color:var(--primary);margin-bottom:8px} .video-task-intro h3{font-size:19px;line-height:1.28;margin:0 0 8px;letter-spacing:-.02em} .video-task-intro p,.video-task-payment>p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.7} .video-task-actions{display:grid;grid-template-columns:1fr;gap:9px} .video-task-action{width:100%;min-height:66px;border:1px solid var(--border);border-radius:17px;background:var(--surface-2);display:grid;grid-template-columns:42px minmax(0,1fr) 24px;align-items:center;gap:11px;padding:10px 12px;text-align:left;color:var(--text);box-shadow:0 9px 26px -22px rgba(13,18,40,.55)} .video-task-action>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:16px} .video-task-action.youtube>span{background:rgba(255,0,45,.09);color:#ff2649}.video-task-action>div{min-width:0;display:flex;flex-direction:column;gap:3px}.video-task-action b{font-size:12.5px}.video-task-action small{font-size:10.8px;line-height:1.45;color:var(--text-muted)} .video-task-action>i{font-size:11px;color:var(--text-muted)}.video-task-action.is-disabled{opacity:.58;cursor:default} .video-task-guide,.video-task-payment,.video-task-partners{padding-top:2px} .video-task-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .video-task-section-head>div{min-width:0;display:flex;flex-direction:column;gap:2px}.video-task-section-head b{font-size:13px}.video-task-section-head small{font-size:10.8px;color:var(--text-muted)}.video-task-section-head>i{color:var(--primary);font-size:15px} .video-task-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .video-task-steps li{display:grid;grid-template-columns:29px 1fr;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--surface-2) 88%,transparent)} .video-task-steps li>span{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:11px;font-weight:800;box-shadow:0 7px 16px -10px var(--primary)} .video-task-steps p{margin:1px 0 0;font-size:11px;line-height:1.65;color:var(--text-muted)}.video-task-steps p b{color:var(--text);font-size:inherit} .video-task-payment{display:flex;flex-direction:column;gap:9px}.video-task-payment .video-task-section-head{margin-bottom:0} .video-task-claim-all{margin-top:2px;width:100%;min-height:48px;border-radius:14px;border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border));background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary);display:grid;grid-template-columns:24px 1fr 18px;align-items:center;text-align:left;padding:0 13px;font-size:11.5px;font-weight:750}.video-task-claim-all i:last-child{font-size:10.8px;justify-self:end} .video-task-warning{display:grid;grid-template-columns:38px 1fr;gap:11px;padding:13px;border:1px solid color-mix(in srgb,#f59e0b 28%,var(--border));border-radius:16px;background:color-mix(in srgb,#f59e0b 7%,var(--surface))}.video-task-warning>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(245,158,11,.13);color:#d97706}.video-task-warning b{font-size:11.5px}.video-task-warning p{margin:4px 0 0;color:var(--text-muted);font-size:10.9px;line-height:1.6} .video-task-channel-list{display:flex;flex-direction:column;gap:8px}.video-task-channel{width:100%;min-height:62px;border:1px solid var(--border);background:var(--surface-2);border-radius:15px;display:grid;grid-template-columns:44px minmax(0,1fr) 30px;align-items:center;gap:10px;padding:8px 10px;text-align:left;color:var(--text)} .video-task-channel-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,#229ed9 12%,var(--surface));color:#229ed9;font-size:20px}.video-task-channel-avatar img{width:100%;height:100%;object-fit:cover;display:block}.video-task-channel-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.video-task-channel-copy b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-task-channel-copy small{font-size:10.8px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-task-channel-open{width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);display:grid;place-items:center;font-size:10.8px} .video-task-empty{text-align:center;padding:24px 14px;border:1px dashed var(--border);border-radius:16px;color:var(--text-muted)}.video-task-empty i{display:block;font-size:25px;color:#229ed9;margin-bottom:8px}.video-task-empty b{display:block;font-size:12px;color:var(--text);margin-bottom:4px}.video-task-empty p{margin:0;font-size:10.8px;line-height:1.5} [data-theme="dark"] .video-task-action,[data-theme="dark"] .video-task-steps li,[data-theme="dark"] .video-task-channel{background:color-mix(in srgb,var(--surface-2) 92%,#070913)} @media(max-width:420px){.video-task-intro h3{font-size:17px}.video-task-sheet{gap:14px}.video-task-action{border-radius:15px}.video-task-steps li{padding:10px}} /* ================= v2026.09.05.26 — dedicated Video Task page ================= */ .video-task-page{padding:14px 0 18px;color:var(--text)} .video-task-page-head{display:flex;align-items:center;gap:12px;margin:0 2px 18px} .video-task-back{width:40px;height:40px;flex:none;border-radius:13px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;font-size:.82rem;box-shadow:var(--shadow-sm);transition:transform .16s var(--ease),border-color .2s} .video-task-back:active{transform:scale(.95)} .video-task-page-head>div{display:flex;flex-direction:column;min-width:0} .video-task-page-head span{font-size:0.676rem;font-weight:800;color:var(--text-muted);line-height:1.2} .video-task-page-head h1{margin:2px 0 0;font-size:1.28rem;line-height:1.15;font-weight:900;letter-spacing:-.025em} .video-task-page-body{min-height:300px} .video-task-page .video-task-sheet{gap:19px;padding:0 2px 8px} .video-task-page .video-task-intro{padding:0} .video-task-page .video-task-kicker{font-size:11.5px;margin-bottom:9px} .video-task-page .video-task-intro h3{font-size:21px;line-height:1.3;margin-bottom:9px} .video-task-page .video-task-intro p, .video-task-page .video-task-payment>p{font-size:13.5px;line-height:1.7} .video-task-page .video-task-actions{gap:10px} .video-task-page .video-task-action{min-height:72px;border-radius:17px;padding:11px 13px;grid-template-columns:44px minmax(0,1fr) 24px;gap:12px} .video-task-page .video-task-action>span{width:44px;height:44px;font-size:17px} .video-task-page .video-task-action b{font-size:14px} .video-task-page .video-task-action small{font-size:11.5px;line-height:1.5} .video-task-page .video-task-section-head{margin-bottom:11px} .video-task-page .video-task-section-head b{font-size:14.5px} .video-task-page .video-task-section-head small{font-size:11.5px;line-height:1.4} .video-task-page .video-task-section-head>i{font-size:16px} .video-task-page .video-task-steps{gap:9px} .video-task-page .video-task-steps li{grid-template-columns:31px minmax(0,1fr);gap:11px;padding:12px 13px;border-radius:16px} .video-task-page .video-task-steps li>span{width:31px;height:31px;font-size:12px} .video-task-page .video-task-steps p{font-size:13px;line-height:1.68} .video-task-page .video-task-payment{gap:10px} .video-task-page .video-task-claim-all{min-height:52px;font-size:13px;border-radius:15px;padding:0 14px} .video-task-page .video-task-warning{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px;border-radius:17px} .video-task-page .video-task-warning>span{width:40px;height:40px} .video-task-page .video-task-warning b{font-size:13.5px} .video-task-page .video-task-warning p{font-size:12.5px;line-height:1.65} .video-task-page .video-task-channel-list{gap:9px} .video-task-page .video-task-channel{min-height:68px;grid-template-columns:47px minmax(0,1fr) 31px;gap:11px;padding:9px 11px;border-radius:16px} .video-task-page .video-task-channel-avatar{width:47px;height:47px;font-size:21px} .video-task-page .video-task-channel-copy b{font-size:13.5px} .video-task-page .video-task-channel-copy small{font-size:11.5px} .video-task-page .video-task-channel-open{width:31px;height:31px;font-size:11px} .video-task-page .video-task-empty{padding:26px 15px} .video-task-page .video-task-empty b{font-size:13.5px} .video-task-page .video-task-empty p{font-size:11.5px} .video-task-page-loading,.video-task-page-error{min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 18px;color:var(--text-muted)} .video-task-page-loading .ui-busy-spin{margin-bottom:12px} .video-task-page-loading b,.video-task-page-error b{font-size:.88rem;color:var(--text)} .video-task-page-loading small{margin-top:5px;font-size:.69rem} .video-task-page-error>i{font-size:1.6rem;color:var(--danger);margin-bottom:11px} .video-task-page-error p{margin:5px 0 13px;font-size:.73rem} .video-task-page-error button{min-height:40px;padding:0 16px;border-radius:12px;background:var(--primary);color:#fff;font-size:.72rem;font-weight:850} @media(max-width:390px){ .video-task-page .video-task-intro h3{font-size:19px} .video-task-page .video-task-intro p,.video-task-page .video-task-payment>p{font-size:13px} .video-task-page .video-task-steps p{font-size:12.5px} } /* v2026.09.06.2 — tighten dedicated Video Task page heading to normal app spacing. */ .video-task-page{padding-top:0} .video-task-page .video-task-title{margin:4px 2px 12px} .video-task-page .video-task-title h2{font-size:1.05rem;font-weight:800} /* v2026.09.06.5 — collapsible Video Task guide/payment information */ .video-task-guide-divider{border-top:1px dashed color-mix(in srgb,var(--border) 86%,var(--primary) 14%);height:0;margin:2px 0} .video-task-collapsible{border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 4%,var(--surface)),var(--surface-2));overflow:hidden;box-shadow:0 12px 30px -28px rgba(16,24,40,.55)} .video-task-guide-toggle{width:100%;min-height:78px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 13px;text-align:left;color:var(--text);background:transparent} .video-task-guide-toggle-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 11%,var(--surface));color:var(--primary);font-size:16px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 12%,transparent)} .video-task-guide-toggle-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.video-task-guide-toggle-copy>small{font-size:10.6px;line-height:1.2;font-weight:900;letter-spacing:.075em;color:var(--primary)}.video-task-guide-toggle-copy>b{font-size:12.5px;line-height:1.35}.video-task-guide-toggle-copy>em{font-style:normal;font-size:10.76px;line-height:1.45;color:var(--text-muted)} .video-task-guide-toggle-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;padding-left:3px}.video-task-guide-toggle-end small{font-size:10.56px;font-weight:800;color:var(--text-muted);white-space:nowrap}.video-task-guide-toggle-end i{font-size:11px;color:var(--primary);transition:transform .38s var(--ease)}.video-task-collapsible.is-open .video-task-guide-toggle-end i{transform:rotate(180deg)} .video-task-collapsible-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .44s cubic-bezier(.2,.8,.2,1),opacity .28s ease}.video-task-collapsible.is-open .video-task-collapsible-body{grid-template-rows:1fr;opacity:1}.video-task-collapsible-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:0 13px}.video-task-collapsible.is-open .video-task-collapsible-inner{padding-bottom:14px}.video-task-collapsible-inner:before{content:"";display:block;border-top:1px solid var(--border);margin-top:1px} .video-task-page .video-task-guide-toggle{min-height:84px;padding:13px 14px;grid-template-columns:46px minmax(0,1fr) auto}.video-task-page .video-task-guide-toggle-icon{width:46px;height:46px;border-radius:15px;font-size:17px}.video-task-page .video-task-guide-toggle-copy>small{font-size:10.8px}.video-task-page .video-task-guide-toggle-copy>b{font-size:14px}.video-task-page .video-task-guide-toggle-copy>em{font-size:11.3px}.video-task-page .video-task-guide-toggle-end small{font-size:10.8px}.video-task-page .video-task-collapsible-inner{gap:18px;padding-left:14px;padding-right:14px}.video-task-page .video-task-collapsible.is-open .video-task-collapsible-inner{padding-bottom:15px} [data-theme="dark"] .video-task-collapsible{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--primary)),color-mix(in srgb,var(--surface-2) 94%,#080a12))} @media(max-width:390px){.video-task-guide-toggle{grid-template-columns:42px minmax(0,1fr) auto;gap:10px;padding:11px}.video-task-guide-toggle-icon{width:42px;height:42px}.video-task-guide-toggle-end small{display:none}.video-task-page .video-task-guide-toggle{grid-template-columns:44px minmax(0,1fr) auto;padding:12px}.video-task-page .video-task-guide-toggle-icon{width:44px;height:44px}.video-task-page .video-task-guide-toggle-copy>em{font-size:10.9px}} /* ================= v2026.09.10.26 — TimeWall Tasks ================= */ .earn-timewall-tile .earn-tile-icon{background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)} .timewall-sheet{display:flex;flex-direction:column;gap:12px;padding:2px 1px 8px;color:var(--text)} .timewall-hero{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;padding:13px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface))} .timewall-logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:18px;box-shadow:0 12px 22px -16px var(--primary)} .timewall-hero>div{min-width:0;display:flex;flex-direction:column}.timewall-hero>div>span{font-size:10.8px;letter-spacing:.09em;font-weight:900;color:var(--primary)}.timewall-hero h3{margin:4px 0 0;font-size:16px;line-height:1.35} .timewall-continue{width:100%;min-height:50px;border:0;border-radius:15px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:13.5px;font-weight:850;box-shadow:0 14px 26px -20px var(--primary)} .timewall-continue:disabled{opacity:.72}.timewall-continue .ui-busy-spin{width:17px;height:17px;border-width:2px;border-color:rgba(255,255,255,.42);border-top-color:#fff} .timewall-info,.timewall-note{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:flex-start;padding:12px 13px;border-radius:15px;border:1px solid var(--border);background:var(--surface-2)} .timewall-info>i,.timewall-note>i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:12px}.timewall-note>i{background:var(--success-soft);color:var(--success)} .timewall-info p,.timewall-note p{margin:1px 0 0;font-size:13px;line-height:1.58;color:var(--text-muted)} [data-theme="dark"] .timewall-info,[data-theme="dark"] .timewall-note{background:color-mix(in srgb,var(--surface-2) 94%,#070913)} /* ================= v2026.09.10.28 — TimeWall guide video ================= */ .timewall-guide{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 12px;border:1px solid color-mix(in srgb,#ff0000 18%,var(--border));border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,#ff0000 5%,var(--surface)),var(--surface-2));color:var(--text);text-align:left} .timewall-guide-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,#ff0000 12%,var(--surface));color:#e00000;font-size:17px}.timewall-guide-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.timewall-guide-copy small{font-size:10.7px;letter-spacing:.08em;font-weight:900;color:#d60000}.timewall-guide-copy b{font-size:13.5px;line-height:1.35}.timewall-guide-copy em{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--text-muted)}.timewall-guide>i{font-size:17px;color:#e00000} body.timewall-video-open{overflow:hidden}.timewall-video-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .18s ease}.timewall-video-modal.open{opacity:1;pointer-events:auto}.timewall-video-backdrop{position:absolute;inset:0;border:0;background:rgba(3,7,18,.76);backdrop-filter:blur(5px)}.timewall-video-card{position:relative;width:min(100%,720px);overflow:hidden;border-radius:20px;border:1px solid color-mix(in srgb,var(--border) 80%,#fff 20%);background:var(--surface);box-shadow:0 28px 80px rgba(0,0,0,.38);transform:translateY(10px) scale(.985);transition:transform .18s ease}.timewall-video-modal.open .timewall-video-card{transform:none}.timewall-video-card header{height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 15px;border-bottom:1px solid var(--border)}.timewall-video-card header>div{display:flex;flex-direction:column}.timewall-video-card header small{font-size:10.7px;font-weight:900;letter-spacing:.09em;color:var(--primary)}.timewall-video-card header b{margin-top:2px;font-size:15px}.timewall-video-card header button{width:36px;height:36px;border:0;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--text);font-size:14px}.timewall-video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}.timewall-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} [data-theme="dark"] .timewall-guide{background:linear-gradient(145deg,color-mix(in srgb,#ff0000 7%,var(--surface)),color-mix(in srgb,var(--surface-2) 95%,#05070c))}@media(max-width:480px){.timewall-video-modal{padding:12px}.timewall-video-card{border-radius:17px}.timewall-video-card header{height:54px}} /* v2026.09.10.29 — TimeWall modal readability */ /* ================= RESPONSIVE EARN COMPOSITION ================= */ @media(max-width:339px){ .earn-page{padding-top:12px} .coin-wallet-card{border-radius:22px} .coin-wallet-card-top,.coin-wallet-balance-row,.coin-wallet-foot{gap:8px} .coin-rate-pill{padding:6px 7px} .coin-wallet-balance-row{margin-top:20px} .coin-wallet-symbol{width:40px;height:40px;border-radius:13px} .coin-wallet-balance strong{font-size:2.32rem} .coin-wallet-balance span{font-size:0.654rem} .coin-wallet-foot{margin-top:18px} .coin-withdraw-btn{padding:0 11px} .earn-tile-grid{grid-template-columns:1fr;gap:8px} .earn-tile{min-height:74px;padding:10px 11px;grid-template-columns:38px minmax(0,1fr);gap:10px} .earn-tile-icon{width:38px;height:38px} .earn-tile-copy{padding-right:38px} .earn-tile-copy b{font-size:.76rem} .earn-tile-copy small{font-size:0.668rem} .earn-tile-meta,.earn-tile-meta.soon{font-size:0.63rem} .checkin-overview{gap:8px;padding:15px 12px} .checkin-overview-main strong{font-size:1.9rem} .checkin-today-card,.checkin-block{padding:15px 12px;border-radius:18px} .spin-sheet-stats{gap:8px} .spin-sheet-stats>div+div{padding-left:8px} .free-lf-card{min-width:0} .video-task-guide-toggle{grid-template-columns:40px minmax(0,1fr);gap:9px} .video-task-guide-toggle-end{grid-column:2;align-items:flex-start;padding-left:0} } /* ================= v2026.09.13.47 · EARN READABILITY ================= */ .coin-rate-pill,.coin-wallet-worth,.coin-wallet-balance span,.coin-wallet-main span,.earn-options-head small,.earn-tile-copy small,.earn-record-amount small,.checkin-overview-main span,.checkin-overview-side span,.checkin-kicker,.checkin-today-copy p,.checkin-reward-chip,.checkin-block-head small,.checkin-milestone-copy span,.checkin-milestone-count small,.checkin-milestone-foot,.checkin-milestone-foot b,.checkin-history-copy small,.checkin-history-amount small,.checkin-empty,.coin-withdraw-summary span,.coin-withdraw-summary b small,.coin-withdraw-summary em,.coin-withdraw-field>span,.coin-withdraw-all,.coin-conversion-row span,.coin-withdraw-rate,.coin-record-hero span,.coin-record-detail-row span,.spin-sheet-stats span,.spin-sheet-stats strong small,.spin-limit-copy,.spin-countdown-ring b,.spin-action-note,.spin-ad-copy>span,.spin-ad-copy>p,.spin-ad-label,.spin-ad-or span,.spin-ad-hint,.spin-win-kicker,.spin-win-card strong small,.spin-win-card p,.spin-history-head small,.spin-history-head>span,.spin-history-row small,.spin-history-row em,.spin-history-empty,.free-lf-section-head small,.free-lf-open,.free-lf-claimed-line,.free-lf-empty p{font-size:.7rem} .earn-tile-meta,.earn-tile-meta.soon,.spin-wheel-label small{font-size:0.674rem} .checkin-milestone-copy b,.checkin-history-copy b,.checkin-history-amount b,.milestone-history-copy b,.spin-history-row b,.free-lf-card-title>b{font-size:.74rem} .coin-record-detail-row b{font-size:.72rem} /* ================= Games preview page ================= */ .earn-games-tile .earn-tile-icon{background:color-mix(in srgb,var(--primary) 13%,var(--surface));color:var(--primary)} .games-page{display:flex;flex-direction:column;gap:12px;padding-bottom:6px} .games-title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:1px} .games-title h2{margin:0} .games-title small{color:var(--text-muted);font-size:.7rem;font-weight:650} .games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} .game-preview-card{min-width:0;width:100%;padding:8px 8px 10px;border:1px solid color-mix(in srgb,var(--primary) 9%,var(--border));border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 12px 28px -27px var(--text);text-align:left;transition:transform .16s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .game-preview-card:active{transform:scale(.975)} .game-preview-card:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--border));box-shadow:0 16px 30px -27px var(--primary)} .game-preview-media{display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:15px;background:color-mix(in srgb,var(--primary) 3%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 7%,var(--border))} .game-preview-media img{display:block;width:100%;height:100%;object-fit:cover} .game-preview-name{display:block;padding:9px 3px 1px;font-size:.82rem;font-weight:850;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-theme="dark"] .game-preview-card{background:color-mix(in srgb,var(--primary) 2.5%,var(--surface))} @media(max-width:360px){.games-grid{gap:8px}.game-preview-card{padding:7px 7px 9px;border-radius:17px}.game-preview-media{border-radius:13px}.game-preview-name{font-size:.75rem;padding-top:8px}} /* v139 — one-account earning access guard */ .earn-access-notice{display:flex;gap:12px;align-items:flex-start;margin:14px 0 2px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--primary) 6%,var(--card));box-shadow:0 8px 24px rgba(15,23,42,.05)} .earn-access-notice>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:13px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-size:17px} .earn-access-notice b{display:block;font-size:13.5px;color:var(--text);line-height:1.35;margin:1px 0 4px}.earn-access-notice p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.5} .earn-tile.earning-locked{opacity:.68;filter:saturate(.72);position:relative}.earn-tile.earning-locked::after{content:'\f023';font-family:'Font Awesome 6 Pro';font-weight:900;position:absolute;right:9px;bottom:8px;font-size:10.8px;color:var(--muted);opacity:.72}.earn-tile.earning-locked .earn-tile-meta{background:color-mix(in srgb,var(--border) 72%,transparent)!important;color:var(--muted)!important} [data-theme="dark"] .earn-access-notice{background:color-mix(in srgb,var(--primary) 8%,var(--card));box-shadow:none} /* Phase 50 · Spin unlock button method */ .spin-direct-unlock{display:flex;flex-direction:column;gap:10px;padding:2px 0 0} .spin-unlock-btn{min-height:52px;border-radius:16px;box-shadow:0 16px 30px -20px color-mix(in srgb,var(--primary) 78%,transparent),inset 0 1px 0 rgba(255,255,255,.22)} .spin-unlock-btn i{font-size:.88rem} .spin-direct-note{margin:0;padding:0 5px;color:var(--text-muted);font-size:0.666rem;line-height:1.62;text-align:center} .spin-direct-note b{color:var(--text);font-weight:900} /* v204 · differentiated Earn activity tiles */ .earn-tile{--earn-accent:var(--primary);--earn-tint:color-mix(in srgb,var(--earn-accent) 8%,var(--surface));background:linear-gradient(145deg,var(--earn-tint),var(--surface) 76%);border-color:color-mix(in srgb,var(--earn-accent) 20%,var(--border));box-shadow:0 14px 28px -29px color-mix(in srgb,var(--earn-accent) 58%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent)} .earn-tile .earn-tile-icon{background:color-mix(in srgb,var(--earn-accent) 13%,var(--surface));border-color:color-mix(in srgb,var(--earn-accent) 22%,transparent);color:var(--earn-accent);box-shadow:0 10px 20px -18px var(--earn-accent)} .earn-tile .earn-tile-meta{background:color-mix(in srgb,var(--earn-accent) 13%,var(--surface));color:var(--earn-accent)} .earn-tile.is-live:hover{border-color:color-mix(in srgb,var(--earn-accent) 36%,var(--border));box-shadow:0 17px 32px -28px color-mix(in srgb,var(--earn-accent) 70%,transparent)} .earn-checkin-tile{--earn-accent:#f59e0b}.earn-spin-tile{--earn-accent:#8b5cf6}.earn-free-lifafa-tile{--earn-accent:#ec4899}.earn-timewall-tile{--earn-accent:#0ea5e9}.earn-games-tile{--earn-accent:#22c55e}.earn-video-task-tile{--earn-accent:#ef4444}.earn-refer-tile{--earn-accent:#14b8a6}.earn-more-tile{--earn-accent:#64748b} .earn-tile .earn-tile-meta.soon{background:color-mix(in srgb,var(--earn-accent) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--earn-accent) 16%,var(--border));color:color-mix(in srgb,var(--earn-accent) 66%,var(--text-muted))} [data-theme="dark"] .earn-tile{background:linear-gradient(145deg,color-mix(in srgb,var(--earn-accent) 10%,var(--surface)),color-mix(in srgb,var(--surface) 97%,#000));border-color:color-mix(in srgb,var(--earn-accent) 24%,var(--border))} /* ================= Phase 65 — Refer & Earn ================= */ .refer-earn-page{padding-top:0;padding-bottom:16px}.refer-earn-page>*{animation:earnRise .34s var(--ease) both} .refer-earn-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.refer-earn-title-row>div{display:flex;flex-direction:column;gap:3px}.refer-earn-title-row h2{margin:0}.refer-earn-title-row small{font-size:.76rem;line-height:1.35;color:var(--text-muted)} .refer-coin-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));color:var(--primary);font-size:0.678rem;font-weight:900;letter-spacing:.05em} .refer-hero-card{position:relative;overflow:hidden;padding:18px;border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface) 68%);border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));box-shadow:0 22px 46px -38px color-mix(in srgb,var(--primary) 70%,transparent)} .refer-hero-head{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start}.refer-hero-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:1.02rem;box-shadow:0 14px 28px -18px var(--primary)}.refer-hero-head div{min-width:0}.refer-hero-head small{display:block;font-size:0.67rem;letter-spacing:.1em;font-weight:950;color:var(--primary)}.refer-hero-head b{display:block;margin-top:4px;font-size:.98rem;line-height:1.2;font-weight:950;letter-spacing:-.02em}.refer-hero-head p{margin:6px 0 0;font-size:.73rem;line-height:1.5;color:var(--text-muted)} .refer-link-box{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;margin-top:17px;border-radius:14px;border:1px solid var(--border);background:var(--surface);overflow:hidden}.refer-link-box>span{min-width:0;padding:12px 13px;font-size:.7rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.refer-link-box>button{height:100%;min-height:44px;border:0;border-left:1px solid var(--border);background:var(--primary-soft);color:var(--primary);font-size:.8rem;cursor:pointer} .refer-share-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:11px}.refer-share-actions .btn{min-height:44px;margin:0}.refer-share-actions .btn-soft{padding-left:16px;padding-right:16px}.refer-link-note{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;margin-top:13px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--primary) 7%,var(--surface-2));color:var(--text-muted);font-size:.71rem;line-height:1.52}.refer-link-note>i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--primary);font-size:.8rem}.refer-link-note b{color:var(--text);font-weight:850} .refer-rules-section{margin-top:20px}.refer-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 2px 10px}.refer-section-head>div{display:flex;flex-direction:column;gap:3px}.refer-section-head b{font-size:.86rem;font-weight:950}.refer-section-head small{font-size:.69rem;line-height:1.4;color:var(--text-muted)}.refer-section-head>span{font-size:0.666rem;font-weight:950;letter-spacing:.07em;color:var(--primary);white-space:nowrap} .refer-rule-list{display:flex;flex-direction:column;gap:9px}.refer-rule-card{position:relative;overflow:hidden;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:15px 14px;border-radius:19px;background:var(--surface);border:1px solid var(--border);box-shadow:0 14px 28px -30px rgba(0,0,0,.45)}.refer-rule-step{position:absolute;right:-12px;top:-12px;width:42px;height:42px;border-radius:50%;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 8px 11px;box-sizing:border-box;background:color-mix(in srgb,var(--primary) 10%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));font-size:0.678rem;line-height:1;font-weight:950;color:var(--primary)}.refer-rule-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.9rem}.refer-rule-icon.register{background:color-mix(in srgb,#0ea5e9 11%,var(--surface));color:#0ea5e9}.refer-rule-icon.addfund{background:color-mix(in srgb,var(--success) 11%,var(--surface));color:var(--success)}.refer-rule-icon.game{background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}.refer-rule-icon.lifafa{background:color-mix(in srgb,#ec4899 11%,var(--surface));color:#ec4899}.refer-rule-copy{min-width:0;padding-right:23px}.refer-rule-copy>b{display:block;font-size:.8rem;font-weight:920}.refer-rule-copy p{margin:4px 0 8px;font-size:.7rem;line-height:1.52;color:var(--text-muted)}.refer-rule-copy p strong{color:var(--text);font-weight:900}.refer-rule-copy>span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:0.678rem;font-weight:900} .refer-users-section{margin-top:22px;padding-top:18px;border-top:1px dashed color-mix(in srgb,var(--text-muted) 38%,var(--border))}.refer-users-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 2px 10px}.refer-users-head>div:first-child{min-width:0;display:flex;flex-direction:column;gap:3px}.refer-users-head>div:first-child>b{font-size:.86rem;font-weight:950}.refer-users-head>div:first-child>small{font-size:.69rem;color:var(--text-muted)}.refer-users-totals{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:5px;row-gap:0;text-align:right;white-space:nowrap}.refer-users-totals>span,.refer-users-totals>b{font-size:.77rem;font-weight:950;color:var(--primary)}.refer-users-totals>small{font-size:0.664rem;color:var(--text-muted);font-weight:750} .refer-users-list{display:flex;flex-direction:column;gap:9px}.refer-users-loading,.refer-users-empty,.refer-users-error{min-height:86px;padding:18px;border-radius:18px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;color:var(--text-muted);font-size:.72rem;line-height:1.45}.refer-users-empty{flex-direction:column}.refer-users-empty i{font-size:1.25rem;color:var(--primary)}.refer-users-error{color:var(--danger)}.refer-users-spinner{width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--primary) 22%,transparent);border-top-color:var(--primary);animation:spin .72s linear infinite} .refer-user-card{overflow:hidden;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:0 13px 28px -30px rgba(0,0,0,.45)}.refer-user-summary{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:13px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.refer-user-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;overflow:hidden;background:var(--primary-soft);color:var(--primary);font-size:.82rem}.refer-user-avatar img{width:100%;height:100%;display:block;object-fit:cover}.refer-user-main{min-width:0}.refer-user-main b{display:block;font-size:.77rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.refer-user-main small{display:block;margin-top:2px;font-size:0.674rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.refer-user-earned{text-align:right;white-space:nowrap}.refer-user-earned b{display:block;font-size:.78rem;font-weight:950;color:var(--primary)}.refer-user-earned small{display:block;margin-top:1px;font-size:0.664rem;color:var(--text-muted)}.refer-user-chevron{font-size:0.674rem;color:var(--text-muted);transition:transform .2s var(--ease)}.refer-user-card.is-open .refer-user-chevron{transform:rotate(180deg)} .refer-user-details{display:grid;grid-template-rows:0fr;padding:0 13px;transition:grid-template-rows .28s var(--ease),padding-bottom .28s var(--ease)}.refer-user-card.is-open .refer-user-details{grid-template-rows:1fr;padding-bottom:13px}.refer-user-details-inner{min-height:0;overflow:hidden}.refer-user-progress{border-top:1px solid var(--border);padding-top:11px;display:flex;flex-direction:column;gap:8px}.refer-progress-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border-radius:13px;background:var(--surface-2)}.refer-progress-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--surface);color:var(--primary);font-size:.72rem}.refer-progress-icon.done{color:var(--success);background:var(--success-soft)}.refer-progress-copy{min-width:0}.refer-progress-copy b{display:block;font-size:.7rem;font-weight:900}.refer-progress-copy small{display:block;margin-top:2px;font-size:0.672rem;line-height:1.35;color:var(--text-muted)}.refer-progress-value{font-size:0.68rem;font-weight:900;color:var(--text);white-space:nowrap}.refer-progress-value.done{color:var(--success)}.refer-addfund-meter{height:4px;margin-top:5px;border-radius:999px;background:color-mix(in srgb,var(--border) 75%,transparent);overflow:hidden}.refer-addfund-meter>i{display:block;height:100%;border-radius:inherit;background:var(--primary);width:var(--refer-progress,0%)} @media(max-width:390px){.refer-hero-card{padding:16px}.refer-share-actions{grid-template-columns:1fr}.refer-share-actions .btn-soft{width:100%}.refer-rule-card{padding:14px 12px}.refer-users-head{align-items:flex-start}.refer-users-totals{margin-top:1px}.refer-user-summary{grid-template-columns:38px minmax(0,1fr) auto 16px;padding:12px 10px;gap:8px}.refer-user-avatar{width:38px;height:38px}.refer-user-earned b{font-size:.72rem}.refer-progress-row{padding:9px 8px;gap:8px}} /* v232 Refer & Earn history sorting + incremental loading */ .refer-users-title-block{min-width:0;display:flex;flex-direction:column;gap:4px}.refer-users-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.refer-users-title-line>b{font-size:.86rem;font-weight:950}.refer-sort-control{position:relative;display:inline-flex;align-items:center}.refer-sort-control select{appearance:none;-webkit-appearance:none;min-height:32px;padding:0 30px 0 11px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:0.682rem;font-weight:850;outline:0;cursor:pointer}.refer-sort-control select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.refer-sort-control>i{position:absolute;right:10px;pointer-events:none;font-size:0.66rem;color:var(--primary)} .refer-users-more{display:flex;justify-content:center;padding-top:11px}.refer-users-more[hidden]{display:none}.refer-users-more button{min-width:132px;min-height:40px;padding:0 15px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:12px;background:var(--surface);color:var(--primary);font-size:0.686rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 10px 24px -24px rgba(0,0,0,.55)}.refer-users-more button:disabled{opacity:.66;cursor:wait}.refer-users-more .refer-users-spinner{width:15px;height:15px} .refer-user-card.refer-user-new{animation:referUserReveal .34s var(--ease) both}@keyframes referUserReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(max-width:390px){.refer-users-title-line{gap:6px}.refer-sort-control select{min-height:30px;padding-left:9px;padding-right:27px;font-size:0.674rem}.refer-users-head{gap:8px}.refer-users-totals{align-self:flex-start}} /* ---- red_green.css ---- */ /* ================= FINZO Red Green Game ================= */ .rg-page{ --rg-green:#17b978; --rg-red:#ed5962; --rg-violet:#7466ea; display:flex; flex-direction:column; gap:0; padding-bottom:10px; color:var(--text); } .rg-page *{box-sizing:border-box} .rg-page button{-webkit-tap-highlight-color:transparent} /* Same FINZO section-title language used on the Games page. */ .rg-title-row{align-items:center;margin-top:0;margin-bottom:7px;min-height:38px} .rg-title-row h2{margin:0;white-space:nowrap} .rg-rules-btn{ border:0; background:transparent; color:var(--primary); min-height:36px; padding:0 1px 0 10px; display:inline-flex; align-items:center; gap:7px; font-size:0.686rem; font-weight:900; transition:transform .16s var(--ease),opacity .18s; } .rg-rules-btn i{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:var(--primary); background:var(--primary-soft); border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border)); font-size:0.674rem; } .rg-rules-btn:active{transform:scale(.96);opacity:.82} /* Direct-on-page sections: no outer cards. */ .rg-section{padding:8px 0 14px} .rg-divider{height:1px;background:color-mix(in srgb,var(--border) 82%,transparent);margin:1px 0} .rg-orders-divider{height:0;background:none;border:0;border-top:1px dashed color-mix(in srgb,var(--primary) 30%,var(--border));margin:22px 0 21px;opacity:.78} /* Result strip: 29 completed periods + the current question-mark period. */ .rg-results-section{padding-top:1px;padding-bottom:12px} .rg-results-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px} .rg-record{position:relative;text-align:center;min-width:0;padding:2px;transform-origin:center} .rg-record img{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 5px color-mix(in srgb,var(--text) 10%,transparent));user-select:none;-webkit-user-drag:none} .rg-record small{display:block;margin-top:1px;font-size:0.642rem;line-height:1.1;color:var(--text-muted);font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rg-record.is-loading>span{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:linear-gradient(100deg,var(--surface-2) 20%,color-mix(in srgb,var(--primary) 7%,var(--surface)) 40%,var(--surface-2) 60%);background-size:220% 100%;animation:rgShimmer 1.25s linear infinite} .rg-record.is-current img{opacity:.86;filter:drop-shadow(0 5px 7px color-mix(in srgb,var(--primary) 18%,transparent))} .rg-record.is-current small{color:var(--primary);font-weight:950} .rg-record.is-new{animation:rgRecordPop .68s var(--ease)} @keyframes rgShimmer{to{background-position:-220% 0}} @keyframes rgRecordPop{0%{transform:scale(.7);opacity:.15}62%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}} /* Round state */ .rg-game-section{padding-top:14px} .rg-round-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px} .rg-period-box small,.rg-period-box b{display:block} .rg-period-box small{font-size:0.668rem;color:var(--text-muted);font-weight:800} .rg-period-box b{margin-top:3px;font-size:.94rem;font-weight:950;letter-spacing:.015em} .rg-timer-box{text-align:right;min-width:112px} .rg-status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:0.646rem;font-weight:950;letter-spacing:.035em} .rg-status-pill i{font-size:0.625rem} .rg-status-pill.open{background:var(--success-soft);color:var(--success)} .rg-status-pill.waiting{background:var(--warning-soft);color:var(--warning)} .rg-status-pill.ended{background:var(--surface-2);color:var(--text-muted)} .rg-timer-box strong{display:block;margin-top:4px;font-size:1.56rem;line-height:1;font-variant-numeric:tabular-nums;font-weight:950;letter-spacing:-.04em} .rg-progress-track{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:10px} .rg-progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 64%,#fff));transition:width .28s linear} .rg-section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0 8px} .rg-section-label span{font-size:.72rem;font-weight:950} .rg-section-label small{font-size:0.654rem;color:var(--text-muted);font-weight:700} .rg-number-label{margin-top:16px} /* Full-color game color cards */ .rg-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:8px 4px 2px} .rg-color-card{ position:relative; min-width:0; min-height:104px; border:0; border-radius:18px; padding:12px 9px 10px; color:#fff; text-align:left; overflow:visible; isolation:isolate; transition:transform .16s var(--ease),filter .18s,opacity .18s,box-shadow .2s; } .rg-color-card.green{background:linear-gradient(145deg,#25cf8d,#0e9d67);box-shadow:0 15px 28px -17px rgba(14,157,103,.72),0 7px 18px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2)} .rg-color-card.violet{background:linear-gradient(145deg,#897cf7,#6151d5);box-shadow:0 15px 28px -17px rgba(97,81,213,.72),0 7px 18px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2)} .rg-color-card.red{background:linear-gradient(145deg,#f57078,#d9434d);box-shadow:0 15px 28px -17px rgba(217,67,77,.72),0 7px 18px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2)} .rg-color-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 88% 86%,rgba(255,255,255,.15),transparent 38%);z-index:-1;pointer-events:none} .rg-color-card:active:not(:disabled){transform:scale(.965)} .rg-color-card.has-bet{box-shadow:0 17px 31px -16px rgba(0,0,0,.44),inset 0 0 0 2px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.25)} .rg-color-card:disabled{opacity:.76;filter:saturate(.76);cursor:not-allowed} .rg-color-main{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;z-index:1;min-width:0;padding-top:4px} .rg-color-image{width:34px;height:34px;display:block;flex:0 0 34px;border-radius:50%;background:rgba(255,255,255,.15);padding:2px} .rg-color-image img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.16))} .rg-color-copy{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%} .rg-color-copy>b{font-size:.77rem;line-height:1.05;font-weight:950;text-shadow:0 1px 1px rgba(0,0,0,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .rg-color-copy>small{display:block;margin-top:5px;font-size:0.652rem;line-height:1;font-weight:850;color:rgba(255,255,255,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .rg-color-multiplier{position:absolute;top:9px;right:9px;z-index:2;padding:0;background:transparent;border:0;color:rgba(255,255,255,.56);font-size:0.658rem;font-weight:950;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.16)} .rg-your-bet{position:absolute;left:8px;top:-8px;z-index:4;display:inline-flex;align-items:center;max-width:66%;min-height:22px;padding:4px 7px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid color-mix(in srgb,var(--primary) 8%,var(--border));font-size:0.644rem;font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 7px 16px -12px rgba(0,0,0,.66)} .rg-your-bet:empty{display:none} /* Number selection uses clean typography instead of donor ball artwork. */ .rg-number-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .rg-number-card{position:relative;min-width:0;aspect-ratio:1;border:1px solid var(--border);border-radius:15px;background:var(--surface-2);display:grid;place-items:center;padding:7px;box-shadow:0 8px 18px -20px var(--text);transition:transform .16s var(--ease),border-color .2s,background .2s,opacity .2s,box-shadow .2s} .rg-number-value{font-size:1.55rem;line-height:1;font-weight:950;letter-spacing:-.045em;text-shadow:0 5px 12px color-mix(in srgb,currentColor 16%,transparent)} .rg-number-card.tone-green{background:color-mix(in srgb,var(--rg-green) 7%,var(--surface));border-color:color-mix(in srgb,var(--rg-green) 19%,var(--border))}.rg-number-card.tone-green .rg-number-value{color:var(--rg-green)} .rg-number-card.tone-red{background:color-mix(in srgb,var(--rg-red) 7%,var(--surface));border-color:color-mix(in srgb,var(--rg-red) 19%,var(--border))}.rg-number-card.tone-red .rg-number-value{color:var(--rg-red)} .rg-number-card.tone-green-violet{background:linear-gradient(135deg,color-mix(in srgb,var(--rg-green) 7%,var(--surface)),color-mix(in srgb,var(--rg-violet) 7%,var(--surface)));border-color:color-mix(in srgb,var(--rg-violet) 18%,var(--border))}.rg-number-card.tone-green-violet .rg-number-value{background:linear-gradient(135deg,var(--rg-green) 30%,var(--rg-violet) 68%);-webkit-background-clip:text;background-clip:text;color:transparent} .rg-number-card.tone-red-violet{background:linear-gradient(135deg,color-mix(in srgb,var(--rg-red) 7%,var(--surface)),color-mix(in srgb,var(--rg-violet) 7%,var(--surface)));border-color:color-mix(in srgb,var(--rg-violet) 18%,var(--border))}.rg-number-card.tone-red-violet .rg-number-value{background:linear-gradient(135deg,var(--rg-red) 30%,var(--rg-violet) 68%);-webkit-background-clip:text;background-clip:text;color:transparent} .rg-number-card:active:not(:disabled){transform:scale(.94)} .rg-number-card.has-bet{border-color:var(--primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 28%,transparent),0 9px 20px -19px var(--primary)} .rg-number-card:disabled{opacity:.7;filter:saturate(.68)} .rg-number-bet{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);max-width:88%;padding:3px 5px;border-radius:999px;background:var(--primary);color:#fff;font-size:0.628rem;font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 5px 10px -8px var(--primary)} .rg-number-bet:empty{display:none} /* Orders / history. Active tab becomes the theme-colored chip itself. */ .rg-orders-section{padding-top:13px} .rg-order-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:2px;padding:2px 0} .rg-order-tabs button{border:0;background:transparent;color:var(--text);min-height:38px;border-radius:12px;padding:0 9px;font-size:0.686rem;font-weight:900;transition:background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease),transform .16s var(--ease)} .rg-order-tabs button.active{color:#fff;background:var(--primary);box-shadow:0 10px 20px -15px var(--primary)} .rg-order-tabs button:active{transform:scale(.97)} .rg-order-panel{display:none;min-width:0} .rg-order-panel.active{display:block;animation:rgPanelIn .2s var(--ease)} @keyframes rgPanelIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}} .rg-table-scroll{width:100%;max-width:100%;overflow:visible;overscroll-behavior:auto;touch-action:pan-y;padding-top:7px} .rg-table{width:100%;max-width:100%;min-width:0;border-collapse:separate;border-spacing:0;table-layout:fixed} .rg-table col.rg-col-user{width:32%}.rg-table col.rg-col-select{width:17%}.rg-table col.rg-col-amount{width:27%}.rg-table col.rg-col-time{width:24%} .rg-my-table col.rg-col-period{width:22%}.rg-my-table col.rg-col-select{width:15%}.rg-my-table col.rg-col-amount{width:22%}.rg-my-table col.rg-col-result{width:15%}.rg-my-table col.rg-col-profit{width:26%} .rg-table th,.rg-table td{padding:8px 4px;border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);font-size:0.674rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle} .rg-table th{padding-top:8px;padding-bottom:8px;font-size:0.662rem;color:color-mix(in srgb,var(--primary) 86%,var(--text));font-weight:950;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);position:static;letter-spacing:.01em} .rg-table th:first-child,.rg-table td:first-child{text-align:left} .rg-table th:last-child,.rg-table td:last-child{text-align:right} .rg-table th:not(:first-child):not(:last-child),.rg-table td:not(:first-child):not(:last-child){text-align:center} .rg-table tbody tr:last-child td{border-bottom:0} .rg-order-enter td{animation:rgOrderEnter .42s cubic-bezier(.22,.78,.32,1) both} @keyframes rgOrderEnter{0%{opacity:.08;transform:translateY(-7px)}70%{opacity:1;transform:translateY(1px)}100%{opacity:1;transform:none}} .rg-user-cell{min-width:0;display:inline-flex;align-items:center;gap:5px;justify-content:flex-start;max-width:100%;font-weight:850;vertical-align:middle} .rg-user-cell b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:0.67rem} .rg-user-img{width:23px;height:23px;flex:0 0 23px;border-radius:7px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)} .rg-user-img-empty{display:inline-grid;place-items:center;color:var(--text-muted);font-size:0.666rem;background:var(--surface-2)} .rg-select-img,.rg-result-img{width:23px;height:23px;object-fit:contain;display:block;margin:0 auto} .rg-amount-cell{font-weight:900} .rg-time-cell{font-size:0.662rem!important;color:var(--text-muted)!important} .rg-period-cell{font-variant-numeric:tabular-nums;font-size:0.664rem!important} .rg-profit{font-weight:950;font-size:0.668rem!important} .rg-profit.win{color:var(--success)} .rg-profit.loss{color:var(--danger)} .rg-profit.pending{color:var(--text-muted)} .rg-table-empty{height:108px!important;color:var(--text-muted)!important;font-size:0.674rem!important;font-weight:750!important} /* Content rendered inside FINZO BottomSheet */ .rg-sheet-content{display:flex;flex-direction:column;gap:14px;padding-bottom:4px} .rg-sheet-hero{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 16%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 7%,var(--surface-2))} .rg-sheet-period{position:absolute;right:12px;top:10px;z-index:2;font-size:0.66rem;font-weight:900;color:var(--text-muted);letter-spacing:.01em;white-space:nowrap} .rg-join-sheet-content .rg-sheet-hero{position:relative;padding-top:24px}.rg-join-sheet-content .rg-sheet-hero-copy{padding-right:4px} .rg-sheet-hero-img{width:56px;height:56px;flex:0 0 56px;border-radius:18px;background:var(--surface);display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 14%,var(--border));box-shadow:0 10px 22px -20px var(--text)} .rg-sheet-hero-img img{width:48px;height:48px;object-fit:contain} .rg-sheet-hero-copy{min-width:0} .rg-sheet-hero-copy small,.rg-sheet-hero-copy b,.rg-sheet-hero-copy span{display:block} .rg-sheet-hero-copy small{font-size:0.66rem;color:var(--text-muted);font-weight:800} .rg-sheet-hero-copy b{font-size:1rem;font-weight:950;margin-top:2px} .rg-sheet-hero-copy span{font-size:0.67rem;color:var(--rg-sheet-accent,var(--primary));font-weight:900;margin-top:3px} .rg-sheet-wallet{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)} .rg-sheet-wallet div small,.rg-sheet-wallet div b{display:block} .rg-sheet-wallet div small{font-size:0.662rem;color:var(--text-muted);font-weight:750} .rg-sheet-wallet div b{font-size:1.03rem;margin-top:3px;font-weight:950} .rg-sheet-wallet button{border:0;background:var(--primary-soft);color:var(--primary);border-radius:10px;min-height:36px;padding:0 10px;font-size:0.67rem;font-weight:900} .rg-sheet-section>span{display:block;margin-bottom:8px;font-size:0.674rem;font-weight:900;color:var(--text)} .rg-contract-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px} .rg-contract-btn{height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:0.674rem;font-weight:900;transition:transform .14s,border-color .2s,background .2s,color .2s} .rg-contract-btn:active{transform:scale(.94)} .rg-contract-btn.active{border-color:var(--rg-sheet-accent,var(--primary));background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 9%,var(--surface));color:var(--rg-sheet-accent,var(--primary))} .rg-qty-row{display:grid;grid-template-columns:44px 44px minmax(72px,1fr) 44px 44px;gap:7px} .rg-qty-row button{height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:0.678rem;font-weight:900} .rg-qty-row input{height:42px;min-width:0;text-align:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:16px;font-weight:900;outline:none} .rg-qty-row input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)} .rg-qty-row input::-webkit-inner-spin-button,.rg-qty-row input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .rg-qty-row input[type=number]{-moz-appearance:textfield} .rg-join-summary{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 2px 1px;text-align:center} .rg-join-total{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center} .rg-join-total small{font-size:0.666rem;color:var(--text-muted);font-weight:800;letter-spacing:.01em} .rg-join-total strong{display:block;margin-top:2px;font-size:1.72rem;line-height:1.08;font-weight:950;letter-spacing:-.035em;color:var(--text)} .rg-join-meta{width:100%;display:flex!important;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;color:var(--text-muted)} .rg-join-meta>span{display:inline-flex;align-items:baseline;gap:5px;padding:2px 10px;position:relative;white-space:nowrap} .rg-join-meta>span+span:before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;transform:translateY(-50%);background:var(--border);opacity:.8} .rg-join-meta small{font-size:0.648rem;color:var(--text-muted);font-weight:750} .rg-join-meta b{font-size:0.666rem;color:var(--text);font-weight:900} .rg-join-action{height:48px;width:100%;border:0;border-radius:14px;background:var(--rg-sheet-accent,var(--primary));color:#fff;font-size:.72rem;font-weight:950;box-shadow:0 12px 22px -17px var(--rg-sheet-accent,var(--primary));display:flex;align-items:center;justify-content:center;gap:8px} .rg-join-action:disabled{opacity:.55;box-shadow:none} .rg-join-action .ui-busy-spin{border-color:rgba(255,255,255,.35);border-top-color:#fff} /* Premium join sheet */ .rg-join-sheet-content{gap:15px;padding:2px 1px 8px} .rg-join-sheet-content .rg-sheet-hero{position:relative;overflow:hidden;padding:15px;border-color:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 24%,var(--border));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 15%,var(--surface)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 5%,var(--surface-2)));box-shadow:0 18px 34px -28px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 72%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent)} .rg-join-sheet-content .rg-sheet-hero:after{content:"";position:absolute;right:-34px;top:-42px;width:126px;height:126px;border-radius:50%;background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 10%,transparent);filter:blur(1px);pointer-events:none} .rg-join-sheet-content .rg-sheet-hero-img{position:relative;z-index:1;width:62px;height:62px;flex-basis:62px;border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 23%,var(--border));box-shadow:0 14px 28px -20px color-mix(in srgb,var(--text) 45%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent)} .rg-join-sheet-content .rg-sheet-hero-img img{width:54px;height:54px;filter:drop-shadow(0 7px 9px color-mix(in srgb,var(--text) 16%,transparent))} .rg-join-sheet-content .rg-sheet-hero-copy{position:relative;z-index:1} .rg-join-sheet-content .rg-sheet-hero-copy small{font-size:0.668rem;letter-spacing:.11em} .rg-join-sheet-content .rg-sheet-hero-copy b{font-size:1.1rem;letter-spacing:-.018em} .rg-join-sheet-content .rg-sheet-hero-copy span{font-size:0.68rem} .rg-join-sheet-content .rg-sheet-wallet{padding:13px 14px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 88%,var(--surface)),var(--surface-2));box-shadow:0 12px 26px -26px color-mix(in srgb,var(--text) 55%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)} .rg-join-sheet-content .rg-sheet-wallet div small{font-size:0.672rem} .rg-join-sheet-content .rg-sheet-wallet div b{font-size:1.1rem} .rg-join-sheet-content .rg-sheet-wallet button{min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--primary) 14%,transparent);border-radius:12px;font-size:0.678rem;box-shadow:0 9px 18px -17px var(--primary)} .rg-join-sheet-content .rg-sheet-section{padding:13px;border:1px solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:19px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 72%,var(--surface)));box-shadow:0 14px 28px -30px color-mix(in srgb,var(--text) 52%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)} .rg-join-sheet-content .rg-sheet-section>span{margin-bottom:10px;font-size:0.684rem;letter-spacing:.005em} .rg-join-sheet-content .rg-contract-grid{gap:8px} .rg-join-sheet-content .rg-contract-btn{height:44px;border-radius:13px;background:var(--surface);font-size:0.68rem;box-shadow:0 8px 16px -18px color-mix(in srgb,var(--text) 60%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)} .rg-join-sheet-content .rg-contract-btn.active{border-color:var(--rg-sheet-accent,var(--primary));background:linear-gradient(145deg,var(--rg-sheet-accent,var(--primary)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 82%,#000));color:#fff;box-shadow:0 12px 22px -17px var(--rg-sheet-accent,var(--primary)),inset 0 1px 0 rgba(255,255,255,.28)} .rg-join-sheet-content .rg-qty-row button,.rg-join-sheet-content .rg-qty-row input{height:44px;border-radius:13px;background:var(--surface);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)} .rg-join-sheet-content .rg-qty-row button{font-size:.69rem;transition:transform .14s,border-color .2s,background .2s} .rg-join-sheet-content .rg-qty-row button:active{transform:scale(.94);border-color:var(--rg-sheet-accent,var(--primary));background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 7%,var(--surface))} .rg-join-sheet-content .rg-qty-row input:focus{border-color:var(--rg-sheet-accent,var(--primary));box-shadow:0 0 0 4px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 11%,transparent)} .rg-join-sheet-content .rg-join-summary{gap:10px;padding:16px 13px 14px;border:1px solid color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 18%,var(--border));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 8%,var(--surface)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 3%,var(--surface-2)));box-shadow:0 16px 28px -28px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 58%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 48%,transparent)} .rg-join-sheet-content .rg-join-total small{font-size:0.674rem} .rg-join-sheet-content .rg-join-total strong{margin-top:4px;font-size:1.88rem;color:var(--rg-sheet-accent,var(--primary));text-shadow:0 9px 20px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 12%,transparent)} .rg-join-sheet-content .rg-join-meta small{font-size:0.658rem} .rg-join-sheet-content .rg-join-meta b{font-size:0.678rem} .rg-join-sheet-content .rg-join-action{height:52px;border-radius:16px;background:linear-gradient(135deg,var(--rg-sheet-accent,var(--primary)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 78%,#151515));font-size:.76rem;box-shadow:0 18px 28px -18px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .14s,filter .2s,box-shadow .2s} .rg-join-sheet-content .rg-join-action:not(:disabled):active{transform:translateY(1px) scale(.99);filter:saturate(1.08)} [data-theme="dark"] .rg-join-sheet-content .rg-sheet-hero,[data-theme="dark"] .rg-join-sheet-content .rg-sheet-section,[data-theme="dark"] .rg-join-sheet-content .rg-join-summary{box-shadow:0 18px 36px -27px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)} /* Rules */ .rg-rule-intro{font-size:.72rem;line-height:1.55;color:var(--text-muted);margin:0} .rg-rule-cards{display:grid;gap:8px} .rg-rule-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2)} .rg-rule-row img{width:38px;height:38px;object-fit:contain} .rg-rule-row div b,.rg-rule-row div small{display:block} .rg-rule-row div b{font-size:.69rem;font-weight:950} .rg-rule-row div small{margin-top:2px;font-size:0.658rem;color:var(--text-muted);line-height:1.35} .rg-rule-row>strong{font-size:.7rem;color:var(--primary);font-weight:950} .rg-rule-fee-note{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--primary) 6%,var(--surface));color:var(--text)} .rg-rule-fee-note>i{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.7rem} .rg-rule-fee-note span{min-width:0}.rg-rule-fee-note b,.rg-rule-fee-note small{display:block}.rg-rule-fee-note b{font-size:0.682rem;font-weight:950}.rg-rule-fee-note small{margin-top:3px;font-size:0.66rem;line-height:1.45;color:var(--text-muted)} /* Win / loss result popup */ .alert-card:has(.rg-result-popup){max-width:420px;max-height:calc(100dvh - 24px);padding:24px 20px 20px;border-radius:28px;overflow:hidden;display:flex;flex-direction:column} .alert-card:has(.rg-result-popup)>.a-ic{display:none!important} .alert-card:has(.rg-result-popup)>h3{flex:none;margin:0 42px 14px 0;font-size:1.2rem;line-height:1.2;letter-spacing:-.025em;text-align:left} .alert-card:has(.rg-result-popup)>p{flex:1;min-height:0;margin:0;overflow:hidden;color:var(--text);font-size:.82rem;line-height:1.45;display:flex} .alert-card:has(.rg-result-popup) .a-actions{flex:none;margin-top:18px} .alert-card:has(.rg-result-popup) .a-actions .btn{min-height:48px;border-radius:15px;font-weight:900} .rg-result-popup{display:flex!important;flex:1;min-height:0;flex-direction:column;gap:14px;width:100%;text-align:left;color:var(--text)} .rg-popup-banner{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) 88px;gap:14px;align-items:center;overflow:hidden;padding:18px;border:1px solid color-mix(in srgb,var(--rg-result-accent) 22%,var(--border));border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--rg-result-accent) 13%,var(--surface)),color-mix(in srgb,var(--rg-result-accent) 5%,var(--surface-2)))} .rg-result-popup.win{--rg-result-accent:var(--success)} .rg-result-popup.loss{--rg-result-accent:var(--danger)} .rg-popup-banner:after{content:"";position:absolute;right:-30px;top:-45px;width:125px;height:125px;border-radius:50%;background:color-mix(in srgb,var(--rg-result-accent) 10%,transparent);pointer-events:none} .rg-popup-banner-copy{position:relative;z-index:1;display:flex!important;flex-direction:column;min-width:0} .rg-popup-status{align-self:flex-start;display:inline-flex!important;align-items:center;gap:6px;margin-bottom:9px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--rg-result-accent) 13%,var(--surface));color:var(--rg-result-accent);font-size:0.674rem;font-weight:950;letter-spacing:.055em} .rg-popup-status i{font-size:0.684rem} .rg-popup-banner-copy>small{font-size:0.686rem;font-weight:800;color:var(--text-muted)} .rg-popup-banner-copy>strong{margin-top:4px;font-size:1.9rem;line-height:1;font-weight:950;letter-spacing:-.045em;color:var(--rg-result-accent)} .rg-popup-banner-copy>em{margin-top:7px;font-size:.69rem;line-height:1.35;font-style:normal;font-weight:700;color:var(--text-muted)} .rg-popup-result-ball{position:relative;z-index:1;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:9px 5px;border:1px solid color-mix(in srgb,var(--rg-result-accent) 14%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 12px 24px -20px color-mix(in srgb,var(--text) 40%,transparent)} .rg-popup-number{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 8px 10px color-mix(in srgb,var(--text) 15%,transparent))} .rg-popup-result-ball small{font-size:0.67rem;font-weight:850;color:var(--text-muted)} .rg-popup-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .rg-popup-summary>span{display:flex!important;flex-direction:column;justify-content:center;min-width:0;min-height:66px;padding:10px 8px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2);text-align:center} .rg-popup-summary small{font-size:0.674rem;color:var(--text-muted);font-weight:750;line-height:1.25} .rg-popup-summary b{margin-top:4px;font-size:.78rem;color:var(--text);font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rg-popup-orders{display:flex!important;min-height:0;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface)} .rg-popup-order-title{flex:none;display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;background:var(--surface-2)} .rg-popup-order-title b{font-size:.72rem;font-weight:900;color:var(--text)} .rg-popup-order-title small{font-size:0.674rem;font-weight:750;color:var(--text-muted)} .rg-popup-bets{display:block!important;padding:0 13px} .rg-popup-bets.is-scrollable{max-height:min(146px,22dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--rg-result-accent) 36%,var(--border)) transparent} .rg-popup-bets.is-scrollable::-webkit-scrollbar{width:4px}.rg-popup-bets.is-scrollable::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--rg-result-accent) 36%,var(--border));border-radius:999px} .rg-popup-bet{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;font-size:.7rem} .rg-popup-bet+.rg-popup-bet{border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent)} .rg-popup-bet>span{min-width:0;font-weight:750;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rg-popup-bet>b{flex:none;font-size:.72rem;font-weight:950;color:var(--text)} @media(max-width:390px){ .alert-card:has(.rg-result-popup){padding:22px 16px 17px;border-radius:24px} .rg-popup-banner{grid-template-columns:minmax(0,1fr) 76px;padding:15px;gap:11px} .rg-popup-number{width:54px;height:54px} .rg-popup-banner-copy>strong{font-size:1.65rem} .rg-popup-summary{gap:6px} .rg-popup-summary>span{padding:9px 5px} } [data-theme="dark"] .rg-order-tabs button:not(.active){color:var(--text)} [data-theme="dark"] .rg-table th{color:color-mix(in srgb,var(--primary) 72%,#fff);background:transparent;border-top:0;border-left:0;border-right:0} [data-theme="dark"] .rg-color-card.green{box-shadow:0 16px 29px -17px rgba(25,185,120,.45),0 8px 18px -14px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.16)} [data-theme="dark"] .rg-color-card.violet{box-shadow:0 16px 29px -17px rgba(116,102,234,.45),0 8px 18px -14px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.16)} [data-theme="dark"] .rg-color-card.red{box-shadow:0 16px 29px -17px rgba(237,89,98,.45),0 8px 18px -14px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.16)} [data-theme="dark"] .rg-your-bet{background:color-mix(in srgb,var(--surface) 94%,#fff);border-color:color-mix(in srgb,var(--primary) 14%,var(--border))} @media(max-width:390px){ .rg-results-grid{gap:4px} .rg-record{padding:1px} .rg-record small{font-size:0.634rem} .rg-color-grid{gap:7px;padding-left:3px;padding-right:3px} .rg-color-card{min-height:98px;padding:10px 7px 9px;border-radius:16px} .rg-color-image{width:30px;height:30px;flex-basis:30px} .rg-color-copy>b{font-size:.7rem} .rg-color-copy>small{font-size:0.642rem} .rg-color-multiplier{top:8px;right:8px;font-size:0.644rem} .rg-your-bet{left:6px;top:-7px;font-size:0.636rem;min-height:20px;padding:4px 6px} .rg-number-grid{gap:6px} .rg-number-card{padding:5px;border-radius:13px} .rg-number-value{font-size:1.4rem} .rg-contract-grid{gap:5px} .rg-contract-btn{font-size:0.66rem} .rg-qty-row{grid-template-columns:40px 40px minmax(62px,1fr) 40px 40px;gap:5px} .rg-qty-row button,.rg-qty-row input{height:40px} .rg-table th,.rg-table td{padding:7px 3px;font-size:0.666rem} .rg-user-img{width:21px;height:21px;flex-basis:21px} .rg-select-img,.rg-result-img{width:21px;height:21px} } @media(max-width:335px){ .rg-title-row h2{font-size:.92rem} .rg-rules-btn{font-size:0.674rem} .rg-results-grid{gap:3px} .rg-record small{font-size:0.626rem} .rg-color-grid{gap:6px;padding-left:2px;padding-right:2px} .rg-color-image{width:27px;height:27px;flex-basis:27px} .rg-color-copy>b{font-size:0.676rem} .rg-color-copy>small{font-size:0.634rem} .rg-color-multiplier{font-size:0.638rem} .rg-number-grid{gap:5px} .rg-number-value{font-size:1.28rem} .rg-qty-row{grid-template-columns:38px 38px minmax(56px,1fr) 38px 38px} .rg-contract-btn{font-size:0.65rem} .rg-table th{font-size:0.65rem}.rg-table td{font-size:0.658rem}.rg-profit{font-size:0.658rem!important}.rg-user-cell b{font-size:0.656rem}.rg-time-cell{font-size:0.65rem!important} } @media(prefers-reduced-motion:reduce){.rg-page *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} [data-theme="dark"] .rg-orders-divider{border-top-color:color-mix(in srgb,var(--primary) 34%,var(--border));opacity:.74} /* Clearly-marked Red Green Test Mode simulation UI */ .rg-test-join-note{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid color-mix(in srgb,var(--warning) 22%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--warning) 6%,var(--surface));color:var(--text)} .rg-test-join-note>i{color:var(--warning);margin-top:2px}.rg-test-join-note span{min-width:0}.rg-test-join-note b,.rg-test-join-note small{display:block}.rg-test-join-note b{font-size:0.68rem;font-weight:950}.rg-test-join-note small{margin-top:3px;font-size:0.658rem;line-height:1.4;color:var(--text-muted)} /* Lifafa-style win celebration reused for Red Green result popups. */ .rg-win-confetti-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:8} .rg-win-confetti{position:absolute;top:-16px;width:9px;height:14px;opacity:.95;border-radius:2px;pointer-events:none;will-change:transform} @media(prefers-reduced-motion:reduce){.rg-win-confetti-layer,.rg-win-confetti{display:none!important}} /* Compact date-wise summary above My Order history. */ .rg-day-report{position:relative;overflow:hidden;margin:8px 0 3px;padding:9px 10px 10px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),color-mix(in srgb,var(--primary) 2%,var(--surface-2)));box-shadow:0 12px 24px -24px color-mix(in srgb,var(--primary) 60%,var(--text));transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease)} .rg-day-report[hidden]{display:none!important} .rg-day-report-head{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:6px;margin-bottom:8px} .rg-day-report-head strong{text-align:center;font-size:0.684rem;font-weight:950;color:var(--text);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rg-day-report-nav{width:30px;height:28px;border:0;border-radius:0;background:transparent;color:var(--primary);display:grid;place-items:center;padding:0;font-size:.82rem;line-height:1;transition:transform .16s var(--ease),color .2s var(--ease),opacity .2s var(--ease)} .rg-day-report-nav:not(:disabled):hover{color:color-mix(in srgb,var(--primary) 82%,var(--text))} .rg-day-report-nav:not(:disabled):active{transform:scale(.88)} .rg-day-report-nav:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 42%,transparent);outline-offset:2px;border-radius:7px} .rg-day-report-nav:disabled{opacity:.25;cursor:not-allowed} .rg-day-report-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;transition:opacity .18s var(--ease),transform .18s var(--ease)} .rg-day-report-stat{min-width:0;padding:8px 7px 7px;border:1px solid color-mix(in srgb,var(--border) 82%,transparent);border-radius:11px;background:color-mix(in srgb,var(--surface) 91%,transparent);text-align:center} .rg-day-report-stat small,.rg-day-report-stat b,.rg-day-report-stat span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rg-day-report-stat small{font-size:0.646rem;font-weight:850;color:var(--text-muted)} .rg-day-report-stat b{margin-top:3px;font-size:0.686rem;font-weight:950;color:var(--text);font-variant-numeric:tabular-nums} .rg-day-report-stat span{margin-top:2px;font-size:0.634rem;font-weight:750;color:var(--text-muted)} .rg-day-report-stat.is-profit b{color:var(--success)} .rg-day-report-stat.is-loss b{color:var(--danger)} .rg-day-report-loader{position:absolute;inset:37px 8px 7px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(2px);color:var(--primary);font-size:.8rem;z-index:2;animation:rgReportLoaderIn .16s var(--ease)} .rg-day-report-loader[hidden]{display:none!important} .rg-day-report.is-loading .rg-day-report-stats{opacity:.34;transform:scale(.994)} @keyframes rgReportLoaderIn{from{opacity:0}to{opacity:1}} [data-theme="dark"] .rg-day-report{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),color-mix(in srgb,var(--surface-2) 94%,#000));border-color:color-mix(in srgb,var(--primary) 24%,var(--border));box-shadow:0 14px 26px -25px rgba(0,0,0,.95)} [data-theme="dark"] .rg-day-report-stat{background:color-mix(in srgb,var(--surface-2) 88%,transparent);border-color:color-mix(in srgb,var(--primary) 9%,var(--border))} @media(max-width:390px){.rg-day-report{padding:8px 8px 9px}.rg-day-report-stats{gap:5px}.rg-day-report-stat{padding:7px 5px 6px}.rg-day-report-stat b{font-size:0.676rem}.rg-day-report-stat small{font-size:0.64rem}.rg-day-report-stat span{font-size:0.628rem}} /* ---- lifafa.css ---- */ /* ================= LIFAFA ================= */ /* Type selector */ .type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px} .type-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:18px;background:var(--surface);border:2px solid var(--border);transition:transform .16s,border-color .2s,background .2s} .type-card:active{transform:scale(.95)} .type-card .tic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;color:#fff} .type-card.normal .tic{background:linear-gradient(135deg,#7c5cff,#4ac1ff)} .type-card.dice .tic{background:linear-gradient(135deg,#f97316,#ffcf6b)} .type-card.toss .tic{background:linear-gradient(135deg,#12b8c4,#7fe9d8)} .type-card.scratch .tic{background:linear-gradient(135deg,#f43f7a,#ffb3c6)} .type-card span{font-size:.72rem;font-weight:700} .type-card.sel{border-color:var(--primary);background:var(--primary-soft)} [data-theme="dark"] .type-card.sel{background:var(--surface-2);border-color:var(--primary);color:var(--primary)} [data-theme="dark"] .type-card.sel span{color:var(--primary)} /* estimate bar */ .estimate{position:static;margin-top:22px;margin-bottom:4px} .estimate-inner{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:14px} .estimate .ei-info{flex:1} .estimate .ei-lbl{font-size:.72rem;color:var(--text-muted)} .estimate .ei-amt{font-weight:800;font-size:1.25rem} .estimate .ei-bal{font-size:.72rem;color:var(--text-muted);margin-top:1px} /* special users parser */ .parse-stats{display:flex;gap:8px;margin-top:10px} .parse-stats .ps{flex:1;text-align:center;padding:10px;border-radius:14px;background:var(--surface-2)} .parse-stats .ps .n{font-weight:800;font-size:1.1rem} .parse-stats .ps .l{font-size:0.686rem;color:var(--text-muted)} .ps.valid .n{color:var(--success)}.ps.dupe .n{color:var(--warning)}.ps.invalid .n{color:var(--danger)} .number-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;max-height:150px;overflow-y:auto} .num-chip{font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:10px;background:var(--success-soft);color:var(--success)} /* ============ CLAIM PAGE ============ */ .claim-page{min-height:100dvh;background:radial-gradient(1000px 500px at 50% -5%,var(--primary-soft),var(--bg) 55%);padding:20px 18px calc(30px + var(--safe-b))} .claim-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;margin-bottom:18px} .claim-brand img{width:30px;height:30px;border-radius:9px} .lifafa-card{ position:relative;border-radius:30px;padding:30px 24px;color:#fff;overflow:hidden; background:var(--grad);box-shadow:0 30px 70px -20px var(--primary);text-align:center; } .lifafa-card.dice{background:linear-gradient(150deg,#ff7a18,#ff9a3d 55%,#ffcf6b)} .lifafa-card.toss{background:linear-gradient(150deg,#12b5c9,#2fd4d0 55%,#7fe9d8)} .lifafa-card.scratch{background:linear-gradient(150deg,#ff4d7e,#ff6fa0 55%,#ffb3c6)} .lifafa-card::before{content:"";position:absolute;top:-60px;left:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.14)} .lifafa-card::after{content:"";position:absolute;bottom:-70px;right:-30px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.10)} .lc-inner{position:relative;z-index:2} .lc-type{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.22);padding:6px 14px;border-radius:999px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .lc-envelope{width:96px;height:96px;margin:18px auto 10px;border-radius:26px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:2.6rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);animation:floaty 3s var(--ease) infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .lc-title{font-size:1.4rem;font-weight:800;letter-spacing:-.02em} .lc-remark{opacity:.9;font-size:.9rem;margin-top:4px} .lc-reward{margin-top:18px;font-size:2.6rem;font-weight:900;letter-spacing:-.03em} .lc-reward small{font-size:.9rem;font-weight:700;opacity:.85;display:block;text-transform:uppercase;letter-spacing:.1em} .lc-meta{display:flex;justify-content:center;gap:22px;margin-top:16px} .lc-meta .m .v{font-weight:800;font-size:1.05rem} .lc-meta .m .k{font-size:0.686rem;opacity:.8} .lc-creator{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:.82rem;opacity:.92} .lc-creator img{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.5)} /* requirement checklist */ .req-list{margin-top:18px;display:flex;flex-direction:column;gap:10px} .req{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border)} .req .rq-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--text-muted)} .req.done .rq-ic{background:var(--success-soft);color:var(--success)} .req .rq-t{font-weight:700;font-size:.9rem}.req .rq-s{font-size:.76rem;color:var(--text-muted)} .req .rq-act{margin-left:auto} .req.done .rq-check{color:var(--success);font-size:1.2rem;margin-left:auto} /* ============ GAMES ============ */ .game-stage{text-align:center;padding:14px 0} .dice-3d{width:110px;height:110px;margin:14px auto;border-radius:24px;background:#fff;color:#222;display:grid;place-items:center;font-size:3.6rem;box-shadow:var(--shadow-lg);transition:transform .1s} .dice-3d.rolling{animation:diceRoll .6s linear infinite} @keyframes diceRoll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}} .dice-picks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0} .dice-pick{width:52px;height:52px;border-radius:14px;background:var(--surface-2);font-size:1.4rem;font-weight:800;display:grid;place-items:center;transition:transform .14s,background .2s} .dice-pick.sel{background:var(--grad);color:#fff;transform:scale(1.08)} .coin{width:130px;height:130px;margin:18px auto;border-radius:50%;background:linear-gradient(145deg,#ffd76b,#e0a922);display:grid;place-items:center;font-size:1.4rem;font-weight:900;color:#7a5400;box-shadow:0 16px 34px -12px rgba(224,169,34,.7),inset 0 0 0 6px rgba(255,255,255,.25);transform-style:preserve-3d;transition:transform .1s} .coin.flipping{animation:coinFlip .5s linear infinite} @keyframes coinFlip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}} .toss-picks{display:flex;justify-content:center;gap:12px;margin:8px 0} .toss-pick{flex:1;max-width:130px;padding:16px;border-radius:16px;background:var(--surface-2);font-weight:800;transition:transform .14s,background .2s;display:flex;flex-direction:column;align-items:center;gap:6px} .toss-pick i{font-size:1.4rem} .toss-pick.sel{background:var(--grad);color:#fff} .scratch-wrap{position:relative;width:100%;max-width:300px;aspect-ratio:1.5;margin:16px auto;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)} .scratch-result{position:absolute;inset:0;display:grid;place-items:center;background:var(--grad);color:#fff;text-align:center;padding:16px} .scratch-result .sr-amt{font-size:2rem;font-weight:900} .scratch-canvas{position:absolute;inset:0;touch-action:none;cursor:grab} .scratch-hint{text-align:center;font-size:.8rem;color:var(--text-muted);margin-top:6px} .win-burst{font-size:3rem;animation:pop .5s var(--ease)} @keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}} /* youtube preview */ .yt-preview{border-radius:18px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border)} .yt-preview img{width:100%;aspect-ratio:16/9;object-fit:cover} .yt-preview .yt-info{padding:12px 14px} .yt-preview .yt-title{font-weight:700;font-size:.9rem;line-height:1.3} .yt-preview .yt-ch{font-size:.76rem;color:var(--text-muted);margin-top:3px} .yt-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;overflow:hidden} .watch-timer{text-align:center;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;margin:10px 0} .watch-bar{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden} .watch-bar .fill{height:100%;background:var(--grad);width:0;transition:width .5s linear} /* history filters — one compact row on every device width */ .lf-history-filterbar{ display:grid; grid-template-columns:auto auto auto minmax(88px,1fr); align-items:center; gap:6px; width:100%; margin:0 0 14px; } .lf-history-filterbar .tf{ min-width:0; padding:7px 9px; border:0; border-radius:999px; background:var(--surface-2); color:var(--text-muted); font:inherit; font-size:.72rem; font-weight:750; line-height:1.1; white-space:nowrap; cursor:pointer; } .lf-history-filterbar .tf.active{background:var(--grad);color:#fff} .lf-type-select-wrap{ position:relative; display:block; min-width:0; } .lf-type-select-wrap select{ appearance:none; -webkit-appearance:none; width:100%; min-width:0; height:30px; padding:0 25px 0 10px; border:1px solid var(--border); border-radius:999px; outline:0; background:var(--surface-2); color:var(--text); font:inherit; font-size:.72rem; font-weight:750; cursor:pointer; } .lf-type-select-wrap i{ position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:0.67rem; color:var(--text-muted); pointer-events:none; } @media (max-width:339px){ .lf-history-filterbar{gap:4px;grid-template-columns:auto auto auto minmax(78px,1fr)} .lf-history-filterbar .tf{padding:7px 7px;font-size:0.686rem} .lf-type-select-wrap select{padding-left:8px;padding-right:21px;font-size:0.686rem} .lf-type-select-wrap i{right:7px;font-size:0.66rem} } /* history card */ .lifafa-item{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;margin-bottom:12px;transition:transform .14s} .lifafa-item:active{transform:scale(.99)} .lifafa-item .li-top{display:flex;align-items:center;gap:12px} .lifafa-item .li-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:1.1rem;flex:none} .li-ic.normal{background:linear-gradient(135deg,#7c5cff,#4ac1ff)} .li-ic.dice{background:linear-gradient(135deg,#f97316,#ffcf6b)} .li-ic.toss{background:linear-gradient(135deg,#12b8c4,#7fe9d8)} .li-ic.scratch{background:linear-gradient(135deg,#f43f7a,#ffb3c6)} .lifafa-item .li-title{font-weight:800} .lifafa-item .li-sub{font-size:.74rem;color:var(--text-muted)} .progress{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden;margin-top:12px} .progress .bar{height:100%;background:var(--grad)} .li-stats{display:flex;justify-content:space-between;margin-top:10px;font-size:.76rem;color:var(--text-muted)} .li-actions{display:flex;gap:8px;margin-top:12px} /* Lifafa history — inline actions + expandable compact details */ .lf-history-actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); } .lf-history-action{ appearance:none; min-width:0; min-height:38px; padding:8px 7px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:var(--text); display:flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-size:.72rem; font-weight:700; line-height:1; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .14s ease; } .lf-history-action i{font-size:.78rem;color:var(--primary);flex:none} .lf-history-action span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lf-history-action:active{transform:scale(.97)} .lf-history-action:disabled{opacity:.6;cursor:default} .lf-history-action.lf-details-toggle{background:var(--primary-soft);border-color:var(--border);color:var(--primary)} .lf-history-action.lf-details-toggle i{transition:transform .22s ease} .lf-history-action.lf-details-toggle.open i{transform:rotate(180deg)} .lf-inline-details{ display:grid; grid-template-rows:0fr; opacity:0; margin-top:0; transition:grid-template-rows .28s ease,opacity .2s ease,margin-top .28s ease; } .lf-inline-details.open{grid-template-rows:1fr;opacity:1;margin-top:12px} .lf-inline-details-inner{min-height:0;overflow:hidden} .lf-inline-details.open .lf-inline-details-inner{ padding-top:12px; border-top:1px dashed var(--border); } .lf-inline-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .lf-inline-kv{ min-width:0; padding:9px 10px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); } .lf-inline-label{font-size:0.682rem;color:var(--text-muted);line-height:1.15;margin-bottom:3px} .lf-inline-value{font-size:.78rem;font-weight:800;line-height:1.25;word-break:break-word} .lf-inline-remark{ display:flex; align-items:flex-start; gap:7px; padding:9px 10px; margin-bottom:8px; border-radius:11px; background:var(--surface-2); color:var(--text-muted); font-size:.73rem; line-height:1.35; } .lf-inline-remark i{color:var(--primary);margin-top:1px} .lf-inline-reqs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .lf-inline-reqs span{ display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:0.682rem; font-weight:700; } .lf-inline-loading{padding:12px;text-align:center;color:var(--text-muted);font-size:.75rem} @media (max-width:339px){ .lf-history-actions{grid-template-columns:repeat(2,minmax(0,1fr))} } /* refund actions in Lifafa history */ .lf-history-action.lf-refund-action{ background:var(--warning-soft); border-color:var(--border); color:var(--warning); } .lf-history-action.lf-refund-action i{color:var(--warning)} .lf-history-action.lf-referral-refund-action{ background:var(--success-soft); border-color:var(--border); color:var(--success); } .lf-history-action.lf-referral-refund-action i{color:var(--success)} /* Phase 32 — Free Lifafa promotion state in creator history */ .lf-promoted-note{margin-top:10px;display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:13px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));color:var(--primary)} .lf-promoted-note>i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);font-size:0.666rem;flex:0 0 auto} .lf-promoted-note>span{display:flex;flex-direction:column;min-width:0;gap:2px} .lf-promoted-note b{font-size:0.662rem;font-weight:900;color:var(--text)} .lf-promoted-note small{font-size:0.636rem;color:var(--text-muted)} .lf-history-action.lf-promote-action{color:var(--primary)} .lf-history-action.lf-promote-action i{color:var(--primary)} /* Telegram channel profile saved from Telegram */ .tg-saved-channel-logo{overflow:hidden;padding:0!important;border-radius:50%!important;background:var(--surface-2)!important}.tg-saved-channel-logo img{display:block;width:100%;height:100%;object-fit:cover} /* v2026.09.08.4 — full + short Lifafa links */ .lf-created-links,.lf-history-link-pair{display:grid;gap:8px} .lf-history-link-pair{margin-top:9px} .lf-share-link-row{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:9px;padding:10px 10px 10px 12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)} .lf-share-link-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.lf-share-link-copy span{font-size:0.666rem;font-weight:700;color:var(--text-muted)}.lf-share-link-copy b{font-size:.69rem;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)} .lf-share-copy-btn{width:38px;height:38px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;cursor:pointer;transition:transform .15s var(--ease),background .18s}.lf-share-copy-btn:active{transform:scale(.94);background:color-mix(in srgb,var(--primary) 18%,var(--surface))}.lf-share-copy-btn i{font-size:.75rem} [data-theme="dark"] .lf-share-link-row{background:color-mix(in srgb,var(--surface-2) 92%,var(--primary) 8%)} /* ================= RESPONSIVE LIFAFA ================= */ @media(max-width:339px){ .lf-history-filterbar{display:flex;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none} .lf-history-filterbar .tf,.lf-type-select-wrap{flex:0 0 auto} .lf-history-actions{grid-template-columns:1fr} .lf-dgrid{grid-template-columns:1fr} } /* 384-reference compact safety */ @media(max-width:339px){ .type-grid{gap:6px} .type-card{padding-left:4px;padding-right:4px} } /* ================= v2026.09.13.47 · LIFAFA READABILITY ================= */ .lf-promoted-note b,.lf-promoted-note small,.lf-share-link-copy span{font-size:.7rem} /* v205 · 20-at-a-time Lifafa history pagination */ #lifafa-loadmore{display:flex;justify-content:center;padding:12px 0 4px} .lf-loadmore-btn{min-width:150px;display:inline-flex;align-items:center;justify-content:center;gap:8px} .lf-loadmore-btn.is-loading{pointer-events:none;opacity:.78} .lf-history-enter{animation:lfHistoryEnter .32s cubic-bezier(.2,.72,.25,1) both} @keyframes lfHistoryEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){.lf-history-enter{animation:none}} /* ---- phase2.css ---- */ /* ================= PHASE-2 fixes & additions ================= */ /* 24 — kill mobile blue tap highlight + unwanted selection on controls */ *{ -webkit-tap-highlight-color: transparent; } button, a, [role="button"], .clickable, .nav-item, .icon-btn, .side-link, .set-row, .qa, .type-card, .tf, .key, .swatch, .toss-pick, .dice-pick, .pc-avatar, .profile-edit, .req, .lifafa-item, .auth-btn, .sheet-close, .wallet-act, .chip { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; } button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible){ outline: none; } /* keep copyable/selectable text selectable */ .selectable, .copy-value, input, textarea { -webkit-user-select: text; user-select: text; } /* 4 — bottom sheet: never full viewport, stable grab area, scrollable body */ .sheet{ max-height: calc(100dvh - 40px); } .sheet-grab{ flex: none; cursor: grab; touch-action: none; } .sheet-grab:active{ cursor: grabbing; } .sheet .sheet-body{ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* 8 — expandable sections (Create Lifafa toggles) */ .expandable{ display:grid; grid-template-rows:0fr; opacity:0; transition: grid-template-rows .32s var(--ease), opacity .28s var(--ease), margin .28s var(--ease); } .expandable > .exp-inner{ overflow:hidden; min-height:0; } .expandable.open{ grid-template-rows:1fr; opacity:1; } /* generic entrance util */ .fade-in{ animation: fadeIn .3s var(--ease) both; } @keyframes fadeIn{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} } /* 1 — login primary mobile */ .login-card{ margin-top:8px; } .otp-timer{ text-align:center; font-size:.82rem; color:var(--text-muted); margin-top:10px; } .otp-timer b{ color:var(--primary); font-variant-numeric:tabular-nums; } .change-num{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--primary); font-weight:700; margin-top:2px; } .divider{ display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:var(--text-muted); font-size:.76rem; font-weight:700; } .divider::before,.divider::after{ content:""; height:1px; flex:1; background:var(--border); } /* 3 — settings profile card */ .acct-card{ display:flex; align-items:center; gap:14px; } .acct-card .av{ width:64px; height:64px; border-radius:20px; object-fit:cover; background:var(--grad); flex:none; box-shadow:var(--shadow-sm); } .acct-card .info{ min-width:0; flex:1; } .acct-card .nm{ font-weight:800; font-size:1.05rem; } .acct-card .meta{ font-size:.8rem; color:var(--text-muted); display:flex; flex-direction:column; gap:2px; margin-top:3px; } .acct-card .edit{ margin-left:auto; } /* 10/11 — wallet action buttons + clickable safe */ .wallet-actions{ display:flex; gap:12px; margin-top:18px; } .wallet-act{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:16px; background:rgba(255,255,255,.18); color:#fff; font-weight:800; backdrop-filter:blur(6px); transition:transform .16s var(--ease); } .wallet-act:active{ transform:scale(.96); } .wallet-sub .ws{ cursor:pointer; transition:transform .16s var(--ease); } .wallet-sub .ws:active{ transform:scale(.97); } .quick-amts{ display:flex; gap:8px; margin:10px 0; } .quick-amts .qa-btn{ flex:1; padding:9px; border-radius:12px; background:var(--surface-2); font-weight:700; font-size:.85rem; } /* eye/copy row for passcode */ .pc-value-row{ display:flex; align-items:center; gap:10px; } .pc-value{ flex:1; font-size:clamp(.95rem,4.4vw,1.2rem); font-weight:800; letter-spacing:2px; white-space:nowrap; font-variant-numeric:tabular-nums; } .pc-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); color:var(--text); } /* 8 — reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* Settings profile: keep email icon and long address on one line. */ #acct-mobile,#acct-email{display:flex;align-items:center;gap:6px;min-width:0;width:100%;white-space:nowrap;overflow:hidden} #acct-mobile>i,#acct-email>i{flex:0 0 auto} #acct-mobile .acct-mobile-text,#acct-email .acct-email-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:339px){ .acct-card{gap:10px} .acct-card .av{width:54px;height:54px;border-radius:17px} .acct-card .edit{width:40px;height:40px;border-radius:12px} .acct-card .nm{font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acct-card .meta{font-size:.74rem} } /* ===== Banned Numbers — Single / Bulk manager ===== */ .bn-mode-seg{margin-bottom:2px}.bn-mode-seg .seg-btn{min-height:68px}.bn-pane{animation:bnPaneIn .2s var(--ease)} @keyframes bnPaneIn{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}} .bn-bulk-input{min-height:126px;font-size:16px;line-height:1.55}.bn-help{display:flex;align-items:flex-start;gap:8px;margin-top:8px;color:var(--text-muted);font-size:0.678rem;line-height:1.45}.bn-help i{color:var(--primary);margin-top:2px} .bn-divider{border:0;border-top:1.5px dashed color-mix(in srgb,var(--text-muted) 34%,transparent);margin:21px 0 17px}.bn-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.bn-list-head>div{display:flex;flex-direction:column;gap:2px}.bn-list-head b{font-size:.82rem}.bn-list-head span{font-size:0.668rem;color:var(--text-muted)} .bn-search-field{margin-bottom:4px}.bn-search-field .input{padding-left:42px}.bn-search-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.78rem;z-index:1} .bn-preview-empty,.bn-preview-error{min-height:78px;border:1px dashed var(--border);border-radius:16px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;text-align:center;gap:9px;padding:15px;color:var(--text-muted);font-size:0.682rem;line-height:1.45}.bn-preview-empty>i{color:var(--primary);font-size:1rem}.bn-preview-error{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--border));background:var(--danger-soft)}.bn-preview-loading .ld{width:16px;height:16px;border-width:2px} .bn-bulk-preview{border:1px solid var(--border);border-radius:17px;background:var(--surface);overflow:hidden}.bn-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-bottom:1px solid var(--border)}.bn-summary-grid>div{background:var(--surface-2);display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px}.bn-summary-grid b{font-size:.8rem}.bn-summary-grid span{font-size:0.642rem;color:var(--text-muted);font-weight:700}.bn-summary-grid .ready b{color:var(--success)}.bn-summary-grid .banned b{color:var(--danger)}.bn-summary-grid .invalid b{color:var(--warning)} .bn-preview-list{max-height:245px;overflow:auto;padding:4px 11px}.bn-preview-row{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 1px;border-bottom:1px solid var(--border)}.bn-preview-row:last-child{border-bottom:0}.bn-preview-row>i{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-size:0.674rem}.bn-preview-row>div{min-width:0;display:flex;flex-direction:column}.bn-preview-row b{font-size:0.686rem;letter-spacing:.02em}.bn-preview-row span{font-size:0.65rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bn-preview-row em{font-style:normal;font-size:0.646rem;font-weight:800;padding:4px 6px;border-radius:999px;white-space:nowrap}.bn-preview-row.ready>i,.bn-preview-row.ready em{background:var(--success-soft);color:var(--success)}.bn-preview-row.banned>i,.bn-preview-row.banned em{background:var(--danger-soft);color:var(--danger)}.bn-preview-row.invalid>i,.bn-preview-row.invalid em{background:var(--warning-soft);color:var(--warning)} .bn-bulk-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}.bn-bulk-actions .btn{min-width:0}.bn-unban-all{border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));color:var(--danger)}.bn-bulk-actions .btn:disabled{opacity:.42} .bn-list-main{flex:1;min-width:0;text-align:left!important;padding-left:0!important}.bn-list-main>div:first-child{font-weight:800;font-size:.72rem}.bn-list-main .tiny{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bn-empty{padding:24px 10px;display:flex;flex-direction:column;align-items:center;text-align:center}.bn-empty i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);margin-bottom:8px}.bn-empty b{font-size:.76rem}.bn-empty span{margin-top:3px;color:var(--text-muted);font-size:0.666rem} .bn-confirm-copy{display:block;line-height:1.45}.bn-confirm-list{display:block;max-height:170px;overflow:auto;margin-top:11px;padding:6px 9px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);text-align:left}.bn-confirm-list>span{display:flex;align-items:center;gap:7px;padding:7px 2px;border-bottom:1px solid var(--border);font-size:.7rem;font-weight:700;color:var(--text)}.bn-confirm-list>span:last-child{border-bottom:0}.bn-confirm-list i{width:18px;text-align:center;color:var(--primary);flex:none}.bn-confirm-list>span>span{display:flex;min-width:0;flex:1;flex-direction:column;gap:1px}.bn-confirm-list b{font-size:0.682rem}.bn-confirm-list small{font-size:0.644rem;color:var(--text-muted);font-weight:700}.bn-confirm-list>span.skip{opacity:.62}.bn-confirm-list>span.skip i{color:var(--text-muted)}.bn-confirm-list>span.apply small{color:var(--primary)} @media(max-width:339px){.bn-summary-grid span{font-size:0.634rem}.bn-preview-row{grid-template-columns:23px minmax(0,1fr) auto;gap:6px}.bn-preview-row em{font-size:0.636rem;padding:4px 5px}.bn-bulk-actions{gap:7px}} /* ===== Phase 2026.09.04.3 — wallet card actions + OTP rhythm ===== */ /* OTP input → resend timer → action button: slightly more breathing room. */ .otp-step-timer{margin-top:14px!important;} .otp-step-action{margin-top:14px!important;} /* Wallet balance card: original two-info-card layout with a copyable Finzo number. */ .wallet-safe-chevron{font-size:0.666rem;opacity:.72;transition:transform .16s var(--ease)} .wallet-sub .ws:active .wallet-safe-chevron{transform:translateX(2px)} .wallet-finzo-card{cursor:default!important;min-width:0} .wallet-finzo-card:active{transform:none!important} .wallet-finzo-line{display:flex;align-items:center;gap:7px;min-width:0} .wallet-finzo-line .v{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} .wallet-finzo-copy{width:27px;height:27px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:0.68rem;transition:transform .15s var(--ease),background .2s} .wallet-finzo-copy:active{transform:scale(.91);background:rgba(255,255,255,.23)} .wallet-card-divider{height:0;border-top:1.5px dashed rgba(255,255,255,.25);margin:17px 1px 0} .wallet-card-divider+.wallet-actions{margin-top:14px} /* ===== Phase 2026.09.04.5 — unified expandable mobile-number previews ===== */ .mobile-preview{margin-top:10px;border:1px solid var(--border);border-radius:17px;background:var(--surface);overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.035)} .mp-head{display:flex;align-items:stretch;min-height:58px;background:var(--surface-2)} .mp-counts{flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));align-items:stretch} .mp-stat{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 4px;border-right:1px solid var(--border);text-align:center} .mp-stat b{font-size:.82rem;line-height:1.15;font-weight:850;font-variant-numeric:tabular-nums}.mp-stat span{max-width:100%;font-size:0.648rem;line-height:1.15;color:var(--text-muted);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mp-stat.valid b{color:var(--success)}.mp-stat.duplicate b{color:var(--warning)}.mp-stat.invalid b,.mp-stat.banned b{color:var(--danger)}.mp-stat.no-account b{color:var(--warning)} .mp-toggle{width:48px;flex:0 0 48px;border:0;background:transparent;color:var(--text-muted);display:grid;place-items:center;font-size:.72rem;cursor:pointer;transition:background .18s,color .18s}.mp-toggle:not(:disabled):active{background:var(--primary-soft);color:var(--primary)}.mp-toggle:disabled{opacity:.35;cursor:default}.mp-toggle i{transition:transform .28s var(--ease)}.mobile-preview.expanded .mp-toggle i{transform:rotate(180deg)} .mp-list-wrap{max-height:0;opacity:0;overflow:hidden;transition:max-height .34s var(--ease),opacity .22s ease}.mobile-preview.expanded .mp-list-wrap{max-height:285px;opacity:1;border-top:1px solid var(--border)} .mp-list{max-height:284px;overflow:auto;padding:4px 11px;background:var(--surface)} .mp-row{display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 1px;border-bottom:1px solid var(--border)}.mp-row:last-child{border-bottom:0} .mp-row>i{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-size:0.678rem}.mp-row>div{min-width:0;display:flex;flex-direction:column;gap:1px}.mp-row b{font-size:.7rem;letter-spacing:.015em;font-variant-numeric:tabular-nums}.mp-row span{font-size:0.654rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-row em{font-style:normal;font-size:0.648rem;font-weight:800;padding:4px 7px;border-radius:999px;white-space:nowrap} .mp-row.valid>i,.mp-row.valid em{background:var(--success-soft);color:var(--success)}.mp-row.duplicate>i,.mp-row.duplicate em,.mp-row.self>i,.mp-row.self em{background:var(--warning-soft);color:var(--warning)}.mp-row.invalid>i,.mp-row.invalid em,.mp-row.banned>i,.mp-row.banned em{background:var(--danger-soft);color:var(--danger)}.mp-row.no-account>i,.mp-row.no-account em{background:var(--warning-soft);color:var(--warning)} .mp-list-empty{min-height:70px;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;color:var(--text-muted);font-size:0.674rem;text-align:center}.mp-list-empty i{color:var(--primary)} #sp-preview,#bulk-number-preview{margin-top:4px}.bn-bulk-preview.mobile-preview{margin-top:0}.bn-preview-empty+.bn-bulk-actions,.mobile-preview+.bn-bulk-actions{margin-top:11px} @media(max-width:339px){.mp-head{min-height:56px}.mp-toggle{width:42px;flex-basis:42px}.mp-stat{padding-left:2px;padding-right:2px}.mp-stat b{font-size:.76rem}.mp-stat span{font-size:0.638rem}.mp-row{grid-template-columns:25px minmax(0,1fr) auto;gap:6px}.mp-row>i{width:25px;height:25px}.mp-row em{font-size:0.64rem;padding:4px 5px}} #bn-bulk-preview.mobile-preview{margin-top:0} /* ===== Phase 2026.09.04.6 — Number Tool + compact five-state Bulk preview ===== */ #bulk-number-preview .mp-counts{grid-template-columns:repeat(5,minmax(0,1fr))} #bulk-number-preview .mp-stat{padding-left:2px;padding-right:2px} #bulk-number-preview .mp-stat span{font-size:0.642rem;letter-spacing:-.01em} #bulk-number-preview .mp-toggle{width:44px;flex-basis:44px} @media(max-width:339px){#bulk-number-preview .mp-toggle{width:38px;flex-basis:38px}#bulk-number-preview .mp-stat b{font-size:.72rem}#bulk-number-preview .mp-stat span{font-size:0.632rem}} .number-tool-page{padding-bottom:10px} .nt-builder-card{overflow:visible} .nt-intro{display:flex;align-items:flex-start;gap:11px;padding:12px;margin-bottom:15px;border-radius:15px;background:var(--surface-2);border:1px solid var(--border)} .nt-intro-icon{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.9rem} .nt-intro>div:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}.nt-intro b{font-size:.78rem}.nt-intro span{font-size:0.674rem;line-height:1.48;color:var(--text-muted)} .nt-textarea-wrap{position:relative}.nt-textarea-wrap .textarea{min-height:142px;padding-right:82px} .nt-paste-btn{position:absolute;top:9px;right:9px;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--primary);display:flex;align-items:center;gap:6px;font-family:inherit;font-size:0.674rem;font-weight:800;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .15s var(--ease),background .18s}.nt-paste-btn:active{transform:scale(.96);background:var(--primary-soft)} #nt-preview{margin-top:-2px}.nt-name-field{margin-top:14px}.nt-name-field label .muted{font-size:0.674rem;font-weight:600} .nt-section-divider{height:0;border-top:1.5px dashed var(--border);margin:25px 2px 20px} .nt-collections-title{align-items:flex-end}.nt-collections-title>div{display:flex;flex-direction:column;gap:3px}.nt-collections-title p{font-size:0.67rem;color:var(--text-muted);margin:0} .nt-collection-list{display:grid;gap:11px}.nt-collection-card{padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)} .nt-collection-top{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px}.nt-collection-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.9rem} .nt-collection-name{min-width:0;display:flex;flex-direction:column;gap:2px}.nt-collection-name b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nt-collection-name span{font-size:0.66rem;color:var(--text-muted)} .nt-code-pill{max-width:112px;min-height:34px;padding:0 9px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:11px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:0.68rem;font-weight:850;letter-spacing:.035em;cursor:pointer}.nt-code-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nt-code-pill i{flex:none;font-size:0.674rem} .nt-collection-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--border)}.nt-collection-meta>div{min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-areas:'icon label' 'icon value';align-items:center;padding:8px 9px;border-radius:12px;background:var(--surface-2)}.nt-collection-meta i{grid-area:icon;width:24px;color:var(--primary);font-size:0.68rem}.nt-collection-meta span{grid-area:label;font-size:0.65rem;color:var(--text-muted);font-weight:700}.nt-collection-meta b{grid-area:value;margin-top:1px;font-size:0.672rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nt-empty{border:1px dashed var(--border);border-radius:18px;background:var(--surface)} @media(max-width:339px){.nt-collection-top{grid-template-columns:36px minmax(0,1fr) auto;gap:8px}.nt-collection-icon{width:36px;height:36px}.nt-code-pill{max-width:96px;padding:0 7px;font-size:0.668rem}.nt-collection-meta{gap:6px}.nt-collection-meta>div{padding:7px}} /* ===== Phase 2026.09.04.7 — clipboard ribbons + Create Lifafa Defaults ===== */ .nt-textarea-wrap{position:relative;border-radius:14px} .nt-textarea-wrap .textarea{padding-right:88px} .input-paste-ribbon{position:absolute;right:7px;top:9px;z-index:2;height:32px;min-width:70px;padding:0 10px 0 13px;border:0;border-radius:8px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:0.672rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 5px 14px rgba(15,23,42,.06);clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 50%);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .16s var(--ease),background .18s,color .18s} .input-paste-ribbon i{font-size:0.686rem}.input-paste-ribbon:active{transform:scale(.96);background:var(--primary);color:#fff}.input-paste-ribbon:focus{outline:none} .nt-paste-ribbon{top:10px;right:8px} .code-paste-wrap{position:relative}.code-paste-wrap .input{padding-right:78px}.code-paste-ribbon{top:7px;right:7px;height:34px;min-width:66px;padding-left:12px;font-size:0.666rem} .lf-create-title-row{align-items:center}.lf-defaults-open{height:34px;padding:0 11px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:11px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;gap:7px;font-family:inherit;font-size:0.684rem;font-weight:800;cursor:pointer;transition:transform .16s var(--ease),background .18s}.lf-defaults-open:active{transform:scale(.96);background:color-mix(in srgb,var(--primary) 16%,var(--surface))}.lf-defaults-open i{font-size:0.686rem} .lf-defaults-sheet{display:flex;flex-direction:column;gap:13px;padding-bottom:2px} .lfd-hero{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));border-radius:17px;background:linear-gradient(135deg,var(--primary-soft),var(--surface))}.lfd-hero-icon{width:40px;height:40px;flex:none;border-radius:13px;background:var(--surface);color:var(--primary);display:grid;place-items:center;box-shadow:var(--shadow-sm)}.lfd-hero>div:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}.lfd-hero b{font-size:.78rem}.lfd-hero span{font-size:0.674rem;line-height:1.45;color:var(--text-muted)} .lfd-fields{display:grid;gap:3px}.lfd-fields .field{margin-bottom:8px}.lfd-fields label .muted{font-size:0.666rem;font-weight:600} .lfd-group-title{display:flex;flex-direction:column;gap:3px;margin:2px 2px 0}.lfd-group-title>span{font-size:.72rem;font-weight:850}.lfd-group-title small{font-size:0.662rem;line-height:1.4;color:var(--text-muted)} .lfd-toggle-list{border:1px solid var(--border);border-radius:17px;background:var(--surface);overflow:hidden}.lfd-toggle-row{min-height:61px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}.lfd-toggle-row:last-child{border-bottom:0}.lfd-toggle-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--primary);font-size:.78rem}.lfd-toggle-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.lfd-toggle-copy b{font-size:.7rem}.lfd-toggle-copy span{font-size:0.656rem;line-height:1.35;color:var(--text-muted)} .lfd-special-code{overflow:hidden;transition:max-height .28s var(--ease),opacity .22s}.lfd-special-code.hidden{display:none}.lfd-special-code .lfd-toggle-row{background:var(--surface-2);padding-left:22px}.lfd-special-code .lfd-toggle-icon{background:var(--primary-soft)} .lfd-note{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-radius:14px;background:var(--surface-2);color:var(--text-muted);font-size:0.662rem;line-height:1.45}.lfd-note i{color:var(--primary);margin-top:2px} .lf-default-setup-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.lf-default-setup-row .lic{width:38px;height:38px;border-radius:12px;background:var(--danger-soft);color:var(--danger);display:grid;place-items:center}.lf-default-setup-row>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.lf-default-setup-row b{font-size:0.684rem}.lf-default-setup-row span{font-size:0.652rem;line-height:1.3;color:var(--text-muted)}.lf-default-setup-row .btn{width:auto;white-space:nowrap;padding-left:10px;padding-right:10px;font-size:0.662rem} @media(max-width:339px){.lf-defaults-open span{display:none}.lf-defaults-open{width:34px;padding:0;justify-content:center}.lfd-toggle-row{grid-template-columns:33px minmax(0,1fr) auto;padding-left:10px;padding-right:10px}.lfd-toggle-icon{width:33px;height:33px}.lf-default-setup-row{grid-template-columns:34px minmax(0,1fr)}.lf-default-setup-row .lic{width:34px;height:34px}.lf-default-setup-row .btn{grid-column:2;justify-self:start}} /* ===== Claim All Lifafa tool ===== */ .claim-all-page{padding-bottom:22px} .claim-all-heading{align-items:flex-end;margin-bottom:14px}.claim-all-heading>div{display:flex;flex-direction:column;gap:6px}.claim-all-heading h2{margin:0;font-size:1.18rem;letter-spacing:-.025em}.claim-all-heading h2 span{background:linear-gradient(90deg,var(--primary),#8b5cf6,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 24px color-mix(in srgb,var(--primary) 18%,transparent)}.claim-all-heading p{margin:0;color:var(--text-muted);font-size:.74rem;line-height:1.55;max-width:470px} .claim-all-number-card{position:relative;padding:15px;border:1px solid color-mix(in srgb,var(--border) 78%,var(--primary) 22%);border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,#fff),color-mix(in srgb,var(--surface) 92%,var(--primary) 8%));box-shadow:0 14px 30px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.65);overflow:hidden}.claim-all-number-card:before{content:'';position:absolute;width:115px;height:115px;right:-45px;top:-58px;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,transparent);filter:blur(2px);pointer-events:none}.claim-all-number-head{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 38px;align-items:center;gap:11px}.claim-all-number-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--primary),color-mix(in srgb,var(--primary) 72%,#fff));color:#fff;font-size:1rem;box-shadow:0 8px 16px color-mix(in srgb,var(--primary) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.38)}.claim-all-number-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.claim-all-number-copy b{font-size:.84rem}.claim-all-number-copy span{font-size:0.684rem;color:var(--text-muted);line-height:1.35}.claim-all-settings-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface) 88%,var(--primary) 12%);color:var(--primary);display:grid;place-items:center;font-size:.8rem;box-shadow:0 5px 12px rgba(15,23,42,.07);transition:transform .18s ease}.claim-all-settings-btn:active{transform:scale(.93) rotate(8deg)} .claim-all-number-input-wrap{position:relative;margin-top:13px;transition:opacity .2s ease,transform .2s ease}.claim-all-number-input-wrap.is-hidden{display:none}.claim-all-number-input-wrap .input{height:52px;padding-right:94px;font-size:.88rem;font-weight:760;letter-spacing:.025em;background:color-mix(in srgb,var(--surface) 93%,transparent)}.claim-all-save-btn{position:absolute;right:6px;top:6px;min-width:78px;height:40px;padding:0 13px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 75%,#8b5cf6));color:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font:800 .69rem/1 inherit;box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 26%,transparent)}.claim-all-save-btn:active{transform:scale(.97)} .claim-all-account{position:relative;margin-top:11px}.claim-all-account:empty{display:none}.claim-all-account-ok{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px;border:1px solid color-mix(in srgb,#22a06b 18%,var(--border));border-radius:15px;background:color-mix(in srgb,#22a06b 7%,var(--surface))}.claim-all-account-ok img{width:38px;height:38px;border-radius:12px;object-fit:cover;box-shadow:0 5px 12px rgba(15,23,42,.12)}.claim-all-account-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.claim-all-account-copy b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.claim-all-account-copy span{font-size:0.676rem;color:var(--text-muted);line-height:1.35}.claim-all-account-copy span i{color:#22a06b;margin-right:4px}.claim-all-change{border:0;background:var(--surface);color:var(--primary);border-radius:10px;padding:7px 9px;display:flex;align-items:center;gap:5px;font:800 .62rem/1 inherit;box-shadow:0 4px 10px rgba(15,23,42,.07)}.claim-all-change:active{transform:scale(.96)} .claim-all-account-saved{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:7px 8px 7px 11px;border:1px solid color-mix(in srgb,#22a06b 18%,var(--border));border-radius:13px;background:color-mix(in srgb,#22a06b 5%,var(--surface));box-shadow:0 5px 12px rgba(15,23,42,.045)}.claim-all-account-saved>span{display:flex;align-items:center;gap:7px;min-width:0;color:var(--text)}.claim-all-account-saved>span i{color:#22a06b;font-size:.78rem}.claim-all-account-saved>span b{font-size:.74rem;letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.claim-all-account-warn{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid color-mix(in srgb,#f59e0b 28%,var(--border));border-radius:15px;background:color-mix(in srgb,#f59e0b 8%,var(--surface))}.claim-all-warn-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,#f59e0b 15%,var(--surface));color:#d97706}.claim-all-account-warn>div:nth-child(2){display:flex;flex-direction:column;gap:3px}.claim-all-account-warn b{font-size:.76rem}.claim-all-account-warn span{font-size:0.674rem;line-height:1.45;color:var(--text-muted)} .claim-all-divider{border-top:1px dashed color-mix(in srgb,var(--border) 70%,var(--primary) 30%);margin:19px 2px 16px}.claim-all-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.claim-all-list-head>div{min-width:0}.claim-all-list-head h3{margin:0;font-size:.98rem;letter-spacing:-.01em}.claim-all-list-head p{margin:4px 0 0;font-size:0.686rem;line-height:1.45;color:var(--text-muted)}.claim-all-refresh{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--primary);display:grid;place-items:center;box-shadow:0 5px 12px rgba(15,23,42,.06)} .claim-all-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:13px}.claim-all-summary:empty{display:none}.claim-all-summary>div{min-width:0;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 92%,var(--primary) 8%));box-shadow:0 6px 14px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.5)}.claim-all-summary-ic{width:31px;height:31px;flex:0 0 31px;border-radius:10px;display:grid;place-items:center;font-size:0.686rem}.claim-all-summary .available .claim-all-summary-ic{background:var(--primary-soft);color:var(--primary)}.claim-all-summary .claimed .claim-all-summary-ic{background:color-mix(in srgb,#22a06b 13%,var(--surface));color:#16865a}.claim-all-summary .blocked .claim-all-summary-ic{background:color-mix(in srgb,#ef4444 12%,var(--surface));color:#dc2626}.claim-all-summary-copy{min-width:0;display:flex;flex-direction:column;gap:1px}.claim-all-summary-copy b{font-size:.78rem;line-height:1}.claim-all-summary-copy small{color:var(--text-muted);font-size:0.674rem;font-weight:760;line-height:1.2} .claim-all-list{display:grid;gap:14px}.claim-all-card{position:relative;padding:15px;border:1px solid color-mix(in srgb,var(--border) 76%,#7c3aed 24%);border-radius:23px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 97%,#fff),color-mix(in srgb,var(--surface) 88%,#7c3aed 12%));box-shadow:0 16px 30px rgba(15,23,42,.12),0 3px 0 color-mix(in srgb,#7c3aed 12%,transparent),inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(15,23,42,.04);overflow:hidden;transform:translateZ(0)}.claim-all-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#8b5cf6,#6366f1);box-shadow:2px 0 12px rgba(124,58,237,.25)}.claim-all-card.claimed:before{background:linear-gradient(180deg,#34d399,#16a34a)}.claim-all-card.blocked:before{background:linear-gradient(180deg,#fb7185,#dc2626)}.claim-all-card-shine{position:absolute;width:120px;height:120px;right:-45px;top:-62px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.45),rgba(139,92,246,.08) 48%,transparent 72%);pointer-events:none}.claim-all-card-top{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:start;gap:11px}.claim-all-type{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#8b5cf6,#6366f1);color:#fff;font-size:.98rem;box-shadow:0 9px 17px rgba(99,102,241,.28),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(15,23,42,.12)}.claim-all-card.claimed .claim-all-type{background:linear-gradient(145deg,#34d399,#16a34a)}.claim-all-card.blocked .claim-all-type{background:linear-gradient(145deg,#fb7185,#dc2626)}.claim-all-card-title{min-width:0}.claim-all-card-title>div{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}.claim-all-card-title>div>span{font-size:0.676rem;color:var(--text-muted);font-weight:780;white-space:nowrap}.claim-all-card-title em{font-style:normal;font-size:0.674rem;font-weight:850;padding:4px 7px;border-radius:999px}.claim-all-card-title em.available{background:var(--primary-soft);color:var(--primary)}.claim-all-card-title em.claimed{background:color-mix(in srgb,#22a06b 13%,var(--surface));color:#16865a}.claim-all-card-title em.blocked{background:color-mix(in srgb,#ef4444 12%,var(--surface));color:#dc2626}.claim-all-card-title h4{font-size:.88rem;margin:5px 0 0;line-height:1.28;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.claim-all-amount{min-width:66px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:7px 9px;border-radius:12px;background:rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 5px 12px rgba(15,23,42,.055)}.claim-all-amount small{font-size:0.674rem;color:var(--text-muted);font-weight:760}.claim-all-amount b{font-size:.78rem;color:var(--primary);white-space:nowrap}.claim-all-remark{position:relative;margin-top:11px;padding:9px 10px;border-radius:12px;background:color-mix(in srgb,var(--surface) 78%,#fff 22%);display:flex;align-items:flex-start;gap:7px;font-size:0.682rem;color:var(--text-muted);line-height:1.45;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}.claim-all-remark i{color:var(--primary);margin-top:2px}.claim-all-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.claim-all-badges span{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--surface) 77%,#8b5cf6 23%);color:var(--text);font-size:0.678rem;font-weight:780;box-shadow:0 4px 9px rgba(15,23,42,.055)}.claim-all-badges i{color:#7c3aed}.claim-all-card-foot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:11px;margin-top:12px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--border) 72%,#8b5cf6 28%)}.claim-all-progress{display:flex;flex-direction:column;gap:4px;color:var(--text-muted);font-size:0.68rem}.claim-all-progress span:first-child{font-size:.71rem}.claim-all-progress b{color:var(--text);font-size:.74rem}.claim-all-open{height:39px;border:0;border-radius:12px;padding:0 13px;background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font:800 .68rem/1 inherit;box-shadow:0 8px 16px rgba(99,102,241,.24)}.claim-all-open:active{transform:translateY(1px) scale(.98)} .claim-all-loading{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:var(--text-muted)}.claim-all-loading .spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.claim-all-loading b{font-size:.8rem;color:var(--text)}.claim-all-loading span{font-size:0.682rem}.claim-all-empty{margin-top:4px}.claim-all-empty h3{font-size:.86rem}.claim-all-empty p{font-size:.69rem;max-width:340px;margin-inline:auto;line-height:1.55} .claim-all-settings-sheet{display:flex;flex-direction:column;gap:13px}.cas-hero{display:grid;grid-template-columns:43px minmax(0,1fr);align-items:center;gap:11px;padding:12px;border-radius:16px;background:linear-gradient(135deg,var(--primary-soft),color-mix(in srgb,var(--surface) 88%,#8b5cf6 12%));border:1px solid color-mix(in srgb,var(--border) 75%,var(--primary) 25%)}.cas-hero>div{width:43px;height:43px;border-radius:14px;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 7px 14px color-mix(in srgb,var(--primary) 25%,transparent)}.cas-hero section{display:flex;flex-direction:column;gap:3px}.cas-hero b{font-size:.79rem}.cas-hero span{font-size:0.676rem;line-height:1.4;color:var(--text-muted)}.cas-toggle-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);transition:opacity .2s}.cas-toggle-row.is-disabled{opacity:.48;filter:saturate(.55)}.cas-toggle-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.cas-toggle-copy{display:flex;flex-direction:column;gap:3px}.cas-toggle-copy b{font-size:.74rem}.cas-toggle-copy span{font-size:0.67rem;line-height:1.42;color:var(--text-muted)}.cas-info{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:13px;font-size:0.672rem;line-height:1.45}.cas-info.owner{background:color-mix(in srgb,#22a06b 8%,var(--surface));color:var(--text-muted)}.cas-info.owner i{color:#16865a}.cas-info.locked{background:var(--surface-2);color:var(--text-muted)}.cas-info i{margin-top:2px} @media(max-width:339px){.claim-all-heading h2{font-size:1.08rem}.claim-all-number-head{grid-template-columns:40px minmax(0,1fr) 36px}.claim-all-number-icon{width:40px;height:40px}.claim-all-number-copy span{font-size:0.672rem}.claim-all-account-ok,.claim-all-account-warn{grid-template-columns:34px minmax(0,1fr) auto;gap:8px}.claim-all-account-ok img,.claim-all-warn-icon{width:34px;height:34px}.claim-all-change span{display:none}.claim-all-summary{gap:6px}.claim-all-summary>div{gap:6px;padding:8px}.claim-all-summary-ic{width:27px;height:27px;flex-basis:27px}.claim-all-summary-copy b{font-size:.72rem}.claim-all-summary-copy small{font-size:0.67rem}.claim-all-card-top{grid-template-columns:42px minmax(0,1fr) auto;gap:8px}.claim-all-type{width:42px;height:42px}.claim-all-card-title h4{font-size:.82rem}.claim-all-amount{min-width:58px;padding:6px 7px}.claim-all-amount b{font-size:.7rem}.claim-all-card-foot{grid-template-columns:1fr}.claim-all-open{width:100%}} /* Claim All v2026.09.04.11 — unclaimed-only list + direct Telegram batch claim */ .claim-all-card:before{display:none!important}.claim-all-card{padding-left:15px} .claim-all-amount{background:color-mix(in srgb,var(--surface) 90%,#fff 10%);border:1px solid color-mix(in srgb,var(--border) 78%,var(--primary) 22%)} .claim-all-amount b{color:color-mix(in srgb,var(--primary) 82%,var(--text) 18%)} [data-theme="dark"] .claim-all-amount{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 94%,var(--primary) 6%),color-mix(in srgb,var(--surface) 88%,var(--primary) 12%));border-color:color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 15px rgba(0,0,0,.16)} [data-theme="dark"] .claim-all-amount small{color:color-mix(in srgb,var(--text) 66%,var(--text-muted))} [data-theme="dark"] .claim-all-amount b{color:color-mix(in srgb,var(--primary) 58%,#fff 42%)} .claim-all-batch-action:empty{display:none}.claim-all-batch-action{margin:0 0 14px}.claim-all-batch-panel{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 78%,var(--surface)),color-mix(in srgb,var(--surface) 91%,#8b5cf6 9%));box-shadow:0 10px 22px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.55)}.claim-all-batch-panel-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#8b5cf6,#6366f1);color:#fff;box-shadow:0 8px 16px rgba(99,102,241,.24)}.claim-all-batch-panel-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.claim-all-batch-panel-copy b{font-size:.8rem;color:var(--text)}.claim-all-batch-panel-copy span{font-size:0.68rem;line-height:1.4;color:var(--text-muted)}.claim-all-batch-btn{height:40px;border:0;border-radius:13px;padding:0 12px;background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff;display:flex;align-items:center;gap:7px;font:800 .68rem/1 inherit;box-shadow:0 8px 16px rgba(99,102,241,.22)}.claim-all-batch-btn:disabled{opacity:.46;box-shadow:none}.claim-all-batch-btn:not(:disabled):active{transform:translateY(1px) scale(.985)} [data-theme="dark"] .claim-all-batch-panel{background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 88%,var(--primary) 12%),var(--surface-2));box-shadow:0 10px 24px rgba(0,0,0,.2)} .alert-card p .claim-all-confirm-copy,.alert-card p .claim-all-confirm-stats,.alert-card p .claim-all-confirm-rules,.alert-card p .claim-all-confirm-note{display:block;text-align:left}.claim-all-confirm-copy{font-size:.72rem;line-height:1.55;color:var(--text-muted)}.claim-all-confirm-copy b{color:var(--text)}.claim-all-confirm-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:11px 0}.claim-all-confirm-stats>span{min-width:0;padding:9px 6px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);text-align:center}.claim-all-confirm-stats b{display:block;font-size:.78rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.claim-all-confirm-stats small{display:block;margin-top:3px;font-size:0.664rem;color:var(--text-muted);line-height:1.25}.claim-all-confirm-rules{padding:10px;border-radius:13px;background:color-mix(in srgb,var(--primary-soft) 70%,var(--surface));font-size:0.678rem;line-height:1.45}.claim-all-confirm-rules>b{display:block;margin-bottom:5px;color:var(--text);font-size:0.686rem}.claim-all-confirm-rules>span{display:flex;align-items:flex-start;gap:7px;margin-top:5px;color:var(--text-muted)}.claim-all-confirm-rules i{color:#16a34a;margin-top:2px}.claim-all-confirm-rules .no i{color:#dc2626}.claim-all-confirm-note{margin-top:9px;padding:9px 10px;border-radius:12px;background:color-mix(in srgb,#229ed9 8%,var(--surface));color:var(--text-muted);font-size:0.674rem;line-height:1.45}.claim-all-confirm-note i{color:#229ed9;margin-right:5px} .claim-all-history-divider{margin-top:22px}.claim-all-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.claim-all-history-head>div{min-width:0}.claim-all-history-head h3{margin:0;font-size:.98rem}.claim-all-history-head p{margin:4px 0 0;font-size:0.682rem;line-height:1.4;color:var(--text-muted)}.claim-all-history-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:0.674rem;font-weight:800}.claim-all-history{display:grid;gap:9px}.claim-all-history-card{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--primary) 6%));color:var(--text);text-align:left;box-shadow:0 7px 16px rgba(15,23,42,.055)}.cah-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 88%,#fff 12%),var(--primary));color:#fff}.cah-copy,.cah-amount{display:flex;flex-direction:column;gap:3px;min-width:0}.cah-copy b{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cah-copy small,.cah-amount small{font-size:0.668rem;color:var(--text-muted)}.cah-amount{text-align:right}.cah-amount b{font-size:.74rem;color:var(--primary);white-space:nowrap}.cah-arrow{font-size:0.674rem;color:var(--text-muted)}.claim-all-history-empty,.claim-all-history-loading{min-height:78px;border:1px dashed var(--border);border-radius:15px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:0.68rem;padding:12px;text-align:center}.claim-all-history-empty i{color:var(--primary)} [data-theme="dark"] .claim-all-history-card{background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:0 8px 18px rgba(0,0,0,.17)} .claim-all-history-sheet{display:flex;flex-direction:column;gap:12px}.cah-sheet-hero{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:11px;padding:13px;border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,#22c55e 10%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface)));border:1px solid color-mix(in srgb,#22c55e 20%,var(--border))}.cah-sheet-hero>span{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#16a34a;color:#fff;font-size:1rem;box-shadow:0 8px 16px rgba(22,163,74,.2)}.cah-sheet-hero>div{display:flex;flex-direction:column;gap:2px}.cah-sheet-hero small{font-size:0.67rem;color:var(--text-muted)}.cah-sheet-hero b{font-size:1rem;color:var(--text)}.cah-sheet-hero em{font-style:normal;font-size:0.674rem;color:var(--text-muted)}.cah-sheet-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cah-sheet-meta>span{min-width:0;padding:9px 10px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);display:flex;flex-direction:column;gap:3px}.cah-sheet-meta small{font-size:0.662rem;color:var(--text-muted)}.cah-sheet-meta b{font-size:0.68rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cah-sheet-list{display:grid;gap:7px;max-height:48vh;overflow:auto;padding-right:2px}.cah-sheet-list>div{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.cah-num{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.672rem;font-weight:850}.cah-item-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.cah-item-copy b{font-size:0.686rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cah-item-copy small{font-size:0.662rem;color:var(--text-muted)}.cah-item-copy small i{color:#229ed9;margin-right:4px}.cah-sheet-list strong{font-size:0.686rem;color:var(--primary);white-space:nowrap} @media(max-width:400px){.claim-all-batch-panel{grid-template-columns:38px minmax(0,1fr);}.claim-all-batch-panel-icon{width:38px;height:38px}.claim-all-batch-btn{grid-column:1/-1;width:100%;justify-content:center}.claim-all-history-card{grid-template-columns:36px minmax(0,1fr) auto 14px;gap:8px}.cah-icon{width:36px;height:36px}.cah-sheet-meta{grid-template-columns:1fr}} /* Create Lifafa special-user input copy ribbon */ .special-number-input-wrap{position:relative}.special-number-input-wrap .textarea{padding-right:76px}.special-copy-ribbon{position:absolute;right:8px;top:8px;height:30px;padding:0 9px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--surface) 88%,var(--primary-soft) 12%);color:var(--primary);display:inline-flex;align-items:center;gap:5px;font-size:0.674rem;font-weight:850;box-shadow:0 5px 12px rgba(15,23,42,.06);z-index:2}.special-copy-ribbon:active{transform:scale(.97)}[data-theme="dark"] .special-copy-ribbon{background:color-mix(in srgb,var(--surface-2) 86%,var(--primary) 14%);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))} .cah-open-lifafa{width:max-content;max-width:100%;border:0;background:transparent;padding:0;display:inline-flex;align-items:center;gap:5px;color:var(--primary);font-size:0.666rem;font-weight:850;line-height:1.2}.cah-open-lifafa i{font-size:0.654rem}.cah-open-lifafa:active{opacity:.7} /* Claim All v2026.09.04.12 — batch/IP fix + compact active/blocked text summary */ .claim-all-blocked-note{margin-top:3px!important;color:#dc2626!important;font-weight:760}.claim-all-blocked-note.hidden{display:none!important} [data-theme="dark"] .claim-all-blocked-note{color:#fda4af!important} /* Claim All v2026.09.04.13 — save loader + batch rules info + creator self-claim */ .claim-all-save-btn .ld{display:inline-block;width:17px;height:17px;flex:0 0 17px;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;animation:spin .72s linear infinite} .claim-all-save-btn:disabled{cursor:wait;opacity:.92} .claim-all-batch-panel{position:relative;padding-right:44px} .claim-all-batch-info{position:absolute;top:9px;right:9px;width:28px;height:28px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:9px;background:color-mix(in srgb,var(--surface) 88%,var(--primary-soft) 12%);color:var(--primary);display:grid;place-items:center;font-size:.72rem;box-shadow:0 5px 12px rgba(15,23,42,.055);z-index:2} .claim-all-batch-info:active{transform:scale(.95)} [data-theme="dark"] .claim-all-batch-info{background:color-mix(in srgb,var(--surface-2) 84%,var(--primary) 16%);border-color:color-mix(in srgb,var(--primary) 32%,var(--border))} .alert-card p .claim-all-rules-popup{display:block;text-align:left;margin-top:2px} .claim-all-rules-popup{background:var(--surface-2);border:1px solid var(--border)} @media(max-width:400px){.claim-all-batch-panel{padding-right:12px}.claim-all-batch-info{top:9px;right:9px}.claim-all-batch-panel-copy{padding-right:32px}} /* Pay User history v2026.09.04.14 */ .pay-history-divider{border:0;border-top:1.5px dashed color-mix(in srgb,var(--border) 86%,var(--primary) 14%);margin:22px 0 17px} .pay-history-title{margin-top:0!important;margin-bottom:10px}.pay-history-title h2{font-size:.96rem} .pay-history-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:9px;padding:11px 12px;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .pay-history-card:active,.bulk-history-card:active{transform:scale(.992)} .pay-history-avatar{width:46px;height:46px;border-radius:15px;overflow:hidden;background:var(--surface-2);box-shadow:0 6px 14px rgba(15,23,42,.07)}.pay-history-avatar img{width:100%;height:100%;object-fit:cover;display:block} .pay-history-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.pay-history-copy b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pay-history-copy span{font-size:0.674rem;color:var(--text-muted)}.pay-history-copy small{font-size:0.66rem;color:var(--text-muted);margin-top:2px} .pay-history-side{display:grid;grid-template-columns:auto 17px;grid-template-areas:'amount arrow' 'again again';align-items:center;justify-items:end;column-gap:8px;row-gap:6px;min-width:104px}.pay-history-side strong{grid-area:amount;font-size:.98rem;font-weight:900;letter-spacing:-.02em;color:var(--primary);white-space:nowrap}.pay-history-chevron{grid-area:arrow;color:var(--text-muted);font-size:0.674rem}.pay-again-link{grid-area:again;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));background:var(--primary-soft);color:var(--primary);font:850 .6rem/1.1 inherit;padding:6px 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 5px 12px -10px var(--primary);transition:transform .15s var(--ease),background .18s}.pay-again-link:active{transform:scale(.95);background:color-mix(in srgb,var(--primary) 14%,var(--surface))} .bulk-history-card{margin-bottom:9px;padding:11px 12px;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}.bulk-history-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.bulk-history-side{min-width:92px;text-align:right;display:grid;grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:'badge arrow' 'date arrow';align-items:center;column-gap:7px}.bulk-history-side .badge{grid-area:badge;justify-self:end}.bulk-history-side .tiny{grid-area:date}.bulk-history-chevron{grid-area:arrow;color:var(--text-muted);font-size:0.68rem;align-self:center} [data-theme="dark"] .pay-history-card,[data-theme="dark"] .bulk-history-card{box-shadow:0 7px 17px rgba(0,0,0,.16)} @media(max-width:339px){.pay-history-card{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:10px}.pay-history-avatar{width:40px;height:40px;border-radius:13px}.pay-history-side{min-width:92px;column-gap:5px}.pay-history-side strong{font-size:.88rem}.bulk-history-main{gap:8px}.bulk-history-side{min-width:82px}} /* v2026.09.04.15 — Daily Check-in reminder dots */ .nav-earn .earn-orb{position:relative} .nav-earn.checkin-pending .earn-orb::after{ content:"";position:absolute;right:3px;top:3px;width:10px;height:10px;border-radius:50%; background:#ef4444;border:2px solid var(--surface);box-shadow:0 3px 10px rgba(239,68,68,.42); } /* UI polish v2026.09.05.16 — dark auth/Claim All + Create Lifafa history shortcut */ [data-theme="dark"] .auth-btn{color:var(--text);background:var(--surface);border-color:var(--border)} [data-theme="dark"] .auth-btn>div>div:first-child{color:var(--text)} [data-theme="dark"] .claim-all-confirm-rules{ background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 88%,var(--primary) 12%),color-mix(in srgb,var(--surface) 94%,var(--primary) 6%)); border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } [data-theme="dark"] .claim-all-confirm-rules>b{color:var(--text)} [data-theme="dark"] .claim-all-confirm-rules>span{color:color-mix(in srgb,var(--text) 78%,var(--text-muted))} [data-theme="dark"] .claim-all-confirm-rules i{color:#4ade80} [data-theme="dark"] .claim-all-confirm-rules .no i{color:#fb7185} .lf-history-link{ width:100%;margin:12px 0 4px;padding:12px 13px;display:grid; grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:11px; border:1px solid var(--border);border-radius:16px;background:var(--surface); color:var(--text);text-align:left;box-shadow:var(--shadow-sm); transition:transform .16s var(--ease),border-color .18s,background .18s; } .lf-history-link:active{transform:scale(.985);border-color:color-mix(in srgb,var(--primary) 32%,var(--border))} .lf-history-link-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)} .lf-history-link-copy{min-width:0;display:flex;flex-direction:column;gap:2px} .lf-history-link-copy b{font-size:.76rem;font-weight:850;color:var(--text)} .lf-history-link-copy small{font-size:0.67rem;line-height:1.35;color:var(--text-muted)} .lf-history-link-arrow{font-size:0.674rem;color:var(--text-muted);justify-self:end} [data-theme="dark"] .lf-history-link{background:linear-gradient(145deg,var(--surface),var(--surface-2));border-color:var(--border);box-shadow:0 8px 18px rgba(0,0,0,.16)} /* v2026.09.05.17 — sent/received Pay to User history */ .pay-history-side strong.credit{color:var(--success)}.pay-history-side strong.debit{color:var(--danger)} .pay-history-card.credit{border-color:color-mix(in srgb,var(--success) 18%,var(--border))} /* Telegram channel modal — ribbon paste control stays keyboard-neutral. */ .tg-channel-paste-wrap{position:relative}.tg-channel-paste-wrap .input{padding-right:88px}.tg-channel-paste-ribbon{top:7px;right:7px;height:34px;min-width:70px} /* ================= RESPONSIVE FEATURE CARDS ================= */ @media(max-width:339px){ .claim-all-summary{grid-template-columns:1fr} .claim-all-history-card,.pay-history-card,.bulk-history-card{min-width:0} .pay-history-side,.bulk-history-side{min-width:0} .lf-history-link{grid-template-columns:36px minmax(0,1fr) 14px;gap:8px;padding:10px} .lf-history-link-icon{width:36px;height:36px} .tg-channel-paste-wrap .input{padding-right:76px} .tg-channel-paste-ribbon{min-width:60px} } /* Phase 36 — 2-Step Verification settings sheet */ .two-step-sheet{display:flex;flex-direction:column;gap:12px} .two-step-hero{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--primary) 6%,var(--surface)))} .two-step-hero.is-on{border-color:color-mix(in srgb,var(--success) 35%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--success) 8%,var(--surface)),color-mix(in srgb,var(--primary) 6%,var(--surface)))} .two-step-hero-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--primary-soft);color:var(--primary);font-size:19px} .two-step-hero.is-on .two-step-hero-icon{background:var(--success-soft);color:var(--success)} .two-step-hero>div:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}.two-step-hero small{font-size:0.674rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.two-step-hero b{font-size:.83rem}.two-step-hero span{font-size:0.682rem;line-height:1.42;color:var(--text-muted)} .two-step-switch-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:17px;background:var(--surface)} .two-step-switch-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}.two-step-switch-row b{font-size:.78rem}.two-step-switch-row span{font-size:0.676rem;line-height:1.42;color:var(--text-muted)} .two-step-account{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)} .two-step-account>i:first-child{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(34,158,217,.12);color:#229ED9;font-size:18px}.two-step-account>div{display:flex;flex-direction:column;gap:2px;min-width:0}.two-step-account small{font-size:0.666rem;color:var(--text-muted)}.two-step-account b{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.two-step-account span{font-size:0.666rem;line-height:1.4;color:var(--text-muted)}.two-step-account-state{color:var(--success);font-size:18px}.two-step-account button{padding:8px 11px;border-radius:11px;background:var(--primary);color:#fff;font-size:0.682rem;font-weight:800} .two-step-notes{display:flex;flex-direction:column;gap:8px;padding:2px 2px 0}.two-step-notes>div{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;color:var(--text-muted);font-size:0.674rem;line-height:1.48}.two-step-notes i{margin-top:2px;color:var(--primary)}.two-step-notes b{color:var(--text)} /* ================= v2026.09.13.47 · READABLE SECONDARY TEXT ================= Keep supporting copy compact, but never miniature. */ .two-step-hero small{font-size:.7rem} .two-step-hero b{font-size:.9rem} .two-step-hero span{font-size:.75rem;line-height:1.5} .two-step-switch-row b{font-size:.84rem} .two-step-switch-row span{font-size:.74rem;line-height:1.5} .two-step-account small{font-size:.69rem} .two-step-account b{font-size:.8rem} .two-step-account span{font-size:.72rem;line-height:1.5} .two-step-account button{font-size:.74rem} .two-step-notes>div{font-size:.73rem;line-height:1.55} .bn-help,.nt-intro span,.nt-paste-btn,.nt-name-field label .muted,.lfd-hero span,.claim-all-account-copy span,.claim-all-account-warn span,.claim-all-summary-copy small,.claim-all-card-title>div>span,.claim-all-card-title em,.claim-all-amount small,.claim-all-badges span,.cas-hero span,.cas-toggle-copy span,.cas-info,.claim-all-number-copy span,.claim-all-batch-panel-copy span,.claim-all-confirm-rules,.claim-all-confirm-note,.claim-all-history-badge,.cah-copy small,.cah-amount small,.cah-sheet-hero small,.cah-sheet-hero em,.cah-sheet-meta small,.cah-item-copy small,.pay-history-copy span,.pay-history-copy small,.lf-history-link-copy small{font-size:.7rem} .bn-list-head span,.bn-summary-grid span,.bn-preview-row span,.bn-preview-row em,.bn-confirm-list small,.mp-stat span,.mp-row span,.mp-row em,.nt-collection-name span,.nt-collection-meta span,.lfd-group-title small,.lfd-toggle-copy span,.lfd-note,.lf-default-setup-row span,.claim-all-confirm-stats small{font-size:0.686rem} /* v143: Special Users clipboard actions */ .special-clear-ribbon{position:absolute;right:8px;top:44px;height:30px;padding:0 9px;border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--surface) 90%,var(--danger) 10%);color:var(--danger);display:inline-flex;align-items:center;gap:5px;font-size:0.674rem;font-weight:850;box-shadow:0 5px 12px rgba(15,23,42,.06);z-index:2}.special-clear-ribbon:active{transform:scale(.97)}[data-theme="dark"] .special-clear-ribbon{background:color-mix(in srgb,var(--surface-2) 88%,var(--danger) 12%);border-color:color-mix(in srgb,var(--danger) 32%,var(--border))} /* v2026.09.22.151 — natural Bulk Payout report details */ .bulk-detail-summary{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:14px;margin:2px 0 10px} .bulk-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid var(--border)}.bulk-detail-head>div{min-width:0}.bulk-detail-head small{display:block;color:var(--text-muted);font-size:0.682rem;font-weight:700}.bulk-detail-head b{display:block;margin-top:3px;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bulk-detail-total{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:14px 0 12px}.bulk-detail-total>div{min-width:0}.bulk-detail-total span{display:block;color:var(--text-muted);font-size:0.686rem;font-weight:700}.bulk-detail-total strong{display:block;margin-top:3px;font-size:1.42rem;line-height:1;font-weight:900;color:var(--primary)}.bulk-detail-total>small{color:var(--text-muted);font-size:0.686rem;font-weight:700;text-align:right} .bulk-detail-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:13px;overflow:hidden;margin-bottom:12px}.bulk-detail-progress>span{min-width:0;padding:10px 9px;background:var(--surface-2);text-align:center;border-left:1px solid var(--border)}.bulk-detail-progress>span:first-child{border-left:0}.bulk-detail-progress small{display:block;color:var(--text-muted);font-size:0.674rem;font-weight:700}.bulk-detail-progress b{display:block;margin-top:2px;font-size:.86rem;font-weight:900}.bulk-detail-progress b.ok{color:var(--success)}.bulk-detail-progress b.bad{color:var(--danger)}.bulk-detail-progress em{display:block;margin-top:1px;color:var(--text-muted);font-size:0.66rem;font-style:normal;font-weight:700} .bulk-detail-list{border-top:1px solid var(--border)}.bulk-detail-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border)}.bulk-detail-list>div:last-child{border-bottom:0;padding-bottom:0}.bulk-detail-list span{color:var(--text-muted);font-size:0.684rem;font-weight:700}.bulk-detail-list b{max-width:66%;font-size:.69rem;font-weight:800;text-align:right;overflow-wrap:anywhere}.bulk-detail-list>div.full{display:block}.bulk-detail-list>div.full b{display:block;max-width:none;margin-top:4px;text-align:left;line-height:1.45} .bulk-report-row{gap:10px}.bulk-report-avatar{flex:0 0 auto;background:var(--primary-soft);color:var(--primary);overflow:hidden}.bulk-report-avatar.has-image{background:var(--surface-2)}.bulk-report-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}.bulk-report-copy{flex:1;min-width:0}.bulk-report-mobile{font-weight:800;word-break:break-all}.bulk-report-name{margin-top:1px;color:var(--text-muted);font-size:0.674rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bulk-report-status{margin-top:2px;font-size:0.666rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:360px){.bulk-detail-total{align-items:flex-start;flex-direction:column;gap:6px}.bulk-detail-total>small{text-align:left}.bulk-detail-progress>span{padding:9px 5px}.bulk-detail-list b{max-width:61%}} [data-theme="dark"] .bulk-detail-summary{background:var(--surface)} .otp-delivery-note{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--soft,#f3f7ff);display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45}.otp-delivery-note.hidden{display:none}.otp-delivery-note i{margin-top:2px}.otp-sms-fallback{margin-top:10px;width:100%;min-height:46px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));color:var(--primary)!important;font-weight:800;box-shadow:none}.otp-sms-fallback i{color:inherit}.otp-sms-fallback:disabled{opacity:.78}.otp-sms-fallback.is-loading{cursor:wait}.otp-sms-fallback-spinner{width:17px;height:17px;flex:none;border-radius:50%;border:2px solid color-mix(in srgb,var(--primary) 24%,transparent);border-top-color:var(--primary);animation:spin .72s linear infinite}.otp-sms-fallback.hidden{display:none} /* Phase 64 — verified referral indicator on signup/login */ .login-referral-applied{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 22px;align-items:center;gap:11px;margin:0 0 15px;padding:12px 13px;border-radius:15px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 21%,var(--border))}.login-referral-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.9rem}.login-referral-applied>div{min-width:0}.login-referral-applied small{display:block;font-size:0.67rem;letter-spacing:.09em;font-weight:950;color:var(--primary)}.login-referral-applied b{display:block;margin-top:3px;font-size:.8rem;line-height:1.3;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.login-referral-check{color:var(--success);font-size:.8rem} /* v2026.10.03.247 — Pay User payment detail cleanup */ .pay-detail-party{margin-top:5px;color:var(--text);font-size:.96rem;line-height:1.25;font-weight:850} .pay-detail-party span{color:var(--text-muted);font-size:.78rem;font-weight:700} /* v2026.10.03.248 — Pay User Concept B payment details */ .pay-detail-b{display:flex;flex-direction:column;gap:14px;padding-bottom:4px} .pay-detail-b-hero{position:relative;overflow:hidden;text-align:center;padding:4px 18px 20px;border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 13%,var(--surface)) 0%,color-mix(in srgb,var(--primary) 5%,var(--surface)) 58%,var(--surface) 100%);border:1px solid color-mix(in srgb,var(--primary) 15%,var(--border))} .pay-detail-b-hero::before,.pay-detail-b-hero::after{content:"";position:absolute;pointer-events:none;border-radius:999px;filter:blur(.2px)} .pay-detail-b-hero::before{width:210px;height:210px;left:-112px;top:-72px;background:color-mix(in srgb,var(--primary) 7%,transparent)} .pay-detail-b-hero::after{width:170px;height:170px;right:-88px;top:-48px;background:color-mix(in srgb,var(--success) 7%,transparent)} .pay-detail-b-avatar-wrap{position:relative;z-index:1;width:100px;height:100px;margin:2px auto 12px;border-radius:50%;padding:5px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 55%,#fff),color-mix(in srgb,var(--success) 45%,#fff));box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 18%,transparent)} .pay-detail-b-avatar{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;border:4px solid var(--surface);background:var(--surface-2)} .pay-detail-b-title{position:relative;z-index:1;font-size:1.02rem;line-height:1.2;font-weight:900;color:var(--text)} .pay-detail-b-amount{position:relative;z-index:1;margin-top:5px;font-size:2rem;line-height:1.05;font-weight:950;letter-spacing:-.035em;color:var(--success)} .pay-detail-b-name{position:relative;z-index:1;margin-top:8px;font-size:1.02rem;line-height:1.25;font-weight:900;color:var(--text)} .pay-detail-b-panel{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 9px 24px rgba(15,23,42,.055)} .pay-detail-b-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px;padding:11px 14px;border-bottom:1px solid var(--border)} .pay-detail-b-row:last-child{border-bottom:0} .pay-detail-b-ico{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--primary) 9%,var(--surface-2));color:var(--primary);font-size:1rem} .pay-detail-b-copy{min-width:0;display:flex;flex-direction:column;gap:3px} .pay-detail-b-copy span{font-size:.72rem;line-height:1.2;font-weight:750;color:var(--text-muted)} .pay-detail-b-copy b{font-size:.84rem;line-height:1.35;font-weight:850;color:var(--text);overflow-wrap:anywhere} .pay-detail-b-copybtn{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;border:0;background:var(--surface-2);color:var(--text-muted);font-size:.88rem;transition:transform .12s ease,background .12s ease,color .12s ease} .pay-detail-b-copybtn:active{transform:scale(.94)} .pay-detail-b-copybtn:hover{background:var(--primary-soft);color:var(--primary)} .pay-detail-b-hero.is-sent .pay-detail-b-amount{color:var(--danger)} @media(max-width:360px){.pay-detail-b-hero{padding-left:12px;padding-right:12px}.pay-detail-b-avatar-wrap{width:92px;height:92px}.pay-detail-b-amount{font-size:1.82rem}.pay-detail-b-row{grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding-left:12px;padding-right:12px}.pay-detail-b-ico{width:38px;height:38px}.pay-detail-b-copy b{font-size:.8rem}} [data-theme="dark"] .pay-detail-b-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 18%,var(--surface)) 0%,color-mix(in srgb,var(--primary) 7%,var(--surface)) 58%,var(--surface) 100%);border-color:color-mix(in srgb,var(--primary) 21%,var(--border))} [data-theme="dark"] .pay-detail-b-panel{background:var(--surface);box-shadow:0 10px 26px rgba(0,0,0,.22)} [data-theme="dark"] .pay-detail-b-copybtn{background:color-mix(in srgb,var(--surface-2) 82%,var(--primary) 8%)} /* v2026.10.10.261 — theme-consistent Pay to User history readability */ .pay-history-card{border:1px solid color-mix(in srgb,var(--primary) 10%,var(--border));background:var(--surface);border-radius:16px;box-shadow:0 5px 16px -15px color-mix(in srgb,var(--primary) 28%,transparent)} .pay-history-card.credit{border-color:color-mix(in srgb,var(--success) 18%,var(--border))} .pay-history-copy b{font-size:.9rem;font-weight:800;line-height:1.35;color:var(--text)} .pay-history-copy span{font-size:.76rem;font-weight:600;line-height:1.4;color:var(--text-muted)} .pay-history-copy small{font-size:.72rem;font-weight:550;line-height:1.4;color:var(--text-muted)} .pay-history-side strong{font-size:1.03rem;font-weight:850} .pay-history-chevron{font-size:.75rem} .pay-again-link{font-size:.72rem;font-weight:800;padding:7px 10px} .pay-detail-b-date{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;font-size:.78rem;font-weight:650;line-height:1.4;color:var(--text-muted)} .pay-detail-b-date i{color:var(--primary)} /* ---- phase2b.css ---- */ /* ===== Bottom-sheet: dedicated drag handle (only this drags) ===== */ .sheet-drag-handle{ flex:none; display:flex; justify-content:center; align-items:center; padding:12px 0 6px; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; } .sheet-drag-handle:active{ cursor:grabbing; } .sheet-drag-handle .handle{ width:44px; height:5px; border-radius:5px; background:var(--border); display:block; } .sheet .sheet-body{ touch-action:pan-y; } /* keep .lrow value column from touching the sheet edge on small screens */ .sheet .sheet-body .lrow > div:last-child{ padding-left:10px; min-width:0; word-break:break-word; text-align:right; } /* ===== Action-card alignment: icon vertically centered, text left ===== */ .auth-btn{ align-items:center; text-align:left; } .auth-btn > div{ text-align:left; line-height:1.35; min-width:0; } .auth-btn > i{ display:flex; align-items:center; justify-content:center; } .set-row, .lrow, .req, .side-link{ text-align:left; } .set-row > div:not(.sic):not(.chev), .req > div{ text-align:left; } .qa{ text-align:left; } .qa .qt, .qa .qs{ text-align:left; } /* Dark-mode fix: use semantic theme text colours for non-accent quick actions */ .qa:not(.accent){ color:var(--text); } .qa:not(.accent) .qt{ color:var(--text); } .qa:not(.accent) .qs{ color:var(--text-muted); opacity:1; } /* compact detail grid for Lifafa details */ .lf-dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .lf-dgrid-item{ background:var(--surface-2); border-radius:10px; padding:8px 10px; } .lf-dgrid-item .tiny{ margin-bottom:2px; } /* ===== Safe Wallet segmented control ===== */ .seg{ display:flex; gap:6px; background:var(--surface-2); border-radius:16px; padding:6px; position:relative; } .seg-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-radius:12px; font-weight:800; font-size:.9rem; color:var(--text-muted); transition:color .2s var(--ease), background .25s var(--ease); position:relative; z-index:1; } .seg-btn .seg-sub{ font-size:0.682rem; font-weight:600; opacity:.85; } .seg-btn i{ font-size:1rem; margin-bottom:2px; } .seg-btn.active{ color:#fff; } .seg-ind{ position:absolute; top:6px; bottom:6px; width:calc(50% - 9px); border-radius:12px; background:var(--grad); box-shadow:0 8px 18px -8px var(--primary); transition:left .3s var(--ease); z-index:0; left:6px; } .seg-ind.right{ left:calc(50% + 3px); } .sw-src{ font-size:.8rem; color:var(--text-muted); margin-top:14px; } .sw-src b{ color:var(--text); } .pct-row{ display:flex; gap:8px; margin:10px 0; } .pct-btn{ flex:1; padding:10px 0; border-radius:12px; background:var(--surface-2); font-weight:700; font-size:.85rem; color:var(--text-muted); transition:background .2s, color .2s, transform .12s; } .pct-btn:active{ transform:scale(.94); } .pct-btn.active{ background:var(--primary-soft); color:var(--primary-dark); } .sw-preview{ background:var(--surface-2); border-radius:14px; padding:12px 14px; margin-top:6px; font-size:.85rem; } .sw-preview .pr{ display:flex; justify-content:space-between; padding:3px 0; } .sw-preview .pr b{ font-variant-numeric:tabular-nums; } /* Active Sessions: detail-rich, consistently left-aligned layout. */ .sheet .sheet-body .session-row{align-items:flex-start;text-align:left!important;gap:12px} .sheet .sheet-body .session-row>.session-main{flex:1;min-width:0;padding-left:0!important;text-align:left!important;word-break:normal!important} .session-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-weight:800;text-align:left} .session-detail{display:flex;align-items:flex-start;gap:7px;margin-top:6px;font-size:.75rem;color:var(--text-muted);text-align:left} .session-detail>i{width:14px;margin-top:2px;flex:0 0 14px;text-align:center} .session-detail span{min-width:0} .session-ua{display:flex;align-items:flex-start;gap:7px;margin-top:7px;padding:8px 9px;border-radius:10px;background:var(--surface-2);color:var(--text-muted);font-size:0.686rem;line-height:1.35;text-align:left} .session-ua>i{margin-top:2px;flex:0 0 auto} .session-ua span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word} .session-revoke{margin-top:9px} .session-icon{margin-top:1px} /* ================= RESPONSIVE PHASE 2B ================= */ @media(max-width:339px){ .lf-dgrid{grid-template-columns:1fr} .seg-btn{padding-left:5px;padding-right:5px;font-size:.82rem} .seg-btn .seg-sub{font-size:0.67rem} .pct-row{gap:5px} .pct-btn{font-size:.78rem} } /* ---- addfund.css ---- */ /* ================= ADD FUND / WITHDRAW ================= */ .addfund-page,.withdraw-page{padding-bottom:6px}.addfund-page>*{animation:afRise .46s var(--ease) both}.addfund-page>*:nth-child(2){animation-delay:.04s}.addfund-page>*:nth-child(3){animation-delay:.08s}.addfund-page>*:nth-child(4){animation-delay:.12s}@keyframes afRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .af-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;padding:20px 18px;border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 96%,#101426),color-mix(in srgb,var(--primary-dark) 82%,#111827));color:#fff;box-shadow:0 20px 44px -28px var(--primary);margin-bottom:12px}.af-hero-glow{position:absolute;z-index:-1;border-radius:999px;filter:blur(2px);pointer-events:none}.af-hero-glow-a{width:160px;height:160px;right:-60px;top:-80px;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%)}.af-hero-glow-b{width:140px;height:140px;left:-70px;bottom:-86px;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%)}.af-hero-icon{width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;flex:none;font-size:1.25rem;backdrop-filter:blur(8px)}.af-hero-copy{min-width:0;flex:1}.af-kicker{display:block;font-size:0.666rem;letter-spacing:.14em;font-weight:850;text-transform:uppercase;opacity:.72}.af-hero h1,.wd-hero h1{font-size:1.42rem;line-height:1.05;margin-top:4px;letter-spacing:-.035em}.af-hero p{font-size:0.684rem;line-height:1.45;opacity:.78;margin-top:5px;max-width:300px}.af-security{align-self:flex-start;display:flex;align-items:center;gap:5px;font-size:0.658rem;font-weight:800;white-space:nowrap;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.13)} .af-method-card,.af-amount-card,.af-history-shell{margin-bottom:12px;border-color:color-mix(in srgb,var(--primary) 10%,var(--border));box-shadow:0 14px 34px -32px var(--text)}.af-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.af-section-head>div{display:flex;flex-direction:column;min-width:0}.af-section-head span{font-size:.84rem;font-weight:850}.af-section-head small{font-size:0.674rem;color:var(--text-muted);margin-top:2px}.af-section-head>i{color:var(--primary);margin-top:2px} .af-methods{display:grid;grid-template-columns:1fr 1fr;gap:9px}.af-method{position:relative;display:flex;align-items:center;gap:9px;min-height:66px;padding:11px;border-radius:17px;background:var(--surface-2);border:1.5px solid transparent;color:var(--text);text-align:left;transition:transform .16s var(--ease),border-color .2s,background .2s}.af-method:active{transform:scale(.97)}.af-method.active{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));background:linear-gradient(145deg,var(--primary-soft),var(--surface))}.af-method-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}.af-method-icon.upi{background:var(--primary-soft);color:var(--primary)}.af-method-icon.crypto{background:color-mix(in srgb,#f59e0b 15%,var(--surface));color:#f59e0b}.af-method>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.af-method b{font-size:0.686rem;white-space:nowrap}.af-method small{font-size:0.66rem;color:var(--text-muted);margin-top:2px}.af-method-check{margin-left:auto;color:var(--primary);font-size:.76rem}.af-soon{position:absolute;top:6px;right:6px;padding:3px 5px;border-radius:6px;background:color-mix(in srgb,#f59e0b 14%,var(--surface));color:#b56b00;font-size:0.638rem!important;font-weight:900;letter-spacing:.05em}.af-method-pulse{animation:afPulse .4s var(--ease)}@keyframes afPulse{50%{transform:scale(.96);border-color:#f59e0b}} .af-live-dot{display:flex!important;flex-direction:row!important;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--success-soft);color:var(--success);font-size:0.656rem!important}.af-live-dot i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 14%,transparent);animation:afLive 1.8s ease infinite}@keyframes afLive{50%{box-shadow:0 0 0 7px transparent}} .af-amount-input-wrap{height:76px;border-radius:22px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 5%,var(--surface)));border:1.5px solid var(--border);display:flex;align-items:center;padding:0 16px;transition:border-color .2s,box-shadow .2s,transform .25s var(--ease)}.af-amount-input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 5px var(--primary-soft)}.af-amount-input-wrap.af-picked{transform:scale(.985)}.af-currency{font-size:1.8rem;font-weight:800;color:var(--primary);margin-right:8px}.af-amount-input{min-width:0;flex:1;background:transparent;border:0;outline:0;font-size:2rem;font-weight:850;color:var(--text);letter-spacing:-.045em;font-variant-numeric:tabular-nums}.af-amount-input::placeholder{color:var(--text-muted);opacity:.38}.af-inr{font-size:0.666rem;font-weight:850;color:var(--text-muted);letter-spacing:.08em}.af-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.af-amt-tile,.af-tile-skel{min-height:48px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border)}.af-amt-tile{position:relative;color:var(--text);display:grid;place-items:center;padding:8px 3px;transition:transform .15s var(--ease),background .2s,border-color .2s,color .2s}.af-amt-tile:active{transform:scale(.94)}.af-amt-tile.active{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 45%,var(--border));color:var(--primary-dark)}.af-amt-tile b{font-size:0.678rem}.af-amt-tile small{position:absolute;right:3px;top:3px;font-size:0.626rem;font-weight:900;padding:2px 3px;border-radius:4px;background:var(--primary);color:#fff;line-height:1}.af-tile-skel{display:block;animation:afSkel 1.2s ease infinite alternate}@keyframes afSkel{to{opacity:.45}} .af-breakdown{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .38s var(--ease),opacity .28s,margin .3s}.af-breakdown.show{max-height:320px;opacity:1;margin-top:14px}.af-breakdown-title{display:flex;align-items:center;justify-content:space-between;padding:12px 13px 8px;background:var(--surface-2);border:1px solid var(--border);border-bottom:0;border-radius:16px 16px 0 0;font-size:0.676rem}.af-breakdown-title>span{font-weight:850}.af-breakdown-title i{color:var(--primary);margin-right:5px}.af-breakdown-title small{font-size:0.65rem;color:var(--text-muted)}.af-br-row{display:flex;align-items:center;justify-content:space-between;padding:5px 13px;background:var(--surface-2);border-left:1px solid var(--border);border-right:1px solid var(--border);font-size:0.682rem}.af-br-row span{color:var(--text-muted)}.af-br-row em{font-style:normal;color:var(--primary);font-weight:800}.af-br-row b{font-variant-numeric:tabular-nums}.af-br-line{height:1px;background:var(--border);margin:0 13px}.af-br-row.total{padding:9px 13px 12px;border-bottom:1px solid var(--border);border-radius:0 0 16px 16px}.af-br-row.total span,.af-br-row.total b{font-size:.75rem;font-weight:850;color:var(--text)}.af-br-row.total b{color:var(--primary)}.af-continue{margin-top:14px;min-height:52px}.af-continue span{display:flex;align-items:baseline;gap:6px}.af-continue b{font-size:1rem}.af-note{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-top:10px;font-size:0.658rem;color:var(--text-muted);text-align:center}.af-note i{color:var(--primary);margin-top:1px} .af-history-shell{padding:0;overflow:hidden}.af-history-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;color:var(--text);text-align:left}.af-history-title{display:flex;align-items:center;gap:11px}.af-history-title>i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.af-history-title>span{display:flex;flex-direction:column}.af-history-title b{font-size:.76rem}.af-history-title small{font-size:0.66rem;color:var(--text-muted);margin-top:2px}.af-history-arrow{width:30px;height:30px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:0.68rem;color:var(--text-muted)}.af-history-arrow i{transition:transform .28s var(--ease)}.history-open .af-history-arrow i{transform:rotate(180deg)}.af-history-expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s var(--ease)}.af-history-expand.open{grid-template-rows:1fr}.af-history-inner{overflow:hidden;min-height:0}.af-history-list{padding:0 12px 12px;border-top:1px solid var(--border)}.af-history-loading,.af-history-empty{min-height:110px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:0.68rem}.af-history-empty{flex-direction:column;text-align:center}.af-history-empty i{font-size:1.2rem;color:var(--primary)}.af-history-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:12px 4px;border-bottom:1px solid var(--border)}.af-history-item:last-child{border-bottom:0}.af-history-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted)}.af-history-ic.warning{background:var(--warning-soft);color:var(--warning)}.af-history-ic.info{background:var(--info-soft);color:var(--info)}.af-history-ic.success{background:var(--success-soft);color:var(--success)}.af-history-ic.danger{background:var(--danger-soft);color:var(--danger)}.af-history-main{min-width:0}.af-history-row{display:flex;align-items:center;gap:7px}.af-history-row>b{font-size:.75rem}.af-history-main>small{display:block;margin-top:2px;font-size:0.648rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.af-history-main>span{display:block;margin-top:3px;font-size:0.654rem;color:var(--text-muted)}.af-status-pill{padding:3px 5px;border-radius:999px;font-size:0.638rem;font-weight:850;white-space:nowrap;background:var(--surface-2);color:var(--text-muted)}.af-status-pill.warning{background:var(--warning-soft);color:var(--warning)}.af-status-pill.info{background:var(--info-soft);color:var(--info)}.af-status-pill.success{background:var(--success-soft);color:var(--success)}.af-status-pill.danger{background:var(--danger-soft);color:var(--danger)}.af-history-action{padding:7px 8px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:0.654rem;font-weight:850;white-space:nowrap}.af-history-action.pay{background:var(--grad);color:#fff}.af-history-action.icon{width:30px;height:30px;padding:0;display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted)} .af-assurance{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:4px 4px 12px;color:var(--text-muted);font-size:0.646rem}.af-assurance span{display:flex;align-items:center;gap:4px}.af-assurance i{color:var(--primary)} /* Add Fund bottom-sheet payment flow */ .af-order-modal{padding-bottom:4px}.af-modal-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.af-order-chip{min-width:0;display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;background:var(--surface-2);font-size:0.654rem;color:var(--text-muted)}.af-order-chip span{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.af-order-chip button{color:var(--primary);padding:2px}.af-timer{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;background:var(--warning-soft);color:var(--warning);font-size:0.68rem;font-variant-numeric:tabular-nums}.af-timer.danger{background:var(--danger-soft);color:var(--danger);animation:afTimerPulse 1s ease infinite}@keyframes afTimerPulse{50%{transform:scale(.97)}}.af-stepper{display:flex;align-items:flex-start;margin:5px 3px 18px}.af-step{width:46px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-muted)}.af-step>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);font-size:0.666rem;font-weight:850;transition:.25s var(--ease)}.af-step small{font-size:0.644rem;font-weight:750}.af-step.active{color:var(--primary)}.af-step.active>span{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 7px 15px -8px var(--primary);transform:scale(1.07)}.af-step.done{color:var(--success)}.af-step.done>span{background:var(--success-soft);border-color:transparent;color:var(--success)}.af-step-line{height:1.5px;background:var(--border);flex:1;margin-top:13px;min-width:18px}.af-order-stage{animation:afStage .3s var(--ease)}@keyframes afStage{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}.af-stage-in{animation:afStage .3s var(--ease)}.af-step-label{display:flex;align-items:center;gap:10px;margin-bottom:12px}.af-step-label>span{padding:5px 7px;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:0.644rem;font-weight:900;letter-spacing:.06em}.af-step-label>div{display:flex;flex-direction:column}.af-step-label b{font-size:.76rem}.af-step-label small{font-size:0.658rem;color:var(--text-muted);margin-top:1px}.af-qr-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 6%,var(--surface)));border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border))}.af-qr-frame{width:124px;flex:none;padding:8px;border-radius:16px;background:#fff;box-shadow:0 10px 24px -20px #000;text-align:center}.af-qr-frame img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.af-qr-scan{display:block;margin-top:5px;color:#171717;font-size:0.634rem;font-weight:900;letter-spacing:.09em}.af-qr-amount{min-width:0;display:flex;flex-direction:column}.af-qr-amount small{font-size:0.658rem;color:var(--text-muted)}.af-qr-amount b{font-size:1.45rem;letter-spacing:-.04em;margin-top:3px;color:var(--primary)}.af-qr-amount span{font-size:0.65rem;color:var(--text-muted);line-height:1.4;margin-top:4px}.af-open-upi{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0;padding:10px 12px;border-radius:13px;background:var(--primary-soft);color:var(--primary);font-size:0.674rem;font-weight:850}.af-pay-details,.af-status-summary{border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:10px 0 12px}.af-detail-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 11px;border-bottom:1px solid var(--border);background:var(--surface)}.af-detail-row:last-child{border-bottom:0}.af-detail-row>span{font-size:0.662rem;color:var(--text-muted)}.af-detail-row>div{display:flex;align-items:center;gap:7px;min-width:0}.af-detail-row b{font-size:0.678rem;text-align:right;overflow-wrap:anywhere}.af-detail-row button{width:26px;height:26px;border-radius:8px;background:var(--surface-2);color:var(--primary);display:grid;place-items:center;flex:none;font-size:0.666rem}.af-pay-warning{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;margin-bottom:12px;border-radius:13px;background:var(--warning-soft);color:color-mix(in srgb,var(--warning) 78%,var(--text));font-size:0.66rem;line-height:1.45}.af-pay-warning i{margin-top:2px}.af-upload-zone{min-height:186px;border:1.5px dashed color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:20px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 4%,var(--surface)));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;cursor:pointer;overflow:hidden;position:relative;transition:border-color .2s,background .2s}.af-upload-zone:active{background:var(--primary-soft)}.af-upload-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.1rem;margin-bottom:9px}.af-upload-zone>b{font-size:.7rem}.af-upload-zone>span{font-size:0.656rem;color:var(--text-muted);margin-top:3px}.af-proof-preview{display:none;width:100%;max-height:220px;object-fit:contain;border-radius:13px;margin-top:10px;background:var(--surface)}.af-proof-preview.show{display:block}.af-upload-zone.has-file{justify-content:flex-start}.af-upload-zone.has-file .af-upload-icon{width:36px;height:36px;border-radius:12px;margin-bottom:6px}.af-proof-checks{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 12px}.af-proof-checks span{display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:8px;background:var(--success-soft);color:var(--success);font-size:0.648rem;font-weight:750}.af-review-stage{text-align:center;padding-top:4px}.af-review-icon{position:relative;width:78px;height:78px;border-radius:26px;margin:0 auto 13px;display:grid;place-items:center;font-size:1.8rem;background:var(--info-soft);color:var(--info)}.af-review-icon span{position:absolute;width:12px;height:12px;border-radius:50%;right:8px;top:7px;background:currentColor;box-shadow:0 0 0 6px color-mix(in srgb,currentColor 12%,transparent);animation:afLive 1.6s ease infinite}.af-review-icon.success{background:var(--success-soft);color:var(--success)}.af-review-icon.danger{background:var(--danger-soft);color:var(--danger)}.af-review-icon.muted{background:var(--surface-2);color:var(--text-muted)}.af-review-kicker{font-size:0.646rem;color:var(--primary);font-weight:900;letter-spacing:.09em}.af-review-stage h3{font-size:1rem;margin-top:4px}.af-review-stage>p{font-size:0.674rem;line-height:1.55;color:var(--text-muted);margin:6px auto 12px;max-width:320px}.af-review-time{display:flex;align-items:center;gap:10px;text-align:left;padding:11px;border-radius:14px;background:var(--info-soft);color:var(--info);margin-bottom:11px}.af-review-time>i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--info) 12%,var(--surface));flex:none}.af-review-time>div{display:flex;flex-direction:column}.af-review-time b{font-size:0.668rem}.af-review-time span{font-size:0.648rem;opacity:.8;margin-top:2px}.af-status-summary{text-align:left}.af-proof-link{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;margin:-2px 0 11px;border-radius:12px;background:var(--surface-2);color:var(--primary);font-size:0.664rem;font-weight:800} /* Withdraw placeholder */ .wd-hero{position:relative;overflow:hidden;text-align:center;padding:28px 18px 26px;border-radius:28px;background:linear-gradient(145deg,var(--primary-soft),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));margin-bottom:12px}.wd-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;margin:0 auto 11px;background:var(--grad);color:#fff;font-size:1.35rem;box-shadow:0 15px 28px -16px var(--primary)}.wd-hero .af-kicker{color:var(--primary);opacity:1}.wd-hero p{font-size:0.684rem;color:var(--text-muted);margin-top:6px}.wd-preview{text-align:center}.wd-preview-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 auto 11px;background:var(--surface-2);color:var(--primary)}.wd-preview h2{font-size:.9rem}.wd-preview>p{font-size:0.674rem;line-height:1.55;color:var(--text-muted);margin:7px 0 14px}.wd-coming-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:13px;background:var(--surface-2);margin-top:7px;font-size:0.672rem}.wd-coming-row span{display:flex;align-items:center;gap:7px;font-weight:750}.wd-coming-row span i{color:var(--primary)}.wd-coming-row b{font-size:0.648rem;color:var(--text-muted);padding:4px 6px;border-radius:7px;background:var(--surface)} [data-theme="dark"] .af-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 72%,#111827),#151725)}[data-theme="dark"] .af-qr-frame{box-shadow:none} @media(max-width:390px){.af-hero{padding:17px 14px;gap:11px}.af-hero-icon{width:46px;height:46px;border-radius:15px}.af-security{display:none}.af-method{padding:9px;gap:7px}.af-method-icon{width:34px;height:34px}.af-method b{font-size:0.674rem}.af-tiles{gap:5px}.af-amt-tile b{font-size:0.668rem}.af-qr-card{gap:10px;padding:11px}.af-qr-frame{width:112px}.af-qr-amount b{font-size:1.26rem}.af-history-item{gap:7px}.af-history-ic{width:34px;height:34px}} /* ===== Theme-aligned Add Fund refinement ===== */ .addfund-page{padding-bottom:8px} .addfund-page>.section-title{margin-top:26px;margin-bottom:12px;animation:afRise .34s var(--ease) both} .addfund-page>.section-title h2{font-size:1.05rem;font-weight:800} .addfund-page>.card{border:1px solid var(--border);box-shadow:var(--shadow-sm)} .af-amount-card,.af-method-card,.af-history-shell{margin-bottom:16px;border-color:var(--border);box-shadow:var(--shadow-sm)} .af-section-head{margin-bottom:16px} .af-section-head span{font-size:.9rem;font-weight:800} .af-section-head small{font-size:.72rem;margin-top:4px;line-height:1.35} .af-amount-input-wrap{height:82px;border-radius:15px;background:var(--surface);border:1.5px solid var(--border);padding:0 16px;box-shadow:none} .af-amount-input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)} .af-currency{font-size:1.85rem;margin-right:9px} .af-amount-input{font-size:2.15rem;font-weight:800;letter-spacing:-.035em} .af-inr{font-size:0.686rem;font-weight:800} .af-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px} .af-amt-tile,.af-tile-skel{min-height:56px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border)} .af-amt-tile{padding:10px 3px} .af-amt-tile b{font-size:.78rem;font-weight:800} .af-amt-tile small{right:4px;top:4px;font-size:0.636rem;padding:3px 4px;border-radius:5px} .af-amt-tile.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark)} .af-breakdown.show{margin-top:16px} .af-breakdown-title{padding:13px 14px 9px;background:var(--surface-2);border-radius:14px 14px 0 0;font-size:.78rem} .af-breakdown-title>span{font-weight:800} .af-br-row{padding:7px 14px;background:var(--surface-2);font-size:.76rem} .af-br-line{margin:0 14px} .af-br-row.total{padding:10px 14px 13px;border-radius:0 0 14px 14px} .af-br-row.total span,.af-br-row.total b{font-size:.88rem} .af-methods{gap:10px} .af-method{min-height:78px;padding:13px;border-radius:15px;background:var(--surface-2);border:1px solid var(--border)} .af-method.active{border-color:var(--primary);background:var(--primary-soft)} .af-method-icon{width:42px;height:42px;border-radius:12px;font-size:1rem} .af-method b{font-size:.8rem} .af-method small{font-size:0.682rem;margin-top:3px} .af-method-check{font-size:.82rem} .af-soon{top:7px;right:7px;font-size:0.644rem!important;padding:3px 5px} .af-continue{margin-top:16px;min-height:54px} .af-continue b{font-size:1rem} .af-history-toggle{padding:16px 17px} .af-history-title{gap:12px} .af-history-title>i{width:42px;height:42px;border-radius:12px} .af-history-title b{font-size:.86rem} .af-history-title small{font-size:0.682rem;margin-top:3px} .af-history-arrow{width:34px;height:34px;border-radius:10px;font-size:.72rem} .af-history-list{padding:0 14px 14px} .af-history-loading,.af-history-empty{font-size:.74rem} .af-history-item{gap:10px;padding:14px 3px} .af-history-ic{width:42px;height:42px;border-radius:12px} .af-history-row>b{font-size:.86rem} .af-history-main>small{font-size:0.666rem;margin-top:3px} .af-history-main>span{font-size:0.68rem;margin-top:3px} .af-status-pill{font-size:0.652rem} .af-history-action{padding:8px 10px;font-size:0.674rem} /* Payment sheet: keep the app's native surfaces, but make content comfortable to read. */ .af-order-chip{padding:8px 10px;border-radius:10px;font-size:0.674rem} .af-timer{padding:8px 10px;border-radius:10px;font-size:.76rem} .af-step{width:52px;gap:5px} .af-step>span{width:30px;height:30px;font-size:0.686rem} .af-step small{font-size:0.662rem} .af-step-line{margin-top:15px} .af-step-label{gap:11px;margin-bottom:14px} .af-step-label>span{font-size:0.658rem;padding:6px 8px} .af-step-label b{font-size:.9rem} .af-step-label small{font-size:0.684rem;margin-top:2px} .af-qr-card{gap:15px;padding:15px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border)} .af-qr-frame{width:132px;border-radius:14px} .af-qr-scan{font-size:0.646rem} .af-qr-amount small{font-size:0.682rem} .af-qr-amount b{font-size:1.55rem} .af-qr-amount span{font-size:0.672rem;line-height:1.45} .af-open-upi{margin:12px 0;padding:12px;border-radius:13px;font-size:.74rem} .af-pay-details,.af-status-summary{border-radius:14px;margin:12px 0 14px} .af-detail-row{padding:11px 12px} .af-detail-row>span{font-size:0.686rem} .af-detail-row b{font-size:.77rem} .af-detail-row button{width:30px;height:30px;font-size:0.682rem} .af-pay-warning{padding:11px 12px;margin-bottom:14px;border-radius:12px;font-size:0.682rem} .af-upload-zone{min-height:200px;border-radius:16px;background:var(--surface-2);padding:18px} .af-upload-icon{width:52px;height:52px;border-radius:15px;font-size:1.2rem} .af-upload-zone>b{font-size:.82rem} .af-upload-zone>span{font-size:0.678rem;margin-top:4px} .af-proof-checks{gap:7px;margin:10px 0 14px} .af-proof-checks span{font-size:0.666rem;padding:6px 8px} .af-review-stage h3{font-size:1.08rem} .af-review-kicker{font-size:0.662rem} .af-review-stage>p{font-size:.73rem;line-height:1.55} .af-review-time{padding:12px;border-radius:13px} .af-review-time b{font-size:.72rem} .af-review-time span{font-size:0.672rem} .af-proof-link{padding:11px;margin-bottom:13px;font-size:0.686rem} @media(max-width:390px){ .af-method{padding:11px;gap:8px} .af-method-icon{width:38px;height:38px} .af-method b{font-size:.73rem} .af-method small{font-size:0.672rem} .af-tiles{gap:6px} .af-amt-tile b{font-size:.7rem} .af-qr-card{gap:11px;padding:12px} .af-qr-frame{width:118px} .af-qr-amount b{font-size:1.38rem} } /* Screenshot proof refinement: no empty preview; selected image stays compact. */ .af-proof-preview{display:none!important;width:92px!important;height:64px!important;max-width:92px!important;max-height:64px!important;object-fit:cover;margin:10px auto 0!important;background:var(--surface)!important;border:1px solid var(--border);border-radius:9px!important;box-shadow:0 5px 14px -12px rgba(0,0,0,.55);cursor:zoom-in} .af-proof-preview.show[src]{display:block!important} .af-upload-zone.has-file{min-height:178px} .af-proof-popup-wrap{display:block;width:min(76vw,310px);max-height:58vh;margin:2px auto 0;overflow:auto;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);padding:6px} .af-proof-popup-image{display:block;width:100%;height:auto;max-height:54vh;object-fit:contain;border-radius:12px;background:var(--surface)} /* Payment action spacing + non-destructive centered support popup */ .af-pay-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:2px}.af-pay-actions .btn{margin:0!important;min-height:50px} .af-support-popup-note{display:block;font-size:.7rem;line-height:1.55;color:var(--text-muted);margin:0 0 10px}.af-support-popup-links{display:grid;gap:7px;text-align:left}.af-support-popup-links>a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);text-decoration:none}.af-support-popup-links>a>i:first-child{width:32px;height:32px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.af-support-popup-links>a>span{min-width:0}.af-support-popup-links small{display:block;font-size:0.662rem;color:var(--text-muted)}.af-support-popup-links b{display:block;margin-top:1px;font-size:0.684rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.af-support-popup-links>a>i:last-child{font-size:0.67rem;color:var(--text-muted)}.af-support-none{display:block;padding:10px;border-radius:10px;background:var(--surface-2);font-size:0.686rem;color:var(--text-muted);text-align:center} /* Larger, reliably scannable UPI QR */ .af-qr-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center;text-align:center;gap:12px!important} .af-qr-frame{width:min(220px,78vw)!important;max-width:220px;margin:0 auto;padding:10px!important;border-radius:16px!important} .af-qr-frame .eh-qr-logo-wrap{width:100%!important;max-width:none!important;padding:8px!important} .af-qr-frame .eh-qr-center-logo{width:34px;height:34px;padding:4px;box-shadow:0 0 0 4px #fff} .af-qr-amount{align-items:center;text-align:center}.af-qr-amount b{font-size:1.68rem}.af-qr-scan{font-size:0.658rem;margin-top:7px} @media(max-width:390px){.af-qr-frame{width:min(205px,76vw)!important}.af-qr-amount b{font-size:1.52rem}} /* Screenshot viewer button behaves like the former link but stays inside the app popup. */ button.af-proof-link{width:100%;border:0;font-family:inherit;cursor:pointer} /* 2026-08-31: compact mobile proof preview, bounded image viewer and method-selector dark-mode polish */ .af-upload-zone .af-proof-preview{ display:none!important; inline-size:64px!important; block-size:46px!important; width:64px!important; height:46px!important; min-width:0!important; min-height:0!important; max-width:64px!important; max-height:46px!important; flex:0 0 46px!important; align-self:center!important; object-fit:cover!important; border-radius:8px!important; margin:8px auto 0!important; } .af-upload-zone .af-proof-preview.show[src]{display:block!important} @media(max-width:480px){ .af-upload-zone .af-proof-preview{ inline-size:58px!important; block-size:42px!important; width:58px!important; height:42px!important; max-width:58px!important; max-height:42px!important; flex-basis:42px!important; } } .af-proof-popup-wrap{ width:min(78vw,320px)!important; max-height:min(38dvh,330px)!important; overflow:hidden!important; display:flex!important; align-items:center; justify-content:center; padding:6px!important; } .af-proof-popup-image{ width:auto!important; max-width:100%!important; height:auto!important; max-height:min(36dvh,310px)!important; object-fit:contain!important; border-radius:12px!important; } .alert-card:has(.af-proof-popup-wrap){ max-height:calc(100dvh - 28px); overflow:hidden; } .alert-card:has(.af-proof-popup-wrap) .a-actions{flex:none;margin-top:14px} .af-methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch} .af-method{ width:100%; min-width:0; min-height:92px; padding:12px 10px; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:6px; overflow:hidden; } .af-method>span:nth-child(2){align-items:center;text-align:center;width:100%;min-width:0} .af-method b{color:var(--text);white-space:normal;line-height:1.2} .af-method small{color:var(--text-muted);white-space:normal;line-height:1.2} .af-method.active{ background:color-mix(in srgb,var(--primary) 12%,var(--surface))!important; border-color:color-mix(in srgb,var(--primary) 58%,var(--border))!important; color:var(--text)!important; } .af-method.active b{color:var(--text)!important} .af-method.active small{color:color-mix(in srgb,var(--text-muted) 88%,var(--text))!important} .af-method-check{position:absolute;top:8px;right:8px;margin:0!important;color:var(--primary)} .af-soon{top:7px;right:7px} @media(max-width:390px){ .af-method{min-height:88px;padding:11px 8px} .af-method-icon{width:36px;height:36px} } .alert-card:has(.af-proof-popup-wrap)>.a-ic{width:48px;height:48px;margin-bottom:10px;font-size:1.25rem;flex:none} .alert-card:has(.af-proof-popup-wrap)>h3{margin-bottom:8px;flex:none} .alert-card:has(.af-proof-popup-wrap)>p{margin:0;overflow:hidden;display:flex;justify-content:center;min-height:0} /* Rejected Add Fund orders: make the agent's reason visible in history and details. */ .af-history-main>.af-history-reason{display:flex;align-items:flex-start;gap:5px;margin-top:5px;padding:6px 7px;border-radius:9px;background:var(--danger-soft);color:var(--danger);font-size:0.666rem;line-height:1.35;font-weight:700;white-space:normal;overflow-wrap:anywhere} .af-history-reason i{margin-top:1px;flex:none} .af-rejection-note{display:flex;align-items:flex-start;gap:9px;text-align:left;margin:-2px 0 13px;padding:10px 11px;border-radius:12px;background:var(--danger-soft);color:var(--danger)} .af-rejection-note>i{margin-top:3px;flex:none} .af-rejection-note>div{display:flex;flex-direction:column;min-width:0} .af-rejection-note small{font-size:0.666rem;font-weight:750;opacity:.82} .af-rejection-note b{font-size:.7rem;line-height:1.4;margin-top:2px;overflow-wrap:anywhere} /* Phase 13 — USDT white-label Add Fund */ .af-method-mode{position:absolute;top:8px;right:8px;min-width:34px;padding:4px 6px;border-radius:8px;background:color-mix(in srgb,#26a17b 14%,var(--surface));color:#188965;font-size:0.646rem;font-weight:900;letter-spacing:.045em;line-height:1;text-align:center} .af-method[data-method="crypto"].active .af-method-mode{background:var(--primary);color:#fff} .af-method[data-method="crypto"].disabled{opacity:.56;cursor:not-allowed}.af-method[data-method="crypto"].disabled .af-method-mode{background:var(--surface-2);color:var(--text-muted)} .af-method-icon.crypto{background:color-mix(in srgb,#26a17b 15%,var(--surface));color:#15916b} .af-continue>span{display:flex;align-items:baseline;justify-content:center;gap:5px;flex-wrap:wrap}.af-continue>span small{font-size:0.664rem;font-weight:750;opacity:.8;white-space:nowrap} .af-crypto-stage{min-width:0}.af-test-banner{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:12px;border-radius:14px;background:color-mix(in srgb,var(--warning) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--warning) 28%,var(--border));color:var(--text)}.af-test-banner>i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--warning-soft);color:var(--warning);flex:none}.af-test-banner>div{display:flex;flex-direction:column;min-width:0}.af-test-banner b{font-size:.72rem}.af-test-banner span{font-size:0.668rem;color:var(--text-muted);line-height:1.4;margin-top:1px} .af-crypto-qr-card{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:17px;background:var(--surface-2);text-align:center}.af-crypto-qr{width:min(232px,76vw);max-width:232px}.af-crypto-qr .eh-qr-logo-wrap{width:100%!important;max-width:none!important;padding:9px!important;border-radius:16px}.af-crypto-qr .eh-qr-center-logo{width:36px;height:36px;padding:4px;box-shadow:0 0 0 4px #fff}.af-crypto-amount{display:flex;flex-direction:column;align-items:center}.af-crypto-amount small{font-size:0.678rem;color:var(--text-muted)}.af-crypto-amount b{font-size:1.34rem;letter-spacing:-.025em;color:var(--primary);margin-top:2px;overflow-wrap:anywhere}.af-crypto-amount span{font-size:0.674rem;margin-top:3px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,#26a17b 13%,var(--surface));color:#16865f;font-weight:800} .af-crypto-live{display:flex;align-items:center;gap:9px;margin:10px 0 12px;padding:10px 11px;border-radius:13px;background:color-mix(in srgb,var(--success) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 20%,var(--border));text-align:left}.af-crypto-live>span{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 12%,transparent);animation:afCryptoLive 1.5s ease-in-out infinite;flex:none}.af-crypto-live>div{display:flex;flex-direction:column;min-width:0}.af-crypto-live b{font-size:0.684rem}.af-crypto-live small{font-size:0.662rem;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes afCryptoLive{50%{transform:scale(.65);opacity:.62}} .af-pay-warning.crypto{background:color-mix(in srgb,#26a17b 10%,var(--surface));border:1px solid color-mix(in srgb,#26a17b 20%,var(--border));color:var(--text)}.af-pay-warning.crypto>i{color:#15916b}.af-pay-warning.crypto b{color:#11815e}.af-test-pay{margin-top:2px} .af-history-main>span:first-of-type{overflow-wrap:anywhere} @media(max-width:390px){.af-crypto-qr{width:min(218px,74vw)}.af-crypto-amount b{font-size:1.22rem}.af-test-banner{padding:10px}.af-method-mode{top:6px;right:6px}} [data-theme="dark"] .af-crypto-amount span{color:#5dd9af}.af-method.active .af-method-icon.crypto{background:color-mix(in srgb,#26a17b 19%,var(--surface));color:#29b889} /* Phase 15 — compact crypto payment state */ .af-order-modal.crypto-order .af-stepper.two-steps{max-width:300px;margin-left:auto;margin-right:auto;justify-content:center} .af-order-modal.crypto-order .af-stepper.two-steps .af-step{width:72px} .af-order-modal.crypto-order .af-stepper.two-steps .af-step-line{max-width:110px;flex:1} .af-crypto-inline-status{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;min-height:28px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--success) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 20%,var(--border));color:var(--text);max-width:min(100%,320px)} .af-crypto-inline-status i{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 12%,transparent);animation:afCryptoLive 1.5s ease-in-out infinite;flex:none} .af-crypto-inline-status strong{font-size:0.666rem;line-height:1.35;font-weight:800;overflow-wrap:anywhere} @media(max-width:390px){.af-order-modal.crypto-order .af-stepper.two-steps{max-width:260px}.af-crypto-inline-status{padding:6px 9px}.af-crypto-inline-status strong{font-size:0.66rem}} /* Phase 16: partial/manual settlement note */ .af-rejection-note.settlement{background:color-mix(in srgb,var(--primary) 8%,var(--surface));border-color:color-mix(in srgb,var(--primary) 22%,var(--border));color:var(--text)} .af-rejection-note.settlement>i{color:var(--primary)} .af-history-reason.settlement{color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,transparent)} /* Async button feedback for history actions */ .af-history-toggle:disabled{opacity:.78;cursor:wait;justify-content:center} .af-history-toggle .ld,.af-history-action .ld{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--primary-soft);border-top-color:var(--primary);flex:none} .af-history-action.pay .ld{border-color:rgba(255,255,255,.42);border-top-color:#fff} /* Phase 16 — optional multi-agent Add Fund chooser */ .af-agent-chooser{display:flex;flex-direction:column;gap:14px;padding:2px 0 4px} .af-agent-intro{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)} .af-agent-intro>span{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:14px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:1rem} .af-agent-intro>div{display:flex;flex-direction:column;min-width:0}.af-agent-intro b{font-size:.8rem}.af-agent-intro small{margin-top:2px;font-size:0.676rem;line-height:1.4;color:var(--text-muted)} .af-agent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .af-agent-tile{position:relative;display:flex;align-items:center;gap:9px;min-width:0;text-align:left;border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:12px 10px;color:var(--text);box-shadow:0 8px 22px rgba(15,23,42,.04);transition:.2s ease} .af-agent-tile.active{border-color:color-mix(in srgb,var(--primary) 65%,var(--border));background:color-mix(in srgb,var(--primary) 8%,var(--surface));box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 11%,transparent);transform:translateY(-1px)} .af-agent-radio{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;border:2px solid color-mix(in srgb,var(--text-muted) 35%,var(--border));color:transparent;font-size:0.666rem}.af-agent-tile.active .af-agent-radio{background:var(--primary);border-color:var(--primary);color:#fff} .af-agent-tile>div{display:flex;flex-direction:column;min-width:0}.af-agent-tile small{font-size:0.646rem;letter-spacing:.06em;color:var(--text-muted);font-weight:900}.af-agent-tile b{margin-top:2px;font-size:0.686rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.af-agent-tile em{margin-top:3px;font-size:0.658rem;color:var(--text-muted);font-style:normal;font-weight:700} .af-agent-continue{margin-top:1px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px} @media(max-width:339px){.af-agent-grid{grid-template-columns:1fr}.af-agent-tile{padding:11px}} /* v2026.09.08.2 · Add Fund attempt notice + compact selected screenshot */ .af-daily-limit-note{display:none;margin-top:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--warning) 28%,var(--border));border-radius:13px;background:var(--warning-soft);color:color-mix(in srgb,var(--warning) 78%,var(--text));font-size:0.684rem;line-height:1.5;align-items:flex-start;gap:8px}.af-daily-limit-note.show{display:flex}.af-daily-limit-note i{margin-top:2px}.af-daily-limit-note b{font-weight:900} .af-selected-proof{display:flex;align-items:stretch;gap:8px;margin:0 0 10px}.af-selected-proof[hidden]{display:none!important}.af-selected-proof-view{flex:1;min-width:0;min-height:66px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:7px 10px 7px 7px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--text)}.af-selected-proof-view img{width:52px;height:48px;flex:none;border-radius:9px;object-fit:cover;border:1px solid var(--border);background:var(--surface)}.af-selected-proof-view span{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}.af-selected-proof-view b{font-size:.72rem}.af-selected-proof-view small{font-size:0.66rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.af-selected-proof-view>i{font-size:0.674rem;color:var(--text-muted)}.af-selected-proof-change{flex:none;min-width:72px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--primary);font-size:0.668rem;font-weight:850;display:flex;align-items:center;justify-content:center;gap:5px}.af-selected-proof-view:active,.af-selected-proof-change:active{transform:scale(.98)} .af-selected-proof #af-proof-preview{display:block!important;width:52px!important;height:48px!important;max-width:52px!important;max-height:48px!important;margin:0!important;border-radius:9px!important;object-fit:cover!important} /* v2026.09.08.3 · once a screenshot is selected, keep only the compact preview/change row. */ .af-upload-zone[hidden]{display:none!important} /* ================= RESPONSIVE ADD FUND ================= */ @media(max-width:339px){ .af-agent-grid{grid-template-columns:1fr} .af-selected-proof{gap:6px} .af-selected-proof-view{padding-right:7px;gap:7px} .af-selected-proof-change{min-width:62px} .af-history-main,.af-history-side{min-width:0} } /* 384-reference compact safety */ @media(max-width:339px){ .af-tiles{gap:5px} .af-amt-tile{min-height:45px} } /* ================= v2026.09.13.47 · ADD FUND READABILITY ================= */ .af-kicker,.af-security,.af-section-head small,.af-method small,.af-inr,.af-breakdown-title small,.af-note,.af-history-title small,.af-history-loading,.af-history-empty,.af-history-main>small,.af-history-main>span,.af-history-action,.af-assurance,.af-order-chip,.af-step>span,.af-step small,.af-step-label>span,.af-step-label small,.af-qr-scan,.af-qr-amount small,.af-qr-amount span,.af-detail-row>span,.af-pay-warning,.af-upload-zone>span,.af-proof-checks span,.af-review-kicker,.af-review-stage>p,.af-review-time span,.af-proof-link,.wd-preview>p,.wd-coming-row,.af-support-popup-links small,.af-history-reason,.af-rejection-note small,.af-method-mode,.af-continue>span small,.af-test-banner span,.af-crypto-amount small,.af-crypto-amount span,.af-crypto-live small,.af-crypto-inline-status strong,.af-agent-intro small,.af-agent-radio,.af-agent-tile small,.af-agent-tile em,.af-selected-proof-view small{font-size:.7rem} .af-status-pill,.af-soon,.af-live-dot{font-size:0.674rem!important} .af-amt-tile small{font-size:0.678rem}.af-amt-tile b{font-size:.72rem} .af-detail-row b,.af-open-upi,.af-timer{font-size:.72rem} /* v212 — external order reference for Gateway-created Add Fund requests */ .af-history-main>.af-history-api-order{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin-top:4px;padding:3px 7px;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-weight:800;white-space:normal;overflow-wrap:anywhere}.af-history-api-order i{font-size:0.674rem;flex:0 0 auto} .af-api-order-ref{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0 2px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--primary-soft) 55%,var(--surface))}.af-api-order-ref>span{min-width:0;display:flex;flex-direction:column}.af-api-order-ref small{font-size:0.654rem;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.af-api-order-ref b{margin-top:2px;font-size:0.682rem;color:var(--text);overflow-wrap:anywhere}.af-api-order-ref>button{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--surface);color:var(--primary);display:grid;place-items:center} /* v217 · make the complete Add Fund history row open its order details. */ .af-history-item.af-history-clickable{cursor:pointer;border-radius:11px;transition:background .16s ease,transform .16s ease} .af-history-item.af-history-clickable:hover{background:color-mix(in srgb,var(--primary) 3%,var(--surface))} .af-history-item.af-history-clickable:active{background:var(--surface-2)} .af-history-item.af-history-clickable:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 52%,transparent);outline-offset:-2px} /* v272 - Theme-aware UTR entry, matched to existing Add Fund fields. */ .af-utr-proof-stage{display:flex;flex-direction:column;min-height:min(390px,58dvh);padding-bottom:clamp(20px,4vh,38px)} .af-utr-entry{display:flex;flex-direction:column;gap:9px;margin:9px 0 25px} .af-utr-field-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .af-utr-field-head label{font-size:.72rem;font-weight:800;color:var(--text)} .af-utr-example-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;border:1px solid var(--border);border-radius:999px;background:var(--primary-soft);color:var(--primary);padding:6px 11px;min-height:30px;font-size:0.676rem;font-weight:800;line-height:1.25;cursor:pointer} .af-utr-example-pill:active{transform:scale(.97)} .af-utr-input{display:block;width:100%;min-width:0;height:52px;box-sizing:border-box;border:1.5px solid var(--border);border-radius:14px;background:var(--surface-2);color:var(--text);padding:0 14px;font-family:inherit;font-size:.82rem;font-weight:700;letter-spacing:.015em;line-height:1.35;outline:none;-webkit-appearance:none;appearance:none;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease} .af-utr-input::placeholder{color:var(--text-muted);font-weight:500;opacity:.8} .af-utr-input:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)} .af-utr-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:15px} .af-utr-actions .btn{width:100%;min-height:48px;margin:0!important} /* Keep Step 1 CTA visible at the bottom of the modal, outside its scrollable content. */ .sheet.af-upi-pay-docked .sheet-body{min-height:0;overscroll-behavior:contain;padding-bottom:max(24px,var(--safe-b))} .sheet>.af-step1-dock{flex:none;display:none;padding:12px var(--sheet-pad) max(12px,var(--safe-b));border-top:1px solid var(--border);background:var(--surface);box-shadow:0 -8px 20px -20px var(--text);z-index:2} .sheet.af-upi-pay-docked>.af-step1-dock{display:block} .sheet>.af-step1-dock .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin:0!important} /* ---- withdrawalmanager.css ---- */ .wm-page{padding-bottom:18px}.wm-wallet{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 92%,#12132c),color-mix(in srgb,var(--primary) 68%,#20203d));}.wm-wallet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.wm-wallet-actions button{min-height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font-size:0.686rem;font-weight:800}.wm-wallet-actions button:active{transform:scale(.98)}.wm-wallet-actions button[hidden]{display:none}.wm-search{height:44px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);display:flex;align-items:center;gap:9px;padding:0 12px;margin:12px 0}.wm-search i{font-size:0.68rem;color:var(--text-muted)}.wm-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.69rem;font-weight:650}.wm-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft);background:var(--surface)}.wm-range-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.wm-range-grid label{display:grid;gap:6px}.wm-range-grid span{font-size:0.666rem;font-weight:800;color:var(--text-muted)}.wm-range-grid input{height:45px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);padding:0 12px;font:inherit;font-size:.72rem;font-weight:750;outline:0}.wm-range-grid input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}.wm-rule{display:block;margin-top:8px;color:var(--text-muted);font-size:0.662rem;line-height:1.4}.wm-save-range{margin-top:11px;width:100%}.wm-request .fm-request-meta span:first-child{color:var(--primary);font-weight:850}.wm-payout-hero{text-align:center;padding:11px 8px 14px}.wm-payout-hero small{display:block;font-size:0.646rem;letter-spacing:.12em;color:var(--text-muted);font-weight:900}.wm-payout-hero b{display:block;margin:4px 0 2px;font-size:1.55rem;color:var(--success);letter-spacing:-.03em}.wm-payout-hero span{font-size:0.67rem;color:var(--text-muted)}.wm-proof-box{margin-top:12px}.wm-proof-box label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;border:1px dashed color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--primary) 4%,var(--surface));font-size:0.68rem;font-weight:750;color:var(--primary);cursor:pointer}.wm-proof-box img{display:none;max-width:180px;max-height:120px;border-radius:10px;object-fit:contain;margin-top:4px}.wm-proof-box img.show{display:block}.wm-modal-intro{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:11px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border)}.wm-modal-intro>span{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.wm-modal-intro div{display:flex;flex-direction:column}.wm-modal-intro b{font-size:.72rem}.wm-modal-intro small{font-size:0.662rem;color:var(--text-muted);margin-top:2px}.mgmt-home-access{width:100%;margin-bottom:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface);padding:12px;display:grid;gap:10px}.mgmt-home-head{display:flex;align-items:center;gap:10px}.mgmt-home-head>span{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}.mgmt-home-head div{min-width:0;display:flex;flex-direction:column}.mgmt-home-head b{font-size:.78rem}.mgmt-home-head small{font-size:0.674rem;color:var(--text-muted);margin-top:2px}.mgmt-home-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mgmt-home-options button{min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);display:flex;align-items:center;gap:8px;padding:0 10px;text-align:left}.mgmt-home-options button i{width:28px;height:28px;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:0.67rem}.mgmt-home-options button span{display:flex;flex-direction:column;min-width:0}.mgmt-home-options b{font-size:0.678rem}.mgmt-home-options small{font-size:0.65rem;color:var(--text-muted);margin-top:1px}.wm-single-home{padding:12px 14px;display:flex;align-items:center;gap:11px}.wm-single-home>span{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.wm-single-home>div{flex:1;text-align:left}.wm-single-home b{display:block;font-size:.78rem}.wm-single-home small{display:block;font-size:0.674rem;color:var(--text-muted);margin-top:2px}.wm-single-home>i{color:var(--text-muted)}@media(max-width:339px){.mgmt-home-options{grid-template-columns:1fr}} .wm-copy-row{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 30px!important}.wm-copy-row button{width:30px;height:30px;border:0;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.wm-load-more{width:100%;height:40px;margin:8px 0 2px;border:1px dashed var(--border);border-radius:11px;background:var(--surface-2);color:var(--text-muted);font-size:10.8px;font-weight:800}.wm-load-more i{margin-left:5px;font-size:10.4px} /* Withdrawal Manager polish — aligns with Add Fund Manage while keeping withdrawal-specific actions clear. */ .wm-page>.section-title{margin-bottom:-1px} .wm-wallet{background:var(--grad);box-shadow:0 22px 50px -18px var(--primary)} .wm-wallet-head{align-items:center} .wm-wallet-head>span{display:flex;align-items:center;gap:7px} .wm-wallet-tools{display:flex;align-items:center;gap:7px;flex:none} .wm-wallet-tools em{margin:0} .wm-wallet-refresh{width:32px;height:32px;border-radius:10px;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.14);color:#fff} .wm-wallet-refresh:hover{background:rgba(255,255,255,.22)!important;color:#fff!important} .wm-wallet-actions{margin-top:11px} .wm-wallet-actions button{min-height:44px;border-radius:13px;background:rgba(255,255,255,.14);font-size:.72rem;letter-spacing:.005em;transition:transform .16s var(--ease),background .2s,border-color .2s} .wm-wallet-actions button:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.28)} .wm-incoming-card{border-color:color-mix(in srgb,var(--primary) 14%,var(--border))} .wm-incoming-head{align-items:center} .wm-incoming-head{margin-bottom:10px} .wm-incoming-tools{display:flex;align-items:center;gap:7px;flex:none} .wm-count-pill{height:30px;min-width:30px;padding:0 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:.7rem;font-weight:850;border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border))} .wm-search{height:46px;margin:0 0 12px;border-radius:13px;padding:0 13px;transition:border-color .2s,box-shadow .2s,background .2s} .wm-search i{font-size:.7rem} .wm-search input{font-size:.72rem} #wm-search-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--primary);display:none;animation:wmSpin .65s linear infinite} #wm-search-spin.show{display:block}@keyframes wmSpin{to{transform:rotate(360deg)}} .wm-incoming-list{gap:10px} .wm-request{padding:13px;border-radius:15px;background:var(--surface);box-shadow:0 8px 22px -22px rgba(0,0,0,.6);transition:border-color .2s,box-shadow .2s,transform .16s var(--ease)} .wm-request:hover{border-color:color-mix(in srgb,var(--primary) 22%,var(--border));box-shadow:0 12px 28px -24px var(--primary)} .wm-request-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0} .wm-request-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--primary-soft);color:var(--primary);font-size:.72rem} .wm-request-icon.bank{background:color-mix(in srgb,var(--info,#3b82f6) 12%,var(--surface));color:var(--info,#3b82f6)} .wm-request-copy{min-width:0}.wm-request-id{display:flex;align-items:center;gap:6px;min-width:0}.wm-request-id b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}.wm-request-id span{flex:none;padding:3px 6px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);font-size:0.654rem;font-weight:850;color:var(--text-muted)} .wm-request-copy>small{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.672rem} .wm-request-main>strong{font-size:.85rem;color:var(--success);white-space:nowrap} .wm-request-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px} .wm-request-facts>span{display:block;min-width:0;padding:8px 9px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border)} .wm-request-facts small{font-size:0.658rem;color:var(--text-muted);margin:0 0 2px}.wm-request-facts b{display:block;font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wm-request-time{display:flex;align-items:center;gap:5px;margin:8px 2px 0;color:var(--text-muted);font-size:0.664rem}.wm-request-time i{font-size:0.66rem} .wm-request>button{height:42px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--primary-soft);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 12%,var(--border));font-size:.69rem} .wm-request>button i{margin:0} .wm-incoming-empty{min-height:150px;border:1px dashed var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 14px} .wm-incoming-empty>span{width:36px;height:36px;border-radius:12px;background:var(--success-soft);color:var(--success);display:grid;place-items:center;margin-bottom:3px}.wm-incoming-empty b{font-size:.74rem;color:var(--text)}.wm-incoming-empty small{font-size:0.672rem;line-height:1.45;max-width:250px} .wm-receive-card{overflow:hidden} .wm-receive-head{align-items:center;margin-bottom:10px} .wm-receive-switch{display:block!important;visibility:visible!important;opacity:1!important} .wm-receive-state{display:flex;align-items:center;gap:7px;min-height:38px;padding:8px 10px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);font-size:0.672rem;font-weight:700;color:var(--text-muted);transition:.2s} .wm-receive-state i{font-size:0.682rem}.wm-receive-state.on{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 22%,var(--border));color:var(--success)}.wm-receive-state.off{background:var(--surface-2);color:var(--text-muted)} .wm-range-grid{margin-top:12px}.wm-range-grid span{font-size:0.684rem}.wm-range-grid input{height:50px;border-radius:14px;background:var(--surface-2);font-size:.75rem;transition:border-color .2s,box-shadow .2s,background .2s}.wm-range-grid input:focus{background:var(--surface);box-shadow:0 0 0 3px var(--primary-soft)} .wm-rule{margin-top:9px;font-size:0.672rem}.wm-save-range{height:46px;border-radius:13px} @media(max-width:430px){.wm-wallet-tools{gap:5px}.wm-wallet-tools em{font-size:0.67rem;padding:5px 7px}.wm-wallet-refresh{width:30px;height:30px}.wm-request{padding:12px}.wm-request-main{gap:8px}.wm-request-icon{width:34px;height:34px}.wm-request-main>strong{font-size:.78rem}.wm-request-facts{gap:6px}.wm-request-facts>span{padding:7px 8px}.wm-receive-state{font-size:0.666rem}} @media(max-width:339px){.wm-request-main{grid-template-columns:auto minmax(0,1fr)}.wm-request-main>strong{grid-column:2;justify-self:start}.wm-request-facts{grid-template-columns:1fr}.wm-wallet-tools em{max-width:92px;overflow:hidden;text-overflow:ellipsis}.wm-incoming-tools .fm-refresh{display:none}} /* Phase 18 routing/UI correction — compact manager controls. */ .wm-wallet>b{margin-bottom:14px} .wm-wallet-actions{margin-top:0} .wm-incoming-tools{margin-left:auto} .wm-count-box,.wm-incoming-refresh{width:40px;height:40px;min-width:40px;border-radius:12px;box-sizing:border-box} .wm-count-box{display:grid;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));background:var(--primary-soft);color:var(--primary);font-size:.74rem;font-weight:900;line-height:1} .wm-incoming-refresh.is-refreshing{pointer-events:none;background:var(--primary-soft);color:var(--primary)} .wm-incoming-refresh.is-refreshing i,.wm-wallet-refresh.is-refreshing i{animation:wmRefreshRotate .72s linear infinite} @keyframes wmRefreshRotate{to{transform:rotate(360deg)}} .wm-receive-card{min-width:0} .wm-range-line{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:end;gap:7px;margin-top:12px;box-sizing:border-box} .wm-range-line>label{min-width:0;display:grid;gap:5px} .wm-range-line>label>span{font-size:0.672rem;font-weight:800;color:var(--text-muted);padding-left:2px} .wm-range-line>label>div{width:100%;min-width:0;height:43px;display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);box-sizing:border-box;overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s} .wm-range-line>label>div:focus-within{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-soft)} .wm-range-line>label i{font-style:normal;flex:none;padding-left:10px;font-size:.72rem;font-weight:850;color:var(--text-muted)} .wm-range-line input{width:0;min-width:0;flex:1;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--text);padding:0 8px 0 5px;font:inherit;font-size:.69rem;font-weight:800;box-sizing:border-box} .wm-range-separator{width:24px;height:43px;display:grid;place-items:center;color:var(--text-muted);font-size:0.662rem} .wm-save-range{margin-top:10px} .wm-history-card{overflow:hidden} .wm-history-head{min-width:0} .wm-history-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align:left} .wm-history-title>span{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center} .wm-history-title>span i{font-size:.72rem} .wm-history-title>div{min-width:0;display:block} .wm-history-title b{display:block;font-size:.82rem;line-height:1.15} .wm-history-title small{display:block;margin-top:3px;color:var(--text-muted);font-size:0.672rem;line-height:1.35;white-space:normal;overflow-wrap:anywhere} .wm-history-head>.fa-chevron-down{flex:none;margin-left:8px} .wm-history-card .fm-ledger-title{min-width:0} .wm-history-card .fm-ledger-title>div{min-width:0} .wm-history-card .fm-ledger-title small{white-space:normal;overflow-wrap:anywhere} @media(max-width:339px){ .wm-range-line{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:4px} .wm-range-separator{width:18px} .wm-range-line>label i{padding-left:8px} .wm-range-line input{padding-right:5px;font-size:0.678rem} .wm-count-box,.wm-incoming-refresh{width:36px;height:36px;min-width:36px;border-radius:11px} } @media(max-width:339px){.wm-incoming-tools .fm-refresh{display:grid}} /* Withdrawal manager live queue + payout-only review refinements. */ .wm-request-payline{margin-top:10px;min-height:38px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--success) 18%,var(--border));border-radius:11px;background:var(--success-soft);display:flex;align-items:center;justify-content:space-between;gap:10px}.wm-request-payline span{font-size:0.662rem;font-weight:800;color:var(--text-muted)}.wm-request-payline b{font-size:.73rem;color:var(--success);white-space:nowrap} .wm-approve-copy{display:block;margin-bottom:11px;font-size:0.674rem;line-height:1.5;color:var(--text-muted)} .wm-approve-proof{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:9px;width:100%;padding:10px;border:1px dashed color-mix(in srgb,var(--primary) 34%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--primary) 5%,var(--surface));cursor:pointer;text-align:left;box-sizing:border-box}.wm-approve-proof-icon{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.wm-approve-proof-text{display:flex;flex-direction:column;min-width:0}.wm-approve-proof-text b{font-size:0.676rem;color:var(--text)}.wm-approve-proof-text small{margin-top:2px;font-size:0.65rem;color:var(--text-muted)}.wm-approve-proof img{display:none;grid-column:1/-1;width:100%;max-height:180px;object-fit:contain;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)}.wm-approve-proof img.show{display:block}.alert-card:has(.wm-approve-proof)>p{overflow:visible}.alert-card:has(.wm-approve-proof) .a-actions .btn-primary:disabled{opacity:.45;cursor:not-allowed} .wm-request-amount{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:0}.wm-request-amount small{font-size:0.646rem;font-weight:800;color:var(--text-muted);line-height:1}.wm-request-amount strong{margin-top:3px;font-size:.85rem;color:var(--success);white-space:nowrap}.wm-request-payline{display:none} @media(max-width:339px){.wm-request-amount{grid-column:2;align-items:flex-start}.wm-request-main{grid-template-columns:auto minmax(0,1fr)}} /* Quiet live queue + clickable manager history details. */ .wm-incoming-list .wm-request{animation:none!important} .wm-history-card .fm-ledger-row{width:100%;text-align:left} .wm-history-card .fm-ledger-row .fm-ledger-arrow{font-size:0.66rem;color:var(--text-muted);margin-left:2px} .wm-cashout-detail{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 8px 15px} .wm-cashout-detail>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);margin-bottom:7px} .wm-cashout-detail small{font-size:0.646rem;letter-spacing:.11em;font-weight:900;color:var(--text-muted)} .wm-cashout-detail h3{margin:4px 0 3px;font-size:1.4rem;letter-spacing:-.03em;color:var(--text)} .wm-cashout-detail em{font-style:normal;padding:4px 8px;border-radius:999px;font-size:0.654rem;font-weight:850;text-transform:capitalize;background:var(--surface-2);color:var(--text-muted)} .wm-cashout-detail.success em{background:var(--success-soft);color:var(--success)} .wm-cashout-detail.failed em{background:var(--danger-soft);color:var(--danger)} .wm-cashout-detail.pending em{background:var(--warning-soft);color:var(--warning)} .wm-history-note{margin-top:10px;padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);display:flex;align-items:flex-start;gap:8px;color:var(--text-muted);font-size:0.67rem;line-height:1.45} .wm-history-note i{margin-top:2px;color:var(--primary)} /* Phase 27 — Home manager access reveal + stronger dark-mode readability. */ #fm-home-access{animation:none;transform-origin:50% 0;will-change:auto} #fm-home-access .mgmt-home-head,#fm-home-access>span,#fm-home-access>div,#fm-home-access>i{animation:none} .mgmt-home-options button{animation:none;transition:transform .18s var(--ease),border-color .2s,background .2s,box-shadow .2s} .mgmt-home-options button:active,.fm-home-access:active{transform:scale(.985)} @keyframes ehManagerHomeReveal{0%{opacity:0;transform:translateY(-10px) scale(.985);filter:blur(2px)}65%{opacity:1;transform:translateY(2px) scale(1.003);filter:blur(0)}100%{opacity:1;transform:none;filter:none}} @keyframes ehManagerHomeContent{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} @keyframes ehManagerHomeOption{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}} [data-theme="dark"] .mgmt-home-access,[data-theme="dark"] .fm-home-access{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),color-mix(in srgb,var(--surface-2) 96%,var(--primary)));border-color:color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:0 10px 28px rgba(0,0,0,.2)} [data-theme="dark"] .mgmt-home-head b,[data-theme="dark"] .mgmt-home-options b,[data-theme="dark"] .fm-home-access b{color:var(--text);text-shadow:0 1px 0 rgba(0,0,0,.18)} [data-theme="dark"] .mgmt-home-head small,[data-theme="dark"] .mgmt-home-options small,[data-theme="dark"] .fm-home-access small{color:color-mix(in srgb,var(--text) 76%,transparent)} [data-theme="dark"] .mgmt-home-options button{background:color-mix(in srgb,var(--surface-2) 90%,var(--primary));border-color:color-mix(in srgb,var(--primary) 20%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent)} [data-theme="dark"] .mgmt-home-options button i,[data-theme="dark"] .mgmt-home-head>span,[data-theme="dark"] .fm-home-access>span{background:color-mix(in srgb,var(--primary) 18%,var(--surface-2));color:color-mix(in srgb,var(--primary) 74%,#fff)} @media(prefers-reduced-motion:reduce){#fm-home-access,#fm-home-access .mgmt-home-head,#fm-home-access>span,#fm-home-access>div,#fm-home-access>i,.mgmt-home-options button{animation:none!important}} /* v2026.09.08.2 · withdrawal search paste ribbon + upload loader */ .wm-search{position:relative;padding-right:84px}.wm-search input{width:100%}.wm-search-paste{top:50%!important;right:6px!important;transform:translateY(-50%);height:32px!important;min-width:68px!important;font-size:0.666rem!important}.wm-search-paste:active{transform:translateY(-50%) scale(.96)!important}.wm-search-paste:focus{transform:translateY(-50%)!important}.wm-approve-spin{width:16px!important;height:16px!important;flex:none}.fm-approve.is-loading{gap:7px}.fm-approve.is-loading span:last-child{display:inline!important} .wm-search-paste i{color:currentColor!important} /* ================= RESPONSIVE WITHDRAWAL MANAGER ================= */ @media(max-width:339px){ .wm-request,.wm-card{min-width:0} .wm-request-facts{grid-template-columns:1fr} .wm-request-main{grid-template-columns:auto minmax(0,1fr)} .wm-request-main>strong,.wm-request-amount{grid-column:2;justify-self:start} } /* ================= v2026.09.13.47 · WITHDRAWAL MANAGER READABILITY ================= */ .wm-range-grid span,.wm-rule,.wm-payout-hero small,.wm-payout-hero span,.wm-proof-box label,.wm-modal-intro small,.mgmt-home-head small,.mgmt-home-options small,.wm-single-home small,.wm-load-more,.wm-request-id span,.wm-request-copy>small,.wm-request-facts small,.wm-request-time,.wm-incoming-empty small,.wm-receive-state,.wm-wallet-tools em,.wm-range-line>label>span,.wm-range-separator,.wm-history-title small,.wm-request-payline span,.wm-approve-copy,.wm-approve-proof-text small,.wm-request-amount small,.wm-cashout-detail small,.wm-cashout-detail em,.wm-history-note,.wm-search-paste{font-size:.7rem!important} .wm-approve-proof-text b,.mgmt-home-options b{font-size:.74rem} .wm-request>.sla-timer{margin:8px 0 0 54px} @media(max-width:339px){.wm-request>.sla-timer{margin-left:0}} .wm-api-badge{display:inline-flex!important;align-items:center;gap:4px;padding:3px 6px;border-radius:7px;background:var(--primary-soft)!important;color:var(--primary)!important;font-size:0.654rem!important;font-style:normal;font-weight:850;line-height:1}.wm-api-badge i{font-size:0.646rem} /* ---- withdraw.css ---- */ /* ================= WITHDRAW ================= */ .withdraw-page{padding-bottom:8px}.withdraw-page>*{animation:wdRise .34s var(--ease) both}.withdraw-page>*:nth-child(2){animation-delay:.025s}.withdraw-page>*:nth-child(3){animation-delay:.05s}.withdraw-page>*:nth-child(4){animation-delay:.075s}@keyframes wdRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} .wd-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.wd-title-row h2{margin:0}.wd-balance-pill{display:inline-flex;align-items:center;gap:4px;min-height:31px;padding:6px 10px;border-radius:9px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border));white-space:nowrap}.wd-balance-pill>span{font-size:0.666rem;color:var(--text-muted);font-weight:750}.wd-balance-pill b{font-size:.72rem;color:var(--primary);font-weight:900;font-variant-numeric:tabular-nums} .wd-card,.wd-history-shell{margin-bottom:12px;border-color:var(--border);box-shadow:var(--shadow-sm)}.wd-section-head{margin-bottom:13px!important}.wd-payout-card{padding-bottom:15px} /* Payout selector: the active surface physically slides between methods. */ .wd-methods{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:4px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);overflow:hidden}.wd-method-slider{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(33.333333% - 4.6667px);border-radius:9px;background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));box-shadow:0 2px 8px rgba(0,0,0,.08);transition:left .3s cubic-bezier(.22,.9,.32,1),border-color .22s,box-shadow .22s;pointer-events:none}.wd-methods[data-active="bank"] .wd-method-slider{left:calc(33.333333% + 2.3333px)}.wd-methods[data-active="usdt"] .wd-method-slider{left:calc(66.666667% + .6667px)}.wd-method{position:relative;z-index:1;min-width:0;height:46px;border:0;border-radius:9px;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:7px;padding:0 8px;font:inherit;transition:color .2s var(--ease),transform .12s var(--ease)}.wd-method:active{transform:scale(.975)}.wd-method.active{color:var(--text)}.wd-method-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--text-muted) 8%,var(--surface));color:var(--text-muted);font-size:0.674rem;transition:background .22s,color .22s,transform .26s cubic-bezier(.22,.9,.32,1)}.wd-method.active .wd-method-icon{background:var(--primary-soft);color:var(--primary);transform:translateY(-1px)}.wd-method b{font-size:0.686rem;font-weight:850;line-height:1}.wd-method-mark{position:absolute;left:50%;bottom:1px;width:12px;height:2px;border-radius:3px;background:transparent;transform:translateX(-50%);transition:background .22s,width .24s var(--ease)}.wd-method.active .wd-method-mark{width:22px;background:var(--primary)} /* Payout inputs borrow the same hover/focus language as the amount field. */ .wd-details{margin-top:13px;display:grid;gap:10px}.wd-details>*{animation:wdFieldIn .22s cubic-bezier(.22,.9,.32,1) both}@keyframes wdFieldIn{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}.wd-field{display:grid;gap:6px;min-width:0}.wd-field>span{padding-left:1px;font-size:0.67rem;font-weight:800;color:var(--text-muted)}.wd-input-wrap{position:relative;min-width:0;border-radius:13px}.wd-field-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);z-index:1;width:20px;text-align:center;color:var(--text-muted);font-size:0.674rem;pointer-events:none;transition:color .2s,transform .2s}.wd-input{width:100%;height:49px;padding:0 13px;border:1.5px solid var(--border);border-radius:13px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 2.5%,var(--surface)));color:var(--text);font:inherit;font-size:.72rem;font-weight:650;outline:none;transition:border-color .2s,box-shadow .2s,background .2s,transform .16s var(--ease)}.wd-input.has-icon{padding-left:41px}.wd-input::placeholder{color:var(--text-muted);opacity:.58;font-weight:550}.wd-input-wrap:focus-within .wd-field-icon{color:var(--primary);transform:translateY(-50%) scale(1.05)}.wd-input-wrap:focus-within .wd-input{border-color:var(--primary);box-shadow:0 0 0 5px var(--primary-soft);background:var(--surface)}@media(hover:hover){.wd-input-wrap:hover .wd-input{border-color:var(--primary);box-shadow:0 0 0 5px var(--primary-soft);background:var(--surface)}.wd-input-wrap:hover .wd-field-icon{color:var(--primary)}}.wd-select-wrap:after{content:'\f078';font-family:'Font Awesome 7 Pro';font-weight:900;position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:0.654rem;color:var(--text-muted);pointer-events:none}.wd-select-wrap select{appearance:none;padding-right:32px}.wd-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wd-field-note{display:block;font-size:0.654rem;line-height:1.45;color:var(--text-muted)} /* Amount + fee summary */ .wd-breakdown{margin-top:13px;padding:12px 13px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);opacity:.58;transition:opacity .2s,border-color .2s}.wd-breakdown.active{opacity:1;border-color:color-mix(in srgb,var(--primary) 20%,var(--border))}.wd-br-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;font-size:0.68rem}.wd-br-row span{color:var(--text-muted)}.wd-br-row span em{font-style:normal;color:var(--primary);font-weight:800}.wd-br-row b{font-size:.69rem;font-variant-numeric:tabular-nums}.wd-br-row.total span,.wd-br-row.total b{font-size:.76rem;font-weight:850;color:var(--text)}.wd-br-row.total b{color:var(--success)}.wd-br-line{height:1px;background:var(--border);margin:5px 0}.wd-usdt-convert{display:none;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px;margin-top:9px;padding:9px 10px;border-radius:10px;background:color-mix(in srgb,#f59e0b 9%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 18%,var(--border))}.wd-usdt-convert.show{display:grid}.wd-usdt-convert span{font-size:0.668rem;color:var(--text-muted)}.wd-usdt-convert b{font-size:.75rem;color:#c47b00}.wd-usdt-convert small{grid-column:1/-1;font-size:0.652rem;color:var(--text-muted)} /* Final action stays inside the amount card. Amount and label intentionally share one type scale. */ .wd-action-error{display:none;margin:11px 2px -5px;align-items:flex-start;gap:6px;color:var(--danger);font-size:0.662rem;font-weight:750;line-height:1.4}.wd-action-error.show{display:flex}.wd-action-error.show:before{content:'\f06a';font-family:'Font Awesome 7 Pro';font-weight:900;font-size:0.658rem;margin-top:1px;flex:none}.wd-continue{margin-top:14px;min-height:52px}.wd-continue-copy{display:flex!important;align-items:center!important;justify-content:center;gap:5px!important;font-size:.76rem!important;font-weight:850!important;line-height:1!important;letter-spacing:0!important}.wd-continue-copy>span{font:inherit!important;color:inherit!important}.wd-continue>i{font-size:0.682rem} .wd-history-shell{margin-bottom:12px!important}.wd-history-method{width:30px;height:30px;border-radius:10px;background:var(--surface-2);color:var(--text-muted);display:grid;place-items:center;font-size:0.67rem;flex:none} .wd-review{display:grid;gap:11px;padding-top:1px}.wd-review-ticket{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:19px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:0 16px 30px -30px var(--primary)}.wd-review-ticket:after{content:'';position:absolute;right:-45px;top:-55px;width:125px;height:125px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 13%,transparent),transparent 68%);pointer-events:none}.wd-review-ticket-top{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:12px 13px}.wd-review-method-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.7rem;flex:none}.wd-review-ticket-top>div{display:flex;flex-direction:column;min-width:0}.wd-review-ticket-top small{font-size:0.636rem;letter-spacing:.11em;font-weight:900;color:var(--text-muted)}.wd-review-ticket-top b{margin-top:1px;font-size:.72rem}.wd-review-secure{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:999px;background:var(--success-soft);color:var(--success);font-size:0.646rem;font-weight:850;white-space:nowrap}.wd-review-receive{position:relative;z-index:1;display:grid;padding:15px 13px 16px;border-top:1px dashed color-mix(in srgb,var(--primary) 24%,var(--border))}.wd-review-receive>span{font-size:0.66rem;color:var(--text-muted);font-weight:700}.wd-review-receive>strong{margin-top:2px;font-size:1.55rem;line-height:1.05;letter-spacing:-.035em;color:var(--success);font-variant-numeric:tabular-nums}.wd-review-receive>small{margin-top:5px;font-size:0.65rem;color:var(--text-muted)} .wd-review-ledger{border:1px solid var(--border);border-radius:15px;background:var(--surface-2);padding:6px 11px}.wd-review-ledger>div{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:34px;border-bottom:1px solid var(--border);font-size:0.672rem}.wd-review-ledger>div:last-child{border-bottom:0}.wd-review-ledger span{color:var(--text-muted)}.wd-review-ledger em{font-style:normal;color:var(--primary);font-weight:800}.wd-review-ledger b{font-size:0.68rem;text-align:right;font-variant-numeric:tabular-nums}.wd-review-ledger b.fee{color:var(--danger)} .wd-review-destination{overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:15px;background:var(--surface)}.wd-review-destination-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;background:var(--primary-soft);border-bottom:1px solid color-mix(in srgb,var(--primary) 16%,var(--border))}.wd-review-destination-head>span{font-size:0.672rem;font-weight:850;color:var(--primary)}.wd-review-destination-head>small{font-size:0.648rem;font-weight:800;color:var(--text-muted)}.wd-review-destination-lines{display:grid;padding:4px 11px}.wd-review-destination-lines>div{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:start;gap:9px;padding:7px 0;border-bottom:1px solid var(--border)}.wd-review-destination-lines>div:last-child{border-bottom:0}.wd-review-destination-lines span{font-size:0.65rem;color:var(--text-muted);font-weight:750}.wd-review-destination-lines b{font-size:0.672rem;line-height:1.4;overflow-wrap:anywhere}.wd-front-note{display:flex;gap:8px;padding:10px 11px;border-radius:12px;background:var(--primary-soft);color:var(--text);font-size:0.662rem;line-height:1.5}.wd-front-note i{color:var(--primary);margin-top:2px}.wd-review-confirm{min-height:50px}.wd-review-confirm i{margin-left:5px;font-size:0.674rem} [data-theme="dark"] .wd-method-slider{box-shadow:0 2px 8px rgba(0,0,0,.3)} @media(max-width:390px){.wd-methods{gap:3px}.wd-method{height:44px;padding:0 5px;gap:5px}.wd-method-icon{width:24px;height:24px}.wd-method b{font-size:0.678rem}.wd-two{grid-template-columns:1fr}.wd-balance-pill{padding:5px 8px}.wd-balance-pill>span{font-size:0.658rem}.wd-balance-pill b{font-size:0.684rem}.wd-br-row{font-size:0.672rem}.wd-continue-copy{font-size:.72rem!important}} /* Withdrawal confirmation contrast: accent presets use light --primary-soft values, so confirmation helper surfaces need explicit dark-theme surfaces. */ [data-theme="dark"] .wd-review-destination{background:var(--surface-2);border-color:color-mix(in srgb,var(--primary) 32%,var(--border))} [data-theme="dark"] .wd-review-destination-head{background:color-mix(in srgb,var(--primary) 14%,var(--surface-2));border-bottom-color:color-mix(in srgb,var(--primary) 24%,var(--border))} [data-theme="dark"] .wd-review-destination-head>span{color:color-mix(in srgb,var(--primary) 72%,#fff)} [data-theme="dark"] .wd-review-destination-head>small,[data-theme="dark"] .wd-review-destination-lines span{color:var(--text-muted)} [data-theme="dark"] .wd-review-destination-lines b{color:var(--text)} [data-theme="dark"] .wd-front-note{background:color-mix(in srgb,var(--primary) 12%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));color:var(--text)} [data-theme="dark"] .wd-front-note i{color:color-mix(in srgb,var(--primary) 72%,#fff)} /* Withdrawal history detail + manager payment-proof view. */ .wd-history-item{cursor:default}.wd-history-detail-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:5px;flex:none;transition:border-color .18s,background .18s,color .18s,transform .14s}.wd-history-detail-btn i:first-child{font-size:0.67rem}.wd-history-detail-btn i:last-child{font-size:0.642rem}.wd-history-detail-btn:hover{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));background:var(--primary-soft);color:var(--primary)}.wd-history-detail-btn:active{transform:scale(.96)} .wd-history-detail{display:grid;gap:11px}.wd-history-detail-hero{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2)}.wd-history-detail-hero>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);flex:none}.wd-history-detail-hero>div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;flex:1}.wd-history-detail-hero small{grid-column:1/-1;font-size:0.652rem;color:var(--text-muted);font-weight:800}.wd-history-detail-hero b{font-size:1rem;line-height:1.2;overflow-wrap:anywhere}.wd-history-detail-hero em{font-style:normal;padding:4px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:0.646rem;font-weight:850;text-transform:capitalize;color:var(--text-muted)}.wd-history-detail-hero.success>span{background:var(--success-soft);color:var(--success)}.wd-history-detail-hero.warning>span{background:var(--warning-soft);color:var(--warning)}.wd-history-detail-hero.danger>span{background:var(--danger-soft);color:var(--danger)}.wd-history-detail-hero.info>span{background:var(--info-soft);color:var(--info)} .wd-history-detail-note{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);font-size:0.664rem;line-height:1.5;color:var(--text-muted)}.wd-history-detail-note i{color:var(--primary);margin-top:2px}.wd-payment-proof-btn{width:100%;min-height:46px;border-radius:13px;gap:7px} /* Phase 19 payout card + disabled methods + full-row history */ .wd-payout-card{padding:16px!important}.wd-payout-card .wd-section-head{margin-bottom:16px!important}.wd-payout-card .wd-section-head>div>span{font-size:.82rem;font-weight:900}.wd-payout-card .wd-section-head>div>small{font-size:0.668rem;line-height:1.45;margin-top:3px}.wd-methods{padding:6px;gap:5px;border-radius:16px}.wd-method-slider{top:6px;bottom:6px;left:6px;width:calc(33.333333% - 7.333px);border-radius:11px}.wd-methods[data-active="bank"] .wd-method-slider{left:calc(33.333333% + 2.333px)}.wd-methods[data-active="usdt"] .wd-method-slider{left:calc(66.666667% - 1.333px)}.wd-method{height:58px;border-radius:11px;gap:8px}.wd-method-icon{width:31px;height:31px;border-radius:10px;font-size:.69rem}.wd-method b{font-size:.74rem}.wd-details{margin-top:16px;padding-top:2px;gap:12px}.wd-field>span{font-size:0.676rem}.wd-input{height:53px;font-size:.75rem;border-radius:14px}.wd-method.method-disabled{opacity:.46;filter:saturate(.45);cursor:not-allowed}.wd-method.method-disabled .wd-method-icon{background:var(--surface-2)!important;color:var(--text-muted)!important;transform:none!important}.wd-method.method-disabled .wd-method-mark{background:transparent!important}.wd-history-item{cursor:pointer;outline:none}.wd-history-item:focus-visible{box-shadow:0 0 0 3px var(--primary-soft);border-color:var(--primary)}.wd-history-detail-btn{pointer-events:none} @media(max-width:390px){.wd-payout-card{padding:14px!important}.wd-method{height:54px}.wd-method-icon{width:29px;height:29px}.wd-method b{font-size:.7rem}.wd-input{height:51px}} /* Withdrawal history uses the same plain row chevron language as other histories. */ .wd-history-chevron{justify-self:end;align-self:center;color:var(--text-muted);font-size:0.654rem;padding:0 4px;pointer-events:none} /* Amount-tier fee explanation */ .wd-fee-rules{display:none;margin-top:12px;padding:12px;border:1px solid color-mix(in srgb,var(--primary) 17%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--primary) 4%,var(--surface));} .wd-fee-rules.show{display:block}.wd-fee-rule-title{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--text-muted);font-size:0.686rem;font-weight:800}.wd-fee-rule-title i{color:var(--primary)} .wd-fee-rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.wd-fee-rule-grid>span{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);transition:.2s}.wd-fee-rule-grid>span.active{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));background:color-mix(in srgb,var(--primary) 9%,var(--surface-2));box-shadow:0 5px 15px -13px var(--primary)}.wd-fee-rule-grid b{font-size:0.682rem}.wd-fee-rule-grid em{font-style:normal;color:var(--primary);font-size:0.672rem;font-weight:900} /* ================= RESPONSIVE WITHDRAW ================= */ @media(max-width:339px){ /* Keep UPI / Bank / USDT in one compact horizontal row even on narrow phones. */ .wd-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .wd-method{width:auto;min-width:0;height:50px;justify-content:center;padding:0 3px;gap:4px} .wd-method-icon{width:25px;height:25px;border-radius:8px;flex:none} .wd-method b{font-size:0.684rem;white-space:nowrap} .wd-two{grid-template-columns:1fr} } /* 384-reference compact safety */ @media(max-width:339px){ .wd-method{gap:4px;padding-left:4px;padding-right:4px} .wd-method-icon{width:24px;height:24px} } /* ================= v2026.09.13.47 · WITHDRAWAL READABILITY ================= */ .wd-balance-pill>span,.wd-field>span,.wd-field-note,.wd-br-row,.wd-usdt-convert span,.wd-usdt-convert small,.wd-action-error,.wd-history-method,.wd-review-ticket-top small,.wd-review-secure,.wd-review-receive>span,.wd-review-receive>small,.wd-review-ledger>div,.wd-review-destination-head>span,.wd-review-destination-head>small,.wd-review-destination-lines span,.wd-review-destination-lines b,.wd-front-note,.wd-history-detail-hero small,.wd-history-detail-hero em,.wd-history-detail-note,.wd-payout-card .wd-section-head>div>small,.wd-fee-rule-grid em{font-size:.7rem} .wd-review-ledger b,.wd-method b{font-size:.74rem} /* v206 · live withdrawal-history refresh */ #wd-history-list{transition:opacity .18s ease}.wd-history-refreshing{opacity:.58}.wd-history-enter{animation:wdHistoryEnter .3s cubic-bezier(.2,.75,.25,1) both}.wd-history-enter:nth-child(2){animation-delay:.025s}.wd-history-enter:nth-child(3){animation-delay:.05s}.wd-history-enter:nth-child(4){animation-delay:.075s}.wd-history-enter:nth-child(5){animation-delay:.1s}@keyframes wdHistoryEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.wd-history-enter{animation:none!important}#wd-history-list{transition:none}} .wd-history-state{display:inline-flex;align-items:center;gap:5px}.wd-api-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:0.654rem;font-style:normal;font-weight:850;line-height:1}.wd-api-badge i{font-size:0.646rem} /* ---- fundmanager.css ---- */ /* Fund Manager — theme-native, responsive and motion-polished */ .fm-page{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:100%;max-width:100%;min-width:0;overflow:visible;padding-bottom:4px} .fm-page>*{width:100%;max-width:100%;min-width:0;box-sizing:border-box} .fm-page>.section-title{margin-bottom:-1px} .fm-page>section{animation:fmRise .38s var(--ease) both} .fm-page>section:nth-of-type(1){animation-delay:.02s}.fm-page>section:nth-of-type(2){animation-delay:.06s}.fm-page>section:nth-of-type(3){animation-delay:.1s}.fm-page>section:nth-of-type(4){animation-delay:.14s}.fm-page>section:nth-of-type(5){animation-delay:.18s} @keyframes fmRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .fm-wallet{padding:24px;border:0!important;border-radius:var(--radius-lg);background:var(--grad);color:#fff;box-shadow:0 22px 50px -18px var(--primary);overflow:hidden;position:relative;isolation:isolate} .fm-wallet:before,.fm-wallet:after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1} .fm-wallet:after{width:165px;height:165px;right:-58px;top:-68px;background:rgba(255,255,255,.13)} .fm-wallet:before{width:115px;height:115px;left:-50px;bottom:-68px;background:rgba(255,255,255,.08)} .fm-wallet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.fm-wallet-head span{font-size:.78rem;font-weight:800;letter-spacing:.01em}.fm-wallet-head em{font-style:normal;font-size:0.686rem;font-weight:750;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.16);white-space:nowrap} .fm-wallet>b{display:block;font-size:2.3rem;line-height:1.08;margin:5px 0 18px;letter-spacing:-.035em}.fm-wallet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}.fm-wallet-grid>div{min-width:0;padding:12px 13px;border-radius:16px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}.fm-wallet-grid small{display:block;font-size:0.686rem;opacity:.84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-wallet-grid strong{display:block;font-size:.86rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fm-card{padding:18px;min-width:0;overflow:visible;box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease)} .fm-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;min-width:0}.fm-card-head>div{min-width:0;flex:1}.fm-card-head b{display:block;font-size:.9rem}.fm-card-head small{display:block;color:var(--text-muted);font-size:.72rem;line-height:1.45;margin-top:3px;overflow-wrap:anywhere} .fm-switch{width:50px;height:30px;position:relative;flex:0 0 50px}.fm-switch input{opacity:0;position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:pointer}.fm-switch input:disabled{cursor:wait}.fm-switch span{position:absolute;inset:0;border-radius:999px;background:var(--border);transition:.22s}.fm-switch span:after{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.2);transition:.22s}.fm-switch input:checked+span{background:var(--grad)}.fm-switch input:checked+span:after{transform:translateX(20px)} .fm-field{display:block;width:100%;min-width:0;margin-bottom:12px}.fm-field>span{display:block;font-size:.72rem;font-weight:750;color:var(--text-muted);margin:0 0 7px 2px}.fm-field input{display:block;width:100%;max-width:100%;min-width:0;height:52px;padding:0 14px;border:1px solid var(--border);background:var(--surface-2);border-radius:14px;color:var(--text);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.fm-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)} .fm-range-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fm-range-grid .fm-field{margin-bottom:6px}.fm-range-note{display:block;margin:-1px 2px 12px;color:var(--text-muted);font-size:0.678rem;line-height:1.45} .fm-topup-input{width:100%;max-width:100%;min-width:0;height:54px;display:flex;align-items:center;padding:0 13px;border:1px solid var(--border);background:var(--surface-2);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.fm-topup-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.fm-topup-input>span{font-size:1.25rem;font-weight:800;flex:none}.fm-topup-input input{width:0;min-width:0;flex:1;border:0;background:transparent;outline:none;font-size:1.25rem;font-weight:800;color:var(--text);padding:0 8px}.fm-topup-input em{font-style:normal;color:var(--text-muted);font-size:0.686rem;flex:none} .fm-quick-amounts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 2px}.fm-quick-amounts button{height:42px;min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font-weight:800;font-size:.76rem;transition:transform .16s var(--ease),border-color .2s,background .2s,color .2s,box-shadow .2s}.fm-quick-amounts button:active{transform:scale(.94)}.fm-quick-amounts button.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);box-shadow:0 7px 18px -14px var(--primary)} .fm-credit-preview{display:flex;justify-content:space-between;gap:12px;max-height:0;opacity:0;overflow:hidden;transition:.25s;padding:0 2px;min-width:0}.fm-credit-preview.show{max-height:48px;opacity:1;padding:11px 2px 8px}.fm-credit-preview span{font-size:.74rem;color:var(--text-muted)}.fm-credit-preview b{font-size:.9rem;color:var(--success);white-space:nowrap}.fm-topup-submit{margin-top:8px}.fm-commission{font-style:normal;font-size:0.686rem;font-weight:800;color:var(--success);padding:6px 9px;border-radius:999px;background:var(--success-soft);white-space:nowrap} .fm-incoming-card{border-color:color-mix(in srgb,var(--primary) 14%,var(--border))}.fm-refresh{width:40px;height:40px;flex:none;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);display:grid;place-items:center;transition:transform .18s var(--ease),background .2s,color .2s}.fm-refresh:active{transform:scale(.9)}.fm-refresh.is-refreshing{background:var(--primary-soft);color:var(--primary)}.fm-refresh:disabled{opacity:.8}.fm-refresh i{font-size:.8rem} .fm-list{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;min-width:0}.fm-request{width:100%;max-width:100%;min-width:0;border:1px solid var(--border);background:var(--surface-2);border-radius:14px;padding:13px;animation:fmItemIn .28s var(--ease) both}@keyframes fmItemIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.fm-request-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.fm-request-top>div{min-width:0;flex:1}.fm-request b{font-size:.79rem;overflow-wrap:anywhere}.fm-request small{display:block;font-size:0.682rem;color:var(--text-muted);overflow-wrap:anywhere}.fm-request-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.fm-request-meta span{max-width:100%;font-size:0.68rem;padding:5px 7px;border-radius:8px;background:var(--surface);border:1px solid var(--border);overflow-wrap:anywhere}.fm-request button{margin-top:10px;width:100%;height:41px;border:0;border-radius:11px;background:var(--primary-soft);color:var(--primary);font-weight:800;transition:transform .16s var(--ease),background .2s}.fm-request button:active{transform:scale(.985);background:color-mix(in srgb,var(--primary) 16%,var(--surface))}.fm-request button i{margin-left:5px;transition:transform .18s}.fm-request button:active i{transform:translateX(3px)} .fm-empty,.fm-loading{text-align:center;padding:24px 10px;color:var(--text-muted);font-size:.72rem} .fm-created-card{border-color:color-mix(in srgb,var(--warning) 24%,var(--border));background:color-mix(in srgb,var(--warning-soft) 22%,var(--surface))} .fm-created-card[hidden]{display:none!important}.fm-created-count{min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--warning-soft);color:var(--warning);display:grid;place-items:center;font-size:.7rem;font-weight:900;flex:none} .fm-request-created{border-color:color-mix(in srgb,var(--warning) 22%,var(--border));background:color-mix(in srgb,var(--warning-soft) 18%,var(--surface-2))} .fm-proof-pending{display:flex;align-items:center;gap:7px;margin-top:8px;padding:7px 9px;border:1px dashed color-mix(in srgb,var(--warning) 34%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--warning-soft) 38%,transparent);color:var(--warning);font-size:0.682rem;font-weight:800}.fm-proof-pending i{flex:none} .fm-no-proof-review{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px;border:1px solid color-mix(in srgb,var(--warning) 30%,var(--border));border-radius:13px;background:var(--warning-soft);color:var(--text)}.fm-no-proof-review>i{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--warning) 12%,var(--surface));color:var(--warning);display:grid;place-items:center;flex:none}.fm-no-proof-review div{min-width:0}.fm-no-proof-review b{display:block;font-size:.72rem}.fm-no-proof-review span{display:block;margin-top:3px;color:var(--text-muted);font-size:0.68rem;line-height:1.45} .fm-expand-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:transparent;color:var(--text);padding:0;font:inherit}.fm-expand-head span{display:flex;gap:9px;align-items:center;min-width:0}.fm-expand-head span>i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.fm-expand-head b{font-size:.84rem}.fm-expand-head>.fa-chevron-down{transition:transform .28s var(--ease);color:var(--text-muted)} .fm-history{max-height:0;overflow:hidden;opacity:0;padding-top:0;min-width:0;transition:max-height .46s var(--ease),opacity .26s,padding-top .28s}.fm-history.open{max-height:2400px;opacity:1;padding-top:14px;overflow:hidden}.fm-history-divider{height:1px;background:var(--border);margin:13px 0} .fm-ledger-title{display:flex;align-items:center;gap:10px;margin:2px 0 9px}.fm-ledger-title>span{width:35px;height:35px;border-radius:11px;background:var(--surface-2);color:var(--primary);display:grid;place-items:center;flex:none}.fm-ledger-title>div{min-width:0}.fm-ledger-title b{display:block;font-size:.77rem}.fm-ledger-title small{display:block;font-size:0.674rem;color:var(--text-muted);margin-top:2px}.fm-ledger-row{width:100%;max-width:100%;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;text-align:left;border:1px solid var(--border);background:var(--surface-2);border-radius:13px;padding:11px;margin-bottom:8px;color:var(--text);transition:transform .16s var(--ease),border-color .2s,background .2s}.fm-ledger-row:last-child{margin-bottom:0}.fm-ledger-row:active{transform:scale(.985);background:var(--surface)}.fm-ledger-row>div{min-width:0}.fm-ledger-row>div b{display:block;font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-ledger-row>div small{display:block;font-size:0.672rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-ledger-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--surface);color:var(--text-muted);flex:none}.fm-ledger-row strong{font-size:.73rem;white-space:nowrap}.fm-ledger-row.credit strong,.fm-ledger-row.credit .fm-ledger-ic{color:var(--success)}.fm-ledger-row.credit .fm-ledger-ic{background:var(--success-soft)}.fm-ledger-row.debit strong,.fm-ledger-row.debit .fm-ledger-ic{color:var(--danger)}.fm-ledger-row.debit .fm-ledger-ic{background:var(--danger-soft)}.fm-ledger-row.funding .fm-ledger-ic{background:var(--primary-soft);color:var(--primary)}.fm-ledger-row.funding.success .fm-ledger-ic{background:var(--success-soft);color:var(--success)}.fm-ledger-row.funding.pending .fm-ledger-ic{background:var(--warning-soft);color:var(--warning)}.fm-ledger-row.funding.failed .fm-ledger-ic{background:var(--danger-soft);color:var(--danger)}.fm-funding-status{display:inline-flex;align-items:center;gap:4px;margin-left:5px;padding:2px 5px;border-radius:999px;font-size:0.658rem;font-weight:800;vertical-align:middle}.fm-funding-status.success{background:var(--success-soft);color:var(--success)}.fm-funding-status.pending{background:var(--warning-soft);color:var(--warning)}.fm-funding-status.failed{background:var(--danger-soft);color:var(--danger)}.fm-ledger-arrow{font-size:0.68rem;color:var(--text-muted)}.fm-ledger-empty{min-height:82px;border:1px dashed var(--border);border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px}.fm-ledger-empty i{color:var(--primary)} .eh-qr-logo-wrap{width:min(220px,100%);aspect-ratio:1;position:relative;background:#fff;border-radius:15px;padding:10px;border:1px solid #eee;margin:auto}.eh-qr-logo-wrap>img:first-child{width:100%;height:100%;object-fit:contain}.eh-qr-center-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:9px;background:#fff;padding:5px;box-shadow:0 0 0 4px #fff}.eh-qr-center-logo img{width:100%;height:100%;object-fit:contain;border-radius:5px} .fm-sheet-details{width:100%;max-width:100%;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:12px}.fm-sheet-row{display:flex;justify-content:space-between;gap:10px;padding:10px 11px;border-top:1px solid var(--border);font-size:.72rem;min-width:0}.fm-sheet-row:first-child{border-top:0}.fm-sheet-row span{color:var(--text-muted);flex:none}.fm-sheet-row b{min-width:0;text-align:right;overflow-wrap:anywhere}.fm-proof{display:block;width:100%;max-width:100%;max-height:190px;object-fit:contain;border-radius:12px;border:1px solid var(--border);margin:12px 0}.fm-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.fm-review-grid.created-only{grid-template-columns:minmax(0,1fr)}.fm-review-grid button{min-width:0;height:48px;border-radius:13px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .16s var(--ease),box-shadow .2s,background .2s}.fm-review-grid button:active{transform:scale(.97)}.fm-approve{border:0;background:var(--grad);color:#fff;box-shadow:0 10px 22px -15px var(--primary)}.fm-reject{border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border));background:var(--danger-soft);color:var(--danger)}.fm-approve i,.fm-reject i{font-size:.75rem}.fm-proof-pick{display:block;width:100%;border:1px dashed var(--border);border-radius:12px;padding:13px;text-align:center;margin-top:12px}.fm-proof-pick img{display:none;margin:10px auto 0;max-width:180px;max-height:120px;object-fit:contain;border-radius:9px}.fm-proof-pick img.show{display:block} .fm-tx-detail{text-align:center;padding:5px 6px 3px}.fm-tx-detail-icon{width:56px;height:56px;border-radius:18px;margin:0 auto 8px;display:grid;place-items:center;font-size:1.1rem}.fm-tx-detail.credit .fm-tx-detail-icon{background:var(--success-soft);color:var(--success)}.fm-tx-detail.debit .fm-tx-detail-icon{background:var(--danger-soft);color:var(--danger)}.fm-tx-detail>small{font-size:0.662rem;font-weight:900;letter-spacing:.08em;color:var(--text-muted)}.fm-tx-detail h3{font-size:1.35rem;margin:3px 0}.fm-tx-detail.credit h3{color:var(--success)}.fm-tx-detail.debit h3{color:var(--danger)}.fm-tx-detail p{font-size:.7rem;color:var(--text-muted)} .fm-home-access{width:100%;max-width:100%;min-width:0;margin-bottom:12px;padding:12px 14px;border:1px solid var(--border);background:var(--surface);border-radius:14px;display:flex;align-items:center;gap:11px}.fm-home-access>span{width:38px;height:38px;flex:none;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.fm-home-access>div{min-width:0;flex:1;text-align:left}.fm-home-access b{display:block;font-size:.78rem}.fm-home-access small{display:block;font-size:0.682rem;color:var(--text-muted);margin-top:2px;white-space:normal;overflow-wrap:anywhere}.fm-home-access>i{color:var(--text-muted);flex:none} @media (hover:hover){.fm-card:hover{box-shadow:var(--shadow)}.fm-ledger-row:hover{border-color:color-mix(in srgb,var(--primary) 24%,var(--border))}.fm-refresh:hover{background:var(--primary-soft);color:var(--primary)}} @media(max-width:430px){.fm-page{gap:12px}.fm-wallet{padding:20px}.fm-wallet>b{font-size:2rem;margin-bottom:15px}.fm-wallet-grid{gap:7px}.fm-wallet-grid>div{padding:10px 8px;border-radius:13px}.fm-wallet-grid small{font-size:0.672rem}.fm-wallet-grid strong{font-size:.75rem}.fm-card{padding:15px}.fm-card-head{gap:9px}.fm-card-head b{font-size:.86rem}.fm-card-head small{font-size:0.686rem}.fm-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fm-sheet-row{font-size:.69rem}.fm-ledger-row{gap:8px;padding:10px}.fm-ledger-ic{width:32px;height:32px}.fm-ledger-row>div b{font-size:.69rem}.fm-ledger-row>div small{font-size:0.664rem}.fm-ledger-row strong{font-size:0.686rem}} @media(max-width:339px){.fm-range-grid{grid-template-columns:1fr;gap:0}.fm-wallet-grid{grid-template-columns:1fr}.fm-wallet-grid>div{display:flex;justify-content:space-between;align-items:center;gap:10px}.fm-wallet-grid strong{margin-top:0}.fm-card{padding:13px}.fm-quick-amounts{gap:5px}.fm-quick-amounts button{font-size:0.686rem}.fm-ledger-row{grid-template-columns:auto minmax(0,1fr) auto}.fm-ledger-row strong{grid-column:2;justify-self:start}.fm-ledger-arrow{grid-column:3;grid-row:1/3}} @media(prefers-reduced-motion:reduce){.fm-page>section,.fm-request{animation:none!important}.fm-card,.fm-refresh,.fm-quick-amounts button,.fm-ledger-row{transition:none!important}} .fm-processed-note{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--success,#22c55e) 28%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--success,#22c55e) 8%,var(--surface));font-size:13px;font-weight:700;color:var(--text)} .fm-processed-note i{color:var(--success,#22c55e)} /* v2026.09.08.2 · clickable manager payment proof */ .fm-proof-open{display:block;width:100%;border:0;background:transparent;padding:0;margin:0;color:var(--primary);text-align:center}.fm-proof-open .fm-proof{cursor:zoom-in;margin-bottom:6px}.fm-proof-open>span{display:inline-flex;align-items:center;gap:6px;font-size:0.674rem;font-weight:800}.fm-proof-popup{display:block;width:min(78vw,330px);max-height:60vh;margin:2px auto 0;overflow:auto;border:1px solid var(--border);border-radius:15px;background:var(--surface-2);padding:6px}.fm-proof-popup img{display:block;width:100%;height:auto;max-height:56vh;object-fit:contain;border-radius:11px;background:var(--surface)} /* ================= RESPONSIVE FUND MANAGER ================= */ @media(max-width:339px){ .fm-page{min-width:0} .fm-card{border-radius:18px} .fm-review-grid,.fm-range-grid{grid-template-columns:1fr} .fm-ledger-row{min-width:0} } /* ================= v2026.09.13.47 · FUND MANAGER READABILITY ================= */ .fm-range-note,.fm-request-meta span,.fm-ledger-title small,.fm-ledger-row>div small,.fm-funding-status,.fm-tx-detail>small,.fm-wallet-grid small,.fm-proof-open>span{font-size:.7rem} .fm-request>.sla-timer{margin-top:8px} .fm-sheet-details+.sla-timer{margin:10px 0 2px} /* ---- youtube_filter.css ---- */ /* ============ FINZO WALLET — YouTube Search Filter ============ */ .ytsf-tools-icon{color:#fff!important;background:linear-gradient(145deg,#ff3030,#d90000)!important;box-shadow:0 8px 18px -10px rgba(255,0,0,.75)!important} .main.youtube-filter-main{padding-left:16px;padding-right:16px;overflow:visible} .main.youtube-filter-main.standalone{padding-top:12px;padding-bottom:34px} .youtube-filter-page{position:relative;width:100%;max-width:100%;min-width:0;margin:0 auto;padding:4px 0 24px;color:var(--text);overflow:visible;--ytsf-accent-soft:color-mix(in srgb,var(--primary) 10%,var(--surface));--ytsf-accent-soft-strong:color-mix(in srgb,var(--primary) 16%,var(--surface));--ytsf-control-surface:color-mix(in srgb,var(--surface) 94%,var(--bg) 6%)} [data-theme="dark"] .youtube-filter-page{--ytsf-accent-soft:color-mix(in srgb,var(--primary) 15%,var(--surface));--ytsf-accent-soft-strong:color-mix(in srgb,var(--primary) 22%,var(--surface));--ytsf-control-surface:color-mix(in srgb,var(--surface) 92%,#070812 8%)} .youtube-filter-page *{min-width:0} .ytsf-heading{display:flex;align-items:center;gap:12px;padding:8px 2px 18px} .ytsf-heading-icon{width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.48rem;background:linear-gradient(145deg,#ff3131,#d90000);border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -18px rgba(229,0,0,.8)} .ytsf-kicker{display:block;margin-bottom:2px;color:var(--primary);font-size:0.662rem;font-weight:900;letter-spacing:1.05px} .ytsf-heading h1{margin:0;font-size:clamp(1.24rem,5.2vw,1.62rem);line-height:1.1;letter-spacing:-.035em;font-weight:900} .ytsf-heading p{margin:5px 0 0;color:var(--text-muted);font-size:0.68rem;line-height:1.42;font-weight:650} /* Settings live directly on the page; no outer card that can clip on mobile. */ .ytsf-settings{width:100%;position:relative;margin:0 0 22px;overflow:visible} .ytsf-settings-row{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:8px;width:100%} .ytsf-instant-control,.ytsf-filter-trigger{min-width:0;height:52px;border:1px solid var(--border);border-radius:15px;background:var(--ytsf-control-surface);color:var(--text);font-family:inherit;cursor:pointer;box-shadow:0 8px 20px -18px rgba(12,18,38,.5);transition:transform .16s var(--ease),border-color .2s,background .2s,box-shadow .2s} [data-theme="dark"] .ytsf-instant-control,[data-theme="dark"] .ytsf-filter-trigger{box-shadow:0 9px 22px -18px rgba(0,0,0,.95)} .ytsf-instant-control:active,.ytsf-filter-trigger:active{transform:scale(.985)} .ytsf-instant-control{padding:7px 9px;display:flex;align-items:center;gap:8px;text-align:left} .ytsf-instant-control.on{border-color:color-mix(in srgb,var(--primary) 34%,var(--border));background:linear-gradient(145deg,var(--ytsf-accent-soft-strong),var(--ytsf-control-surface))} .ytsf-control-icon{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;color:var(--primary);background:var(--ytsf-accent-soft);font-size:.72rem} .ytsf-instant-control.on .ytsf-control-icon{color:#fff;background:var(--grad);box-shadow:0 8px 15px -11px var(--primary)} .ytsf-control-copy{display:flex;flex:1;align-items:center} .ytsf-control-copy b{font-size:.69rem;line-height:1.15;font-weight:900;white-space:nowrap} .ytsf-switch{width:34px;height:20px;flex:0 0 34px;padding:2px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 28%,var(--border));box-shadow:inset 0 1px 4px rgba(0,0,0,.15);transition:background .2s} .ytsf-switch span{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.24);transition:transform .22s var(--ease)} .ytsf-instant-control.on .ytsf-switch{background:var(--primary)} .ytsf-instant-control.on .ytsf-switch span{transform:translateX(14px)} .ytsf-filter-trigger{position:relative;padding:7px 9px;display:grid;grid-template-columns:1fr auto;align-content:center;gap:1px 6px;text-align:left} .ytsf-filter-trigger>span{display:flex;align-items:center;gap:5px;font-size:0.682rem;line-height:1.1} .ytsf-filter-trigger>span i{color:var(--primary);font-size:0.672rem} .ytsf-filter-trigger b{font-weight:900} .ytsf-filter-trigger small{grid-column:1/2;color:var(--text-muted);font-size:0.654rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ytsf-filter-chevron{grid-column:2;grid-row:1/3;align-self:center;color:var(--text-muted);font-size:0.662rem;transition:transform .24s var(--ease),color .2s} .ytsf-filter-trigger.open{border-color:color-mix(in srgb,var(--primary) 38%,var(--border));background:var(--ytsf-accent-soft-strong)} .ytsf-filter-trigger.open .ytsf-filter-chevron{transform:rotate(180deg);color:var(--primary)} .ytsf-filter-collapse{display:grid;grid-template-rows:0fr;opacity:0;width:100%;transition:grid-template-rows .3s var(--ease),opacity .2s ease} .ytsf-filter-collapse.open{grid-template-rows:1fr;opacity:1} .ytsf-filter-collapse-inner{min-height:0;overflow:hidden} .ytsf-filter-collapse.open .ytsf-filter-collapse-inner{padding:11px 0 1px} .ytsf-filter-label{display:flex;align-items:center;gap:6px;margin:0 3px 7px;color:var(--text-muted);font-size:0.662rem;font-weight:850;text-transform:uppercase;letter-spacing:.65px} .ytsf-filter-label i{color:var(--primary)} .ytsf-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%} .ytsf-filter-grid button{position:relative;min-width:0;min-height:57px;padding:9px 7px 8px 23px;border:1px solid var(--border);border-radius:13px;background:var(--ytsf-control-surface);color:var(--text);font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 6px 16px -17px rgba(0,0,0,.45);transition:transform .15s var(--ease),border-color .2s,background .2s} .ytsf-filter-grid button:active{transform:scale(.975)} .ytsf-filter-dot{position:absolute;left:8px;top:11px;width:7px;height:7px;border-radius:50%;border:2px solid color-mix(in srgb,var(--text-muted) 55%,var(--border));box-sizing:border-box} .ytsf-filter-grid b{display:block;font-size:0.674rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ytsf-filter-grid small{display:block;margin-top:2px;color:var(--text-muted);font-size:0.648rem;line-height:1.25;font-weight:650} .ytsf-filter-grid button>i{position:absolute;right:7px;top:8px;display:none;color:var(--primary);font-size:0.648rem} .ytsf-filter-grid button.selected{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));background:linear-gradient(145deg,var(--ytsf-accent-soft-strong),var(--ytsf-control-surface))} .ytsf-filter-grid button.selected .ytsf-filter-dot{border-color:var(--primary);background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent)} .ytsf-filter-grid button.selected>i{display:block} /* Search area is also direct page content: only the input/button themselves are surfaces. */ .ytsf-search-area{width:100%;margin:0;overflow:visible} .ytsf-search-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 2px 10px} .ytsf-search-head>div{min-width:0} .ytsf-search-head span:first-child{display:block;color:var(--primary);font-size:0.658rem;font-weight:900;letter-spacing:1px} .ytsf-search-head h2{margin:3px 0 0;font-size:1rem;line-height:1.2;font-weight:900;letter-spacing:-.02em} .ytsf-active-chip{flex:0 0 auto;display:inline-flex!important;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--ytsf-accent-soft);color:var(--primary)!important;font-size:0.658rem!important;font-weight:850!important;letter-spacing:0!important;white-space:nowrap} .ytsf-input-wrap{position:relative;width:100%;height:60px;border-radius:17px;border:1.5px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:var(--ytsf-control-surface);box-shadow:0 10px 24px -20px color-mix(in srgb,var(--primary) 40%,rgba(0,0,0,.45)),inset 0 1px 0 color-mix(in srgb,#fff 58%,transparent);transition:border-color .2s,box-shadow .2s,transform .18s} [data-theme="dark"] .ytsf-input-wrap{box-shadow:0 11px 25px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.035)} .ytsf-input-wrap:focus-within{border-color:color-mix(in srgb,var(--primary) 66%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 9%,transparent),0 12px 24px -20px var(--primary)} .ytsf-input-wrap.loading{border-color:var(--primary)} .ytsf-input-wrap.shake{animation:ytsfShake .32s ease} @keyframes ytsfShake{25%{transform:translateX(-4px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}} .ytsf-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--primary);font-size:.78rem;pointer-events:none} .ytsf-input-wrap input{width:100%;height:100%;box-sizing:border-box;border:0;outline:0;background:transparent;color:var(--text);padding:0 92px 0 39px;font-family:inherit;font-size:.96rem;font-weight:750;letter-spacing:-.01em} .ytsf-input-wrap.has-clear input{padding-right:140px} .ytsf-input-wrap input::placeholder{color:color-mix(in srgb,var(--text-muted) 72%,transparent);font-weight:650} .ytsf-input-wrap input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none} .ytsf-input-actions{position:absolute;right:5px;top:5px;bottom:5px;display:flex;align-items:stretch;gap:5px;z-index:2} .ytsf-clear-btn{display:none;width:40px;flex:0 0 40px;border:1px solid color-mix(in srgb,var(--border) 88%,var(--primary) 12%);border-radius:12px;background:var(--surface-2);color:var(--text-muted);font-size:.72rem;cursor:pointer;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),0 5px 12px -10px rgba(0,0,0,.55);transition:transform .15s,color .2s,border-color .2s,background .2s} .ytsf-clear-btn.show{display:grid;place-items:center}.ytsf-clear-btn:active{transform:scale(.92)}.ytsf-clear-btn:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger-soft) 48%,var(--surface-2))} .ytsf-paste-ribbon{position:relative;min-width:78px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));border-radius:3px 13px 13px 3px;padding:0 10px 0 15px;display:flex;align-items:center;justify-content:center;gap:5px;background:linear-gradient(145deg,var(--ytsf-accent-soft-strong),var(--ytsf-accent-soft));color:var(--primary);font-family:inherit;font-size:0.668rem;font-weight:900;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent);transition:transform .15s,filter .2s} .ytsf-paste-ribbon:active{transform:scale(.96)}.ytsf-paste-ribbon:hover{filter:brightness(1.04)} .ytsf-opening{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;max-height:0;margin:0 3px;opacity:0;overflow:hidden;transition:max-height .28s var(--ease),opacity .2s,margin .28s var(--ease)} .ytsf-opening.show{max-height:62px;margin:10px 3px 0;opacity:1} .ytsf-opening-spinner{width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,var(--primary) 22%,transparent);border-top-color:var(--primary);animation:ytsfSpin .7s linear infinite} @keyframes ytsfSpin{to{transform:rotate(360deg)}} .ytsf-opening div{display:flex;min-width:0;flex-direction:column;gap:1px} .ytsf-opening b{font-size:0.676rem;font-weight:900} .ytsf-opening small{color:var(--text-muted);font-size:0.652rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ytsf-opening-wave{display:flex;align-items:end;gap:2px;height:14px} .ytsf-opening-wave i{display:block;width:3px;border-radius:2px;background:var(--primary);animation:ytsfWave .7s ease-in-out infinite} .ytsf-opening-wave i:nth-child(1){height:5px}.ytsf-opening-wave i:nth-child(2){height:11px;animation-delay:.1s}.ytsf-opening-wave i:nth-child(3){height:7px;animation-delay:.2s} @keyframes ytsfWave{50%{height:14px;opacity:.45}} .ytsf-search-btn{display:none;width:100%;min-height:54px;margin-top:11px;border:0;border-radius:15px;padding:7px 12px;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;background:var(--grad);color:#fff;font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 14px 26px -18px var(--primary),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .16s var(--ease),opacity .2s} .ytsf-search-btn.show{display:grid}.ytsf-search-btn:active{transform:scale(.99)}.ytsf-search-btn:disabled{opacity:.7;cursor:wait} .ytsf-search-btn-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:.94rem} .ytsf-search-btn>span:nth-child(2){display:flex;flex-direction:column;gap:1px}.ytsf-search-btn b{font-size:.72rem;font-weight:900}.ytsf-search-btn small{font-size:0.654rem;color:rgba(255,255,255,.78);font-weight:650}.ytsf-search-btn>i{font-size:0.674rem;opacity:.85} .ytsf-search-btn.loading .ytsf-search-btn-icon i{animation:ytsfPulse .7s ease-in-out infinite alternate}@keyframes ytsfPulse{to{transform:scale(1.18);opacity:.58}} .ytsf-tip{display:flex;align-items:flex-start;gap:7px;margin:11px 2px 0;padding:0;color:var(--text-muted);font-size:0.662rem;line-height:1.45;font-weight:650;background:transparent} .ytsf-tip i{margin-top:1px;color:var(--primary);flex:0 0 auto}.ytsf-tip.manual{background:transparent} @media(max-width:390px){ .main.youtube-filter-main{padding-left:14px;padding-right:14px} .ytsf-heading{gap:10px;padding-top:5px}.ytsf-heading-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px;font-size:1.32rem}.ytsf-heading p{font-size:0.672rem} .ytsf-settings-row{grid-template-columns:minmax(0,1fr) 108px;gap:7px} .ytsf-control-icon{width:29px;height:29px;flex-basis:29px}.ytsf-control-copy b{font-size:0.678rem}.ytsf-switch{width:32px;flex-basis:32px}.ytsf-instant-control.on .ytsf-switch span{transform:translateX(12px)} .ytsf-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:330px){ .main.youtube-filter-main{padding-left:12px;padding-right:12px} .ytsf-settings-row{grid-template-columns:1fr 100px}.ytsf-control-icon{display:none}.ytsf-instant-control{gap:6px;padding-left:8px;padding-right:8px} .ytsf-active-chip{display:none!important}.ytsf-input-wrap input{padding-right:72px;font-size:.9rem}.ytsf-input-wrap.has-clear input{padding-right:112px}.ytsf-paste-ribbon{min-width:60px;padding:0 8px 0 12px}.ytsf-paste-ribbon span{display:none}.ytsf-clear-btn{width:36px;flex-basis:36px} } @media(prefers-reduced-motion:reduce){.ytsf-opening-spinner,.ytsf-opening-wave i,.ytsf-search-btn.loading .ytsf-search-btn-icon i{animation:none!important}.ytsf-filter-collapse,.ytsf-switch span,.ytsf-filter-chevron{transition:none!important}} /* Anonymous YouTube tool keeps the same FINZO brand navbar as the signed-in shell. */ .ytsf-public-topbar{min-height:62px;padding-bottom:10px} .ytsf-public-topbar .brand span{white-space:nowrap} [data-theme="dark"] .ytsf-instant-control,[data-theme="dark"] .ytsf-filter-trigger,[data-theme="dark"] .ytsf-filter-grid button,[data-theme="dark"] .ytsf-input-wrap{background-color:var(--ytsf-control-surface)} /* Manual search button: raised 3D surface */ .ytsf-search-btn{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,#fff 18%,var(--primary));box-shadow:0 7px 0 color-mix(in srgb,var(--primary) 72%,#26145f),0 15px 27px -16px var(--primary),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(0);transition:transform .13s,box-shadow .13s,filter .2s} .ytsf-search-btn:before{content:"";position:absolute;left:4%;right:4%;top:1px;height:42%;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);pointer-events:none}.ytsf-search-btn>*{position:relative;z-index:1}.ytsf-search-btn:active{transform:translateY(5px);box-shadow:0 2px 0 color-mix(in srgb,var(--primary) 72%,#26145f),0 9px 18px -15px var(--primary),inset 0 1px 0 rgba(255,255,255,.25)} .ytsf-video-task-card{width:100%;margin-top:18px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:18px;padding:13px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface-2));color:var(--text);font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 12px 28px -24px var(--primary);transition:transform .16s,border-color .2s}.ytsf-video-task-card:active{transform:scale(.985)}.ytsf-video-task-icon{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1rem;box-shadow:0 10px 20px -13px var(--primary)}.ytsf-video-task-copy{display:flex;min-width:0;flex-direction:column}.ytsf-video-task-copy small{color:var(--primary);font-size:0.65rem;font-weight:900;letter-spacing:.1em}.ytsf-video-task-copy b{margin-top:2px;font-size:.77rem;font-weight:900}.ytsf-video-task-copy em{margin-top:3px;font-style:normal;color:var(--text-muted);font-size:0.662rem;line-height:1.35;font-weight:650}.ytsf-video-task-arrow{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.672rem} /* v2026.09.06.2 — refined manual search CTA + banner-style Video Task promotion. */ .ytsf-search-btn{ min-height:58px;margin-top:13px;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:18px; background:linear-gradient(135deg,#ff3131 0%,#ef1838 55%,#d90d2f 100%);color:#fff; box-shadow:0 4px 0 #b80d28,0 15px 30px -18px rgba(225,18,54,.72),inset 0 1px 0 rgba(255,255,255,.34); transform:translateY(0);overflow:hidden;transition:transform .14s ease,box-shadow .14s ease,filter .2s ease; } .ytsf-search-btn:before{left:0;right:0;top:0;height:46%;border-radius:18px 18px 48% 48%;background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0));opacity:.85} .ytsf-search-btn:hover{filter:brightness(1.035)} .ytsf-search-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b80d28,0 10px 22px -18px rgba(225,18,54,.72),inset 0 1px 0 rgba(255,255,255,.25)} .ytsf-search-btn-icon{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.18);font-size:1.05rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .ytsf-search-btn b{font-size:.76rem;letter-spacing:-.01em}.ytsf-search-btn small{font-size:0.656rem;color:rgba(255,255,255,.8)}.ytsf-search-btn>i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.13);font-size:0.67rem;opacity:1} .ytsf-video-task-card{position:relative;isolation:isolate;overflow:hidden;min-height:94px;margin-top:48px;padding:14px 15px;border-radius:21px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),color-mix(in srgb,var(--primary-dark) 7%,var(--surface-2)));box-shadow:0 16px 35px -30px var(--primary);grid-template-columns:auto minmax(0,1fr) auto;gap:12px} .ytsf-video-task-card:before{content:"";position:absolute;z-index:-1;width:126px;height:126px;border-radius:50%;right:-66px;top:-72px;background:color-mix(in srgb,var(--primary) 10%,transparent)} .ytsf-video-task-card:after{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:4px;background:var(--grad)} .ytsf-video-task-icon{width:52px;height:52px;border-radius:17px;font-size:1.12rem;background:var(--grad);box-shadow:0 14px 28px -18px var(--primary)} .ytsf-video-task-copy{gap:1px}.ytsf-video-task-copy small{display:inline-flex;width:max-content;max-width:100%;padding:3px 6px;border-radius:999px;background:var(--primary-soft);font-size:0.644rem;letter-spacing:.09em}.ytsf-video-task-copy b{margin-top:4px;font-size:.8rem}.ytsf-video-task-copy em{margin-top:3px;font-size:0.664rem;line-height:1.42} .ytsf-video-task-arrow{width:34px;height:34px;border-radius:12px;background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));font-size:0.674rem;box-shadow:0 8px 18px -16px rgba(0,0,0,.55)} @media(max-width:339px){.ytsf-video-task-card{padding:12px 11px;gap:9px}.ytsf-video-task-icon{width:46px;height:46px;border-radius:15px}.ytsf-video-task-copy em{font-size:0.656rem}.ytsf-video-task-arrow{width:31px;height:31px}} /* v2026.09.07.2 — Search CTA follows the active FINZO theme instead of fixed YouTube red. */ .ytsf-search-btn{border-color:color-mix(in srgb,var(--primary) 55%,rgba(255,255,255,.22));background:var(--grad);box-shadow:0 4px 0 color-mix(in srgb,var(--primary) 72%,#26145f),0 15px 30px -18px color-mix(in srgb,var(--primary) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.34)} .ytsf-search-btn:active{box-shadow:0 1px 0 color-mix(in srgb,var(--primary) 72%,#26145f),0 10px 22px -18px color-mix(in srgb,var(--primary) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.25)} /* v2026.09.07.3 — Instant Search keeps the query field keyboard-neutral; Paste remains active. */ .ytsf-input-wrap input.instant-locked{cursor:default;caret-color:transparent;user-select:none;-webkit-user-select:none} /* v2026.09.07.12 — modal-based smart YouTube comment generator. */ .ytsf-comment-generator{margin-top:16px} .ytsf-generate-btn{position:relative;isolation:isolate;width:100%;min-height:76px;border:1.5px solid color-mix(in srgb,var(--primary) 34%,var(--border));border-radius:20px;padding:11px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 15%,var(--surface)),color-mix(in srgb,var(--primary) 5%,var(--surface)) 55%,var(--surface));color:var(--text);font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 16px 32px -27px var(--primary),inset 0 1px 0 color-mix(in srgb,#fff 65%,transparent);transition:transform .16s var(--ease),border-color .2s,box-shadow .2s,background .2s} .ytsf-generate-btn::after{content:"";position:absolute;z-index:-1;width:130px;height:130px;border-radius:50%;right:-58px;top:-60px;background:color-mix(in srgb,var(--primary) 13%,transparent);pointer-events:none} .ytsf-generate-btn:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));box-shadow:0 18px 38px -27px var(--primary),inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent)} .ytsf-generate-btn:active{transform:scale(.985)}.ytsf-generate-btn:disabled{opacity:.7;cursor:wait} .ytsf-generate-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1.05rem;box-shadow:0 12px 20px -14px var(--primary),inset 0 1px 0 rgba(255,255,255,.28)} .ytsf-generate-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.ytsf-generate-copy small{font-size:0.64rem;letter-spacing:.095em;color:var(--primary);font-weight:950}.ytsf-generate-copy b{font-size:.78rem;line-height:1.18;font-weight:950;letter-spacing:-.015em}.ytsf-generate-copy em{font-style:normal;font-size:0.66rem;line-height:1.35;color:var(--text-muted);font-weight:650} .ytsf-generate-arrow{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));color:var(--primary);font-size:0.674rem;transition:transform .18s var(--ease)}.ytsf-generate-btn:hover .ytsf-generate-arrow{transform:translateX(2px)} [data-theme="dark"] .ytsf-generate-btn{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface-2)) 58%,var(--surface-2));box-shadow:0 18px 36px -30px rgba(0,0,0,.9)} .sheet.ytsf-comments-sheet{max-height:min(92dvh,820px);background:color-mix(in srgb,var(--surface) 98%,var(--primary) 2%);border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));border-bottom:0} .sheet.ytsf-comments-sheet .sheet-head{padding-bottom:12px}.sheet.ytsf-comments-sheet .sheet-head h3{font-size:1rem;font-weight:950;letter-spacing:-.02em}.sheet.ytsf-comments-sheet .sheet-body{padding:2px 18px max(28px,var(--safe-b));overscroll-behavior:contain} .ytsf-comments-sheet-content{display:flex;flex-direction:column;gap:11px;padding-bottom:2px} .ytsf-comments-sheet-hero{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;padding:13px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));box-shadow:0 14px 28px -28px var(--primary)} .ytsf-comments-sheet-hero>span:first-child{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1rem;box-shadow:0 10px 18px -13px var(--primary)} .ytsf-comments-sheet-hero>div{display:flex;min-width:0;flex-direction:column;gap:1px}.ytsf-comments-sheet-hero small{font-size:0.642rem;letter-spacing:.1em;font-weight:950;color:var(--primary)}.ytsf-comments-sheet-hero b{font-size:.79rem;font-weight:950;line-height:1.22}.ytsf-comments-sheet-hero em{font-style:normal;font-size:0.656rem;line-height:1.35;color:var(--text-muted)} .ytsf-comments-category{max-width:112px;min-height:27px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary);font-size:0.65rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ytsf-regenerate-btn{width:100%;min-height:47px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:14px;padding:8px 13px;display:flex;align-items:center;justify-content:center;gap:8px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--primary);font-family:inherit;font-size:0.686rem;font-weight:900;cursor:pointer;transition:transform .15s var(--ease),background .2s,opacity .2s}.ytsf-regenerate-btn:active{transform:scale(.985)}.ytsf-regenerate-btn:disabled{opacity:.72;cursor:wait}.ytsf-regenerate-btn .ytsf-regenerate-spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--primary) 24%,transparent);border-top-color:var(--primary)}.ytsf-regenerate-btn.loading .ytsf-regenerate-spinner{display:block;animation:ytsfCommentsSpin .7s linear infinite}.ytsf-regenerate-btn.loading>i{display:none} .ytsf-comments-list{display:grid;gap:8px}.ytsf-comments-list.swapping{animation:ytsfCommentsSwap .28s ease} @keyframes ytsfCommentsSwap{0%{opacity:.35;transform:translateY(5px)}100%{opacity:1;transform:none}} .ytsf-comment-item{display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid color-mix(in srgb,var(--border) 92%,transparent);border-radius:14px;background:var(--surface-2)} .ytsf-comment-index{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:0.662rem;font-weight:950}.ytsf-comment-item p{margin:0;color:var(--text);font-size:0.678rem;line-height:1.5;font-weight:650}.ytsf-comment-copy{min-width:64px;height:33px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:10px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;background:var(--surface);color:var(--primary);font-family:inherit;font-size:0.656rem;font-weight:900;cursor:pointer;transition:transform .14s,background .14s,color .14s}.ytsf-comment-copy:active{transform:scale(.95)}.ytsf-comment-copy.copied{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 25%,var(--border));color:var(--success)} .ytsf-comments-note{display:flex;align-items:flex-start;gap:7px;padding:1px 3px 0;color:var(--text-muted);font-size:0.654rem;line-height:1.4;font-weight:650}.ytsf-comments-note i{margin-top:1px;color:var(--primary)} @keyframes ytsfCommentsSpin{to{transform:rotate(360deg)}} @media(max-width:339px){.ytsf-generate-copy em{font-size:0.652rem}.ytsf-comments-sheet-hero{grid-template-columns:42px minmax(0,1fr)}.ytsf-comments-sheet-hero>span:first-child{width:42px;height:42px}.ytsf-comments-category{grid-column:2;justify-self:start}.ytsf-comment-item{grid-template-columns:25px minmax(0,1fr)}.ytsf-comment-copy{grid-column:2;justify-self:start}.ytsf-comment-item p{font-size:0.672rem}} @media(prefers-reduced-motion:reduce){.ytsf-regenerate-btn.loading .ytsf-regenerate-spinner,.ytsf-comments-list.swapping{animation:none}.ytsf-generate-btn,.ytsf-generate-arrow{transition:none}} /* v2026.09.07.18 — balanced spacing around the divider; Video Task promo removed. */ .youtube-filter-page{--ytsf-status-gap:14px;--ytsf-divider-gap:21px} .ytsf-tip{margin:var(--ytsf-status-gap) 2px 0} .ytsf-action-divider{width:100%;height:0;margin:var(--ytsf-divider-gap) 0;border:0;border-top:1px dashed color-mix(in srgb,var(--text-muted) 32%,var(--border));opacity:.9} .ytsf-comment-generator{margin-top:0} /* ================= RESPONSIVE YOUTUBE TOOL ================= */ @media(max-width:339px){ .ytsf-settings-row{grid-template-columns:1fr} .ytsf-filter-control{width:100%} .ytsf-input-wrap input{min-width:0} .ytsf-comments-category{max-width:100%} } /* 384-reference compact safety */ @media(max-width:339px){ .ytsf-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ================= v2026.09.13.47 · YOUTUBE TOOL READABILITY ================= */ .ytsf-kicker,.ytsf-heading p,.ytsf-filter-trigger small,.ytsf-filter-label,.ytsf-filter-grid small,.ytsf-search-head span:first-child,.ytsf-active-chip,.ytsf-paste-ribbon,.ytsf-opening small,.ytsf-search-btn small,.ytsf-tip,.ytsf-video-task-copy small,.ytsf-video-task-copy em,.ytsf-generate-copy small,.ytsf-generate-copy em,.ytsf-comments-sheet-hero small,.ytsf-comments-sheet-hero em,.ytsf-comments-category,.ytsf-comment-index,.ytsf-comment-item p,.ytsf-comment-copy,.ytsf-comments-note{font-size:.7rem!important} .ytsf-filter-grid b,.ytsf-opening b,.ytsf-control-copy b{font-size:.74rem} /* v191: selectable smart-comment categories */ .ytsf-comments-category{border:0;cursor:pointer;gap:6px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease} .ytsf-comments-category:active{transform:scale(.97)} .ytsf-comments-category i{font-size:0.662rem} .ytsf-comment-category-picker{display:flex;gap:7px;max-height:0;opacity:0;overflow:hidden;padding:0 2px;transform:translateY(-4px);transition:max-height .24s ease,opacity .18s ease,transform .2s ease,padding .2s ease} .ytsf-comment-category-picker.open{max-height:92px;opacity:1;padding:10px 2px 3px;transform:none;overflow-x:auto;scrollbar-width:none} .ytsf-comment-category-picker.open::-webkit-scrollbar{display:none} .ytsf-comment-category-picker button{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:999px;padding:8px 11px;font:inherit;font-size:0.686rem;font-weight:850;cursor:pointer;white-space:nowrap;box-shadow:0 5px 14px -13px rgba(0,0,0,.45);transition:.16s ease} .ytsf-comment-category-picker button.active{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));background:var(--primary-soft);color:var(--primary);box-shadow:0 7px 16px -13px var(--primary)} .ytsf-comment-category-picker button:active{transform:scale(.97)} /* v192: comment categories are always-visible horizontal chips */ .ytsf-comment-category-picker{display:flex;gap:7px;max-height:none!important;opacity:1!important;overflow-x:auto!important;overflow-y:hidden;padding:10px 2px 5px!important;transform:none!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain} .ytsf-comment-category-picker::-webkit-scrollbar{display:none} .ytsf-comments-sheet-hero .ytsf-comments-category{display:none!important} /* ---- tg_post_maker.css ---- */ /* ============ FINZO WALLET — TG Post Maker ============ */ .tgpm-page{padding-bottom:28px}.tgpm-heading{display:flex;align-items:center;gap:12px;padding:8px 2px 26px}.tgpm-heading-icon{width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.48rem;background:linear-gradient(145deg,#2aabee,#168dcc);border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -18px rgba(34,158,217,.9)}.tgpm-heading>div:last-child{min-width:0}.tgpm-heading h1{margin:0;font-size:clamp(1.24rem,5.2vw,1.62rem);line-height:1.1;letter-spacing:-.035em;font-weight:900}.tgpm-heading p{margin:5px 0 0;color:var(--text-muted);font-size:0.68rem;line-height:1.42;font-weight:650} .tgpm-builder-card{padding:16px;border-radius:20px}.tgpm-hero{display:grid;grid-template-columns:54px minmax(0,1fr) 40px;align-items:center;gap:12px;padding:14px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))}.tgpm-hero-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,#229ed9 14%,var(--surface));color:#229ed9;font-size:1.35rem}.tgpm-hero-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.tgpm-kicker{font-size:0.686rem;line-height:1;font-weight:900;letter-spacing:.11em;color:var(--primary)}.tgpm-hero-copy>b{font-size:1rem;line-height:1.25;color:var(--text)}.tgpm-hero-copy p{margin:2px 0 0;font-size:.82rem;line-height:1.5;color:var(--text-muted)}.tgpm-youtube-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,#ff0033 10%,var(--surface));color:#ff0033;font-size:1.1rem}.tgpm-link-field{margin-top:16px}.tgpm-link-field label{font-size:.84rem;font-weight:800}.tgpm-input-wrap{position:relative}.tgpm-input-wrap .input{height:50px;padding-right:91px;font-size:.9rem}.tgpm-paste-ribbon{right:7px!important;top:50%!important;transform:translateY(-50%)!important;transform-origin:center!important;height:34px!important;font-size:.76rem!important}.tgpm-paste-ribbon:hover,.tgpm-paste-ribbon:focus{transform:translateY(-50%)!important}.tgpm-paste-ribbon:active{transform:translateY(-50%) scale(.96)!important}.tgpm-continue{width:100%;height:50px;margin-top:14px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;font-weight:850} .tgpm-how-card{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:0 8px 24px rgba(15,23,42,.04)}.tgpm-how-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}.tgpm-how-head>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.9rem}.tgpm-how-head>div{display:flex;flex-direction:column;gap:2px}.tgpm-how-head b{font-size:.95rem;color:var(--text)}.tgpm-how-head small{font-size:.76rem;color:var(--text-muted)}.tgpm-steps{display:grid;gap:10px}.tgpm-steps>div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:start;padding:11px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.tgpm-steps>div>span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:.78rem;font-weight:900}.tgpm-steps p{margin:0;display:flex;flex-direction:column;gap:3px}.tgpm-steps b{font-size:.86rem;color:var(--text)}.tgpm-steps small{font-size:.76rem;line-height:1.5;color:var(--text-muted)} .sheet.tgpm-sheet-shell{max-height:min(94vh,900px);background:color-mix(in srgb,var(--surface) 98%,var(--primary) 2%);border:1px solid color-mix(in srgb,var(--border) 84%,var(--primary) 16%);border-bottom:0}.sheet.tgpm-sheet-shell .sheet-head h3{font-size:1rem;font-weight:900;letter-spacing:-.02em}.sheet.tgpm-sheet-shell .sheet-body{padding-bottom:max(26px,var(--safe-b));font-size:.88rem} .tgpm-fetched-sheet,.tgpm-video-sheet,.tgpm-ready-sheet{padding-bottom:4px}.tgpm-fetched-head,.tgpm-config-intro,.tgpm-ready-banner{display:flex;align-items:center;gap:11px;margin-bottom:13px;padding:12px 13px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.tgpm-fetched-head>span,.tgpm-config-intro>span,.tgpm-ready-banner>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}.tgpm-fetched-head>span{background:color-mix(in srgb,#ff0033 11%,var(--surface));color:#ff0033}.tgpm-config-intro>span{background:color-mix(in srgb,#229ed9 12%,var(--surface));color:#229ed9}.tgpm-ready-banner{border-color:color-mix(in srgb,#22a06b 24%,var(--border));background:color-mix(in srgb,#22a06b 6%,var(--surface))}.tgpm-ready-banner>span{background:color-mix(in srgb,#22a06b 13%,var(--surface));color:#16865a}.tgpm-fetched-head>div,.tgpm-config-intro>div,.tgpm-ready-banner>div{display:flex;min-width:0;flex-direction:column;gap:2px}.tgpm-fetched-head b,.tgpm-config-intro b,.tgpm-ready-banner b{font-size:.9rem;color:var(--text)}.tgpm-fetched-head small,.tgpm-config-intro small,.tgpm-ready-banner small{font-size:.75rem;line-height:1.4;color:var(--text-muted)} .tgpm-post-image-wrap{position:relative;padding:7px;border:1px solid var(--border);border-radius:18px;background:#080808;box-shadow:0 10px 24px rgba(15,23,42,.08)}.tgpm-post-image-wrap img{display:block;width:100%;height:auto;border-radius:12px;object-fit:contain;background:#0f0f0f}.tgpm-image-badge{position:absolute;right:13px;top:13px;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.76);color:#fff;font-size:0.682rem;font-weight:900;letter-spacing:.04em}.tgpm-download-btn{width:100%;height:46px;margin-top:10px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;font-weight:850}.tgpm-create-telegram-btn{width:100%;height:50px;margin-top:12px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;font-weight:850} .tgpm-two-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tgpm-two-inputs .field label{font-size:.8rem;font-weight:800}.tgpm-two-inputs .input{height:46px;font-size:.88rem}.tgpm-tags-card{margin-top:13px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}.tgpm-tags-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.tgpm-tags-head>div:first-child{display:flex;min-width:0;flex-direction:column;gap:2px}.tgpm-tags-head b{font-size:.86rem;color:var(--text)}.tgpm-tags-head small{font-size:.73rem;color:var(--text-muted);line-height:1.4}.tgpm-tags-head>div:last-child{display:flex;align-items:center;gap:6px;flex:none}.tgpm-tags-head>div:last-child>span{font-size:.7rem;font-weight:850;color:var(--text-muted)}.tgpm-tags-head button{height:32px;padding:0 10px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:9px;background:var(--surface);color:var(--primary);font:800 .72rem/1 inherit}.tgpm-tags-head button:disabled{opacity:.42}.tgpm-tag-list{display:grid;gap:8px}.tgpm-tag-row{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:7px}.tgpm-tag-hash{width:32px;height:38px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary);font-size:.7rem}.tgpm-tag-row .input{height:40px;padding:0 10px;font-size:.82rem;font-weight:650}.tgpm-tag-remove{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--text-muted);font-size:.72rem}.tgpm-tag-remove:active{background:var(--danger-soft);color:var(--danger)}.tgpm-time-card{display:grid;grid-template-columns:40px minmax(0,1fr) 126px;align-items:center;gap:10px;margin-top:12px;padding:11px 12px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.tgpm-time-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.tgpm-time-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.tgpm-time-copy b{font-size:.84rem;color:var(--text)}.tgpm-time-copy small{font-size:.72rem;color:var(--text-muted)}.tgpm-time-card input[type=time]{width:126px;height:39px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font:800 .8rem/1 inherit;padding:0 8px;color-scheme:light dark}.tgpm-create-btn{width:100%;height:50px;margin-top:13px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;font-weight:850} .tgpm-caption-preview{margin-top:14px;padding:12px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface));box-shadow:0 8px 20px rgba(15,23,42,.05)}.tgpm-caption-preview-head{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}.tgpm-caption-preview-head>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,#229ed9 12%,var(--surface));color:#229ed9;font-size:.9rem}.tgpm-caption-preview-head>div{display:flex;flex-direction:column;gap:2px}.tgpm-caption-preview-head b{font-size:.86rem;color:var(--text)}.tgpm-caption-preview-head small{font-size:.73rem;color:var(--text-muted);line-height:1.4}.tgpm-edit-hint{margin-left:5px;padding:2px 6px;border-radius:6px;background:var(--primary-soft);color:var(--primary);font-size:0.674rem;font-weight:850}.tgpm-caption-preview-body{max-height:390px;overflow:auto;padding:13px 5px 8px;font-family:Arial,"Helvetica Neue",sans-serif;font-size:.84rem;line-height:1.58;color:var(--text);overflow-wrap:anywhere}.tgpm-preview-line{min-height:1.15em}.tgpm-preview-gap{height:.72em}.tgpm-preview-line strong{font-weight:800;color:var(--text);letter-spacing:-.005em}.tgpm-preview-line a{color:#229ed9;text-decoration:none;font-weight:650}.tgpm-preview-line code{display:inline-block;max-width:100%;padding:2px 6px;border:1px solid color-mix(in srgb,var(--border) 82%,var(--primary) 18%);border-radius:6px;background:var(--surface-2);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.79rem;white-space:normal}.tgpm-caption-editor-body{min-height:250px;cursor:text;border-radius:11px;transition:background .18s,box-shadow .18s}.tgpm-caption-editor-body:focus{outline:0;background:color-mix(in srgb,var(--primary) 3.5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 20%,transparent)}.tgpm-caption-editor-body a{pointer-events:none}.tgpm-caption-editor-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:9px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.72rem;font-weight:750}.tgpm-caption-editor-foot>span:first-child{display:flex;align-items:center;gap:5px}.tgpm-caption-editor-foot>span:first-child i{color:var(--primary)}.tgpm-caption-count{padding:4px 7px;border-radius:7px;background:var(--surface-2);color:var(--text-muted);font-size:0.686rem;font-weight:800}.tgpm-caption-count.over{color:var(--danger);background:var(--danger-soft)} .tgpm-channel-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:17px 1px 9px}.tgpm-channel-head>div{display:flex;flex-direction:column;gap:2px}.tgpm-channel-head b{font-size:.88rem;color:var(--text)}.tgpm-channel-head small{font-size:.74rem;color:var(--text-muted)}.tgpm-select-all{border:0;background:transparent;color:var(--primary);font:800 .74rem/1 inherit;padding:7px}.tgpm-channel-list{display:grid;gap:9px}.tgpm-channel-option{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);cursor:pointer;text-align:left;transition:border-color .18s,background .18s,transform .16s}.tgpm-channel-option:active{transform:scale(.985)}.tgpm-channel-option.selected{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.tgpm-channel-option.unavailable{opacity:.64}.tgpm-channel-logo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,#229ed9 12%,var(--surface));color:#229ed9;flex:none}.tgpm-channel-logo img{width:100%;height:100%;object-fit:cover;display:block}.tgpm-channel-logo-fallback{font-size:1rem}.tgpm-channel-option>div{min-width:0;display:flex;flex-direction:column;gap:3px}.tgpm-channel-option b{font-size:.84rem;line-height:1.25;color:var(--text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tgpm-channel-option small{font-size:.71rem;line-height:1.3;color:var(--text-muted)!important}.tgpm-check{width:25px;height:25px;border:1.5px solid var(--border);border-radius:8px;display:grid!important;place-items:center;background:var(--surface-2)!important;color:transparent!important;font-size:0.678rem;transition:.18s}.tgpm-channel-option.selected .tgpm-check{background:var(--primary)!important;border-color:var(--primary);color:#fff!important}.tgpm-no-channels{padding:18px;border:1px dashed var(--border);border-radius:16px;text-align:center;background:var(--surface-2);color:var(--text)}.tgpm-no-channels i{font-size:1.35rem;color:#229ed9}.tgpm-no-channels b{display:block;margin-top:8px;font-size:.86rem}.tgpm-no-channels p{margin:5px auto 11px;max-width:280px;color:var(--text-muted);font-size:.75rem;line-height:1.45}.tgpm-post-btn{width:100%;height:51px;margin-top:15px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.88rem;font-weight:850}.tgpm-post-btn:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.55)}.tgpm-post-note,.tgpm-disabled-note,.tgpm-alerts-note{display:flex;align-items:flex-start;gap:7px;margin:9px 3px 0;color:var(--text-muted);font-size:.72rem;line-height:1.45}.tgpm-disabled-note{padding:10px 11px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)}.tgpm-post-note i,.tgpm-disabled-note i,.tgpm-alerts-note i{color:var(--primary);margin-top:2px}.tgpm-personal-separator{position:relative;display:flex;align-items:center;justify-content:center;margin:16px 0 11px;color:var(--text-muted);font-size:0.686rem;font-weight:900;letter-spacing:.12em}.tgpm-personal-separator:before,.tgpm-personal-separator:after{content:"";height:1px;flex:1;background:var(--border)}.tgpm-personal-separator span{padding:0 10px}.tgpm-alerts-btn{width:100%;height:49px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;font-weight:850}.tgpm-alerts-btn i{color:#229ed9} @media(max-width:420px){.tgpm-page{padding-bottom:20px}.tgpm-builder-card{padding:13px}.tgpm-hero{grid-template-columns:48px minmax(0,1fr);padding:12px}.tgpm-hero-icon{width:48px;height:48px}.tgpm-youtube-mark{display:none}.tgpm-hero-copy p{font-size:.79rem}.tgpm-two-inputs{grid-template-columns:1fr 1fr}.tgpm-tags-head{align-items:flex-start;flex-direction:column}.tgpm-tags-head>div:last-child{width:100%;justify-content:flex-end}.tgpm-time-card{grid-template-columns:38px minmax(0,1fr) 116px}.tgpm-time-icon{width:38px;height:38px}.tgpm-time-card input[type=time]{width:116px}.tgpm-caption-preview-head{grid-template-columns:36px minmax(0,1fr)}.tgpm-caption-preview-head>span{width:36px;height:36px}.tgpm-channel-option{grid-template-columns:42px minmax(0,1fr) auto}.tgpm-channel-logo{width:42px;height:42px}} @media(max-width:339px){.tgpm-two-inputs{grid-template-columns:1fr}.tgpm-time-card{grid-template-columns:36px minmax(0,1fr)}.tgpm-time-card input[type=time]{grid-column:1/-1;width:100%}} /* v2026.09.07.2 — true task-details popup above the still-active preview sheet. */ body.tgpm-detail-modal-open{overflow:hidden} .tgpm-detail-modal-backdrop{position:fixed;inset:0;z-index:16000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(9,12,20,.56);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease} .tgpm-detail-modal-backdrop.open{opacity:1;visibility:visible} .tgpm-detail-modal{width:min(520px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:22px;background:var(--surface);box-shadow:0 28px 80px rgba(0,0,0,.28);transform:translateY(12px) scale(.985);transition:transform .18s ease} .tgpm-detail-modal-backdrop.open .tgpm-detail-modal{transform:translateY(0) scale(1)} .tgpm-detail-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 15px 13px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface))} .tgpm-detail-modal-head>div:first-child{display:flex;align-items:center;min-width:0;gap:10px}.tgpm-detail-modal-head>div:first-child>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,#229ed9 13%,var(--surface));color:#229ed9;font-size:1rem}.tgpm-detail-modal-head>div:first-child>div{display:flex;min-width:0;flex-direction:column;gap:2px}.tgpm-detail-modal-head b{font-size:.98rem;line-height:1.25;color:var(--text)}.tgpm-detail-modal-head small{font-size:.76rem;line-height:1.4;color:var(--text-muted)} .tgpm-detail-close{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:.82rem;cursor:pointer}.tgpm-detail-close:active{transform:scale(.96)} .tgpm-detail-modal-body{overflow:auto;padding:15px 15px 18px;overscroll-behavior:contain}.tgpm-detail-modal-body .tgpm-two-inputs .field label{font-size:.84rem}.tgpm-detail-modal-body .tgpm-two-inputs .input{height:48px;font-size:.92rem}.tgpm-detail-modal-body .tgpm-tags-head b{font-size:.9rem}.tgpm-detail-modal-body .tgpm-tags-head small{font-size:.76rem}.tgpm-detail-modal-body .tgpm-tag-row .input{font-size:.86rem}.tgpm-detail-modal-body .tgpm-time-copy b{font-size:.88rem}.tgpm-detail-modal-body .tgpm-time-copy small{font-size:.75rem} @media(max-width:520px){.tgpm-detail-modal-backdrop{padding:13px}.tgpm-detail-modal{max-height:88vh;border-radius:20px}.tgpm-detail-modal-head{padding:13px}.tgpm-detail-modal-body{padding:13px 13px 16px}} /* v2026.09.07.5 — linked Telegram identity gate for TG Post Maker. */ .tgpm-alert-link-card{margin:15px 0 2px;padding:18px 15px 15px}.tgpm-alert-link-card h3{font-size:.94rem;color:var(--text)}.tgpm-alert-link-card p{font-size:.76rem;line-height:1.5;color:var(--text-muted);max-width:390px}.tgpm-alert-link-card .btn{height:47px;font-size:.82rem;font-weight:850}.tgpm-alert-link-waiting{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;margin-top:11px;padding:10px 11px;border-radius:12px;background:var(--info-soft);color:var(--info);text-align:left}.tgpm-alert-link-waiting.hidden{display:none}.tgpm-alert-link-waiting>i{font-size:.85rem}.tgpm-alert-link-waiting>div{display:flex;min-width:0;flex-direction:column;gap:2px}.tgpm-alert-link-waiting b{font-size:.73rem}.tgpm-alert-link-waiting span{font-size:0.686rem;line-height:1.4}.tgpm-ready-sheet .tg-alert-connect-icon{width:52px;height:52px;border-radius:17px;font-size:1.4rem} /* v2026.09.07.14 — streamlined maker layout, saved task defaults and Telegram quote preview. */ .tgpm-entry{padding:2px 1px 0}.tgpm-entry .tgpm-link-field{margin-top:0}.tgpm-entry .tgpm-link-field label{display:block;margin:0 0 7px;font-size:.86rem;font-weight:850;color:var(--text)}.tgpm-entry .tgpm-input-wrap .input{height:52px;border-radius:15px;background:var(--surface);box-shadow:0 5px 18px rgba(15,23,42,.035)}.tgpm-entry .tgpm-continue{height:51px;margin-top:12px;border-radius:15px;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 17%,transparent)}.tgpm-entry-divider{height:0;margin:18px 1px 16px;border-top:1.5px dashed color-mix(in srgb,var(--border) 78%,var(--primary) 22%)} .tgpm-how-card{margin-top:0}.tgpm-how-card,.tgpm-steps>div{box-shadow:none}.tgpm-how-card{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 45%,var(--surface)))} .tgpm-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.tgpm-setup-grid .field label{font-size:.84rem;font-weight:850;color:var(--text)}.tgpm-setup-grid .input{height:48px;font-size:.91rem}.tgpm-main-channel-field{grid-column:1/-1}.tgpm-main-channel-field small{display:block;margin:6px 2px 0;font-size:.7rem;line-height:1.4;color:var(--text-muted)} .tgpm-tags-card{margin-top:14px}.tgpm-preview-quote-line{position:relative;margin:0;padding:5px 10px 5px 13px;border-left:3px solid color-mix(in srgb,var(--primary) 72%,#229ed9 28%);background:color-mix(in srgb,var(--primary) 5%,var(--surface-2));min-height:1.6em}.tgpm-preview-quote-line+ .tgpm-preview-quote-line{padding-top:2px}.tgpm-preview-gap+.tgpm-preview-quote-line,.tgpm-preview-line:not(.tgpm-preview-quote-line)+.tgpm-preview-quote-line{border-top-right-radius:10px}.tgpm-preview-quote-line:has(+ .tgpm-preview-gap),.tgpm-preview-quote-line:not(:has(+ .tgpm-preview-quote-line)){border-bottom-right-radius:10px}.tgpm-preview-quote-line code{background:color-mix(in srgb,var(--surface) 78%,var(--primary) 22%)} @media(max-width:420px){.tgpm-entry{padding-inline:0}.tgpm-setup-grid{grid-template-columns:1fr 1fr}.tgpm-main-channel-field{grid-column:1/-1}.tgpm-entry-divider{margin-top:16px}.tgpm-how-card{padding:14px}} @media(max-width:339px){.tgpm-setup-grid{grid-template-columns:1fr}.tgpm-main-channel-field{grid-column:auto}} @media(max-width:390px){.tgpm-heading{gap:10px;padding-top:5px;padding-bottom:24px}.tgpm-heading-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px;font-size:1.32rem}.tgpm-heading p{font-size:0.672rem}} /* v2026.09.07.18 — compact task-detail popup with saved Send Proof username. */ .tgpm-proof-user-field{grid-column:1/-1} .tgpm-time-card{grid-template-columns:40px minmax(0,1fr) 126px} .tgpm-time-label{min-width:0;font-size:.84rem;line-height:1.2;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:420px){.tgpm-proof-user-field{grid-column:1/-1}.tgpm-time-card{grid-template-columns:38px minmax(0,1fr) 112px}.tgpm-time-card input[type=time]{width:112px}} @media(max-width:339px){.tgpm-proof-user-field{grid-column:auto}.tgpm-time-card{grid-template-columns:34px minmax(0,1fr) 102px;gap:7px;padding-inline:9px}.tgpm-time-icon{width:34px;height:34px}.tgpm-time-label{font-size:.74rem}.tgpm-time-card input[type=time]{grid-column:auto;width:102px;padding:0 5px;font-size:.73rem}} /* v2026.09.08.1 — generated TG thumbnail now uses its intrinsic compact height after moving FINZO branding into the stats row. */ /* ================= RESPONSIVE TG POST MAKER ================= */ @media(max-width:339px){ .tgpm-setup-grid,.tgpm-two-inputs{grid-template-columns:1fr} .tgpm-main-channel-field,.tgpm-proof-user-field{grid-column:auto} .tgpm-builder-card{padding-left:11px;padding-right:11px} } /* 384-reference compact safety */ @media(max-width:339px){ .tgpm-row,.tgpm-grid{min-width:0} } /* ================= v2026.09.13.47 · TG POST MAKER READABILITY ================= */ .tgpm-heading p,.tgpm-edit-hint{font-size:.72rem} /* ---- recharge.css ---- */ /* ================= MOBILE RECHARGE ================= */ .recharge-page{padding-bottom:6px}.recharge-page>*{animation:rechargeRise .46s var(--ease) both}.recharge-page>*:nth-child(2){animation-delay:.04s}.recharge-page>*:nth-child(3){animation-delay:.08s}@keyframes rechargeRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* Page title — same compact title language as FINZO tools. */ .recharge-heading{display:flex;align-items:center;gap:12px;padding:8px 2px 16px}.recharge-heading-icon{width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.35rem;background:var(--grad);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -18px var(--primary)}.recharge-kicker{display:block;margin-bottom:2px;color:var(--primary);font-size:0.662rem;font-weight:900;letter-spacing:1.05px}.recharge-heading h1{margin:0;font-size:clamp(1.24rem,5.2vw,1.62rem);line-height:1.1;letter-spacing:-.035em;font-weight:900}.recharge-heading p{margin:5px 0 0;color:var(--text-muted);font-size:.7rem;line-height:1.42;font-weight:650} /* Main number card — aligned with Add Fund card treatment. */ .recharge-number-card,.recharge-history-panel{margin-bottom:16px;border-color:var(--border);box-shadow:var(--shadow-sm)}.recharge-number-card{padding:16px;margin-top:7px;margin-bottom:22px}.recharge-field-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.recharge-field-label>span:first-child{font-size:.84rem;font-weight:850}.recharge-balance-pill{flex:none}.recharge-mobile-input{height:72px;border-radius:21px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 5%,var(--surface)));border:1.5px solid var(--border);display:flex;align-items:center;padding:0 16px;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}.recharge-mobile-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 5px var(--primary-soft)}.recharge-mobile-input>span{display:flex;align-items:center;align-self:stretch;font-size:1rem;font-weight:850;color:var(--primary);padding-right:13px;margin-right:13px;border-right:1px solid var(--border)}.recharge-mobile-input input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-weight:850;font-size:1.25rem;letter-spacing:.025em;font-variant-numeric:tabular-nums}.recharge-mobile-input input::placeholder{color:var(--text-muted);opacity:.48;font-size:.9rem;font-weight:700;letter-spacing:0}.recharge-next{width:100%;min-height:50px;margin-top:16px;display:flex;justify-content:center;align-items:center;gap:8px} /* History — Add Fund-style shell, always expanded. */ .recharge-history-panel{padding:0;overflow:hidden}.recharge-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 17px}.recharge-history-title{display:flex;align-items:center;gap:12px}.recharge-history-title>i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.recharge-history-title>span{display:flex;flex-direction:column;min-width:0}.recharge-history-title b{font-size:.86rem}.recharge-history-title small{font-size:.7rem;color:var(--text-muted);margin-top:3px}.recharge-refresh{width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--text-muted);display:grid;place-items:center;flex:none;transition:transform .18s var(--ease),color .2s,background .2s}.recharge-refresh:active{transform:rotate(-18deg) scale(.94);color:var(--primary);background:var(--primary-soft)}.recharge-refresh.is-loading{color:var(--primary);background:var(--primary-soft)}.recharge-refresh.is-loading i{animation:rechargeSpin .75s linear infinite}.recharge-refresh:disabled{opacity:1}.recharge-history-list{padding:0 14px 14px;border-top:1px solid var(--border)}.recharge-history-loading{min-height:110px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:.74rem}.recharge-history-item{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 3px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font:inherit;text-align:left}.recharge-history-item:last-child{border-bottom:0}.recharge-history-logo{width:42px;height:42px;border-radius:12px;display:block;overflow:hidden;flex:none;background:var(--surface-2)}.recharge-history-logo .recharge-op-logo,.recharge-history-logo .recharge-op-fallback{width:42px;height:42px;border-radius:12px;box-shadow:none}.recharge-history-logo .recharge-op-logo img{width:100%;height:100%;object-fit:cover}.recharge-history-logo.pending,.recharge-history-logo.processing{box-shadow:0 0 0 2px color-mix(in srgb,var(--warning) 18%,transparent)}.recharge-history-copy{min-width:0}.recharge-history-copy b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recharge-history-copy span{display:block;color:var(--text-muted);font-size:0.674rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recharge-history-right{text-align:right;min-width:68px}.recharge-history-right b{display:block;font-size:.82rem}.recharge-status{display:inline-flex;margin-top:4px;padding:3px 6px;border-radius:999px;font-size:0.658rem;font-weight:850;text-transform:capitalize}.recharge-status.success{background:var(--success-soft);color:var(--success)}.recharge-status.failed,.recharge-status.refunded{background:var(--danger-soft);color:var(--danger)}.recharge-status.processing,.recharge-status.pending{background:var(--warning-soft);color:var(--warning)} /* Operator picker. */ .recharge-sheet-mobile{padding:2px 2px 14px;color:var(--text-muted);font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums}.recharge-operator-list{display:flex;flex-direction:column;gap:9px}.recharge-op-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid var(--border);border-radius:17px;padding:11px 12px;background:var(--surface-2);color:var(--text);font:inherit;text-align:left;transition:transform .18s var(--ease),border-color .2s,background .2s}.recharge-op-row:active{transform:scale(.985);border-color:var(--primary);background:var(--primary-soft)}.recharge-op-row>i{color:var(--text-muted);font-size:12px}.recharge-op-copy b,.recharge-op-copy small{display:block}.recharge-op-copy b{font-size:.8rem}.recharge-op-copy small{color:var(--text-muted);font-size:0.68rem;margin-top:2px}.recharge-op-fallback,.recharge-op-logo{width:48px;height:48px;border-radius:14px;overflow:hidden;font-weight:950;font-size:14px;flex:none}.recharge-op-fallback{display:grid;place-items:center}.recharge-op-logo{display:block;position:relative;background:transparent;box-shadow:0 2px 8px rgba(0,0,0,.08)}.recharge-op-logo img{display:block;width:100%;height:100%;object-fit:cover;padding:0;border-radius:inherit}.recharge-op-logo .recharge-op-fallback{display:none;position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}.recharge-op-fallback.jio{background:#123b8f;color:#fff}.recharge-op-fallback.airtel{background:#e51d2a;color:#fff}.recharge-op-fallback.vi{background:#f7d20b;color:#191919}.recharge-op-fallback.bsnl{background:#0879c9;color:#fff} /* Shared modal loading/error. */ .recharge-modal-loader{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 18px}.recharge-modal-loader b{font-size:.9rem;margin-top:14px}.recharge-modal-loader p{font-size:.7rem;line-height:1.55;color:var(--text-muted);max-width:270px;margin:5px auto 0}.recharge-big-spinner{width:48px;height:48px;border-radius:50%;border:4px solid color-mix(in srgb,var(--primary) 14%,var(--border));border-top-color:var(--primary);animation:rechargeSpin .75s linear infinite;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 18%,transparent)}@keyframes rechargeSpin{to{transform:rotate(360deg)}}.recharge-error-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--danger-soft);color:var(--danger);font-size:22px}.recharge-error-state .btn{margin-top:15px;min-width:150px} /* Plans modal — body itself stays fixed, only the plans list scrolls. */ .sheet:has(.recharge-plan-sheet){height:min(88dvh,760px);max-height:calc(100dvh - 18px)}.sheet .sheet-body:has(.recharge-plan-sheet){display:flex;flex:1;min-height:0;overflow:hidden;padding-top:2px;padding-bottom:max(10px,var(--safe-b))}.recharge-plan-sheet{display:flex;flex:1;flex-direction:column;min-height:0;width:100%;margin:-2px 0 0}.recharge-plan-toolbar{flex:none;background:var(--surface);padding:0 0 9px}.recharge-selected-operator{display:flex;align-items:center;gap:9px;padding:0 1px 10px}.recharge-selected-operator .recharge-op-fallback,.recharge-selected-operator .recharge-op-logo{width:38px;height:38px;border-radius:13px}.recharge-selected-operator span:not(.recharge-op-fallback):not(.recharge-op-logo){min-width:0}.recharge-selected-operator b,.recharge-selected-operator small{display:block}.recharge-selected-operator b{font-size:.78rem}.recharge-selected-operator small{font-size:0.678rem;color:var(--text-muted);margin-top:2px}.recharge-plan-search{height:49px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2);display:flex;align-items:center;padding:0 10px 0 12px;gap:8px;transition:border-color .2s,box-shadow .2s}.recharge-plan-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}.recharge-plan-search>i{color:var(--primary)}.recharge-plan-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.76rem}.recharge-search-clear{width:30px;height:30px;border:0;background:transparent;color:var(--text-muted);border-radius:9px;display:grid;place-items:center;transition:background .15s,color .15s,transform .15s}.recharge-search-clear:active{transform:scale(.92);background:var(--primary-soft);color:var(--primary)}.recharge-category-tabs{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding:9px 0 1px;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-inline:contain}.recharge-category-tabs::-webkit-scrollbar{display:none}.recharge-cat{white-space:nowrap;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);border-radius:999px;padding:7px 11px;font:inherit;font-size:0.682rem;font-weight:800;transition:transform .22s var(--ease),background .22s,color .22s,border-color .22s,box-shadow .22s}.recharge-cat:active{transform:scale(.94)}.recharge-cat.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 18px -13px var(--primary);transform:translateY(-1px)}.recharge-cat.cat-pop{animation:rechargeCatPop .28s var(--ease)}@keyframes rechargeCatPop{45%{transform:scale(.92)}100%{transform:translateY(-1px)}} .recharge-plan-scroll{display:flex;flex:1;min-height:0;flex-direction:column;gap:9px;overflow-y:auto;overflow-x:hidden;padding:4px 2px 14px 1px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 25%,var(--border)) transparent}.recharge-plan-scroll.plan-switch{animation:rechargePlanSwitch .3s var(--ease)}@keyframes rechargePlanSwitch{0%{opacity:.35;transform:translateX(10px)}100%{opacity:1;transform:none}}.recharge-plan-count{font-size:0.674rem;color:var(--text-muted);padding:1px 2px 2px}.recharge-plan{border:1px solid var(--border);background:var(--surface-2);border-radius:17px;padding:13px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;color:var(--text);font:inherit;transition:transform .16s var(--ease),border-color .2s,background .2s,box-shadow .2s}.recharge-plan:active{transform:scale(.988)}.recharge-plan.selected{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));background:linear-gradient(145deg,var(--primary-soft),var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 8%,transparent)}.recharge-plan-main{min-width:0}.recharge-plan-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}.recharge-plan-amount{font-weight:900;font-size:1.08rem;color:var(--text)}.recharge-plan-badge{font-size:0.66rem;text-transform:uppercase;font-weight:850;letter-spacing:.05em;border-radius:999px;padding:4px 7px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)}.recharge-plan-meta{display:flex;flex-wrap:wrap;gap:5px 11px;color:var(--text-muted);font-size:0.682rem}.recharge-plan-meta span{display:inline-flex;align-items:center;gap:4px}.recharge-plan-meta i{color:var(--primary)}.recharge-plan-check{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--border);color:transparent;background:var(--surface)}.recharge-plan.selected .recharge-plan-check{background:var(--primary);border-color:var(--primary);color:#fff}.recharge-plan-footer{flex:none;position:relative;z-index:4;background:var(--surface);border-top:1px solid var(--border);margin:0 -2px;padding:12px 2px 1px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;box-shadow:0 -10px 22px -22px rgba(0,0,0,.65)}.recharge-plan-footer small,.recharge-plan-footer b{display:block}.recharge-plan-footer small{font-size:0.666rem;color:var(--text-muted)}.recharge-plan-footer b{font-size:.72rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recharge-plan-footer .btn{min-width:126px}.recharge-plan-footer .btn:disabled{opacity:.45;pointer-events:none} .recharge-empty{text-align:center;padding:24px 10px;color:var(--text-muted)}.recharge-empty i{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;margin:0 auto 9px;background:var(--primary-soft);color:var(--primary);font-size:20px}.recharge-empty b{display:block;color:var(--text);font-size:.78rem}.recharge-empty p{font-size:0.686rem;line-height:1.5;margin:5px auto 0;max-width:260px} /* Confirmation / live result. */ .recharge-confirm{display:flex;flex-direction:column;gap:12px}.recharge-confirm-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 5%,var(--surface)));border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));border-radius:18px;padding:13px}.recharge-confirm-head .recharge-op-fallback,.recharge-confirm-head .recharge-op-logo{width:43px;height:43px;border-radius:14px}.recharge-confirm-head small,.recharge-confirm-head b,.recharge-confirm-head span{display:block}.recharge-confirm-head small{font-size:0.67rem;color:var(--text-muted)}.recharge-confirm-head b{font-size:.82rem;margin:1px 0}.recharge-confirm-head span{font-size:0.678rem;color:var(--text-muted)}.recharge-confirm-head strong{font-size:1.18rem}.recharge-confirm-summary{background:var(--surface-2);border:1px solid var(--border);border-radius:17px;padding:14px}.recharge-confirm-summary .row{display:flex;justify-content:space-between;gap:12px;margin:7px 0;font-size:.76rem}.recharge-confirm-summary .row span{color:var(--text-muted)}.recharge-confirm-summary .row b{text-align:right;word-break:break-word}.recharge-confirm-btn{width:100%} .recharge-result-card{text-align:center;display:flex;flex-direction:column;align-items:stretch;padding:6px 0 2px}.recharge-result-icon{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;margin:0 auto 12px;font-size:28px;background:var(--primary-soft);color:var(--primary)}.recharge-result-card.success .recharge-result-icon{background:var(--success-soft);color:var(--success)}.recharge-result-card.pending .recharge-result-icon{background:var(--warning-soft);color:var(--warning)}.recharge-result-card.failed .recharge-result-icon,.recharge-result-card.refunded .recharge-result-icon{background:var(--danger-soft);color:var(--danger)}.recharge-result-card h3{font-size:1.05rem;margin:0}.recharge-result-card>p{font-size:.7rem;line-height:1.55;color:var(--text-muted);max-width:290px;margin:5px auto 14px}.spin-icon i{animation:rechargeSpin 1s linear infinite}.recharge-refund-note{display:flex;align-items:center;gap:7px;text-align:left;border-radius:13px;padding:10px;margin-top:10px;background:var(--danger-soft);color:var(--danger);font-size:0.686rem}.recharge-result-card .btn{margin-top:13px} .recharge-skeleton-line{height:58px;border-radius:15px;background:linear-gradient(90deg,var(--surface-2),color-mix(in srgb,var(--border) 55%,var(--surface)),var(--surface-2));background-size:220% 100%;animation:rechargeShimmer 1.2s linear infinite;margin:8px 0}@keyframes rechargeShimmer{to{background-position:-220% 0}} @media(max-width:390px){.recharge-heading{gap:10px;padding-top:5px}.recharge-heading-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px;font-size:1.22rem}.recharge-number-card{padding:14px}.recharge-mobile-input{height:68px;padding:0 14px}.recharge-mobile-input input{font-size:1.15rem}.recharge-history-head{padding:15px 14px}.recharge-history-title{gap:10px}.recharge-history-title>i{width:40px;height:40px}.recharge-history-list{padding:0 12px 12px}.recharge-history-item{gap:8px}.recharge-history-logo{width:38px;height:38px}.recharge-history-logo .recharge-op-logo,.recharge-history-logo .recharge-op-fallback{width:38px;height:38px}.recharge-history-copy b{font-size:.8rem}.recharge-history-right{min-width:62px}} @media(max-width:339px){.recharge-plan-footer{grid-template-columns:1fr}.recharge-plan-footer .btn{width:100%}.recharge-history-item{grid-template-columns:auto minmax(0,1fr)}.recharge-history-right{grid-column:2;text-align:left;display:flex;gap:8px;align-items:center}.recharge-mobile-input>span{padding-right:9px;margin-right:9px}.recharge-mobile-input input{font-size:1.05rem}} @media(prefers-reduced-motion:reduce){.recharge-page>*,.recharge-cat,.recharge-plan-scroll,.recharge-big-spinner,.spin-icon i,.recharge-refresh.is-loading i{animation:none!important;transition:none!important}} /* v100 instant plan selection + history actions */ .recharge-plan-arrow{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);transition:transform .18s var(--ease),color .2s,border-color .2s}.recharge-plan:active .recharge-plan-arrow{transform:translateX(2px);color:var(--primary);border-color:var(--primary)}.recharge-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.recharge-result-actions .btn{width:100%;margin:0}.recharge-result-actions .btn:only-child{grid-column:1/-1}@media(max-width:340px){.recharge-result-actions{grid-template-columns:1fr}} /* v102 richer catalog + compact operator grid */ .recharge-operator-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .recharge-op-row{min-width:0;min-height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:14px 10px;border-radius:19px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 4%,var(--surface)));box-shadow:0 8px 20px -20px rgba(0,0,0,.65)} .recharge-op-row:active{transform:scale(.97)} .recharge-op-row .recharge-op-logo,.recharge-op-row .recharge-op-fallback{width:62px;height:62px;border-radius:18px} .recharge-op-row .recharge-op-copy{min-width:0;width:100%} .recharge-op-row .recharge-op-copy b{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .recharge-op-row .recharge-op-copy small,.recharge-op-row>i{display:none} .recharge-sheet-mobile{text-align:center;padding:1px 2px 13px;font-size:.82rem;color:var(--text);font-weight:850} .recharge-plan-toolbar{border:1px solid var(--border);border-radius:19px;padding:12px;margin:0 1px 10px;background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--primary) 4%,var(--surface)));box-shadow:0 10px 24px -24px rgba(0,0,0,.7)} .recharge-selected-operator{padding:0 1px 10px} .recharge-category-tabs{padding:10px 0 0} .recharge-plan-scroll{padding-top:1px} .recharge-plan-desc{margin:8px 0 0;color:var(--text-muted);font-size:0.682rem;line-height:1.48;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;white-space:normal} .recharge-plan-meta{margin-top:1px} .recharge-confirm-summary .recharge-confirm-details{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)} .recharge-confirm-summary .recharge-confirm-details span,.recharge-confirm-summary .recharge-confirm-details b{display:block;text-align:left} .recharge-confirm-summary .recharge-confirm-details b{margin-top:5px;line-height:1.5;font-size:.72rem;font-weight:750} .recharge-history-right{min-width:88px;display:flex;align-items:center;justify-content:flex-end;gap:10px;text-align:right} .recharge-history-value{display:block;min-width:0} .recharge-history-value>b{display:block;font-size:.82rem} .recharge-history-chevron{font-size:12px;color:var(--text-muted);flex:none;transition:transform .18s var(--ease),color .18s} .recharge-history-item:active .recharge-history-chevron{transform:translateX(2px);color:var(--primary)} @media(max-width:390px){.recharge-op-row{min-height:116px;padding:12px 8px}.recharge-op-row .recharge-op-logo,.recharge-op-row .recharge-op-fallback{width:58px;height:58px}.recharge-plan-toolbar{padding:11px}.recharge-history-right{min-width:82px;gap:7px}} @media(max-width:339px){.recharge-history-item{grid-template-columns:auto minmax(0,1fr) auto}.recharge-history-right{grid-column:auto;text-align:right;display:flex;gap:6px;align-items:center}.recharge-history-value>b{font-size:.76rem}.recharge-history-chevron{font-size:10.8px}} /* v104 category rail: horizontal by default, clean integrated expand control */ .recharge-category-shell{margin-top:10px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 90%,var(--primary-soft));padding:7px;overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)} .recharge-category-shell.expanded{border-color:color-mix(in srgb,var(--primary) 30%,var(--border));box-shadow:0 10px 24px -24px rgba(0,0,0,.72);background:color-mix(in srgb,var(--surface) 86%,var(--primary-soft))} .recharge-category-tabs{margin:0;display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;overflow-y:hidden;max-height:43px;padding:2px 1px 4px!important;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-inline:contain;transition:max-height .34s var(--ease)} .recharge-category-tabs::-webkit-scrollbar{display:none} .recharge-cat{flex:0 0 auto;max-width:none;white-space:nowrap} .recharge-category-shell.expanded .recharge-category-tabs{flex-wrap:wrap;overflow:visible;max-height:420px;padding-bottom:6px!important} .recharge-category-toggle{width:100%;height:31px;margin:5px 0 0;padding:0 8px;border:0;border-top:1px solid color-mix(in srgb,var(--border) 90%,transparent);border-radius:0 0 10px 10px;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:0.672rem;font-weight:800;letter-spacing:.01em;transition:color .2s var(--ease),background .2s var(--ease)} .recharge-category-toggle i{font-size:0.686rem;color:var(--primary);transition:transform .32s var(--ease)} .recharge-category-toggle:active{background:var(--primary-soft);color:var(--primary)} .recharge-category-shell.expanded .recharge-category-toggle i{transform:rotate(180deg)} .recharge-plan-toolbar{padding-bottom:12px} /* Recharge history detail emphasis + immutable plan snapshot */ .recharge-result-card.history-detail .recharge-result-icon{margin-bottom:9px} .recharge-detail-amount{font-size:1.84rem;line-height:1.05;font-weight:950;letter-spacing:-.035em;color:var(--text);margin:5px 0 15px} .recharge-detail-plan{margin-top:11px;padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2);text-align:left} .recharge-detail-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px} .recharge-detail-plan-head>span{font-size:0.678rem;font-weight:900;text-transform:uppercase;letter-spacing:.035em;color:var(--text-muted)} .recharge-detail-plan-head>div{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px} .recharge-detail-plan-head>div span{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:0.662rem;font-weight:800} .recharge-detail-plan p{margin:0;color:var(--text);font-size:.7rem;line-height:1.55;white-space:pre-line} .recharge-detail-plan p a{word-break:break-all} @media(max-width:390px){.recharge-category-shell.expanded .recharge-category-tabs{max-height:380px}.recharge-cat{font-size:0.678rem;padding:7px 10px}.recharge-detail-amount{font-size:1.58rem}.recharge-detail-plan{padding:12px}} @media(prefers-reduced-motion:reduce){.recharge-category-shell,.recharge-category-tabs,.recharge-category-toggle,.recharge-category-toggle i{transition:none!important}} /* v217 · compact source marker for Gateway API recharge history rows. */ .recharge-history-copy .recharge-history-meta{display:flex;align-items:center;gap:6px;min-width:0;white-space:normal;overflow:visible} .recharge-history-meta>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .recharge-api-badge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:3px 6px;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:0.654rem;font-style:normal;font-weight:850;line-height:1} .recharge-api-badge i{font-size:0.646rem} /* ---- google_play.css ---- */ /* ================= GOOGLE PLAY REDEEM CODE ================= */ .gp-page{padding-bottom:8px}.gp-page>*{animation:gpRise .42s var(--ease) both}.gp-page>*:nth-child(2){animation-delay:.05s}.gp-page>*:nth-child(3){animation-delay:.1s}@keyframes gpRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .gp-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:13px;padding:18px 16px;margin-bottom:14px;border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface));box-shadow:0 18px 42px -34px var(--text)} .gp-hero:after{content:"";position:absolute;z-index:-1;width:150px;height:150px;border-radius:999px;right:-62px;top:-76px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 22%,transparent),transparent 68%)} .gp-hero-mark{width:52px;height:52px;flex:none;border-radius:17px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.28rem;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border))}.gp-hero-copy{min-width:0;flex:1}.gp-hero-copy>span{display:block;font-size:0.654rem;font-weight:900;letter-spacing:.12em;color:var(--primary)}.gp-hero h1{font-size:1.15rem;line-height:1.12;letter-spacing:-.025em;margin:3px 0 0}.gp-hero p{font-size:0.676rem;line-height:1.45;color:var(--text-muted);margin-top:5px;max-width:310px}.gp-secure{align-self:flex-start;display:flex;align-items:center;gap:4px;white-space:nowrap;padding:6px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:0.65rem;font-weight:850;color:var(--text-muted)}.gp-secure i{color:var(--primary)} .gp-buy-card,.gp-history-card{margin-bottom:14px;border-color:color-mix(in srgb,var(--primary) 9%,var(--border));box-shadow:0 16px 36px -34px var(--text)}.gp-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.gp-section-title{font-size:.84rem;font-weight:850}.gp-balance{flex:none}.gp-balance b{margin-top:0} .gp-amount-wrap{height:82px;border-radius:16px;background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;padding:0 16px;transition:border-color .2s,box-shadow .2s,transform .18s var(--ease)}.gp-amount-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}.gp-amount-wrap.picked{transform:scale(.985)}.gp-currency{font-size:1.85rem;font-weight:800;color:var(--primary);margin-right:9px}.gp-amount-wrap input{min-width:0;flex:1;background:transparent;border:0;outline:0;font-family:inherit;font-size:2.15rem;font-weight:800;line-height:1;color:var(--text);letter-spacing:-.035em;font-variant-numeric:tabular-nums}.gp-amount-wrap input::placeholder{color:var(--text-muted);opacity:.4}.gp-inr{font-size:0.682rem;font-weight:850;color:var(--text-muted);letter-spacing:.07em} .gp-quick-amounts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.gp-amount-tile,.gp-amount-skeleton{min-height:54px;border-radius:13px;border:1px solid var(--border);background:var(--surface-2)}.gp-amount-tile{display:grid;place-items:center;color:var(--text);font-weight:800;font-size:.76rem;transition:transform .15s var(--ease),background .2s,border-color .2s,color .2s}.gp-amount-tile:active{transform:scale(.94)}.gp-amount-tile.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark)}.gp-amount-skeleton{animation:gpSkel 1.1s ease infinite alternate}@keyframes gpSkel{to{opacity:.45}} .gp-account-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 0;padding:11px 12px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border)}.gp-account-row span{display:flex;align-items:center;gap:7px;font-size:0.668rem;color:var(--text-muted)}.gp-account-row span i{color:var(--primary)}.gp-account-row b{font-size:0.682rem;white-space:nowrap}.gp-amount-error{margin:9px 2px -2px;color:var(--danger);font-size:0.686rem;font-weight:750;line-height:1.4}.gp-amount-error[hidden]{display:none}.gp-buy-button{width:100%;min-height:54px;margin-top:13px;display:flex;align-items:center;justify-content:center;gap:8px}.gp-buy-button:disabled{opacity:.54}.gp-safe-note{display:flex;align-items:flex-start;gap:7px;margin:10px 3px 0;font-size:0.662rem;line-height:1.45;color:var(--text-muted)}.gp-safe-note i{color:var(--primary);margin-top:1px} .gp-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.gp-history-head>span{display:flex;align-items:center;gap:10px}.gp-history-head>span>i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.gp-history-head>span>span{display:flex;flex-direction:column}.gp-history-head b{font-size:.8rem}.gp-history-head small{font-size:0.668rem;color:var(--text-muted);margin-top:2px}.gp-history-head>button{width:36px;height:36px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);display:grid;place-items:center}.gp-history-list{margin-top:12px}.gp-history-loading,.gp-history-empty{padding:18px 8px;text-align:center;color:var(--text-muted);font-size:0.684rem}.gp-history-empty i{display:block;font-size:1.25rem;color:var(--primary);margin-bottom:7px}.gp-history-empty b{display:block;color:var(--text);font-size:.76rem}.gp-history-empty p{margin-top:4px;font-size:0.672rem}.gp-history-item{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 1px;border:0;border-top:1px dashed color-mix(in srgb,var(--border) 80%,transparent);background:transparent;color:var(--text);text-align:left}.gp-history-item:first-child{border-top:0}.gp-history-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.95rem}.gp-history-copy{min-width:0;display:flex;flex-direction:column}.gp-history-copy>b{font-size:.74rem}.gp-history-copy>small{font-size:0.66rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gp-history-copy>span{font-size:0.666rem;color:var(--text-muted);margin-top:2px}.gp-history-right{display:flex;align-items:center;gap:8px}.gp-history-value{display:flex;flex-direction:column;align-items:flex-end}.gp-history-value>b{font-size:.72rem}.gp-status{margin-top:3px;padding:3px 6px;border-radius:999px;font-size:0.642rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;background:var(--surface-2);color:var(--text-muted)}.gp-status.success{background:color-mix(in srgb,#16a34a 14%,var(--surface));color:#16a34a}.gp-status.failed,.gp-status.refunded{background:color-mix(in srgb,#dc2626 13%,var(--surface));color:#dc2626}.gp-status.processing,.gp-status.pending{background:color-mix(in srgb,#f59e0b 15%,var(--surface));color:#d97706}.gp-history-right>i{font-size:0.666rem;color:var(--text-muted)} .gp-confirm-head{display:flex;align-items:center;gap:12px;padding:13px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:12px}.gp-confirm-logo{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.05rem;flex:none}.gp-confirm-head>div{min-width:0;flex:1;display:flex;flex-direction:column}.gp-confirm-head small{font-size:0.66rem;color:var(--text-muted)}.gp-confirm-head b{font-size:.82rem;margin-top:2px}.gp-confirm-head strong{font-size:1rem;color:var(--primary)}.gp-summary{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}.gp-summary .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--border)}.gp-summary .row:first-child{border-top:0}.gp-summary .row span{font-size:0.672rem;color:var(--text-muted)}.gp-summary .row b{font-size:0.68rem;text-align:right;max-width:65%;overflow-wrap:anywhere}.gp-confirm-note{display:flex;gap:8px;padding:10px 11px;margin:11px 0;border-radius:12px;background:var(--primary-soft);color:var(--text-muted);font-size:0.67rem;line-height:1.45}.gp-confirm-note i{color:var(--primary);margin-top:1px}.gp-confirm-btn{width:100%;min-height:52px} .gp-result{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 2px 2px}.gp-result-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:11px;background:var(--surface-2);color:var(--text-muted)}.gp-result.success .gp-result-icon{background:color-mix(in srgb,#16a34a 13%,var(--surface));color:#16a34a}.gp-result.failed .gp-result-icon,.gp-result.refunded .gp-result-icon{background:color-mix(in srgb,#dc2626 12%,var(--surface));color:#dc2626}.gp-result.processing .gp-result-icon,.gp-result.pending .gp-result-icon{background:color-mix(in srgb,#f59e0b 14%,var(--surface));color:#d97706}.gp-result-icon.spin i{animation:gpSpin .9s linear infinite}@keyframes gpSpin{to{transform:rotate(360deg)}}.gp-result h3{font-size:1rem}.gp-result>p{max-width:315px;margin-top:5px;font-size:0.682rem;line-height:1.5;color:var(--text-muted)}.gp-result-amount{font-size:1.55rem;font-weight:850;letter-spacing:-.035em;margin:11px 0;color:var(--text)}.gp-code-card{width:100%;margin:1px 0 12px;padding:13px;border-radius:16px;background:linear-gradient(145deg,var(--primary-soft),var(--surface));border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));text-align:left}.gp-code-card>small{font-size:0.656rem;font-weight:850;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase}.gp-code-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:6px}.gp-code-line code{display:block;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem;font-weight:850;letter-spacing:.055em;overflow-wrap:anywhere;color:var(--text)}.gp-copy{width:38px;height:38px;border-radius:11px;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));background:var(--surface);color:var(--primary);display:grid;place-items:center}.gp-result .gp-summary{width:100%;text-align:left}.gp-result-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px;margin-top:13px}.gp-result-actions.two{grid-template-columns:1fr 1fr} @media(max-width:390px){.gp-hero{padding:15px 13px;gap:10px}.gp-hero-mark{width:46px;height:46px;border-radius:14px}.gp-hero h1{font-size:1.02rem}.gp-secure{font-size:0.64rem;padding:5px 6px}.gp-quick-amounts{gap:6px}.gp-amount-tile{font-size:.7rem}.gp-account-row{padding:10px}.gp-result-actions.two{grid-template-columns:1fr}} /* v156 — align Google Play with the established Mobile Recharge FINZO language. */ .gp-page-heading{margin-bottom:0} .gp-buy-card{margin-top:7px} .gp-buy-button{margin-top:16px} /* History typography and refresh feedback. */ .gp-history-head b{font-size:.86rem}.gp-history-head small{font-size:.7rem}.gp-history-refresh{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);display:grid;place-items:center;transition:color .2s,background .2s,transform .18s var(--ease)} .gp-history-refresh.is-loading i{animation:gpSpin .75s linear infinite}.gp-history-refresh.is-loading{color:var(--primary);background:var(--primary-soft)} .gp-history-item{padding:14px 3px;border-top:0;border-bottom:1px solid var(--border)}.gp-history-item:last-child{border-bottom:0}.gp-history-icon{width:42px;height:42px;border-radius:12px;font-size:1rem}.gp-history-copy>b{font-size:.86rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gp-history-copy>small{font-size:0.686rem;margin-top:4px}.gp-history-copy>span{display:none}.gp-history-value>b{font-size:.82rem}.gp-status{font-size:0.658rem;padding:3px 6px;text-transform:capitalize;letter-spacing:0}.gp-history-right>i{font-size:.7rem} /* Confirmation follows Mobile Recharge rather than a decorative promo-card treatment. */ .gp-confirm{font-size:.78rem}.gp-confirm-purchase{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0 15px;border-bottom:1px solid var(--border);margin-bottom:12px}.gp-confirm-play{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.25rem}.gp-confirm-copy{min-width:0;display:flex;flex-direction:column}.gp-confirm-copy small{font-size:0.686rem;color:var(--text-muted)}.gp-confirm-copy b{font-size:.92rem;line-height:1.2;margin-top:1px}.gp-confirm-copy span{font-size:0.684rem;line-height:1.35;color:var(--text-muted);margin-top:3px}.gp-confirm-purchase>strong{font-size:1.08rem;color:var(--primary);white-space:nowrap}.gp-confirm-summary{margin-bottom:14px}.gp-summary .row{padding:11px 12px}.gp-summary .row span{font-size:.72rem}.gp-summary .row b{font-size:.76rem}.gp-confirm-btn{min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px} /* Processing / final states: clean FINZO status sheet. Only the glyph spins. */ .gp-result{align-items:stretch;text-align:center;padding:5px 0 2px}.gp-result-icon{width:64px;height:64px;border-radius:22px;margin:0 auto 12px;font-size:1.55rem}.gp-spinner{display:inline-block;animation:gpSpin .9s linear infinite}.gp-result-copy h3{font-size:1.05rem;margin:0}.gp-result-copy p{font-size:.72rem;line-height:1.55;color:var(--text-muted);max-width:300px;margin:5px auto 13px}.gp-result-amount{font-size:1.82rem;line-height:1.05;font-weight:900;margin:3px 0 15px}.gp-result.success .gp-result-icon{background:var(--success-soft);color:var(--success)}.gp-result.failed .gp-result-icon,.gp-result.refunded .gp-result-icon{background:var(--danger-soft);color:var(--danger)}.gp-result.processing .gp-result-icon,.gp-result.pending .gp-result-icon{background:var(--warning-soft);color:var(--warning)} .gp-code-card{width:100%;margin:0 0 12px;padding:13px;border-radius:15px;background:var(--surface-2);border:1px solid var(--border);text-align:left}.gp-code-card>span{display:block;font-size:0.686rem;font-weight:850;color:var(--text-muted)}.gp-code-line{margin-top:7px}.gp-code-line code{font-size:.94rem;letter-spacing:.04em}.gp-copy{width:40px;height:40px;border-radius:11px}.gp-result-actions{margin-top:14px}.gp-result-actions .btn{min-height:48px}.gp-result.history-detail .gp-result-icon{margin-bottom:9px} @media(max-width:390px){.gp-history-copy>b{font-size:.8rem}.gp-history-copy>small{font-size:0.678rem}.gp-confirm-purchase{gap:10px}.gp-confirm-play{width:44px;height:44px}.gp-confirm-copy b{font-size:.86rem}.gp-confirm-purchase>strong{font-size:1rem}.gp-result-amount{font-size:1.58rem}} @media(prefers-reduced-motion:reduce){.gp-history-refresh.is-loading i,.gp-spinner{animation:none!important}} /* v217 · compact source marker for Gateway API Google Play history rows. */ .gp-history-copy>.gp-history-meta{display:flex;align-items:center;gap:6px;min-width:0;white-space:normal;overflow:visible} .gp-history-meta>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gp-api-badge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:3px 6px;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:0.654rem;font-style:normal;font-weight:850;line-height:1} .gp-api-badge i{font-size:0.646rem} /* ---- landing.css ---- */ /* ============ FINZO WALLET — compact public landing + shared public footer ============ */ .main.landing-main{padding:0;min-height:100vh;min-height:100dvh;overflow:hidden} .main.auth-main{padding-bottom:0} .landing-page{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;color:var(--text);isolation:isolate} .landing-ambient{position:absolute;inset:0 0 auto;height:620px;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 7%,var(--bg)),transparent 82%)} .landing-ambient span{position:absolute;border-radius:50%;filter:blur(2px);opacity:.72;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 38%,#fff),color-mix(in srgb,var(--primary-dark) 26%,transparent));animation:landingDrift 8s ease-in-out infinite alternate} .landing-ambient span:nth-child(1){width:230px;height:230px;top:-105px;right:-90px;opacity:.18} .landing-ambient span:nth-child(2){width:170px;height:170px;top:260px;left:-120px;opacity:.13;animation-delay:-2.4s} .landing-ambient span:nth-child(3){width:12px;height:12px;top:112px;left:17%;opacity:.45;box-shadow:120px 60px 0 4px color-mix(in srgb,var(--primary) 18%,transparent),260px 175px 0 2px color-mix(in srgb,var(--primary) 25%,transparent);animation-duration:5.5s} @keyframes landingDrift{to{transform:translate3d(18px,24px,0) scale(1.06)}} .landing-nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 8px} .landing-brand{display:flex;align-items:center;gap:9px;min-width:0}.landing-brand img{width:38px;height:38px;border-radius:12px;box-shadow:0 10px 26px -15px var(--primary)}.landing-brand b{font-size:.88rem;letter-spacing:-.02em;white-space:nowrap} .landing-support{min-height:38px;padding:0 13px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--primary);box-shadow:var(--shadow-sm);font-size:.69rem;font-weight:850;white-space:nowrap}.landing-support i{font-size:.82rem} .landing-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding:46px 18px 28px;align-items:center} .landing-copy{position:relative;z-index:2;text-align:center}.landing-copy h1{max-width:560px;margin:0 auto;font-size:clamp(2rem,8.7vw,3.65rem);line-height:1.04;letter-spacing:-.055em;font-weight:900}.landing-copy h1 span{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.landing-copy>p{max-width:520px;margin:15px auto 0;color:var(--text-muted);font-size:.82rem;line-height:1.75;font-weight:550} .landing-cta-row{width:min(100%,520px);margin:22px auto 0}.landing-primary-cta{width:100%;min-height:50px;border-radius:15px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--grad);color:#fff;font-size:.74rem;font-weight:900;box-shadow:0 16px 32px -18px var(--primary),inset 0 1px 0 rgba(255,255,255,.32);transition:transform .18s var(--ease),box-shadow .18s}.landing-primary-cta:active{transform:translateY(2px);box-shadow:0 9px 20px -16px var(--primary)}.landing-primary-cta i{font-size:0.672rem} .landing-visual{position:relative;width:min(100%,420px);height:250px;margin:0 auto}.landing-glow{position:absolute;left:50%;top:48%;width:250px;height:180px;border-radius:50%;background:color-mix(in srgb,var(--primary) 23%,transparent);filter:blur(46px);transform:translate(-50%,-50%);opacity:.58} .landing-wallet-card{position:absolute;left:50%;top:50%;width:min(86%,330px);min-height:184px;padding:20px;border-radius:27px;overflow:hidden;transform:translate(-50%,-50%) rotate(-2deg);background:var(--grad);color:#fff;box-shadow:0 30px 62px -30px var(--primary);animation:landingCardFloat 4.8s ease-in-out infinite}.landing-wallet-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-58px;top:-65px;background:rgba(255,255,255,.12)} .landing-wallet-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;font-size:0.684rem;font-weight:850}.landing-wallet-brand{display:flex;align-items:center;gap:8px}.landing-wallet-brand img{width:25px;height:25px;border-radius:8px;object-fit:cover;background:#fff;box-shadow:0 7px 16px -10px rgba(0,0,0,.6)}.landing-wallet-brand b{font-size:0.682rem;letter-spacing:-.01em}.landing-wallet-card>small{position:relative;z-index:2;display:block;margin-top:19px;font-size:0.65rem;letter-spacing:.13em;color:rgba(255,255,255,.72);font-weight:850} .landing-wallet-core{position:relative;z-index:2;display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}.landing-wallet-core span{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:900;letter-spacing:-.02em}.landing-wallet-core span+span:before{content:"";width:3px;height:3px;border-radius:50%;margin-right:1px;background:rgba(255,255,255,.5)}.landing-wallet-core i{font-size:0.672rem;color:rgba(255,255,255,.9)} .landing-wallet-actions{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:18px}.landing-wallet-actions span{min-height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.14);font-size:0.658rem;font-weight:850;backdrop-filter:blur(8px);text-align:center}.landing-wallet-actions i{font-size:0.666rem} @keyframes landingCardFloat{50%{transform:translate(-50%,-54%) rotate(1deg)}} .landing-float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:15px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid color-mix(in srgb,var(--primary) 13%,var(--border));box-shadow:0 15px 35px -25px rgba(0,0,0,.65);backdrop-filter:blur(12px);animation:landingMiniFloat 4.2s ease-in-out infinite alternate}.landing-float-card>span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.landing-float-card div{display:flex;flex-direction:column}.landing-float-card small{font-size:0.646rem;color:var(--text-muted);font-weight:700}.landing-float-card b{font-size:0.674rem}.landing-float-one{left:1%;top:18px}.landing-float-two{right:0;bottom:12px;animation-delay:-1.6s}@keyframes landingMiniFloat{to{transform:translateY(-9px)}} .landing-feature-story{padding:3px 18px 34px;max-width:760px;margin:0 auto}.landing-feature-intro{text-align:center;max-width:570px;margin:0 auto 17px}.landing-feature-intro>span{font-size:0.648rem;letter-spacing:.12em;font-weight:900;color:var(--primary)}.landing-feature-intro h2{margin:5px 0 0;font-size:1.18rem;line-height:1.25;letter-spacing:-.035em;font-weight:900}.landing-feature-intro p{margin:7px auto 0;max-width:520px;color:var(--text-muted);font-size:0.678rem;line-height:1.65;font-weight:550} .landing-feature-list{display:grid;grid-template-columns:1fr;gap:0}.landing-feature-list article{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:flex-start;padding:13px 2px;border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent)}.landing-feature-list article:last-child{border-bottom:0}.landing-feature-list article>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.74rem}.landing-feature-list article>div{min-width:0}.landing-feature-list b{display:block;font-size:.71rem;line-height:1.35}.landing-feature-list p{margin:4px 0 0;color:var(--text-muted);font-size:0.664rem;line-height:1.62;font-weight:550} /* Bottom access row: a clear final action before the public footer. */ .landing-bottom-actions{width:min(calc(100% - 36px),724px);margin:2px auto 22px;padding-top:5px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.landing-bottom-btn{min-height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:0.684rem;font-weight:900;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}.landing-bottom-btn:active{transform:translateY(1px) scale(.985)}.landing-bottom-login{border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border));background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.landing-bottom-download{background:var(--grad);color:#fff;box-shadow:0 15px 30px -18px var(--primary)}.landing-bottom-download>i{font-size:1rem;line-height:1;flex:none} /* Shared public footer: compact support-first layout. */ .public-site-footer{position:relative;margin:18px -18px 0;overflow:hidden;background:linear-gradient(145deg,#18152a 0%,#21183b 52%,#171929 100%);border-top:1px solid rgba(255,255,255,.08);color:#fff}.landing-page>.public-site-footer{margin:0}.public-site-footer:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-105px;top:-120px;background:rgba(124,92,255,.15);pointer-events:none}.public-footer-accent{height:4px;background:linear-gradient(90deg,#7c5cff,#a071ff,#6b7cff)}.public-footer-inner{position:relative;z-index:1;padding:20px 18px calc(22px + var(--safe-b));max-width:620px;margin:0 auto}.public-footer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.public-footer-brand{display:flex;align-items:center;gap:10px;min-width:0}.public-footer-brand img{width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 12px 28px -17px rgba(124,92,255,.9)}.public-footer-brand>div{display:flex;min-width:0;flex-direction:column;gap:2px}.public-footer-brand b{font-size:.8rem;letter-spacing:-.02em;color:#fff}.public-footer-brand span{font-size:0.65rem;color:rgba(255,255,255,.6);line-height:1.4}.public-footer-web{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);color:#fff;font-size:0.656rem;font-weight:800}.public-footer-web i{color:#b6a8ff} .public-footer-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-top:14px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035)}.public-footer-contact{width:100%;min-width:0;min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px;border-radius:11px;background:rgba(255,255,255,.045);color:#fff;text-align:left}.public-footer-contact-email{grid-column:1/-1}.public-footer-contact-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(124,92,255,.16);color:#c6baff;font-size:0.682rem}.public-footer-contact>span:nth-child(2){display:flex;min-width:0;flex-direction:column;gap:1px}.public-footer-contact small{font-size:0.628rem;color:rgba(255,255,255,.46);letter-spacing:.07em;font-weight:900}.public-footer-contact b{font-size:0.658rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-footer-contact>i{font-size:0.646rem;color:#b8a9ff}.public-footer-support{font:inherit;cursor:pointer}.public-footer-contact:active{background:rgba(255,255,255,.075)}.public-footer-legal{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08)}.public-footer-legal button{color:rgba(255,255,255,.68);font-size:0.65rem;font-weight:750}.public-footer-legal span{color:rgba(255,255,255,.22);font-size:0.656rem}.public-footer-note{text-align:center;margin-top:9px;color:rgba(255,255,255,.42);font-size:0.638rem;font-weight:650;line-height:1.5} @media(min-width:560px){.landing-hero{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);padding:60px 26px 34px}.landing-copy{text-align:left}.landing-copy h1,.landing-copy>p{margin-left:0;margin-right:0}.landing-cta-row{margin-left:0;margin-right:0}.landing-feature-story{padding-left:26px;padding-right:26px}.landing-feature-intro{text-align:left;margin-left:0}.landing-feature-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}.landing-feature-list article:nth-last-child(-n+2){border-bottom:0}.landing-feature-list article:last-child{grid-column:1/-1;max-width:calc(50% - 13px)}.landing-nav{padding-left:26px;padding-right:26px}.public-footer-contact-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.8fr)}.public-footer-contact-email{grid-column:auto}.landing-page>.public-site-footer .public-footer-inner{max-width:820px}} @media(max-width:339px){.landing-bottom-actions{width:calc(100% - 30px);gap:8px}.landing-bottom-btn{font-size:0.672rem}.landing-brand b{font-size:.77rem}.landing-hero{padding-top:38px}.landing-visual{height:230px}.landing-wallet-card{width:90%;padding:18px}.landing-wallet-actions span{font-size:0.65rem}.landing-float-one{left:-3px}.landing-float-two{right:-3px}.public-footer-inner{padding-left:15px;padding-right:15px}.public-footer-top{align-items:flex-start;flex-direction:column}.public-footer-web{min-height:30px}.public-footer-contact-grid{grid-template-columns:1fr}.public-footer-contact-email{grid-column:auto}} @media(prefers-reduced-motion:reduce){.landing-ambient span,.landing-wallet-card,.landing-float-card{animation:none!important}} /* ================= RESPONSIVE LANDING SAFETY ================= */ .landing-main,.landing-main>*{min-width:0} @media(max-width:339px){ .landing-hero,.landing-feature-story,.landing-company,.public-footer-inner{padding-left:14px;padding-right:14px} .landing-cta-row{gap:8px} } /* ================= v2026.09.13.47 · PUBLIC PAGE READABILITY ================= */ .landing-wallet-card>small,.landing-wallet-actions span,.landing-float-card small,.landing-feature-intro>span,.landing-feature-intro p,.landing-feature-list p,.public-footer-brand span,.public-footer-web,.public-footer-contact small,.public-footer-contact b,.public-footer-legal button,.public-footer-legal span,.public-footer-note,.landing-bottom-btn{font-size:.7rem} .landing-float-card b{font-size:.74rem} /* ========================================================================== FINZO WALLET — selective old-theme polish Keeps the original stable UI/interaction model. Only ports the requested tactile icon depth, public footer treatment, and bottom-nav OUTER tray. ========================================================================== */ :root{ --finzo-icon-depth: 0 10px 18px -12px color-mix(in srgb,var(--primary) 58%,rgba(20,28,58,.42)), 0 3px 8px -6px rgba(20,28,58,.22), inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 color-mix(in srgb,var(--primary) 12%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--primary) 11%,var(--border)); --finzo-icon-depth-soft: 0 8px 15px -11px color-mix(in srgb,var(--primary) 50%,rgba(20,28,58,.36)), 0 2px 6px -5px rgba(20,28,58,.18), inset 0 1px 0 rgba(255,255,255,.88), inset 0 0 0 1px color-mix(in srgb,var(--primary) 10%,var(--border)); } [data-theme="dark"]{ --finzo-icon-depth: 0 11px 20px -12px color-mix(in srgb,var(--primary) 42%,rgba(0,0,0,.76)), 0 3px 9px -5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.14), inset 0 0 0 1px color-mix(in srgb,var(--primary) 12%,var(--border)); --finzo-icon-depth-soft: 0 9px 17px -11px color-mix(in srgb,var(--primary) 36%,rgba(0,0,0,.68)), 0 2px 7px -5px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.065), inset 0 0 0 1px color-mix(in srgb,var(--primary) 10%,var(--border)); } /* ---------- Deep tactile icon boxes, without changing their behaviour ---------- */ .icon-btn, .set-row .sic, .home-action .ha-icon, .home-tile .ht-icon, .service .sic, .home-layout-10 .home-pro-link-icon, .earn-tile-icon, .milestone-history-icon, .video-task-guide-toggle-icon, .timewall-guide-icon, .af-method-icon, .af-hero-icon, .af-upload-icon, .af-review-icon, .af-history-title>i, .af-history-ic, .wd-icon, .wd-preview-icon, .wd-method-icon, .wd-review-method-icon, .fm-icon, .fm-tx-detail-icon, .wm-request-icon, .wm-approve-proof-icon, .tgpm-heading-icon, .tgpm-hero-icon, .tgpm-time-icon, .ytsf-heading-icon, .ytsf-control-icon, .ytsf-search-btn-icon, .ytsf-generate-icon, .ytsf-video-task-icon, .claim-all-number-icon, .claim-all-warn-icon, .cas-toggle-icon, .claim-all-batch-panel-icon, .cah-icon, .profile-name-gate-icon, .nt-intro-icon, .nt-collection-icon, .lfd-hero-icon, .lfd-toggle-icon, .lf-history-link-icon, .two-step-hero-icon, .tg-alert-avatar, .tg-alert-connect-icon, .tg-alert-mini-icon, .gateway-api-hero-icon, .notification-icon, .notification-empty-icon, .legal-support-icon, .network-offline-icon, .login-2fa-icon, .scheduled-maintenance-icon, .sidebar-download-icon, .support-contact-icon, .maintenance-eta-icon, .free-lf-type-icon{ box-shadow:var(--finzo-icon-depth)!important; } /* Generic primary icon boxes get the same subtle raised face used by the app-look theme. Semantic success/warning/danger/crypto boxes keep their original colours and only receive the depth treatment above. */ .icon-btn, .set-row .sic:not([style*="danger-soft"]), .home-action:not(.is-accent) .ha-icon, .home-tile:not(.is-primary) .ht-icon, .service .sic, .earn-tile:not(.earn-tile-more) .earn-tile-icon, .home-layout-10 .home-pro-link-icon, .nt-intro-icon, .nt-collection-icon, .claim-all-number-icon, .lf-history-link-icon, .profile-name-gate-icon, .tgpm-heading-icon, .tgpm-time-icon, .ytsf-heading-icon, .ytsf-control-icon{ background:linear-gradient(145deg, color-mix(in srgb,var(--primary) 14%,var(--surface)), color-mix(in srgb,var(--primary) 5%,var(--surface-2)))!important; color:var(--primary)!important; } /* Keep white/accent icon faces readable when their parent is already a gradient/accent card. */ .home-action.is-accent .ha-icon, .home-tile.is-primary .ht-icon{ box-shadow:0 10px 18px -12px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.14)!important; } /* Small icon surfaces should feel raised too, but stay visually lighter. */ .public-footer-contact-icon, .af-history-arrow{ box-shadow:var(--finzo-icon-depth-soft)!important; } /* ---------- Bottom navbar: new-theme OUTER tray only ---------- Intentionally no .nav-item / .nav-earn / .earn-orb overrides here. */ .bottomnav{ width:min(calc(var(--app-w) - 24px),calc(100vw - 24px))!important; background:linear-gradient(155deg, color-mix(in srgb,var(--surface) 97%,transparent), color-mix(in srgb,var(--surface-2) 94%,transparent))!important; border:1px solid color-mix(in srgb,var(--primary) 10%,var(--border))!important; border-radius:25px!important; box-shadow: 0 20px 38px -22px rgba(13,22,52,.55), 0 5px 13px -8px rgba(13,22,52,.28), inset 0 1px 0 rgba(255,255,255,.92)!important; backdrop-filter:blur(20px) saturate(1.22); -webkit-backdrop-filter:blur(20px) saturate(1.22); } [data-theme="dark"] .bottomnav{ box-shadow: 0 22px 42px -22px rgba(0,0,0,.82), 0 5px 14px -8px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.07)!important; } /* ---------- Public footer: port the app-look footer, no top accent strip ---------- */ .public-footer-accent{display:none!important;height:0!important} .public-site-footer{ background:linear-gradient(145deg, #171827 0%, color-mix(in srgb,var(--primary) 18%,#1c1b31) 52%, #151824 100%)!important; color:#fff!important; border:1px solid rgba(255,255,255,.09)!important; border-bottom:0!important; border-top:0!important; border-radius:26px 26px 0 0!important; box-shadow:0 -18px 42px -32px rgba(15,20,40,.56),inset 0 1px 0 rgba(255,255,255,.07)!important; } .public-site-footer .public-footer-brand img{ box-shadow:0 12px 24px -14px color-mix(in srgb,var(--primary) 68%,#000 32%),inset 0 0 0 1px rgba(255,255,255,.34)!important; } .public-site-footer .public-footer-contact-grid{ border-color:rgba(255,255,255,.09)!important; background:rgba(255,255,255,.035)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important; } .public-site-footer .public-footer-contact-grid>a, .public-site-footer .public-footer-contact-grid>button, .public-site-footer .public-footer-web{ background:rgba(255,255,255,.055)!important; color:#fff!important; border-color:rgba(255,255,255,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 7px 16px -15px rgba(0,0,0,.75)!important; } .public-site-footer .public-footer-contact-grid>a:active, .public-site-footer .public-footer-contact-grid>button:active{ background:rgba(255,255,255,.09)!important; } .public-site-footer .public-footer-contact-icon{ background:color-mix(in srgb,var(--primary) 24%,rgba(255,255,255,.06))!important; color:color-mix(in srgb,var(--primary) 36%,#fff)!important; box-shadow:0 8px 15px -10px color-mix(in srgb,var(--primary) 72%,#000 28%),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.06)!important; } .public-site-footer .public-footer-brand b, .public-site-footer .public-footer-contact b{color:#fff!important} .public-site-footer .public-footer-legal{ border-top-color:rgba(255,255,255,.09)!important; } @media(max-width:480px){ .public-site-footer .public-footer-top{align-items:flex-start;flex-direction:column} .public-site-footer .public-footer-web{width:100%;justify-content:center} .public-site-footer .public-footer-contact-grid{grid-template-columns:1fr} .public-site-footer .public-footer-contact-email{grid-column:auto} } /* ========================================================================== FINZO WALLET — requested selective polish v2026.09.15.62 Old stable theme remains intact; only requested visual refinements live here. ========================================================================== */ :root{ --finzo-raised-face:linear-gradient(145deg,var(--surface),var(--surface-2)); --finzo-raised-border:color-mix(in srgb,var(--primary) 11%,var(--border)); --finzo-raised-shadow: 0 10px 20px -14px rgba(21,31,64,.38), 0 3px 8px -6px rgba(21,31,64,.18), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 color-mix(in srgb,var(--primary) 7%,transparent); --finzo-pressed-shadow:inset 0 2px 5px rgba(34,45,80,.10),inset 0 -1px 0 rgba(255,255,255,.72); } [data-theme="dark"]{ --finzo-raised-shadow: 0 11px 21px -13px rgba(0,0,0,.72), 0 3px 9px -6px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.16); --finzo-pressed-shadow:inset 0 2px 6px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025); } /* Settings list icons: force a true square footprint at every phone width. */ .settings-group .set-row .sic{ width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; flex:0 0 42px!important; aspect-ratio:1/1!important; border-radius:13px!important; } @media(max-width:339px){ .settings-group .set-row .sic{ width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex-basis:40px!important; } } /* Restore the real service tint from the stable old Home theme. */ .service-grid.services-soft .sic{ background:var(--grad-soft)!important; border-color:transparent!important; color:var(--primary)!important; } /* Brand colours for the two creator-tool heading icons. */ .ytsf-heading-icon{ background:linear-gradient(145deg,#ff3131,#d90000)!important; color:#fff!important; border-color:rgba(255,255,255,.34)!important; box-shadow:0 12px 22px -15px rgba(229,0,0,.72),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(100,0,0,.16)!important; } .tgpm-heading-icon{ background:linear-gradient(145deg,#2aabee,#168dcc)!important; color:#fff!important; border-color:rgba(255,255,255,.34)!important; box-shadow:0 12px 22px -15px rgba(34,158,217,.78),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,80,120,.16)!important; } /* Login mobile field: a little taller without changing auth logic. */ #li-mobile{ min-height:54px!important; height:54px!important; border-radius:15px!important; font-size:.94rem; } /* Tactile button language from the app-look experiment, limited to actual action buttons so tabs, payout-method switches and dynamic controls keep the stable old-theme behaviour. */ .btn, .auth-btn, .landing-support, .landing-primary-cta, .landing-bottom-btn, .support-label-btn, .claim-all-save-btn, .claim-all-refresh, .tgpm-continue, .tgpm-create-btn, .tgpm-post-btn, .ytsf-search-btn, .ytsf-generate-btn, .wm-save-range, .maintenance-refresh{ border-radius:16px!important; font-weight:850; transition:transform .14s ease,box-shadow .14s ease,filter .18s ease,background .18s ease!important; } .btn-primary, .landing-primary-cta, .landing-bottom-download, .claim-all-save-btn, .tgpm-continue, .tgpm-create-btn, .tgpm-post-btn, .ytsf-search-btn, .wm-save-range{ background:var(--grad)!important; color:#fff!important; border:1px solid rgba(255,255,255,.18)!important; box-shadow: 0 12px 22px -14px color-mix(in srgb,var(--primary) 84%,#111 16%), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.10)!important; } .btn-primary:active, .landing-primary-cta:active, .landing-bottom-download:active, .claim-all-save-btn:active, .tgpm-continue:active, .tgpm-create-btn:active, .tgpm-post-btn:active, .ytsf-search-btn:active, .wm-save-range:active{ transform:translateY(2px) scale(.985)!important; box-shadow:0 6px 14px -11px color-mix(in srgb,var(--primary) 82%,#111 18%),inset 0 2px 4px rgba(0,0,0,.13)!important; } .btn-soft, .btn-ghost, .auth-btn, .landing-support, .landing-bottom-login, .support-label-btn, .claim-all-refresh, .maintenance-refresh{ background:var(--finzo-raised-face)!important; border:1px solid var(--finzo-raised-border)!important; box-shadow:var(--finzo-raised-shadow)!important; } .btn-soft:active, .btn-ghost:active, .auth-btn:active, .landing-support:active, .landing-bottom-login:active, .support-label-btn:active, .claim-all-refresh:active, .maintenance-refresh:active{ transform:translateY(2px) scale(.985)!important; box-shadow:var(--finzo-pressed-shadow)!important; } /* Add Fund + Withdraw quick amount tiles: raised/inset tactile surfaces only. No layout or selection logic is changed. */ .af-amt-tile, .af-tile-skel{ border-radius:15px!important; background:var(--finzo-raised-face)!important; border:1px solid var(--finzo-raised-border)!important; box-shadow:var(--finzo-raised-shadow)!important; } .af-amt-tile.active{ background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),color-mix(in srgb,var(--primary) 6%,var(--surface-2)))!important; border-color:color-mix(in srgb,var(--primary) 45%,var(--border))!important; color:var(--primary-dark)!important; } .af-amt-tile:active{ transform:translateY(2px) scale(.98)!important; box-shadow:var(--finzo-pressed-shadow)!important; } /* Landing should always occupy the full mobile viewport. A browser Back from Login may restore the Landing fragment inside the same document, so :has() is also a defensive CSS fallback in addition to the router shell sync. */ @media(max-width:719px){ body.route-landing, body:has(#view>.landing-page){--app-w:100vw} body.route-landing>.app, body:has(#view>.landing-page)>.app{ width:100%!important; max-width:100vw!important; border-left:0!important; border-right:0!important; } } body:has(#view>.landing-page) #view{ padding:0!important; min-height:100vh!important; min-height:100dvh!important; overflow:hidden!important; } /* ========================================================================== FINZO WALLET — selective app-surface depth v2026.09.15.63 Visual-only layer on top of the stable old theme. No dynamic layout, transform, show/hide, router or state-control behaviour is overridden. ========================================================================== */ :root{ --finzo-app-card-face:linear-gradient(145deg, color-mix(in srgb,var(--surface) 98%,#fff 2%), color-mix(in srgb,var(--surface-2) 93%,var(--primary) 7%)); --finzo-app-card-border:color-mix(in srgb,var(--primary) 13%,var(--border)); --finzo-app-card-shadow: 0 16px 30px -24px rgba(24,31,62,.46), 0 5px 12px -9px rgba(24,31,62,.20), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 color-mix(in srgb,var(--primary) 7%,transparent); --finzo-app-card-shadow-soft: 0 12px 24px -22px rgba(24,31,62,.38), 0 3px 8px -7px rgba(24,31,62,.16), inset 0 1px 0 rgba(255,255,255,.90); --finzo-app-hero-shadow: 0 24px 44px -28px color-mix(in srgb,var(--primary) 82%,#111 18%), 0 8px 18px -14px rgba(23,28,57,.34), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.10); } [data-theme="dark"]{ --finzo-app-card-face:linear-gradient(145deg, color-mix(in srgb,var(--surface) 96%,var(--primary) 4%), color-mix(in srgb,var(--surface-2) 97%,#000 3%)); --finzo-app-card-border:color-mix(in srgb,var(--primary) 15%,var(--border)); --finzo-app-card-shadow: 0 16px 30px -20px rgba(0,0,0,.78), 0 5px 13px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.20); --finzo-app-card-shadow-soft: 0 12px 24px -18px rgba(0,0,0,.70), 0 3px 9px -7px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055); --finzo-app-hero-shadow: 0 25px 48px -27px rgba(0,0,0,.76), 0 8px 20px -14px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -2px 0 rgba(0,0,0,.18); } /* Settings: profile surface + every options row now shares the same raised, app-like material while retaining all original click targets and spacing. */ .settings-group>.card, .settings-group .set-row{ background:var(--finzo-app-card-face)!important; border-color:var(--finzo-app-card-border)!important; box-shadow:var(--finzo-app-card-shadow)!important; } .settings-group>.card{border-radius:21px!important} .settings-group .set-row{border-radius:18px!important;margin-bottom:11px} .settings-group>.card .acct-card .av{ box-shadow:0 12px 22px -16px rgba(19,27,57,.42),inset 0 0 0 1px rgba(255,255,255,.22)!important; } /* Home action tiles such as Add Fund / Create Lifafa / Pay User and equivalent tiles used by the selectable home layouts. Accent cards keep their colours. */ .home-tile:not(.is-primary), .home-action:not(.is-accent), .qa:not(.accent), .home-profile-surface, .home-earn-history, .home-history-banner, .home-shortcut-pills button{ background:var(--finzo-app-card-face)!important; border-color:var(--finzo-app-card-border)!important; box-shadow:var(--finzo-app-card-shadow)!important; } .home-tile.is-primary, .home-action.is-accent, .qa.accent{ box-shadow:var(--finzo-app-hero-shadow)!important; } /* Create Lifafa type tiles get depth too. Selection colour remains controlled by the original Lifafa CSS; only the physical card feel is enhanced. */ .type-card{ box-shadow:var(--finzo-app-card-shadow-soft)!important; border-color:var(--finzo-app-card-border)!important; } .type-card.sel{ border-color:var(--primary)!important; box-shadow:0 12px 24px -20px color-mix(in srgb,var(--primary) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.24)!important; } /* Toggle rows are intentionally independent mini-cards. No transform, transition, height or overflow override is used here, so expanding fields continue to use the stable old-theme behaviour. */ .toggle-row{ gap:12px!important; padding:13px 14px!important; margin:8px 0!important; border:1px solid var(--finzo-app-card-border)!important; border-radius:16px!important; background:var(--finzo-app-card-face)!important; box-shadow:var(--finzo-app-card-shadow-soft)!important; } .toggle-row:last-child{border-bottom:1px solid var(--finzo-app-card-border)!important} .toggle-row>div:first-child{min-width:0;padding-right:6px} /* History/list cards: same app surface without changing expandable/detail mechanics. Lifafa History is the primary target; common neutral history cards get matching depth for visual consistency across the app. */ .lifafa-item, .pay-history-card, .bulk-history-card, .claim-all-history-card, .free-lf-card, .notification-item{ background:var(--finzo-app-card-face)!important; border-color:var(--finzo-app-card-border)!important; box-shadow:var(--finzo-app-card-shadow)!important; } .lifafa-item{border-radius:21px!important} /* Add Fund / Earn record shells and payout/history containers retain their internal expand animations; only the outer shell is visually raised. */ .af-history-shell.card, .wd-payout-card, .earn-record-shell.card{ border-color:var(--finzo-app-card-border)!important; box-shadow:var(--finzo-app-card-shadow)!important; } /* Primary balance/profile cards: deeper layered hero shadow and a thin top highlight create the app-card depth while all original gradients remain. */ .home-earn-hero, .profile-card, .wallet-hero, .coin-wallet-card{ border:1px solid rgba(255,255,255,.16)!important; box-shadow:var(--finzo-app-hero-shadow)!important; } /* Inner glass controls inside gradient hero cards get a little physical depth but keep their translucent background and existing text colours. */ .wallet-sub .ws, .wallet-act, .heh-orb, .heh-withdraw, .coin-rate-pill, .coin-wallet-symbol, .coin-withdraw-btn{ box-shadow:0 10px 18px -15px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.20)!important; } /* Earn activity tiles follow the same raised app-card language. */ .earn-tile{ background:var(--finzo-app-card-face)!important; border-color:var(--finzo-app-card-border)!important; box-shadow:var(--finzo-app-card-shadow-soft)!important; } /* Small-screen tuning: retain depth but keep the compact old-theme geometry. */ @media(max-width:339px){ .settings-group .set-row{border-radius:16px!important} .toggle-row{padding:12px!important;border-radius:15px!important} .lifafa-item{border-radius:18px!important} } /* Neutral page cards keep their existing structure but receive the same edge and depth. Inline/semantic backgrounds are deliberately not overwritten. */ .card{ border-color:var(--finzo-app-card-border); box-shadow:var(--finzo-app-card-shadow-soft); } [data-testid="create-lifafa-view"]>.card, [data-testid="pay-view"]>.card, #pay-single>.card, #pay-bulk>.card, .nt-builder-card, .fm-card, #tx-list.card{ background:var(--finzo-app-card-face); border-color:var(--finzo-app-card-border); box-shadow:var(--finzo-app-card-shadow); } /* ========================================================================== FINZO WALLET — interaction polish v2026.09.15.64 Keeps the stable old-theme mechanics while finishing the app-depth layer. ========================================================================== */ /* Create Lifafa expandable panels: keep a permanent block-formatting context. The existing reveal animation temporarily uses overflow:hidden. Without a stable BFC, the first child's .mt-12 margin can start/stop collapsing when overflow is cleared, producing a small end-of-animation spacing snap. */ [data-testid="create-lifafa-view"] #refer-fields:not(.hidden), [data-testid="create-lifafa-view"] #access-fields:not(.hidden), [data-testid="create-lifafa-view"] #special-fields:not(.hidden), [data-testid="create-lifafa-view"] #youtube-summary:not(.hidden){ display:flow-root; } /* Universal drag-down BottomSheet: visual depth only. Drag mechanics, height, transforms and scrolling remain owned by the original UI controller. */ .sheet{ border:1px solid var(--finzo-app-card-border)!important; border-bottom:0!important; border-radius:30px 30px 0 0!important; background:linear-gradient(165deg, color-mix(in srgb,var(--surface) 98%,var(--primary) 2%), color-mix(in srgb,var(--surface-2) 96%,var(--primary) 4%))!important; box-shadow: 0 -30px 58px -30px rgba(8,15,38,.58), 0 -10px 24px -20px rgba(8,15,38,.34), inset 0 1px 0 rgba(255,255,255,.92)!important; } [data-theme="dark"] .sheet{ box-shadow: 0 -30px 60px -28px rgba(0,0,0,.78), 0 -10px 24px -17px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.075)!important; } .sheet .handle{ width:48px!important; height:5px!important; border-radius:999px!important; background:linear-gradient(90deg, var(--border), color-mix(in srgb,var(--primary) 30%,var(--border)), var(--border))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 2px 6px -4px rgba(0,0,0,.38)!important; } .sheet .sheet-head h3{font-weight:900!important;letter-spacing:-.02em} .sheet .sheet-close, .alert-close{ border:1px solid var(--finzo-app-card-border)!important; background:linear-gradient(145deg,var(--surface),var(--surface-2))!important; box-shadow:var(--finzo-app-card-shadow-soft)!important; } .sheet .sheet-close:active, .alert-close:active{ box-shadow:inset 0 2px 5px rgba(20,27,55,.13)!important; } /* Universal center popup / confirmation alert. Existing scale animation and alert-specific content layouts are preserved; only the physical surface is upgraded to the same raised app material. */ .alert-card{ background:linear-gradient(155deg, color-mix(in srgb,var(--surface) 98%,var(--primary) 2%), color-mix(in srgb,var(--surface-2) 95%,var(--primary) 5%))!important; border:1px solid var(--finzo-app-card-border)!important; border-radius:25px!important; box-shadow: 0 28px 58px -31px rgba(8,15,38,.62), 0 11px 25px -19px rgba(8,15,38,.30), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 color-mix(in srgb,var(--primary) 7%,transparent)!important; } [data-theme="dark"] .alert-card{ box-shadow: 0 30px 62px -28px rgba(0,0,0,.82), 0 11px 28px -18px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.20)!important; } .alert-card .a-ic{ border:1px solid color-mix(in srgb,currentColor 14%,transparent); box-shadow:0 13px 22px -15px currentColor,inset 0 1px 0 rgba(255,255,255,.38)!important; } @media(max-width:339px){ .sheet{border-radius:27px 27px 0 0!important} .alert-card{border-radius:23px!important} } /* Inline Login validation feedback; the toast stays intentionally generic. */ #li-mobile[aria-invalid="true"]{ border-color:var(--danger)!important; box-shadow:0 0 0 3px var(--danger-soft)!important; } /* ========================================================================== FINZO WALLET — safe visual completion v2026.09.15.65 Visual-only finishing layer for the stable old theme. It deliberately avoids changing component heights, dynamic visibility, router transforms or payout switching mechanics. ========================================================================== */ /* Form controls: subtle inset app-depth in both themes, with a clearer focus state. Page-specific controls using their own !important styling remain in charge, so specialised widgets are not disturbed. */ .input, .textarea, .field select{ border-color:color-mix(in srgb,var(--primary) 10%,var(--border)); background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 98%,var(--primary) 2%), color-mix(in srgb,var(--surface-2) 96%,var(--primary) 4%)); box-shadow: inset 0 1px 2px rgba(18,27,58,.055), inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px -20px rgba(18,27,58,.46); } [data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] .field select{ box-shadow: inset 0 1px 3px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px -18px rgba(0,0,0,.70); } .input:focus, .textarea:focus, .field select:focus{ border-color:color-mix(in srgb,var(--primary) 72%,var(--border)); background:var(--surface); box-shadow: inset 0 1px 2px rgba(18,27,58,.04), 0 0 0 3px var(--primary-soft), 0 12px 24px -21px color-mix(in srgb,var(--primary) 55%,transparent); } .input[aria-invalid="true"], .textarea[aria-invalid="true"]{ border-color:color-mix(in srgb,var(--danger) 72%,var(--border)); box-shadow:0 0 0 3px var(--danger-soft); } /* Section titles get a compact app-style accent marker without changing their existing spacing or page layout. */ .section-title h2{ display:inline-flex; align-items:center; gap:8px; } .section-title h2::before{ content:""; width:4px; height:16px; flex:0 0 4px; border-radius:999px; background:var(--grad); box-shadow:0 6px 12px -7px var(--primary),inset 0 1px 0 rgba(255,255,255,.35); } /* Toasts and blocking loaders use the same tactile material as cards. Motion is left untouched. */ .toast{ background:var(--finzo-app-card-face)!important; border-color:var(--finzo-app-card-border)!important; box-shadow: 0 20px 38px -25px rgba(8,15,38,.46), 0 7px 18px -15px rgba(8,15,38,.24), inset 0 1px 0 rgba(255,255,255,.86)!important; } [data-theme="dark"] .toast{ box-shadow: 0 22px 42px -22px rgba(0,0,0,.76), 0 8px 18px -13px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.055)!important; } .toast .t-ic{ box-shadow:0 10px 18px -13px currentColor,inset 0 1px 0 rgba(255,255,255,.28); } .toast .t-progress{height:3px;box-shadow:0 -2px 8px -4px var(--primary)} .ui-busy-card{ background:var(--finzo-app-card-face)!important; border-color:var(--finzo-app-card-border)!important; box-shadow:var(--finzo-app-card-shadow)!important; } .ui-busy-spin{ box-shadow:0 6px 12px -8px var(--primary); } /* Empty/result states: richer icon depth and a quieter surface so empty pages feel intentional rather than blank. */ .empty .ic, .notification-empty-icon, .tx-state-empty>span, .free-lf-empty>div{ border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border)); box-shadow: 0 12px 22px -17px color-mix(in srgb,var(--primary) 42%,transparent), inset 0 1px 0 rgba(255,255,255,.38); } .tx-state-empty, .free-lf-empty{ border-color:var(--finzo-app-card-border)!important; background:linear-gradient(145deg, color-mix(in srgb,var(--surface) 98%,var(--primary) 2%), color-mix(in srgb,var(--surface-2) 97%,var(--primary) 3%))!important; box-shadow:var(--finzo-app-card-shadow-soft)!important; } .notification-empty{ border:1px dashed color-mix(in srgb,var(--primary) 14%,var(--border)); border-radius:20px; background:color-mix(in srgb,var(--surface-2) 48%,transparent); } /* Upload / proof pickers: tactile drop areas only; file input behaviour and preview geometry are unchanged. */ .af-upload-zone, .fm-proof-pick{ border-color:color-mix(in srgb,var(--primary) 30%,var(--border))!important; background:linear-gradient(145deg, color-mix(in srgb,var(--surface-2) 95%,var(--primary) 5%), color-mix(in srgb,var(--surface) 98%,var(--primary) 2%))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 12px 24px -22px rgba(15,23,55,.42); } [data-theme="dark"] .af-upload-zone, [data-theme="dark"] .fm-proof-pick{ box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 24px -18px rgba(0,0,0,.68); } .af-upload-icon{ border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border)); box-shadow:0 10px 18px -14px color-mix(in srgb,var(--primary) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.35); } /* Chips/status pills keep their semantic colours while gaining a physical edge. No status colour is overwritten. */ .badge, .chip, .free-lf-claimed-badge, .af-order-chip, .wd-review-secure, .af-status-pill{ border:1px solid color-mix(in srgb,currentColor 12%,var(--border)); box-shadow:0 7px 14px -13px currentColor,inset 0 1px 0 rgba(255,255,255,.28); } /* Dense histories use a deliberately lighter shadow than hero cards to avoid a heavy stacked-card look on long lists. */ :root{ --finzo-list-shadow: 0 9px 20px -19px rgba(20,29,62,.38), inset 0 1px 0 rgba(255,255,255,.68); } [data-theme="dark"]{ --finzo-list-shadow: 0 10px 22px -17px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.035); } .lifafa-item, .pay-history-card, .bulk-history-card, .claim-all-history-card, .notification-item, .af-history-item, .earn-record-shell.card{ box-shadow:var(--finzo-list-shadow)!important; } /* Confirmation/success presentation: only surfaces/icons are enhanced. */ .af-review-icon, .wd-review-method-icon, .win-burst{ filter:drop-shadow(0 10px 14px color-mix(in srgb,var(--primary) 18%,transparent)); } .af-review-stage, .wd-review-ticket, .lf-created-links{ position:relative; } .wd-review-ticket, .af-review-time, .lf-share-link-row{ box-shadow:var(--finzo-app-card-shadow-soft); } /* Create Lifafa expandable panels. The root is data-testid, not an id. Using flow-root on the real element prevents first-child .mt-12 margin collapse when the animation releases overflow, so there is no post-animation gap snap in either direction. */ [data-testid="create-lifafa-view"] #refer-fields:not(.hidden), [data-testid="create-lifafa-view"] #access-fields:not(.hidden), [data-testid="create-lifafa-view"] #special-fields:not(.hidden), [data-testid="create-lifafa-view"] #youtube-summary:not(.hidden){ display:flow-root!important; } /* YouTube link checker: disabled/loading state must retain a solid tactile face and a visible themed spinner instead of fading into the sheet. */ #yt-check.yt-check-loading, #yt-check.yt-check-loading:disabled{ opacity:1!important; background:var(--finzo-raised-face)!important; border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border))!important; color:var(--primary)!important; box-shadow:var(--finzo-raised-shadow)!important; } #yt-check.yt-check-loading .ld{ width:17px; height:17px; border:2px solid color-mix(in srgb,var(--primary) 24%,transparent)!important; border-top-color:var(--primary)!important; } @media(max-width:339px){ .section-title h2{gap:7px} .section-title h2::before{height:15px} } /* ========================================================================== FINZO WALLET — interaction polish v2026.09.15.66 ========================================================================== */ /* Create Lifafa toggle-stack: use one-sided vertical margins. With two-sided margins, the still-present zero-height animated panel temporarily separated two sibling margins; display:none then allowed them to collapse, producing a last-frame spacing jump on OFF. One-sided spacing is identical before, during and after the panel is removed. */ [data-testid="create-lifafa-view"] > .card .toggle-row{ margin:0 0 8px!important; } /* Inputs should read as interactive controls, not plain recessed text boxes. Generic single-line controls become slightly taller with a clearer physical edge. More-specific compact widgets keep their own declared heights. */ .input{ height:52px; border-width:1.5px; border-color:color-mix(in srgb,var(--primary) 17%,var(--border)); border-bottom-color:color-mix(in srgb,var(--primary) 25%,var(--border)); background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 99%,var(--primary) 1%) 0%, color-mix(in srgb,var(--surface-2) 96%,var(--primary) 4%) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 1px color-mix(in srgb,var(--primary) 5%,transparent), 0 3px 0 color-mix(in srgb,var(--primary) 7%,var(--border)), 0 9px 18px -18px rgba(18,27,58,.42); cursor:text; } .textarea{ border-width:1.5px; border-color:color-mix(in srgb,var(--primary) 17%,var(--border)); border-bottom-color:color-mix(in srgb,var(--primary) 25%,var(--border)); background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 99%,var(--primary) 1%), color-mix(in srgb,var(--surface-2) 96%,var(--primary) 4%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 3px 0 color-mix(in srgb,var(--primary) 7%,var(--border)), 0 9px 18px -18px rgba(18,27,58,.42); cursor:text; } .field select:not([multiple]){ min-height:52px; border-width:1.5px; border-color:color-mix(in srgb,var(--primary) 17%,var(--border)); border-bottom-color:color-mix(in srgb,var(--primary) 25%,var(--border)); background-color:var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 3px 0 color-mix(in srgb,var(--primary) 7%,var(--border)), 0 9px 18px -18px rgba(18,27,58,.42); cursor:pointer; } .input::placeholder,.textarea::placeholder{ color:color-mix(in srgb,var(--text-muted) 84%,transparent); opacity:1; } .input:hover,.textarea:hover,.field select:hover{ border-color:color-mix(in srgb,var(--primary) 34%,var(--border)); } .input:focus,.textarea:focus,.field select:focus{ border-color:color-mix(in srgb,var(--primary) 78%,var(--border)); border-bottom-color:var(--primary); background:var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 2px 0 color-mix(in srgb,var(--primary) 18%,var(--border)), 0 0 0 3px var(--primary-soft), 0 12px 24px -21px color-mix(in srgb,var(--primary) 55%,transparent); } [data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] .field select:not([multiple]){ border-color:color-mix(in srgb,var(--primary) 20%,var(--border)); border-bottom-color:color-mix(in srgb,var(--primary) 32%,var(--border)); background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 96%,#fff 4%), color-mix(in srgb,var(--surface-2) 97%,var(--primary) 3%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 1px rgba(0,0,0,.22), 0 3px 0 color-mix(in srgb,var(--primary) 10%,rgba(0,0,0,.62)), 0 10px 20px -18px rgba(0,0,0,.78); } [data-theme="dark"] .input:focus, [data-theme="dark"] .textarea:focus, [data-theme="dark"] .field select:focus{ background:color-mix(in srgb,var(--surface) 97%,#fff 3%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 color-mix(in srgb,var(--primary) 25%,rgba(0,0,0,.55)), 0 0 0 3px var(--primary-soft), 0 12px 24px -20px rgba(0,0,0,.72); } /* Brand-colour icons inside the universal Tools sheet. These selectors are intentionally more specific than the generic .set-row .sic app-depth rule. */ .tools-sheet-group [data-testid="tool-youtube-filter"] .sic{ background:linear-gradient(145deg,#ff3131,#d60000)!important; color:#fff!important; border-color:rgba(255,255,255,.30)!important; box-shadow:0 11px 20px -14px rgba(224,0,0,.82),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(100,0,0,.18)!important; } .tools-sheet-group [data-testid="tool-tg-post-maker"] .sic{ background:linear-gradient(145deg,#2aabee,#168dcc)!important; color:#fff!important; border-color:rgba(255,255,255,.30)!important; box-shadow:0 11px 20px -14px rgba(34,158,217,.84),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,80,120,.17)!important; } /* ========================================================================== FINZO WALLET — focused interaction + manager polish v2026.09.15.67 ========================================================================== */ /* Create Lifafa: these gaps live INSIDE the dynamic content, so the measured height animator includes them during both open and close. This keeps the Special Users panel separated from Telegram Channel Join without bringing back the margin-collapse snap fixed in v65/v66. */ /* Keep the visible separation as real inner content, not padding on the animated panel. Padding survives a CSS height:0 collapse and caused the final 10px to disappear only when .hidden was applied. This spacer is fully clipped by the parent's overflow:hidden during closing, so there is no snap. */ [data-testid="create-lifafa-view"] #special-fields{ padding-bottom:0!important; } [data-testid="create-lifafa-view"] #special-fields .lf-special-bottom-gap{ display:block; height:10px; min-height:10px; pointer-events:none; } [data-testid="create-lifafa-view"] #tg-info{ margin-bottom:10px!important; padding:0 2px; } /* Manager setting actions must stay visibly actionable in both themes. These are explicit solid save actions rather than translucent/ghost controls. */ [data-testid="withdrawal-manager-view"] .wm-receive-card .wm-save-range, [data-testid="fund-manager-view"] .fm-save-upi{ min-height:47px; background:var(--grad)!important; color:#fff!important; border:1px solid rgba(255,255,255,.20)!important; box-shadow: 0 12px 22px -14px color-mix(in srgb,var(--primary) 84%,#111 16%), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.10)!important; opacity:1; } [data-testid="withdrawal-manager-view"] .wm-receive-card .wm-save-range:disabled, [data-testid="fund-manager-view"] .fm-save-upi:disabled{ opacity:.78!important; color:#fff!important; filter:saturate(.82); } [data-testid="withdrawal-manager-view"] .wm-receive-card .wm-save-range .ld, [data-testid="fund-manager-view"] .fm-save-upi .ld{ border-color:rgba(255,255,255,.42)!important; border-top-color:#fff!important; } /* ========================================================================== FINZO WALLET — A-PIN keypad polish v2026.09.15.68 Visual-only: retains the original keypad logic and universal sheet gestures. ========================================================================== */ /* Account PIN keypad — port only the tactile key treatment from the app-look experiment. No grid/height/JS behavior changes. */ .keypad .key{ background:var(--finzo-app-card-face)!important; border:1px solid var(--finzo-app-card-border)!important; box-shadow: 0 10px 18px -14px rgba(20,27,55,.48), 0 4px 9px -7px rgba(20,27,55,.26), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 color-mix(in srgb,var(--primary) 7%,transparent)!important; color:var(--text)!important; font-weight:800!important; -webkit-tap-highlight-color:transparent; } .keypad .key.del{color:var(--danger)!important} .keypad .key:active{ transform:translateY(2px) scale(.96)!important; background:color-mix(in srgb,var(--surface-2) 92%,var(--primary) 8%)!important; box-shadow: inset 0 3px 7px rgba(20,27,55,.14), inset 0 1px 2px rgba(20,27,55,.10)!important; } @media(hover:hover) and (pointer:fine){ .keypad .key:hover{ border-color:color-mix(in srgb,var(--primary) 25%,var(--border))!important; } } [data-theme="dark"] .keypad .key{ box-shadow: 0 11px 20px -13px rgba(0,0,0,.72), 0 4px 9px -6px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.22)!important; } [data-theme="dark"] .keypad .key:active{ box-shadow: inset 0 3px 8px rgba(0,0,0,.48), inset 0 1px 2px rgba(0,0,0,.34)!important; } /* Universal BottomSheet drag affordance — keep it neutral like the original stable theme. The handle must not inherit the user's primary/theme colour. */ .sheet .sheet-drag-handle .handle, .sheet .handle{ width:44px!important; height:5px!important; border-radius:5px!important; background:var(--border)!important; box-shadow:none!important; } /* ========================================================================== FINZO WALLET — security + manager transfer + scratch polish v2026.09.15.69 ========================================================================== */ /* Scratch winning chance: retain the discrete 20/40/60/80/100 choices and add a theme-matched tactile range control. */ .lifafa-chance-buttons{flex-wrap:wrap;margin-bottom:12px} .lifafa-chance-slider{ padding:12px 12px 9px; border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border)); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 97%,var(--primary) 3%),var(--surface-2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 7px 15px -13px rgba(20,27,55,.5); } .lifafa-chance-slider input[type="range"]{ width:100%;height:24px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer; } .lifafa-chance-slider input[type="range"]::-webkit-slider-runnable-track{ height:7px;border-radius:999px;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 58%,var(--border))); box-shadow:inset 0 1px 2px rgba(20,27,55,.18); } .lifafa-chance-slider input[type="range"]::-webkit-slider-thumb{ appearance:none;-webkit-appearance:none;width:23px;height:23px;margin-top:-8px;border-radius:50%; border:3px solid var(--surface);background:var(--primary); box-shadow:0 5px 12px -5px color-mix(in srgb,var(--primary) 72%,#000 28%),0 0 0 1px color-mix(in srgb,var(--primary) 48%,var(--border)); } .lifafa-chance-slider input[type="range"]::-moz-range-track{height:7px;border-radius:999px;background:color-mix(in srgb,var(--primary) 58%,var(--border));box-shadow:inset 0 1px 2px rgba(20,27,55,.18)} .lifafa-chance-slider input[type="range"]::-moz-range-progress{height:7px;border-radius:999px;background:var(--primary)} .lifafa-chance-slider input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:3px solid var(--surface);background:var(--primary);box-shadow:0 5px 12px -5px color-mix(in srgb,var(--primary) 72%,#000 28%)} .lifafa-chance-scale{display:flex;justify-content:space-between;gap:4px;margin-top:3px;color:var(--muted);font-size:10.8px;font-weight:800} [data-theme="dark"] .lifafa-chance-slider{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 16px -13px rgba(0,0,0,.9)} /* Add Fund Manager: instant main-wallet transfer sits beside the existing UPI funding path and uses the same configured commission preview. */ .fm-main-wallet-strip{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin:10px 0 12px;padding:11px 13px;border-radius:14px; border:1px solid var(--border);background:var(--surface-2); box-shadow:inset 0 1px 2px rgba(20,27,55,.06); } .fm-main-wallet-strip span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:700} .fm-main-wallet-strip span i{color:var(--primary)} .fm-main-wallet-strip b{font-size:13px;color:var(--text)} .fm-funding-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px} .fm-funding-actions .btn{min-height:48px;height:auto;white-space:normal;line-height:1.15;padding:10px 9px} .fm-wallet-transfer{ border-color:color-mix(in srgb,var(--primary) 26%,var(--border))!important; color:var(--primary)!important; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--primary) 4%),var(--surface-2))!important; box-shadow:0 9px 16px -13px color-mix(in srgb,var(--primary) 56%,#111 44%),inset 0 1px 0 rgba(255,255,255,.75)!important; } [data-theme="dark"] .fm-wallet-transfer{box-shadow:0 9px 16px -13px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)!important} @media(max-width:390px){.fm-funding-actions{grid-template-columns:1fr}.fm-funding-actions .btn{min-height:46px}} /* ========================================================================== FINZO WALLET — Create Lifafa performance + slider-only polish v2026.09.15.70 ========================================================================== */ /* Current Scratch UI is slider-only. The hidden legacy selector rule also protects against stale cached markup briefly surviving an SPA swap. */ [data-testid="create-lifafa-view"] .lifafa-chance-buttons{display:none!important} [data-testid="create-lifafa-view"] .lifafa-chance-slider input[type="range"]{ --chance-pos:100%; } [data-testid="create-lifafa-view"] .lifafa-chance-slider input[type="range"]::-webkit-slider-runnable-track{ background:linear-gradient(90deg, var(--primary) 0 var(--chance-pos), color-mix(in srgb,var(--primary) 18%,var(--border)) var(--chance-pos) 100%); } /* Create is one of the tallest interactive views. The full app-depth stack was visually correct but forced several large multi-layer shadows to repaint on every height-animation frame in Android WebView. Keep the same tactile look here with a lighter two-layer shadow budget. No layout/interaction geometry is changed. */ [data-testid="create-lifafa-view"]>.card{ box-shadow:0 10px 22px -19px rgba(18,27,58,.42),inset 0 1px 0 rgba(255,255,255,.58)!important; } [data-testid="create-lifafa-view"] .type-card, [data-testid="create-lifafa-view"] .toggle-row{ box-shadow:0 7px 16px -14px rgba(18,27,58,.38),inset 0 1px 0 rgba(255,255,255,.52)!important; } [data-testid="create-lifafa-view"] .input, [data-testid="create-lifafa-view"] .textarea{ box-shadow:inset 0 1px 1px rgba(16,24,54,.06),0 2px 0 color-mix(in srgb,var(--primary) 7%,var(--border))!important; } [data-theme="dark"] [data-testid="create-lifafa-view"]>.card{ box-shadow:0 10px 22px -18px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.05)!important; } [data-theme="dark"] [data-testid="create-lifafa-view"] .type-card, [data-theme="dark"] [data-testid="create-lifafa-view"] .toggle-row{ box-shadow:0 7px 16px -13px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.045)!important; } /* The animator owns max-height only while this class exists. Avoid opacity and child transitions so the browser only lays out the changing block once per frame instead of repainting all controls inside it. */ [data-testid="create-lifafa-view"] .lf-panel-animating{ will-change:max-height; } [data-testid="create-lifafa-view"] .lf-panel-animating .input, [data-testid="create-lifafa-view"] .lf-panel-animating .textarea, [data-testid="create-lifafa-view"] .lf-panel-animating .mobile-preview{ transition:none!important; } /* ========================================================================== FINZO WALLET — Login clarity + compact public footer v2026.09.15.76 ========================================================================== */ /* Secondary auth-method copy should explain the option without competing with the primary label. The button itself intentionally stays tactile/raised. */ .auth-btn .auth-method-note{ margin-top:2px; color:var(--text-muted)!important; font-weight:500!important; line-height:1.35; letter-spacing:0; } /* Passcode-login explanation shown inside the universal login sheet. */ .auth-passcode-note{ display:flex; align-items:flex-start; gap:9px; margin:12px 0 0; padding:11px 12px; border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border)); border-radius:13px; background:color-mix(in srgb,var(--primary) 5%,var(--surface-2)); color:var(--text-muted); font-size:0.686rem; font-weight:550; line-height:1.55; box-shadow:inset 0 1px 0 rgba(255,255,255,.52); } .auth-passcode-note i{ flex:none; margin-top:2px; color:var(--primary); font-size:.74rem; } [data-theme="dark"] .auth-passcode-note{ background:color-mix(in srgb,var(--primary) 7%,var(--surface-2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); } /* Keep the premium footer treatment but remove unnecessary vertical bulk. Mobile uses one full-width email row + two compact half-width actions. */ .public-site-footer .public-footer-inner{ padding-top:14px!important; padding-bottom:calc(14px + var(--safe-b))!important; } .public-site-footer .public-footer-top{ flex-direction:row!important; align-items:center!important; gap:9px!important; } .public-site-footer .public-footer-brand{gap:8px!important} .public-site-footer .public-footer-brand img{ width:34px!important; height:34px!important; border-radius:10px!important; } .public-site-footer .public-footer-brand>div{gap:1px!important} .public-site-footer .public-footer-brand b{font-size:.74rem!important} .public-site-footer .public-footer-brand span{ font-size:0.658rem!important; line-height:1.25!important; } .public-site-footer .public-footer-web{ min-height:29px!important; padding:0 9px!important; border-radius:9px!important; font-size:0.662rem!important; } .public-site-footer .public-footer-contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:6px!important; margin-top:10px!important; padding:6px!important; border-radius:13px!important; } .public-site-footer .public-footer-contact-email{grid-column:1/-1!important} .public-site-footer .public-footer-contact{ min-height:39px!important; gap:7px!important; padding:5px 7px!important; border-radius:9px!important; } .public-site-footer .public-footer-contact-icon{ width:27px!important; height:27px!important; border-radius:8px!important; font-size:0.674rem!important; } .public-site-footer .public-footer-contact small{ font-size:0.642rem!important; line-height:1.15!important; letter-spacing:.055em!important; } .public-site-footer .public-footer-contact b{ font-size:0.668rem!important; line-height:1.25!important; } .public-site-footer .public-footer-contact>i{font-size:0.642rem!important} .public-site-footer .public-footer-legal{ gap:6px!important; margin-top:9px!important; padding-top:8px!important; } .public-site-footer .public-footer-legal button, .public-site-footer .public-footer-legal span{font-size:0.656rem!important} .public-site-footer .public-footer-note{ margin-top:6px!important; font-size:0.646rem!important; line-height:1.35!important; } @media(max-width:339px){ .public-site-footer .public-footer-top{ flex-direction:column!important; align-items:flex-start!important; } .public-site-footer .public-footer-web{width:100%!important;justify-content:center!important} .public-site-footer .public-footer-contact-grid{grid-template-columns:1fr!important} .public-site-footer .public-footer-contact-email{grid-column:auto!important} } /* ========================================================================== FINZO WALLET — public footer + company controls v2026.09.15.77 ========================================================================== */ /* Give the landing access buttons a little more breathing room before the dark footer starts. */ .landing-page .landing-bottom-actions{ margin-bottom:34px!important; } /* Flat footer edge with a dedicated theme-gradient top rule. */ .public-site-footer{ border:0!important; border-radius:0!important; box-shadow:0 -18px 42px -34px rgba(15,20,40,.52),inset 0 1px 0 rgba(255,255,255,.035)!important; } .public-footer-accent{ display:block!important; height:4px!important; min-height:4px!important; background:var(--grad)!important; box-shadow:0 2px 10px -5px color-mix(in srgb,var(--primary) 80%,transparent)!important; } /* Prevent the brand/title and domain chip from ever painting over each other. */ .public-site-footer .public-footer-top{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; column-gap:10px!important; min-width:0!important; } .public-site-footer .public-footer-brand{ min-width:0!important; max-width:100%!important; } .public-site-footer .public-footer-brand>div{ min-width:0!important; overflow:hidden!important; } .public-site-footer .public-footer-brand b, .public-site-footer .public-footer-brand span{ display:block!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .public-site-footer .public-footer-web{ min-width:0!important; max-width:44vw!important; overflow:hidden!important; } .public-site-footer .public-footer-web span{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* Optional company block controlled from Admin Settings. */ .public-footer-company{ margin-top:9px; padding:10px 11px; border:1px solid rgba(255,255,255,.085); border-radius:12px; background:rgba(255,255,255,.038); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } .public-footer-company-head{ display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.72); font-size:0.654rem; font-weight:850; letter-spacing:.02em; } .public-footer-company-head i{color:color-mix(in srgb,var(--primary) 38%,#fff)} .public-footer-company>strong{ display:block; margin-top:6px; color:#fff; font-size:0.682rem; line-height:1.35; } .public-footer-company>p{ margin:4px 0 0; color:rgba(255,255,255,.58); font-size:0.658rem; line-height:1.55; } .public-footer-company-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; } .public-footer-company-meta>span, .public-footer-company-meta>a{ min-width:0; padding:7px 8px; border-radius:9px; background:rgba(255,255,255,.042); color:#fff; display:flex; flex-direction:column; gap:2px; } .public-footer-company-meta small{ color:rgba(255,255,255,.42); font-size:0.628rem; font-weight:850; letter-spacing:.055em; } .public-footer-company-meta b{ color:#fff; font-size:0.652rem; font-weight:750; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Login gets the same shared footer only when enabled by Admin. */ .auth-main>.public-site-footer, .auth-main .public-site-footer{ margin-top:24px; } @media(max-width:339px){ .public-site-footer .public-footer-top{ grid-template-columns:1fr!important; row-gap:8px!important; } .public-site-footer .public-footer-web{ width:100%!important; max-width:none!important; justify-content:center!important; } .public-footer-company-meta{grid-template-columns:1fr} } /* ========================================================================== FINZO WALLET — Login footer full-width shell fix v2026.09.15.78 ========================================================================== */ /* The login view lives inside .main, which keeps horizontal page padding for the auth form. The shared footer must escape that content padding and span the complete FINZO app shell, just like the Landing footer. Override the global .main > * max-width guard only for this footer. */ .auth-main > .public-site-footer{ width:calc(100% + var(--page-pad) + var(--page-pad))!important; max-width:none!important; margin-top:24px!important; margin-right:calc(0px - var(--page-pad))!important; margin-bottom:0!important; margin-left:calc(0px - var(--page-pad))!important; align-self:stretch!important; } /* Home Services: SOON tiles stay visually secondary, but remain clearly readable. This final-loaded override wins consistently in browser and native WebView. */ .service-grid.services-soft .service.is-soon{ opacity:.84!important; filter:saturate(.68)!important; } [data-theme="dark"] .service-grid.services-soft .service.is-soon{ opacity:.80!important; filter:saturate(.58)!important; } /* v2026.10.10.262 · Android-only download CTA directly below Continue */ .landing-cta-row{display:grid;gap:10px} .landing-android-app-cta{display:none;width:100%;min-height:48px;align-items:center;justify-content:center;gap:10px;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:16px;background:var(--surface);color:var(--primary);font:inherit;font-size:.75rem;font-weight:850;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)} html.is-android-client .landing-android-app-cta{display:inline-flex} .landing-android-app-cta:active{transform:translateY(1px) scale(.985);background:var(--primary-soft)} .landing-android-app-cta i{font-size:.9rem} /* ---- page_controls.css ---- */ /* Runtime service unavailable state + Earn tile OFF treatment. */ .feature-off-state{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;margin:14px 0 18px;padding:18px;border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface));box-shadow:0 14px 32px -30px var(--text);overflow:hidden} .feature-off-state::after{content:"";position:absolute;right:-36px;top:-44px;width:128px;height:128px;border-radius:50%;background:color-mix(in srgb,var(--primary) 9%,transparent);pointer-events:none} .feature-off-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-size:1.05rem;box-shadow:0 12px 24px -22px var(--primary)} .feature-off-copy{min-width:0;position:relative;z-index:1}.feature-off-kicker{display:block;color:var(--primary);font-size:0.666rem;font-weight:950;letter-spacing:.075em;margin-bottom:5px}.feature-off-copy h3{margin:0;color:var(--text);font-size:.93rem;line-height:1.35;font-weight:900}.feature-off-copy p{margin:6px 0 0;color:var(--text-muted);font-size:.72rem;line-height:1.5} [data-feature-live][hidden],[data-feature-off][hidden]{display:none!important} .earn-tile.feature-off{cursor:default!important;filter:saturate(.45);opacity:.68!important;transform:none!important} .earn-tile.feature-off .earn-tile-icon{background:var(--surface-2);border-color:var(--border);color:var(--text-muted)} .earn-tile.feature-off .earn-tile-meta{opacity:0!important} .earn-tile.feature-off::after{content:"OFF";position:absolute;right:8px;top:8px;padding:5px 6px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:0.646rem;font-weight:950;line-height:1;letter-spacing:.04em} [data-theme="dark"] .feature-off-state{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--primary) 18%,var(--border))} @media(max-width:380px){.feature-off-state{grid-template-columns:46px minmax(0,1fr);gap:12px;padding:15px}.feature-off-icon{width:46px;height:46px;border-radius:15px}.feature-off-copy h3{font-size:.86rem}.feature-off-copy p{font-size:0.686rem}}