/* Minification failed. Returning unminified contents. (2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-page-bg' (44,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-page-bg' (45,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-text' (51,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-phone-max' (67,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-head-height' (68,27): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-page-pad' (70,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-surface' (71,35): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-border' (74,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-text' (96,38): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-press-ease' (113,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-chip-bg' (132,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-text' (144,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-muted' (153,24): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-page-pad' (157,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-surface' (158,28): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-border' (159,25): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-card-radius' (160,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-shadow-sm' (170,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-chip-bg' (171,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-muted' (177,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-accent-soft' (178,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-sec-accent-strong' (219,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-card-bg' (220,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (235,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (253,18): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (283,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-dark-surface' (284,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (304,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (311,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (312,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (313,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (314,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (316,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (317,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (318,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (319,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (320,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (321,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (322,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (323,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (327,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (328,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (329,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (330,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (331,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (332,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (333,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (334,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (335,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (336,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (337,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (338,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (342,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (343,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (345,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (346,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (348,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (349,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (350,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (351,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (363,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (379,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (380,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (382,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (383,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (385,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (386,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (387,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (388,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (389,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (390,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (391,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (392,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (393,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (394,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (395,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (396,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (397,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (398,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (402,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (403,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (404,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (405,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (406,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (407,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (408,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (409,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (410,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (411,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (412,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (413,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (414,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (415,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (416,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (417,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (418,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (419,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (420,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (424,26): run-time error CSS1039: Token not allowed after unary operator: '-ezy-shell-content-pad-bottom' (425,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-letterbox-bg' (435,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-letterbox-bg' (440,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (444,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-app-height' (445,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-page-bg' (467,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-surface' (468,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (478,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (491,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (492,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (494,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (495,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-shell-content-pad-bottom' (497,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-surface' (515,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-app-height' (516,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-app-height' (518,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-letterbox-bg' (524,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (530,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-page-bg' (580,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (581,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (583,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (598,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (599,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (601,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (648,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (655,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (790,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (828,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (829,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (831,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (854,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (873,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (997,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (997,47): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-h' (998,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (998,48): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-h' (999,23): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-bottom' (999,55): run-time error CSS1039: Token not allowed after unary operator: '-ezy-safe-bottom' (1000,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-height' (1005,26): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (1005,50): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-h' (1018,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-h' (1019,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-h' (1040,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-height' (1041,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-inner-pad-h' (1042,25): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-radius' (1043,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-surface' (1044,28): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-border' (1045,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-shadow' (1062,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-indicator-bottom' (1063,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-indicator-w' (1064,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-indicator-h' (1066,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-active' (1082,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-item-width' (1087,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-inactive' (1098,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-icon-size' (1099,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-icon-size' (1103,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-active' (1109,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-icon-size' (1110,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-icon-size' (1133,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-active' (1178,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-scrim' (1188,23): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-width-min' (1188,57): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-width-max' (1190,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (1231,27): run-time error CSS1039: Token not allowed after unary operator: '-card-scale' (1602,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1614,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1626,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1659,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1672,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-text' (1684,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1823,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-divider' (1835,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-height' (1836,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-height' (1838,31): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-bottom' (1838,63): run-time error CSS1039: Token not allowed after unary operator: '-ezy-safe-bottom' (1839,32): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-divider' (1850,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1867,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1913,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1930,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1940,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (1949,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (1950,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (1952,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (1958,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-page-bg' (1993,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-surface' (1994,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2054,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-page-bg' (2082,15): run-time error CSS1039: Token not allowed after unary operator: '-ezy-rn-sat' (2084,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-safe-bottom' (2090,23): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-height' (2090,48): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-margin-bottom' (2090,80): run-time error CSS1039: Token not allowed after unary operator: '-ezy-safe-bottom' (2095,27): run-time error CSS1039: Token not allowed after unary operator: '-ezy-rn-sat' (2100,15): run-time error CSS1039: Token not allowed after unary operator: '-ezy-rn-sat' (2101,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-safe-bottom' (2105,15): run-time error CSS1039: Token not allowed after unary operator: '-ezy-rn-sat' (2106,18): run-time error CSS1039: Token not allowed after unary operator: '-ezy-safe-bottom' (2110,27): run-time error CSS1039: Token not allowed after unary operator: '-ezy-rn-sat' (2232,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (2233,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (2234,23): run-time error CSS1039: Token not allowed after unary operator: '-ezy-shell-content-pad-bottom' (2236,26): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (2244,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-shadow' (2256,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-active' (2274,23): run-time error CSS1039: Token not allowed after unary operator: '-ezy-shell-content-pad-bottom' (2282,30): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (2298,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (2299,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (2301,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (2307,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (2360,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2383,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2396,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-page-bg' (2417,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2435,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (2444,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-text' (2464,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2479,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (2480,28): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-border' (2490,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2503,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2514,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2518,28): run-time error CSS1039: Token not allowed after unary operator: '-ezy-pill-border' (2520,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (2551,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (2562,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2580,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2599,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2604,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2609,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2671,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-surface' (2695,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2702,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2715,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-page-bg' (2725,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-page-bg' (2731,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-toolbar-bg' (2736,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-divider' (2744,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-toolbar-bg' (2760,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-muted-surface' (2761,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2766,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-chip-selected-bg' (2767,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-chip-selected-text' (2777,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-accent' (2801,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-item-bg' (2811,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-item-unread-bg' (2823,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-unread-dot' (2841,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2846,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2853,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2859,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2904,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-chip-selected-bg' (2905,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-accent' (2920,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2927,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (2936,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-page-bg' (2961,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-toolbar-bg' (2972,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-header-title' (2980,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-divider' (3000,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (3011,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-drawer-muted' (3022,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-notify-page-bg' (3040,22): run-time error CSS1039: Token not allowed after unary operator: '-ezy-accent' (3055,16): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (3056,17): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-gutter' (3058,21): run-time error CSS1039: Token not allowed after unary operator: '-ezy-phone-max' (3066,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3067,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3068,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3069,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3070,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3071,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3072,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3073,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3074,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3075,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3076,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3077,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3078,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3079,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3080,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3081,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3082,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3083,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3084,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' */ :root { --ezy-sec-page-bg: #F7F7F8; --ezy-sec-surface: #FFFFFF; --ezy-sec-border: #EEEEEE; --ezy-sec-text: #1C1F2A; --ezy-sec-muted: #8A8F9A; --ezy-sec-accent: #FA9F1E; --ezy-sec-accent-strong: #D88608; --ezy-sec-accent-soft: #FFF3E0; --ezy-sec-chip-bg: #F1F2F6; --ezy-sec-card-radius: 16px; --ezy-sec-card-radius-sm: 12px; --ezy-sec-page-pad: 16px; --ezy-sec-head-height: 56px; --ezy-sec-phone-max: 430px; --ezy-sec-shadow-sm: 0 1px 2px rgba(28, 31, 42, 0.04); --ezy-sec-shadow-md: 0 8px 24px rgba(28, 31, 42, 0.08); --ezy-sec-press-ease: cubic-bezier(0.23, 1, 0.32, 1); } body.ezy-theme-dark, html.ezy-theme-dark body, body[data-theme="dark"] { --ezy-sec-page-bg: #121212; --ezy-sec-surface: #1F1F1F; --ezy-sec-border: #333333; --ezy-sec-text: #F5F5F5; --ezy-sec-muted: #B0B0B0; --ezy-sec-accent: #FA9F1E; --ezy-sec-accent-strong: #FFB322; --ezy-sec-accent-soft: #2A2418; --ezy-sec-chip-bg: #2A2A2A; --ezy-sec-shadow-sm: none; --ezy-sec-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.22); } html, body { background: var(--ezy-sec-page-bg); } .ezy-sec-page { min-height: 100vh; background: var(--ezy-sec-page-bg); color: var(--ezy-sec-text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .ezy-sec-frame { width: 100%; max-width: var(--ezy-sec-phone-max); margin: 0 auto; } /* * Canonical secondary header chrome. * Row: [Back?] · Title (start-aligned) · [Trailing?] * Height 56px + safe-area; title 18/700 system stack. */ .ezy-sec-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: var(--ezy-sec-head-height); padding: 0 8px 0 var(--ezy-sec-page-pad); padding-top: env(safe-area-inset-top, 0px); background: var(--ezy-sec-surface); border-bottom: 1px solid var(--ezy-sec-border); box-sizing: border-box; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ezy-sec-text); } .ezy-sec-head.is-under-pill { padding-top: 0; } .ezy-sec-back, .ezy-sec-head-action { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ezy-sec-press-ease), background-color 160ms ease; } .ezy-sec-back svg, .ezy-sec-head-action svg { width: 24px; height: 24px; display: block; } .ezy-sec-back:active, .ezy-sec-head-action:active { transform: scale(0.97); } .ezy-sec-back:hover, .ezy-sec-head-action:hover { background: var(--ezy-sec-chip-bg); } .ezy-sec-title-block { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .ezy-sec-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ezy-sec-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ezy-sec-title-block .ezy-sec-title { flex: 0 0 auto; } .ezy-sec-subtitle { margin: 2px 0 0; color: var(--ezy-sec-muted); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ezy-sec-body { padding: 12px var(--ezy-sec-page-pad) 40px; } .ezy-sec-card { background: var(--ezy-sec-surface); border: 1px solid var(--ezy-sec-border); border-radius: var(--ezy-sec-card-radius); box-shadow: var(--ezy-sec-shadow-sm); } .ezy-sec-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ezy-sec-chip-bg); color: var(--ezy-sec-muted); font-size: 13px; font-weight: 600; } .ezy-sec-chip.is-accent { background: var(--ezy-sec-accent-soft); color: var(--ezy-sec-accent-strong); } @media (prefers-reduced-motion: reduce) { .ezy-sec-back, .ezy-sec-head-action, .ezy-sec-card, .ezy-sec-chip { transition: opacity 120ms ease; } } /* EzyShare Universal Pull-Down-to-Refresh Styles */ html, body { overscroll-behavior-y: contain; } .ezy-pull-refresh-indicator { position: fixed; top: 12px; left: 0; right: 0; margin: 0 auto; width: 40px; height: 40px; z-index: 9999; pointer-events: none; display: flex; align-items: center; justify-content: center; transform: translate3d(0, -100%, 0); opacity: 0; transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.18s ease; will-change: transform, opacity; } .ezy-pull-refresh-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--ezy-card-bg, #ffffff); color: var(--color-primary, #fa9f1e); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); display: flex; align-items: center; justify-content: center; transform: scale(0.8); transition: transform 0.18s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .ezy-pull-refresh-icon { width: 20px; height: 20px; color: var(--color-primary, #fa9f1e); } .ezy-pull-refresh-arrow { display: block; transition: transform 0.1s linear, color 0.2s ease; } .ezy-pull-refresh-spinner { display: none; animation: ezyPullSpin 0.85s linear infinite; } .ezy-pull-spinner-track { stroke: rgba(250, 159, 30, 0.2); } .ezy-pull-spinner-bar { stroke: var(--color-primary, #fa9f1e); stroke-linecap: round; } /* Ready to release state */ .ezy-pull-refresh-indicator.is-ready .ezy-pull-refresh-circle { transform: scale(1.06); box-shadow: 0 4px 16px rgba(250, 159, 30, 0.3), 0 2px 6px rgba(0, 0, 0, 0.12); } /* Refreshing / Loading state */ .ezy-pull-refresh-indicator.is-refreshing { opacity: 1; transform: translate3d(0, 52px, 0); transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .ezy-pull-refresh-indicator.is-refreshing .ezy-pull-refresh-arrow { display: none; } .ezy-pull-refresh-indicator.is-refreshing .ezy-pull-refresh-spinner { display: block; } /* Dark theme integration */ body.ezy-theme-dark .ezy-pull-refresh-circle, .ezy-theme-dark .ezy-pull-refresh-circle { background: var(--ezy-dark-surface, #1e2029); color: var(--color-primary, #fa9f1e); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); } @keyframes ezyPullSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* EzyShare web shell — 1:1 clone of Android PillBottomNavBar + NavSideDrawer tokens. */ :root { /* Phone column — matches dashboard .dash-frame (430px). */ --ezy-phone-max: 430px; --ezy-phone-gutter: max(0px, calc((100vw - min(100vw, var(--ezy-phone-max))) / 2)); --ezy-letterbox-bg: #0F1115; /* * Visible app height for mobile browsers (Safari/Chrome toolbars). * Cascade: vh fallback → dvh → svh (small = chrome fully visible). * JS may override with visualViewport.height as an exact px value. * IMPORTANT: never put 100vh after dvh/svh — that defeats the fix. */ --ezy-app-height: 100vh; --ezy-app-height: 100dvh; --ezy-app-height: 100svh; --ezy-pill-height: 56px; --ezy-pill-radius: 28px; --ezy-pill-item-width: 56px; --ezy-pill-icon-size: 22px; --ezy-pill-inner-pad-h: 6px; --ezy-pill-indicator-w: 20px; --ezy-pill-indicator-h: 3px; --ezy-pill-indicator-bottom: 9px; --ezy-pill-margin-h: 20px; --ezy-pill-margin-bottom: 20px; /* Home-indicator inset. Zeroed under .ezy-browser-chrome because the visual viewport already ends above Safari/Chrome toolbars. */ --ezy-safe-bottom: env(safe-area-inset-bottom, 0px); --ezy-pill-active: #D4AF37; --ezy-pill-inactive: #8A8A8A; --ezy-pill-surface: #FFFFFF; --ezy-pill-border: #C4C4C8; --ezy-pill-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); --ezy-drawer-scrim: rgba(0, 0, 0, 0.6); --ezy-drawer-surface: #FFFFFF; --ezy-drawer-text: #3A3A3A; --ezy-drawer-muted: #8A8A8A; --ezy-drawer-divider: #E8E8EC; --ezy-drawer-width-min: 248px; --ezy-drawer-width-max: 320px; /* Matches Android nav_surface / main_header_title (values + values-night). */ --ezy-header-surface: #FFFFFF; --ezy-header-title: #1F1F1F; --ezy-page-bg: #F7F7F8; --ezy-accent: #FA9F1E; --ezy-muted-surface: #F4F4F5; --ezy-notify-page-bg: #F7F7F8; --ezy-notify-toolbar-bg: #FFFFFF; --ezy-notify-item-bg: #FFFFFF; --ezy-notify-item-unread-bg: #FFF8EE; --ezy-notify-chip-selected-bg: #FFF3E0; --ezy-notify-chip-selected-text: #B36B00; --ezy-notify-unread-dot: #FA9F1E; --ezy-notify-divider: #EEEEEE; --ezy-shell-content-pad-bottom: calc(var(--ezy-pill-height) + var(--ezy-pill-margin-bottom) + var(--ezy-safe-bottom) + 12px); } /* * Mobile Safari/Chrome tabs: browser chrome already clears the home area, so the * Android 20px + safe-area stack makes the pill look too high. Keep full spacing * for desktop phone-column preview and installed/standalone PWAs. */ html.ezy-browser-chrome { --ezy-pill-margin-bottom: 8px; --ezy-safe-bottom: 0px; } html, body, * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Explicit theme (cookie) — same tokens as Android ThemePrefs. */ body.ezy-theme-dark { --ezy-pill-surface: #1F1F1F; --ezy-pill-border: #5A5A5A; --ezy-pill-inactive: #B0B0B0; --ezy-drawer-surface: #1F1F1F; --ezy-drawer-text: #F0EDE6; --ezy-drawer-muted: #B0B0B0; --ezy-drawer-divider: #3A3A3A; --ezy-header-surface: #1F1F1F; --ezy-header-title: #F5F5F5; --ezy-page-bg: #121212; --ezy-letterbox-bg: #050505; --ezy-muted-surface: #2A2A2A; --ezy-notify-page-bg: #121212; --ezy-notify-toolbar-bg: #1F1F1F; --ezy-notify-item-bg: #1F1F1F; --ezy-notify-item-unread-bg: #2A2418; --ezy-notify-chip-selected-bg: #2A2418; --ezy-notify-chip-selected-text: #FFB322; --ezy-notify-unread-dot: #FA9F1E; --ezy-notify-divider: #333333; } body.ezy-theme-light { --ezy-pill-surface: #FFFFFF; --ezy-pill-border: #C4C4C8; --ezy-pill-inactive: #8A8A8A; --ezy-drawer-surface: #FFFFFF; --ezy-drawer-text: #3A3A3A; --ezy-drawer-muted: #8A8A8A; --ezy-drawer-divider: #E8E8EC; --ezy-header-surface: #FFFFFF; --ezy-header-title: #1F1F1F; --ezy-page-bg: #F7F7F8; --ezy-muted-surface: #F4F4F5; --ezy-notify-page-bg: #F7F7F8; --ezy-notify-toolbar-bg: #FFFFFF; --ezy-notify-item-bg: #FFFFFF; --ezy-notify-item-unread-bg: #FFF8EE; --ezy-notify-chip-selected-bg: #FFF3E0; --ezy-notify-chip-selected-text: #B36B00; --ezy-notify-unread-dot: #FA9F1E; --ezy-notify-divider: #EEEEEE; } body.ezy-web-shell { padding-bottom: var(--ezy-shell-content-pad-bottom); background: var(--ezy-letterbox-bg); /* Keep page from stretching wider than a phone even on desktop/laptop. */ overflow-x: hidden; overscroll-behavior-y: contain; } /* Mobile shell host: pill floats over content — no host bottom pad band. */ body.ezy-mobile-shell-host.ezy-web-shell, body.ezy-mobile-shell-host { padding-bottom: 0; background: var(--ezy-letterbox-bg); } /* Centered phone column: page content + sticky header live inside form1. */ body.ezy-web-shell #form1 { max-width: var(--ezy-phone-max); width: 100%; margin-left: auto; margin-right: auto; min-height: var(--ezy-app-height); background: var(--ezy-page-bg); position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.35); } body.ezy-web-shell.ezy-chrome-hidden { padding-bottom: 0; } body.ezy-web-shell.ezy-overlay-open { overflow: hidden; } #ezyShellHeader { display: none; align-items: center; gap: 8px; padding: 6px 12px 10px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); background: var(--ezy-header-surface); color: var(--ezy-header-title); border-bottom: none; border-radius: 0 0 16px 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); position: absolute; top: 0; left: 0; right: 0; z-index: 900; width: 100%; max-width: var(--ezy-phone-max); box-sizing: border-box; } body.ezy-web-shell.ezy-tab-home #ezyShellHeader { display: flex; } /* Tab host = in-app WebView slot: keeps pill + drawer while showing Education/Mall/etc. */ #ezyShellTabHost { display: none; position: fixed; top: 0; left: var(--ezy-phone-gutter); right: var(--ezy-phone-gutter); width: auto; max-width: var(--ezy-phone-max); bottom: var(--ezy-shell-content-pad-bottom); z-index: 1100; background: var(--ezy-header-surface); flex-direction: column; margin-left: auto; margin-right: auto; overflow: hidden; } body.ezy-web-shell.ezy-tab-hosted #ezyShellTabHost { display: flex; } body.ezy-web-shell.ezy-tab-hosted.ezy-chrome-hidden #ezyShellTabHost { bottom: 0; } /* Dedicated mobile.aspx shell host — chrome stays on one page, content in iframe. */ body.ezy-mobile-shell-host { margin: 0; height: var(--ezy-app-height); max-height: var(--ezy-app-height); overflow: hidden; background: var(--ezy-letterbox-bg); } body.ezy-mobile-shell-host #form1 { display: flex; flex-direction: column; max-width: var(--ezy-phone-max); width: 100%; height: 100%; max-height: 100%; margin-left: auto; margin-right: auto; background: var(--ezy-page-bg); padding-bottom: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.35); box-sizing: border-box; } body.ezy-mobile-shell-host #ezyShellTabHost { display: flex; flex: 1 1 auto; min-height: 0; position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; max-width: none; z-index: 1; background: transparent; } body.ezy-mobile-shell #ezyShellTabHost, body.ezy-mobile-shell-host.ezy-tab-hosted #ezyShellTabHost { display: flex; flex: 1 1 auto; min-height: 0; position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; max-width: none; z-index: 1; } body.ezy-mobile-shell #ezyShellHeader { flex: 0 0 auto; position: relative; max-width: none; } body.ezy-mobile-shell.ezy-tab-home #ezyShellHeader { display: flex; /* fixed + own layer: Android WebView composites iframes above an absolute sibling. */ position: fixed; top: 0; left: var(--ezy-phone-gutter); right: var(--ezy-phone-gutter); width: auto; max-width: var(--ezy-phone-max); margin-left: auto; margin-right: auto; z-index: 900; transform: translateZ(0); } /* Content fills under the floating header so dash-sky shows in the rounded corners. */ body.ezy-mobile-shell.ezy-tab-home #ezyShellTabHost { z-index: 1; } body.ezy-web-shell.ezy-tab-home #ezyShellHeader { position: fixed; top: 0; left: var(--ezy-phone-gutter); right: var(--ezy-phone-gutter); width: auto; max-width: var(--ezy-phone-max); margin-left: auto; margin-right: auto; z-index: 900; transform: translateZ(0); } body.ezy-mobile-shell:not(.ezy-tab-home) #ezyShellHeader { display: none; } body.ezy-web-shell.ezy-tab-home.ezy-chrome-hidden #ezyShellHeader, body.ezy-web-shell.ezy-tab-home.ezy-overlay-open #ezyShellHeader, body.ezy-mobile-shell.ezy-tab-home.ezy-chrome-hidden #ezyShellHeader, body.ezy-mobile-shell.ezy-tab-home.ezy-overlay-open #ezyShellHeader { display: none; } #ezyShellTabFrame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: transparent; } #ezyShellHeaderLogo { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; flex: 0 0 auto; } #ezyShellHeaderText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0; line-height: 1.15; } #ezyShellHeaderGreeting { font-size: 11px; font-weight: 500; color: var(--ezy-drawer-muted); line-height: 1.15; } #ezyShellHeaderTitle { font-size: 14px; font-weight: 700; color: var(--ezy-header-title); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ezyShellHeaderSubtitle { display: none; } #ezyShellCountryChip { display: inline-flex; align-items: center; gap: 6px; height: 36px; min-width: 36px; max-width: 220px; padding: 0 10px 0 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.28); background: linear-gradient(180deg, #1B6BB5 0%, #4A9FD4 45%, #1A5C3A 100%); background-size: cover; background-position: center; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); cursor: pointer; flex: 0 0 auto; position: relative; overflow: hidden; } #ezyShellCountryChip::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); pointer-events: none; } #ezyShellCountryChip > * { position: relative; z-index: 1; } #ezyShellCountryChip.ezy-country-sig-my { background-color: #1A5C3A; background-image: url("../images/country/MY.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-cn { background-color: #1F503E; background-image: url("../images/country/CN.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-th { background-color: #1B85E7; background-image: url("../images/country/TH.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-id { background-color: #53457A; background-image: url("../images/country/ID.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-sa { background-color: #474749; background-image: url("../images/country/SA.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-jp { background-color: #2F3E5B; background-image: url("../images/country/JP.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-kr { background-color: #2A3443; background-image: url("../images/country/KR.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-sg { background-color: #2E4453; background-image: url("../images/country/SG.webp"); background-size: cover; background-position: center; } #ezyShellCountryChip.ezy-country-sig-hk { background-color: #3A453F; background-image: url("../images/country/HK.webp"); background-size: cover; background-position: center; } .ezy-country-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } .ezy-country-name { line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .ezy-country-chevron { width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.9; } #ezyShellNotifyBtn { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ezy-drawer-muted); cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .ezy-notify-bell { width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.1 2.1 0 0 0 2.1-2h-4.2A2.1 2.1 0 0 0 12 22zm6.7-6.1c-.7-.8-1.7-2.1-1.7-5.1v-1.3a5 5 0 0 0-4-4.9V3.5a1 1 0 1 0-2 0v1.1a5 5 0 0 0-4 4.9V10.8c0 3-1 4.3-1.7 5.1A1 1 0 0 0 6 17.5h12a1 1 0 0 0 .7-1.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.1 2.1 0 0 0 2.1-2h-4.2A2.1 2.1 0 0 0 12 22zm6.7-6.1c-.7-.8-1.7-2.1-1.7-5.1v-1.3a5 5 0 0 0-4-4.9V3.5a1 1 0 1 0-2 0v1.1a5 5 0 0 0-4 4.9V10.8c0 3-1 4.3-1.7 5.1A1 1 0 0 0 6 17.5h12a1 1 0 0 0 .7-1.6z'/%3E%3C/svg%3E") center / contain no-repeat; } .ezy-notify-badge { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #D50000; color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; } #ezyShellCountrySheet { display: none; position: fixed; top: 0; bottom: 0; left: var(--ezy-phone-gutter); right: var(--ezy-phone-gutter); width: auto; max-width: var(--ezy-phone-max); margin-left: auto; margin-right: auto; z-index: 2400; } #ezyShellCountrySheet.is-visible { display: block; } .ezy-country-sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .ezy-country-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow: auto; background: var(--ezy-drawer-surface); border-radius: 24px 24px 0 0; padding: 12px 16px 24px; box-sizing: border-box; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22); } .ezy-country-sheet-handle { width: 48px; height: 4px; border-radius: 2px; background: #CFD4DC; margin: 0 auto 12px; } #ezyShellCountrySheetTitle { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--ezy-header-title); line-height: 1.3; } .ezy-country-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ezy-country-tile { position: relative; height: 80px; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .ezy-country-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.45) 100%); } .ezy-country-tile span { position: relative; z-index: 1; } .ezy-country-tile.ezy-country-sig-my { background-color: #1A5C3A; background-image: url("../images/country/MY.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-cn { background-color: #1F503E; background-image: url("../images/country/CN.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-th { background-color: #1B85E7; background-image: url("../images/country/TH.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-id { background-color: #53457A; background-image: url("../images/country/ID.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-sa { background-color: #474749; background-image: url("../images/country/SA.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-jp { background-color: #2F3E5B; background-image: url("../images/country/JP.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-kr { background-color: #2A3443; background-image: url("../images/country/KR.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-sg { background-color: #2E4453; background-image: url("../images/country/SG.webp"); background-size: cover; background-position: center; } .ezy-country-tile.ezy-country-sig-hk { background-color: #3A453F; background-image: url("../images/country/HK.webp"); background-size: cover; background-position: center; } /* Legacy lang dialog styles kept for Edit Profile reuse via shared class names. */ #ezyShellLangChip { display: none; } .ezy-lang-flag { display: block; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .ezy-lang-flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%2300247D'/%3E%3Cpath stroke='%23fff' stroke-width='5' d='M16 0v32M0 16h32'/%3E%3Cpath stroke='%23CF142B' stroke-width='3' d='M16 0v32M0 16h32'/%3E%3Cpath stroke='%23fff' stroke-width='3.5' d='M0 0l32 32M32 0L0 32'/%3E%3Cpath stroke='%23CF142B' stroke-width='1.5' d='M0 0l32 32M32 0L0 32'/%3E%3C/svg%3E"); } .ezy-lang-flag-ms { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='32' height='32' fill='%23fff'/%3E%3Cpath fill='%23CC0000' d='M0 0h32v2.3H0zm0 4.6h32v2.3H0zm0 4.6h32v2.3H0zm0 4.6h32v2.3H0zm0 4.6h32v2.3H0zm0 4.6h32v2.3H0zm0 4.6h32V32H0z'/%3E%3Crect width='16' height='16' fill='%23000066'/%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='%23FFCC00' stroke-width='2.2'/%3E%3Ccircle cx='9.2' cy='8' r='4' fill='%23000066'/%3E%3Cpath fill='%23FFCC00' d='M12.5 8l1.1-3.2.7 3.3 2.6-2.1-2 2.6 3.3.3-3.1 1.2 2.1 2.5-2.9-1.5.3 3.3-1.8-2.8-1.8 2.8.3-3.3-2.9 1.5 2.1-2.5-3.1-1.2 3.3-.3-2-2.6z'/%3E%3C/g%3E%3C/svg%3E"); } .ezy-lang-flag-zh { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='32' height='32' fill='%23DE2910'/%3E%3Cpath fill='%23FFDE00' d='M7 4.5l1.1 3.3H12l-2.6 2 1 3.3L7 11.2 3.6 13.1l1-3.3-2.6-2h3.9z'/%3E%3C/g%3E%3C/svg%3E"); } #ezyShellPillNav { position: fixed; left: calc(var(--ezy-phone-gutter) + var(--ezy-pill-margin-h)); right: calc(var(--ezy-phone-gutter) + var(--ezy-pill-margin-h)); bottom: calc(var(--ezy-pill-margin-bottom) + var(--ezy-safe-bottom)); height: var(--ezy-pill-height); z-index: 1200; display: none; justify-content: flex-start; pointer-events: none; max-width: calc(var(--ezy-phone-max) - (var(--ezy-pill-margin-h) * 2)); margin-left: auto; margin-right: auto; } /* * Keep the pill inside #form1 on the dedicated mobile host. Viewport-fixed * bottom on iOS Safari is measured against the large viewport, so the close * circle can slip under the browser chrome while the drawer (absolute in * #form1) stays correctly clipped to the visible phone column. */ body.ezy-mobile-shell-host #ezyShellPillNav { position: absolute; left: var(--ezy-pill-margin-h); right: var(--ezy-pill-margin-h); } body.ezy-web-shell #ezyShellPillNav { display: flex; } body.ezy-web-shell.ezy-chrome-hidden #ezyShellPillNav { display: none; } /* Overlay is fullscreen modal only — tab host keeps the pill visible. */ body.ezy-web-shell.ezy-overlay-open #ezyShellPillNav { display: none; } .ezy-pill-nav-inner { pointer-events: auto; position: relative; display: inline-flex; align-items: stretch; height: var(--ezy-pill-height); padding: 0 var(--ezy-pill-inner-pad-h); border-radius: var(--ezy-pill-radius); background: var(--ezy-pill-surface); border: 1px solid var(--ezy-pill-border); box-shadow: var(--ezy-pill-shadow); box-sizing: border-box; overflow: hidden; flex: 0 0 auto; will-change: transform, width; } .ezy-pill-nav-row { display: inline-flex; align-items: stretch; height: 100%; will-change: transform; } .ezy-pill-indicator { position: absolute; left: 0; bottom: var(--ezy-pill-indicator-bottom); width: var(--ezy-pill-indicator-w); height: var(--ezy-pill-indicator-h); border-radius: 2px; background: var(--ezy-pill-active); pointer-events: none; will-change: transform, opacity; z-index: 2; } #ezyShellPillNav.ezy-pill-menu-open { z-index: 1400; } .ezy-pill-inner-circle { justify-content: center; } .ezy-pill-tab { position: relative; width: var(--ezy-pill-item-width); flex: 0 0 auto; overflow: hidden; border: 0; background: transparent; color: var(--ezy-pill-inactive); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: transform, opacity, width; } .ezy-pill-tab svg { width: var(--ezy-pill-icon-size); height: var(--ezy-pill-icon-size); } .ezy-pill-tab.is-active { color: var(--ezy-pill-active); } .ezy-pill-menu-icon-open, .ezy-pill-menu-icon-close { display: flex; width: var(--ezy-pill-icon-size); height: var(--ezy-pill-icon-size); align-items: center; justify-content: center; transition: opacity 120ms ease; } /* Stacked so hamburger↔X can crossfade without a display:none layout hitch. */ .ezy-pill-menu-icon-close { position: absolute; inset: 0; margin: auto; opacity: 0; pointer-events: none; } /* Optical size only — Android close path fills the 24px box; keep morph on the synced glyph and shrink the SVG so the circle X matches the old visual weight. */ .ezy-pill-menu-icon-close svg { width: 16px; height: 16px; } .ezy-pill-menu.ezy-pill-menu-close { color: var(--ezy-pill-active); } .ezy-pill-menu .ezy-pill-menu-icon-open { opacity: 1; } .ezy-pill-menu.ezy-pill-menu-close .ezy-pill-menu-icon-open { opacity: 0; } .ezy-pill-menu.ezy-pill-menu-close .ezy-pill-menu-icon-close { opacity: 1; } /* * Absolute inside #form1 (not viewport-fixed) so overflow:hidden on the phone * column clips the slide. translateX(100%) must not paint into the letterbox. */ #ezyShellDrawer { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; z-index: 1300; pointer-events: none; visibility: hidden; overflow: hidden; } #ezyShellDrawer.is-visible { pointer-events: auto; visibility: visible; } /* Closed drawer is a full-screen sibling of the dashboard iframe. visibility + pointer-events:none still swallows iframe touches on Android WebView. */ #ezyShellDrawer:not(.is-visible) { display: none; } #ezyShellDrawerScrim { position: absolute; inset: 0; background: var(--ezy-drawer-scrim); /* Opacity driven by JS menuProgress with the pill morph — no CSS transition. */ opacity: 0; } #ezyShellDrawerPanel { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(var(--ezy-drawer-width-min), 78%, var(--ezy-drawer-width-max)); max-width: 100%; background: var(--ezy-drawer-surface); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16); /* Transform driven by JS menuProgress with the pill morph — no CSS transition. */ transform: translateX(100%); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); will-change: transform; } .ezy-drawer-profile { margin: 16px 16px 12px; border-radius: 12px; overflow: hidden; background: #F3F4F6; aspect-ratio: 394 / 249; position: relative; } .ezy-drawer-profile.has-namecard { aspect-ratio: auto; background: transparent; overflow: visible; } .ezy-drawer-namecard-frame { position: relative; width: 100%; aspect-ratio: 394 / 249; overflow: hidden; border-radius: 12px; background: #000; } .ezy-drawer-namecard-canvas { position: absolute; top: 0; left: 0; width: 394px; height: 249px; transform-origin: top left; transform: scale(var(--card-scale, 1)); font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow: hidden; } /* Naga Bugis-style sweep — matches Android CardShineAnimator (3s, ease, pause). */ .ezy-drawer-namecard-shine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-100%); animation: ezy-card-shine-sweep 3s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; } @keyframes ezy-card-shine-sweep { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .ezy-drawer-namecard-shine { animation: none; opacity: 0; } .ezy-badge-beam-path { animation: none; stroke-dasharray: none; stroke: #E7AA51; opacity: 0.7; } .ezy-badge-beam-path.is-delayed { opacity: 0; } } .ezy-drawer-namecard-bg { position: absolute; top: 0; left: 0; width: 394px; height: 249px; object-fit: fill; display: block; } /* Hex clip only — gold ring is baked into ecard_blank.png (enamecard2). */ .ezy-drawer-namecard-avatar { position: absolute; left: 18px; top: 50px; width: 102px; height: 118px; border-radius: 0; object-fit: cover; background: #000; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .ezy-drawer-namecard-avatar-frame { display: none; } .ezy-drawer-namecard-status, .ezy-drawer-namecard-name, .ezy-drawer-namecard-ai, .ezy-drawer-namecard-ranking, .ezy-drawer-namecard-id, .ezy-drawer-namecard-since, .ezy-drawer-namecard-country, .ezy-drawer-namecard-mobile, .ezy-drawer-namecard-email { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } /* Not in current overlay export — hide so they don't collide with the hex avatar. */ .ezy-drawer-namecard-status, .ezy-drawer-namecard-ai, .ezy-drawer-namecard-ranking { display: none; } .ezy-drawer-namecard-name { left: 148px; top: 58px; width: 140px; font-size: 13px; font-weight: 800; } .ezy-drawer-namecard-qr { position: absolute; left: 298px; top: 72px; width: 74px; height: 74px; background: #D9D9D9; object-fit: contain; display: block; } /* Icon-only blank: values sit just after the baked gold icons. */ .ezy-drawer-namecard-id, .ezy-drawer-namecard-since, .ezy-drawer-namecard-country, .ezy-drawer-namecard-mobile { left: 160px; width: 120px; font-size: 8px; } .ezy-drawer-namecard-id { top: 96px; } .ezy-drawer-namecard-since { top: 115px; } .ezy-drawer-namecard-country { top: 134px; } .ezy-drawer-namecard-mobile { top: 152px; left: 159px; } .ezy-drawer-namecard-email { left: 160px; top: 172px; width: 120px; font-size: 7px; } /* Free Member (RL01): fully digital flat card — no premium blank art. */ .ezy-drawer-namecard-canvas.is-basic-rank { background: #f3f3f5; box-shadow: inset 0 0 0 1px #c9c9d0; } .ezy-drawer-namecard-canvas.is-basic-rank::before { content: ""; position: absolute; left: 12px; top: 10px; width: 34px; height: 34px; background: url("../images/logo.png") center / contain no-repeat; z-index: 1; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-bg { display: none !important; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-avatar { left: 16px; top: 70px; width: 74px; height: 74px; border-radius: 50%; clip-path: none; -webkit-clip-path: none; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); background: #ddd; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-avatar-frame { display: none !important; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-status, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-ai { display: none !important; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-ranking { display: block; left: 250px; top: 12px; width: 130px; height: auto; line-height: 1.2; font-size: 8px; font-weight: 700; color: #7a7a86; text-align: right; letter-spacing: .02em; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-name { left: 104px; top: 70px; width: 170px; color: #1a1a1f; font-size: 14px; font-weight: 800; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-qr { left: 300px; top: 88px; width: 72px; height: 72px; background: #fff; border: 1px solid #d0d0d6; border-radius: 6px; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-id, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-since, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-country, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-mobile, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-email { left: 104px; width: 180px; color: #1a1a1f; font-size: 9px; font-weight: 600; line-height: 1.15; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-id::before, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-since::before, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-country::before, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-mobile::before, .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-email::before { display: block; font-size: 6.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8b8b96; margin-bottom: 1px; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-id::before { content: "Member ID"; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-since::before { content: "Member since"; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-country::before { content: "Country"; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-mobile::before { content: "Mobile"; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-email::before { content: "Email"; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-id { top: 96px; height: 22px; white-space: normal; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-since { top: 120px; height: 22px; white-space: normal; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-country { top: 144px; height: 22px; white-space: normal; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-mobile { top: 168px; height: 22px; white-space: normal; } .ezy-drawer-namecard-canvas.is-basic-rank .ezy-drawer-namecard-email { top: 192px; height: 22px; white-space: normal; font-size: 8px; } /* Crest + nameplate pair under the avatar. Keep in sync with businessCard.aspx. */ .ezy-drawer-namecard-badges { position: absolute; display: none; z-index: 5; pointer-events: none; align-items: center; justify-content: flex-start; box-sizing: border-box; gap: 3px; overflow: visible; } .ezy-drawer-namecard-canvas.is-badge-pair .ezy-drawer-namecard-badges { display: flex; } .ezy-badge-beam { position: relative; display: block; flex: 0 0 auto; overflow: visible; } .ezy-badge-beam > img { display: block; width: 100%; height: 100%; object-fit: contain; } .ezy-badge-beam-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .ezy-badge-beam-path { fill: none; stroke: #F8E7C0; stroke-width: 1.75px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0.12 0.88; animation: ezy-badge-border-beam 6s linear infinite; } .ezy-badge-beam-path.is-delayed { stroke: #E7AA51; animation-delay: -3s; } @keyframes ezy-badge-border-beam { to { stroke-dashoffset: -1; } } .ezy-drawer-namecard-canvas.is-badge-pair .ezy-drawer-namecard-ranking { display: none !important; } .ezy-drawer-namecard-canvas.is-basic-rank.is-badge-pair .ezy-drawer-namecard-badges { left: 16px; top: 148px; width: 74px; height: 28px; } .ezy-drawer-namecard-canvas.is-basic-rank.is-badge-pair .ezy-drawer-namecard-badge { width: 28px; height: 28px; } .ezy-drawer-namecard-canvas.is-basic-rank.is-badge-pair .ezy-drawer-namecard-badge-plate { width: 43px; height: 28px; } .ezy-drawer-namecard-canvas.is-badge-pair .ezy-drawer-namecard-badges { left: 18px; top: 178px; width: 103px; height: 39px; gap: 4px; align-items: center; } .ezy-drawer-namecard-canvas.is-badge-pair .ezy-drawer-namecard-badge { width: 39px; height: 39px; } .ezy-drawer-namecard-canvas.is-badge-pair .ezy-drawer-namecard-badge-plate { width: 60px; height: 39px; } .ezy-drawer-profile-edit { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border: 0; border-radius: 16px; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; } .ezy-drawer-profile-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; color: var(--ezy-drawer-muted); font-size: 14px; text-align: center; padding: 16px 28px; box-sizing: border-box; } .ezy-drawer-guest-icon { display: flex; width: 26px; height: 26px; margin-bottom: 8px; color: var(--ezy-drawer-muted); } .ezy-drawer-guest-icon svg { width: 26px; height: 26px; } .ezy-drawer-guest-hint { margin: 0 0 14px; font-size: 12px; line-height: 1.35; color: var(--ezy-drawer-muted); } .ezy-drawer-login-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 26px; border-radius: 20px; border: 1px solid #D4AF37; background: transparent; color: #D4AF37; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ezy-drawer-login-pill:active { opacity: 0.85; } .ezy-drawer-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ezy-drawer-section-title { padding: 10px 20px 6px; font-size: 12px; font-weight: 700; color: var(--ezy-drawer-muted); text-transform: none; } .ezy-drawer-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; border: 0; width: 100%; background: transparent; color: var(--ezy-drawer-text); font-size: 14px; text-align: left; cursor: pointer; } .ezy-drawer-item-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ezy-drawer-muted); flex: 0 0 auto; } .ezy-drawer-item-icon svg { width: 22px; height: 22px; } .ezy-drawer-item-label { flex: 1 1 auto; min-width: 0; } #ezyShellDrawerPinned:not(:empty) { box-sizing: border-box; width: 100%; padding: 10px 12px 4px; } .ezy-drawer-item-highlight { position: relative; overflow: hidden; width: 100%; margin: 0; min-height: 50px; padding: 8px 14px; border: 0; border-radius: 14px; box-sizing: border-box; background: linear-gradient(165deg, #FFE7A3 0%, #F0C14B 46%, #E09A1B 100%); color: #24180A; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 20px rgba(212, 160, 32, 0.32); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } .ezy-drawer-item-highlight::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 62% ); transform: translateX(-100%); animation: ezy-activate-shine 3.2s linear infinite; } .ezy-drawer-item-highlight .ezy-drawer-item-icon, .ezy-drawer-item-highlight .ezy-drawer-item-copy { position: relative; z-index: 1; } .ezy-drawer-item-highlight .ezy-drawer-item-icon { width: 30px; height: 30px; color: #24180A; background: rgba(255, 255, 255, 0.2); border-radius: 50%; } .ezy-drawer-item-highlight .ezy-drawer-item-icon svg { width: 16px; height: 16px; } .ezy-drawer-item-copy { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1 1 auto; } .ezy-drawer-item-highlight .ezy-drawer-item-label { flex: 0 0 auto; font-size: 14px; line-height: 1.15; font-weight: 700; } .ezy-drawer-item-sub { font-size: 11px; line-height: 1.15; font-weight: 500; color: rgba(36, 24, 10, 0.72); } .ezy-drawer-item-highlight:active { transform: scale(0.97); } @keyframes ezy-activate-shine { 0% { transform: translateX(-120%); } 42% { transform: translateX(120%); } 100% { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .ezy-drawer-item-highlight::after { animation: none; opacity: 0; } .ezy-drawer-item-highlight:active { transform: none; opacity: 0.85; } } .ezy-drawer-item-badge { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #D50000; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; } .ezy-drawer-item-badge[hidden] { display: none !important; } .ezy-drawer-divider { height: 1px; background: var(--ezy-drawer-divider); margin: 8px 0 4px; } .ezy-drawer-footer { /* Android alignFooterToCloseButton: 56dp action row on the same band as the close circle, with bottom padding = pill margin so both sit above the home indicator. */ box-sizing: content-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--ezy-pill-height); min-height: var(--ezy-pill-height); padding: 0 20px; padding-bottom: calc(var(--ezy-pill-margin-bottom) + var(--ezy-safe-bottom)); border-top: 1px solid var(--ezy-drawer-divider); flex: 0 0 auto; } .ezy-theme-toggle { position: relative; width: 40px; height: 100%; min-height: 36px; border: 0; background: transparent; color: var(--ezy-drawer-muted); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .ezy-theme-icon { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; display: flex; align-items: center; justify-content: center; color: var(--ezy-drawer-muted); transition: opacity 0.2s ease, transform 0.22s ease; pointer-events: none; } .ezy-theme-icon svg { width: 22px; height: 22px; } /* Light mode → show moon (tap to go dark). Dark mode → show sun (tap to go light). */ .ezy-theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); } .ezy-theme-icon-sun { opacity: 0; transform: rotate(45deg) scale(0.82); } body.ezy-theme-dark .ezy-theme-icon-moon { opacity: 0; transform: rotate(-45deg) scale(0.82); } body.ezy-theme-dark .ezy-theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); } /* System dark when no explicit theme yet */ @media (prefers-color-scheme: dark) { body.ezy-web-shell:not(.ezy-theme-light):not(.ezy-theme-dark) .ezy-theme-icon-moon { opacity: 0; transform: rotate(-45deg) scale(0.82); } body.ezy-web-shell:not(.ezy-theme-light):not(.ezy-theme-dark) .ezy-theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); } } .ezy-drawer-logout { border: 0; background: transparent; color: var(--ezy-drawer-muted); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; height: 100%; padding: 0 4px 0 8px; -webkit-tap-highlight-color: transparent; } .ezy-drawer-logout-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--ezy-drawer-muted); flex: 0 0 auto; } .ezy-drawer-logout-icon svg { width: 22px; height: 22px; } .ezy-drawer-logout-label { color: var(--ezy-drawer-muted); font-size: 14px; line-height: 1; } #ezyShellOverlay { position: fixed; top: 0; bottom: 0; left: var(--ezy-phone-gutter); right: var(--ezy-phone-gutter); width: auto; max-width: var(--ezy-phone-max); margin-left: auto; margin-right: auto; z-index: 1400; display: flex; flex-direction: column; background: var(--ezy-page-bg); overflow: hidden; visibility: hidden; pointer-events: none; transform: translateY(100%); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 320ms; } body.ezy-mobile-shell-host #ezyShellOverlay { position: absolute; left: 0; right: 0; max-width: none; } #ezyShellOverlay.is-visible { visibility: visible; pointer-events: auto; transform: translateY(0); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s; } /* Native-like title bar for remote pages (wallet history) that have no in-page chrome */ .ezy-overlay-head { flex: 0 0 auto; display: none; align-items: center; gap: 4px; min-height: 56px; padding: 0 8px 0 16px; padding-top: env(safe-area-inset-top, 0px); background: var(--ezy-header-surface, #fff); color: var(--ezy-header-title, #1F1F1F); border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-sizing: border-box; z-index: 2; } #ezyShellOverlay.has-header .ezy-overlay-head { display: flex; } #ezyShellOverlayHead[hidden] { display: none !important; } .ezy-overlay-back { width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ezy-overlay-back:active { background: rgba(0, 0, 0, 0.06); } .ezy-overlay-back svg { width: 22px; height: 22px; display: block; } .ezy-overlay-title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ezyShellOverlayFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ezy-page-bg); } #ezyShellOverlay.has-header #ezyShellOverlayFrame { position: relative; inset: auto; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; } /* Content skeleton. Under the header, inside the top and bottom safe areas. */ .ezy-pulse-cover { position: absolute; inset: 0; z-index: 1; display: none; align-items: stretch; justify-content: flex-start; box-sizing: border-box; padding: 16px; background: #fff; pointer-events: none; } /* Other tabs: header is hidden, so only the safe insets. box-sizing keeps the cover in the host. */ #ezyShellTabHost > .ezy-pulse-cover { top: var(--ezy-rn-sat, env(safe-area-inset-top, 0px)); right: 0; bottom: var(--ezy-safe-bottom); left: 0; } /* Pill overlays the flex host; stop above the pill and the system nav. */ body.ezy-mobile-shell-host #ezyShellTabHost > .ezy-pulse-cover { bottom: calc(var(--ezy-pill-height) + var(--ezy-pill-margin-bottom) + var(--ezy-safe-bottom)); } /* Home header floats over the host (6+36+10 plus the status inset). */ body.ezy-tab-home:not(.ezy-chrome-hidden):not(.ezy-overlay-open) #ezyShellTabHost > .ezy-pulse-cover { top: calc(52px + var(--ezy-rn-sat, env(safe-area-inset-top, 0px))); } body.ezy-mobile-shell-host.ezy-chrome-hidden #ezyShellTabHost > .ezy-pulse-cover, body.ezy-mobile-shell-host.ezy-overlay-open #ezyShellTabHost > .ezy-pulse-cover { top: var(--ezy-rn-sat, env(safe-area-inset-top, 0px)); bottom: var(--ezy-safe-bottom); } #ezyShellOverlay .ezy-pulse-cover { top: var(--ezy-rn-sat, env(safe-area-inset-top, 0px)); bottom: var(--ezy-safe-bottom); } #ezyShellOverlay.has-header .ezy-pulse-cover { top: calc(56px + var(--ezy-rn-sat, env(safe-area-inset-top, 0px))); } .ezy-pulse-cover.is-visible { display: flex; pointer-events: auto; } .ezy-pulse-cover .ezy-skel { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .ezy-skel-search, .ezy-skel-wallet, .ezy-skel-banner, .ezy-skel-title, .ezy-skel-circle, .ezy-skel-product { display: block; background: #E4E4E7; animation: ezySkel 1.2s ease-in-out infinite; flex: 0 0 auto; } .ezy-skel-search { height: 40px; width: 100%; border-radius: 20px; } .ezy-skel-row { display: flex; gap: 10px; width: 100%; } .ezy-skel-wallet { flex: 1 1 0; height: 112px; border-radius: 16px; } .ezy-skel-banner { height: 120px; width: 100%; border-radius: 18px; } .ezy-skel-title { height: 14px; width: 40%; border-radius: 8px; } .ezy-skel-circle { width: 48px; height: 48px; border-radius: 50%; } .ezy-skel-product { flex: 1 1 0; height: 148px; border-radius: 14px; } /* Drawer profile while markup has not been painted yet. */ .ezy-drawer-profile .ezy-skel { position: absolute; inset: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .ezy-skel-avatar, .ezy-skel-line, .ezy-skel-card { display: block; background: #E4E4E7; animation: ezySkel 1.2s ease-in-out infinite; } .ezy-skel-avatar { width: 56px; height: 56px; border-radius: 50%; } .ezy-skel-line { height: 12px; width: 70%; border-radius: 8px; } .ezy-skel-line-short { width: 40%; } .ezy-skel-card { height: 96px; width: 100%; border-radius: 12px; } @keyframes ezySkel { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } body.ezy-overlay-open #ezyShellAppBanner { display: none; } #ezyShellAppBanner { display: none; position: fixed; left: calc(var(--ezy-phone-gutter) + 12px); right: calc(var(--ezy-phone-gutter) + 12px); bottom: calc(var(--ezy-shell-content-pad-bottom) + 8px); z-index: 1100; max-width: calc(var(--ezy-phone-max) - 24px); margin-left: auto; margin-right: auto; background: #1F1F1F; color: #FFFFFF; border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: var(--ezy-pill-shadow); } body.ezy-web-shell #ezyShellAppBanner.is-visible { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #ezyShellAppBanner button { border: 0; background: var(--ezy-pill-active); color: #1F1F1F; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; } #ezyShellAppBanner .ezy-banner-dismiss { background: transparent; color: #FFFFFF; font-weight: 500; } #ezyShellToast { position: fixed; left: 50%; bottom: calc(var(--ezy-shell-content-pad-bottom) + 12px); transform: translateX(-50%); z-index: 1500; background: rgba(31, 31, 31, 0.92); color: #FFFFFF; padding: 10px 14px; border-radius: 10px; font-size: 13px; max-width: min(calc(var(--ezy-phone-max) - 32px), 320px); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #ezyShellToast.is-visible { opacity: 1; } /* Fullscreen shell pages (Navigation, Notifications) — fade+scale like native. */ .ezy-shell-page { position: fixed; top: 0; bottom: 0; left: var(--ezy-phone-gutter); right: var(--ezy-phone-gutter); width: auto; max-width: var(--ezy-phone-max); margin-left: auto; margin-right: auto; z-index: 1600; display: none; flex-direction: column; background: var(--ezy-drawer-surface); overflow: hidden; visibility: hidden; pointer-events: none; opacity: 0; transform: scale(0.97); transform-origin: center center; transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 240ms; } .ezy-shell-page.is-visible { display: flex; visibility: visible; pointer-events: auto; opacity: 1; transform: scale(1); transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s; } body.ezy-notify-open #ezyShellOverlay { z-index: 1700; } .ezy-shell-page-header { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 56px; padding-top: env(safe-area-inset-top, 0px); padding-right: 8px; padding-left: 16px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-sizing: border-box; } .ezy-shell-page-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--ezy-header-title); cursor: pointer; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; } .ezy-shell-page-back:active { opacity: 0.7; } .ezy-shell-page-back svg { width: 22px; height: 22px; } .ezy-shell-page-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ezy-header-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ezyNavCustomizePanel { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; background: var(--ezy-notify-page-bg); display: flex; flex-direction: column; } #ezyNotifyPanel .ezy-sec-head, #ezyNotifyDetailHeader.ezy-sec-head { border-bottom: 0; position: relative; } #ezyNavCustomizeMore { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--ezy-drawer-muted); cursor: pointer; flex: 0 0 auto; } #ezyNavCustomizeMore svg { width: 24px; height: 24px; } #ezyNavCustomizeOverflow { position: absolute; top: 100%; right: 8px; z-index: 2; min-width: 180px; padding: 8px 0; border-radius: 8px; background: var(--ezy-drawer-surface); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); } #ezyNavCustomizeReset { display: block; width: 100%; border: 0; background: transparent; color: var(--ezy-drawer-text); font-size: 15px; text-align: left; padding: 12px 16px; cursor: pointer; } #ezyNavCustomizeBody { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); } #ezyNavCustomizePreviewCaption { margin: 0; padding-bottom: 10px; text-align: center; font-size: 13px; color: var(--ezy-drawer-muted); } #ezyNavCustomizePreviewCard { display: flex; justify-content: center; margin-bottom: 20px; } #ezyNavCustomizePreview { display: inline-flex; align-items: center; height: 56px; padding: 0 10px; border-radius: 28px; background: var(--ezy-drawer-surface); border: 1px solid var(--ezy-pill-border); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); } .ezy-nav-preview-slot { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: var(--ezy-drawer-muted); } .ezy-nav-preview-slot svg { width: 22px; height: 22px; } .ezy-nav-customize-section-title { margin: 0; padding-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--ezy-header-title); } .ezy-nav-customize-section-sidebar { padding-top: 24px; } .ezy-nav-customize-hint { margin: 0; padding-bottom: 10px; font-size: 12px; color: var(--ezy-drawer-muted); } .ezy-nav-customize-card { border: 1px solid var(--ezy-pill-border); border-radius: 16px; background: var(--ezy-drawer-surface); padding: 4px 0; overflow: hidden; box-shadow: 0 1px 2px rgba(28, 31, 42, 0.04); } .ezy-nav-customize-row { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 0 8px 0 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; box-sizing: border-box; } .ezy-nav-customize-row.is-locked { opacity: 0.85; } .ezy-nav-customize-row.is-add { cursor: pointer; } .ezy-nav-customize-row.is-dragging { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16); transform: scale(0.98); background: var(--ezy-drawer-surface); position: relative; z-index: 1; } .ezy-nav-customize-drag { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--ezy-drawer-muted); cursor: grab; touch-action: none; flex: 0 0 auto; } .ezy-nav-customize-drag svg { width: 20px; height: 20px; } .ezy-nav-customize-icon { width: 24px; height: 24px; margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ezy-drawer-muted); flex: 0 0 auto; } .ezy-nav-customize-icon svg { width: 24px; height: 24px; } .ezy-nav-customize-text { flex: 1 1 auto; min-width: 0; margin-left: 12px; display: flex; flex-direction: column; } .ezy-nav-customize-label { font-size: 15px; color: var(--ezy-header-title); line-height: 1.25; } .ezy-nav-customize-row.is-locked .ezy-nav-customize-label { color: var(--ezy-drawer-muted); } .ezy-nav-customize-meta { font-size: 11px; color: var(--ezy-drawer-muted); margin-top: 1px; } .ezy-nav-customize-remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 20px; background: transparent; color: #888888; cursor: pointer; flex: 0 0 auto; } .ezy-nav-customize-remove svg { width: 18px; height: 18px; } #ezyNavCustomizePicker { position: absolute; inset: 0; z-index: 3; display: flex; visibility: hidden; pointer-events: none; align-items: stretch; justify-content: center; } #ezyNavCustomizePicker.is-visible { visibility: visible; pointer-events: auto; } #ezyNavCustomizePickerScrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1); } #ezyNavCustomizePicker.is-visible #ezyNavCustomizePickerScrim { opacity: 1; } #ezyNavCustomizePickerSheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 70%; overflow-y: auto; padding: 10px 0 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ezy-drawer-surface); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16); transform: translateY(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); } #ezyNavCustomizePicker.is-visible #ezyNavCustomizePickerSheet { transform: translateY(0); } .ezy-nav-picker-handle { width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: rgba(136, 136, 136, 0.4); } #ezyNavCustomizePickerSheet h3 { margin: 0; padding: 4px 20px; font-size: 17px; font-weight: 700; color: var(--ezy-header-title); } #ezyNavCustomizePickerSheet > p { margin: 0; padding: 0 20px 8px; font-size: 13px; color: var(--ezy-drawer-muted); } #ezyNavCustomizePickerList .ezy-nav-customize-row { cursor: pointer; } body.ezy-nav-customize-open, body.ezy-notify-open { overflow: hidden; } #ezyShellNotifications { background: var(--ezy-notify-page-bg); } #ezyNotifyPanel { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; background: var(--ezy-notify-page-bg); display: flex; flex-direction: column; } #ezyNotifyPanel .ezy-shell-page-header { background: var(--ezy-notify-toolbar-bg); } #ezyNotifyDivider { height: 1px; background: var(--ezy-notify-divider); flex: 0 0 auto; } #ezyNotifySummary { display: flex; align-items: center; flex: 0 0 auto; background: var(--ezy-notify-toolbar-bg); padding: 10px 16px; gap: 8px; } #ezyNotifySummary[hidden] { display: none; } .ezy-notify-chip { border: 0; border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 700; line-height: 1; background: var(--ezy-muted-surface); color: var(--ezy-drawer-muted); cursor: pointer; } .ezy-notify-chip.is-selected { background: var(--ezy-notify-chip-selected-bg); color: var(--ezy-notify-chip-selected-text); } .ezy-notify-summary-spacer { flex: 1 1 auto; } .ezy-notify-mark-all { border: 0; background: transparent; color: var(--ezy-accent); font-size: 12px; font-weight: 700; padding: 8px 10px; cursor: pointer; } #ezyNotifyBody { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } .ezy-notify-item { display: flex; align-items: flex-start; width: 100%; margin: 0 0 10px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--ezy-notify-item-bg); color: inherit; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; transition: transform 110ms cubic-bezier(0.23, 1, 0.32, 1); } .ezy-notify-item.is-unread { background: var(--ezy-notify-item-unread-bg); } .ezy-notify-item:active { transform: scale(0.985); } .ezy-notify-dot { width: 8px; height: 8px; margin: 6px 12px 0 0; border-radius: 50%; background: var(--ezy-notify-unread-dot); flex: 0 0 auto; visibility: hidden; } .ezy-notify-item.is-unread .ezy-notify-dot { visibility: visible; } .ezy-notify-item-body { flex: 1 1 auto; min-width: 0; } .ezy-notify-item-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ezy-header-title); } .ezy-notify-item:not(.is-unread) .ezy-notify-item-title { font-weight: 400; color: var(--ezy-drawer-muted); } .ezy-notify-item-msg { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ezy-drawer-muted); } .ezy-notify-item-date { margin-top: 8px; font-size: 11px; color: var(--ezy-drawer-muted); } .ezy-notify-item-banner { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; margin-top: 8px; } #ezyNotifyDetailBanner { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: 12px; margin-top: 14px; } #ezyNotifyDetailBanner[hidden] { display: none; } #ezyNotifyEmpty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; } #ezyNotifyEmpty[hidden] { display: none; } .ezy-notify-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ezy-notify-chip-selected-bg); color: var(--ezy-accent); display: flex; align-items: center; justify-content: center; } .ezy-notify-empty-icon svg { width: 28px; height: 28px; } #ezyNotifyEmptyTitle { margin-top: 20px; font-size: 17px; font-weight: 700; color: var(--ezy-header-title); } #ezyNotifyEmptyHint { margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--ezy-drawer-muted); } #ezyNotifyDetail { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--ezy-notify-page-bg); padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden; pointer-events: none; opacity: 0; transform: scale(0.97); transform-origin: center center; transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 240ms; } #ezyNotifyDetail.is-visible { visibility: visible; pointer-events: auto; opacity: 1; transform: scale(1); transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s; } #ezyNotifyDetailHeader { background: var(--ezy-notify-toolbar-bg); flex: 0 0 auto; } #ezyNotifyDetailHeader h2, #ezyNotifyDetailTitle { flex: 1; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ezy-header-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ezyNotifyDetailDivider { height: 1px; background: var(--ezy-notify-divider); flex: 0 0 auto; } #ezyNotifyDetailBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 16px 16px 24px; } #ezyNotifyDetailBody::-webkit-scrollbar { width: 0; height: 0; } #ezyNotifyDetailDate { font-size: 12px; color: var(--ezy-drawer-muted); } #ezyNotifyDetailDate[hidden] { display: none; } #ezyNotifyDetailMessage { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ezy-drawer-muted); white-space: pre-wrap; } #ezyNotifyDetailMessage[hidden] { display: none; } #ezyNotifyDetailFooter { flex: 0 0 auto; padding: 0 16px 16px; background: var(--ezy-notify-page-bg); } #ezyNotifyDetailFooter[hidden] { display: none; } #ezyNotifyDetailOpen { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; background: var(--ezy-accent); color: #FFFFFF; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } #ezyNotifyDetailOpen:active { transform: scale(0.97); } #ezyNotifyDetailOpen[hidden] { display: none; } /* Module pages (Education / EzyTube) — stay inside the phone column. */ body.ezy-web-shell .ezy-module-page { left: var(--ezy-phone-gutter) !important; right: var(--ezy-phone-gutter) !important; width: auto !important; max-width: var(--ezy-phone-max); margin-left: auto; margin-right: auto; } /* System preference only when user has not chosen a theme yet. */ @media (prefers-color-scheme: dark) { body.ezy-web-shell:not(.ezy-theme-light):not(.ezy-theme-dark) { --ezy-pill-surface: #1F1F1F; --ezy-pill-border: #5A5A5A; --ezy-pill-inactive: #B0B0B0; --ezy-drawer-surface: #1F1F1F; --ezy-drawer-text: #F0EDE6; --ezy-drawer-muted: #B0B0B0; --ezy-drawer-divider: #3A3A3A; --ezy-header-surface: #1F1F1F; --ezy-header-title: #F5F5F5; --ezy-page-bg: #121212; --ezy-muted-surface: #2A2A2A; --ezy-notify-page-bg: #121212; --ezy-notify-toolbar-bg: #1F1F1F; --ezy-notify-item-bg: #1F1F1F; --ezy-notify-item-unread-bg: #2A2418; --ezy-notify-chip-selected-bg: #2A2418; --ezy-notify-chip-selected-text: #FFB322; --ezy-notify-unread-dot: #FA9F1E; --ezy-notify-divider: #333333; } }