/* Mailly OTP — shared visual system
   UI-only layer. No application logic or API behavior is changed. */
:root {
  --mailly-ink: #172033;
  --mailly-muted: #667085;
  --mailly-line: #e6eaf0;
  --mailly-surface: #ffffff;
  --mailly-bg: #f6f8fb;
  --mailly-accent: #f47b20;
  --mailly-accent-dark: #d9630d;
  --mailly-accent-soft: #fff3e8;
  --mailly-navy: #172033;
  --mailly-success: #159a68;
  --mailly-radius-lg: 20px;
  --mailly-radius-md: 14px;
  --mailly-shadow: 0 12px 34px rgba(23, 32, 51, .07);
}

/* Shared focus and motion behavior */
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
:focus-visible { outline: 3px solid rgba(244, 123, 32, .28); outline-offset: 2px; }

/* index.html — visual card picker and purchase confirmation */
#appScreen { background: #f4f6fb; color: #171d35; }
#appScreen .topbar { background: rgba(12,17,45,.98); border: 0; box-shadow: 0 4px 22px rgba(8,12,32,.16); }
#appScreen .topbar .logo { color: #fff; }
#appScreen .topbar .logo-mark { background: linear-gradient(135deg,#ff8a42,#f25e2d); border-radius: 13px; }
#appScreen .balance-chip { background: rgba(255,255,255,.08); color: #c6cce5; border: 1px solid rgba(255,255,255,.11); }
#appScreen .balance-chip strong { color: #ffaf75; }
#appScreen .user-button, #appScreen .logout { color: #e8ecfa; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.11); }
#appScreen .avatar { background: #ff8240; color: #fff; }
.login-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:32px; max-width:600px; }.login-stat { position:relative; min-height:114px; overflow:hidden; padding:19px 22px; border:1px solid #dde4ef; border-top:5px solid #3c72e7; border-radius:17px; background:rgba(255,255,255,.84); box-shadow:0 10px 22px rgba(37,65,118,.045); }.login-stat::after { position:absolute; right:-16px; bottom:-23px; color:#edf3ff; font:900 78px/1 "Font Awesome 6 Free"; }.login-stat.service-stat::after { content:"\\f0e7"; }.login-stat.order-stat::after { content:"\\f07a"; }.login-stat.member-stat::after { content:"\\f0c0"; }.login-stat.rate-stat::after { content:"\\f058"; }.login-stat-icon { position:relative; z-index:1; display:none; }.login-stat strong { position:relative; z-index:1; display:block; color:#3774e5; font-family:Inter,Prompt,sans-serif; font-size:clamp(32px,4vw,47px); font-weight:800; line-height:1.08; letter-spacing:-.035em; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; }.login-stat > span:last-child { position:relative; z-index:1; display:block; margin-top:8px; color:#5f6675; font-family:Prompt,Inter,sans-serif; font-size:14px; font-weight:600; line-height:1.45; letter-spacing:.01em; }
#appScreen .recent-sales-bar { position: relative; z-index: 18; overflow: hidden; border-bottom: 1px solid #e5e9f1; background: #fff; box-shadow: 0 5px 15px rgba(24,34,65,.04); }
.recent-sales-inner { display: flex; align-items: stretch; width: min(100%,1380px); min-height: 58px; margin: 0 auto; }
.recent-sales-title { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 0 25px; color: #202946; border-right: 1px solid #e9ecf3; font: 800 13px Prompt,Inter,sans-serif; white-space: nowrap; }
.recent-sales-flame { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #fff0e8; color: #f16c32; }
.recent-sales-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 3px; color: #1c9b62; font: 800 10px Inter,sans-serif; letter-spacing: .06em; }
.recent-sales-live i { width: 7px; height: 7px; border-radius: 50%; background: #37ce85; box-shadow: 0 0 0 4px #e6faef; }
.recent-sales-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.recent-sales-track { display: flex; align-items: center; width: max-content; min-height: 58px; gap: 12px; padding: 0 16px; }
.recent-sales-track.is-moving { animation: recent-sales-scroll 42s linear infinite; }
.recent-sales-viewport:hover .recent-sales-track.is-moving, .recent-sales-viewport:focus-within .recent-sales-track.is-moving { animation-play-state: paused; }
.recent-sale-item { display: flex; align-items: center; gap: 9px; min-width: 238px; padding: 7px 12px 7px 8px; border: 1px solid #e9edf4; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(28,39,70,.035); }
.recent-sale-logo .app-logo { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.recent-sale-copy { min-width: 0; line-height: 1.25; }.recent-sale-copy strong { display: block; max-width: 122px; overflow: hidden; color: #26304d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.recent-sale-copy span { display: block; margin-top: 2px; max-width: 150px; overflow: hidden; color: #818aa0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recent-sale-item time { margin-left: auto; color: #9aa2b4; font-size: 9px; white-space: nowrap; }
.recent-sales-loading, .recent-sales-empty { display: inline-flex; align-items: center; gap: 8px; color: #7e879c; font-size: 11px; }.recent-sales-empty i { color: #f07438; }
@keyframes recent-sales-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#appScreen .main { width: min(1380px, calc(100% - 48px)); margin-top: 36px; }
#appScreen .quick-menu { position: sticky; top: 74px; z-index: 19; border-bottom: 1px solid #e4e8f1; background: rgba(255,255,255,.98); box-shadow: 0 5px 15px rgba(24,34,65,.05); }
.quick-menu-inner { display: grid; grid-template-columns: repeat(5,minmax(116px,1fr)); width: min(100%,1380px); min-width: 580px; margin: 0 auto; }
.quick-menu-item { position: relative; display: flex; min-height: 88px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border: 0; border-right: 1px solid #e7eaf1; background: transparent; color: #2b3450; font: 700 13px Prompt,Inter,sans-serif; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.quick-menu-item:first-child { border-left: 1px solid #e7eaf1; }
.quick-menu-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: #f3f5fa; color: #606b88; font-size: 18px; }
.quick-menu-item:hover { background: #fff8f4; color: #d65b28; }
.quick-menu-item:hover .quick-menu-icon { background: #ffeadf; color: #ef6e34; }
.quick-menu-item.active { color: #c85628; background: #fff4ed; }
.quick-menu-item.active .quick-menu-icon { background: linear-gradient(135deg,#ff8b47,#f45e32); color: #fff; box-shadow: 0 8px 16px rgba(241,106,52,.24); }
.quick-menu-item small { display: block; max-width: 105px; overflow: hidden; color: #8b94a8; font-size: 9px; font-weight: 500; text-overflow: ellipsis; }
#appScreen .welcome { margin-bottom: 30px; }
#appScreen .welcome h1 { font-size: clamp(27px,3.1vw,39px); letter-spacing: -1.3px; color: #141a34; }
#appScreen .welcome p { font-size: 14px; }
#appScreen .status-pill { padding: 9px 13px; background: #eafaf1; border-radius: 999px; color: #287a54; font-weight: 600; }
.active-orders-panel { margin: 0 0 24px; padding: 22px 24px 24px; border: 1px solid #dce4f3; border-radius: 24px; background: linear-gradient(135deg,#fff 0%,#f5f8ff 100%); box-shadow: 0 14px 34px rgba(24,39,81,.07); }
.active-orders-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }.active-orders-heading .section-kicker { display:flex; align-items:center; gap:7px; }.active-orders-heading h2 { margin:0 0 4px; color:#151b3a; font-size:20px; }.active-orders-heading h2 .active-count { display:inline-grid; min-width:23px; height:23px; place-items:center; vertical-align:2px; border-radius:999px; background:#f46e33; color:#fff; font:800 11px Inter,sans-serif; }.active-orders-heading p:not(.section-kicker) { margin:0; color:#7c869d; font-size:12px; }.active-refresh { height:38px; padding:0 12px; border:1px solid #e0e6f1; border-radius:11px; background:#fff; color:#57627d; font:700 11px Prompt,Inter,sans-serif; }.active-refresh:hover { border-color:#ffad82; color:#dc5e2b; }
.active-orders { display:grid; gap:10px; }.active-order { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(160px,1fr) minmax(140px,.8fr) auto auto; align-items:center; gap:16px; padding:14px 15px; border:1px solid #dce4f1; border-radius:17px; background:#fff; box-shadow:0 4px 12px rgba(22,35,68,.035); }.active-order:hover { border-color:#f6bd9c; }.active-service { display:flex; align-items:center; min-width:0; gap:11px; }.active-service .app-logo { width:42px; height:42px; flex-basis:42px; border-radius:13px; }.active-service strong { display:block; overflow:hidden; color:#1d2746; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.active-service span { display:block; margin-top:3px; overflow:hidden; color:#7f89a1; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.active-number > span,.active-code > span { display:block; margin-bottom:3px; color:#8a93a8; font-size:10px; }.active-number strong { display:inline-block; color:#202a48; font:800 15px Inter,Prompt,sans-serif; letter-spacing:.2px; }.copy-number { margin-left:6px; padding:3px 6px; border:0; border-radius:6px; background:#f1f4fa; color:#68738e; font-size:10px; }.active-otp { min-width:114px; padding:7px 9px; border:0; border-radius:9px; background:#eaf9f1; color:#118557; font:800 17px Inter,Prompt,sans-serif; letter-spacing:1.2px; }.active-otp i { margin-left:3px; font-size:11px; }.active-wait { color:#a65a1f; font-size:12px; font-weight:700; }.active-wait i { margin-right:5px; color:#f17437; }.active-state { text-align:right; }.active-state .badge i { margin-right:3px; }.active-state small { display:block; margin-top:6px; color:#929aae; font-size:10px; white-space:nowrap; }.active-actions { display:flex; gap:7px; }.active-action { display:grid; width:36px; height:36px; place-items:center; border:1px solid #e0e5ef; border-radius:10px; background:#fff; color:#66718a; }.active-action:hover { border-color:#ffac80; color:#e15e2a; background:#fff8f4; }.active-action.cancel:hover { border-color:#f1b4b7; color:#d3484d; background:#fff4f4; }.active-action span { display:none; }
#appScreen .purchase-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: start; }
#appScreen .card { border: 1px solid #e1e6f3; border-radius: 24px; box-shadow: 0 12px 30px rgba(34,42,82,.06); overflow: hidden; }
#appScreen .picker-card { min-height: 620px; }
#appScreen .provider-card { grid-column: 1/-1; }
.provider-grid { display: grid; gap: 10px; }
.provider-option { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 16px; min-height: 82px; padding: 13px 15px; border: 1px solid #e5e9f4; border-radius: 16px; background: #fff; transition: .18s ease; }
.provider-option:hover { border-color: #ffb087; box-shadow: 0 8px 18px rgba(34,42,82,.07); }
.provider-option.selected { border: 2px solid #ff7d42; background: #fff9f5; }
.provider-rank { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #f0f3fb; color: #65708d; font: 800 12px Inter,Prompt,sans-serif; }
.provider-option.selected .provider-rank { background: #ffeadf; color: #dc5e2b; }
.provider-copy strong { display: block; color: #1d2746; font-size: 13px; }.provider-copy span { display: block; margin-top: 4px; color: #7d879c; font-size: 11px; }.provider-copy i { color: #f2763d; }
.provider-price { text-align: right; }.provider-price small { display: block; color: #8992a7; font-size: 10px; }.provider-price strong { color: #e9612e; font: 800 19px Inter,Prompt,sans-serif; }.provider-price em { font-size: 12px; font-style: normal; }
.provider-buy { min-width: 112px; height: 40px; padding: 0 13px; border: 0; border-radius: 11px; background: #182247; color: #fff; font: 700 11px Prompt,Inter,sans-serif; }.provider-buy:hover { background: #f16b34; transform: translateY(-1px); }.provider-option.selected .provider-buy { background: #f16b34; }
#appScreen .card-head { padding: 22px 24px 18px; background: linear-gradient(110deg,#fff 0%,#fafbff 100%); border-bottom-color: #edf0f7; }
#appScreen .picker-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
#appScreen .card-head h2 { color: #151b3a; font-size: 20px; }
#appScreen .card-head p { font-size: 12px; margin-left: 44px; }
#appScreen .icon-box { width: 37px; height: 37px; border-radius: 12px; color: #f46e33; background: #fff0e9; }
.section-kicker { margin: 0 0 5px; font: 800 10px Inter,Prompt,sans-serif; color: #f07438; letter-spacing: .12em; }
#appScreen .picker-heading .section-kicker { margin-left: 47px; }
.item-count { flex: 0 0 auto; padding: 7px 10px; color: #78809a; background: #f0f2f8; border-radius: 999px; font-size: 11px; font-weight: 700; }
#appScreen .card-body { padding: 22px 24px 26px; }
.card-search { display: flex; align-items: center; gap: 10px; height: 48px; margin-bottom: 18px; padding: 0 14px; color: #8d95aa; background: #f7f8fc; border: 1px solid #e8ebf3; border-radius: 14px; }
.card-search:focus-within { background: #fff; border-color: #ffae86; box-shadow: 0 0 0 4px rgba(255,126,70,.11); }
.card-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #1c2544; font-size: 13px; }
.card-search input::placeholder { color: #9ba2b3; }
.card-search:has(input:disabled) { opacity: .62; }
.choice-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; max-height: 474px; padding-right: 3px; overflow: auto; }
.choice-card { position: relative; display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 11px 7px; color: #333c59; border: 1px solid #e5e9f4; border-radius: 17px; background: #fff; font: 700 12px Prompt,Inter,sans-serif; line-height: 1.25; text-align: center; overflow: hidden; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.choice-card:hover { transform: translateY(-2px); border-color: #ffb087; box-shadow: 0 10px 22px rgba(34,42,82,.09); }
.choice-card.selected { color: #c55324; background: linear-gradient(145deg,#fff8f3,#fff); border: 2px solid #ff7d42; box-shadow: 0 8px 18px rgba(255,112,55,.13); }
.choice-grid[aria-busy="true"] { opacity: .72; }
.app-logo, .service-icon, .country-flag { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 14px; background: #f5f7fb; color: #475171; font-size: 19px; }
.app-logo { padding: 7px; background: #fff; border: 1px solid #eef0f5; box-shadow: 0 3px 9px rgba(38,47,76,.05); }
.app-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-logo-initial { background: linear-gradient(135deg,#394f84,#1d294d); color: #fff; font: 800 17px Inter,sans-serif; }
.app-logo-initial:empty::after { content: attr(data-fallback); }
.choice-card.selected .app-logo, .choice-card.selected .service-icon { border-color: #ffd5bf; background: #fff; }
.choice-name { display: -webkit-box; overflow: hidden; max-width: 100%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.country-flag { background: #f7f8fc; font-size: 29px; }
.card-check { position: absolute; top: 8px; right: 8px; display: none; width: 18px; height: 18px; padding-top: 3px; border-radius: 50%; background: #f46e33; color: #fff; font-size: 10px; }
.choice-card.selected .card-check { display: block; }
.choice-empty { grid-column: 1/-1; display: grid; min-height: 230px; place-items: center; align-content: center; gap: 10px; color: #8a93a8; font-size: 13px; }
.choice-empty i { font-size: 22px; color: #a9b1c1; }
.show-more { grid-column: 1/-1; min-height: 42px; border: 1px dashed #cbd3e5; border-radius: 12px; background: #fafbfe; color: #616c88; font: 700 12px Prompt,Inter,sans-serif; }
.show-more:hover { color: #d95b28; border-color: #ffae87; background: #fff8f4; }
#appScreen .selection-summary { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-color: #dce3f5; background: linear-gradient(105deg,#19234a,#101631); color: #fff; }
.selection-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.selection-copy { display: flex; align-items: center; gap: 14px; }
.summary-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: rgba(255,141,82,.18); color: #ff9a65; }
.selection-summary .section-kicker { color: #ff9a65; }.selection-summary h2 { margin: 0 0 3px; font-size: 17px; }.selection-summary p:not(.section-kicker) { margin: 0; color: #bbc4df; font-size: 12px; }
.selection-action { display: flex; align-items: center; gap: 22px; }.summary-price { text-align: right; }.summary-price span { display: block; margin-bottom: 3px; color: #bbc4df; font-size: 11px; }.summary-price strong { font: 800 28px Inter,Prompt,sans-serif; color: #fff; }.summary-price small { font-size: 15px; color: #ff9a65; }
#appScreen .buy { width: auto; min-width: 190px; height: 48px; margin: 0; padding: 0 20px; background: #ff7840; box-shadow: 0 10px 22px rgba(0,0,0,.19); }
#appScreen .buy:hover:not(:disabled) { background: #ff6630; }
.orders-card { grid-column: 1/-1; }
.purchase-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(10,15,36,.62); backdrop-filter: blur(5px); }.confirm-card { position: relative; z-index: 1; width: min(460px,100%); padding: 35px; border-radius: 25px; background: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.25); text-align: center; }.modal-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f3f5f9; color: #737d96; }.confirm-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 17px; place-items: center; border-radius: 18px; background: #fff0e7; color: #f27038; font-size: 28px; }.confirm-card h2 { margin: 0 0 7px; color: #17203e; font-size: 24px; }.confirm-subtitle { margin: 0; color: #778198; font-size: 12px; }.confirm-details { margin: 24px 0; overflow: hidden; border: 1px solid #e8ebf3; border-radius: 16px; text-align: left; }.confirm-details > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid #edf0f5; }.confirm-details > div:last-child { border: 0; }.confirm-details span { color: #798298; font-size: 12px; }.confirm-details strong { color: #202945; font-size: 13px; }.confirm-details .confirm-total { background: #f7f8fc; }.confirm-details .confirm-total strong { color: #e85f2b; font: 800 19px Inter,Prompt,sans-serif; }.confirm-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }.secondary-button { min-height: 48px; border: 1px solid #e2e6ef; border-radius: 13px; background: #fff; color: #5c657b; font-weight: 700; }.confirm-actions .primary { height: 48px; border-radius: 13px; }.modal-open { overflow: hidden; }
.cancel-confirm-card .cancel-icon { background:#fff0f1; color:#d9484d; }.danger-primary { background:#d9484d; box-shadow:0 12px 24px rgba(217,72,77,.2); }.danger-primary:hover { background:#bd363b; }

/* page2.html */
body:has(.topup-card) {
  background: var(--mailly-bg) !important;
  background-image: radial-gradient(circle at 10% 0%, rgba(244,123,32,.08), transparent 30%), radial-gradient(circle at 90% 100%, rgba(23,32,51,.05), transparent 34%) !important;
}
body:has(.topup-card) .topup-card {
  max-width: 480px;
  padding: 34px 32px;
  border: 1px solid var(--mailly-line);
  border-radius: var(--mailly-radius-lg);
  box-shadow: var(--mailly-shadow);
}
body:has(.topup-card) .wallet-icon-box { width: 56px; height: 56px; border-radius: 16px; background: var(--mailly-accent-soft); color: var(--mailly-accent-dark); box-shadow: none; font-size: 22px; }
body:has(.topup-card) .card-header { margin-bottom: 30px; }
body:has(.topup-card) .card-header h2 { font-size: 22px; letter-spacing: -.3px; }
body:has(.topup-card) .card-header p { font-size: 13px; }
body:has(.topup-card) .form-group { margin-bottom: 18px; }
body:has(.topup-card) .form-group label { color: #475467; font-size: 13px; }
body:has(.topup-card) .form-input { min-height: 48px; border-color: #d9dee7; border-radius: var(--mailly-radius-md); background: #fff; }
body:has(.topup-card) .form-input:focus { border-color: var(--mailly-accent); box-shadow: 0 0 0 4px var(--mailly-accent-soft); }
body:has(.topup-card) .btn-amount-choice { min-height: 42px; border-radius: 11px; background: #fff; }
body:has(.topup-card) .btn-primary { background: var(--mailly-accent); box-shadow: 0 8px 18px rgba(244,123,32,.18); }
body:has(.topup-card) .btn-primary:hover:not(:disabled) { background: var(--mailly-accent-dark); }
body:has(.topup-card) .btn-secondary { border: 1px solid var(--mailly-line); background: #f8fafc; }
body:has(.topup-card) .modal-box { border-radius: var(--mailly-radius-lg); box-shadow: 0 24px 60px rgba(23,32,51,.16); }

/* shop.html — replace the previous neon/glass treatment with the shared product theme */
body:has(#productGrid) {
  background: var(--mailly-bg) !important;
  color: var(--mailly-ink) !important;
  font-family: Prompt, Inter, sans-serif !important;
}
body:has(#productGrid) .neon-bg-glow { display: none !important; }
body:has(#productGrid) .glass-card { background: rgba(255,255,255,.94) !important; backdrop-filter: none !important; border: 1px solid var(--mailly-line) !important; box-shadow: 0 8px 24px rgba(23,32,51,.05) !important; }
body:has(#productGrid) header { background: rgba(255,255,255,.94) !important; border-color: var(--mailly-line) !important; }
body:has(#productGrid) header .bg-gradient-to-tr { background: var(--mailly-accent) !important; box-shadow: none !important; }
body:has(#productGrid) header .bg-stone-950 { background: var(--mailly-navy) !important; }
body:has(#productGrid) header .text-orange-400, body:has(#productGrid) header .text-amber-400 { color: var(--mailly-accent) !important; }
body:has(#productGrid) header .text-white, body:has(#productGrid) header .font-black { color: var(--mailly-ink) !important; }
body:has(#productGrid) .text-gradient { background: none !important; color: var(--mailly-accent) !important; -webkit-text-fill-color: currentColor !important; }
body:has(#productGrid) main { max-width: 1180px !important; margin-top: 42px !important; }
body:has(#productGrid) main h1 { color: var(--mailly-ink) !important; font-size: clamp(2rem, 4vw, 3.15rem) !important; line-height: 1.12 !important; letter-spacing: -.04em !important; }
body:has(#productGrid) main p { color: var(--mailly-muted) !important; }
body:has(#productGrid) .premium-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
body:has(#productGrid) .premium-card:hover { transform: translateY(-4px) !important; border-color: #f7bf91 !important; box-shadow: 0 16px 34px rgba(23,32,51,.10) !important; }
body:has(#productGrid) .btn-gradient, body:has(#productGrid) .tab-btn.active { background: var(--mailly-accent) !important; box-shadow: 0 8px 18px rgba(244,123,32,.18) !important; }
body:has(#productGrid) .btn-gradient:hover, body:has(#productGrid) .tab-btn.active:hover { background: var(--mailly-accent-dark) !important; }
body:has(#productGrid) .cat-btn { border-radius: 11px !important; }
body:has(#productGrid) #productGrid { gap: 20px !important; }
body:has(#productGrid) #productGrid > * { min-width: 0; }
body:has(#productGrid) .rounded-3xl, body:has(#productGrid) .rounded-2xl { border-radius: var(--mailly-radius-lg) !important; }
body:has(#productGrid) input, body:has(#productGrid) select, body:has(#productGrid) textarea { border-radius: 11px !important; }

/* youtube.html — normalize the red dashboard into Mailly's accent system */
body:has(#login-page) { background: var(--mailly-bg) !important; background-image: radial-gradient(circle at 0 0, rgba(244,123,32,.08), transparent 32%), radial-gradient(circle at 100% 100%, rgba(23,32,51,.05), transparent 36%) !important; }
body:has(#login-page) .glass-card { background: rgba(255,255,255,.96) !important; backdrop-filter: none !important; border: 1px solid var(--mailly-line) !important; box-shadow: var(--mailly-shadow) !important; }
body:has(#login-page) #login-page > .glass-card { max-width: 430px !important; padding: 34px !important; border-radius: var(--mailly-radius-lg) !important; }
body:has(#login-page) #login-page .bg-gradient-to-tr { background: var(--mailly-accent) !important; box-shadow: 0 10px 22px rgba(244,123,32,.18) !important; }
body:has(#login-page) #login-page h1, body:has(#login-page) #dashboard-page h2, body:has(#login-page) #admin-page h2 { color: var(--mailly-ink) !important; }
body:has(#login-page) #login-page button.bg-slate-900, body:has(#login-page) button.bg-red-600 { background: var(--mailly-accent) !important; box-shadow: 0 8px 18px rgba(244,123,32,.16) !important; }
body:has(#login-page) #login-page button.bg-slate-900:hover, body:has(#login-page) button.bg-red-600:hover { background: var(--mailly-accent-dark) !important; }
body:has(#login-page) #dashboard-page, body:has(#login-page) #admin-page { max-width: 1180px !important; }
body:has(#login-page) #dashboard-page .bg-white, body:has(#login-page) #admin-page .bg-white { border-color: var(--mailly-line) !important; box-shadow: 0 8px 24px rgba(23,32,51,.05) !important; }
body:has(#login-page) #dashboard-page .rounded-3xl, body:has(#login-page) #admin-page .rounded-3xl { border-radius: var(--mailly-radius-lg) !important; }
body:has(#login-page) #dashboard-page .text-red-600, body:has(#login-page) #admin-page .text-red-600 { color: var(--mailly-accent-dark) !important; }
body:has(#login-page) #dashboard-page .bg-red-600 { background: var(--mailly-accent) !important; }
body:has(#login-page) input, body:has(#login-page) select, body:has(#login-page) textarea { border-radius: 11px !important; }

@media (max-width: 640px) {
  .login-stats { margin-top:24px; gap:9px; }.login-stat { min-height:96px; padding:15px; border-top-width:4px; border-radius:14px; }.login-stat strong { font-size:31px; }.login-stat > span:last-child { margin-top:5px; font-size:11px; }.login-stat::after { right:-12px; bottom:-19px; font-size:63px; }
  .recent-sales-inner { min-height: 53px; }.recent-sales-title { gap: 7px; padding: 0 12px; font-size: 11px; }.recent-sales-flame { width: 24px; height: 24px; border-radius: 8px; }.recent-sales-live { display: none; }.recent-sales-track { min-height: 53px; gap: 9px; padding: 0 10px; }.recent-sales-track.is-moving { animation-duration: 34s; }.recent-sale-item { min-width: 205px; gap: 7px; padding: 6px 9px 6px 6px; border-radius: 11px; }.recent-sale-logo .app-logo { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; }.recent-sale-copy strong { max-width: 98px; font-size: 10px; }.recent-sale-copy span { max-width: 125px; font-size: 9px; }.recent-sale-item time { font-size: 8px; }
  #appScreen .quick-menu { top: 74px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .quick-menu-inner { width: max-content; min-width: 580px; padding: 0 12px; } .quick-menu-item { min-height: 82px; } #appScreen .main { width: min(100% - 24px,1380px); margin-top: 24px; } #appScreen .purchase-layout { grid-template-columns: 1fr; } #appScreen .picker-card { min-height: 0; } #appScreen .card-head,#appScreen .card-body { padding-left: 17px; padding-right: 17px; } .choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 390px; gap: 9px; }.choice-card { min-height: 104px; font-size: 11px; }.app-logo,.service-icon,.country-flag { width: 38px; height: 38px; flex-basis: 38px; }.country-flag { font-size: 25px; } #appScreen .selection-summary { grid-column: auto; align-items: stretch; flex-direction: column; padding: 19px; }.selection-action { justify-content: space-between; }.summary-price strong { font-size: 24px; } #appScreen .buy { min-width: 166px; padding: 0 13px; font-size: 12px; }.confirm-card { padding: 30px 20px 20px; }.confirm-actions { grid-template-columns: 1fr; }
  .provider-option { grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; padding: 12px; }.provider-price { grid-column: 2; text-align: left; }.provider-buy { grid-column: 3; grid-row: 1 / span 2; min-width: 94px; font-size: 10px; }
  body:has(.topup-card) { padding: 12px; }
  body:has(.topup-card) .topup-card { padding: 26px 20px; }
  body:has(#productGrid) main { margin-top: 28px !important; }
  body:has(#login-page) #login-page > .glass-card { padding: 26px 20px !important; }
  .active-orders-panel { margin-bottom:18px; padding:18px; border-radius:20px; }.active-orders-heading { align-items:start; }.active-orders-heading h2 { font-size:17px; }.active-orders-heading p:not(.section-kicker) { font-size:11px; }.active-refresh { flex:0 0 auto; padding:0 10px; }.active-order { grid-template-columns:minmax(0,1fr) auto; gap:13px 10px; padding:14px; }.active-number,.active-code { grid-column:span 1; }.active-number strong { font-size:13px; }.active-otp { min-width:0; width:100%; font-size:15px; }.active-state { grid-column:1; text-align:left; }.active-actions { grid-column:2; justify-self:end; }.active-action { width:auto; min-width:37px; padding:0 10px; }.active-action span { display:inline; margin-left:5px; font:700 10px Prompt,Inter,sans-serif; }
}

/* Mailly OTP — dark theme */
:root {
  color-scheme: dark;
  --mailly-ink: #f4f7ff;
  --mailly-muted: #9ca7bd;
  --mailly-line: #29334a;
  --mailly-surface: #151c2d;
  --mailly-bg: #090e19;
  --mailly-accent: #ff7a3d;
  --mailly-accent-dark: #e96127;
  --mailly-accent-soft: #382116;
  --mailly-navy: #080d18;
  --mailly-success: #35d493;
  --mailly-shadow: 0 16px 42px rgba(0, 0, 0, .32);
}

html, body { background: var(--mailly-bg); color: var(--mailly-ink); }
body { scrollbar-color: #39435a #101625; }
::selection { background: rgba(255,122,61,.32); color: #fff; }

/* OTP marketplace */
#appScreen {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,61,.08), transparent 28%),
    radial-gradient(circle at 88% 28%, rgba(56,91,176,.08), transparent 34%),
    var(--mailly-bg);
  color: var(--mailly-ink);
}
#appScreen .topbar { background: rgba(7,11,22,.96); border-bottom: 1px solid #20293c; }
#appScreen .balance-chip,
#appScreen .user-button,
#appScreen .logout { background: #121a2a; border-color: #2b354b; }

.login-stat { border-color:#29344b; border-top-color:#ff7a3d; background:rgba(21,28,45,.94); box-shadow:var(--mailly-shadow); }
.login-stat::after { color:#1c263b; }
.login-stat strong { color:#ff8a52; }
.login-stat > span:last-child { color:#aab4c8; }

#appScreen .recent-sales-bar { border-color:#242e43; background:#0f1625; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.recent-sales-title { color:#f1f4fb; border-color:#29334a; }
.recent-sales-flame { background:#382116; color:#ff8a52; }
.recent-sales-live { color:#48dda0; }
.recent-sales-live i { box-shadow:0 0 0 4px rgba(55,206,133,.12); }
.recent-sale-item { border-color:#29334a; background:#171f31; box-shadow:0 5px 14px rgba(0,0,0,.18); }
.recent-sale-copy strong { color:#edf1fa; }
.recent-sale-copy span, .recent-sale-item time, .recent-sales-loading, .recent-sales-empty { color:#8f9ab1; }

#appScreen .quick-menu { border-color:#29334a; background:rgba(14,20,34,.97); box-shadow:0 8px 22px rgba(0,0,0,.22); }
.quick-menu-item, .quick-menu-item:first-child { border-color:#29334a; color:#d6dcea; }
.quick-menu-icon { background:#1d2639; color:#a9b3c8; }
.quick-menu-item:hover { background:#211b1a; color:#ff9461; }
.quick-menu-item:hover .quick-menu-icon { background:#382116; color:#ff8a52; }
.quick-menu-item.active { background:#2a1c18; color:#ff9461; }
.quick-menu-item small { color:#7f8aa1; }

#appScreen .welcome h1,
#appScreen .card-head h2,
.active-orders-heading h2,
.active-service strong,
.active-number strong,
.provider-copy strong,
.confirm-card h2,
.confirm-details strong { color:#f4f7ff; }
#appScreen .welcome p,
#appScreen .card-head p,
.active-orders-heading p:not(.section-kicker),
.active-service span,
.active-number > span,
.active-code > span,
.provider-copy span,
.confirm-subtitle,
.confirm-details span { color:#909bb2; }
#appScreen .status-pill { background:#132c26; color:#51dfa7; border:1px solid #215240; }

.active-orders-panel { border-color:#2b3650; background:linear-gradient(135deg,#151d2f 0%,#101728 100%); box-shadow:var(--mailly-shadow); }
.active-refresh,
.active-order,
.active-action { border-color:#303b52; background:#192235; color:#aeb8cc; }
.active-order { box-shadow:0 5px 16px rgba(0,0,0,.18); }
.active-order:hover { border-color:#965234; }
.copy-number { background:#252f45; color:#bbc4d5; }
.active-otp { background:#123127; color:#54e2aa; }
.active-wait { color:#ffb16f; }
.active-state small { color:#8490a8; }
.active-action:hover { background:#2b201c; }
.active-action.cancel:hover { background:#321c22; }

#appScreen .card { border-color:#29344b; background:#151d2e; box-shadow:var(--mailly-shadow); }
#appScreen .card-head { border-bottom-color:#29344b; background:linear-gradient(110deg,#182135,#121929); }
#appScreen .icon-box { background:#382116; color:#ff8951; }
.item-count { background:#232d42; color:#a6b0c5; }
.card-search { border-color:#303a50; background:#101827; color:#7f8aa2; }
.card-search:focus-within { background:#171f31; border-color:#ff8a52; }
.card-search input { color:#edf2fb; }
.card-search input::placeholder { color:#707b92; }
.choice-card { color:#d7ddea; border-color:#2d374d; background:#192235; }
.choice-card:hover { border-color:#a35b39; box-shadow:0 12px 24px rgba(0,0,0,.24); }
.choice-card.selected { color:#ffab80; border-color:#ff7d42; background:linear-gradient(145deg,#31211d,#1b2232); }
.app-logo, .service-icon, .country-flag { background:#222c40; color:#c5cddd; }
.app-logo { background:#f7f8fb; border-color:#39445a; }
.choice-card.selected .app-logo, .choice-card.selected .service-icon { border-color:#a65b38; background:#f7f8fb; }
.country-flag { background:#222c40; }
.choice-empty { color:#8e99af; }
.show-more { border-color:#465168; background:#121a2a; color:#aeb7c9; }
.show-more:hover { background:#2a1c18; color:#ff9a68; }

.provider-option { border-color:#2e384e; background:#192235; }
.provider-option:hover { border-color:#a35b39; box-shadow:0 10px 22px rgba(0,0,0,.22); }
.provider-option.selected { border-color:#ff7d42; background:#2c201d; }
.provider-rank { background:#252f44; color:#aab4c8; }
.provider-option.selected .provider-rank { background:#42271b; color:#ff9a68; }
.provider-price small { color:#8c97ad; }
.provider-price strong { color:#ff8951; }
.provider-buy { background:#303b53; }

#appScreen .selection-summary { border-color:#35415d; background:linear-gradient(105deg,#1d2741,#0e1423); }

.modal-backdrop { background:rgba(3,6,13,.78); }
.confirm-card { border:1px solid #303b52; background:#161e30; box-shadow:0 28px 90px rgba(0,0,0,.55); }
.modal-close { background:#252f43; color:#aeb8cc; }
.confirm-icon { background:#382116; color:#ff8951; }
.confirm-details { border-color:#303a50; }
.confirm-details > div { border-color:#29344a; }
.confirm-details .confirm-total { background:#101827; }
.confirm-details .confirm-total strong { color:#ff8951; }
.secondary-button { border-color:#344056; background:#1c2538; color:#c0c8d8; }
.cancel-confirm-card .cancel-icon { background:#371d24; color:#ff7077; }

/* Top-up */
body:has(.topup-card) {
  background:var(--mailly-bg) !important;
  background-image:radial-gradient(circle at 10% 0%,rgba(255,122,61,.1),transparent 30%),radial-gradient(circle at 90% 100%,rgba(55,85,158,.1),transparent 34%) !important;
  color:var(--mailly-ink);
}
body:has(.topup-card) .topup-card,
body:has(.topup-card) .modal-box { border-color:var(--mailly-line); background:#151d2e; color:var(--mailly-ink); box-shadow:var(--mailly-shadow); }
body:has(.topup-card) .card-header h2,
body:has(.topup-card) .modal-box h3 { color:#f4f7ff; }
body:has(.topup-card) .card-header p,
body:has(.topup-card) .form-note,
body:has(.topup-card) .modal-box p { color:#929db3; }
body:has(.topup-card) .form-group label { color:#c5cddd; }
body:has(.topup-card) .form-input,
body:has(.topup-card) .btn-amount-choice { border-color:#344057; background:#101827; color:#edf2fb; }
body:has(.topup-card) .btn-amount-choice:hover,
body:has(.topup-card) .btn-amount-choice.active { border-color:#ff7a3d; background:#382116; color:#ff9a68; }
body:has(.topup-card) .btn-secondary { border-color:#344057; background:#202a3d; color:#c7cede; }

/* Premium shop */
body:has(#productGrid) { background:var(--mailly-bg) !important; color:var(--mailly-ink) !important; }
body:has(#productGrid) .glass-card { background:rgba(21,29,46,.96) !important; border-color:var(--mailly-line) !important; box-shadow:var(--mailly-shadow) !important; }
body:has(#productGrid) header { background:rgba(10,15,26,.95) !important; border-color:var(--mailly-line) !important; }
body:has(#productGrid) header .text-white,
body:has(#productGrid) header .font-black,
body:has(#productGrid) main h1 { color:var(--mailly-ink) !important; }
body:has(#productGrid) main p { color:var(--mailly-muted) !important; }
body:has(#productGrid) .premium-card:hover { border-color:#9c5737 !important; box-shadow:0 18px 38px rgba(0,0,0,.34) !important; }
body:has(#productGrid) input,
body:has(#productGrid) select,
body:has(#productGrid) textarea { background:#101827 !important; border-color:#344057 !important; color:#edf2fb !important; }

/* YouTube dashboard */
body:has(#login-page) { background:var(--mailly-bg) !important; background-image:radial-gradient(circle at 0 0,rgba(255,122,61,.1),transparent 32%),radial-gradient(circle at 100% 100%,rgba(55,85,158,.1),transparent 36%) !important; color:var(--mailly-ink) !important; }
body:has(#login-page) .glass-card,
body:has(#login-page) #dashboard-page .bg-white,
body:has(#login-page) #admin-page .bg-white { background:rgba(21,29,46,.97) !important; border-color:var(--mailly-line) !important; box-shadow:var(--mailly-shadow) !important; }
body:has(#login-page) #login-page h1,
body:has(#login-page) #dashboard-page h2,
body:has(#login-page) #admin-page h2 { color:var(--mailly-ink) !important; }
body:has(#login-page) input,
body:has(#login-page) select,
body:has(#login-page) textarea { background:#101827 !important; border-color:#344057 !important; color:#edf2fb !important; }
body:has(#login-page) .text-slate-500,
body:has(#login-page) .text-slate-600,
body:has(#login-page) .text-gray-500,
body:has(#login-page) .text-gray-600 { color:#9ca7bd !important; }

/* Main sign-in */
.auth-shell { background:#0d1422; }
.brand-panel { background:linear-gradient(145deg,#0c1321 0%,#181721 100%); }
.brand-panel:before { background:rgba(255,122,61,.13); }
.brand-panel:after { background:rgba(57,91,174,.1); }
.auth-panel { border-color:#29334a; background:#111827; }
.logo, .hero h1, .auth-card h2 { color:#f4f7ff; }
.eyebrow { border-color:#6f3f2a; background:#221b1a; color:#ff9a68; }
.hero p, .subtext, .brand-foot { color:#98a3b8; }
.benefits { color:#bdc5d5; }
.tabs { background:#1a2335; }
.tab { color:#929db2; }
.tab.active { background:#2a3449; color:#fff; box-shadow:0 5px 14px rgba(0,0,0,.24); }
.field label { color:#c2cad9; }
.input { border-color:#344057; background:#0e1625; color:#eef2fa; }
.input::placeholder { color:#6f7a91; }
.input:focus { border-color:#ff8a52; box-shadow:0 0 0 4px rgba(255,122,61,.13); }
.legacy-note { background:#2c211c; color:#dcb290; }
.loading-screen { background:#090e19; }
.alert.error { color:#ff9ca1; background:#321c22; border-color:#613039; }
.alert.success { color:#62e6b2; background:#143027; border-color:#275644; }

/* Top-up payment method cards */
body:has(.topup-card) .payment-method-label { color:#aab4c7; }
body:has(.topup-card) .payment-method { border-color:#344057; background:#101827; color:#edf2fb; }
body:has(.topup-card) .payment-method:hover:not(:disabled),
body:has(.topup-card) .payment-method.is-selected { border-color:#ff7a3d; background:#2d201c; box-shadow:0 0 0 2px rgba(255,122,61,.12); }
body:has(.topup-card) .payment-method__detail { color:#929db3; }
body:has(.topup-card) .payment-method--soon { background:#182133; }
body:has(.topup-card) .payment-method--soon .payment-method__icon { background:#465168; }
body:has(.topup-card) .payment-method__badge { background:#263248; color:#aeb8ca; }
body:has(.topup-card) .file-input-styled { border-color:#344057; background:#101827; color:#aeb8ca; }
body:has(.topup-card) .qr-container { border-color:#344057; background:#fff; }

/* Reference layout — unified Mailly dark dashboard */
:root {
  --reference-bg:#0b0710;
  --reference-header:#100a10;
  --reference-panel:#211222;
  --reference-panel-2:#2a1729;
  --reference-line:#5a2d23;
  --reference-line-soft:#3a2536;
  --reference-text:#fff8f1;
  --reference-muted:#a897a4;
  --reference-orange:#ff7126;
  --reference-orange-2:#ff8738;
}

.reference-header,
#appScreen .topbar {
  position:sticky; top:0; z-index:50; width:100%; min-height:92px; padding:0 clamp(24px,2.1vw,44px);
  display:grid; grid-template-columns:minmax(210px,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(14px,1.7vw,28px);
  background:rgba(15,9,15,.98) !important; border-bottom:1px solid #452219 !important;
  box-shadow:none !important; backdrop-filter:blur(18px);
}
.reference-header-inner { display:contents; }
.reference-brand,
#appScreen .topbar .logo { display:flex; align-items:center; gap:14px; color:var(--reference-text) !important; text-decoration:none; font:800 20px Inter,Prompt,sans-serif; letter-spacing:-.4px; white-space:nowrap; }
.reference-brand > span,
#appScreen .topbar .logo-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--reference-orange-2),var(--reference-orange)) !important; font-size:20px; box-shadow:0 8px 24px rgba(255,104,35,.16); }
.reference-brand strong { color:var(--reference-text); }
.reference-nav,
#appScreen .desktop-nav { display:flex; align-items:center; justify-content:center; gap:8px; }
.reference-nav a,
#appScreen .desktop-nav a { min-height:48px; padding:0 20px; display:flex; align-items:center; border-radius:14px; color:#a798a3; text-decoration:none; font:600 13px Prompt,Inter,sans-serif; white-space:nowrap; transition:.18s ease; }
.reference-nav a:hover,
.reference-nav a.active,
#appScreen .desktop-nav a:hover,
#appScreen .desktop-nav a.active { color:#ff9b66; background:#351914; }
.reference-account,
#appScreen .nav-actions { min-width:0; justify-self:end; display:flex; align-items:center; gap:10px; }
.reference-account > strong,
#appScreen .balance-chip { min-height:48px; display:flex; align-items:center; padding:0 16px; border:1px solid #64301f !important; border-radius:14px; background:#321913 !important; color:#fff8f1 !important; font:750 16px Inter,Prompt,sans-serif; white-space:nowrap; font-variant-numeric:tabular-nums; }
.reference-account > strong { min-width:0; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
#appScreen .balance-chip strong { white-space:nowrap; }
.reference-credit { min-height:48px; margin-right:-11px; padding:0 0 0 15px; display:flex; align-items:center; gap:8px; color:#ff9c68; border:1px solid #64301f; border-right:0; border-radius:14px 0 0 14px; background:#321913; font-size:12px; font-weight:600; }
.reference-account > .reference-credit + strong { border-left:0; border-radius:0 14px 14px 0; }
.reference-user,
#appScreen .user-button { min-height:48px; padding:0 14px 0 9px; display:flex; align-items:center; gap:10px; border:1px solid #352736 !important; border-radius:14px; background:#191219 !important; color:#f3e9ee !important; }
.reference-user b,
#appScreen .avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#3b2038; color:#ff9a61; font:700 12px Inter,sans-serif; }
.reference-user em { font-style:normal; font-size:12px; font-weight:600; }
.reference-user em,
#appScreen .user-button > span:last-child { min-width:0; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reference-header-inner > .flex { min-width:0; justify-self:end; flex-wrap:nowrap; }
#adminPanelBtn { flex:0 0 auto; white-space:nowrap; }
#appScreen .logout { width:42px; height:42px; background:#191219 !important; border-color:#352736 !important; color:#aa99a5; }

/* Temporary maintenance notice for Shop and YouTube navigation */
.feature-maintenance-overlay { position:fixed; inset:0; z-index:120; padding:20px; display:flex; align-items:center; justify-content:center; background:rgba(5,3,8,.82); opacity:0; pointer-events:none; transition:opacity .22s ease; backdrop-filter:blur(9px); }
.feature-maintenance-overlay.is-open { opacity:1; pointer-events:auto; }
.feature-maintenance-dialog { position:relative; width:min(100%,430px); padding:36px 28px 28px; overflow:hidden; border:1px solid #633527; border-radius:24px; background:linear-gradient(145deg,#2a1729,#1b101b); box-shadow:0 26px 70px rgba(0,0,0,.46); text-align:center; transform:translateY(12px) scale(.97); transition:transform .22s ease; }
.feature-maintenance-overlay.is-open .feature-maintenance-dialog { transform:translateY(0) scale(1); }
.feature-maintenance-dialog::before { content:''; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)); }
.feature-maintenance-icon { width:68px; height:68px; margin:0 auto 20px; display:grid; place-items:center; border:1px solid rgba(255,135,56,.4); border-radius:21px; background:linear-gradient(145deg,rgba(255,135,56,.22),rgba(255,113,38,.07)); color:#ff9c68; font-size:28px; box-shadow:0 14px 34px rgba(255,113,38,.13); }
.feature-maintenance-dialog h2 { margin:0 0 10px; color:#fff8f1; font:750 22px Prompt,Inter,sans-serif; }
.feature-maintenance-dialog p { margin:0; color:#c0b0ba; font:500 15px/1.75 Prompt,Inter,sans-serif; }
.feature-maintenance-close { width:100%; min-height:50px; margin-top:24px; border:0; border-radius:14px; background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)); color:#fff; font:700 14px Prompt,Inter,sans-serif; cursor:pointer; box-shadow:0 10px 24px rgba(255,113,38,.2); }

.reference-page,
body:has(#productGrid),
body:has(#login-page),
#appScreen { min-height:100vh; background:
  radial-gradient(circle at 8% 6%,rgba(94,28,21,.30),transparent 32%),
  radial-gradient(circle at 92% 22%,rgba(83,20,62,.22),transparent 32%),
  var(--reference-bg) !important; color:var(--reference-text) !important; }
.reference-main,
body:has(#productGrid) main { width:min(calc(100% - 56px),1440px) !important; max-width:1440px !important; margin:0 auto !important; padding:56px 0 80px; }
.reference-hero { min-height:150px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.reference-hero h1 { margin:0; color:var(--reference-text) !important; font:750 clamp(32px,3vw,46px) Prompt,Inter,sans-serif !important; letter-spacing:-1.5px !important; }
.reference-hero > div > i { display:block; width:58px; height:5px; margin:24px 0 12px; border-radius:99px; background:linear-gradient(90deg,var(--reference-orange),rgba(255,113,38,0)); }
.reference-hero p { margin:0; color:var(--reference-muted) !important; font-size:14px !important; }
.reference-outline-button { min-height:58px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #452d42; border-radius:17px; background:#201220; color:#fff4ed; text-decoration:none; font:650 16px Prompt,Inter,sans-serif; cursor:pointer; }

/* Main OTP page */
#appScreen .recent-sales-bar,
#appScreen .quick-menu { display:none !important; }
#appScreen .main { width:min(calc(100% - 56px),1440px); margin:0 auto; padding:52px 0 80px; }
.otp-business-banner { min-height:76px; margin:0 0 38px; padding:12px 14px 12px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid #693525; border-radius:18px; background:linear-gradient(105deg,rgba(67,31,25,.88),rgba(38,20,36,.92)); color:#fff5ee; box-shadow:0 14px 34px rgba(0,0,0,.16); }
.otp-business-banner-copy { min-width:0; display:flex; align-items:center; gap:13px; }
.otp-business-banner-icon { flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#47251f; color:#ff9c68; font-size:15px; }
.otp-business-banner strong { font:700 clamp(14px,1.35vw,18px) Prompt,Inter,sans-serif; }
.otp-package-open { flex:0 0 auto; min-height:46px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid rgba(255,164,104,.42); border-radius:13px; background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)); color:#fff; font:700 13px Prompt,Inter,sans-serif; cursor:pointer; box-shadow:0 10px 24px rgba(255,113,38,.2); transition:transform .18s ease,box-shadow .18s ease; }
.otp-package-open:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,113,38,.28); }
.otp-package-open i { font-size:11px; }
body.package-modal-open { overflow:hidden; }
.mailly-site-footer { position:relative; z-index:2; width:min(calc(100% - 56px),1440px); margin:20px auto 0; padding:32px 20px 38px; border-top:1px solid rgba(112,72,96,.34); color:#a995a2; text-align:center; font-family:Prompt,Inter,sans-serif; }
.mailly-site-footer p { margin:0 0 7px; color:#d8cbd3; font:600 14px/1.6 Inter,Prompt,sans-serif; letter-spacing:.1px; }
.mailly-site-footer p strong { color:#fff5ed; font-weight:750; }
.mailly-site-footer span { display:block; font:450 12px/1.7 Prompt,Inter,sans-serif; }
.otp-package-overlay { position:fixed; inset:0; z-index:130; padding:24px; display:flex; align-items:center; justify-content:center; background:rgba(5,3,8,.86); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease,visibility .22s ease; backdrop-filter:blur(10px); }
.otp-package-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.otp-package-dialog { position:relative; width:min(100%,1120px); max-height:calc(100vh - 48px); padding:38px; overflow:auto; border:1px solid #633527; border-radius:26px; background:linear-gradient(145deg,#2a1729,#170e18); box-shadow:0 30px 90px rgba(0,0,0,.55); transform:translateY(14px) scale(.98); transition:transform .22s ease; scrollbar-color:#704333 #1b111b; scrollbar-width:thin; }
.otp-package-overlay.is-open .otp-package-dialog { transform:translateY(0) scale(1); }
.otp-package-dialog::before { content:''; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)); }
.otp-package-close { position:absolute; top:18px; right:18px; width:42px; height:42px; display:grid; place-items:center; border:1px solid #4d3545; border-radius:13px; background:#201420; color:#cdbbc7; cursor:pointer; }
.otp-package-heading { max-width:650px; margin:0 auto 30px; padding:0 40px; text-align:center; }
.otp-package-kicker { display:block; margin-bottom:8px; color:#ff9360; font:700 11px/1.4 Inter,Prompt,sans-serif; letter-spacing:1.8px; }
.otp-package-heading h2 { margin:0 0 9px; color:#fff8f1; font:750 clamp(23px,3vw,32px)/1.3 Prompt,Inter,sans-serif; }
.otp-package-heading p { margin:0; color:#bba9b5; font:500 14px/1.7 Prompt,Inter,sans-serif; }
.otp-package-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.otp-package-card { position:relative; min-height:540px; padding:27px 22px 23px; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; border:1px solid #493142; border-radius:20px; background:linear-gradient(155deg,rgba(48,29,46,.98),rgba(27,17,28,.98)); }
.otp-package-card.is-featured { border-color:#a65330; box-shadow:0 18px 40px rgba(255,113,38,.11); }
.otp-package-number { position:absolute; top:16px; right:18px; color:rgba(255,255,255,.12); font:800 28px/1 Inter,sans-serif; }
.otp-package-recommended { position:absolute; top:0; left:0; padding:6px 13px; border-radius:0 0 12px 0; background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)); color:#fff; font:700 10px Prompt,Inter,sans-serif; }
.otp-package-card-icon { width:50px; height:50px; margin:9px 0 19px; display:grid; place-items:center; border:1px solid rgba(255,135,56,.34); border-radius:15px; background:rgba(255,113,38,.1); color:#ff9561; font-size:19px; }
.otp-package-card h3 { margin:0; color:#fff7f1; font:750 20px Prompt,Inter,sans-serif; }
.otp-package-card p { color:#aa98a6; font:500 13px/1.75 Prompt,Inter,sans-serif; }
.otp-package-name-th { margin:2px 0 15px !important; color:#c6b4c1 !important; font-size:12px !important; }
.otp-package-price { width:100%; margin:0 0 15px; display:flex; align-items:flex-end; gap:8px; color:#fff; }
.otp-package-price strong { color:#ff915d; font:800 clamp(28px,2.8vw,38px)/1 Inter,Prompt,sans-serif; letter-spacing:-1px; }
.otp-package-price span { padding-bottom:3px; color:#c5b1be; font:600 11px Prompt,Inter,sans-serif; white-space:nowrap; }
.otp-package-gift { width:100%; min-height:42px; margin:0 0 14px; padding:9px 11px; display:flex; align-items:center; gap:9px; border:1px solid rgba(255,151,91,.28); border-radius:12px; background:rgba(255,113,38,.08); color:#f2b18e; font:650 11px/1.5 Prompt,Inter,sans-serif; }
.otp-package-gift i { flex:0 0 auto; color:#ff8b50; }
.otp-package-for { min-height:68px; margin:0 0 15px !important; padding-bottom:14px; border-bottom:1px solid rgba(122,91,112,.3); }
.otp-package-features { width:100%; margin:0; padding:0; display:grid; gap:11px; list-style:none; }
.otp-package-features li { display:flex; align-items:flex-start; gap:9px; color:#cbbbc5; font:500 11.5px/1.65 Prompt,Inter,sans-serif; }
.otp-package-features i { flex:0 0 auto; width:18px; height:18px; margin-top:1px; display:grid; place-items:center; border-radius:50%; background:rgba(255,125,55,.12); color:#ff9360; font-size:8px; }
.otp-package-features b { color:#e1cbd8; font-weight:600; overflow-wrap:anywhere; }
.otp-package-footnote { margin:22px 0 0; color:#8f7c89; text-align:center; font:500 12px/1.6 Prompt,Inter,sans-serif; }
#appScreen .welcome { min-height:130px; }
#appScreen .welcome h1 { font-size:clamp(30px,3vw,44px); letter-spacing:-1.2px; }
#appScreen .purchase-layout { gap:24px; }
#appScreen .card,
.active-orders-panel { border:1px solid var(--reference-line) !important; border-radius:24px !important; background:linear-gradient(145deg,rgba(42,23,41,.98),rgba(30,17,30,.98)) !important; box-shadow:0 18px 44px rgba(0,0,0,.18) !important; }
#appScreen .card-head { border-bottom:1px solid var(--reference-line-soft) !important; background:transparent !important; }
#appScreen .icon-box { background:#42231f; color:var(--reference-orange); }
.card-search,
.choice-card,
.provider-option,
.active-order { background:#1b101a !important; border-color:#402a3e !important; }
.choice-card:hover,.provider-option:hover { border-color:#8a4632 !important; }
.choice-card.selected,.provider-option.selected { background:#351d1b !important; border-color:var(--reference-orange) !important; }
.provider-buy,.primary { background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)) !important; }

/* Top-up page */
body.reference-page.topup-page { display:block; padding:0; align-items:initial; justify-content:initial; }
.topup-layout { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(390px,1fr); gap:24px; align-items:stretch; }
body:has(.topup-card) .topup-card { width:100%; max-width:none; min-height:465px; padding:0; overflow:hidden; border:1px solid var(--reference-line) !important; border-radius:24px; background:linear-gradient(145deg,#29172a,#1d111d) !important; }
body:has(.topup-card) .card-header { min-height:118px; margin:0; padding:28px 30px; display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:14px; text-align:left; border-bottom:1px solid var(--reference-line-soft); }
body:has(.topup-card) .wallet-icon-box { grid-row:1/3; width:44px; height:44px; margin:0; border-radius:13px; background:#45241f; color:var(--reference-orange); font-size:18px; }
body:has(.topup-card) .card-header h2 { align-self:end; font-size:19px; }
body:has(.topup-card) .card-header p { align-self:start; margin-top:5px; font-size:12px; }
body:has(.topup-card) .payment-method-group,
body:has(.topup-card) .form-group,
body:has(.topup-card) .amount-grid,
body:has(.topup-card) .topup-card > .btn,
body:has(.topup-card) .topup-card > .alert-message,
body:has(.topup-card) .file-upload-box { margin-left:30px; margin-right:30px; }
body:has(.topup-card) .payment-method-group { margin-top:26px; }
body:has(.topup-card) .payment-methods { grid-template-columns:repeat(2,minmax(0,1fr)); }
body:has(.topup-card) .payment-method { background:#1b101a; border-color:#432a3d; }
body:has(.topup-card) .payment-method.is-selected { background:#3a201d; border-color:var(--reference-orange); }
body:has(.topup-card) .form-input,
body:has(.topup-card) .btn-amount-choice,
body:has(.topup-card) .file-input-styled,
.slip-account-preview > div { min-height:54px; border:1px solid #422a3d !important; border-radius:14px; background:#180f18 !important; color:#efe5eb !important; }
body:has(.topup-card) .amount-grid { margin-bottom:22px; }
body:has(.topup-card) .btn-amount-choice { min-height:48px; font-size:17px; font-weight:700; }
body:has(.topup-card) .btn-primary,
body:has(.topup-card) .btn-success { min-height:58px; margin-bottom:30px; background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)); font-weight:700; font-size:16px; }
.topup-slip-card .file-upload-box { margin-top:26px; padding-top:0; border:0; }
.slip-account-preview { margin-top:26px; }
.slip-account-preview > div { display:flex; align-items:center; padding:0 16px; opacity:.72; }
body:has(.topup-card) .file-input-styled { padding:8px; }
body:has(.topup-card) .file-input-styled::file-selector-button { min-height:38px; padding:0 16px; background:#44241f; color:#ff9d6b; }
body:has(.topup-card) .modal-box { background:#221422; border-color:var(--reference-line); }

/* Shop page */
body:has(#productGrid) { padding-bottom:70px !important; }
body:has(#productGrid) .reference-header { background:rgba(15,9,15,.98) !important; border-color:#452219 !important; }
body:has(#productGrid) .reference-header .reference-brand strong { color:var(--reference-text) !important; }
body:has(#productGrid) .reference-header .reference-account { justify-self:end; }
.shop-hero { margin-bottom:20px !important; text-align:left !important; }
body:has(#productGrid) main > .flex.justify-center { justify-content:flex-end !important; margin-top:-80px; margin-bottom:46px !important; }
body:has(#productGrid) main > .flex.justify-center > div { background:transparent !important; border:0 !important; box-shadow:none !important; }
body:has(#productGrid) #shopViewSection { min-height:130px; padding:52px 30px; border:1px solid var(--reference-line); border-radius:24px; background:linear-gradient(145deg,#29172a,#1e121e); }
body:has(#productGrid) #shopViewSection > .flex { margin-bottom:35px !important; }
body:has(#productGrid) .glass-card { background:#251625 !important; border-color:#503047 !important; }
body:has(#productGrid) .premium-card:hover { border-color:#8a4632 !important; }

/* YouTube page */
body:has(#login-page) { align-items:stretch !important; }
body:has(#login-page) .youtube-header { flex:none; }
body:has(#login-page) #login-page { min-height:calc(100vh - 92px); }
body:has(#login-page) #dashboard-page { width:min(calc(100% - 56px),1440px) !important; max-width:1440px !important; padding:54px 0 80px !important; }
body:has(#login-page) #dashboard-page::before { content:"YouTube Premium"; display:block; margin-bottom:42px; color:var(--reference-text); font:750 clamp(34px,3vw,48px) Prompt,Inter,sans-serif; letter-spacing:-1.5px; }
body:has(#login-page) #dashboard-page .bg-white,
body:has(#login-page) #dashboard-page [class*="glass-card"] { background:linear-gradient(145deg,#29172a,#1e121e) !important; border-color:var(--reference-line) !important; }
body:has(#login-page) #dashboard-page .bg-red-600,
body:has(#login-page) #dashboard-page button.bg-red-600 { background:linear-gradient(90deg,var(--reference-orange-2),var(--reference-orange)) !important; }

@media (max-width:1280px) {
  .reference-header,#appScreen .topbar { grid-template-columns:auto minmax(0,1fr) auto; min-height:78px; padding:0 22px; gap:14px; }
  .reference-brand,#appScreen .topbar .logo { gap:10px; font-size:17px; }
  .reference-brand > span,#appScreen .topbar .logo-mark { width:42px; height:42px; border-radius:12px; font-size:17px; }
  .reference-nav,#appScreen .desktop-nav { min-width:0; gap:3px; }
  .reference-nav a,#appScreen .desktop-nav a { min-height:42px; padding:0 clamp(10px,1.25vw,16px); font-size:12px; border-radius:12px; }
  .reference-account,#appScreen .nav-actions { gap:7px; }
  .reference-account > strong,#appScreen .balance-chip { min-height:44px; padding:0 12px; font-size:14px; }
  .reference-credit { min-height:44px; padding-left:12px; }
  .reference-user,#appScreen .user-button { min-height:44px; padding-right:10px; gap:7px; }
  .reference-user em,#appScreen .user-button > span:last-child { max-width:74px; }
  #appScreen .logout { width:40px; height:40px; }
  .topup-layout { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .reference-header,#appScreen .topbar { grid-template-columns:1fr auto; min-height:78px; padding-top:10px; }
  .reference-nav,#appScreen .desktop-nav { grid-column:1/-1; grid-row:2; width:100%; padding:5px 0 9px; order:3; }
  .reference-header-inner > .flex { grid-column:2; grid-row:1; }
}
@media (max-width:700px) {
  .reference-header,#appScreen .topbar { padding:10px 14px 0; gap:8px; }
  .reference-brand,#appScreen .topbar .logo { font-size:16px; gap:9px; }
  .reference-brand > span,#appScreen .topbar .logo-mark { width:38px; height:38px; border-radius:11px; font-size:16px; }
  .reference-account .reference-credit,.reference-account > strong,#appScreen .balance-chip span { display:none; }
  .reference-user em,#appScreen .user-button > span:last-child { display:none; }
  .reference-nav,#appScreen .desktop-nav { overflow-x:auto; justify-content:flex-start; }
  .reference-nav a,#appScreen .desktop-nav a { min-height:40px; padding:0 15px; font-size:12px; }
  .reference-main,body:has(#productGrid) main,#appScreen .main,body:has(#login-page) #dashboard-page { width:min(calc(100% - 24px),1440px) !important; padding-top:30px !important; }
  .otp-business-banner { min-height:58px; margin-bottom:28px; padding:10px 12px 10px 14px; }
  .otp-business-banner-icon { width:34px; height:34px; border-radius:10px; }
  .otp-package-open { min-height:42px; padding:0 14px; }
  .otp-package-dialog { padding:34px 24px 26px; }
  .otp-package-grid { grid-template-columns:1fr; }
  .otp-package-card { min-height:0; }
  .otp-package-for { min-height:0; }
  .mailly-site-footer { width:calc(100% - 24px); margin-top:10px; padding:25px 8px 30px; }
  .mailly-site-footer p { font-size:12px; }
  .mailly-site-footer span { font-size:10.5px; }
  .reference-hero { min-height:130px; align-items:flex-start; flex-direction:column; }
  .reference-hero h1 { font-size:34px !important; }
  .reference-outline-button { min-height:48px; font-size:13px; }
  body:has(.topup-card) .card-header,body:has(.topup-card) .payment-method-group,body:has(.topup-card) .form-group,body:has(.topup-card) .amount-grid,body:has(.topup-card) .topup-card > .btn,body:has(.topup-card) .topup-card > .alert-message,body:has(.topup-card) .file-upload-box { margin-left:18px; margin-right:18px; }
  body:has(.topup-card) .card-header { margin:0; padding:22px 18px; }
  body:has(#productGrid) main > .flex.justify-center { margin-top:0; justify-content:flex-start !important; }
  body:has(#productGrid) #shopViewSection { padding:24px 16px; }
}

@media (max-width:560px) {
  .otp-business-banner { align-items:stretch; flex-direction:column; gap:11px; padding:13px; }
  .otp-business-banner-copy { align-items:flex-start; }
  .otp-business-banner strong { line-height:1.55; }
  .otp-package-open { width:100%; }
  .otp-package-overlay { padding:12px; }
  .otp-package-dialog { max-height:calc(100vh - 24px); padding:52px 16px 22px; border-radius:21px; }
  .otp-package-heading { margin-bottom:22px; padding:0; }
  .otp-package-close { top:12px; right:12px; }
}

/* Mobile app-style navigation */
.mobile-app-nav { display:none; }

@media (max-width:700px) {
  body,
  body.reference-page,
  body:has(#productGrid),
  body:has(#login-page),
  #appScreen { padding-bottom:calc(94px + env(safe-area-inset-bottom)) !important; }

  .reference-header,
  #appScreen .topbar {
    grid-template-columns:minmax(0,1fr) auto;
    min-height:68px;
    padding:8px 12px;
  }

  .reference-nav,
  #appScreen .desktop-nav { display:none !important; }

  .reference-account .reference-credit,
  #appScreen .balance-chip span { display:none; }
  .reference-account > strong { display:flex; max-width:100px; }
  .reference-user,
  #appScreen .user-menu { display:none !important; }

  .mobile-app-nav,
  #appScreen .quick-menu.mobile-app-nav {
    position:fixed;
    z-index:90;
    right:0;
    bottom:0;
    left:0;
    top:auto;
    display:block !important;
    overflow:visible;
    border:0;
    border-top:1px solid #e5e7ec;
    background:rgba(255,255,255,.98);
    box-shadow:0 -10px 28px rgba(15,23,42,.12);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .mobile-app-nav-inner,
  #appScreen .quick-menu-inner {
    width:100%;
    min-width:0;
    min-height:76px;
    margin:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .mobile-app-nav-item,
  #appScreen .quick-menu-item {
    min-width:0;
    min-height:64px;
    padding:5px 2px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    overflow:hidden;
    border:0 !important;
    border-radius:14px;
    background:transparent;
    color:#273047;
    font:600 11px/1.15 Prompt,Inter,sans-serif;
    text-decoration:none;
    white-space:nowrap;
  }

  .mobile-app-nav-icon,
  #appScreen .quick-menu-icon {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#f3f5f8;
    color:#566176;
    font-size:17px;
  }

  .mobile-app-nav-item.active,
  #appScreen .quick-menu-item.active {
    color:#d25e2b;
    background:#fff2eb;
  }

  .mobile-app-nav-item:hover,
  #appScreen .quick-menu-item:hover { color:#d25e2b; background:#fff7f2; }

  .mobile-app-nav-item.active .mobile-app-nav-icon,
  #appScreen .quick-menu-item.active .quick-menu-icon {
    background:linear-gradient(145deg,#ff8947,#f46030);
    color:#fff;
    box-shadow:0 6px 14px rgba(240,96,48,.22);
  }

  .mobile-app-nav-item:nth-child(2):not(.active) .mobile-app-nav-icon,
  #appScreen .quick-menu-item:nth-child(2):not(.active) .quick-menu-icon { color:#d49a19; background:#fff8dc; }
  .mobile-app-nav-item:nth-child(3):not(.active) .mobile-app-nav-icon,
  #appScreen .quick-menu-item:nth-child(3):not(.active) .quick-menu-icon { color:#e85b35; background:#fff0eb; }
  .mobile-app-nav-item:nth-child(4):not(.active) .mobile-app-nav-icon,
  #appScreen .quick-menu-item:nth-child(4):not(.active) .quick-menu-icon { color:#e22626; background:#fff0f0; }
  .mobile-app-nav-item:nth-child(5):not(.active) .mobile-app-nav-icon,
  #appScreen .quick-menu-item:nth-child(5):not(.active) .quick-menu-icon { color:#3377b8; background:#edf6ff; }

  #appScreen .quick-menu-item small { display:none; }
}