/* ═══════════════════════════════════════════════════
   ALKADHUMIA GOLD — DESKTOP CSS
   ═══════════════════════════════════════════════════ */

/* --- THEME VARIABLES --- */
:root {
    /* Border for cards/modals. Per-theme so .glass-card works everywhere
       instead of hardcoding a gold tint that is invisible on light surfaces. */
    --card-border: rgba(255, 159, 10, 0.15);
    --bg-color: #000000; --text-color: #FFFFFF; --glass-bg: rgba(30, 30, 32, 0.92); --glass-border: rgba(255, 255, 255, 0.1);
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.5); --accent-gold: #FFB020; --accent-green: #32DE5A; --accent-red: #FF5247;
    --input-bg: rgba(50, 50, 54, 0.95); --input-border: rgba(255, 255, 255, 0.12); --table-header: rgba(50, 50, 54, 0.98); --table-border: rgba(255, 255, 255, 0.1);
    --highlight-bg: rgba(255, 176, 32, 0.18); --accent-blue: #2E9AFF; --secondary-text: #AEAEB2; --card-bg: #1C1C1E; --grouped-bg: #2C2C2E;
    --sidebar-bg: rgba(18, 18, 20, 0.98); --sidebar-border: rgba(255, 255, 255, 0.06);
    --hover-bg: rgba(255, 255, 255, 0.08); --hover-bg-subtle: rgba(255, 255, 255, 0.04); --scrollbar-thumb: rgba(255, 255, 255, 0.08);
}

/* Thicker outlines (user trial): cards/modals/inputs get a solid 2px edge, small
   controls 1.5px. Width-only override — colors still come from the border vars. */

/* Solid panels with a vibrant gold outline. Reduced backdrop-blur (was 32px)
   and dropped the inset top highlight that read as "shiny glass" — the panels
   now look like solid warm cards with a gold border, not frosted plates. */

/* Solid inputs — vibrant gold border for clear field edges, no blur. */

/* SELL — saturated orange-red gradient, distinct from BUY's gold. */

/* Theme-aware overrides for gold-tinted components — pick up the new accent. */

/* Active nav underline + active card borders pop with the new gold. */

/* ────────────────────────────────────────────────────────────────────────
   OUTLINE NAV ICONS — applies regardless of theme.
   Drops the colored emoji-style tile (white-bg square) so the new outline
   SVG icons sit cleanly. The SVG inherits the nav button's text color
   (currentColor), so it matches secondary-text when inactive and accent
   color when active.
   ──────────────────────────────────────────────────────────────────────── */
.sb-nav-icon:has(svg) { background: transparent; width: auto; height: auto; }
.sb-nav-icon svg { display: block; width: 20px; height: 20px; }
.ios-tab-icon:has(svg) { background: transparent; }
.ios-tab-icon svg { display: block; width: 22px; height: 22px; margin: 0 auto; }

/* Support FAQ list — collapsible Q&A items inside Settings → Help & Support. */
.support-faq-list { display: flex; flex-direction: column; gap: 6px; }
.support-faq-item {
    background: var(--hover-bg-subtle);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}
.support-faq-item summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.support-faq-item summary::-webkit-details-marker { display: none; }
.support-faq-item summary::after {
    content: '＋';
    font-size: 16px;
    color: var(--secondary-text);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.support-faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent-gold); }
.support-faq-item[open] { border-color: rgba(255, 159, 10, 0.28); }
.support-faq-answer {
    padding: 0 14px 12px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--secondary-text);
}

/* --- RESET --- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Tajawal', sans-serif; background: var(--bg-color); color: var(--text-color); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; transition: background 0.35s ease, color 0.35s ease; }

/* --- CUSTOM TITLE BAR --- */
#titleBar { display: flex; align-items: center; justify-content: space-between; height: 36px; background: var(--sidebar-bg); border-bottom: 0.5px solid var(--sidebar-border); -webkit-app-region: drag; user-select: none; flex-shrink: 0; z-index: 1000; }
.tb-drag { display: flex; align-items: center; gap: 8px; padding-left: 14px; }
.tb-icon { font-size: 16px; }
.tb-icon-img { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; }
.tb-title { font-size: 13px; font-weight: 700; color: var(--accent-gold); letter-spacing: 0.02em; }
.tb-controls { display: flex; -webkit-app-region: no-drag; }
.tb-btn { width: 46px; height: 36px; border: none; background: transparent; color: var(--secondary-text); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.tb-btn:hover { background: var(--hover-bg); }
.tb-close:hover { background: #E81123; color: white; }

/* --- APP LAYOUT --- */
#appLayout { display: flex; height: calc(100vh - 36px); overflow: hidden; flex-direction: column; }
#appBody { display: flex; flex: 1; overflow: hidden; }

/* --- TOP SPOT BAR --- */
#spotBar { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 7px 18px; background: var(--sidebar-bg); border-bottom: 0.5px solid var(--sidebar-border); flex-shrink: 0; }
.spot-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; box-shadow: 0 0 5px #555; flex-shrink: 0; transition: all 0.3s; }
.spot-bar-dot.online { background: var(--accent-green); box-shadow: 0 0 8px rgba(48,209,88,0.6); }
.spot-bar-dot.offline { background: var(--accent-red); box-shadow: 0 0 8px rgba(255,69,58,0.5); }
.spot-bar-main { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.spot-bar-main:hover { opacity: 0.85; }
.spot-bar-label { font-size: 10px; color: var(--secondary-text); font-weight: 600; }
.spot-bar-price { font-size: 24px; font-weight: 900; color: var(--accent-green); text-shadow: 0 1px 8px rgba(48,222,90,0.35); letter-spacing: -0.02em; }
.spot-bar-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.spot-bar-gram-group { display: flex; align-items: center; gap: 14px; }
.spot-bar-gram { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; }
.spot-bar-gram small { font-size: 10px; color: var(--secondary-text); font-weight: 600; }
.spot-bar-24 { color: var(--text-color); }
.spot-bar-21 { color: var(--accent-gold); }
.spot-bar-adj { display: flex; align-items: center; gap: 4px; }
.adj-btn { background: rgba(48, 209, 88, 0.15); border: none; color: var(--accent-green); border-radius: 6px; width: 26px; height: 26px; font-weight: 700; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.adj-input { width: 56px; height: 26px; padding: 0 6px; border-radius: 6px; border: none; background: rgba(0, 0, 0, 0.3); color: #fff; font-weight: 700; font-size: 13px; text-align: center; outline: none; margin: 0; }

/* --- SIDEBAR (collapsible) --- */
#sidebar { width: 220px; min-width: 220px; background: var(--sidebar-bg); border-right: 0.5px solid var(--sidebar-border); display: flex; flex-direction: column; overflow: hidden; user-select: none; transition: width 0.25s ease, min-width 0.25s ease; }
html[dir="rtl"] #sidebar { border-right: none; border-left: 0.5px solid var(--sidebar-border); }
#sidebar.collapsed { width: 56px; min-width: 56px; }
#sidebar.collapsed .sb-nav-label { display: none; }
#sidebar.collapsed .sb-bal-label, #sidebar.collapsed .sb-bal-val small { display: none; }
#sidebar.collapsed .sb-bal-current { display: none; }
#sidebar.collapsed .sb-bal-card-title { display: none; }
#sidebar.collapsed .sb-bal-card { padding: 6px 4px; }
#sidebar.collapsed .sb-quick-btns { flex-direction: column; }
#sidebar.collapsed .sb-qbtn span { display: none; }
#sidebar.collapsed .sb-nav-item { padding: 10px 0; justify-content: center; border-left-width: 2px; }
html[dir="rtl"] #sidebar.collapsed .sb-nav-item { border-right-width: 2px; }
#sidebar.collapsed .sb-nav-icon { width: auto; font-size: 20px; }
#sidebar.collapsed .sb-bal-row { justify-content: center; gap: 0; }
#sidebar.collapsed .sb-bal-icon { display: none; }
#sidebar.collapsed .sb-bal-val { font-size: 11px; }
#sidebar.collapsed .sb-bal-divider { margin: 4px 6px; }
.sb-collapse-btn { background: none; border: none; color: var(--secondary-text); font-size: 18px; cursor: pointer; padding: 10px 16px; display: flex; align-items: center; justify-content: center; border-bottom: 0.5px solid var(--sidebar-border); transition: all 0.15s; }
.sb-collapse-btn:hover { color: var(--accent-gold); background: var(--hover-bg-subtle); }
#sidebar.collapsed .sb-collapse-btn { padding: 10px 0; }

/* Navigation */
.sb-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
.sb-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; border: none; background: transparent; color: var(--secondary-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; text-align: start; border-left: 3px solid transparent; }
html[dir="rtl"] .sb-nav-item { border-left: none; border-right: 3px solid transparent; }
.sb-nav-item:hover { background: var(--hover-bg-subtle); color: var(--text-color); }
.sb-nav-item.active { background: rgba(255, 159, 10, 0.08); color: var(--accent-gold); border-left-color: var(--accent-gold); font-weight: 700; }
html[dir="rtl"] .sb-nav-item.active { border-right-color: var(--accent-gold); }
.sb-nav-icon { font-size: 18px; width: 30px; height: 30px; text-align: center; flex-shrink: 0; background: rgba(255, 255, 255, 0.06); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sb-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-nav-divider { height: 0.5px; background: var(--sidebar-border); margin: 6px 16px; }
.sb-sync-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #555; box-shadow: 0 0 5px #555; transition: all 0.15s; }

/* Balance Footer — sidebar summary at the bottom.
   New look: each balance line is a mini "pill" with a colored left stripe (gold/cyan/green),
   subtle gradient background matching the metric's accent, and a larger bold value for quick
   scanning. Scrap mode shows the three fixed pills + a clickable "Current" summary; jeweler
   mode promotes them into two labelled cards (Capital + Today's Flow) using the same pill style. */
.sb-balance-footer { padding: 12px 14px 14px; border-top: 0.5px solid var(--sidebar-border); background: var(--hover-bg); }

/* Shared pill style. Each row gets a colored left stripe via a pseudo-element. */
.sb-bal-row {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin-bottom: 6px;
    border-radius: 10px;
    border: 0.5px solid var(--glass-border);
    background: var(--hover-bg-subtle);
    font-size: 13px;
    transition: background 0.15s, transform 0.15s;
}
.sb-bal-row::before {
    content: ''; position: absolute;
    inset-inline-start: 0; top: 12%; bottom: 12%;
    width: 3px; border-radius: 3px;
    background: var(--secondary-text);
}
.sb-bal-row:last-child { margin-bottom: 0; }
.sb-bal-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.sb-bal-label { flex: 1; color: var(--secondary-text); font-weight: 700; font-size: 12px; letter-spacing: 0.3px; text-transform: uppercase; }
.sb-bal-val { font-weight: 900; font-size: 15px; letter-spacing: -0.01em; }
.sb-bal-val small { font-size: 10px; font-weight: 700; color: var(--secondary-text); margin-inline-start: 3px; letter-spacing: normal; text-transform: none; }

/* Gold pill — gold accent stripe + tinted bg */
.sb-bal-gold { color: var(--accent-gold); }
.sb-balance-footer .sb-bal-row:has(.sb-bal-gold) { background: linear-gradient(90deg, rgba(255,176,32,0.12), rgba(255,176,32,0.03) 70%); border-color: rgba(255,176,32,0.28); }
.sb-balance-footer .sb-bal-row:has(.sb-bal-gold)::before { background: var(--accent-gold); }

/* Cash (IQD) pill — cyan accent */
.sb-bal-cash { color: #00ccff; }
.sb-balance-footer .sb-bal-row:has(.sb-bal-cash) { background: linear-gradient(90deg, rgba(0,204,255,0.11), rgba(0,204,255,0.03) 70%); border-color: rgba(0,204,255,0.28); }
.sb-balance-footer .sb-bal-row:has(.sb-bal-cash)::before { background: #00ccff; }

/* USD pill — green accent */
.sb-bal-usd { color: var(--accent-green); }
.sb-balance-footer .sb-bal-row:has(.sb-bal-usd) { background: linear-gradient(90deg, rgba(48,209,88,0.11), rgba(48,209,88,0.03) 70%); border-color: rgba(48,209,88,0.28); }
.sb-balance-footer .sb-bal-row:has(.sb-bal-usd)::before { background: var(--accent-green); }

.sb-bal-divider { height: 0.5px; background: var(--sidebar-border); margin: 10px 0; }

/* "Current" summary strip — clickable, compact, three mini-values in one row. */
.sb-bal-current {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--hover-bg-subtle); border: 0.5px dashed var(--glass-border);
    font-size: 11px; color: var(--secondary-text);
    cursor: pointer; transition: all 0.15s;
}
.sb-bal-current::before { display: none; }
.sb-bal-current:hover { background: var(--hover-bg); border-style: solid; }
.sb-bal-current div { display: flex; gap: 4px; align-items: baseline; }
.sb-bal-current small { flex: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.sb-bal-current span { font-weight: 800; color: var(--text-color); font-size: 12px; }

/* Jeweler cards — group the pills under a small title, subtle gradient frame per card. */
.sb-bal-card { padding: 12px 14px; border-radius: 14px; margin-top: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); transition: all 0.18s; }
.sb-bal-card:first-child { margin-top: 0; }
.sb-bal-card .sb-bal-row:last-child { margin-bottom: 0; }
.sb-bal-capital { background: linear-gradient(135deg, rgba(255,204,0,0.10), rgba(255,159,10,0.04)); border: 1px solid rgba(255,204,0,0.32); cursor: pointer; }
.sb-bal-capital:hover { background: linear-gradient(135deg, rgba(255,204,0,0.16), rgba(255,159,10,0.06)); border-color: rgba(255,204,0,0.5); transform: translateY(-1px); }
.sb-bal-debts { background: linear-gradient(135deg, rgba(10,132,255,0.08), rgba(90,200,250,0.03)); border: 1px solid rgba(10,132,255,0.26); }
.sb-bal-card-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--secondary-text); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.sb-bal-capital .sb-bal-card-title { color: var(--accent-gold); }
.sb-bal-debts .sb-bal-card-title { color: #5ac8fa; }
.sb-quick-btns { display: flex; gap: 6px; margin-top: 8px; }
.sb-quick-btns.sb-quick-top { padding: 0 12px 10px; margin: 0; border-bottom: 0.5px solid var(--glass-border); }
.sb-qbtn { flex: 1; padding: 6px; border-radius: 8px; border: 0.5px solid var(--glass-border); background: var(--hover-bg-subtle); color: var(--text-color); font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.sb-qbtn:hover { background: var(--hover-bg); }
.sb-qbtn.spinning { animation: sbSpin 0.7s linear infinite; pointer-events: none; opacity: 0.7; }
@keyframes sbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- MAIN CONTENT --- */
#mainContent { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 24px; }
#mainContent::-webkit-scrollbar { width: 8px; }
#mainContent::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
#mainContent::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* --- VIEW SECTIONS --- */
.view-section { display: none; animation: viewFade 0.3s ease-out; }
.view-section.active { display: block; }
@keyframes viewFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* --- GLASS CARD --- */
.glass-card { background: var(--glass-bg); border: 0.5px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; transition: all 0.2s; }

/* --- INPUTS & BUTTONS --- */
input, select { width: 100%; padding: 12px 14px; font-size: 15px; font-weight: 600; border-radius: 10px; border: 0.5px solid var(--input-border); background: var(--input-bg); color: var(--text-color); outline: none; transition: all 0.2s; text-align: start; box-sizing: border-box; margin-bottom: 8px; }
select { text-align: center; }
input:focus, select:focus, button:focus { border-color: rgba(255, 59, 48, 0.8); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.3), 0 0 12px rgba(255, 59, 48, 0.2); outline: none; }
input::placeholder { color: var(--secondary-text); font-weight: 500; }
button { padding: 12px 16px; font-size: 14px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.15s; }
button:hover { opacity: 0.9; }
button:active { transform: scale(0.98); }

.input-row { display: flex; gap: 6px; margin-bottom: 8px; }
.input-row input, .input-row select, .input-row button { margin-bottom: 0; }
.input-blue { background: rgba(0, 150, 255, 0.08); border-color: rgba(0, 150, 255, 0.3); }
.input-green { background: rgba(0, 255, 136, 0.06); border-color: rgba(0, 255, 136, 0.3); }

/* --- AUTOCOMPLETE --- */
.autocomplete { position: relative; display: block; width: 100%; margin-bottom: 8px; }
.autocomplete input { margin-bottom: 0; }
.autocomplete-items { position: absolute; border: 0.5px solid var(--glass-border); z-index: 99; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: var(--glass-bg); backdrop-filter: blur(40px); border-radius: 0 0 10px 10px; box-shadow: var(--shadow); }
.autocomplete-item { padding: 10px 14px; cursor: pointer; border-bottom: 0.5px solid var(--table-border); font-weight: 600; font-size: 14px; color: var(--text-color); }
.autocomplete-item:hover, .autocomplete-active { background: rgba(10, 132, 255, 0.1); color: var(--accent-blue); }

/* Reconciliation modal — physical count vs app balance rows. */
.reconcile-body { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.reconcile-row { background: var(--input-bg); border: 0.5px solid var(--input-border); border-radius: 10px; padding: 10px 12px; }
.reconcile-label { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.reconcile-cells { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center; }
.reconcile-cell { display: flex; flex-direction: column; gap: 2px; }
.reconcile-cap { font-size: 9px; color: var(--secondary-text); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
.reconcile-app { font-size: 13px; font-weight: 800; color: var(--accent-gold); }
.reconcile-input { width: 100%; padding: 8px 8px; border-radius: 8px; border: 0.5px solid var(--input-border); background: var(--bg-color, #0a0a0a); color: var(--text-color); font-size: 13px; font-weight: 700; text-align: center; box-sizing: border-box; }
.reconcile-diff { font-size: 13px; font-weight: 800; text-align: center; }
.reconcile-diff.reconcile-ok { color: var(--accent-green); }
.reconcile-diff.reconcile-mismatch { color: var(--accent-red); }

/* Per-client debt-aging badge — color-coded by days since last activity. */
.ccp-aging-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 800; margin-top: 5px; letter-spacing: 0.2px; }
.ccp-aging-green { background: rgba(48, 209, 88, 0.18); color: var(--accent-green); }
.ccp-aging-amber { background: rgba(255, 184, 0, 0.20); color: #d68600; }
.ccp-aging-red   { background: rgba(255, 69, 58, 0.18); color: var(--accent-red); }

/* Undo-last-trade button on the active-trades header. */
.btn-undo {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 8px;
    border: 0.5px solid var(--input-border);
    background: var(--input-bg); color: var(--secondary-text);
    font-size: 12px; font-weight: 800; cursor: pointer;
    white-space: nowrap; transition: all 0.15s;
}
.btn-undo:hover  { background: var(--accent-red); border-color: var(--accent-red); color: #fff; }
.btn-undo:active { transform: scale(0.97); }

/* Live client-balance strip under the trade-form name input. Each currency
   value is colored individually (green = they owe us/لنا, red = we owe/علينا)
   so mixed-sign balances read correctly. */
.trade-name-balance-preview { padding: 8px 14px; margin-bottom: 8px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; background: var(--input-bg); border-left: 3px solid var(--accent-gold); }
.trade-name-balance-preview .tnb-lbl   { font-size: 11px; color: var(--secondary-text); font-weight: 700; }
.trade-name-balance-preview .tnb-item  { display: inline-flex; gap: 4px; align-items: baseline; }
.trade-name-balance-preview .tnb-value { font-weight: 800; }
.trade-name-balance-preview .tnb-unit  { font-size: 11px; opacity: 0.75; }

/* --- DASHBOARD GRID --- */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-left, .dash-right { min-width: 0; }

/* Activity Strip */
.dash-activity { display: flex; gap: 8px; margin-bottom: 14px; }
.act-card { flex: 1; border-radius: 10px; padding: 10px 8px; text-align: center; }
.act-buy { background: rgba(10, 132, 255, 0.1); border: 1px solid rgba(10, 132, 255, 0.3); }
.act-sell { background: rgba(255, 69, 58, 0.1); border: 1px solid rgba(255, 69, 58, 0.3); }
.act-net { background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.3); }
.act-label { font-size: 10px; font-weight: 700; margin-bottom: 4px; }
.act-buy .act-label { color: var(--accent-blue); }
.act-sell .act-label { color: var(--accent-red); }
.act-net .act-label { color: var(--accent-gold); }
.act-value { font-size: 20px; font-weight: 900; color: var(--text-color); }
.act-sub { font-size: 9px; color: var(--secondary-text); }
.act-iqd { font-size: 11px; font-weight: 800; margin-top: 4px; }
.act-buy .act-value, .act-buy .act-iqd { color: var(--accent-blue); }
.act-sell .act-value, .act-sell .act-iqd { color: var(--accent-red); }
.act-net .act-value { color: var(--accent-gold); }

/* Trade Form */
.trade-form-card { padding: 18px; }
.trade-form-layout { display: flex; gap: 10px; }
/* Multi-item header (jeweler) — sits above the form, shows pending items + "+" button.
   Each chip is a collapsed snapshot of an item the user added before. */
.multi-item-header { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.pending-items-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.pending-item-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,200,80,0.10); border: 1px solid rgba(255,200,80,0.35); border-radius: 16px; padding: 6px 10px; font-size: 12px; line-height: 1.2; max-width: 100%; }
.pending-item-chip .pi-label { font-weight: 700; color: var(--accent-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.pending-item-chip .pi-info { color: var(--secondary-text); white-space: nowrap; }
.pending-item-chip .pi-remove { width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: rgba(255,68,68,0.18); border: 0; color: var(--accent-red); font-weight: 800; cursor: pointer; padding: 0; flex-shrink: 0; }
.btn-add-item { background: rgba(0,255,136,0.12); color: var(--accent-green); border: 1px dashed var(--accent-green); border-radius: 12px; padding: 8px 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-size: 13px; }
.btn-add-item:hover { background: rgba(0,255,136,0.20); }

.trade-inputs { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.trade-inputs input, .trade-inputs select { margin-bottom: 0; }
.karat-col { width: 56px; display: flex; flex-direction: column; gap: 3px; }
.karat-btn { flex: 1; background: var(--input-bg); border: 1px solid transparent; color: var(--secondary-text); border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.karat-btn:hover { background: var(--hover-bg); }

/* Per-karat identity colors — applied to inactive text + active fill */
/* Inactive: colored text tint so the karat is identifiable at a glance */
.karat-btn[data-karat="24"] { color: #FFCC00; }
.karat-btn[data-karat="22"] { color: #FFA726; }
.karat-btn[data-karat="21"] { color: #FF9F0A; }
.karat-btn[data-karat="19"] { color: #30D158; }
.karat-btn[data-karat="18"] { color: #F472B6; }
.karat-btn[data-karat="14"] { color: #A78BFA; }
.karat-btn[data-karat="12"] { color: #5AC8FA; }
.karat-btn[data-karat="9"]  { color: #9CA3AF; }

/* Active: solid karat background, black text for contrast against the bright tints, glow shadow */
.karat-btn.active { color: #000; border-color: rgba(255,255,255,0.15); }
.karat-btn.active[data-karat="24"] { background: #FFCC00; box-shadow: 0 2px 10px rgba(255,204,0,0.5); }
.karat-btn.active[data-karat="22"] { background: #FFA726; box-shadow: 0 2px 10px rgba(255,167,38,0.5); }
.karat-btn.active[data-karat="21"] { background: #FF9F0A; box-shadow: 0 2px 10px rgba(255,159,10,0.5); }
.karat-btn.active[data-karat="19"] { background: #30D158; box-shadow: 0 2px 10px rgba(48,209,88,0.45); }
.karat-btn.active[data-karat="18"] { background: #F472B6; box-shadow: 0 2px 10px rgba(244,114,182,0.5); }
.karat-btn.active[data-karat="14"] { background: #A78BFA; box-shadow: 0 2px 10px rgba(167,139,250,0.5); color:#fff; }
.karat-btn.active[data-karat="12"] { background: #5AC8FA; box-shadow: 0 2px 10px rgba(90,200,250,0.5); }
.karat-btn.active[data-karat="9"]  { background: #9CA3AF; box-shadow: 0 2px 10px rgba(156,163,175,0.45); color:#fff; }

/* Price field tint — follows the selected karat via data-karat on the input */
#price[data-karat="24"] { border-color: #FFCC00; box-shadow: 0 0 0 2px rgba(255,204,0,0.15); }
#price[data-karat="22"] { border-color: #FFA726; box-shadow: 0 0 0 2px rgba(255,167,38,0.15); }
#price[data-karat="21"] { border-color: #FF9F0A; box-shadow: 0 0 0 2px rgba(255,159,10,0.15); }
#price[data-karat="19"] { border-color: #30D158; box-shadow: 0 0 0 2px rgba(48,209,88,0.15); }
#price[data-karat="18"] { border-color: #F472B6; box-shadow: 0 0 0 2px rgba(244,114,182,0.15); }
#price[data-karat="14"] { border-color: #A78BFA; box-shadow: 0 0 0 2px rgba(167,139,250,0.15); }
#price[data-karat="12"] { border-color: #5AC8FA; box-shadow: 0 0 0 2px rgba(90,200,250,0.15); }
#price[data-karat="9"]  { border-color: #9CA3AF; box-shadow: 0 0 0 2px rgba(156,163,175,0.15); }

.btn-pull-spot { width: 44px; padding: 0; font-size: 16px; background: rgba(0, 255, 136, 0.15); border: 1px solid var(--accent-green); color: var(--accent-green); border-radius: 8px; flex-shrink: 0; }
.btn-curr-toggle { width: 90px; padding: 0; font-size: 13px; background: rgba(0, 204, 255, 0.1); border: 1px solid #00ccff; color: #00ccff; border-radius: 8px; font-weight: 700; flex-shrink: 0; }

/* Converter Box */
.converter-box { background: var(--input-bg); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.cv-row { display: flex; justify-content: space-between; margin-bottom: 4px; font-weight: 600; font-size: 14px; }
.cv-equiv { color: #00ff88; font-size: 13px; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); padding-bottom: 4px; }
.cv-total { font-size: 16px; border-top: 1px dashed var(--table-border); padding-top: 8px; margin-top: 4px; }

/* Trade Buttons */
.trade-buttons { display: flex; gap: 10px; margin-top: 12px; }
.btn-buy { flex: 1; background: var(--accent-green); color: #fff; font-size: 16px; font-weight: 700; border-radius: 12px; padding: 14px; }
.btn-sell { flex: 1; background: var(--accent-red); color: #fff; font-size: 16px; font-weight: 700; border-radius: 12px; padding: 14px; }
.btn-eod { background: var(--accent-gold); color: #000; width: 100%; margin-top: 14px; font-size: 16px; font-weight: 700; border-radius: 12px; padding: 14px; }

/* Result Card */
.result-card { text-align: start; }
.avg-strip { display: flex; border-bottom: 1px dashed var(--glass-border); padding-bottom: 12px; margin-bottom: 12px; gap: 8px; }
.avg-box { flex: 1; text-align: center; }
.avg-box + .avg-box { border-left: 1px solid var(--glass-border); }
html[dir="rtl"] .avg-box + .avg-box { border-left: none; border-right: 1px solid var(--glass-border); }
.avg-label { font-size: 11px; color: var(--secondary-text); font-weight: 700; display: block; margin-bottom: 4px; }
.avg-val { font-size: 15px; font-weight: 800; display: block; }
.avg-val small { font-size: 10px; }
.avg-sub { font-size: 11px; color: var(--accent-gold); opacity: 0.75; }
.avg-val.gold { color: var(--accent-gold); }
.avg-val.blue { color: #00ccff; }
.profit-row { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; }
.profit-vals { text-align: end; }

/* Section Title */
.section-title { color: var(--text-color); opacity: 0.7; font-size: 15px; margin-bottom: 12px; font-weight: 700; }

/* --- TRADE CARDS --- */
#historyContainer { max-height: none; overflow: visible; }
.history-cards-wrapper { display: flex; flex-direction: column; gap: 0; }
.trade-card { display: flex; flex-direction: column; background: var(--glass-bg); border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); border: 0.5px solid var(--glass-border); margin-bottom: 8px; transition: all 0.15s; }
.trade-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }
.buy-card { border-left: 3px solid var(--accent-green); }
.sell-card { border-left: 3px solid var(--accent-red); }
html[dir="rtl"] .buy-card { border-left: none; border-right: 3px solid var(--accent-green); }
html[dir="rtl"] .sell-card { border-left: none; border-right: 3px solid var(--accent-red); }
.tc-top { display: flex; align-items: center; justify-content: center; padding: 6px 10px 2px; gap: 6px; }
.tc-name { font-size: 18px; font-weight: 900; color: var(--accent-gold); flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clickable name — jumps to client profile */
.tc-name-btn {
    background: rgba(10, 132, 255, 0.10);
    border: 1px solid rgba(10, 132, 255, 0.38);
    color: var(--accent-blue, #5ac8fa);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    flex: 0 1 auto;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    max-width: 60%;
    line-height: 1.2;
}
.tc-name-btn:hover {
    background: rgba(10, 132, 255, 0.22);
    border-color: rgba(10, 132, 255, 0.65);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(10, 132, 255, 0.22);
}
.tc-name-btn:active { transform: translateY(0); }
/* Default placeholder — "Cash client" / "حساب نقدي" — not clickable */
.tc-name-default {
    color: var(--secondary-text);
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    flex: 1;
    text-align: center;
    cursor: default;
    opacity: 0.65;
}
.tc-row { display: flex; align-items: center; padding: 2px 4px 6px; }
.tc-cell { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1px 2px; }
.tc-lbl { font-size: 9px; color: var(--secondary-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tc-val { font-size: 16px; font-weight: 900; line-height: 1.3; }
.tc-val small { font-size: 11px; color: var(--secondary-text); }
.tc-sub { font-size: 10px; color: var(--secondary-text); }
.tc-sep { font-size: 14px; font-weight: 300; color: var(--secondary-text); opacity: 0.3; padding: 0 1px; flex-shrink: 0; }
.tc-remaining { flex: 0.8; }
.tc-note-cell { flex: 0.8; }
.tc-note-val { font-size: 14px; font-weight: 600; color: var(--secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.trade-card-header { display: flex; align-items: center; padding: 8px 12px 4px; gap: 8px; }
.trade-type-badge { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.badge-buy { background: rgba(48, 209, 88, 0.12); color: var(--accent-green); }
.badge-sell { background: rgba(255, 69, 58, 0.12); color: var(--accent-red); }
.trade-client-name { font-size: 14px; font-weight: 700; color: var(--accent-gold); flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-time-chip { font-size: 11px; color: var(--secondary-text); background: var(--hover-bg-subtle); padding: 2px 7px; border-radius: 5px; }
.trade-card-main { display: flex; align-items: center; padding: 2px 0 8px; }
.tcm-col { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 8px; text-align: center; }
.tcm-col + .tcm-col { border-left: 0.5px solid var(--glass-border); }
html[dir="rtl"] .tcm-col + .tcm-col { border-left: none; border-right: 0.5px solid var(--glass-border); }
.tcm-lbl { font-size: 9px; color: var(--secondary-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tcm-val { font-size: 17px; font-weight: 900; line-height: 1.2; }
.tcm-sub { font-size: 10px; color: var(--secondary-text); margin-top: 2px; }
.karat-chip { padding: 1px 6px; background: rgba(255, 159, 10, 0.12); color: var(--accent-gold); border-radius: 4px; font-size: 9px; font-weight: 700; margin-top: 2px; }
.dots-btn { background: none; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--secondary-text); transition: background 0.12s; padding: 0; flex-shrink: 0; }
.dots-btn:hover { background: var(--hover-bg); }

/* Swipe wrappers — desktop doesn't swipe, just show cards */
.swipe-wrapper { position: relative; border-radius: 14px; margin-bottom: 8px; }
.swipe-actions { display: none; }

/* --- TABLES --- */
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; }
th { border-bottom: 0.5px solid var(--table-border); padding: 10px 8px; background: var(--table-header); position: sticky; top: 0; z-index: 1; font-weight: 600; color: var(--secondary-text); font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; }
td { border-bottom: 0.5px solid var(--table-border); padding: 8px 6px; }
tr:hover td { background: var(--hover-bg-subtle); }

/* Customer Profile Sheet */
.cp-sheet { width: 100%; border-collapse: collapse; font-size: 19px; table-layout: auto; }
.cp-sheet thead th { position: sticky; top: 0; z-index: 2; background: var(--table-header); color: var(--text-color); font-size: 15px; font-weight: 800; text-transform: uppercase; padding: 12px 8px; border-bottom: 2px solid var(--accent-gold); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.cp-sheet tbody td { padding: 10px 6px; text-align: center; border-bottom: 0.5px solid var(--glass-border); font-size: 19px; font-weight: 700; white-space: nowrap; vertical-align: middle; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cp-sheet tbody tr:nth-child(even) td { background: var(--hover-bg-subtle); }
.cp-sheet tbody tr:hover td { background: var(--highlight-bg); }
/* Client-ledger cell colors — follow the debt convention:
   .cell-pos (↓ client owes us / لنا) → green (asset for us)
   .cell-neg (↑ we owe client / علينا) → red   (liability for us) */
.cp-sheet .cell-pos { color: var(--accent-green); font-weight: 800; text-shadow: 0 1px 4px rgba(48,209,88,0.3); }
.cp-sheet .cell-neg { color: var(--accent-red);   font-weight: 800; text-shadow: 0 1px 4px rgba(255,69,58,0.3); }
.cp-sheet .cell-zero { color: var(--secondary-text); opacity: 0.4; }
.cp-sheet .remaining-cell { font-size: 16px; line-height: 1.5; font-weight: 800; }
.cp-sheet tbody tr.cp-row-selected td { outline: 1.5px solid var(--text-color); outline-offset: -1.5px; background: var(--hover-bg) !important; }

/* --- CAPITAL DROPDOWN CARDS ---
   Same colored-stripe treatment as the sidebar pills, scaled up for the page layout. Each card
   has a thicker colored left stripe, a subtle accent-tinted gradient wash, and a bigger total
   number on the right so the whole row reads as "this is the Gold capital" at a glance. */
.cap-drop-card { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; transition: box-shadow 0.18s, transform 0.18s; }
.cap-drop-card::before { content: ''; position: absolute; inset-inline-start: 0; top: 10%; bottom: 10%; width: 4px; border-radius: 4px; background: var(--secondary-text); }
.cap-drop-card:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,0,0,0.18); }
.cap-drop-card[data-cap="gold"] { background: linear-gradient(135deg, rgba(255,176,32,0.08), transparent 55%); border-color: rgba(255, 159, 10, 0.38); }
.cap-drop-card[data-cap="gold"]::before { background: var(--accent-gold); }
.cap-drop-card[data-cap="cash"] { background: linear-gradient(135deg, rgba(0,204,255,0.07), transparent 55%); border-color: rgba(0, 204, 255, 0.38); }
.cap-drop-card[data-cap="cash"]::before { background: #00ccff; }
.cap-drop-card[data-cap="usd"]  { background: linear-gradient(135deg, rgba(48,209,88,0.07), transparent 55%); border-color: rgba(48, 209, 88, 0.38); }
.cap-drop-card[data-cap="usd"]::before { background: var(--accent-green); }
.cap-drop-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; user-select: none; }
.cap-drop-head:hover { background: rgba(255, 255, 255, 0.03); }
.cap-drop-icon { font-size: 24px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.05); flex-shrink: 0; }
.cap-drop-card[data-cap="gold"] .cap-drop-icon { background: rgba(255,176,32,0.16); }
.cap-drop-card[data-cap="cash"] .cap-drop-icon { background: rgba(0,204,255,0.14); }
.cap-drop-card[data-cap="usd"]  .cap-drop-icon { background: rgba(48,209,88,0.14); }
.cap-drop-title { flex: 1; text-align: start; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.cap-drop-card[data-cap="gold"] .cap-drop-title { color: var(--accent-gold); }
.cap-drop-card[data-cap="cash"] .cap-drop-title { color: #00ccff; }
.cap-drop-card[data-cap="usd"] .cap-drop-title { color: var(--accent-green); }
.cap-drop-total { font-size: 20px; font-weight: 900; letter-spacing: -0.01em; }
.cap-drop-card[data-cap="gold"] .cap-drop-total { color: var(--accent-gold); }
.cap-drop-card[data-cap="cash"] .cap-drop-total { color: #00ccff; }
.cap-drop-card[data-cap="usd"] .cap-drop-total { color: var(--accent-green); }
.cap-drop-chev { font-size: 12px; color: var(--secondary-text); transition: transform 0.25s; margin-inline-start: 4px; }
.cap-drop-card.cap-open .cap-drop-chev { transform: rotate(180deg); }
/* When the chev is actually a <button> (the USD card uses it that way). Both the card header
   and this chev now toggle the ledger dropdown (the USD<->IQD exchange was removed). */
.cap-drop-chev-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 0.5px solid var(--glass-border); background: var(--hover-bg-subtle); cursor: pointer; padding: 0; }
.cap-drop-chev-btn:hover { background: var(--hover-bg); }

/* Sidebar balance pills are tap-to-edit (open the fixed/capital balance editor). */
.sb-bal-editable { cursor: pointer; }
.sb-bal-editable:hover { filter: brightness(1.1); }

/* ── Account page / device list ─────────────────────────────────────────────────────── */
.dm-device-row { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; transition: all 0.18s; }
.dm-device-row:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.dm-device-this { border-color: rgba(255,159,10,0.3); background: linear-gradient(135deg, rgba(255,159,10,0.08), transparent 60%); }
.dm-device-online { border-inline-start-width: 3px; border-inline-start-color: var(--accent-green); }
.dm-device-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.dm-device-this .dm-device-icon { background: rgba(255,159,10,0.12); }
.dm-device-body { flex: 1; min-width: 0; text-align: start; }
.dm-device-name { font-size: 14px; font-weight: 800; color: var(--text-color); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-device-meta { font-size: 11px; color: var(--secondary-text); margin-top: 3px; letter-spacing: 0.2px; }
.dm-this-chip { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-gold); background: rgba(255,159,10,0.14); padding: 2px 8px; border-radius: 10px; border: 0.5px solid rgba(255,159,10,0.3); }
.dm-dev-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; border: 0.5px solid var(--glass-border); background: var(--hover-bg-subtle); color: var(--text-color); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.dm-dev-btn:hover { transform: translateY(-1px); }
.dm-dev-rename { border-color: rgba(255,159,10,0.35); background: rgba(255,159,10,0.1); color: var(--accent-gold); }
.dm-dev-rename:hover { background: rgba(255,159,10,0.18); }
.dm-dev-revoke { border-color: rgba(255,69,58,0.35); background: rgba(255,69,58,0.1); color: var(--accent-red); }
.dm-dev-revoke:hover { background: rgba(255,69,58,0.18); }
.cap-drop-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 16px; }
.cap-drop-card.cap-open .cap-drop-body { max-height: 500px; padding: 0 16px 16px; }
.cap-input-row { display: flex; gap: 6px; margin-bottom: 10px; }
.cap-input-row input { flex: 1; margin: 0; }
.btn-cap-add, .btn-cap-add-green { width: 50px; margin: 0; background: #00b359; color: #000; font-size: 16px; flex-shrink: 0; }
.btn-cap-add-green { background: var(--accent-green); }
.cap-table-wrap { max-height: 200px; overflow-y: auto; border-radius: 8px; border: 1px solid var(--table-border); padding: 4px; background: rgba(0, 0, 0, 0.15); }
.cap-x-btn { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 69, 58, 0.12); border: 0.5px solid rgba(255, 69, 58, 0.3); color: var(--accent-red); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cap-x-btn:hover { background: rgba(255, 69, 58, 0.25); }

/* --- CLIENT LEDGER --- */
.global-debt-card { background: var(--glass-bg); border: 0.5px solid rgba(255, 159, 10, 0.15); border-radius: 14px; padding: 0; overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.debt-header { display: flex; align-items: center; justify-content: center; padding: 12px 16px; cursor: pointer; gap: 10px; position: relative; }
.debt-header h3 { margin: 0; font-size: 15px; color: var(--accent-gold); }
.debt-arrow { font-size: 13px; color: var(--secondary-text); transition: transform 0.25s; position: absolute; right: 16px; }
html[dir="rtl"] .debt-arrow { right: auto; left: 16px; }
.debt-panel-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 16px; }
.debt-grid { border-radius: 10px; overflow: hidden; border: 0.5px solid var(--glass-border); padding-bottom: 6px; }
.debt-grid-header { display: flex; }
.debt-col-left { flex: 1; text-align: center; padding: 8px 0; background: rgba(48, 209, 88, 0.08); }
.debt-col-left h4 { color: var(--accent-green); margin: 0; font-size: 13px; }
.debt-col-right { flex: 1; text-align: center; padding: 8px 0; background: rgba(255, 69, 58, 0.08); }
.debt-col-right h4 { color: var(--accent-red); margin: 0; font-size: 13px; }
.debt-row { display: flex; align-items: center; padding: 5px 10px; }
.debt-row span:first-child { flex: 1; text-align: center; font-weight: 700; font-size: 13px; }
.debt-row span:last-child { flex: 1; text-align: center; font-weight: 700; font-size: 13px; }
.debt-label { font-size: 11px; font-weight: 700; min-width: 50px; text-align: center; color: var(--secondary-text); }
/* Middle "Difference" column — owes-us minus we-owe, stacked under the currency label. */
.debt-col-mid { flex: 0 0 auto; min-width: 96px; text-align: center; padding: 8px 4px; background: rgba(255, 176, 32, 0.08); }
.debt-col-mid h4 { color: var(--accent-gold); margin: 0; font-size: 13px; }
.debt-mid { flex: 0 0 auto; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.debt-net { font-size: 12px; font-weight: 800; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.debt-net.net-pos { color: var(--accent-green); }
.debt-net.net-neg { color: var(--accent-red); }
.debt-net.net-zero { color: var(--secondary-text); }

/* Client Toolbar */
.client-toolbar { display: flex; gap: 6px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.client-sort-select { height: 32px; padding: 0 10px; margin: 0; border-radius: 8px; border: 0.5px solid var(--glass-border); background: var(--hover-bg-subtle); color: var(--text-color); font-size: 12px; font-weight: 700; cursor: pointer; min-width: 130px; }
.client-sort-select:hover { background: var(--hover-bg); }
.client-sort-select:focus { outline: none; border-color: rgba(255,176,32,0.6); box-shadow: 0 0 0 2px rgba(255,176,32,0.2); }
._cat-tab { padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.5); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
._cat-tab:hover { background: rgba(255, 255, 255, 0.08); }
._cat-active { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.12); color: #fff; }
.client-toolbar-spacer { flex: 1; }
/* The wipe-✕ styles must live OUTSIDE mobile.css's phone media query — on iPad/desktop
   the injected button otherwise has no styling at all and renders as a loose ✕
   dangling next to the search box. Anchored inside the field's end, shown only
   when there is text to clear. */
.client-search-inline { flex: 0 0 200px; position: relative; }
.client-search-inline input { margin: 0; font-size: 13px; padding: 9px 12px; padding-inline-end: 32px; width: 100%; box-sizing: border-box; }
.client-search-inline .mb-wipe-x {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; min-width: 0; min-height: 0; /* beat the global 40px touch-target rule */
    display: none; align-items: center; justify-content: center;
    border: none; background: rgba(255, 255, 255, 0.08); color: var(--secondary-text);
    border-radius: 50%; font-size: 12px; cursor: pointer; padding: 0; z-index: 2;
}
.client-search-inline .mb-wipe-x:active { transform: translateY(-50%) scale(0.9); }
.client-search-inline.has-value .mb-wipe-x { display: flex; }
.tb-icon-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--input-bg); border: 0.5px solid var(--input-border); color: var(--text-color); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-add-client { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-green); border: none; color: #000; font-size: 22px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.client-add-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.client-add-bar input { flex: 1; margin: 0; }

/* Client Grid — --ccp-scale is the card-zoom multiplier driven by the +/− toolbar
   buttons (persisted in localStorage). All card text/padding derives from it. */
.client-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; --ccp-scale: 1; }
.client-card-premium { background: var(--card-bg); border: 0.5px solid var(--glass-border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); position: relative; }
.client-card-premium:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); border-color: rgba(255, 159, 10, 0.3); }
.ccp-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(12px * var(--ccp-scale)) calc(8px * var(--ccp-scale)); gap: 6px; text-align: center; height: 100%; box-sizing: border-box; }
.ccp-info { flex: 1; text-align: center; min-width: 0; width: 100%; }
.ccp-name { font-size: calc(17px * var(--ccp-scale)); font-weight: 900; color: var(--text-color); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: calc(5px * var(--ccp-scale)) calc(9px * var(--ccp-scale)); border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.ccp-bal { font-size: calc(14px * var(--ccp-scale)); font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.ccp-bal span { display: block; padding: 3px 6px; border-radius: 5px; white-space: nowrap; }
.client-avatar { display: none; }
.client-card-premium .dots-btn { position: absolute; top: 4px; right: 4px; }
html[dir="rtl"] .client-card-premium .dots-btn { right: auto; left: 4px; }

/* List mode */
.client-grid.list-mode { grid-template-columns: 1fr; gap: 6px; }
.client-grid.list-mode .client-card-premium { aspect-ratio: auto; }
.client-grid.list-mode .ccp-inner { flex-direction: row; padding: 10px 14px; gap: 12px; height: auto; }
.client-grid.list-mode .ccp-name { font-size: calc(17px * var(--ccp-scale)); text-align: start; border: none; background: none; padding: 0; }
.client-grid.list-mode .ccp-info { text-align: start; }
.client-grid.list-mode .ccp-bal { flex-direction: row; flex-wrap: wrap; gap: 4px; font-size: calc(13px * var(--ccp-scale)); }

/* Address row in the profile header — same look as the phone link but not clickable. */
.cp-address-row { cursor: default; }
.cp-address-row:hover { background: inherit; }

/* --- CUSTOMER PROFILE --- */
.cp-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* Header "Back" button — pill-shaped, bordered, prominent */
.btn-back {
    background: rgba(10, 132, 255, 0.08);
    border: 1.5px solid rgba(10, 132, 255, 0.45);
    color: var(--accent-blue);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.12);
}
.btn-back:hover {
    background: rgba(10, 132, 255, 0.18);
    border-color: rgba(10, 132, 255, 0.75);
    transform: translateX(-2px);
    box-shadow: 0 3px 12px rgba(10, 132, 255, 0.25);
}
.btn-back:active { transform: translateX(0); }
.btn-back > .flip-rtl {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}
html[dir="rtl"] .btn-back:hover { transform: translateX(2px); }
.cp-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--accent-gold); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.btn-icon-gold { background: rgba(255, 159, 10, 0.1); border: 0.5px solid rgba(255, 159, 10, 0.3); color: var(--accent-gold); border-radius: 10px; padding: 7px 10px; font-size: 14px; flex-shrink: 0; }
.btn-icon-green { background: rgba(37, 211, 102, 0.1); border: 0.5px solid rgba(37, 211, 102, 0.3); color: #25D366; border-radius: 10px; padding: 7px 10px; font-size: 14px; flex-shrink: 0; }
/* Client name + phone column (stacks the h2 over the phone link inside the cp-header flex row).
   Centered to preserve the pre-existing "name is centered in the header" visual. */
.cp-name-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.cp-name-col .cp-title { margin: 0; flex: 0 0 auto; text-align: center; max-width: 100%; }

/* Phone shown right under the name — no border, no background. Clickable link that opens an
   action sheet with Call / WhatsApp. Subtle hover for affordance. */
.cp-phone-link { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--secondary-text); transition: color 0.12s, background 0.12s; max-width: 100%; }
.cp-phone-link:hover { color: var(--accent-gold); background: rgba(255,176,32,0.08); }
.cp-phone-ico { font-size: 13px; flex-shrink: 0; }
.cp-phone-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cp-balance-hero { background: var(--glass-bg); border: 0.5px solid var(--glass-border); border-radius: 16px; overflow: hidden; margin-bottom: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.cp-bal-col { padding: 14px 12px; text-align: center; position: relative; }
.cp-bal-col + .cp-bal-col { border-left: 0.5px solid var(--glass-border); }
html[dir="rtl"] .cp-bal-col + .cp-bal-col { border-left: none; border-right: 0.5px solid var(--glass-border); }
.cp-bal-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--secondary-text); margin-bottom: 4px; }
.cp-bal-value { font-size: 18px; font-weight: 900; direction: ltr; }
.btn-settle { width: 100%; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 176, 32, 0.4); background: rgba(255, 176, 32, 0.1); color: var(--accent-gold); font-size: 14px; font-weight: 800; cursor: pointer; margin-bottom: 16px; }
.btn-settle:hover { background: rgba(255, 176, 32, 0.18); }
.cp-table-wrap { overflow-x: auto; overflow-y: auto; flex: 1; min-height: 0; }

/* Settlement row — now lives inside tbody (pinned first) and inherits the tbody td styling.
   Only kept the mild accent background so it's still clearly the "action" row.
   Legacy .cp-settle-th / .cp-settle-cell classes removed; leaving .cp-settle-row in case any
   older code references it (no-op now). */
/* Excel-style sheet — vertical column borders so cells read as a real grid
   instead of just a list of rows. Applies to the customer-profile table. */
.cp-sheet thead th,
.cp-sheet tbody td {
    border-right: 0.5px solid var(--glass-border);
    border-left:  0.5px solid var(--glass-border);
}

/* + button above the sheet that reveals the inline settlement row, paired
   with the green "تسوية" submit button shown only while the row is open.
   Sitting both controls in the same toolbar keeps the open / commit
   actions for an in-progress settlement together. */
.cp-add-settle-bar { display: flex; justify-content: flex-start; gap: 8px; margin: 6px 0 8px; }
.cp-add-settle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 0.5px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 13px; font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
}
.cp-add-settle-btn:hover,
.cp-add-settle-btn.open {
    background: var(--accent-gold); color: #000;
    border-color: var(--accent-gold);
}
.cp-settle-submit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-width: 96px; min-height: 46px;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #30d158 0%, #1f8a3a 100%);
    color: #fff;
    font-size: 16px; font-weight: 900; letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(48,209,88,0.35);
    white-space: nowrap;
}
.cp-settle-submit-btn:hover  { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 3px 12px rgba(48,209,88,0.5); }
.cp-settle-submit-btn:active { transform: translateY(0); }

/* Clickable debt cards (Gold / IQD / USD) in the customer-profile balance
   hero — act as quick per-currency "Full Settle" triggers on iPad/PC: click
   the debt → fill that currency's settle input with the full outstanding
   balance + set the clear direction. A pointer cursor + hover tint hint
   they're interactive. On phone they're inert (the ⚖️ modal handles it). */
.cp-bal-clickable { cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.cp-bal-clickable:hover {
    background: rgba(255, 176, 32, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.45);
}
.cp-bal-clickable:active { background: rgba(255, 176, 32, 0.22); }
@media (max-width: 600px) {
    /* Phone: not interactive — the ⚖️ modal has its own Full Settle. */
    .cp-bal-clickable { cursor: default; }
    .cp-bal-clickable:hover { background: transparent; box-shadow: none; }
}

/* Inline settlement row — cells are flat empty inputs (Excel-style). */
.cp-settle-inline-row { background: transparent; }
.cp-settle-inline-row td { vertical-align: middle; padding: 4px 6px !important; }

.cps-input-flat {
    width: 100%;
    padding: 9px 6px;
    font-size: 14px; font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-color);
    outline: none;
    text-align: center;
    box-sizing: border-box;
    border-radius: 4px;
    transition: background 0.12s;
}
.cps-input-flat:focus {
    background: var(--input-bg);
    box-shadow: inset 0 -2px 0 var(--accent-gold);
}
.cps-input-flat::placeholder {
    color: var(--secondary-text);
    opacity: 0.45;
    font-weight: 500;
}

/* لنا / علينا direction dropdown — picks the settlement direction without
   committing. The Settle button at the end of the row is the explicit
   submit. The dropdown re-tints itself based on the chosen side: لنا
   = green (matches "↓ تسوية (لنا)" on data rows), علينا = red (matches
   "↑ تسوية (علينا)"). */
.cps-dir-select {
    width: 100%;
    padding: 7px 10px;
    border: 0.5px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 13px; font-weight: 800;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, color 0.15s;
}
.cps-dir-select:focus { border-color: var(--accent-gold); }
.cps-dir-select.dir-lana   { color: #30d158; border-color: #30d158; }
.cps-dir-select.dir-alayna { color: #ff453a; border-color: #ff453a; }

/* One-tap direction toggle button (replaces the dropdown): — → لنا → علينا → … */
.cps-dir-btn {
    width: 100%; padding: 8px 10px; min-width: 0; min-height: 0;
    border: 1.5px solid var(--input-border); background: var(--input-bg);
    color: var(--secondary-text); border-radius: 8px;
    font-size: 13px; font-weight: 800; text-align: center; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cps-dir-btn.dir-lana   { color: #30d158; border-color: #30d158; background: rgba(48, 209, 88, 0.12); }
.cps-dir-btn.dir-alayna { color: #ff453a; border-color: #ff453a; background: rgba(255, 69, 58, 0.12); }
/* The chosen side also tints the WHOLE settlement row so the direction is
   unmistakable while typing the amounts. */
.cp-settle-inline-row.dir-lana-row td   { background: rgba(48, 209, 88, 0.10) !important; }
.cp-settle-inline-row.dir-alayna-row td { background: rgba(255, 69, 58, 0.10) !important; }

/* Live remaining-balance preview cell — shows what the customer balance
   will be after the in-progress settlement. Updates on every keystroke. */
.cpi-balance-preview {
    font-size: 12px; line-height: 1.5; font-weight: 700;
    text-align: center;
    min-width: 90px;
}

.cp-settle-row { background: rgba(255,176,32,0.06); }  /* legacy — kept for safety */
.cp-settle-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.cp-settle-label.green { color: var(--accent-green); }
.cp-settle-label.red { color: var(--accent-red); }
.cps-input { width: 100%; padding: 8px 6px; font-size: 13px; font-weight: 600; border-radius: 6px; border: 0.5px solid var(--input-border); background: var(--input-bg); color: var(--text-color); outline: none; text-align: start; box-sizing: border-box; margin: 0; min-width: 55px; }
.cps-input:focus { border-color: rgba(255, 59, 48, 0.8); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.3), 0 0 12px rgba(255, 59, 48, 0.2); }
.cps-fill-btn { padding: 4px 8px; border-radius: 5px; background: var(--accent-gold); border: none; color: #000; font-size: 9px; font-weight: 800; cursor: pointer; transition: all 0.15s; flex-shrink: 0; white-space: nowrap; letter-spacing: 0.3px; }
.cps-fill-btn:hover { opacity: 0.85; box-shadow: 0 2px 6px rgba(255,176,32,0.3); }
.cps-submit-btn { width: 100%; height: 38px; border-radius: 8px; background: var(--accent-green); border: none; color: #000; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; box-shadow: 0 3px 12px rgba(48,209,88,0.4), 0 0 4px rgba(48,209,88,0.2); }
.cps-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(48,209,88,0.55), 0 0 6px rgba(48,209,88,0.3); }

/* Settlement button — pill-shaped with icon + label "تسوية / Settle". Replaces the old ✅ button. */
.cps-settle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 90px; height: 34px; padding: 0 14px; border-radius: 18px; background: linear-gradient(135deg, var(--accent-gold) 0%, #c47d00 100%); border: none; color: #000; font-size: 13px; font-weight: 900; letter-spacing: 0.3px; cursor: pointer; transition: all 0.15s; box-shadow: 0 3px 10px rgba(255,176,32,0.4), 0 0 4px rgba(255,176,32,0.18); white-space: nowrap; }
.cps-settle-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,176,32,0.55), 0 0 6px rgba(255,176,32,0.28); filter: brightness(1.05); }
.cps-settle-btn:active { transform: translateY(0); }
/* Settle-row direction buttons (Gold/IQD/USD next to Full Settle) — cash-flow colors:
     default (no .given)  = RECEIVED / client paid US   →  GREEN ↓  (cash IN  to us — good for us)
     .given               = GIVEN    / WE paid client   →  RED   ↑  (cash OUT to client — against us)
   Matches the balance-color convention elsewhere (green = in our favor, red = against us). */
.st-arrow-btn-sm { width: 100%; height: 28px; border-radius: 6px; border: 1px solid rgba(48,209,88,0.5); background: rgba(48,209,88,0.15); color: var(--accent-green); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 6px; transition: all 0.12s; gap: 3px; white-space: nowrap; box-shadow: 0 2px 8px rgba(48,209,88,0.25); }
.st-arrow-btn-sm:hover { box-shadow: 0 3px 12px rgba(48,209,88,0.35); transform: translateY(-1px); }
.st-arrow-btn-sm.given { border-color: rgba(255,69,58,0.5); background: rgba(255,69,58,0.15); color: var(--accent-red); box-shadow: 0 2px 8px rgba(255,69,58,0.25); }
.st-arrow-btn-sm.given:hover { box-shadow: 0 3px 12px rgba(255,69,58,0.35); }
.st-arrow-mini { height: 30px; border-radius: 6px; border: 1px solid rgba(48,209,88,0.6); background: rgba(48,209,88,0.18); color: var(--accent-green); font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 6px; transition: all 0.12s; flex-shrink: 0; box-shadow: 0 2px 10px rgba(48,209,88,0.35), 0 0 4px rgba(48,209,88,0.15); white-space: nowrap; gap: 2px; }
.st-arrow-mini:hover { box-shadow: 0 3px 14px rgba(48,209,88,0.5); transform: translateY(-1px); }
.st-arrow-mini.given { border-color: rgba(255,69,58,0.6); background: rgba(255,69,58,0.18); color: var(--accent-red); box-shadow: 0 2px 10px rgba(255,69,58,0.35), 0 0 4px rgba(255,69,58,0.15); }
.st-arrow-mini.given:hover { box-shadow: 0 3px 14px rgba(255,69,58,0.5); }

/* Convert-cash-to-gold mini button on dashboard cards + profile running-balance cells.
     Default (cash → gold)   = gold accent, inviting the action
     .tc-revert-btn          = dimmed neutral — reverse action is secondary */
.tc-convert-btn { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255,176,32,0.5); background: rgba(255,176,32,0.14); color: var(--accent-gold); font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all 0.15s; letter-spacing: 0.2px; }
.tc-convert-btn:hover { background: rgba(255,176,32,0.25); border-color: rgba(255,176,32,0.8); transform: translateY(-1px); }
.tc-convert-btn.tc-revert-btn { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: var(--secondary-text); }
.tc-convert-btn.tc-revert-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-color); }
.st-arrow-btn-sm:active { transform: scale(0.9); }

/* Column resize handles */
.cp-th-resize { position: relative; cursor: default; min-width: 60px; }
.cp-th-resize::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 4px; cursor: col-resize; background: transparent; z-index: 5; }
.cp-th-resize:hover::after { background: rgba(255,159,10,0.3); }

/* --- EOD CARDS --- */
.eod-card-premium { background: var(--glass-bg); border: 0.5px solid var(--card-border); border-radius: 16px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); cursor: pointer; transition: all 0.15s; animation: cardIn 0.3s ease both; }
.eod-card-premium:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); transform: translateY(-1px); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.eod-ph { padding: 12px 16px 8px; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid var(--glass-border); }
.eod-date-lbl { font-size: 15px; font-weight: 700; color: var(--accent-gold); }
.eod-date-sub { font-size: 11px; color: var(--secondary-text); margin-top: 2px; }
.eod-pf { padding: 8px 16px 12px; display: flex; justify-content: space-between; align-items: center; }

/* Per-day buy/sell stats row at the bottom of each EOD card —
   shows total weight (21K-eq) and weighted avg price for buys + sells. */
.eod-stats-row {
    padding: 8px 16px 12px;
    border-top: 0.5px solid var(--glass-border);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    font-size: 12px;
}
.eod-stats-cell {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--hover-bg-subtle);
    border-radius: 8px;
    padding: 6px 10px;
}
.eod-stats-label { font-size: 10px; color: var(--secondary-text); letter-spacing: 0.4px; text-transform: uppercase; font-weight: 700; }
.eod-stats-w     { font-size: 14px; font-weight: 900; }
.eod-stats-avg   { font-size: 11px; color: var(--secondary-text); font-weight: 600; }
.eod-stats-avg small { opacity: 0.7; }

/* --- PROFIT/LOSS --- */
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pl-today-card { border: 1px solid rgba(48, 209, 88, 0.2); }
.pl-today-card h3 { color: var(--accent-green); margin: 0 0 12px; font-size: 14px; }
.pl-total-card { border: 1px solid rgba(255, 159, 10, 0.2); }
.pl-total-card h3 { color: var(--accent-gold); margin: 0 0 12px; font-size: 14px; }
.pl-row { display: flex; justify-content: space-between; align-items: center; }
.pl-right { text-align: end; }
.pl-label { font-size: 11px; color: var(--secondary-text); font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
.pl-big { font-size: 24px; font-weight: 900; }
.pl-sub-row { display: flex; justify-content: space-between; border-top: 0.5px solid rgba(255, 255, 255, 0.08); padding-top: 10px; margin-top: 10px; }
.pl-sub-row small { font-size: 10px; color: var(--secondary-text); font-weight: 700; display: block; margin-bottom: 3px; }
.btn-recalc { width: 100%; margin-bottom: 14px; background: rgba(10, 132, 255, 0.08); color: var(--accent-blue); border: 0.5px solid rgba(10, 132, 255, 0.25); border-radius: 12px; padding: 11px; font-size: 13px; font-weight: 700; }
.btn-recalc:hover { background: rgba(10, 132, 255, 0.15); }
.pl-day-card { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 10px; margin-bottom: 6px; background: rgba(255, 255, 255, 0.03); border: 0.5px solid var(--glass-border); }
.pdc-date { font-size: 14px; font-weight: 700; }
.pdc-amounts { text-align: end; }
.pdc-iqd { font-size: 14px; font-weight: 800; }
.pdc-usd { font-size: 11px; font-weight: 600; margin-top: 2px; opacity: 0.7; }

/* --- CONVERTER --- */
.conv-weight-input { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.conv-selects { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; gap: 10px; }
.conv-selects > div { width: 42%; }
.conv-selects label { font-size: 13px; font-weight: 700; color: var(--accent-gold); display: block; margin-bottom: 4px; }
.conv-selects select { margin: 0; }
.btn-swap { font-size: 26px; color: var(--accent-gold); background: none; border: none; cursor: pointer; padding: 0 6px; }
.conv-result-box { text-align: center; padding: 20px; border-radius: 12px; background: rgba(0, 255, 136, 0.06); border: 1px solid rgba(0, 255, 136, 0.2); margin-bottom: 12px; }
.conv-result-val { font-size: 36px; font-weight: 900; color: var(--accent-green); }

/* --- CALCULATOR --- */
.calc-card { padding: 18px; }
.calc-display { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--accent-gold); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; min-height: 80px; display: flex; flex-direction: column; justify-content: flex-end; text-align: end; overflow: hidden; }
.calc-expr { font-size: 14px; color: var(--secondary-text); min-height: 18px; margin-bottom: 4px; }
.calc-val { font-size: 34px; font-weight: 900; color: #00ff88; word-break: break-all; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.calc-btn { background: var(--glass-bg); color: var(--text-color); border: 0.5px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 14px 0; font-size: 20px; font-weight: 700; cursor: pointer; transition: all 0.1s; }
.calc-btn:active { background: rgba(255, 176, 32, 0.15); transform: scale(0.96); }
.calc-btn-red { background: var(--accent-red); color: #fff; }
.calc-btn-gray { background: rgba(255, 255, 255, 0.1); }
.calc-btn-gold { background: var(--accent-gold); color: #000; }
.calc-btn-green { background: var(--accent-green); color: #000; }
.calc-history { max-height: 200px; overflow-y: auto; }
.section-label { font-weight: 700; font-size: 14px; color: var(--secondary-text); }
.btn-clear { background: none; border: none; color: var(--accent-red); font-size: 12px; font-weight: 700; cursor: pointer; }
.empty-msg { text-align: center; color: var(--secondary-text); padding: 14px 0; }

/* --- SETTINGS & DATA --- */
.settings-section { margin-bottom: 20px; }
.settings-label { font-size: 12px; font-weight: 700; color: var(--secondary-text); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px 8px; }
.danger-label { color: var(--accent-red); }
.settings-group { border-radius: 14px; overflow: hidden; border: 0.5px solid var(--glass-border); }
.danger-group { border-color: rgba(255, 69, 58, 0.25); }
.settings-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card-bg); border: none; border-bottom: 0.5px solid var(--glass-border); color: var(--text-color); font-size: 14px; font-weight: 600; cursor: pointer; text-align: start; }
.settings-row:hover { background: rgba(255, 255, 255, 0.03); }
.danger-row { color: var(--accent-red); }
.sr-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.sr-text { flex: 1; }
.sr-text small { font-size: 11px; color: var(--secondary-text); font-weight: 500; margin-top: 2px; display: block; }
.sr-arrow { color: var(--secondary-text); font-size: 18px; opacity: 0.4; }
.sync-card { padding: 16px; }
.sync-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.sync-sub { font-size: 11px; color: var(--secondary-text); margin-top: 2px; }
.sync-status { font-size: 11px; color: var(--accent-green); margin-top: 1px; }
.sync-btns { display: flex; gap: 8px; margin-bottom: 8px; }
.btn-sync-pull { flex: 1; padding: 11px; border-radius: 12px; background: rgba(10, 132, 255, 0.1); color: var(--accent-blue); border: 1px solid rgba(10, 132, 255, 0.25); font-weight: 700; }
.btn-sync-push { flex: 1; padding: 11px; border-radius: 12px; background: rgba(48, 209, 88, 0.08); color: var(--accent-green); border: 1px solid rgba(48, 209, 88, 0.2); font-weight: 700; }
.btn-sync-stop { width: 100%; padding: 11px; border-radius: 12px; background: rgba(255, 69, 58, 0.08); color: var(--accent-red); border: 1px solid rgba(255, 69, 58, 0.25); font-weight: 700; }
.sync-info { font-size: 11px; color: var(--secondary-text); display: block; margin-top: 8px; text-align: center; }
.card-title { color: var(--accent-gold); margin: 0 0 16px; font-size: 16px; }
.desc-text { font-size: 13px; opacity: 0.7; margin-bottom: 14px; line-height: 1.6; }
.btn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-grid-1 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.theme-btn { padding: 14px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-color); }
.theme-btn:hover { opacity: 0.85; }

/* --- MODALS --- */
.modal { display: none; position: fixed; z-index: 9500; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); }
.modal[style*="display: block"], .modal[style*="display:block"], .modal[style*="display: flex"], .modal[style*="display:flex"] { display: flex !important; align-items: center; justify-content: center; }
.modal-content { margin: 0 auto; width: 94%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 24px; border-radius: 16px; animation: modalIn 0.25s ease-out; position: relative; }
.modal-content input, .modal-content select { margin-bottom: 6px; }
.modal-content .input-row { margin-bottom: 6px; }
.modal-content .input-row input, .modal-content .input-row select { margin-bottom: 0; }
.modal-content h3 { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--accent-gold); text-align: center; }
.edit-label { display: block; font-size: 11px; font-weight: 700; color: var(--secondary-text); text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 0 4px; text-align: start; }
.modal-sm { max-width: 400px; }
.modal-chart { width: 95%; max-width: 900px; height: 80vh; display: flex; flex-direction: column; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.modal-btns { display: flex; gap: 10px; margin-top: 14px; }
.modal-btns button { flex: 1; }

/* Close modal on backdrop click */
.modal { cursor: default; }

/* --- ACTION SHEET (Desktop popover) --- */
.as-overlay { position: fixed; inset: 0; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.as-overlay.show { opacity: 1; pointer-events: all; }
.action-sheet { position: fixed; min-width: 180px; max-width: 240px; background: var(--glass-bg); backdrop-filter: blur(50px) saturate(200%); border: 0.5px solid var(--glass-border); border-radius: 12px; padding: 5px 0; z-index: 3001; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4); opacity: 0; transform: scale(0.85); pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
.action-sheet.show { opacity: 1; transform: scale(1); pointer-events: all; }
.as-title { padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--secondary-text); text-transform: uppercase; letter-spacing: 0.04em; }
.as-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-color); text-align: start; }
.as-btn:hover { background: rgba(255, 255, 255, 0.06); }
.as-icon { font-size: 16px; width: 22px; text-align: center; }
.as-blue { color: var(--accent-blue) !important; }
.as-green { color: var(--accent-green) !important; }
.as-gold { color: var(--accent-gold) !important; }
.as-danger { color: var(--accent-red) !important; }

/* --- TOAST --- */
#toast { visibility: hidden; min-width: 280px; background: var(--glass-bg); color: var(--text-color); text-align: center; border-radius: 14px; padding: 14px 20px; position: fixed; z-index: 10000; left: 50%; bottom: 30px; transform: translateX(-50%); font-weight: 600; font-size: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); border: 0.5px solid var(--glass-border); backdrop-filter: blur(40px); }
#toast.show { visibility: visible; animation: toastIn 0.4s ease, toastOut 0.4s 4.6s ease; }
@keyframes toastIn { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
@keyframes toastOut { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }

/* --- COMMON BUTTONS --- */
.btn-green-full { background: var(--accent-green); color: #000; width: 100%; font-weight: 700; border-radius: 12px; padding: 14px; }
.btn-blue-full { background: var(--accent-blue); color: #fff; width: 100%; font-weight: 700; border-radius: 12px; padding: 14px; }
.btn-gold-full { background: var(--accent-gold); color: #000; width: 100%; font-weight: 700; border-radius: 12px; padding: 14px; }
.btn-red-full { background: var(--accent-red); color: #fff; width: 100%; font-weight: 700; border-radius: 12px; padding: 14px; }
.btn-gray { background: var(--input-bg); color: var(--text-color); border-radius: 12px; padding: 14px; font-weight: 700; border: 0.5px solid var(--input-border); }
.btn-green-sm { padding: 10px 16px; border-radius: 10px; background: var(--accent-green); color: #000; font-size: 13px; font-weight: 700; }
.btn-close-sm { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: var(--text-color); font-size: 15px; }
.btn-karat-edit { background: rgba(255, 159, 10, 0.12); border: 0.5px solid var(--accent-gold); color: var(--accent-gold); border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.btn-type { flex: 1; margin: 0; background: var(--accent-green); color: #fff; border-radius: 10px; padding: 10px; font-weight: 700; }
.btn-type-red { flex: 1; margin: 0; background: var(--accent-red); color: #fff; border-radius: 10px; padding: 10px; font-weight: 700; }

/* --- SETTLE MODAL --- */
.settle-client-name { font-size: 13px; color: var(--secondary-text); text-align: center; margin-bottom: 14px; }
.settle-bal-header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.st-bal-box { background: rgba(0, 0, 0, 0.2); border: 0.5px solid var(--glass-border); border-radius: 10px; padding: 8px 6px; text-align: center; }
.st-bal-lbl { font-size: 10px; font-weight: 700; color: var(--secondary-text); text-transform: uppercase; }
.st-bal-val { font-size: 14px; font-weight: 800; margin-top: 3px; direction: ltr; }
.st-bal-val.owes { color: var(--accent-green); }
.st-bal-val.weowe { color: var(--accent-red); }
.st-bal-status { font-size: 9px; margin-top: 2px; opacity: 0.75; font-weight: 600; }
.st-bal-status.owes { color: var(--accent-green); }
.st-bal-status.weowe { color: var(--accent-red); }
.settle-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.settle-input-row { display: flex; align-items: center; gap: 8px; }
.settle-dir { display: flex; align-items: center; gap: 4px; flex-shrink: 0; min-width: 80px; }
.st-arrow-btn { width: 36px; height: 36px; border-radius: 10px; border: 0.5px solid rgba(48, 209, 88, 0.4); background: rgba(48, 209, 88, 0.12); color: var(--accent-green); font-size: 18px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.st-arrow-btn.given { border-color: rgba(255, 69, 58, 0.4); background: rgba(255, 69, 58, 0.12); color: var(--accent-red); }
.st-dir-label { font-size: 11px; font-weight: 700; }
.st-fill-btn { background: rgba(255, 176, 32, 0.12); color: var(--accent-gold); border: 0.5px solid rgba(255, 176, 32, 0.35); border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.settle-preview { background: rgba(255, 176, 32, 0.06); border: 0.5px solid rgba(255, 176, 32, 0.25); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12px; }
.settle-preview-title { font-weight: 700; color: var(--accent-gold); margin-bottom: 5px; }

/* Receipt Preview */
.receipt-preview { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--glass-border); border-radius: 10px; padding: 14px; font-family: inherit; font-size: 13px; white-space: pre-wrap; word-break: break-word; color: var(--text-color); line-height: 1.7; margin: 0 0 14px; max-height: 50vh; overflow-y: auto; }

/* Share-sheet options — appears after the preview inside the receipt modal */
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
@media (max-width: 520px) { .share-grid { grid-template-columns: repeat(2, 1fr); } }
.share-opt {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 8px;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.share-opt:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.share-opt .share-icon { font-size: 24px; }
.share-opt.share-system { background: rgba(255, 204, 0, 0.12); border-color: rgba(255, 204, 0, 0.45); color: var(--accent-gold); }
.share-opt.share-system:hover { background: rgba(255, 204, 0, 0.22); }
.share-opt.share-wa     { background: rgba(37, 211, 102, 0.12); border-color: rgba(37, 211, 102, 0.45); color: #25d366; }
.share-opt.share-wa:hover     { background: rgba(37, 211, 102, 0.22); }
.share-opt.share-email  { background: rgba(10, 132, 255, 0.12); border-color: rgba(10, 132, 255, 0.45); color: var(--accent-blue); }
.share-opt.share-email:hover  { background: rgba(10, 132, 255, 0.22); }
.share-opt.share-copy   { background: rgba(175, 82, 222, 0.10); border-color: rgba(175, 82, 222, 0.4);  color: #bf5af2; }
.share-opt.share-copy:hover   { background: rgba(175, 82, 222, 0.2); }
.share-opt[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Statement Modal */
.stmt-select-all { display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--table-border); font-weight: 700; color: var(--accent-gold); }
.stmt-list { max-height: 250px; overflow-y: auto; text-align: start; margin-bottom: 16px; background: rgba(0, 0, 0, 0.15); border-radius: 8px; border: 1px solid var(--table-border); }

/* Code Display */
.code-display { font-family: monospace; font-size: 32px; font-weight: 900; color: var(--accent-gold); letter-spacing: 0.2em; text-align: center; background: rgba(255, 159, 10, 0.06); border: 1px solid rgba(255, 159, 10, 0.2); border-radius: 14px; padding: 18px; margin: 14px 0; }

/* Chart Container */
.chart-container { flex-grow: 1; width: 100%; border-radius: 8px; overflow: hidden; background: #000; }

/* First Launch */
.first-launch { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(32px); flex-direction: column; align-items: center; justify-content: center; padding: 28px; }
.fl-title { font-size: 36px; font-weight: 900; background: linear-gradient(135deg, #ffd60a, #ff9f0a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 10px; }
.fl-choice-btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); cursor: pointer; text-align: start; color: var(--text-color); margin-bottom: 10px; transition: all 0.15s; }
.fl-choice-btn:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.fl-choice-btn strong { display: block; font-size: 15px; margin-bottom: 3px; }
.fl-choice-btn small { font-size: 12px; color: var(--secondary-text); }
.fl-gold strong { color: var(--accent-gold); }
.fl-blue strong { color: var(--accent-blue); }
.btn-back-fl { background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0 0 16px; }

/* --- COLOR CLASSES --- */
.green { color: var(--accent-green); font-weight: 700; }
.red { color: var(--accent-red); font-weight: 700; }
.gold { color: var(--accent-gold); font-weight: 700; }
.blue { color: var(--accent-blue); font-weight: 700; }
.name-cell { font-size: 14px; font-weight: 700; color: var(--accent-gold); }
.cp-date { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.cp-time { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--secondary-text); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.eod-tx-time { display: inline-block; margin-top: 4px; direction: ltr; unicode-bidi: isolate; }
.today { background: var(--highlight-bg); }
.flip-rtl {}
html[dir="rtl"] .flip-rtl { display: inline-block; transform: scaleX(-1); }

/* --- RTL OVERRIDES --- */
html[dir="rtl"] #sidebar { border-right: none; border-left: 0.5px solid var(--sidebar-border); }
html[dir="rtl"] .sb-nav-item { border-left: none; border-right: 3px solid transparent; }
html[dir="rtl"] .sb-nav-item.active { border-left-color: transparent; border-right-color: var(--accent-gold); }

/* Business-type radio highlight (sign-up) */
.biz-opt input[type="radio"]:checked ~ * { /* helper for visual state */ }
.biz-opt:has(input:checked) { box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.4); }

/* Wage-type segmented buttons (Scrap / New) — jeweler trade form */
.wage-type-btn {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.wage-type-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-color); }
.wage-type-btn.active {
    background: rgba(10, 132, 255, 0.16);
    color: var(--accent-blue, #5ac8fa);
    border-color: rgba(10, 132, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.18);
}

/* ═══ NEWS TICKER (admin broadcasts) ═══ */
/* News popup — bottom-right notification card. Uses the same glass + gold-accent
   palette as the rest of the app, so it inherits whichever theme is active (dark /
   light / etc.) instead of the previous fixed red gradient.
   On phones we lift it above the iOS bottom-nav with safe-area + nav offset. */
#newsTicker {
    position: fixed;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 14px;
    width: min(340px, calc(100vw - 28px));
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--glass-bg);
    color: var(--text-color);
    border: 1px solid var(--glass-border);
    border-inline-start: 3px solid var(--accent-gold);
    backdrop-filter: blur(40px) saturate(180%);
    font-size: 13px;
    font-weight: 600;
    z-index: 9990;
    border-radius: 14px;
    box-shadow: var(--shadow), 0 12px 36px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    user-select: none;
    animation: newsPopupIn 0.28s ease-out;
}
@keyframes newsPopupIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nt-label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 9px;
    background: rgba(255, 176, 32, 0.16);
    color: var(--accent-gold);
    border: 1px solid rgba(255, 176, 32, 0.32);
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 10px;
    text-transform: uppercase;
}
.nt-track {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(50vh - 60px);
    padding-inline-end: 4px;
}
.nt-text {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
    font-weight: 600;
    color: var(--text-color);
}
.nt-close {
    position: absolute;
    top: 6px; inset-inline-end: 6px;
    width: 26px; height: 26px;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--secondary-text);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.nt-close:hover { opacity: 1; background: var(--hover-bg-subtle); color: var(--accent-red); }

/* ═══════════════════════════════════════════════════
   Modern docked sidebar — "cool" visual upgrade
   Pill-style items + gold-gradient active glow + pulsing
   indicator dot + entrance stagger + hover lift.
   Layout (left-docked, full-height) is unchanged.
   On phones (≤820px) mobile.css overrides with the drawer treatment.
   ═══════════════════════════════════════════════════ */

@keyframes sbEntranceIn {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes sbDotPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.55; transform: translateY(-50%) scale(1.45); }
}

@keyframes sbActiveBreathe {
    0%, 100% {
        box-shadow: 0 0 22px rgba(255, 176, 32, 0.18),
                    inset 0 0 0 0.5px rgba(255, 176, 32, 0.25);
    }
    50% {
        box-shadow: 0 0 32px rgba(255, 176, 32, 0.32),
                    inset 0 0 0 0.5px rgba(255, 176, 32, 0.40);
    }
}

#sidebar {
    background:
        radial-gradient(1200px 600px at -10% 0%, rgba(255, 176, 32, 0.04), transparent 60%),
        linear-gradient(180deg, rgba(22, 22, 24, 0.98), rgba(12, 12, 14, 0.98)) !important;
    /* No backdrop blur: the gradient above is 98% opaque, so the blur was invisible — but it made the GPU
       re-filter the whole sidebar whenever anything behind it changed (prices, lists, animations). */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow-y: auto;
}

#sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 176, 32, 0.14) 30%,
        rgba(255, 176, 32, 0.14) 70%,
        transparent);
    pointer-events: none;
}

.sb-nav-item {
    margin: 3px 10px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    border-left: none !important;
    border-right: none !important;
    gap: 12px !important;
    color: rgba(255, 255, 255, 0.78);
    position: relative;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0.28, 1),
                background 0.22s ease,
                color 0.22s ease,
                box-shadow 0.25s ease !important;
    animation: sbEntranceIn 0.45s cubic-bezier(0.32, 0.72, 0.28, 1) backwards;
}

.sb-nav-item:nth-of-type(1)  { animation-delay: 0.04s; }
.sb-nav-item:nth-of-type(2)  { animation-delay: 0.08s; }
.sb-nav-item:nth-of-type(3)  { animation-delay: 0.12s; }
.sb-nav-item:nth-of-type(4)  { animation-delay: 0.16s; }
.sb-nav-item:nth-of-type(5)  { animation-delay: 0.20s; }
.sb-nav-item:nth-of-type(6)  { animation-delay: 0.24s; }
.sb-nav-item:nth-of-type(7)  { animation-delay: 0.28s; }
.sb-nav-item:nth-of-type(8)  { animation-delay: 0.32s; }
.sb-nav-item:nth-of-type(9)  { animation-delay: 0.36s; }
.sb-nav-item:nth-of-type(10) { animation-delay: 0.40s; }
.sb-nav-item:nth-of-type(11) { animation-delay: 0.44s; }
.sb-nav-item:nth-of-type(12) { animation-delay: 0.48s; }

.sb-nav-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.97) !important;
    transform: translateX(3px);
}
html[dir="rtl"] .sb-nav-item:hover {
    transform: translateX(-3px);
}

.sb-nav-item.active {
    background: linear-gradient(135deg,
        rgba(255, 176, 32, 0.22),
        rgba(255, 176, 32, 0.05)) !important;
    color: var(--accent-gold, #FFB020) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    font-weight: 700;
    animation: sbEntranceIn 0.45s cubic-bezier(0.32, 0.72, 0.28, 1) backwards;
    /* The infinite box-shadow "breathe" (sbActiveBreathe) is gone: it repainted the item and the layers around
       it continuously while the app sat idle. Its static replacement is the last rule of this file, where it
       out-ranks the theme rules the way the animation did. */
}

.sb-nav-item.active .sb-nav-icon {
    transform: scale(1.10);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0.28, 1);
    filter: drop-shadow(0 0 6px rgba(255, 176, 32, 0.5));
}

.sb-nav-item.active::after {
    content: "";
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-gold, #FFB020);
    box-shadow: 0 0 12px var(--accent-gold, #FFB020),
                0 0 4px rgba(255, 255, 255, 0.5);
    transform: translateY(-50%);
    animation: sbDotPulse 2s ease-in-out infinite;
}

.sb-nav-item:active {
    transform: scale(0.97);
    opacity: 0.85;
}

.sb-qbtn {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.14s ease, background 0.18s ease, box-shadow 0.2s ease !important;
}
.sb-qbtn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.sb-qbtn:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.16) !important;
}

.sb-nav-divider {
    height: 1px !important;
    background: linear-gradient(to right,
        transparent,
        rgba(255, 176, 32, 0.18),
        transparent) !important;
    margin: 10px 22px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TOP COLLAPSIBLE MENU (tablet + larger)
   On any screen ≥601px (iPad, iPad mini portrait, desktop browsers loading
   the mobile build), replace the left vertical sidebar with a horizontal
   top strip — matches the PC layout exactly. Phones (≤600px) keep the
   bottom-sheet drawer treatment in mobile.css.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {
    #appBody { flex-direction: column; }
    #sidebar {
        width: 100% !important; min-width: 100% !important;
        height: auto !important; min-height: 0 !important;
        flex-direction: row !important; align-items: center;
        border-right: none !important; border-left: none !important;
        border-bottom: 0.5px solid var(--sidebar-border);
        overflow: visible;
        flex-shrink: 0;
        transition: max-height 0.25s ease;
    }
    #sidebar.collapsed { width: 100% !important; min-width: 100% !important; }
    #sidebar.collapsed .sb-balance-footer,
    #sidebar.collapsed .sb-quick-btns { display: none !important; }
    #sidebar.collapsed .sb-nav-label { display: none !important; }
    #sidebar.collapsed .sb-nav-item { padding: 6px 10px !important; gap: 0 !important; }
    #sidebar.collapsed .sb-nav-icon { width: auto !important; height: auto !important; }

    .sb-collapse-btn {
        border-bottom: none !important; border-right: 0.5px solid var(--sidebar-border);
        padding: 8px 14px !important;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .sb-collapse-btn svg { display: block; }
    html[dir="rtl"] .sb-collapse-btn { border-right: none; border-left: 0.5px solid var(--sidebar-border); }

    .sb-quick-btns, .sb-quick-top {
        flex-direction: row !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        flex-shrink: 0;
        border-right: 0.5px solid var(--sidebar-border);
    }
    html[dir="rtl"] .sb-quick-btns, html[dir="rtl"] .sb-quick-top {
        border-right: none; border-left: 0.5px solid var(--sidebar-border);
    }

    .sb-nav {
        flex: 1 1 auto !important;
        display: flex; flex-direction: row;
        overflow-x: auto; overflow-y: hidden;
        padding: 6px 8px !important;
        gap: 4px;
        scrollbar-width: none;
        scroll-behavior: smooth;
        cursor: grab; user-select: none;
    }
    .sb-nav.drag-scrolling { cursor: grabbing; }
    .sb-nav::-webkit-scrollbar { display: none; }
    .sb-nav-item {
        width: auto !important;
        padding: 8px 14px !important;
        border-left: none !important; border-right: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 8px 8px 0 0;
        flex-shrink: 0;
        gap: 8px !important;
    }
    .sb-nav-item.active {
        border-left: none !important; border-right: none !important;
        border-bottom-color: var(--accent-gold) !important;
    }
    .sb-nav-divider {
        height: auto !important; width: 0.5px;
        margin: 6px 4px !important;
        align-self: stretch;
    }
    .sb-nav-icon { width: 24px !important; height: 24px !important; font-size: 16px !important; }
    .sb-nav-label { font-size: 13px; }

    .sb-balance-footer {
        border-top: none !important; border-left: 0.5px solid var(--sidebar-border);
        padding: 6px 10px !important;
        display: flex; flex-direction: row; align-items: center; gap: 6px;
        flex-shrink: 0; max-width: 50%;
        overflow-x: auto;
        cursor: grab; user-select: none;
    }
    .sb-balance-footer.drag-scrolling { cursor: grabbing; }
    html[dir="rtl"] .sb-balance-footer { border-left: none; border-right: 0.5px solid var(--sidebar-border); }
    .sb-balance-footer > div, .sb-balance-footer > .sb-bal-card { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-shrink: 0; }
    .sb-bal-card-title { font-size: 11px; opacity: 0.7; padding: 0 4px; }
    .sb-balance-footer .sb-bal-row {
        margin-bottom: 0 !important;
        padding: 4px 9px !important;
        font-size: 12px;
        flex-shrink: 0;
    }
    .sb-balance-footer .sb-bal-label { font-size: 10px; padding: 0; }
    .sb-balance-footer .sb-bal-val { font-size: 13px; }
    .sb-balance-footer .sb-bal-divider { display: none; }
    .sb-balance-footer .sb-bal-current {
        flex-direction: row !important; gap: 8px !important; padding: 4px 8px !important;
        font-size: 11px;
    }

    #mainContent { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
   RTL FLIP — Client profile data sheet
   ─────────────────────────────────────────────────────────────────
   Mirrors the customer-profile region to right-to-left so Arabic
   users read the trade table naturally (Action column on the right,
   #/Date on the left). The rest of the app stays LTR. */
#customerProfileView {
    direction: rtl;
}
/* Inputs that hold numeric values keep LTR text flow so digits and
   thousand separators don't get reordered (e.g. "1,234,500" stays
   readable rather than becoming "500,234,1"). */
#customerProfileView input[type="number"],
#customerProfileView input[inputmode="decimal"] {
    direction: ltr;
    text-align: right;
}

/* ═════════════════════════════════════════════════════════════════
   REAL-TIME RECEIPT PREVIEW  (iOS only)
   ─────────────────────────────────────────────────────────────────
   • Floating gold FAB at bottom-right of the dashboard view.
   • Tapping the FAB slides up a bottom-sheet panel (~65 vh) with
     a formatted receipt that mirrors the typical gold-shop layout
     the user shared.
   • Receipt re-renders on every keystroke in the trade form, so it
     stays in sync while the user fills the order.
   • Share button generates a PDF via html2pdf and hands it to
     navigator.share (system share sheet).
   • Print button opens the system print dialog. The @media print
     block hides everything else so only the receipt is printed.
   ─────────────────────────────────────────────────────────────── */
.receipt-fab {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-gold) 0%, #c47d00 100%);
    color: #000;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(255, 176, 32, 0.5);
    z-index: 5000;
    transition: transform 0.15s, box-shadow 0.15s;
}
.receipt-fab:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 176, 32, 0.65); }
.receipt-fab:active { transform: scale(0.95); }

/* Bottom-sheet panel that holds the receipt + Share/Print buttons. */
.receipt-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 5001;
    background: rgba(20, 20, 20, 0.985);
    /* no backdrop blur: the panel is opaque enough that it only cost a full-page re-filter while open */
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
    max-height: 80vh;
    height: 65vh;
    overflow-y: auto;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);
    border-top: 1px solid rgba(255, 204, 0, 0.18);
}
.receipt-panel.open { transform: translateY(0); }
.receipt-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 20, 0.92);
    position: sticky; top: 0; z-index: 2;
}
.receipt-panel-actions { display: flex; gap: 8px; }
.receipt-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    font-size: 13px; font-weight: 900;
    cursor: pointer; letter-spacing: 0.3px;
    transition: transform 0.12s, filter 0.12s;
}
.receipt-action-btn.share  { background: linear-gradient(135deg, #30d158 0%, #1f8a3a 100%); color: #fff; box-shadow: 0 2px 8px rgba(48, 209, 88, 0.4); }
.receipt-action-btn.print  { background: linear-gradient(135deg, var(--accent-gold) 0%, #c47d00 100%); color: #000; box-shadow: 0 2px 8px rgba(255, 176, 32, 0.4); }
.receipt-action-btn.close  { background: rgba(255,255,255,0.08); color: #fff; padding: 8px 10px; }
.receipt-action-btn:hover  { transform: translateY(-1px); filter: brightness(1.08); }
.receipt-action-btn:active { transform: scale(0.96); }
/* Extra top padding so the panel's floating action buttons don't overlap the
   receipt's meta lines (the new design has content at the very top). */
.receipt-panel-body { padding: 54px 18px 18px; }

/* ── RECEIPT v2 — cream paper + deep maroon, modeled on the user's jewelry
   invoice template: brand + الفاتورة blocks top-right, invoice meta and
   bill-to on the left, ruled item grid with maroon header, bordered summary
   boxes, terms block + shop info at the bottom, faint diamond watermark. ── */
.receipt-doc {
    background: #EFE7DC;
    color: #3A2A22;
    font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
    padding: 26px 28px 22px;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.rc2-dim { color: #B4A897; }
/* Faint watermark diamond — pinned to the top-left like the template. */
.rc2-watermark {
    position: absolute; top: -30px; left: -60px;
    color: #6E1F1F; opacity: 0.13; pointer-events: none;
}
/* Top zone: brand column (right in RTL) + meta column (left). */
.rc2-top { display: flex; gap: 18px; align-items: flex-start; position: relative; }
.rc2-brand { flex: 0 0 200px; display: flex; flex-direction: column; gap: 10px; }
.rc2-brand-box {
    background: #6E1F1F; color: #EFE7DC; border-radius: 8px;
    padding: 14px 12px 12px; text-align: center;
}
.rc2-brand-dia { display: block; margin: 0 auto 6px; }
.rc2-brand-name { font-size: 17px; font-weight: 900; letter-spacing: 0.5px; }
.rc2-title-box {
    background: #6E1F1F; color: #FFFFFF; border-radius: 8px;
    padding: 10px 16px; text-align: center;
    font-size: 26px; font-weight: 900; letter-spacing: 1px;
}
.rc2-meta { flex: 1; padding-top: 4px; min-width: 0; }
.rc2-meta-line { font-size: 12.5px; color: #6E1F1F; font-weight: 600; margin-bottom: 4px; }
.rc2-meta-line b { color: #3A2A22; font-weight: 800; }
.rc2-billto { font-size: 12.5px; color: #6E1F1F; font-weight: 700; margin: 14px 0 2px; }
.rc2-client { font-size: 21px; font-weight: 900; color: #2A1B14; line-height: 1.25; word-break: break-word; }
.rc2-client-sub { font-size: 11.5px; color: #6B5B4E; margin-top: 3px; }
/* Item grid — maroon header, ruled cream body like the template. */
.rc2-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 12px; border: 1.5px solid #6E1F1F; }
.rc2-table thead th {
    background: #6E1F1F; color: #FFFFFF;
    padding: 11px 8px; text-align: center; font-weight: 800; letter-spacing: 0.4px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    border-left:  1px solid rgba(255, 255, 255, 0.25);
}
.rc2-table tbody td {
    padding: 12px 8px; text-align: center; color: #3A2A22; vertical-align: middle;
    border: 1px solid #6E1F1F; background: transparent;
}
.rc2-table tbody td small { color: #8A5A00; font-weight: 700; letter-spacing: 0.3px; }
.rc2-table tbody td.rc2-desc { text-align: start; font-size: 13.5px; padding: 12px 12px; line-height: 1.5; }
.rc2-table tbody td.rc2-rowtotal { font-weight: 800; }
.rc2-table tbody tr.rc2-fill td { height: 30px; }
.rc2-table tbody td.rc2-empty { text-align: center; color: #A79A88; padding: 26px; font-style: italic; }
/* Summary — label + bordered value box, stacked on the left like the template. */
.rc2-sums { margin-top: 16px; max-width: 300px; margin-inline-start: auto; }
.rc2-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.rc2-sum-lbl { font-size: 13px; font-weight: 800; color: #3A2A22; }
.rc2-sum-box {
    flex: 0 0 140px; min-height: 26px; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #6E1F1F; border-radius: 3px;
    font-size: 12.5px; font-weight: 800; color: #3A2A22; background: rgba(255, 255, 255, 0.35);
    padding: 3px 8px;
}
.rc2-sum-grand .rc2-sum-lbl { font-size: 14.5px; color: #6E1F1F; }
.rc2-sum-grand .rc2-sum-box { border-width: 2.5px; font-size: 14px; color: #6E1F1F; }
.rc2-sum-danger .rc2-sum-lbl, .rc2-sum-danger .rc2-sum-box { color: #A32014; border-color: #A32014; }
/* Bottom zone: shop info (right) + maroon terms block (left). */
.rc2-bottom { display: flex; gap: 16px; align-items: stretch; margin-top: 20px; }
.rc2-shopinfo { flex: 1; padding-top: 4px; }
.rc2-shopinfo-title { font-size: 13px; font-weight: 900; color: #6E1F1F; margin-bottom: 5px; }
.rc2-shopinfo-line { font-size: 12px; color: #3A2A22; font-weight: 600; line-height: 1.7; }
.rc2-terms {
    flex: 0 0 250px; background: #6E1F1F; color: #EFE7DC;
    border-radius: 8px; padding: 10px 14px 12px;
}
.rc2-terms-title { font-size: 12.5px; font-weight: 900; margin-bottom: 5px; color: #FFFFFF; }
.rc2-terms-text { font-size: 10px; line-height: 1.7; opacity: 0.92; }
.rc2-thanks { text-align: center; margin-top: 14px; font-size: 11px; color: #8A7B6B; font-style: italic; }

/* When window.print() fires, hide everything except the receipt-doc. */
@media print {
    body * { visibility: hidden !important; }
    .receipt-panel,
    .receipt-panel * { visibility: visible !important; }
    .receipt-panel {
        position: absolute !important;
        left: 0; top: 0;
        transform: none !important;
        background: #fff !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
    .receipt-panel-header { display: none !important; }
    .receipt-doc {
        box-shadow: none !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   iPad SPLIT ACTIVE-TRADES BOARD (≥768px) — buys | sells side by side,
   with the Today's Buy / Net Gold / Today's Sell headers above each side.
   Built by drawHistory() only at ≥768px. Phones keep the flat list.
   ───────────────────────────────────────────────────────────────── */
.hist-split { display: flex; flex-direction: column; gap: 12px; }
.hist-split-head { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.hsh-card { border-radius: 12px; padding: 10px 6px; text-align: center; border: 0.5px solid var(--glass-border); background: var(--glass-bg); }
.hsh-buy  { border-color: rgba(48,209,88,0.35); background: rgba(48,209,88,0.07); }
.hsh-sell { border-color: rgba(255,69,58,0.35); background: rgba(255,69,58,0.07); }
.hsh-net  { border-color: rgba(255,176,32,0.35); background: rgba(255,176,32,0.07); }
.hsh-lbl  { font-size: 11px; color: var(--secondary-text); font-weight: 800; letter-spacing: 0.2px; }
.hsh-val  { font-size: 22px; font-weight: 900; margin-top: 2px; line-height: 1.05; }
.hsh-val.green { color: var(--accent-green); }
.hsh-val.red   { color: var(--accent-red); }
.hsh-sub  { font-size: 10px; color: var(--secondary-text); margin-top: 3px; }

.hist-split-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.hist-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* Compact the wide trade cards so they fit the narrower split columns. */
.hist-col .trade-card .tc-row { flex-wrap: wrap; row-gap: 4px; }
.hist-col .trade-card .tc-note-cell { max-width: 100%; }

/* The buy/net/sell strip in the trade-form column is relocated above the
   split board on iPad, so hide the original to avoid duplication. */
@media (min-width: 768px) {
    #dashboardView .dash-activity { display: none; }
}

/* ── Profit / EOD page: collapsible MONTH groups (each month holds its day cards),
      with a per-month profit subtotal in the header. Built by renderEOD(). ── */
.eod-month-group { margin-bottom: 16px; }
.eod-month-head {
    display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: pointer; user-select: none;
    background: var(--glass-bg); border: 0.5px solid var(--glass-border); border-radius: 13px; flex-wrap: wrap; row-gap: 2px;
}
.eod-month-head:hover { filter: brightness(1.06); }
.eod-month-chev { font-size: 12px; color: var(--secondary-text); transition: transform 0.2s ease; flex-shrink: 0; }
.eod-month-group.open .eod-month-chev { transform: rotate(90deg); }
.eod-month-name { font-size: 15px; font-weight: 900; color: var(--text-color); }
.eod-month-count { font-size: 11px; font-weight: 700; color: var(--secondary-text); }
.eod-month-total { margin-inline-start: auto; font-size: 13px; font-weight: 800; white-space: nowrap; text-align: end; }
.eod-month-total small { font-size: 9px; color: var(--secondary-text); font-weight: 700; }
.eod-month-body { display: none; padding-top: 10px; }
.eod-month-group.open .eod-month-body { display: block; }

/* ── iOS-style toggle switch (Settings → Auto Day-End, etc.) ── */
.ios-switch { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.ios-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ios-switch-track { position: absolute; inset: 0; background: rgba(120,120,128,0.32); border-radius: 999px; transition: background 0.25s ease; cursor: pointer; }
.ios-switch-knob { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.28); transition: transform 0.25s ease; }
.ios-switch input:checked + .ios-switch-track { background: var(--accent-green); }
.ios-switch input:checked + .ios-switch-track .ios-switch-knob { transform: translateX(20px); }

/* ── Profit / Summary page: Total Net Gold card (clearable running counter) ── */
.net-gold-card {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 16px;
    background: rgba(255,176,32,0.07); border: 0.5px solid rgba(255,176,32,0.35); border-radius: 14px;
}
.net-gold-info { flex: 1; min-width: 0; }
.net-gold-lbl { font-size: 12px; font-weight: 800; color: var(--secondary-text); letter-spacing: 0.2px; }
.net-gold-val { font-size: 26px; font-weight: 900; line-height: 1.1; margin-top: 2px; }
.net-gold-val small { font-size: 11px; color: var(--secondary-text); font-weight: 700; }
.net-gold-clear {
    flex-shrink: 0; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer;
    background: rgba(255,69,58,0.1); color: var(--accent-red); border: 0.5px solid rgba(255,69,58,0.3);
}
.net-gold-clear:hover { background: rgba(255,69,58,0.18); }

/* Sidebar / nav. The base rule paints a near-black gradient with !important,
   which is why a light title bar sat directly above a black nav strip. */

/* Hairlines authored as white-on-dark. */

/* Neon accents -> darkened equivalents that keep the hue but pass 4.5:1. */

/* Karat selector — the neon set measured 1.5-2:1 on the white input field.
   Same hue identity, darkened to be readable. (.active states are left alone:
   they use the neon as a solid FILL behind black text, which works anywhere.) */

/* Custom-karat field at the bottom of the karat column — same visual language as
   .karat-btn so it reads as one control group, but clearly an input. */
.karat-custom {
    flex: 0 0 auto; width: 100%; height: 30px; margin: 0; padding: 0;
    background: var(--input-bg); color: var(--text-color);
    border: 1px dashed var(--input-border); border-radius: 8px;
    font-size: 13px; font-weight: 800; text-align: center;
    box-sizing: border-box; -moz-appearance: textfield;
}
.karat-custom::-webkit-outer-spin-button,
.karat-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.karat-custom::placeholder { color: var(--secondary-text); opacity: 0.65; font-weight: 700; letter-spacing: 1px; }
.karat-custom:focus { border-style: solid; border-color: var(--accent-gold); outline: none; }
/* Active = this custom karat is the one in play (mirrors .karat-btn.active). */
.karat-custom.active {
    background: var(--accent-gold); color: #000; border-style: solid; border-color: var(--accent-gold);
    box-shadow: 0 2px 10px rgba(255, 159, 10, 0.45);
}

/* Settlement gold cell — weight + the karat it was weighed at, side by side.
   The stored settlement is always the 21K-equivalent; this picker only tells
   the app what the typed weight means. */
.st-gold-cell { display: flex; align-items: center; gap: 4px; }
/* USD settlement cell: amount + exchange-rate input side by side (blank rate = settle in USD). */
/* Rate column input (settle row): a rate next to a USD amount converts the debt to IQD. */
.cp-sheet .st-rate-input { min-width: 76px; font-size: 12px; }
.st-rate-tag { display: block; font-size: 10.5px; color: var(--secondary-text); white-space: nowrap; margin-top: 1px; }
.es-iqd-hint { display: block; min-height: 14px; font-size: 12px; color: var(--accent-gold); margin: -2px 0 6px; }

/* ── Live update banner (another device recorded a transaction) ── */
.live-alert { position: fixed; inset-inline-end: 14px; bottom: 24px; width: min(360px, calc(100vw - 28px)); z-index: 4000;
    background: var(--glass-bg, var(--card-bg)); border: 0.5px solid var(--glass-border, var(--table-border)); border-radius: 14px;
    padding: 12px 38px 12px 14px; box-shadow: var(--shadow), 0 12px 36px rgba(0, 0, 0, 0.28); cursor: pointer;
    opacity: 0; transform: translateY(14px); transition: opacity 0.25s ease, transform 0.25s ease; }
html[dir="rtl"] .live-alert { padding: 12px 14px 12px 38px; }
.live-alert.show { opacity: 1; transform: none; }
.live-alert .la-title { font-size: 12px; font-weight: 800; color: var(--accent-gold); letter-spacing: 0.02em; margin-bottom: 4px; overflow-wrap: anywhere; }
.live-alert .la-line { font-size: 13px; color: var(--text-color); margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }
.live-alert .la-close { position: absolute; top: 8px; inset-inline-end: 8px; border: none; background: transparent; color: var(--secondary-text); font-size: 14px; cursor: pointer; padding: 2px 6px; }
.live-alert.la-warn { border-color: var(--accent-red); box-shadow: var(--shadow), 0 12px 36px rgba(255, 69, 58, 0.25); }
.live-alert.la-warn .la-title { color: var(--accent-red); font-size: 13px; }

/* ── Transfer debt dialog + toolbar button ── */
.cp-add-settle-bar { align-items: center; flex-wrap: wrap; }
#transferModal .st-gold-cell input, #transferModal .st-gold-cell select, #transferModal .tf-row input { min-width: 0; margin-bottom: 0; }
.cp-transfer-btn:hover { background: var(--accent-blue, #5ac8fa); border-color: var(--accent-blue, #5ac8fa); color: #000; }

.tf-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.tf-row input { flex: 1 1 auto; margin-bottom: 0; }
.tf-full { flex: 0 0 auto; padding: 8px 10px; border-radius: 8px; border: 0.5px solid var(--input-border); background: var(--input-bg); color: var(--accent-gold); font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
#transferModal .st-gold-cell .tf-full { margin-inline-start: 4px; }
.tf-from, .tf-bal { font-size: 13px; color: var(--secondary-text); margin-bottom: 8px; }
.tf-from b { color: var(--text-color); }
.tf-preview { font-size: 12.5px; color: var(--secondary-text); margin: 4px 0 10px; line-height: 1.6; }
.tf-preview b { color: var(--accent-gold); }
.st-gold-cell .cps-input-flat { flex: 1 1 auto; min-width: 0; }
.st-karat-select {
    flex: 0 0 auto; width: 58px; margin: 0; padding: 4px 2px;
    font-size: 12px; font-weight: 800; text-align: center;
    border-radius: 7px; border: 1px solid var(--input-border);
    background: var(--input-bg); color: var(--accent-gold);
    box-sizing: border-box; cursor: pointer;
}
.st-karat-select:focus { outline: none; border-color: var(--accent-gold); }

/* Trade-edit karat row: dropdown + custom-karat box side by side. */
.edit-karat-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.edit-karat-row select { flex: 1 1 auto; margin-bottom: 0; }
.edit-karat-custom { flex: 0 0 auto; width: 64px; height: 42px; }

/* Custom-karat box beside the settlement karat pickers (row + edit popup). */
.st-karat-custom { flex: 0 0 auto; width: 46px; height: 30px; }

/* Custom-karat key in the karat strip: a "•••" button that swaps itself for the
   input in the SAME cell, so the strip never grows and nothing shifts. */
.karat-more-wrap { display: flex; flex: 1; min-width: 0; align-items: stretch; position: relative; }
.karat-more-wrap > .karat-btn { width: 100%; flex: 1 1 auto; }
/* The input OVERLAYS its key rather than replacing it, so opening it can never
   resize the karat strip. The key stays visible underneath and shows the karat. */
.karat-more-wrap > .karat-custom {
    position: absolute; z-index: 60; top: 50%; inset-inline-end: 0;
    transform: translateY(-50%); width: 72px; height: 34px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.karat-more { color: var(--secondary-text); letter-spacing: 1px; line-height: 1; }
.karat-more:hover { color: var(--accent-gold); background: var(--hover-bg-subtle); }
.karat-custom.opening { animation: karatSlideIn 0.18s ease-out both; }
@keyframes karatSlideIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }

/* Settlement karat: the custom purity box opens OVER the dropdown (chosen via the
   "✎" option inside it), so there's no separate always-visible field. */
.st-karat-wrap { position: relative; flex: 0 0 auto; display: flex; }
.st-karat-wrap > .st-karat-select { width: 58px; }
.st-karat-wrap > .st-karat-custom {
    position: absolute; inset: 0; z-index: 60; width: 100%; height: 100%; margin: 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.cp-sheet .cp-note-text { font-size: 17px; font-weight: 600; color: #FFFFFF; }

/* Client-sheet amount cells — the money/gold figures own the box: large, heavy,
   with the small arrow kept proportional. */
.cp-sheet .cell-pos, .cp-sheet .cell-neg { font-size: 20px; letter-spacing: 0.2px; }
.cp-sheet .cell-zero { font-size: 18px; }

/* "?" support key at the end of the top spot bar + its popup.
   Absolutely positioned so it never pushes the centered spot prices sideways. */
#spotBar { position: relative; }
.support-btn {
    position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    padding: 0; min-width: 0; min-height: 0; /* beat the global 40px touch-target button rule */
    border-radius: 50%; border: 1.5px solid var(--accent-gold);
    background: transparent; color: var(--accent-gold);
    font-size: 12px; font-weight: 900; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.support-btn:hover { background: var(--accent-gold); color: #000; }
/* Quick-key clusters flanking the spot bar. The cluster carries the absolute position; the keys
   inside are static so they line up in a row and share the "?" circle style. */
.tb-keys { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; z-index: 2; }
.tb-keys-right { right: 10px; }
.tb-keys-left { left: 10px; }
.tb-keys .support-btn { position: static; transform: none; width: 27px; height: 27px; font-size: 14px; }
.tb-key { font-size: 15px; }
.tb-key-lang { font-size: 11px; letter-spacing: -0.02em; }
.tb-key.spinning { animation: tbSpin 0.7s linear infinite; pointer-events: none; opacity: 0.7; }
@keyframes tbSpin { to { transform: rotate(360deg); } }
.support-phone {
    font-size: 24px; font-weight: 900; letter-spacing: 1px; color: var(--accent-gold);
    margin: 6px 0 14px; -webkit-user-select: text; user-select: text;
}

/* Card / input outlines: 1.5px maroon, like the statement's boxes. */

/* Sidebar / nav */

/* Accents that were neon / blue → maroon family */

/* Nav band chrome */

/* Client names — maroon everywhere they appear */

/* Secondary controls and titles */

/* Card / input outlines: 1.5px maroon, like the statement's boxes. */

/* Sidebar / nav */

/* Accents that were neon / blue → maroon family */

/* Nav band chrome */

/* Client names — maroon everywhere they appear */

/* Secondary controls and titles */

/* ── Outline icons (replace the colored emoji). 1em so they follow the text size;
   stroke inherits the text color, so gold buttons get gold icons, etc. ── */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor;
       stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; overflow: visible; }

/* ── Quick login: lock screen + Settings rows + profile picture ── */
.ql-screen { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(60% 50% at 50% 0%, rgba(255,176,32,0.10), transparent 60%), var(--bg-color); }
.ql-card { width: min(92vw, 380px); text-align: center; padding: 28px 22px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.ql-avatar-box { display: flex; justify-content: center; margin-bottom: 12px; }
.ql-avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-gold); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.ql-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--highlight-bg); color: var(--accent-gold); font-weight: 900; }
.ql-name { font-size: 20px; font-weight: 900; color: var(--text-color); }
.ql-sub { font-size: 12.5px; color: var(--secondary-text); margin: 4px 0 14px; }
.ql-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; direction: ltr; }
.ql-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--accent-gold); background: transparent; transition: background .12s, transform .12s; }
.ql-dots i.on { background: var(--accent-gold); transform: scale(1.1); }
.ql-err { min-height: 18px; font-size: 12.5px; color: var(--accent-red); margin-bottom: 8px; }
.ql-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; justify-content: center; direction: ltr; }
.ql-pad button { height: 60px; min-height: 60px; border-radius: 16px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-color); font-size: 22px; font-weight: 800; cursor: pointer; transition: background .12s, transform .08s; }
.ql-pad button:active { transform: scale(0.96); background: var(--highlight-bg); }
.ql-pad .ql-del { font-size: 18px; }
.ql-pad .ql-bio { color: var(--accent-gold); }
.ql-pad .ql-bio .ico { width: 26px; height: 26px; }
.ql-pad.shake { animation: qlShake .4s; }
@keyframes qlShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.ql-other { margin-top: 16px; background: none; border: none; color: var(--secondary-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }
.ql-rows { display: grid; gap: 8px; }
.ql-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--hover-bg-subtle); border: 1px solid var(--glass-border); font-size: 13.5px; color: var(--text-color); cursor: pointer; }
.ql-switch { width: 22px; height: 22px; accent-color: var(--accent-gold); flex: 0 0 auto; margin: 0; }
.link-btn-gold { background: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.35); color: var(--accent-gold); border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ql-pin-input { width: 100%; text-align: center; font-size: 26px; letter-spacing: 12px; padding: 12px; border-radius: 12px; direction: ltr; }
.pp-row { display: flex; align-items: center; gap: 16px; }
.pp-btns { display: flex; flex-direction: column; gap: 8px; }
#_confirmOverlay { z-index: 100011 !important; }   /* sign-out confirm must be reachable from the lock screen */

/* ── Remembered-account card on the sign-in screen (dark welcome backdrop) ── */
.fl-quick-card { margin: 0 auto 18px; padding: 18px 16px 12px; border-radius: 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,176,32,0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.35); max-width: 360px; }
.fl-quick-avatar { display: flex; justify-content: center; margin-bottom: 8px; }
.fl-quick-name { font-size: 19px; font-weight: 900; color: #fff; }
.fl-quick-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin: 2px 0 12px; }
.fl-quick-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fl-quick-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; background: linear-gradient(135deg, #FFE066, #FFA600); color: #1A0F00; border: none; font-size: 14px; font-weight: 900; cursor: pointer; min-height: 44px; }
.fl-quick-btn .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.fl-quick-links { display: flex; justify-content: center; gap: 18px; margin-top: 4px; }
.fl-quick-links .ql-other { margin-top: 6px; color: rgba(255,255,255,0.55); }

.fl-quick-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 560px; margin: 0 auto 18px; }
.fl-quick-cards .fl-quick-card { padding: 16px 10px 10px; }
.fl-quick-cards .fl-quick-btns { flex-direction: column; gap: 6px; }
.fl-quick-cards .fl-quick-btn { width: 100%; padding: 9px 10px; font-size: 13px; min-height: 40px; }
.fl-quick-cards .fl-quick-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-quick-cards .fl-quick-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }
.fl-quick-card { position: relative; }
.fl-quick-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer; }
.fl-quick-x:hover { background: rgba(255,82,71,0.25); color: #fff; }
.fl-quick-msg { font-size: 12.5px; min-height: 16px; margin-top: 6px; }

html #firstLaunchModal { background: #E6DCC8; }
html #firstLaunchModal .fl-bg::before { background: radial-gradient(circle, rgba(90,112,48,0.35) 0%, transparent 70%); }
html #firstLaunchModal .fl-bg::after { background: radial-gradient(circle, rgba(138,90,0,0.22) 0%, transparent 70%); }
html #firstLaunchModal .fl-dot { background: rgba(78,97,40,0.35); }
html #firstLaunchModal .fl-wc-btn { color: rgba(46,43,31,0.6); }
html #firstLaunchModal .fl-wc-btn:hover { background: rgba(78,97,40,0.10); color: #2E2B1F; }
html #firstLaunchModal .fl-hero-icon { filter: drop-shadow(0 0 30px rgba(78,97,40,0.35)); }
html #firstLaunchModal .fl-hero-title { background: linear-gradient(135deg, #5A7030 0%, #3F4F1F 60%, #8A5A00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html #firstLaunchModal .fl-hero-sub, html #firstLaunchModal .fl-section-sub, html #firstLaunchModal .fl-feat-desc, html #firstLaunchModal .fl-wf-desc, html #firstLaunchModal .fl-auth-desc { color: #66614F; }
html #firstLaunchModal .fl-section-title, html #firstLaunchModal .fl-feat-title, html #firstLaunchModal .fl-wf-title { color: #2E2B1F; }
html #firstLaunchModal .fl-feat, html #firstLaunchModal .fl-wf-step, html #firstLaunchModal .fl-auth-btn { background: rgba(255,255,255,0.5); border-color: rgba(78,97,40,0.32); color: #2E2B1F; }
html #firstLaunchModal .fl-feat:hover, html #firstLaunchModal .fl-auth-btn:hover { background: rgba(255,255,255,0.75); border-color: rgba(78,97,40,0.6); }
html #firstLaunchModal .fl-wf-num { background: linear-gradient(135deg, rgba(78,97,40,0.18), rgba(78,97,40,0.06)); color: #4E6128; border-color: rgba(78,97,40,0.35); }
html #firstLaunchModal .fl-dot-nav { background: rgba(78,97,40,0.25); }
html #firstLaunchModal .fl-dot-nav.active { background: #4E6128; box-shadow: 0 0 10px rgba(78,97,40,0.4); }
html #firstLaunchModal .fl-btn-next, html #firstLaunchModal .fl-btn-start { background: linear-gradient(135deg, #6A8438 0%, #5A7030 45%, #3F4F1F 100%); color: #F4EEE2; box-shadow: 0 6px 22px rgba(63,79,31,0.35); }
html #firstLaunchModal .fl-btn-prev { background: rgba(255,255,255,0.5); color: #4E6128; border-color: rgba(78,97,40,0.35); }
html #firstLaunchModal input[type="text"], html #firstLaunchModal input[type="password"], html #firstLaunchModal input[type="email"], html #firstLaunchModal input[type="tel"] { background: #F8F3E9; border-color: rgba(78,97,40,0.45); color: #2E2B1F; }
html #firstLaunchModal input:focus { border-color: #4E6128; box-shadow: 0 0 0 3px rgba(78,97,40,0.15); }
html #firstLaunchModal input::placeholder { color: rgba(46,43,31,0.45); }
html #flLangBtn { background: rgba(255,255,255,0.55) !important; border-color: rgba(78,97,40,0.35) !important; color: #4E6128 !important; }
html #firstLaunchModal .btn-back-fl { color: #4E6128; }
html #firstLaunchModal .fl-section-badge { background: rgba(78,97,40,0.12) !important; color: #4E6128 !important; border: 1px solid rgba(78,97,40,0.3); }
/* inline dark-text styles inside the markup */
html #firstLaunchModal [style*="color:#fff"] { color: #2E2B1F !important; }
html #firstLaunchModal [style*="color:rgba(255,255,255"] { color: #66614F !important; }
html #firstLaunchModal [style*="background:rgba(0,0,0,0.4)"] { background: rgba(255,255,255,0.55) !important; }
html #firstLaunchModal [style*="background:rgba(255,255,255,0.08)"] { background: rgba(255,255,255,0.5) !important; }
html #firstLaunchModal [style*="border:1px solid rgba(255,255,255,0.15)"] { border-color: rgba(78,97,40,0.35) !important; }
/* remembered-account cards on beige */
html .fl-quick-card { background: rgba(255,255,255,0.55); border-color: rgba(78,97,40,0.35); box-shadow: 0 8px 22px rgba(46,43,31,0.12); }
html .fl-quick-name { color: #2E2B1F; }
html .fl-quick-sub { color: #66614F; }
html .fl-quick-btn { background: linear-gradient(135deg, #6A8438, #3F4F1F); color: #F4EEE2; }
html .fl-quick-links .ql-other, html .fl-quick-x { color: #66614F; }
html .fl-quick-x { border-color: rgba(78,97,40,0.3); background: rgba(255,255,255,0.5); }

/* Card / input outlines: 1.5px maroon, like the statement's boxes. */

/* Sidebar / nav */

/* Accents that were neon / blue → maroon family */

/* Nav band chrome */

/* Client names — maroon everywhere they appear */

/* Secondary controls and titles */

/* ── Launch splash ── */
.app-splash { position: fixed; inset: 0; z-index: 200000; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 50% at 50% 30%, rgba(90,112,48,0.22), transparent 70%), var(--bg-color, #E6DCC8); transition: opacity .5s ease, visibility .5s; }
.app-splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash-inner { text-align: center; animation: splashIn .7s cubic-bezier(.2,.8,.2,1) both; }
.app-splash-logo { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 18px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.18); animation: splashFloat 2.6s ease-in-out infinite; }
.app-splash-title { margin-top: 18px; font-size: 27px; font-weight: 900; color: var(--accent-gold, #8A5A00); animation: splashIn .7s .15s cubic-bezier(.2,.8,.2,1) both; }
.app-splash-sub { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--secondary-text, #66614F); margin-top: 2px; animation: splashIn .7s .25s cubic-bezier(.2,.8,.2,1) both; }
.app-splash-bar { width: 140px; height: 4px; border-radius: 2px; background: rgba(127,127,127,0.22); margin: 18px auto 0; overflow: hidden; direction: ltr; }
.app-splash-bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--accent-gold, #8A5A00); animation: splashBar 1.2s ease-in-out infinite; }
@keyframes splashIn { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes splashFloat { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes splashBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(300%); } }

/* Static gold glow for the active sidebar item (replaces the infinite sbActiveBreathe box-shadow animation).
   The animation out-ranked every theme rule as an animation-origin declaration; this rule out-ranks them by
   specificity instead, so each theme looks as it did — minus the continuous repaint. */
html[data-theme] #sidebar .sb-nav-item.active,
html:not([data-theme]) #sidebar .sb-nav-item.active {
    box-shadow: 0 0 26px rgba(255, 176, 32, 0.24),
                inset 0 0 0 0.5px rgba(255, 176, 32, 0.32);
}

/* ── F1 new-trade-for-client ── */
.tc-new-btn { flex: 0 0 auto; width: 26px; height: 26px; min-height: 26px; border-radius: 50%; border: 1px solid rgba(255, 176, 32, 0.45);
    background: rgba(255, 176, 32, 0.12); color: var(--accent-gold, #FFB020); font-size: 15px; font-weight: 700; line-height: 22px;
    padding: 0; cursor: pointer; margin-inline-start: 2px; }
.tc-new-btn:hover { background: rgba(255, 176, 32, 0.28); }
.cp-new-trade-btn { font-size: 15px; }
/* ── F1 new-trade-for-client ── */

/* ── F2 sync-safety-indicator ── */
.sync-pill { position: fixed; inset-inline-end: 14px; bottom: 16px; z-index: 900; height: 26px; min-height: 26px; padding: 0 10px; border-radius: 13px;
    font-size: 12px; font-weight: 700; line-height: 24px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; direction: ltr;
    font-family: inherit; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.sync-pill.warn { background: rgba(255, 176, 32, 0.92); border-color: rgba(255, 176, 32, 0.9); color: #1a1200; }
.sync-pill.off  { background: rgba(255, 69, 58, 0.92);  border-color: rgba(255, 69, 58, 0.9);  color: #fff; }
.sync-pill.ok   { background: rgba(48, 209, 88, 0.92);  border-color: rgba(48, 209, 88, 0.9);  color: #04200c; }
@media (max-width: 600px) { .sync-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); inset-inline-end: 12px; } }
.offline-banner { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 69, 58, 0.14); border: 1px solid rgba(255, 69, 58, 0.4);
    color: var(--accent-red, #FF453A); font-size: 13px; font-weight: 600; text-align: center; }
/* ── F2 sync-safety-indicator ── */

/* ── F3 honest-debt-aging ── */
.debt-extras { margin-top: 10px; border-top: 0.5px solid var(--glass-border); padding-top: 8px; }
.dbt-equiv { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; font-size: 12px; font-weight: 800; padding: 4px 2px; }
.dbt-equiv .green, .dbt-equiv .red, .dbt-equiv .debt-net { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.dbt-equiv-lbl { color: var(--secondary-text); font-weight: 700; }
.dbt-basis { font-size: 10.5px; color: var(--secondary-text); opacity: 0.85; padding: 0 2px 6px; }
.dbt-title { font-size: 11.5px; font-weight: 800; color: var(--accent-gold, #FFB020); margin: 4px 2px; }
.dbt-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.04); margin-bottom: 4px; cursor: pointer; font-size: 12px; }
.dbt-row:hover { background: rgba(255, 176, 32, 0.10); }
.dbt-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbt-parts { color: var(--secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; unicode-bidi: isolate; text-align: end; }
.dbt-total { font-weight: 800; color: var(--accent-green); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
/* ── F3 honest-debt-aging ── */

/* ── F4 statement-shortcuts ── */
.stmt-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.stmt-preset { padding: 6px 10px; min-height: 30px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.05);
    color: var(--text-color); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.stmt-preset.active { background: rgba(255, 176, 32, 0.18); border-color: rgba(255, 176, 32, 0.6); color: var(--accent-gold, #FFB020); }
.stmt-count { font-size: 11px; color: var(--secondary-text); margin: 0 2px 6px; }
/* ── F4 statement-shortcuts ── */

/* ── F5 month-dashboard ── */
.md-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.md-nav { display: flex; gap: 6px; align-items: center; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 12px; }
.md-card { background: var(--card-bg); border: 0.5px solid var(--glass-border); border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); }
.md-card-title { font-size: 11.5px; color: var(--secondary-text); font-weight: 800; margin-bottom: 6px; }
.md-big { font-size: 22px; font-weight: 900; direction: ltr; unicode-bidi: isolate; text-align: end; }
.md-big small { font-size: 11px; font-weight: 700; opacity: 0.7; }
.md-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; border-bottom: 0.5px dashed rgba(128, 128, 128, 0.18); }
.md-line:last-child { border-bottom: none; }
.md-line b { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.md-pos { color: var(--accent-green); } .md-neg { color: var(--accent-red); }
.md-sub { font-size: 10.5px; color: var(--secondary-text); margin-top: 4px; }
.md-chart-card { margin-bottom: 12px; }
#mdChart svg { width: 100%; height: auto; display: block; color: var(--text-color); }
.md-capital summary { cursor: pointer; font-weight: 800; color: var(--accent-gold, #FFB020); padding: 8px 2px; }
.md-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.md-cap-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.md-cap-table td { padding: 5px 6px; border-bottom: 0.5px solid var(--glass-border); vertical-align: top; }
.md-cap-total { font-weight: 800; text-align: end; padding: 6px 2px 0; direction: ltr; }
@media (max-width: 600px) { .md-big { font-size: 19px; } }
/* ── F5 month-dashboard ── */

/* ── F6 printable-reports ── */
.rpt-card { margin-bottom: 12px; }
.rpt-range { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.rpt-range label { display: flex; align-items: center; gap: 6px; }
.rpt-range input[type="date"] { margin: 0; padding: 6px 8px; font-size: 12px; width: auto; min-height: 30px; }
.rpt-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.report-overlay { position: fixed; inset: 0; z-index: 6000; background: #f4f4f4; color: #111; overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 40px); }
.report-overlay.show { display: block; }
.rpt-toolbar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; background: #fff; border-bottom: 1px solid #ddd; }
.rpt-toolbar .stmt-preset { color: #111; background: #f0f0f0; border-color: #ccc; }
.rpt-toolbar .stmt-preset.active { background: #ffe9b8; border-color: #e0a800; color: #5a3a00; }
.rpt-body { max-width: 1100px; margin: 14px auto; background: #fff; padding: 18px 22px; border: 1px solid #ddd; border-radius: 8px; font-size: 12px; }
.rpt-shop { font-size: 20px; font-weight: 800; text-align: center; }
.rpt-shop-sub, .rpt-gen { text-align: center; color: #555; font-size: 11px; }
.rpt-title { text-align: center; font-size: 15px; font-weight: 700; margin: 6px 0 10px; }
.rpt-summary { margin: 0 auto 12px; border-collapse: collapse; }
.rpt-summary th, .rpt-summary td { border: 1px solid #ccc; padding: 4px 10px; text-align: start; }
.rpt-summary td { direction: ltr; unicode-bidi: isolate; text-align: end; }
.rpt-table-title { font-weight: 800; margin: 12px 0 4px; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rpt-table th, .rpt-table td { border: 1px solid #bbb; padding: 3px 5px; text-align: center; }
.rpt-table th { background: #eee; }
.rpt-empty { color: #777; padding: 6px 0; }
@media print {
    body.rpt-printing * { visibility: hidden !important; }
    body.rpt-printing .receipt-panel { display: none !important; }
    body.rpt-printing #reportOverlay, body.rpt-printing #reportOverlay * { visibility: visible !important; }
    body.rpt-printing #reportOverlay { position: absolute !important; inset: auto !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; overflow: visible !important; background: #fff !important; padding: 0 !important; }
    body.rpt-printing .rpt-toolbar { display: none !important; }
    body.rpt-printing .rpt-body { border: none !important; max-width: none !important; margin: 0 !important; padding: 6mm !important; }
}
/* ── F6 printable-reports ── */

/* ── F7 search-everywhere ── */
.eod-search-wrap { margin: 0 0 10px; }
.eod-search-wrap input { width: 100%; box-sizing: border-box; margin: 0; font-size: 13px; padding: 9px 12px; }
.eod-search-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.eod-hit { background: var(--card-bg); border: 0.5px solid var(--glass-border); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.eod-hit:hover { border-color: var(--accent-gold, #FFB020); }
.eod-hit-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--secondary-text); direction: ltr; }
.eod-hit-main { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 3px; font-size: 13px; }
.eod-hit-name { font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eod-hit-type { font-weight: 700; font-size: 12px; }
.eod-hit-amt { font-weight: 700; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.eod-hit-note { font-size: 11.5px; color: var(--secondary-text); margin-top: 2px; }
.dup-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.dup-group { border: 0.5px solid var(--glass-border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.dup-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.dup-row input { margin: 0; width: 16px; height: 16px; }
.dup-name { font-weight: 700; flex: 1; }
.dup-count { font-size: 11px; color: var(--secondary-text); }
.dup-merge-btn { align-self: flex-end; margin-top: 4px; }
@media (max-width: 600px) { .client-toolbar .client-search-inline { flex: 1 1 110px !important; } }
/* ── F7 search-everywhere ── */

/* ── f12 month dashboard layout ── */
#mdCards.md-grid { display: block; }
.md-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.md-kpi { background: var(--card-bg); border: 0.5px solid var(--glass-border); border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); min-width: 0; }
.md-kpi .md-big { font-size: 20px; }
.md-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
#mdCards > .md-card { margin-bottom: 12px; }
@media (max-width: 900px) { .md-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .md-activity { grid-template-columns: 1fr; } }
/* ── f12 month dashboard layout ── */

/* ── f13 spot cache ── */
.spot-cached-tag { font-size: 10px; font-weight: 700; color: #FF9F0A; background: rgba(255, 159, 10, 0.14); border: 1px solid rgba(255, 159, 10, 0.4); border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; white-space: nowrap; }
/* ── f13 spot cache ── */

/* ── f14 keypad zero under 8 ── */
.ql-pad .ql-bio { grid-column: 1; }
.ql-pad .ql-zero { grid-column: 2; }
.ql-pad .ql-del { grid-column: 3; }
/* ── f14 keypad zero under 8 ── */

/* ==== f18 capital-page ==== */
#capitalView .md-head { margin-bottom: 12px; }
#capitalView .cap-card { margin-bottom: 12px; }
.cap-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 10px; }
.cap-edit-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--secondary-text); }
.cap-edit-grid input { width: 100%; box-sizing: border-box; direction: ltr; margin-bottom: 0; }
.cap-edit .cap-save { margin: 0 0 8px; }
.cap-card .md-line.md-sub { padding-top: 2px; padding-bottom: 2px; }
.cap-diff { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cap-diff .md-big { direction: ltr; unicode-bidi: isolate; }
.cap-state { font-size: 12.5px; font-weight: 800; }
.cap-above .md-big, .cap-above .cap-state { color: var(--accent-green); }
.cap-below .md-big, .cap-below .cap-state { color: var(--accent-red); }
.cap-even .cap-state { color: var(--secondary-text); }
.cap-match { margin-top: 6px; font-size: 13px; font-weight: 800; padding: 8px 10px; border-radius: 10px; background: var(--highlight-bg); border: 1px solid var(--glass-border); }
.cap-match:empty { display: none; }
.cap-extra { unicode-bidi: plaintext; }
#capBasis { padding: 2px 4px 10px; }
@media (max-width: 520px) { .cap-edit-grid { grid-template-columns: 1fr; } }
/* ==== f18 capital-page ==== */

/* ==== f19 app-review ==== */
/* welcome-screen price strip — the overlay is always the paper colour, whatever theme is saved, so the colours are fixed */
html #firstLaunchModal .fl-price { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
html #firstLaunchModal .fl-price-title { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; color: #4e3a08; text-transform: uppercase; }
html #firstLaunchModal .fl-price-tag { font-size: 10px; font-weight: 700; color: #3a2f16; text-transform: none; }
html #firstLaunchModal .fl-price-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
html #firstLaunchModal .fl-price-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 9px; border-radius: 12px; background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(120, 90, 20, 0.3); min-width: 74px; direction: ltr; }
html #firstLaunchModal .fl-price-cell small { font-size: 9.5px; font-weight: 700; color: #3a2f16; letter-spacing: 0.3px; }
html #firstLaunchModal .fl-price-cell b { font-size: 14px; font-weight: 900; color: #2b2413; white-space: nowrap; }
/* phones and short windows: the strip gets its own band above the slide content instead of floating over the centred block,
   the slides scroll when the auth panel is taller than the window, and the icons / button padding shrink */
@media (max-width: 600px), (max-height: 760px) {
    #firstLaunchModal .fl-slide { align-items: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 150px); padding-bottom: 100px; overflow-y: auto; }
    #firstLaunchModal #flChoicePanel > div:first-child { display: none; }
    #firstLaunchModal .fl-auth-choices { gap: 8px; margin-top: 12px; }
    #firstLaunchModal .fl-auth-btn { padding: 11px 14px; }
    #firstLaunchModal .fl-form-panel > div[style*="font-size:48px"] { font-size: 26px !important; margin-bottom: 4px !important; }
    #firstLaunchModal #flSlMsg { margin: 4px 0 !important; }
}
/* the seller access-code box keeps its big spaced look for the typed code only */
#flSlCode::placeholder { font-size: 14px; letter-spacing: normal; text-transform: none; }
/* demo-mode banner */
.demo-banner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 12px; background: rgba(255, 176, 32, 0.14); border-bottom: 1px solid rgba(255, 176, 32, 0.45); color: var(--accent-gold); font-weight: 800; font-size: 12.5px; }
.demo-banner button { background: var(--accent-gold); color: #1a1200; border: none; border-radius: 999px; padding: 5px 14px; font-weight: 800; font-size: 12px; cursor: pointer; }
/* ==== f19 app-review ==== */

/* ==== f21 capital-by-debts ==== */
.cap-exceeded .md-big, .cap-exceeded .cap-state, .cap-exceeded .cap-verdict { color: var(--accent-red); }
.cap-above .cap-verdict { color: var(--accent-green); }
.cap-even .cap-verdict { color: var(--secondary-text); }
.cap-verdict { font-size: 12.5px; font-weight: 800; margin-top: 4px; }
.cap-banner { padding: 10px 12px; border-radius: 12px; font-weight: 900; font-size: 14px; margin-bottom: 12px; text-align: center; }
.cap-banner-bad { background: rgba(255, 69, 58, 0.14); color: var(--accent-red); border: 1px solid rgba(255, 69, 58, 0.4); }
.cap-banner-ok { background: rgba(48, 209, 88, 0.12); color: var(--accent-green); border: 1px solid rgba(48, 209, 88, 0.35); }
.cap-card .md-line b .green, .cap-card .md-line b .red { direction: ltr; unicode-bidi: isolate; }
/* ==== f21 capital-by-debts ==== */

/* ==== f22 day-sheet ==== */
.eod-sum-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--glass-border); }
.eod-sum-chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--highlight-bg); border: 1px solid var(--glass-border); min-width: 120px; flex: 1; }
.eod-sum-lbl { font-size: 10.5px; font-weight: 700; color: var(--secondary-text); letter-spacing: 0.3px; }
.eod-sum-val { font-size: 15px; font-weight: 900; white-space: nowrap; direction: ltr; unicode-bidi: isolate; text-align: start; }
.eod-sum-val.cell-pos { color: var(--accent-green); } .eod-sum-val.cell-neg { color: var(--accent-red); }
.eod-sheet-wrap { overflow-x: auto; }
.eod-sheet tbody td { font-size: 16px; }
.eod-sheet thead th { font-size: 13px; }
@media (max-width: 600px) { .eod-sum-chip { min-width: 46%; padding: 6px 10px; } .eod-sum-val { font-size: 14px; } }
/* ==== f22 day-sheet ==== */

/* ==== f26 month-dash-3 ==== */
.md-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .md-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .md-kpis { grid-template-columns: 1fr; } }
/* ==== f26 month-dash-3 ==== */

/* ==== f27 capital-reserve ==== */
.cap-short .md-big, .cap-short .cap-state, .cap-short .cap-verdict { color: var(--accent-red); }
.cap-exceeded .md-big, .cap-exceeded .cap-state, .cap-exceeded .cap-verdict { color: var(--accent-gold); }
.cap-even .md-big { color: var(--accent-green); }
.cap-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--secondary-text); cursor: pointer; margin-top: 8px; }
.cap-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-gold); }
/* ==== f27 capital-reserve ==== */

/* ==== f24 pc-debts ==== */
/* PC only (no mobile-shim → no platform-* class on <html>): big debt totals + vivid column separators */
html:not(.platform-web):not(.platform-native) .global-debt-card { --debt-green: var(--accent-green); --debt-red: var(--accent-red); --debt-gold: var(--accent-gold); }

html:not(.platform-web):not(.platform-native) .global-debt-card .debt-grid { overflow-x: auto; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-header { padding: 14px 18px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-header h3 { font-size: 19px; font-weight: 800; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-grid { border-width: 1px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-col-left { background: rgba(48, 209, 88, 0.22); border-bottom: 3px solid var(--debt-green); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-col-right { background: rgba(255, 69, 58, 0.22); border-bottom: 3px solid var(--debt-red); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-col-mid { background: rgba(255, 176, 32, 0.22); border-bottom: 3px solid var(--debt-gold); min-width: 170px; padding: 10px 8px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-col-left h4 { font-size: 15px; font-weight: 800; color: var(--debt-green); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-col-right h4 { font-size: 15px; font-weight: 800; color: var(--debt-red); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-col-mid h4 { font-size: 15px; font-weight: 800; color: var(--debt-gold); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-row { padding: 10px 14px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-row + .debt-row { border-top: 1px solid var(--glass-border); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-row span:first-child, html:not(.platform-web):not(.platform-native) .global-debt-card .debt-row span:last-child { font-size: 28px; font-weight: 800; white-space: nowrap; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-row span:first-child { color: var(--debt-green); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-row span:last-child { color: var(--debt-red); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-mid { min-width: 170px; gap: 2px; border-inline: 2px solid rgba(255, 176, 32, 0.45); padding: 0 10px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-label { font-size: 13px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-net { font-size: 24px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-net.net-pos { color: var(--debt-green); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-net.net-neg { color: var(--debt-red); }
html:not(.platform-web):not(.platform-native) .global-debt-card .debt-extras { border-top: 2px solid rgba(255, 176, 32, 0.45); margin-top: 12px; padding-top: 10px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .dbt-equiv { font-size: 22px; gap: 18px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .dbt-equiv .green { color: var(--debt-green); }
html:not(.platform-web):not(.platform-native) .global-debt-card .dbt-equiv .red { color: var(--debt-red); }
html:not(.platform-web):not(.platform-native) .global-debt-card .dbt-equiv-lbl { font-size: 14px; }
html:not(.platform-web):not(.platform-native) .global-debt-card .dbt-basis { font-size: 12px; }
/* ==== f24 pc-debts ==== */

/* ==== f29 local-currency ==== */
.ccy-btn { width: 100%; margin-top: 10px; font-weight: 800; }
.ccy-btn b { font-size: 15px; direction: ltr; unicode-bidi: isolate; }
#ccyCurrentName { font-weight: 600; color: var(--secondary-text); font-size: 12px; }
.ccy-list { max-height: 50vh; overflow-y: auto; margin-top: 8px; text-align: start; }
.ccy-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); margin-bottom: 6px; cursor: pointer; color: var(--text-color); text-align: start; }
.ccy-item b { font-size: 15px; min-width: 52px; direction: ltr; unicode-bidi: isolate; }
.ccy-item span { font-size: 12px; color: var(--secondary-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccy-item.on { border-color: var(--accent-gold); background: rgba(255, 176, 32, 0.14); }
.ccy-item:hover { background: var(--hover-bg); }
/* ==== f29 local-currency ==== */

/* ==== f34 capital-simple ==== */
.cap-toggle { display: none !important; }   /* f34: the debts are the calculation — no switch */
.cap-formula { margin-top: 4px; opacity: 0.75; font-weight: 600; }
/* ==== f34 capital-simple ==== */

/* ==== f37 account-control ==== */
.rc-screen { position: fixed; inset: 0; z-index: 100011; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(60% 50% at 50% 0%, rgba(255,176,32,0.10), transparent 60%), var(--bg-color); }
.rc-card { width: min(92vw, 400px); text-align: center; padding: 30px 24px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.rc-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.rc-title { font-size: 20px; font-weight: 900; color: var(--text-color); margin-bottom: 8px; }
.rc-msg { font-size: 14px; color: var(--secondary-text); line-height: 1.6; white-space: pre-wrap; }
.rc-info { font-size: 12.5px; color: var(--accent-gold); font-weight: 700; margin-top: 10px; min-height: 16px; }
.rc-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.rc-btn { padding: 12px; border-radius: 13px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-color); font-size: 14px; font-weight: 800; cursor: pointer; }
.rc-btn-gold { background: linear-gradient(135deg, var(--accent-gold), #c47d00); border: none; color: #000; }
body.rc-locked #supportModal { z-index: 100020 !important; }   /* the support popup opened from the lock screen sits above it */
.rc-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; display: flex; justify-content: center; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: rgba(40, 30, 8, 0.92); border-bottom: 1px solid rgba(255, 176, 32, 0.45); color: var(--accent-gold); font-weight: 800; font-size: 12.5px; backdrop-filter: blur(6px); }
.rc-banner button { background: none; border: none; color: var(--accent-gold); font-size: 15px; font-weight: 800; cursor: pointer; padding: 2px 8px; }
body.rc-pc .rc-screen, body.rc-pc .rc-banner { top: 36px; }   /* the frameless PC window: keep the 36 px title bar (drag strip + minimize / close) reachable */
body.rc-no-sellers #dmAdminSection { display: none !important; }
body.rc-no-capital .sb-nav-item[data-view="capitalView"], body.rc-no-capital #capitalView { display: none !important; }
body.rc-no-expenses .sb-nav-item[data-view="expensesView"], body.rc-no-expenses #expensesView { display: none !important; }
/* ==== f37 account-control ==== */

/* ==== f38 global-control ==== */
#rcGlobalScreen .rc-icon .ico { width: 44px; height: 44px; }
#rcGlobalScreen .rc-btn { width: 100%; margin-top: 18px; border: none; background: linear-gradient(135deg, var(--accent-gold), #c47d00); color: #000; font-size: 15px; font-weight: 900; }
#rcGlobalScreen .rc-btn:active { transform: scale(0.98); }
#rcUpdateBanner { top: 12px; left: 50%; right: auto; transform: translateX(-50%); max-width: 92vw; flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 176, 32, 0.45); background: var(--glass-bg); box-shadow: var(--shadow); }
body.rc-pc #rcUpdateBanner { top: 48px; }   /* below the 36 px frameless title bar */
#rcUpdateBanner button { background: none; border: none; border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 12px; cursor: pointer; }
#rcUpdateBanner .rc-banner-get { background: var(--accent-gold); color: #1a1200; }
#rcUpdateBanner .rc-banner-later { background: transparent; color: var(--secondary-text); border: 1px solid var(--glass-border); }
/* ==== f38 global-control ==== */

/* ==== f40 settle-karat-echo ==== */
.st-echo-host { flex-wrap: wrap; }
.st-gold-echo { flex: 1 0 100%; font-size: 11px; line-height: 1.35; color: var(--secondary-text); padding: 2px 2px 0; direction: ltr; text-align: start; }
.st-gold-echo b { display: block; color: var(--accent-gold); font-weight: 700; }
.st-gold-echo .st-gold-echo-orig { display: block; opacity: 0.85; }
.st-gold-orig { display: inline-block; font-weight: 400; opacity: 0.75; margin-inline-start: 4px; white-space: nowrap; direction: ltr; }
#mbSettleBody .st-gold-echo { margin-top: 4px; font-size: 12px; }
/* ==== f40 settle-karat-echo ==== */ /* end */

/* ==== f41 settle-echo-layout ==== */
.st-k { font-size: 0.7em; vertical-align: super; line-height: 0; margin-inline-start: 2px; font-weight: 600; opacity: 0.85; }
.st-gold-orig { display: block; margin-inline-start: 0; opacity: 0.8; }
.st-gold-echo b .st-k, .st-gold-echo .st-gold-echo-orig .st-k { color: inherit; }
/* ==== f41 settle-echo-layout ==== */ /* end */

/* ==== f42 settle-conv-icon ==== */
.st-conv-ico { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-inline-end: 3px; flex: none; }
.st-gold-echo b.st-conv { color: var(--accent-blue); }
.st-gold-echo b.st-conv .st-k { color: inherit; }
.st-k + .st-conv-ico { margin-inline-start: 3px; margin-inline-end: 0; color: var(--accent-blue); vertical-align: 0.1em; width: 0.9em; height: 0.9em; }
/* ==== f42 settle-conv-icon ==== */ /* end */ /* f43 follows */

/* ==== f43 settle-orig-color ==== */
.st-gold-echo b.st-conv { color: var(--accent-gold); }
.st-gold-echo .st-gold-echo-orig { color: var(--accent-blue); opacity: 1; font-weight: 600; }
.st-gold-echo .st-gold-echo-orig .st-k { color: inherit; }
.st-gold-orig { color: var(--accent-blue); opacity: 1; font-weight: 600; }
.st-k + .st-conv-ico { color: var(--accent-gold); }
/* ==== f43 settle-orig-color ==== */ /* end */

/* ==== f44 phone-settle-rows ==== */
#mbSettleBody .mb-row .st-gold-echo { flex: 1 0 100%; box-sizing: border-box; padding-inline-start: 78px; margin-top: -4px; }
#mbSettleBody .mb-row-controls { flex-wrap: wrap; row-gap: 6px; }
#mbSettleBody .mb-row-controls input { width: auto; flex: 1 1 130px; min-width: 120px; }
#mbSettleBody .mb-row-controls .st-karat-wrap, #mbSettleBody .mb-row-controls .mb-fill-btn, #mbSettleBody .mb-row-controls .mb-arrow-btn { flex: 0 0 auto; }
/* ==== f44 phone-settle-rows ==== */ /* end */ /* f45 follows */

/* ==== f45 phone-echo-converted-only ==== */
#mbSettleBody .st-gold-echo .st-gold-echo-orig { display: none; }
#mbSettleBody .st-gold-echo b.st-conv { margin-top: 2px; }
/* ==== f45 phone-echo-converted-only ==== */ /* end */ /* f46 follows */

/* ==== f46 phone-settle-tidy ==== */
#mbSettleBody .mb-row { align-items: flex-start; }
#mbSettleBody .mb-row > label { padding-top: 10px; }
#mbSettleBody .mb-row-controls { display: flex; flex-wrap: wrap; gap: 6px; row-gap: 5px; align-items: center; }
#mbSettleBody .mb-row-controls input { order: 1; flex: 1 1 0; min-width: 0; width: auto; }
#mbSettleBody .mb-row-controls .st-karat-wrap { order: 2; flex: 0 0 auto; }
#mbSettleBody .mb-row-controls:has(.mb-fill-btn)::after { content: ''; order: 3; flex: 1 0 100%; height: 0; }
#mbSettleBody .mb-row-controls .mb-fill-btn { order: 4; flex: 0 0 auto; }
#mbSettleBody .mb-row-controls .mb-arrow-btn { order: 5; flex: 0 0 auto; }
#mbSettleBody .mb-row .mb-hint, #mbSettleBody .mb-row .st-gold-echo { margin-top: 0; }
#mbSettleBody .mb-row .mb-hint:empty { display: none; }
/* ==== f46 phone-settle-tidy ==== */ /* end */

/* ==== f51 account-deletion ==== */
.del-zone { margin-top: 14px; padding: 14px; border: 1px solid rgba(255, 82, 71, 0.45); border-radius: 14px; background: rgba(255, 82, 71, 0.05); }
.del-zone-title { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-red); margin-bottom: 10px; }
.del-zone-btn { width: 100%; padding: 14px; border-radius: 14px; background: transparent; border: 1.5px solid var(--accent-red); color: var(--accent-red); font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.del-zone-btn:active { background: rgba(255, 82, 71, 0.12); }
.del-zone-hint { font-size: 11px; color: var(--secondary-text); text-align: center; margin-top: 7px; line-height: 1.5; }
#delModal { z-index: 9800; }
.del-modal { max-width: 440px; }
.del-modal .del-title { color: var(--accent-red); }
.del-list { margin: 0 0 12px; padding-inline-start: 20px; font-size: 14px; line-height: 1.7; }
.del-sellers { font-size: 13px; font-weight: 700; color: var(--accent-gold); margin-bottom: 10px; text-align: center; }
.del-noundo { font-size: 13px; font-weight: 800; color: var(--accent-red); text-align: center; padding: 10px; border-radius: 10px; background: rgba(255, 82, 71, 0.10); }
.del-btn-red { background: var(--accent-red); color: #fff; font-weight: 800; border-radius: 12px; padding: 14px; border: 0; cursor: pointer; }
.del-btn-red:disabled { opacity: 0.4; cursor: not-allowed; }
.del-ack { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; margin-bottom: 12px; cursor: pointer; }
.del-ack input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--accent-red); }
.del-lbl { display: block; font-size: 13px; color: var(--secondary-text); margin-bottom: 6px; }
.del-lbl b { color: var(--accent-red); }
.del-modal input[type="text"], .del-modal input[type="password"] { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.del-reauth { width: 100%; margin-bottom: 8px; }
.del-msg { font-size: 13px; line-height: 1.5; min-height: 18px; margin-top: 4px; word-break: break-word; }
.del-steps { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.del-step { display: flex; align-items: center; gap: 10px; font-size: 14px; opacity: 0.45; }
.del-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--secondary-text); flex-shrink: 0; }
.del-step.del-run { opacity: 1; } .del-step.del-run .del-dot { background: var(--accent-gold); animation: delPulse 0.9s ease-in-out infinite; }
.del-step.del-ok { opacity: 1; } .del-step.del-ok .del-dot { background: var(--accent-green); }
.del-step.del-err { opacity: 1; } .del-step.del-err .del-dot { background: var(--accent-red); }
@keyframes delPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
#toast { z-index: 100001; }   /* the "account deleted" toast must clear the welcome overlay (z-index 99999) */
/* ==== f51 account-deletion ==== */ /* end */

/* ==== f52 signup-on-website ==== */
.fl-site-line { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.45); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
.fl-site-link { background: transparent; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent-gold); text-decoration: underline; cursor: pointer; }
.fl-pending-extra { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.fl-noreq-btn { width: 100%; background: linear-gradient(135deg, var(--accent-gold, #ffcc00), #ff9f0a); color: #000; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 800; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(255, 159, 10, 0.35); }
.fl-pending-signout { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.7); padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.fl-pending-hint { font-size: 11px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, 0.4); }

html #firstLaunchModal .fl-site-line, html #firstLaunchModal .fl-pending-hint { color: #66614F; }
html #firstLaunchModal .fl-site-link { color: #8A5A00; }
html #firstLaunchModal .fl-pending-signout { border-color: rgba(78, 97, 40, 0.35); color: #4E6128; background: rgba(255, 255, 255, 0.5); }
html #firstLaunchModal .fl-noreq-btn { background: linear-gradient(135deg, #6A8438 0%, #5A7030 45%, #3F4F1F 100%); color: #F4EEE2; box-shadow: 0 6px 22px rgba(63, 79, 31, 0.35); }
/* ==== f52 signup-on-website ==== */ /* end */

/* ==== f61 settings-list ==== */
/* WhatsApp-style Settings: list page + one window per setting. Everything is scoped to #swaRoot (the old .settings-wrap). */
/* the row hairline: each theme's own ink at low alpha */
:root { --swa-sep: rgba(255, 255, 255, 0.10); }

#settingsView #swaRoot { display: block; max-width: 680px; margin: 0 auto; gap: 0; padding: 4px 8px 8px; position: relative; }
html[lang="ar"] #swaRoot { letter-spacing: 0; }
#swaRoot .swa-list[hidden], #swaRoot .swa-win[hidden], #swaRoot .swa-head-slot[hidden], #swaRoot .swa-row[hidden], #swaRoot .swa-group[hidden] { display: none !important; }
/* transition guard (JS swallows the taps; this also stops focus and :active on the page that just slid in) */
#swaRoot.swa-busy, #swaRoot.swa-busy * { pointer-events: none !important; }

/* LIST PAGE */
#swaRoot .swa-title { margin: 4px 4px 16px; padding: 0; font-size: 28px; line-height: 34px; font-weight: 700; color: var(--text-color); text-align: start; letter-spacing: -0.01em; }
html[lang="ar"] #swaRoot .swa-title { font-size: 29px; line-height: 42px; letter-spacing: 0; }
#swaRoot .swa-profile, #swaRoot .swa-group { background: var(--card-bg); border: 0.5px solid var(--glass-border); border-radius: 16px; box-shadow: var(--shadow); }
#swaRoot .swa-profile { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 88px; margin: 0 0 24px; padding: 16px;
    color: var(--text-color); font: inherit; font-weight: 400; text-align: start; cursor: pointer; opacity: 1; transform: none; -webkit-tap-highlight-color: transparent; }
#swaRoot .swa-avatar { position: relative; flex: 0 0 56px; width: 56px; height: 56px; }
#swaRoot .swa-av { display: block; width: 100%; height: 100%; }
#swaRoot .swa-avatar .ql-avatar { width: 100% !important; height: 100% !important; font-size: 24px !important; box-shadow: none; display: flex; box-sizing: border-box; }
#swaRoot .swa-cam { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
    background: var(--card-bg); border: 1.5px solid var(--accent-gold); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; }
#swaRoot[dir="rtl"] .swa-cam { right: auto; left: -2px; }
#swaRoot .swa-cam .ico { width: 12px; height: 12px; stroke-width: 2.2; vertical-align: 0; }
#swaRoot .swa-pmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#swaRoot .swa-pname { font-size: 19px; line-height: 24px; font-weight: 600; white-space: normal; overflow: hidden;   /* up to two lines, never a cut word */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
html[lang="ar"] #swaRoot .swa-pname { font-size: 20px; line-height: 30px; }
#swaRoot .swa-handle { font-size: 15px; line-height: 20px; color: var(--secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#swaRoot[dir="ltr"] .swa-pname, #swaRoot[dir="ltr"] .swa-handle { text-align: left; }
#swaRoot[dir="rtl"] .swa-pname, #swaRoot[dir="rtl"] .swa-handle { text-align: right; }

#swaRoot .swa-group { margin: 0 0 24px; overflow: hidden; }
#swaRoot .swa-row { position: relative; display: flex; align-items: center; width: 100%; min-height: 52px; margin: 0; padding: 0 12px 0 16px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--text-color); font: inherit; font-weight: 400;
    text-align: start; cursor: pointer; opacity: 1; transform: none; -webkit-tap-highlight-color: transparent; }
#swaRoot[dir="rtl"] .swa-row { padding: 0 16px 0 12px; }
#swaRoot .swa-row:not([hidden]) ~ .swa-row:not([hidden])::before { content: ""; position: absolute; top: 0; left: 60px; right: 16px;
    border-top: 0.5px solid var(--swa-sep); pointer-events: none; }
#swaRoot[dir="rtl"] .swa-row:not([hidden]) ~ .swa-row:not([hidden])::before { left: 16px; right: 60px; }
#swaRoot .swa-ico { flex: 0 0 28px; width: 28px; height: 28px; margin: 0 16px 0 0; display: flex; align-items: center; justify-content: center; color: var(--accent-gold); }
#swaRoot[dir="rtl"] .swa-ico { margin: 0 0 0 16px; }
#swaRoot .swa-ico .ico { width: 22px; height: 22px; stroke-width: 1.9; vertical-align: 0; }
#swaRoot .swa-label { flex: 1 1 auto; min-width: 0; padding: 15px 0; font-size: 16px; line-height: 22px; font-weight: 500; }
html[lang="ar"] #swaRoot .swa-label { font-size: 17px; line-height: 26px; padding: 13px 0; }
#swaRoot .swa-val { flex: 0 0 auto; max-width: 45%;   /* keeps its natural width (≤ 7 characters); the label wraps instead (320 px, Arabic) */ margin: 0 0 0 12px; font-size: 15px; line-height: 20px; color: var(--secondary-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: lining-nums tabular-nums; }
#swaRoot[dir="rtl"] .swa-val { margin: 0 12px 0 0; }
html[lang="ar"] #swaRoot .swa-val { font-size: 16px; line-height: 24px; }
#swaRoot .swa-chev { flex: 0 0 18px; width: 18px; height: 18px; margin: 0 0 0 6px; color: var(--secondary-text); opacity: 0.85; stroke-width: 2.4; vertical-align: 0; }   /* ≥ 3:1 on the light themes */
#swaRoot[dir="rtl"] .swa-chev { margin: 0 6px 0 0; transform: scaleX(-1); }

/* the app paints a red glow on every button:focus and dims buttons on hover / scales them on press — not on these rows */
#swaRoot .swa-row:focus, #swaRoot .swa-back:focus { outline: none; box-shadow: none; }
#swaRoot .swa-profile:focus { outline: none; box-shadow: var(--shadow); }
@media (hover: hover) {
    #swaRoot .swa-row:hover { opacity: 1; box-shadow: inset 0 0 0 999px var(--hover-bg-subtle); }
    #swaRoot .swa-profile:hover { opacity: 1; box-shadow: inset 0 0 0 999px var(--hover-bg-subtle), var(--shadow); }
    #swaRoot .swa-back:hover { opacity: 1; }
}
#swaRoot .swa-row:active { transform: none; box-shadow: inset 0 0 0 999px var(--hover-bg); }
#swaRoot .swa-profile:active { transform: none; box-shadow: inset 0 0 0 999px var(--hover-bg), var(--shadow); }
#swaRoot .swa-row:focus-visible, #swaRoot .swa-profile:focus-visible, #swaRoot .swa-back:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: -2px; }

/* WINDOW HEADER (one shared header; the slot keeps its height in the flow while the header is pinned) */
#swaRoot .swa-head-slot { height: 52px; margin: -4px -16px 12px; position: relative; z-index: 5; }
#swaRoot .swa-head { display: flex; align-items: center; height: 52px; padding: 0 4px; box-sizing: border-box;
    background: linear-gradient(var(--sidebar-bg), var(--sidebar-bg)), var(--bg-color); border-bottom: 0.5px solid var(--swa-sep); }   /* opaque even where the tint is translucent (luxe, dark, grey) */
#swaRoot .swa-head.is-pinned { position: fixed; top: var(--swa-top, 90px); left: 0; right: 0; z-index: 99; }
#swaRoot .swa-back { flex: 0 0 48px; width: 48px; height: 48px; min-height: 0; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-color); cursor: pointer; opacity: 1; transform: none; -webkit-tap-highlight-color: transparent; }
#swaRoot .swa-back > span { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hover-bg); }
#swaRoot .swa-back:active > span { background: var(--highlight-bg); }
#swaRoot .swa-back .ico { width: 22px; height: 22px; stroke-width: 2.2; vertical-align: 0; }
#swaRoot[dir="rtl"] .swa-back .ico { transform: scaleX(-1); }
#swaRoot .swa-head-title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 4px; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600;
    color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
html[lang="ar"] #swaRoot .swa-head-title { font-size: 18px; line-height: 28px; }
#swaRoot .swa-head-spacer { flex: 0 0 48px; }

/* WINDOW BODY = the original card, untouched inside; its emoji tile, title and ▶ are hidden (the header carries the title) */
#swaRoot .swa-win > .settings-card { margin: 0 0 24px; padding: 16px; border-radius: 16px; background: var(--card-bg);
    border: 0.5px solid var(--glass-border); box-shadow: var(--shadow); }
#swaRoot .swa-win .settings-ico, #swaRoot .swa-win .settings-title, #swaRoot .swa-win .settings-chev { display: none !important; }
#swaRoot .swa-win .settings-row-head { margin-bottom: 14px; }
#swaRoot .swa-win .settings-sub { margin: 0; font-size: 14px; line-height: 20px; }
html[lang="ar"] #swaRoot .swa-win .settings-sub { font-size: 15px; line-height: 24px; }
/* Auto day-end: its card's only words sit beside the switch, so they read as the row's label (like Live update alerts) */
#swaRoot #swaWin-eod .settings-row-head { min-height: 52px; }
#swaRoot #swaWin-eod .settings-sub { color: var(--text-color); font-size: 16px; line-height: 22px; font-weight: 500; }
html[lang="ar"] #swaRoot #swaWin-eod .settings-sub { font-size: 17px; line-height: 26px; }
/* Language: plain names (the flags are stripped by the script) and a tick on the active one */
#swaRoot .swa-win .settings-lang-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
#swaRoot .swa-win .settings-lang-btn .swa-lang-tick { display: none; width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 2.6; vertical-align: 0; }
#swaRoot .swa-win .settings-lang-btn.active .swa-lang-tick { display: inline-block; }
#swaRoot .swa-win .settings-lang-btn { font-size: 15px; }
html[lang="ar"] #swaRoot .swa-win .settings-lang-btn { font-size: 16px; }
#swaRoot .swa-win .settings-collapse .settings-collapse-head { cursor: default; pointer-events: none; }
#swaRoot .swa-win .settings-collapse .settings-collapse-body { max-height: none; overflow: visible; margin-top: 14px; transition: none; }
/* Theme window: all six previews on one screen; the labels keep the PAGE colour (each preview button carries data-theme,
   which re-scopes the theme tokens and made some labels invisible) */
#swaRoot .swa-win .theme-preview-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; --swa-tp-label: var(--text-color); }
#swaRoot .swa-win .tp-label { color: var(--swa-tp-label); font-size: 12px; }
html[lang="ar"] #swaRoot .swa-win .tp-label { font-size: 13px; letter-spacing: 0; }
#swaRoot .swa-win .tp-card { direction: ltr; }   /* the miniatures keep the app's real LTR spot bar; only the grid order mirrors */
/* Rows inside a window: the old boxed rows (quick login, live alerts) and FAQ boxes become flat grouped rows with inset
   hairlines, like the list page; labels at list-label size so the helper line stays secondary. Controls are untouched. */
#swaRoot .swa-win .ql-rows { gap: 0; }
#swaRoot .swa-win .ql-row { min-height: 52px; padding: 10px 0; gap: 16px; border: 0; border-radius: 0; background: transparent;
    font-size: 16px; line-height: 22px; font-weight: 500; }
html[lang="ar"] #swaRoot .swa-win .ql-row { font-size: 17px; line-height: 26px; }
#swaRoot .swa-win .ql-row ~ .ql-row { border-top: 0.5px solid var(--swa-sep); }
#swaRoot .swa-win .ql-row b { font-weight: 600; }
#swaRoot .swa-win .ql-rows > .desc-text { margin: 0 0 4px !important; font-size: 13px; line-height: 19px; }
html[lang="ar"] #swaRoot .swa-win .ql-rows > .desc-text { font-size: 14px; line-height: 22px; }
#swaRoot .swa-win .ql-rows > #laTrayHint { padding: 0 0 8px !important; }
#swaRoot .swa-win .ql-row .link-btn-gold, #swaRoot .swa-win .ql-row .stmt-preset { min-height: 36px; padding: 7px 14px; font-size: 14px; line-height: 20px; flex: 0 0 auto; }
html[lang="ar"] #swaRoot .swa-win .ql-row .link-btn-gold, html[lang="ar"] #swaRoot .swa-win .ql-row .stmt-preset { font-size: 15px; line-height: 22px; }
#swaRoot .swa-win .support-faq-list { gap: 0; }
#swaRoot .swa-win .support-faq-item { background: transparent; border: 0; border-radius: 0; }
#swaRoot .swa-win .support-faq-item + .support-faq-item { border-top: 0.5px solid var(--swa-sep); }
#swaRoot .swa-win .support-faq-item summary { min-height: 52px; padding: 12px 0; gap: 16px; font-size: 16px; line-height: 22px; font-weight: 500; }
html[lang="ar"] #swaRoot .swa-win .support-faq-item summary { font-size: 17px; line-height: 26px; }
#swaRoot .swa-win .support-faq-answer { padding: 0 0 14px; font-size: 14px; line-height: 21px; }
html[lang="ar"] #swaRoot .swa-win .support-faq-answer { font-size: 15px; line-height: 24px; }

/* the avatar with no photo and no name: a person icon in the ring */
#swaRoot .swa-av .swa-av-user { width: 52%; height: 52%; stroke-width: 1.8; vertical-align: 0; }

/* MOTION: the window pushes in from the inline end, the list pops back from the inline start; transform / opacity only, no fill */
@keyframes swaInLtr { from { transform: translateX(100%); } to { transform: none; } }
@keyframes swaInRtl { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes swaPopLtr { from { transform: translateX(-24%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes swaPopRtl { from { transform: translateX(24%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes swaFade { from { opacity: 0; } to { opacity: 1; } }
#swaRoot .swa-win.swa-anim-in { animation: swaInLtr 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
#swaRoot[dir="rtl"] .swa-win.swa-anim-in { animation-name: swaInRtl; }
#swaRoot .swa-list.swa-anim-pop { animation: swaPopLtr 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
#swaRoot[dir="rtl"] .swa-list.swa-anim-pop { animation-name: swaPopRtl; }
#swaRoot .swa-head-slot.swa-anim-fade { animation: swaFade 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
    #swaRoot .swa-win.swa-anim-in, #swaRoot .swa-list.swa-anim-pop, #swaRoot .swa-head-slot.swa-anim-fade { animation: none !important; }
}

/* DESKTOP / PC (> 600 px): the same pattern in a centred 680 px column, a little roomier */
@media (min-width: 601px) {
    #settingsView #swaRoot { padding: 8px 0 48px; overflow-x: clip; }   /* clip the slide; never overflow:hidden (it kills sticky) */
    #swaRoot .swa-title { margin: 0 4px 20px; font-size: 30px; line-height: 38px; }
    html[lang="ar"] #swaRoot .swa-title { font-size: 31px; line-height: 46px; }
    #swaRoot .swa-profile { min-height: 96px; padding: 20px; margin-bottom: 32px; }
    #swaRoot .swa-avatar { flex-basis: 60px; width: 60px; height: 60px; }
    #swaRoot .swa-avatar .ql-avatar { font-size: 26px !important; }
    #swaRoot .swa-pname { font-size: 20px; line-height: 26px; }
    html[lang="ar"] #swaRoot .swa-pname { font-size: 21px; line-height: 32px; }
    #swaRoot .swa-group { margin-bottom: 32px; }
    #swaRoot .swa-row { min-height: 56px; padding: 0 16px 0 20px; }
    #swaRoot[dir="rtl"] .swa-row { padding: 0 20px 0 16px; }
    #swaRoot .swa-row:not([hidden]) ~ .swa-row:not([hidden])::before { left: 64px; }
    #swaRoot[dir="rtl"] .swa-row:not([hidden]) ~ .swa-row:not([hidden])::before { left: 16px; right: 64px; }
    #swaRoot .swa-ico .ico { width: 24px; height: 24px; }
    #swaRoot .swa-label { padding: 16px 0; font-size: 17px; line-height: 24px; }
    html[lang="ar"] #swaRoot .swa-label { font-size: 18px; line-height: 28px; padding: 14px 0; }
    #swaRoot .swa-head-slot { position: sticky; top: var(--swa-desk-top, -20px); height: 56px; margin: 0 0 16px; z-index: 5; }
    #swaRoot .swa-head { height: 56px; border: 0.5px solid var(--glass-border); border-radius: 12px; }
    #swaRoot .swa-head-title { font-size: 18px; line-height: 24px; }
    html[lang="ar"] #swaRoot .swa-head-title { font-size: 19px; line-height: 30px; }
    #swaRoot .swa-win > .settings-card { padding: 20px; margin-bottom: 32px; }
    /* all six theme previews in one row above the fold (fewer columns when the column is narrow) */
    #swaRoot .swa-win .theme-preview-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
    #swaRoot .swa-win .tp-label { font-size: 13px; }
    html[lang="ar"] #swaRoot .swa-win .tp-label { font-size: 14px; }
}
/* ==== f61 settings-list ==== */ /* end */

/* ==== f62 melt-tabbar ==== */
/* the melting tab bar — phone bottom bar only; every rule is scoped under html.mdk-bar (set by the f62 block once the dock is built).
   Tokens per theme (no JS on setTheme). Defaults = Dark (the app's :root token set). */
html.mdk-bar {
    --mdk-floor: var(--bg-color, #000000);
    --mdk-plate-top: #1A1A1C; --mdk-plate-bot: #0E0E10;
    --mdk-rim: #FFFFFF; --mdk-rim-a0: 0.27; --mdk-rim-a1: 0.17; --mdk-rim-a2: 0.07; --mdk-rim-a3: 0.03;
    --mdk-plate-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.35);
    --mdk-bead-hi: #E9E7E0; --mdk-bead: #E4E1D8;
    --mdk-bead-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 10px 1px rgba(228, 225, 216, 0.22);
    --mdk-ink: #242423; --mdk-icon: rgba(255, 255, 255, 0.55); --mdk-label: #E4E1D8;
}

@media (max-width: 600px) {
    /* the gap under the plate clears the home indicator (iPhone 14 px: the plate top sits 7 px BELOW today's bar top, only the bead
       rises above it; Android 10 px); --mdk-top = the bead's highest point */
    html.mdk-bar { --mdk-gap: max(10px, calc(env(safe-area-inset-bottom, 0px) - 20px)); --mdk-top: calc(var(--mdk-gap) + 78px); }
    /* content ends 8 px above the bead top (#appLayout adds the safe-area inset on its own) */
    html.mdk-bar body { padding-bottom: calc(var(--mdk-gap) + 86px - env(safe-area-inset-bottom, 0px)) !important; }
    html.mdk-bar .live-alert { bottom: calc(var(--mdk-top) + 12px); }
    html.mdk-bar #newsTicker { bottom: calc(var(--mdk-top) + 16px) !important; }
    html.mdk-bar .sync-pill { bottom: calc(var(--mdk-top) + 24px); }
    /* the "saved" toast (bottom 30 px, its keyframes animate bottom) is lifted by a transform to 12 px above the bead, so it never
       sits on the tabs; its slide-in / fade-out are unchanged */
    html.mdk-bar #toast { transform: translateX(-50%) translateY(calc(18px - var(--mdk-top))); }

    /* the nav box = bead zone (32) + plate (56) + gap; transparent above the plate, page colour beside / under it, no blur */
    html.mdk-bar #iosBottomNav.mdk {
        height: calc(var(--mdk-gap) + 88px) !important; min-height: 0 !important; padding: 0 !important;
        background: linear-gradient(to top, var(--mdk-floor) 0, var(--mdk-floor) calc(var(--mdk-gap) + 24px), transparent calc(var(--mdk-gap) + 60px)) !important;
        border-top: 0 !important; box-shadow: none !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        overflow: visible !important; pointer-events: none;
        -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    }
    /* the four original buttons, laid over the plate; the sidebar styles they share (.sb-nav-item) are switched off here */
    html.mdk-bar #iosBottomNav.mdk .ios-tab {
        position: absolute !important; top: 32px !important; left: var(--mdk-l) !important; width: var(--mdk-w) !important; height: 56px !important;
        min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; flex: none !important; gap: 0 !important;
        overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        color: var(--mdk-icon) !important; opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
        font-family: inherit !important; font-weight: 700 !important; outline: none; z-index: 1; cursor: pointer;
        pointer-events: auto; touch-action: pan-y; -webkit-tap-highlight-color: transparent;   /* pan-y: a vertical swipe from the dock still scrolls the page */
    }
    html.mdk-bar #iosBottomNav.mdk .ios-tab::after { content: none !important; display: none !important; animation: none !important; }
    /* the bead is decoration: a tap on it is a native tap on the button under it. Hit cap = the bead's own width, reaching only
       12 px above the plate (the whole raised icon): the bead's top rim stays tap-through, so it never steals a tap from the page */
    html.mdk-bar #iosBottomNav.mdk .ios-tab.mdk-on::before {
        content: ""; position: absolute; left: calc(var(--mdk-cx) - 22px); top: -12px; width: 44px; height: 14px; border-radius: 6px 6px 0 0; pointer-events: auto;
    }
    /* icons never take the pointer: a touch's implicit capture must land on the button itself, or the drag's capture would be lost */
    html.mdk-bar #iosBottomNav.mdk .ios-tab .ios-tab-icon {
        position: absolute; left: calc(var(--mdk-cx) - 10px); top: 18px; width: 20px; height: 20px; display: block; line-height: 0; font-size: 0; filter: none; pointer-events: none;
    }
    html.mdk-bar #iosBottomNav.mdk .ios-tab .ios-tab-icon svg { display: block; width: 20px !important; height: 20px !important; margin: 0 !important; stroke-width: 1.92; }
    html.mdk-bar #iosBottomNav.mdk .ios-tab:active .ios-tab-icon { opacity: 0.6; }
    html.mdk-bar #iosBottomNav.mdk .ios-tab:focus-visible .ios-tab-icon { outline: 2px solid var(--mdk-label); outline-offset: 10px; border-radius: 10px; }
    /* the active label under the bead (opacity is driven by the bead's distance) */
    html.mdk-bar #iosBottomNav.mdk .ios-tab .ios-tab-label {
        position: absolute; left: calc(var(--mdk-cx) - var(--mdk-lw) / 2); width: var(--mdk-lw); top: 43px; transform: translateY(-50%);
        text-align: center; white-space: nowrap; line-height: 1; font-size: 12px; font-weight: 700; letter-spacing: 0;
        color: var(--mdk-label); opacity: 0; pointer-events: none;
    }
    html.mdk-bar[lang="ar"] #iosBottomNav.mdk .ios-tab .ios-tab-label { font-size: 13px; }
    html.mdk-bar body.kb-open #iosBottomNav.mdk .ios-tab, html.mdk-bar body.kb-open #iosBottomNav.mdk .mdk-floor { pointer-events: none !important; }

    /* floor (blocks taps under / beside the plate, like today's full-width bar), plate, bead */
    html.mdk-bar #iosBottomNav.mdk .mdk-floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--mdk-gap) + 56px); z-index: 0; pointer-events: auto; }
    html.mdk-bar #iosBottomNav.mdk .mdk-back,
    html.mdk-bar #iosBottomNav.mdk .mdk-front { position: absolute; top: 0; left: var(--mdk-left); width: var(--mdk-pw); height: 90px; pointer-events: none; }
    html.mdk-bar #iosBottomNav.mdk .mdk-back { z-index: 0; }
    html.mdk-bar #iosBottomNav.mdk .mdk-front { z-index: 2; }
    html.mdk-bar #iosBottomNav.mdk .mdk-shadow { position: absolute; left: 1px; top: 32px; width: calc(var(--mdk-pw) - 2px); height: 56px; border-radius: 14px; box-shadow: var(--mdk-plate-shadow); }
    html.mdk-bar #iosBottomNav.mdk .mdk-plate { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
    html.mdk-bar #iosBottomNav.mdk .mdk-bead { position: absolute; left: 0; top: 0; width: 44px; height: 44px; will-change: transform; }
    html.mdk-bar #iosBottomNav.mdk .mdk-bead-bg {
        position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%;
        background: linear-gradient(180deg, var(--mdk-bead-hi) 0%, var(--mdk-bead) 72%); box-shadow: var(--mdk-bead-shadow);
    }
    html.mdk-bar #iosBottomNav.mdk .mdk-bead-clip {
        position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; overflow: hidden;
        -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%);
    }
    html.mdk-bar #iosBottomNav.mdk .mdk-ink-row { position: absolute; left: 0; top: 0; width: var(--mdk-pw); height: 88px; color: var(--mdk-ink); }
    html.mdk-bar #iosBottomNav.mdk .mdk-ink-row svg { position: absolute; display: block; width: 20px; height: 20px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2.04; }
}
/* very narrow phones (320 px): "Summary & Profit" / "الملخص والأرباح" one size smaller so it keeps clear of the next icon */
@media (max-width: 340px) {
    html.mdk-bar #iosBottomNav.mdk .ios-tab .ios-tab-label { font-size: 11px; }
    html.mdk-bar[lang="ar"] #iosBottomNav.mdk .ios-tab .ios-tab-label { font-size: 12px; }
}
/* ==== f62 melt-tabbar ==== */ /* end */

/* ==== f63 orbit pin unlock ==== */
/* f63: orbit PIN unlock — six tiles on #qlDots (see dev-tools/patches/f63_orbit_pinlock.js) */
#qlDots.qo { display: block; position: relative; z-index: 2; width: 100%; height: 44px; margin: 2px 0 10px; gap: 0; direction: ltr; }
#qlDots.qo .qo-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#qlDots.qo .qo-orbit { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#qlDots.qo .qo-slot { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; }
#qlDots.qo .qo-slot::after { content: ""; position: absolute; inset: -5px; border-radius: 15px; border: 3px solid var(--accent-gold); opacity: 0; transition: opacity .15s; pointer-events: none; }
#qlDots.qo .qo-slot.next::after { opacity: .28; }
#qlDots.qo .qo-tile { position: absolute; inset: 0; border-radius: 11px; border: 1.5px solid var(--input-border); background: var(--input-bg); overflow: hidden; isolation: isolate; transition: border-color .15s; }
#qlDots.qo .qo-tile::before { content: ""; position: absolute; inset: 0; background: var(--accent-gold); opacity: 0; transition: opacity .15s; }
#qlDots.qo .qo-slot.next .qo-tile { border-color: var(--secondary-text); }
#qlDots.qo .qo-slot.on .qo-tile { border-color: var(--accent-gold); }
#qlDots.qo .qo-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 0; background: var(--text-color); transform: scale(0); transition: background-color .15s; }
#qlDots.qo .qo-slot.on .qo-dot { transform: scale(1); }
#qlDots.qo .qo-bloom { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--accent-gold), transparent 70%); opacity: 0; }
#qlDots.qo .qo-flash { position: absolute; inset: 0; color: var(--accent-gold); background: radial-gradient(circle at 50% 50%, currentColor, transparent 75%); opacity: 0; }
#qlDots.qo .qo-pulse { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 1.5px solid var(--accent-gold); opacity: 0; }
#qlDots.qo .qo-cr { display: none; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #qlDots.qo .qo-cr { display: block; position: absolute; inset: 0; border-radius: 11px; padding: 2px; overflow: hidden; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
}
#qlDots.qo .qo-comet { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg 250deg, var(--accent-gold) 345deg, transparent 360deg); }
#qlDots.qo .qo-slot.ok .qo-tile { border-color: var(--accent-gold); }
#qlDots.qo .qo-slot.ok .qo-tile::before { opacity: .18; }
#qlDots.qo .qo-slot.ok .qo-dot { background: var(--accent-gold); }
#qlDots.qo .qo-slot.bad .qo-tile { border-color: var(--accent-red); border-width: 2px; }
#qlDots.qo .qo-slot.bad .qo-tile::before { background: var(--accent-red); opacity: .16; }
#qlDots.qo .qo-slot.bad .qo-flash { color: var(--accent-red); }
#qlDots.qo .qo-slot.bad .qo-dot { background: var(--accent-red); }
#qlDots.qo .qo-ring { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; opacity: 0; overflow: visible; pointer-events: none; }
#qlDots.qo .qo-ring circle { fill: none; stroke: var(--secondary-text); stroke-opacity: .5; stroke-width: 1.25; stroke-dasharray: 2.2 3.2; }
#qlDots.qo .qo-hub { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); opacity: 0; }
#qlDots.qo .qo-glow { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--accent-gold), transparent 68%); opacity: 0; pointer-events: none; }
#qlDots.qo .qo-done { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 16px; border: 1.5px solid var(--accent-gold); background: var(--glass-bg); overflow: hidden; opacity: 0; pointer-events: none; }
#qlDots.qo .qo-done::before { content: ""; position: absolute; inset: 0; background: var(--accent-gold); opacity: .16; }
#qlDots.qo .qo-done svg { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; fill: none; stroke: var(--accent-gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#qlDots.qo .qo-done path { stroke-dasharray: 30; stroke-dashoffset: 30; }
#qlDots.qo .qo-rs { position: absolute; border: 1.5px solid var(--accent-gold); opacity: 0; pointer-events: none; }
#qlDots.qo .qo-r1 { left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 26px; }
#qlDots.qo .qo-r2 { left: -68px; top: -68px; width: 136px; height: 136px; border-radius: 36px; border-width: 1px; }
#qlDots.qo .qo-pt { position: absolute; left: 0; top: 0; border: 0; border-radius: 50%; background: var(--accent-gold); opacity: 0; }
#qlDots.qo .qo-pt.qo-pt2 { background: var(--text-color); }
#quickLockScreen .ql-card > * { transition: opacity .2s ease; }
#quickLockScreen .ql-card.qo-run > :not(#qlDots) { opacity: .12; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #qlDots.qo .qo-cr { display: none; } }
/* ==== f63 orbit pin unlock ==== */ /* end */

/* ==== f64 karat hero ==== */
/* f64: karat hero on the first welcome slide (see dev-tools/patches/f64_karat_hero.js) */
html.kh-ready #firstLaunchModal .fl-slide[data-slide="0"] .kh-hide { display: none !important; }
html.kh-ready #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-sub { margin-bottom: 18px; }
#kHero { width: min(440px, 100%); margin: 0 auto; padding: 16px 16px 14px; border-radius: 22px; box-sizing: border-box; text-align: center;
  background: rgba(255, 252, 242, 0.62); border: 1px solid rgba(120, 90, 20, 0.22); box-shadow: 0 10px 30px rgba(78, 60, 10, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7); font-family: Cairo, system-ui, sans-serif; }
#kHero .kh-lbl { font-size: 13px; font-weight: 600; color: #66614F; margin-bottom: 8px; }
#kHero .kh-chips { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(78, 60, 10, 0.07); border: 1px solid rgba(120, 90, 20, 0.18); direction: ltr; }
#kHero[dir="rtl"] .kh-chips { direction: rtl; }
#kHero .kh-chips button { position: relative; z-index: 1; height: 38px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #5C5640; font: 600 15px Cairo, system-ui, sans-serif; cursor: pointer; transition: color .2s; -webkit-tap-highlight-color: transparent; }
#kHero .kh-chips button[aria-pressed="true"] { color: #2B2008; }
#kHero .kh-chips button, #kHero .kh-unit button { box-shadow: none !important; outline: none; transform: none !important; }
#kHero .kh-chips button:focus-visible, #kHero .kh-unit button:focus-visible { outline: 2px solid #8A5A00; outline-offset: 2px; }
#kHero .kh-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; transform-origin: 0 50%;
  background: linear-gradient(180deg, #F0CF7A, #D3A445 55%, #B98A30); box-shadow: 0 2px 8px rgba(140, 100, 20, 0.30), inset 0 1px 0 rgba(255, 250, 225, 0.75); }
#kHero .kh-prod { position: relative; height: 128px; margin: 6px 0 2px; }
#kHero .kh-item { position: absolute; left: 50%; top: 50%; width: 226px; height: 128px; margin: -64px 0 0 -113px; opacity: 0; }
#kHero .kh-item.on { opacity: 1; }
#kHero .kh-shadow { position: absolute; left: 50%; bottom: 4px; width: 190px; height: 20px; margin-left: -95px; background: radial-gradient(ellipse at 50% 50%, rgba(60, 40, 0, 0.28), transparent 70%); }
#kHero .kh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
#kHero .kh-stats > div { padding: 8px 4px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(120, 90, 20, 0.14); min-width: 0; }
#kHero .kh-stats small { display: block; font-size: 12px; font-weight: 600; color: #66614F; line-height: 1.5; }
#kHero .kh-stats b { display: block; font-size: 17px; font-weight: 700; color: #2B2413; line-height: 1.4; white-space: nowrap; }
#kHero .kh-stats b u { text-decoration: none; font-size: 12px; font-weight: 600; color: #66614F; margin-inline-start: 2px; }
#kHero .kh-stats i, #kHero .kh-res i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: #8A5A00; line-height: 1.5; min-height: 17px; white-space: nowrap; }
#kHero .kh-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: lining-nums tabular-nums; }
#kHero .kh-calc { padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(120, 90, 20, 0.16); text-align: start; }
#kHero .kh-in { display: flex; align-items: center; gap: 8px; }
#kHero .kh-calc label { display: block; margin: 0; font-size: 12px; font-weight: 600; color: #66614F; white-space: nowrap; }
#kHero .kh-wrow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
#kHero .kh-calc input#khW { flex: 1 1 auto; width: 0 !important; min-width: 0; max-width: none; height: 40px !important; margin: 0 !important; padding: 0 8px !important; box-sizing: border-box; border-radius: 10px !important;
  border: 1px solid rgba(120, 90, 20, 0.3) !important; background: #FFFDF6 !important; color: #2B2413 !important; font: 700 16px Cairo, system-ui, sans-serif !important; text-align: center; direction: ltr; box-shadow: none !important; letter-spacing: 0 !important; }
#kHero .kh-calc input#khW:focus { outline: none; border-color: #B98A30 !important; box-shadow: 0 0 0 3px rgba(212, 164, 69, 0.25) !important; }
#kHero .kh-unit { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(78, 60, 10, 0.07); }
#kHero .kh-unit button { height: 34px; min-width: 52px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: #5C5640; font: 600 13px Cairo, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
#kHero .kh-unit button[aria-pressed="true"] { background: #4E6128; color: #FFFDF2; }
#kHero .kh-res { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(120, 90, 20, 0.22); }
#kHero .kh-res label { white-space: normal; }
#kHero .kh-res i:empty { display: none; }
#kHero .kh-res-v { text-align: end; min-width: 0; }
#kHero .kh-res b { display: block; font-size: 20px; font-weight: 700; color: #6B4600; line-height: 1.35; white-space: nowrap; }
#kHero .kh-note { margin-top: 8px; font-size: 11.5px; color: #77705A; line-height: 1.5; }
#kHero .kh-note-wait, #kHero.kh-nop .kh-note-on { display: none; }
#kHero.kh-nop .kh-note-wait { display: inline; }
@media (max-width: 380px) {
  #kHero { padding: 14px 12px 12px; }
  #kHero .kh-chips button { min-width: 68px; padding: 0 10px; font-size: 14px; }
  #kHero .kh-stats b { font-size: 15px; }
  #kHero .kh-calc { gap: 8px; padding: 10px; }
  #kHero .kh-res b { font-size: 18px; }
}
@media (max-height: 780px) { #kHero .kh-prod { height: 96px; } #kHero .kh-item { width: 170px; height: 96px; margin: -48px 0 0 -85px; } html.kh-ready #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-sub { display: none; } #kHero .kh-stats > div { padding: 6px 4px 4px; } }
@media (max-width: 600px) { html.kh-ready #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-title { font-size: 34px; margin-bottom: 4px; } }
/* ==== f64 karat hero ==== */ /* end */

/* ==== f66 melt-topbar (web, from f62pc) ==== */
@media (min-width: 601px) {
    /* web: #sidebar is position:static here (relative on the PC), so make it the layers' containing block */
    html.mds-nav #sidebar { position: relative !important; }

/* the melting nav on the desktop strip — every rule is scoped under html.mds-nav (set by the f62pc block once its layers are built).
   Tokens per theme (no JS on setTheme); defaults = Dark (the app's :root token set). --mds-floor = the page just under the strip,
   strip shadow included; --mds-rim = the strip's own bottom border, so the melted edge continues the flat one. */
html.mds-nav {
    --mds-floor: #000000;
    --mds-rim: var(--sidebar-border); --mds-rim-w: 1px;
    --mds-bead-hi: #E9E7E0; --mds-bead: #E4E1D8;
    --mds-bead-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 10px 1px rgba(228, 225, 216, 0.22);
    --mds-ink: #242423; --mds-label: #E4E1D8; --mds-item: rgba(255, 255, 255, 0.78);
}

/* the strip paints over the page's first 28 px (the bead hangs 20 px into it); the nav sits between the two layers */
html.mds-nav #sidebar { z-index: 6; }
html.mds-nav #sidebar #sbNavStrip { position: relative; z-index: 1; }
html.mds-nav #mainContent { padding-top: 28px; }
html.mds-nav #sidebar > .mds-back,
html.mds-nav #sidebar > .mds-front {
    position: absolute; top: 0; left: var(--mds-l, 0px); width: var(--mds-w, 0px); height: var(--mds-h, 0px);
    overflow: hidden; pointer-events: none; transition: opacity 0.15s ease; animation: mdsIn 0.3s ease-out 0.35s backwards;
}
html.mds-nav #sidebar > .mds-back { z-index: 0; }
html.mds-nav #sidebar > .mds-front { z-index: 2; }
html.mds-nav #sidebar.mds-off > .mds-back,
html.mds-nav #sidebar.mds-off > .mds-front { opacity: 0; }
@keyframes mdsIn { from { opacity: 0; } }
html.mds-nav #sidebar .mds-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
html.mds-nav #sidebar .mds-rimline { fill: none; stroke: var(--mds-rim); stroke-width: var(--mds-rim-w); }
html.mds-nav #sidebar .mds-moat { fill: var(--mds-floor); stroke: none; }
html.mds-nav #sidebar .mds-bead {
    position: absolute; left: 0; top: 0; width: 40px; height: 40px; will-change: transform; pointer-events: auto; cursor: pointer;
    -webkit-user-select: none; user-select: none; touch-action: none;
}
html.mds-nav #sidebar.mds-off .mds-bead { pointer-events: none; }
html.mds-nav #sidebar.mds-drag .mds-bead { cursor: grabbing; }
html.mds-nav #sidebar .mds-bead-bg {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%;
    background: linear-gradient(180deg, var(--mds-bead-hi) 0%, var(--mds-bead) 72%); box-shadow: var(--mds-bead-shadow);
}
html.mds-nav #sidebar .mds-bead-clip {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; overflow: hidden;
    -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%);
}
html.mds-nav #sidebar .mds-ink-row { position: absolute; left: 0; top: 0; width: 0; height: 0; color: var(--mds-ink); }
html.mds-nav #sidebar .mds-ink { position: absolute; display: flex; align-items: center; justify-content: center; }
html.mds-nav #sidebar .mds-ink svg { display: block; width: 20px; height: 20px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; }
/* the item under the bead: no pill / underline / glow (the bead marks it), its label lit, no hover nudge or press scale; every
   icon's transform is driven by the block (it dips into the passing bead), so no transform transition or active scale / glow */
html.mds-nav #sidebar .sb-nav-item.active,
html.mds-nav #sidebar .sb-nav-item.mds-on { background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; }
html.mds-nav #sidebar .sb-nav-item.active:not(.mds-on) { color: var(--mds-item) !important; font-weight: 600; }
html.mds-nav #sidebar .sb-nav-item.mds-on { color: var(--mds-label) !important; font-weight: 700; transform: none !important; opacity: 1 !important; }
html.mds-nav #sidebar .sb-nav-item .sb-nav-icon { transition: none !important; }
html.mds-nav #sidebar .sb-nav-item.active .sb-nav-icon,
html.mds-nav #sidebar .sb-nav-item.mds-on .sb-nav-icon { filter: none !important; background: transparent !important; }
@media (prefers-reduced-motion: reduce) {
    html.mds-nav #sidebar > .mds-back, html.mds-nav #sidebar > .mds-front { animation: none; transition: none; }
}

}

@media (max-width: 600px) {
    #sidebar > .mds-back, #sidebar > .mds-front { display: none !important; }
    #sidebar .sb-nav-item .sb-nav-icon { transform: none !important; }
}
/* ==== f66 melt-topbar (web, from f62pc) ==== */ /* end */

/* ==== f66b topbar touch-drag + no active dot ==== */
@media (min-width: 601px) {
    html.mds-nav #sbNavStrip .sb-nav-item.active::after { display: none !important; }
}
/* ==== f66b topbar touch-drag + no active dot ==== */ /* end */

/* ==== f71 read-only mode ==== */
:root { --ro-bg: rgba(255, 176, 32, 0.10); --ro-border: rgba(255, 176, 32, 0.42); --ro-ink: var(--accent-gold); --ro-ico-bg: rgba(255, 176, 32, 0.16); }

.ro-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--ro-bg); border: 1px solid var(--ro-border); color: var(--text-color); box-sizing: border-box; }
.ro-banner .ro-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ro-ico-bg); color: var(--ro-ink); }
.ro-banner .ro-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ro-banner .ro-txt { flex: 1 1 auto; min-width: 0; text-align: start; }
.ro-banner .ro-title { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ro-ink); }
.ro-banner .ro-msg { font-size: 13px; line-height: 19px; color: var(--secondary-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ro-banner .ro-info { font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--text-color); margin-top: 2px; }
.ro-banner .ro-date { direction: ltr; unicode-bidi: isolate; font-variant-numeric: lining-nums tabular-nums; }
.ro-banner .ro-btn { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ro-border); background: transparent; color: var(--ro-ink); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ro-banner .ro-btn:hover { background: var(--ro-ico-bg); }
html[lang="ar"] .ro-banner .ro-title { font-size: 15px; line-height: 24px; }
html[lang="ar"] .ro-banner .ro-msg { font-size: 14px; line-height: 22px; }
html[lang="ar"] .ro-banner .ro-btn { font-size: 14px; }
.ro-banner .ro-s { display: none; }
@media (max-width: 600px) {   /* phone: icon · title · Contact on one row, the message full width under them */
    .ro-banner { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 10px 12px; margin-bottom: 10px; }
    .ro-banner .ro-txt { display: contents; }
    .ro-banner .ro-ico { grid-column: 1; grid-row: 1; }
    .ro-banner .ro-title { grid-column: 2; grid-row: 1; }
    .ro-banner .ro-btn { grid-column: 3; grid-row: 1; min-height: 36px; padding: 4px 14px; }
    .ro-banner .ro-msg, .ro-banner .ro-info { grid-column: 1 / -1; margin-top: 0; }
    .ro-banner .ro-l { display: none; }
    .ro-banner .ro-s { display: inline; }
}
html.rc-readonly .trade-form-card { position: relative; opacity: 0.5; filter: saturate(0.55); }
html.rc-readonly .trade-form-card::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6; border-radius: inherit; cursor: not-allowed; }
html.rc-readonly #eodBtn,
html.rc-readonly #undoBtn,
html.rc-readonly #globalRecalcBtn,
html.rc-readonly #cpAddSettleBtn,
html.rc-readonly #cpTransferBtn,
html.rc-readonly #mbSettleTrigger,
html.rc-readonly #mbTransferTrigger,
html.rc-readonly #cpSettleSubmitBtn,
html.rc-readonly #clientTopAddBar,
html.rc-readonly [onclick*="_openAddClientModal"],
html.rc-readonly [onclick*="_toggleTopAddClient"],
html.rc-readonly [onclick*="_addClientFromTop"],
html.rc-readonly [onclick*="_saveNewClient"],
html.rc-readonly [onclick*="_dupMerge"],
html.rc-readonly [onclick*="openRenameModal"],
html.rc-readonly [onclick*="saveRenameClient"],
html.rc-readonly [onclick*="newTradeForClient"],
html.rc-readonly [onclick*="openTransferModal"],
html.rc-readonly [onclick*="submitTransfer"],
html.rc-readonly [onclick*="saveSettlementEdit"],
html.rc-readonly [onclick*="saveUniversalEdit"],
html.rc-readonly [onclick*="openAddPastTradeModal"],
html.rc-readonly [onclick*="savePastTrade"],
html.rc-readonly [onclick*="_clearNetGold"],
html.rc-readonly [onclick*="openEditVaultModal"],
html.rc-readonly [onclick*="saveEditVault"],
html.rc-readonly [onclick*="openAddExpenseModal"],
html.rc-readonly [onclick*="submitExpense"],
html.rc-readonly [onclick*="openEditExpenseModal"],
html.rc-readonly [onclick*="_expApplyEdit"],
html.rc-readonly [onclick*="deleteExpense"],
html.rc-readonly [onclick*="openExpToGoldModal"],
html.rc-readonly [onclick*="revertExpenseFromGold"],
html.rc-readonly [onclick*="_capPageSave"],
html.rc-readonly [onclick*="saveCapitalEntry"],
html.rc-readonly [onclick*="deleteCapitalEntry"],
html.rc-readonly [onclick*="openQuickCapital"],
html.rc-readonly [onclick*="saveQuickCapital"],
html.rc-readonly [onclick*="openQuickCurrent"],
html.rc-readonly [onclick*="saveQuickCurrent"],
html.rc-readonly [onclick*="openUsdExchangeModal"],
html.rc-readonly [onclick*="submitUsdExchange"],
html.rc-readonly [onclick*="applyReconciliationAdjust"],
html.rc-readonly [onclick*="insertConvertedWeight"],
html.rc-readonly [onclick*="importBackup"],
html.rc-readonly [onclick*="resetTrades"],
html.rc-readonly [onclick*="_restoreAutoBackup"],
html.rc-readonly [onclick*="nativeForcePush"],
html.rc-readonly [onclick*="_quickSaveConfirm"],
html.rc-readonly [onclick*="clearShopInfo"],
html.rc-readonly [onclick*="saveKaratRatios"],
html.rc-readonly [onclick*="resetKaratRatios"],
html.rc-readonly [onclick*="dmGenerateCode"],
html.rc-readonly [onclick*="_debtModeChoose"],
html.rc-readonly [onclick*="convertTradeCashToGold"],
html.rc-readonly [onclick*="_confirmTradeSubmit"],
html.rc-readonly [onclick*="_addItemToBatch"],
html.rc-readonly [onclick*="_inlineSettleSubmit"] { opacity: 0.45; filter: saturate(0.5); cursor: not-allowed; }
html.rc-readonly #cpSettleBody, html.rc-readonly #capPageGold, html.rc-readonly #capPageCash, html.rc-readonly #capPageUsd, html.rc-readonly #shopInfoView input, html.rc-readonly #shopInfoView textarea { opacity: 0.6; cursor: not-allowed; }
html.rc-readonly .as-btn.ro-off { opacity: 0.45; cursor: not-allowed; }
/* ==== f71 read-only mode ==== */ /* end */

/* ==== f73 tablet price bar ==== */
@media (min-width: 601px) and (max-width: 900px) {
    #spotBar { padding-left: 80px !important; padding-right: 80px !important; gap: 6px !important; }
    #spotBar .spot-bar-sep { display: none !important; }
    #spotBar .spot-bar-main { gap: 3px !important; }
    #spotBar .spot-bar-price { font-size: 21px !important; }
    #spotBar .spot-bar-gram { font-size: 13px !important; }
    #spotBar .adj-input { width: 40px !important; padding: 0 3px !important; }
    #spotBar #spotExchRate { width: 56px !important; }
}
/* ==== f73 tablet price bar ==== */ /* end */

/* ==== f74 account in settings ==== */
#acsBox { margin-top: 16px; }
#acsBox .acs-old-title, #acsBox #dmAvatar { display: none !important; }
/* ==== f74 account in settings ==== */ /* end */

/* ==== f75 more into settings ==== */
#sidebar .sb-nav-item.nav-moved, .sb-nav-item.nav-moved { display: none !important; }
#swaRoot .swa-win > .settings-card.f75-plain { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
#swaRoot .f75-moved { display: block !important; }
#swaRoot #shopInfoView .glass-card { max-width: none !important; margin: 0 !important; }
#swaRoot #shopInfoView .card-title { display: none !important; }
#swaRoot #dataManageView .dm2-wrap { max-width: none; margin: 0; }
/* ==== f75 more into settings ==== */ /* end */

/* ==== f77 swipe back ==== */
html.f77-nofade .view-section { animation: none !important; }
html.f77-drag, html.f77-drag body { overscroll-behavior-x: none; }
/* ==== f77 swipe back ==== */ /* end */

/* ==== f78 glass themes ==== */
/* Glass Light = every White-theme fix (113 rules, copied at apply time), then its own tokens below */
/* from styles.css (99 rules) */
[data-theme="glassl"] .cp-transfer-btn:hover { color: #fff; }
[data-theme="glassl"] { --bg-color: #EEF3F8; --text-color: #1C2430; --glass-bg: #FAFCFE; --glass-border: rgba(47, 111, 181, 0.45); --card-border: rgba(47, 111, 181, 0.45);
    --shadow: 0 1px 2px rgba(28, 36, 48, 0.12), 0 6px 18px rgba(28, 36, 48, 0.10);
    --accent-gold: #8A5A00; --accent-green: #0E6B2C; --accent-red: #A32014; --accent-blue: #2F6FB5;
    --input-bg: #FFFFFF; --input-border: rgba(47, 111, 181, 0.55); --table-header: #DCE6F1; --table-border: rgba(47, 111, 181, 0.35);
    --highlight-bg: rgba(47, 111, 181, 0.10); --secondary-text: #5A6A7C; --card-bg: #FAFCFE; --grouped-bg: #D5E0EC;
    --sidebar-bg: #E6EEF7; --sidebar-border: rgba(47, 111, 181, 0.40);
    --hover-bg: rgba(47, 111, 181, 0.08); --hover-bg-subtle: rgba(47, 111, 181, 0.04); --scrollbar-thumb: rgba(47, 111, 181, 0.30); }
[data-theme="glassl"] th,
[data-theme="glassl"] .cp-sheet thead th { background: #2F6FB5; color: #F5F9FF; border-bottom-color: #2F6FB5; text-shadow: none; }
[data-theme="glassl"] .cp-sheet tbody td { text-shadow: none; }
[data-theme="glassl"] .glass-card,
[data-theme="glassl"] .client-card-premium,
[data-theme="glassl"] .modal-content,
[data-theme="glassl"] .pl-day-card,
[data-theme="glassl"] input[type="text"],
[data-theme="glassl"] input[type="password"],
[data-theme="glassl"] input[type="email"],
[data-theme="glassl"] input[type="tel"],
[data-theme="glassl"] input[type="number"],
[data-theme="glassl"] select,
[data-theme="glassl"] textarea { border-width: 1.5px !important; }
[data-theme="glassl"] .tb-icon-btn,
[data-theme="glassl"] ._cat-tab,
[data-theme="glassl"] .ccp-name,
[data-theme="glassl"] .btn-back { border-width: 1.5px !important; }
[data-theme="glassl"] .sb-nav-icon { background: rgba(255, 255, 255, 0.12); }
[data-theme="glassl"] .sb-nav-item.active .sb-nav-icon { background: rgba(47, 111, 181, 0.10); }
[data-theme="glassl"] ._cat-tab { border-color: rgba(47, 111, 181, 0.35); background: rgba(47, 111, 181, 0.05); color: #2F6FB5; }
[data-theme="glassl"] ._cat-tab:hover { background: rgba(47, 111, 181, 0.10); }
[data-theme="glassl"] ._cat-active { border-color: #2F6FB5; background: #2F6FB5; color: #F5F9FF; }
[data-theme="glassl"] .ccp-name,
[data-theme="glassl"] .pl-day-card { background: rgba(47, 111, 181, 0.05); }
[data-theme="glassl"] .settings-row:hover { background: rgba(47, 111, 181, 0.05); }
[data-theme="glassl"] .sr-icon { background: rgba(47, 111, 181, 0.08); }
[data-theme="glassl"] .adj-input { background: rgba(47, 111, 181, 0.06); color: #1C2430; }
[data-theme="glassl"] .ccp-aging-amber { color: #8A5A00; }
[data-theme="glassl"] .client-search-inline .mb-wipe-x { background: rgba(47, 111, 181, 0.10); }
[data-theme="glassl"] .cps-dir-btn.dir-lana { color: #0E6B2C; border-color: #0E6B2C; background: rgba(14, 107, 44, 0.10); }
[data-theme="glassl"] .cps-dir-btn.dir-alayna { color: #A32014; border-color: #A32014; background: rgba(163, 32, 20, 0.10); }
[data-theme="glassl"] .cp-settle-inline-row.dir-lana-row td { background: rgba(14, 107, 44, 0.10) !important; }
[data-theme="glassl"] .cp-settle-inline-row.dir-alayna-row td { background: rgba(163, 32, 20, 0.09) !important; }
[data-theme="glassl"] .tc-convert-btn.tc-revert-btn { border-color: rgba(47, 111, 181, 0.30); background: rgba(47, 111, 181, 0.05); }
[data-theme="glassl"] .tc-convert-btn.tc-revert-btn:hover { background: rgba(47, 111, 181, 0.10); }
[data-theme="glassl"] #sidebar { background: linear-gradient(180deg, #3D82CC, #245A99) !important; box-shadow: 0 2px 10px rgba(28, 36, 48, 0.28); }
[data-theme="glassl"] #sidebar::after { background: transparent; }
[data-theme="glassl"] .sb-nav-item { color: rgba(245, 249, 255, 0.84) !important; }
[data-theme="glassl"] .sb-nav-item:hover { color: #FFFFFF !important; background: rgba(255, 255, 255, 0.10) !important; }
[data-theme="glassl"] .sb-nav-item.active { background: rgba(245, 249, 255, 0.95) !important; color: #2F6FB5 !important; border-bottom-color: #F5F9FF !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
html[dir="rtl"][data-theme="glassl"] .sb-nav-item.active { border-right-color: #2F6FB5; }
[data-theme="glassl"] .sb-bal-cash,
[data-theme="glassl"] .sb-bal-debts .sb-bal-card-title { color: #F5F9FF; }
[data-theme="glassl"] .spot-bar-sep { background: rgba(47, 111, 181, 0.25); }
[data-theme="glassl"] .pl-sub-row { border-top-color: rgba(47, 111, 181, 0.20); }
[data-theme="glassl"] .calc-btn { border-color: rgba(47, 111, 181, 0.25); }
[data-theme="glassl"] .calc-btn-gray { background: rgba(47, 111, 181, 0.07); }
[data-theme="glassl"] .calc-btn:active { background: rgba(138, 90, 0, 0.16); }
[data-theme="glassl"] .fl-choice-btn { border-color: rgba(47, 111, 181, 0.30); }
[data-theme="glassl"] .fl-choice-btn:hover { background: rgba(47, 111, 181, 0.06); }
[data-theme="glassl"] .btn-back-fl { color: rgba(28, 36, 48, 0.60); }
[data-theme="glassl"] .receipt-action-btn.close { background: rgba(47, 111, 181, 0.08); color: #1C2430; }
[data-theme="glassl"] .cv-equiv { color: #0E6B2C; border-bottom-color: rgba(47, 111, 181, 0.25); }
[data-theme="glassl"] .avg-val.blue { color: #2F6FB5; }
[data-theme="glassl"] .btn-curr-toggle { background: rgba(47, 111, 181, 0.10); border-color: #2F6FB5; color: #2F6FB5; }
[data-theme="glassl"] .cap-drop-card[data-cap="cash"] .cap-drop-title,
[data-theme="glassl"] .cap-drop-card[data-cap="cash"] .cap-drop-total { color: #2F6FB5; }
[data-theme="glassl"] .btn-blue-full { background: linear-gradient(135deg, #3D82CC, #1E4C82); }
[data-theme="glassl"] .nt-label { background: rgba(47, 111, 181, 0.10); border-color: rgba(47, 111, 181, 0.35); color: #2F6FB5; }
[data-theme="glassl"] #newsTicker { border-inline-start-color: #2F6FB5; }
[data-theme="glassl"] .pending-item-chip { background: rgba(47, 111, 181, 0.07); border-color: rgba(47, 111, 181, 0.30); }
[data-theme="glassl"] .btn-add-item { background: rgba(14, 107, 44, 0.08); }
[data-theme="glassl"] .theme-preview.active { border-color: #2F6FB5; background: rgba(47, 111, 181, 0.08); }
[data-theme="glassl"] .karat-btn[data-karat="24"] { color: #8A6D00; }
[data-theme="glassl"] .karat-btn[data-karat="22"] { color: #96560A; }
[data-theme="glassl"] .karat-btn[data-karat="21"] { color: #8A5A00; }
[data-theme="glassl"] .karat-btn[data-karat="19"] { color: #0E6B2C; }
[data-theme="glassl"] .karat-btn[data-karat="18"] { color: #A82D68; }
[data-theme="glassl"] .karat-btn[data-karat="14"] { color: #5B3FBF; }
[data-theme="glassl"] .karat-btn[data-karat="12"] { color: #0A6E96; }
[data-theme="glassl"] .karat-btn[data-karat="9"] { color: #5A6A7C; }
[data-theme="glassl"] .karat-custom.active { color: #fff; box-shadow: 0 2px 8px rgba(138, 90, 0, 0.35); }
[data-theme="glassl"] .cp-sheet .cp-note-text { color: #1C2430; }
[data-theme="glassl"] .sb-qbtn { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.28) !important; color: #F5F9FF !important; }
[data-theme="glassl"] .sb-qbtn:hover { background: rgba(255, 255, 255, 0.20) !important; }
[data-theme="glassl"] .sb-collapse-btn { color: rgba(245, 249, 255, 0.80); border-bottom-color: rgba(255, 255, 255, 0.15); }
[data-theme="glassl"] .sb-collapse-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
[data-theme="glassl"] .sb-quick-btns.sb-quick-top { border-bottom-color: rgba(255, 255, 255, 0.15); }
[data-theme="glassl"] .sb-balance-footer { background: rgba(255, 255, 255, 0.08); border-top-color: rgba(255, 255, 255, 0.15); }
[data-theme="glassl"] .sb-balance-footer,
[data-theme="glassl"] .sb-balance-footer .sb-bal-label,
[data-theme="glassl"] .sb-balance-footer .sb-bal-val { color: #F5F9FF; }
[data-theme="glassl"] .ccp-name { color: #2F6FB5; border-color: rgba(47, 111, 181, 0.35); }
[data-theme="glassl"] .cp-title { color: #2F6FB5; }
[data-theme="glassl"] .tc-name { color: #2F6FB5; }
[data-theme="glassl"] .tc-name-btn { background: rgba(47, 111, 181, 0.08); border-color: rgba(47, 111, 181, 0.45); color: #2F6FB5; }
[data-theme="glassl"] .trade-client-name { color: #2F6FB5; }
[data-theme="glassl"] .name-cell { color: #2F6FB5; }
[data-theme="glassl"] .stmt-select-all { color: #2F6FB5; }
[data-theme="glassl"] .stmt-list { background: rgba(47, 111, 181, 0.04); }
[data-theme="glassl"] .btn-back { background: rgba(47, 111, 181, 0.08); border-color: rgba(47, 111, 181, 0.55); color: #2F6FB5; box-shadow: 0 2px 8px rgba(47, 111, 181, 0.12); }
[data-theme="glassl"] .btn-back:hover { background: rgba(47, 111, 181, 0.16); border-color: #2F6FB5; box-shadow: 0 3px 12px rgba(47, 111, 181, 0.25); }
[data-theme="glassl"] .btn-icon-gold { background: rgba(47, 111, 181, 0.08); border-color: rgba(47, 111, 181, 0.40); color: #2F6FB5; }
[data-theme="glassl"] .btn-eod { background: linear-gradient(135deg, #3D82CC, #245A99); color: #F5F9FF; box-shadow: 0 4px 14px rgba(47, 111, 181, 0.30); }
[data-theme="glassl"] .btn-recalc { background: rgba(47, 111, 181, 0.08); color: #2F6FB5; border-color: rgba(47, 111, 181, 0.35); }
[data-theme="glassl"] .btn-recalc:hover { background: rgba(47, 111, 181, 0.15); }
[data-theme="glassl"] .btn-gold-full { background: #2F6FB5; color: #F5F9FF; }
[data-theme="glassl"] .card-title { color: #2F6FB5; }
[data-theme="glassl"] .section-title { color: #2F6FB5; opacity: 1; }
[data-theme="glassl"] .modal-content h3 { color: #2F6FB5; }
[data-theme="glassl"] .eod-date-lbl { color: #2F6FB5; }
[data-theme="glassl"] .eod-month-name { color: #2F6FB5; }
[data-theme="glassl"] .eod-month-head { border-inline-start: 4px solid #2F6FB5; }
[data-theme="glassl"] .cp-bal-label { color: #2F6FB5; }
[data-theme="glassl"] .pl-big.gold { color: #2F6FB5; }
[data-theme="glassl"] .trade-time-chip { background: rgba(47, 111, 181, 0.08); color: #2F6FB5; }
[data-theme="glassl"] .spot-bar-gram.spot-bar-iqd { color: #2F6FB5 !important; }
[data-theme="glassl"] .settings-ico { filter: none; }
[data-theme="glassl"] .settings-title { color: #2F6FB5; }
html:not(.platform-web):not(.platform-native)[data-theme="glassl"] .global-debt-card { --debt-green: #0B9A3E; --debt-red: #D8261A; --debt-gold: #B87600; }
[data-theme="glassl"] { --swa-sep: rgba(47, 111, 181, 0.22); }
[data-theme="glassl"] #swaRoot .swa-win .btn-green-full { color: #FFFFFF; }
html.mdk-bar[data-theme="glassl"] { --mdk-plate-top: #3D82CC; --mdk-plate-bot: #245A99;
    --mdk-rim-a0: 0.34; --mdk-rim-a1: 0.20; --mdk-rim-a2: 0.08; --mdk-rim-a3: 0.03;
    --mdk-plate-shadow: 0 10px 22px -8px rgba(28, 36, 48, 0.45), 0 2px 6px rgba(28, 36, 48, 0.20);
    --mdk-bead-hi: #FFFFFF; --mdk-bead: #F5F9FF;
    --mdk-bead-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(47, 111, 181, 0.40), 0 3px 8px rgba(28, 36, 48, 0.28);
    --mdk-ink: #2F6FB5; --mdk-icon: rgba(245, 249, 255, 0.80); --mdk-label: #F5F9FF; }
@media (min-width: 601px) {
html.mds-nav[data-theme="glassl"] { --mds-floor: #D3D9DE;
    --mds-bead-hi: #FFFFFF; --mds-bead: #F5F9FF;
    --mds-bead-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(47, 111, 181, 0.40), 0 3px 8px rgba(28, 36, 48, 0.28);
    --mds-ink: #2F6FB5; --mds-label: #F5F9FF; --mds-item: rgba(245, 249, 255, 0.84); }
}
[data-theme="glassl"] { --ro-bg: rgba(138, 90, 0, 0.08); --ro-border: rgba(138, 90, 0, 0.40); --ro-ink: #7A4E00; --ro-ico-bg: rgba(138, 90, 0, 0.12); }
/* from mobile.css (14 rules) */
[data-theme="glassl"] .ios-bottom-nav { background: linear-gradient(180deg, #3D82CC, #245A99) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important; }
[data-theme="glassl"] .ios-bottom-nav .ios-tab,
[data-theme="glassl"] .ios-bottom-nav .sb-nav-item.ios-tab { color: rgba(245, 249, 255, 0.72) !important; }
[data-theme="glassl"] .ios-bottom-nav .ios-tab.active,
[data-theme="glassl"] .ios-bottom-nav .sb-nav-item.ios-tab.active { color: #FFFFFF !important; }
[data-theme="glassl"] #spotBar { border-bottom: 0.5px solid rgba(47, 111, 181, 0.30) !important; }
[data-theme="glassl"] #sidebar { background: rgba(36, 90, 153, 0.97) !important;
    border-left: 0.5px solid rgba(255, 255, 255, 0.16) !important; }
[data-theme="glassl"] #sidebar .sb-nav-item { color: rgba(245, 249, 255, 0.86) !important; }
[data-theme="glassl"] #sidebar .sb-nav-item:hover { color: #FFFFFF !important; background: rgba(255, 255, 255, 0.10) !important; }
[data-theme="glassl"] #sidebar .sb-nav-item.active { background: rgba(245, 249, 255, 0.95) !important; color: #2F6FB5 !important; box-shadow: none; }
[data-theme="glassl"] #sidebar .sb-qbtn { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.28) !important; color: #F5F9FF !important; }
[data-theme="glassl"] #sidebar .sb-balance-footer,
[data-theme="glassl"] #sidebar .sb-balance-footer .sb-bal-label,
[data-theme="glassl"] #sidebar .sb-balance-footer .sb-bal-val { color: #F5F9FF !important; }
[data-theme="glassl"] .client-toolbar ._cat-tab[data-cat="all"] { border-color: rgba(47, 111, 181, 0.40); color: #2F6FB5; }
[data-theme="glassl"] .client-toolbar ._cat-tab[data-cat="usd"] { border-color: rgba(138, 90, 0, 0.45); color: #8A5A00; }
[data-theme="glassl"] .client-toolbar ._cat-tab[data-cat="all"]._cat-active { background: rgba(47, 111, 181, 0.14); color: #2F6FB5; }
[data-theme="glassl"] .client-toolbar ._cat-tab[data-cat="usd"]._cat-active { background: rgba(138, 90, 0, 0.14); color: #8A5A00; }

/* ── tokens ── */
[data-theme="glassd"] {
    --bg-color: #0e0f12; --text-color: #f2f4f7; --secondary-text: #8f9ca1;
    --glass-bg: rgba(20, 22, 27, 0.56); --glass-border: rgba(255, 255, 255, 0.11); --card-border: rgba(255, 255, 255, 0.12);
    --card-bg: rgba(20, 22, 27, 0.52); --grouped-bg: rgba(255, 255, 255, 0.06);
    --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 20px 40px -24px rgba(0, 0, 0, 0.85);
    --accent-gold: #f3c76a; --accent-green: #3fe29b; --accent-red: #ff7966; --accent-blue: #78b6ff;
    --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.12);
    --table-header: rgba(255, 255, 255, 0.07); --table-border: rgba(255, 255, 255, 0.10);
    --highlight-bg: rgba(163, 173, 255, 0.14);
    --sidebar-bg: rgba(14, 15, 18, 0.55); --sidebar-border: rgba(255, 255, 255, 0.08);
    --hover-bg: rgba(255, 255, 255, 0.10); --hover-bg-subtle: rgba(255, 255, 255, 0.05); --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --swa-sep: rgba(255, 255, 255, 0.10);
    --jw-pill: #e8f0fb; --jw-on-pill: #0e0f12; --jw-chip: rgba(232, 240, 251, 0.08); --jw-chip-edge: rgba(232, 240, 251, 0.22);
    --jw-fx-o: .22; --jw-fx1: #d9dde3; --jw-fx2: #b9bec6; --jw-fx3: #e6e9ed; --jw-gold-light: rgb(232 178 76); --jw-gold-o: .26;
    --jw-scene:
        radial-gradient(70% 22% at 50% 62%, rgb(210 215 222 / .16), transparent 70%),
        radial-gradient(60% 18% at 20% 78%, rgb(210 215 222 / .12), transparent 70%),
        linear-gradient(180deg, transparent 52%, rgb(14 15 18 / .7) 72%, #0e0f12 92%),
        linear-gradient(118deg, transparent 49.7%, rgb(255 255 255 / .09) 50%, transparent 50.3%),
        linear-gradient(64deg, transparent 49.7%, rgb(255 255 255 / .06) 50%, transparent 50.3%),
        conic-gradient(from 152deg at 56% 20%, transparent 0 20%, #7d838c 20% 25%, #3d4148 25% 31%, #a2a8b0 31% 34%, #26292e 34% 45%, transparent 45%),
        conic-gradient(from 146deg at 14% 44%, transparent 0 23%, #5a5f67 23% 30%, #2c2f34 30% 41%, transparent 41%),
        conic-gradient(from 160deg at 90% 38%, transparent 0 21%, #4e535b 21% 29%, #6f757d 29% 33%, #24272b 33% 44%, transparent 44%),
        radial-gradient(90% 40% at 50% 0%, rgb(190 196 204 / .55), transparent 70%),
        linear-gradient(180deg, #6c7178 0%, #3a3e44 34%, #1a1c20 64%, #0e0f12 100%);
}
[data-theme="glassl"] {
    --bg-color: #eceff3; --text-color: #121722; --secondary-text: #56636b;
    --glass-bg: rgba(255, 255, 255, 0.58); --glass-border: rgba(20, 30, 50, 0.12); --card-border: rgba(20, 30, 50, 0.12);
    --card-bg: rgba(255, 255, 255, 0.55); --grouped-bg: rgba(255, 255, 255, 0.62);
    --shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), inset 0 1px 0 #fff, 0 20px 40px -24px rgba(30, 40, 60, 0.3);
    --accent-gold: #8f5d10; --accent-green: #0a7f4e; --accent-red: #c4321f; --accent-blue: #1f5fe0;
    --input-bg: rgba(255, 255, 255, 0.62); --input-border: rgba(20, 30, 50, 0.14);
    --table-header: rgba(255, 255, 255, 0.66); --table-border: rgba(20, 30, 50, 0.10);
    --highlight-bg: rgba(85, 96, 230, 0.12);
    --sidebar-bg: rgba(255, 255, 255, 0.5); --sidebar-border: rgba(20, 30, 50, 0.10);
    --hover-bg: rgba(20, 30, 50, 0.06); --hover-bg-subtle: rgba(20, 30, 50, 0.03); --scrollbar-thumb: rgba(20, 30, 50, 0.14);
    --swa-sep: rgba(20, 30, 50, 0.10);
    --jw-pill: #121722; --jw-on-pill: #ffffff; --jw-chip: rgba(255, 255, 255, 0.6); --jw-chip-edge: rgba(20, 30, 50, 0.12);
    --jw-fx-o: .35; --jw-fx1: #ffffff; --jw-fx2: #dfe6ef; --jw-fx3: #ffffff; --jw-gold-light: rgb(245 186 70); --jw-gold-o: .42;
    --jw-scene:
        radial-gradient(70% 22% at 50% 62%, rgb(255 255 255 / .55), transparent 70%),
        radial-gradient(60% 18% at 20% 78%, rgb(255 255 255 / .5), transparent 70%),
        linear-gradient(180deg, transparent 52%, rgb(236 239 243 / .75) 72%, #eceff3 92%),
        linear-gradient(118deg, transparent 49.7%, rgb(255 255 255 / .55) 50%, transparent 50.3%),
        linear-gradient(64deg, transparent 49.7%, rgb(60 70 90 / .06) 50%, transparent 50.3%),
        conic-gradient(from 152deg at 56% 20%, transparent 0 20%, #b9c0ca 20% 25%, #e4e8ed 25% 31%, #98a1ad 31% 34%, #d3d8df 34% 45%, transparent 45%),
        conic-gradient(from 146deg at 14% 44%, transparent 0 23%, #b3bac4 23% 30%, #dde1e7 30% 41%, transparent 41%),
        conic-gradient(from 160deg at 90% 38%, transparent 0 21%, #c6ccd4 21% 29%, #a4acb7 29% 33%, #e2e5ea 33% 44%, transparent 44%),
        radial-gradient(90% 40% at 50% 0%, rgb(255 255 255 / .85), transparent 70%),
        linear-gradient(180deg, #d9dee5 0%, #c9cfd8 34%, #e5e8ed 64%, #eceff3 100%);
}
/* ── the scene behind everything: html carries the page colour, body goes clear so the layer shows ── */
html[data-theme="glassd"], html[data-theme="glassl"] { background: var(--bg-color) !important; }
html[data-theme="glassd"] body, html[data-theme="glassl"] body { background: transparent !important; }
#jwGlassFx { display: none; }
html[data-theme="glassd"] #jwGlassFx, html[data-theme="glassl"] #jwGlassFx { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#jwGlassFx::before { content: ""; position: absolute; inset: 0 0 auto; height: min(100%, 900px); background: var(--jw-scene); filter: blur(10px); transform: scale(1.04); }
#jwGlassFx span { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(46px); opacity: var(--jw-fx-o); animation: jwDrift 22s ease-in-out infinite alternate; }
#jwGlassFx span:nth-child(1) { background: radial-gradient(circle, var(--jw-fx1), transparent 68%); top: -40px; left: 30%; }
#jwGlassFx span:nth-child(2) { background: radial-gradient(circle, var(--jw-fx2), transparent 68%); top: 40%; right: 18%; animation-duration: 27s; animation-delay: -9s; }
#jwGlassFx span:nth-child(3) { background: radial-gradient(circle, var(--jw-fx3), transparent 68%); bottom: -80px; left: 22%; animation-duration: 31s; animation-delay: -15s; }
#jwGlassFx i { position: absolute; left: -25%; top: 120px; width: 150%; height: 260px; transform: rotate(-16deg); opacity: var(--jw-gold-o);
    background: radial-gradient(50% 50% at 50% 50%, var(--jw-gold-light), transparent 72%), radial-gradient(18% 40% at 62% 50%, rgb(255 236 190 / .9), transparent 70%);
    filter: blur(34px); animation: jwBeam 19s ease-in-out infinite alternate; }
@keyframes jwBeam { from { translate: -60px -20px; } to { translate: 60px 60px; } }
@keyframes jwDrift { 0% { translate: 0 0; scale: 1; } 50% { translate: 80px 60px; scale: 1.12; } 100% { translate: -70px 120px; scale: .92; } }
html.jw-android #jwGlassFx span, html.jw-android #jwGlassFx i { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #jwGlassFx span, #jwGlassFx i { animation: none !important; } }
/* ── frosted glass (not on Android: too heavy there; the surfaces stay translucent) ── */
html[data-theme="glassd"]:not(.jw-android) .glass-card, html[data-theme="glassl"]:not(.jw-android) .glass-card,
html[data-theme="glassd"]:not(.jw-android) #swaRoot .swa-group, html[data-theme="glassl"]:not(.jw-android) #swaRoot .swa-group,
html[data-theme="glassd"]:not(.jw-android) #swaRoot .swa-profile, html[data-theme="glassl"]:not(.jw-android) #swaRoot .swa-profile,
html[data-theme="glassd"]:not(.jw-android) #swaRoot .swa-win > .settings-card:not(.f75-plain), html[data-theme="glassl"]:not(.jw-android) #swaRoot .swa-win > .settings-card:not(.f75-plain),
html[data-theme="glassd"]:not(.jw-android) #spotBar, html[data-theme="glassl"]:not(.jw-android) #spotBar,
html[data-theme="glassd"]:not(.jw-android) #sidebar, html[data-theme="glassl"]:not(.jw-android) #sidebar {
    -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45);
}
html[data-theme="glassd"] #spotBar, html[data-theme="glassl"] #spotBar { background: var(--glass-bg) !important; }
/* ── the pill accent (reference: END OF DAY, the selected karat, the price chips) ── */
html[data-theme="glassd"] #eodBtn, html[data-theme="glassl"] #eodBtn { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border-color: transparent !important; box-shadow: none !important; }
html[data-theme="glassd"] .karat-btn.active, html[data-theme="glassl"] .karat-btn.active { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border-color: transparent !important; }
html[data-theme="glassd"] #spotBar .spot-bar-gram, html[data-theme="glassl"] #spotBar .spot-bar-gram { background: var(--jw-chip) !important; border-color: var(--jw-chip-edge) !important; }
/* ── Glass Light tab bar (phone) and top menu (tablet): white glass with the near-black pill bead, not White's blue ── */
html.mdk-bar[data-theme="glassl"] {
    --mdk-plate-top: rgba(255, 255, 255, 0.92); --mdk-plate-bot: #e4e8ee;
    --mdk-rim: #FFFFFF; --mdk-rim-a0: 0.9; --mdk-rim-a1: 0.5; --mdk-rim-a2: 0.18; --mdk-rim-a3: 0.06;
    --mdk-plate-shadow: 0 14px 28px -12px rgba(30, 40, 60, 0.35), 0 2px 6px rgba(30, 40, 60, 0.12);
    --mdk-bead-hi: #2a3240; --mdk-bead: #121722;
    --mdk-bead-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 4px 10px rgba(18, 23, 34, 0.35);
    --mdk-ink: #FFFFFF; --mdk-icon: rgba(18, 23, 34, 0.55); --mdk-label: #121722;
}
html.mds-nav[data-theme="glassl"] {
    --mds-floor: rgba(255, 255, 255, 0.6);
    --mds-bead-hi: #2a3240; --mds-bead: #121722;
    --mds-bead-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 4px 10px rgba(18, 23, 34, 0.35);
    --mds-ink: #FFFFFF; --mds-label: #121722; --mds-item: rgba(18, 23, 34, 0.72);
}
/* ── Glass Light menu strip (PC sidebar / tablet top menu / phone More sheet): White paints it blue — glass + ink instead ── */
[data-theme="glassl"] #sidebar { background: var(--sidebar-bg) !important; box-shadow: 0 2px 12px rgba(30, 40, 60, 0.12); }
[data-theme="glassl"] .sb-nav-item, [data-theme="glassl"] #sidebar .sb-nav-item { color: rgba(18, 23, 34, 0.74) !important; }
[data-theme="glassl"] .sb-nav-item:hover, [data-theme="glassl"] #sidebar .sb-nav-item:hover { color: #121722 !important; background: rgba(18, 23, 34, 0.06) !important; }
[data-theme="glassl"] .sb-nav-item.active, [data-theme="glassl"] #sidebar .sb-nav-item.active { background: #121722 !important; color: #FFFFFF !important; border-bottom-color: #121722 !important; box-shadow: none; }
html[dir="rtl"][data-theme="glassl"] .sb-nav-item.active { border-right-color: #121722; }
[data-theme="glassl"] .sb-nav-icon { background: rgba(18, 23, 34, 0.05); }
[data-theme="glassl"] .sb-nav-item.active .sb-nav-icon { background: rgba(255, 255, 255, 0.14); }
[data-theme="glassl"] #sidebar .sb-qbtn { background: rgba(18, 23, 34, 0.05) !important; border-color: rgba(18, 23, 34, 0.12) !important; color: #121722 !important; }
[data-theme="glassl"] #sidebar .sb-balance-footer, [data-theme="glassl"] #sidebar .sb-balance-footer .sb-bal-label, [data-theme="glassl"] #sidebar .sb-balance-footer .sb-bal-val { color: #121722 !important; }
/* ── the two miniatures in Settings → App theme ── */
.tp-glassd { background: linear-gradient(180deg, #4a4f56 0%, #1a1c20 70%, #0e0f12 100%); color: #f2f4f7; border-color: rgba(255, 255, 255, 0.18); }
.tp-glassd .tp-bar { background: rgba(255, 255, 255, 0.12); color: #e8f0fb; }
.tp-glassd .tp-line { background: rgba(255, 255, 255, 0.16); }
.tp-glassd .tp-pill { background: #e8f0fb; }
.tp-glassl { background: linear-gradient(180deg, #d1d7df 0%, #e5e8ed 60%, #eceff3 100%); color: #121722; border-color: rgba(20, 30, 50, 0.14); }
.tp-glassl .tp-bar { background: rgba(255, 255, 255, 0.7); color: #121722; }
.tp-glassl .tp-line { background: rgba(20, 30, 50, 0.12); }
.tp-glassl .tp-pill { background: #121722; }
/* ==== f78 glass themes ==== */ /* end */

/* ==== f79 glass motion ==== */
@media (prefers-reduced-motion: no-preference) {
html[data-theme="glassd"] #buyBtn,
html[data-theme="glassl"] #buyBtn,
html[data-theme="glassd"] #sellBtn,
html[data-theme="glassl"] #sellBtn,
html[data-theme="glassd"] #eodBtn,
html[data-theme="glassl"] #eodBtn { transition: transform .16s cubic-bezier(.65, 0, .35, 1), filter .25s cubic-bezier(.65, 0, .35, 1), background-color .3s cubic-bezier(.65, 0, .35, 1) !important; }
html[data-theme="glassd"] #buyBtn:active,
html[data-theme="glassl"] #buyBtn:active,
html[data-theme="glassd"] #sellBtn:active,
html[data-theme="glassl"] #sellBtn:active,
html[data-theme="glassd"] #eodBtn:active,
html[data-theme="glassl"] #eodBtn:active { transform: scale(.97) !important; filter: brightness(.88) saturate(1.05) !important; }
html[data-theme="glassd"] .btn-pull-spot,
html[data-theme="glassl"] .btn-pull-spot,
html[data-theme="glassd"] .btn-curr-toggle,
html[data-theme="glassl"] .btn-curr-toggle,
html[data-theme="glassd"] .btn-undo,
html[data-theme="glassl"] .btn-undo,
html[data-theme="glassd"] .dots-btn,
html[data-theme="glassl"] .dots-btn,
html[data-theme="glassd"] .tc-new-btn,
html[data-theme="glassl"] .tc-new-btn,
html[data-theme="glassd"] #spotBar .tb-key,
html[data-theme="glassl"] #spotBar .tb-key { transition: transform .16s cubic-bezier(.65, 0, .35, 1), background-color .3s cubic-bezier(.65, 0, .35, 1), color .3s cubic-bezier(.65, 0, .35, 1), border-color .3s cubic-bezier(.65, 0, .35, 1) !important; }
html[data-theme="glassd"] .btn-pull-spot:active,
html[data-theme="glassl"] .btn-pull-spot:active,
html[data-theme="glassd"] .btn-curr-toggle:active,
html[data-theme="glassl"] .btn-curr-toggle:active,
html[data-theme="glassd"] .btn-undo:active,
html[data-theme="glassl"] .btn-undo:active,
html[data-theme="glassd"] .dots-btn:active,
html[data-theme="glassl"] .dots-btn:active,
html[data-theme="glassd"] .tc-new-btn:active,
html[data-theme="glassl"] .tc-new-btn:active,
html[data-theme="glassd"] #spotBar .tb-key:active,
html[data-theme="glassl"] #spotBar .tb-key:active { transform: scale(.94) !important; background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border-color: transparent !important; }
html[data-theme="glassd"] .modal-content button,
html[data-theme="glassl"] .modal-content button,
html[data-theme="glassd"] .dm2-btn,
html[data-theme="glassl"] .dm2-btn,
html[data-theme="glassd"] .del-zone-btn,
html[data-theme="glassl"] .del-zone-btn,
html[data-theme="glassd"] #swaRoot .swa-win button,
html[data-theme="glassl"] #swaRoot .swa-win button,
html[data-theme="glassd"] .glass-card button:not(.karat-btn),
html[data-theme="glassl"] .glass-card button:not(.karat-btn) { transition: transform .16s cubic-bezier(.65, 0, .35, 1), filter .25s cubic-bezier(.65, 0, .35, 1), background-color .3s cubic-bezier(.65, 0, .35, 1), color .3s cubic-bezier(.65, 0, .35, 1) !important; }
html[data-theme="glassd"] .modal-content button:active,
html[data-theme="glassl"] .modal-content button:active,
html[data-theme="glassd"] .dm2-btn:active,
html[data-theme="glassl"] .dm2-btn:active,
html[data-theme="glassd"] .del-zone-btn:active,
html[data-theme="glassl"] .del-zone-btn:active,
html[data-theme="glassd"] #swaRoot .swa-win button:active,
html[data-theme="glassl"] #swaRoot .swa-win button:active,
html[data-theme="glassd"] .glass-card button:not(.karat-btn):active,
html[data-theme="glassl"] .glass-card button:not(.karat-btn):active { transform: scale(.97) !important; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
html[data-theme="glassd"] #buyBtn:hover,
html[data-theme="glassl"] #buyBtn:hover,
html[data-theme="glassd"] #sellBtn:hover,
html[data-theme="glassl"] #sellBtn:hover,
html[data-theme="glassd"] #eodBtn:hover,
html[data-theme="glassl"] #eodBtn:hover { filter: brightness(.9) saturate(1.05); }
html[data-theme="glassd"] .btn-pull-spot:hover,
html[data-theme="glassl"] .btn-pull-spot:hover,
html[data-theme="glassd"] .btn-curr-toggle:hover,
html[data-theme="glassl"] .btn-curr-toggle:hover,
html[data-theme="glassd"] .btn-undo:hover,
html[data-theme="glassl"] .btn-undo:hover,
html[data-theme="glassd"] .dots-btn:hover,
html[data-theme="glassl"] .dots-btn:hover,
html[data-theme="glassd"] .tc-new-btn:hover,
html[data-theme="glassl"] .tc-new-btn:hover,
html[data-theme="glassd"] #spotBar .tb-key:hover,
html[data-theme="glassl"] #spotBar .tb-key:hover { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border-color: transparent !important; }
}
/* the gliding karat pill (JS adds html.jw-kg only in the glass themes) */
.jw-kglide { display: none; }
html.jw-kg .karat-col { position: relative; }
html.jw-kg .jw-kglide { display: block; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; background: var(--jw-pill); border-radius: 8px;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1), width .35s cubic-bezier(.65, 0, .35, 1), height .35s cubic-bezier(.65, 0, .35, 1), opacity .2s; }
html.jw-kg .karat-col .karat-btn { position: relative; z-index: 1; }
html.jw-kg[data-theme] .karat-col .karat-btn.active:not(.karat-more) { background: transparent !important; }
@media (prefers-reduced-motion: reduce) { html.jw-kg .jw-kglide { transition: none !important; } }
/* ==== f79 glass motion ==== */ /* end */

/* ==== f80 glass rail ==== */
.jw-rglide { display: none; }
html.jw-rail #appBody { flex-direction: row !important; }
html.jw-rail #sidebar {
    width: 96px !important; min-width: 96px !important; max-width: 96px !important; height: auto !important; max-height: none !important;
    flex-direction: column !important; align-items: stretch !important; flex-shrink: 0;
    margin: 12px 0 12px 0; margin-inline-start: 12px; border-radius: 30px; border: 0 !important; overflow: hidden !important;
    background: var(--sidebar-bg) !important; box-shadow: var(--shadow) !important; z-index: 6;
}
html.jw-rail #sidebar::after { display: none !important; }
html.jw-rail #sidebar > .mds-back, html.jw-rail #sidebar > .mds-front, html.jw-rail .sb-collapse-btn, html.jw-rail .sb-balance-footer,
html.jw-rail .sb-quick-btns, html.jw-rail .sb-quick-top, html.jw-rail #sbNavStrip .sb-nav-divider { display: none !important; }
html.jw-rail #sbNavStrip {
    flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important;
    overflow-y: auto !important; overflow-x: hidden !important; padding: 14px 0 !important; gap: 0 !important;
    cursor: default !important; position: relative !important; scrollbar-width: none;
}
html.jw-rail #sbNavStrip .sb-nav-item, html.jw-rail #sidebar #sbNavStrip .sb-nav-item.active, html.jw-rail #sidebar #sbNavStrip .sb-nav-item.mds-on {
    width: 100% !important; height: var(--jw-rail-row, 84px) !important; min-height: 0 !important; flex: 0 0 auto !important;
    display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important;
    padding: calc((var(--jw-rail-row, 84px) - 66px) / 2) 4px 0 !important; gap: 6px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--secondary-text) !important; font-weight: 600 !important; position: relative; z-index: 1; transform: none !important; opacity: 1 !important;
}
html.jw-rail #sidebar #sbNavStrip .sb-nav-item.active, html.jw-rail #sidebar #sbNavStrip .sb-nav-item.active.mds-on { color: var(--text-color) !important; font-weight: 700 !important; }
html.jw-rail #sbNavStrip .sb-nav-item::after { display: none !important; }
html.jw-rail #sidebar #sbNavStrip .sb-nav-item.nav-moved { display: none !important; }   /* f75: moved into Settings — stays out of the rail too */
html.jw-rail #sbNavStrip .sb-nav-item .sb-nav-icon, html.jw-rail #sidebar #sbNavStrip .sb-nav-item.active .sb-nav-icon, html.jw-rail #sidebar #sbNavStrip .sb-nav-item.mds-on .sb-nav-icon {
    width: 42px !important; height: 42px !important; min-width: 42px; display: flex !important; align-items: center; justify-content: center;
    border-radius: 50%; background: transparent !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
    filter: none !important; transition: color .3s cubic-bezier(.65, 0, .35, 1) !important;
}
html.jw-rail #sidebar #sbNavStrip .sb-nav-item.active .sb-nav-icon { color: var(--jw-on-pill) !important; }
html.jw-rail #sbNavStrip .sb-nav-label { display: block !important; font-size: 11px !important; line-height: 1.2 !important; text-align: center; white-space: normal !important;
    overflow: hidden; max-height: 2.4em; padding: 0 2px; }
html.jw-rail #mainContent { padding-top: 20px !important; }
html.jw-rail .jw-rglide { display: block; position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; z-index: 0; pointer-events: none;
    background: var(--jw-pill); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .2s; }
@media (prefers-reduced-motion: reduce) { html.jw-rail .jw-rglide { transition: none !important; } }
/* ==== f80 glass rail ==== */ /* end */

/* ==== f81 glass fidelity ==== */
/* ── tokens shared by both glass themes ── */
html[data-theme="glassd"] { --jw-edge: rgba(255, 255, 255, 0.10); --jw-field: rgba(255, 255, 255, 0.05); --jw-strong: rgba(255, 255, 255, 0.06);
    --jw-sel-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.08), inset -1px -2px 3px rgba(0, 0, 0, 0.3), 0 4px 10px -6px rgba(0, 0, 0, 0.6);
    --jw-rim: inset 0 0 0 1.5px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -24px rgba(0, 0, 0, 0.85);
    --jw-btn-buy: #19b277; --jw-btn-sell: #ee4f3b; --jw-hl: #a3adff; --jw-focus: rgba(232, 240, 251, 0.22); --jw-glass: rgba(18, 20, 24, 0.42); }
html[data-theme="glassl"] { --jw-edge: rgba(255, 255, 255, 0.9); --jw-field: rgba(255, 255, 255, 0.55); --jw-strong: rgba(255, 255, 255, 0.6);
    --jw-sel-shadow: inset 1px 1px 1px #fff, inset -1px -2px 3px rgba(20, 30, 50, 0.12), 0 4px 10px -6px rgba(20, 30, 50, 0.3);
    --jw-rim: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), inset 0 1px 0 #fff, 0 20px 40px -24px rgba(30, 40, 60, 0.3);
    --jw-btn-buy: #14b873; --jw-btn-sell: #f0503c; --jw-hl: #5560e6; --jw-focus: rgba(31, 107, 255, 0.22); --jw-glass: rgba(255, 255, 255, 0.46); }
html.jw-android[data-theme="glassd"] { --jw-glass: rgba(20, 22, 27, 0.78); }
html.jw-android[data-theme="glassl"] { --jw-glass: rgba(255, 255, 255, 0.78); }

/* ── fonts ── */
html[data-theme="glassd"] body,
html[data-theme="glassl"] body,
html[data-theme="glassd"] input,
html[data-theme="glassl"] input,
html[data-theme="glassd"] button,
html[data-theme="glassl"] button,
html[data-theme="glassd"] select,
html[data-theme="glassl"] select,
html[data-theme="glassd"] textarea,
html[data-theme="glassl"] textarea { font-family: "IBM Plex Sans Arabic", -apple-system, system-ui, "Segoe UI", sans-serif; }
html[data-theme="glassd"] .spot-bar-price,
html[data-theme="glassl"] .spot-bar-price,
html[data-theme="glassd"] .spot-bar-gram,
html[data-theme="glassl"] .spot-bar-gram,
html[data-theme="glassd"] .act-value,
html[data-theme="glassl"] .act-value,
html[data-theme="glassd"] .act-iqd,
html[data-theme="glassl"] .act-iqd,
html[data-theme="glassd"] #buyBtn,
html[data-theme="glassl"] #buyBtn,
html[data-theme="glassd"] #sellBtn,
html[data-theme="glassl"] #sellBtn,
html[data-theme="glassd"] #eodBtn,
html[data-theme="glassl"] #eodBtn,
html[data-theme="glassd"] .karat-btn,
html[data-theme="glassl"] .karat-btn,
html[data-theme="glassd"] .avg-val,
html[data-theme="glassl"] .avg-val,
html[data-theme="glassd"] .profit-row,
html[data-theme="glassl"] .profit-row,
html[data-theme="glassd"] .profit-vals,
html[data-theme="glassl"] .profit-vals,
html[data-theme="glassd"] .cv-row,
html[data-theme="glassl"] .cv-row,
html[data-theme="glassd"] .tc-val,
html[data-theme="glassl"] .tc-val,
html[data-theme="glassd"] .section-title,
html[data-theme="glassl"] .section-title,
html[data-theme="glassd"] .btn-curr-toggle,
html[data-theme="glassl"] .btn-curr-toggle,
html[data-theme="glassd"] #swaRoot .swa-title,
html[data-theme="glassl"] #swaRoot .swa-title,
html[data-theme="glassd"] .trade-card .tc-name,
html[data-theme="glassl"] .trade-card .tc-name,
html[data-theme="glassd"] .client-card-premium .cc-name,
html[data-theme="glassl"] .client-card-premium .cc-name { font-family: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif !important; }

/* ── surfaces: glass with a thin rim ── */
html[data-theme="glassd"] .glass-card,
html[data-theme="glassl"] .glass-card,
html[data-theme="glassd"] .trade-card,
html[data-theme="glassl"] .trade-card,
html[data-theme="glassd"] .act-card,
html[data-theme="glassl"] .act-card,
html[data-theme="glassd"] .global-debt-card,
html[data-theme="glassl"] .global-debt-card,
html[data-theme="glassd"] .client-card-premium,
html[data-theme="glassl"] .client-card-premium { box-shadow: var(--jw-rim) !important; border: 0 !important; }
html[data-theme="glassd"]:not(.jw-android) .glass-card,
html[data-theme="glassl"]:not(.jw-android) .glass-card,
html[data-theme="glassd"]:not(.jw-android) .trade-card,
html[data-theme="glassl"]:not(.jw-android) .trade-card,
html[data-theme="glassd"]:not(.jw-android) .act-card,
html[data-theme="glassl"]:not(.jw-android) .act-card,
html[data-theme="glassd"]:not(.jw-android) .global-debt-card,
html[data-theme="glassl"]:not(.jw-android) .global-debt-card,
html[data-theme="glassd"]:not(.jw-android) .client-card-premium,
html[data-theme="glassl"]:not(.jw-android) .client-card-premium { -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); }
html[data-theme="glassd"] .glass-card,
html[data-theme="glassl"] .glass-card { background: var(--jw-glass) !important; border-radius: 24px !important; }

/* ── top bar ── */
html[data-theme="glassd"] #spotBar,
html[data-theme="glassl"] #spotBar { background: var(--jw-glass) !important; box-shadow: var(--jw-rim) !important; border: 0 !important; }
@media (min-width: 901px) { html[data-theme="glassd"] #spotBar,
html[data-theme="glassl"] #spotBar { margin: 8px 8px 0; border-radius: 28px; padding-top: 10px !important; padding-bottom: 10px !important; } }
@media (min-width: 601px) and (max-width: 900px) { html[data-theme="glassd"] #spotBar,
html[data-theme="glassl"] #spotBar { border-radius: 0 0 24px 24px; } }
@media (min-width: 601px) and (max-width: 900px) { html[data-theme="glassd"] #spotBar .spot-bar-gram,
html[data-theme="glassl"] #spotBar .spot-bar-gram { font-size: 12px !important; } html[data-theme="glassd"] .spot-bar-price,
html[data-theme="glassl"] .spot-bar-price { font-size: 20px !important; } }   /* Readex Pro runs wider: keep the f73 tablet row clear of the corner keys */   /* tablets: full width (the f73 corner padding needs it), rounded underneath */
@media (max-width: 600px) { html[data-theme="glassd"] #spotBar,
html[data-theme="glassl"] #spotBar { border-radius: 0 0 28px 28px !important; padding-bottom: 12px !important; } }
html[data-theme="glassd"] .spot-bar-price,
html[data-theme="glassl"] .spot-bar-price { font-weight: 500 !important; text-shadow: none !important; letter-spacing: -0.01em; }
html[data-theme="glassd"] .spot-bar-label,
html[data-theme="glassl"] .spot-bar-label { font-weight: 500 !important; letter-spacing: 0.08em; }
html[data-theme="glassd"] #spotBar .spot-bar-gram,
html[data-theme="glassl"] #spotBar .spot-bar-gram { border-radius: 14px !important; border: 0 !important; box-shadow: var(--jw-sel-shadow) !important; color: var(--jw-pill) !important; font-weight: 600 !important; }
html[data-theme="glassd"] #spotBar .spot-bar-gram small,
html[data-theme="glassl"] #spotBar .spot-bar-gram small { color: var(--secondary-text) !important; opacity: 1 !important; font-weight: 600 !important; }
html[data-theme="glassd"] #spotBar .tb-key,
html[data-theme="glassl"] #spotBar .tb-key,
html[data-theme="glassd"] #spotBar .support-btn,
html[data-theme="glassl"] #spotBar .support-btn { border-radius: 50% !important; background: var(--jw-strong) !important; color: var(--jw-pill) !important;
    border: 1.5px solid color-mix(in srgb, var(--jw-pill) 45%, transparent) !important; box-shadow: var(--jw-sel-shadow) !important; }
@media (min-width: 901px) { html[data-theme="glassd"] #spotBar .tb-key,
html[data-theme="glassl"] #spotBar .tb-key,
html[data-theme="glassd"] #spotBar .support-btn,
html[data-theme="glassl"] #spotBar .support-btn { width: 34px !important; height: 34px !important; } }
@media (max-width: 600px) { html[data-theme="glassd"] #spotBar .tb-key,
html[data-theme="glassl"] #spotBar .tb-key,
html[data-theme="glassd"] #spotBar .support-btn,
html[data-theme="glassl"] #spotBar .support-btn { width: 36px !important; height: 36px !important; font-size: 15px !important; } }
@media (max-width: 600px) { html[data-theme="glassd"] .tb-keys,
html[data-theme="glassl"] .tb-keys { top: calc(env(safe-area-inset-top, 0px) + 13px) !important; } html[data-theme="glassd"] #spotBar,
html[data-theme="glassl"] #spotBar { row-gap: 10px !important; } }   /* phone: the round keys sit on the price row, the chips row below stays clear */
html[data-theme="glassd"] #spotBar .adj-input,
html[data-theme="glassl"] #spotBar .adj-input,
html[data-theme="glassd"] #spotBar #spotExchRate,
html[data-theme="glassl"] #spotBar #spotExchRate { border-radius: 12px !important; background: var(--jw-field) !important; border: 1px solid var(--jw-edge) !important; }

/* ── Today's Buy / Sell / Net Gold ── */
html[data-theme="glassd"] .dash-activity,
html[data-theme="glassl"] .dash-activity { gap: 8px !important; }
html[data-theme="glassd"] .act-card,
html[data-theme="glassl"] .act-card { border-radius: 22px !important; padding: 12px 8px !important; }
html[data-theme="glassd"] .act-buy,
html[data-theme="glassl"] .act-buy { background: linear-gradient(170deg, rgba(44, 99, 201, 0.16), var(--jw-glass) 60%) !important; }
html[data-theme="glassd"] .act-sell,
html[data-theme="glassl"] .act-sell { background: linear-gradient(170deg, rgba(184, 67, 47, 0.16), var(--jw-glass) 60%) !important; }
html[data-theme="glassd"] .act-net,
html[data-theme="glassl"] .act-net { background: linear-gradient(170deg, color-mix(in srgb, var(--jw-hl) 16%, transparent), var(--jw-glass) 60%) !important; }
html[data-theme="glassd"] .act-label,
html[data-theme="glassl"] .act-label { font-size: 12px !important; font-weight: 600 !important; }
html[data-theme="glassd"] .act-net .act-label,
html[data-theme="glassl"] .act-net .act-label { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .act-value,
html[data-theme="glassl"] .act-value { font-weight: 500 !important; letter-spacing: -0.01em; font-size: 22px; }
html[data-theme="glassd"] .act-iqd,
html[data-theme="glassl"] .act-iqd { font-weight: 600 !important; }

/* the trade-history head cards (PC / tablet right column) — same tiles */
html[data-theme="glassd"] .hsh-card,
html[data-theme="glassl"] .hsh-card { border-radius: 22px !important; border: 0 !important; box-shadow: var(--jw-rim) !important; }
html[data-theme="glassd"] .hsh-buy,
html[data-theme="glassl"] .hsh-buy { background: linear-gradient(170deg, rgba(25, 178, 119, 0.16), var(--jw-glass) 60%) !important; }
html[data-theme="glassd"] .hsh-sell,
html[data-theme="glassl"] .hsh-sell { background: linear-gradient(170deg, rgba(184, 67, 47, 0.16), var(--jw-glass) 60%) !important; }
html[data-theme="glassd"] .hsh-net,
html[data-theme="glassl"] .hsh-net { background: linear-gradient(170deg, color-mix(in srgb, var(--jw-hl) 16%, transparent), var(--jw-glass) 60%) !important; }
html[data-theme="glassd"] .hsh-val,
html[data-theme="glassl"] .hsh-val { font-family: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif !important; font-weight: 500 !important; }

/* ── trade form ── */
html[data-theme="glassd"] .trade-form-card,
html[data-theme="glassl"] .trade-form-card { border-radius: 30px !important; padding: 16px !important; }
html[data-theme="glassd"] .trade-form-card input:not([type="hidden"]):not([type="checkbox"]):not(.karat-custom),
html[data-theme="glassl"] .trade-form-card input:not([type="hidden"]):not([type="checkbox"]):not(.karat-custom),
html[data-theme="glassd"] .trade-form-card select,
html[data-theme="glassl"] .trade-form-card select {
    min-height: 50px; border-radius: 16px !important; border: 1px solid var(--jw-edge) !important; padding-inline: 16px !important;
    box-shadow: inset 0 1px 2px rgba(90, 64, 30, 0.08) !important; font-size: 15px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
html[data-theme="glassd"] .trade-form-card input:not([type="hidden"]):not(.input-blue):not(.input-green):not(#amountPaid):not(#receivedWeight),
html[data-theme="glassl"] .trade-form-card input:not([type="hidden"]):not(.input-blue):not(.input-green):not(#amountPaid):not(#receivedWeight),
html[data-theme="glassd"] .trade-form-card select,
html[data-theme="glassl"] .trade-form-card select { background: var(--jw-field) !important; }
html[data-theme="glassd"] #receivedWeight,
html[data-theme="glassl"] #receivedWeight,
html[data-theme="glassd"] #amountPaid,
html[data-theme="glassl"] #amountPaid { background: repeating-linear-gradient(135deg, rgba(31, 122, 77, 0.10) 0 9px, transparent 9px 18px), var(--jw-field) !important; }
html[data-theme="glassd"] .trade-form-card input:focus,
html[data-theme="glassl"] .trade-form-card input:focus,
html[data-theme="glassd"] .trade-form-card select:focus,
html[data-theme="glassl"] .trade-form-card select:focus { outline: none; border-color: color-mix(in srgb, var(--jw-pill) 55%, transparent) !important; box-shadow: 0 0 0 3px var(--jw-focus) !important; }
html[data-theme="glassd"] #price,
html[data-theme="glassl"] #price { border-color: color-mix(in srgb, var(--accent-gold) 60%, transparent) !important; }
html[data-theme="glassd"] .btn-curr-toggle,
html[data-theme="glassl"] .btn-curr-toggle { min-height: 50px; border-radius: 16px !important; border: 1.5px solid color-mix(in srgb, var(--accent-blue) 50%, transparent) !important;
    background: color-mix(in srgb, var(--accent-blue) 12%, transparent) !important; color: var(--accent-blue) !important; font-weight: 600 !important; }
html[data-theme="glassd"] .btn-pull-spot,
html[data-theme="glassl"] .btn-pull-spot { border-radius: 14px !important; border: 1.5px solid color-mix(in srgb, var(--accent-green) 50%, transparent) !important;
    background: color-mix(in srgb, var(--accent-green) 13%, transparent) !important; }
html[data-theme="glassd"] .karat-btn,
html[data-theme="glassl"] .karat-btn { border-radius: 13px !important; border: 0 !important; background: var(--jw-field) !important; box-shadow: inset 0 1px 0 var(--jw-edge) !important; font-weight: 600 !important; }
html[data-theme="glassd"] .converter-box,
html[data-theme="glassl"] .converter-box { border-radius: 18px !important; background: var(--jw-strong) !important; box-shadow: var(--jw-sel-shadow) !important; border: 0 !important; padding: 14px 16px !important; }

/* ── BUY / SELL / END OF DAY: flat, rounded, with a sliding arrow ── */
html[data-theme="glassd"] #buyBtn,
html[data-theme="glassl"] #buyBtn,
html[data-theme="glassd"] #sellBtn,
html[data-theme="glassl"] #sellBtn { min-height: 56px; border-radius: 18px !important; border: 0 !important; box-shadow: none !important; color: #fff !important;
    font-size: 19px !important; font-weight: 600 !important; letter-spacing: 0.04em; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    transition: gap .25s cubic-bezier(.65, 0, .35, 1), background-color .25s, transform .12s cubic-bezier(.65, 0, .35, 1), filter .25s !important; }
html[data-theme="glassd"] #buyBtn,
html[data-theme="glassl"] #buyBtn { background: var(--jw-btn-buy) !important; }
html[data-theme="glassd"] #sellBtn,
html[data-theme="glassl"] #sellBtn { background: var(--jw-btn-sell) !important; }
html[data-theme="glassd"] #buyBtn::after,
html[data-theme="glassl"] #buyBtn::after,
html[data-theme="glassd"] #sellBtn::after,
html[data-theme="glassl"] #sellBtn::after,
html[data-theme="glassd"] #eodBtn::after,
html[data-theme="glassl"] #eodBtn::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: var(--jw-arrow) center / contain no-repeat; mask: var(--jw-arrow) center / contain no-repeat; transition: translate .25s cubic-bezier(.65, 0, .35, 1); }
html[data-theme="glassd"] #buyBtn,
html[data-theme="glassl"] #buyBtn { --jw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="glassd"] #sellBtn,
html[data-theme="glassl"] #sellBtn { --jw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
html[data-theme="glassd"] #eodBtn,
html[data-theme="glassl"] #eodBtn { --jw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); min-height: 54px; border-radius: 20px !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0.06em;
    display: flex !important; align-items: center; justify-content: center; gap: 8px; transition: gap .25s cubic-bezier(.65, 0, .35, 1), transform .12s cubic-bezier(.65, 0, .35, 1), filter .25s !important; }
html[dir="rtl"][data-theme="glassd"] #eodBtn::after, html[dir="rtl"][data-theme="glassl"] #eodBtn::after { transform: scaleX(-1); }
@media (hover: hover) {
html[data-theme="glassd"] #buyBtn:hover,
html[data-theme="glassl"] #buyBtn:hover,
html[data-theme="glassd"] #sellBtn:hover,
html[data-theme="glassl"] #sellBtn:hover,
html[data-theme="glassd"] #eodBtn:hover,
html[data-theme="glassl"] #eodBtn:hover { gap: 14px; }
html[data-theme="glassd"] #buyBtn:hover::after,
html[data-theme="glassl"] #buyBtn:hover::after { translate: 0 3px; }
html[data-theme="glassd"] #sellBtn:hover::after,
html[data-theme="glassl"] #sellBtn:hover::after { translate: 0 -3px; }
html[data-theme="glassd"] #eodBtn:hover::after,
html[data-theme="glassl"] #eodBtn:hover::after { translate: 4px 0; }
html[dir="rtl"][data-theme="glassd"] #eodBtn:hover::after, html[dir="rtl"][data-theme="glassl"] #eodBtn:hover::after { translate: -4px 0; }
}

/* ── side rail (f80): closer to the screen edge, a full pill (owner: "more to the edge … a pill shape as well") ── */
html.jw-rail #sidebar { margin: 8px 0 !important; margin-inline-start: 6px !important; border-radius: 999px !important; }
html.jw-rail #sbNavStrip { padding: 26px 0 !important; }
html.jw-rail #sidebar #sbNavStrip .sb-nav-item { margin: 0 !important; }   /* the rows are sized to fit exactly (f80 JS) */

/* ── day summary, trades, clients ── */
html[data-theme="glassd"] .result-card,
html[data-theme="glassl"] .result-card { border-radius: 28px !important; }
html[data-theme="glassd"] .avg-val,
html[data-theme="glassl"] .avg-val { font-weight: 500 !important; }
html[data-theme="glassd"] .section-title,
html[data-theme="glassl"] .section-title { font-weight: 500 !important; font-size: 17px !important; }
html[data-theme="glassd"] .btn-undo,
html[data-theme="glassl"] .btn-undo { min-height: 40px; border-radius: 14px !important; border: 0 !important; background: var(--jw-glass) !important; box-shadow: var(--jw-rim) !important; font-weight: 600 !important; }
html[data-theme="glassd"] .trade-card,
html[data-theme="glassl"] .trade-card { border-radius: 24px !important; background: var(--jw-glass) !important; margin-bottom: 12px !important; border-left: 0 !important; border-right: 0 !important; }
html[data-theme="glassd"] .trade-card.buy-card::before,
html[data-theme="glassl"] .trade-card.buy-card::before,
html[data-theme="glassd"] .trade-card.sell-card::before,
html[data-theme="glassl"] .trade-card.sell-card::before { content: ""; position: absolute; top: 14px; bottom: 14px; inset-inline-start: 0; width: 4px; border-radius: 0 4px 4px 0; z-index: 1; pointer-events: none; }
html[dir="rtl"][data-theme="glassd"] .trade-card::before, html[dir="rtl"][data-theme="glassl"] .trade-card::before { border-radius: 4px 0 0 4px; }
html[data-theme="glassd"] .trade-card.buy-card::before,
html[data-theme="glassl"] .trade-card.buy-card::before { background: var(--accent-green); }
html[data-theme="glassd"] .trade-card.sell-card::before,
html[data-theme="glassl"] .trade-card.sell-card::before { background: var(--accent-red); }
html[data-theme="glassd"] .client-card-premium,
html[data-theme="glassl"] .client-card-premium { border-radius: 20px !important; background: var(--jw-glass) !important; }
html[data-theme="glassd"] .global-debt-card,
html[data-theme="glassl"] .global-debt-card { border-radius: 20px !important; background: var(--jw-glass) !important; }
html[data-theme="glassd"] .global-debt-card .debt-header h3,
html[data-theme="glassl"] .global-debt-card .debt-header h3 { color: var(--jw-hl) !important; font-family: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif; font-weight: 600; }
/* ==== f81 glass fidelity ==== */ /* end */

/* ==== f82 rail orb fix ==== */
html.jw-rail #sbNavStrip .sb-nav-label { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
html.jw-rail #sbNavStrip .sb-nav-item { min-width: 0; max-width: 100%; overflow: hidden; }
html.jw-rail #sbNavStrip { overscroll-behavior-x: none; }
/* ==== f82 rail orb fix ==== */ /* end */

/* ==== f83 clients perf ==== */
html[data-theme="glassd"] { --jw-card: rgba(26, 28, 33, 0.66); }
html[data-theme="glassl"] { --jw-card: rgba(255, 255, 255, 0.68); }
html[data-theme="glassd"] .client-card-premium,
html[data-theme="glassl"] .client-card-premium,
html[data-theme="glassd"] .trade-card,
html[data-theme="glassl"] .trade-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--jw-card) !important; }
.client-card-premium { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important; }
@media (min-width: 1000px) {
    #clientListContainer.client-grid.list-mode { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
}
@media (min-width: 601px) and (max-width: 999px) {
    #clientListContainer.client-grid.list-mode { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}
@media (min-width: 601px) {
    #clientListContainer.list-mode .ccp-inner { min-width: 0; }
    #clientListContainer.list-mode .ccp-info { min-width: 0; }
    #clientListContainer.list-mode .ccp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ==== f83 clients perf ==== */ /* end */

/* ==== f85 account page ==== */
.acs-hide { display: none !important; }
/* info block next to the photo */
#swaWin-profile .pp-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acs-info { flex: 1 1 220px; min-width: 0; display: grid; gap: 6px; padding-inline-start: 8px; border-inline-start: 1px solid var(--jw-edge, var(--glass-border)); }
.acs-info-name { font-size: 18px; font-weight: 700; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acs-info-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--secondary-text); min-width: 0; }
.acs-info-row b { color: var(--text-color); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.acs-info-row svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.acs-info-dev b { color: var(--accent-green); }
@media (max-width: 600px) { .acs-info { flex-basis: 100%; padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--jw-edge, var(--glass-border)); padding-top: 10px; } }
/* buttons */
html[data-theme="glassd"] #swaWin-profile .btn-gold-full,
html[data-theme="glassl"] #swaWin-profile .btn-gold-full { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border: 0 !important; border-radius: 16px !important; font-weight: 600 !important; box-shadow: none !important; }
html[data-theme="glassd"] #swaWin-profile .btn-gray,
html[data-theme="glassl"] #swaWin-profile .btn-gray { background: var(--jw-strong) !important; color: var(--text-color) !important; border: 1px solid var(--jw-edge) !important; border-radius: 16px !important; font-weight: 600 !important; }
html[data-theme="glassd"] #acsBox #dmAdminSection > button,
html[data-theme="glassl"] #acsBox #dmAdminSection > button { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border: 0 !important; border-radius: 18px !important; min-height: 52px; font-weight: 600 !important; box-shadow: none !important; }
html[data-theme="glassd"] #acsBox #dmChangePassSection > button,
html[data-theme="glassl"] #acsBox #dmChangePassSection > button,
html[data-theme="glassd"] #acsBox button[onclick="changeAccount()"],
html[data-theme="glassl"] #acsBox button[onclick="changeAccount()"] { background: var(--jw-strong) !important; color: var(--text-color) !important; border: 1px solid var(--jw-edge) !important;
    border-radius: 18px !important; min-height: 52px; font-weight: 600 !important; box-shadow: var(--jw-sel-shadow) !important; }
html[data-theme="glassd"] #acsBox button[onclick="deviceSignOut()"],
html[data-theme="glassl"] #acsBox button[onclick="deviceSignOut()"],
html[data-theme="glassd"] #acsBox .del-zone-btn,
html[data-theme="glassl"] #acsBox .del-zone-btn { background: color-mix(in srgb, var(--accent-red) 12%, transparent) !important; color: var(--accent-red) !important;
    border: 1px solid color-mix(in srgb, var(--accent-red) 35%, transparent) !important; border-radius: 18px !important; min-height: 52px; font-weight: 600 !important; box-shadow: none !important; }
html[data-theme="glassd"] #acsBox .del-zone,
html[data-theme="glassl"] #acsBox .del-zone { background: var(--jw-glass) !important; border: 1px solid color-mix(in srgb, var(--accent-red) 25%, transparent) !important; border-radius: 22px !important; box-shadow: var(--jw-rim) !important; }
html[data-theme="glassd"] #acsBox > div,
html[data-theme="glassl"] #acsBox > div { border-top-color: var(--jw-edge) !important; }
html[data-theme="glassd"] .dm-device-card,
html[data-theme="glassl"] .dm-device-card { background: var(--jw-card) !important; border: 0 !important; border-radius: 20px !important; box-shadow: var(--jw-rim) !important; }
html[data-theme="glassd"] .dm-device-card.dm-this,
html[data-theme="glassl"] .dm-device-card.dm-this { box-shadow: var(--jw-rim), inset 0 0 0 1.5px color-mix(in srgb, var(--accent-gold) 55%, transparent) !important; }
/* the account switcher */
.acs-sw { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.acs-sw[hidden] { display: none !important; }
.acs-sw-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.acs-sw-card { position: relative; width: min(440px, 100%); max-height: min(80vh, 640px); overflow: auto; border-radius: 28px; padding: 18px; display: grid; gap: 12px;
    background: var(--jw-glass, var(--glass-bg)); box-shadow: var(--jw-rim, var(--shadow)), 0 30px 60px -20px rgba(0, 0, 0, 0.6); color: var(--text-color);
    -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); animation: acsIn .28s cubic-bezier(.65, 0, .35, 1) both; }
html.jw-android .acs-sw-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-bg); }
@keyframes acsIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 600px) { .acs-sw { align-items: flex-end; padding: 0; } .acs-sw-card { width: 100%; border-radius: 28px 28px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .acs-sw-card { animation: none; } }
.acs-sw-head { display: flex; align-items: center; gap: 10px; }
.acs-sw-head h3 { flex: 1; margin: 0; font-size: 19px; font-weight: 700; }
.acs-sw-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--jw-edge, var(--glass-border)); background: var(--jw-strong, transparent); color: var(--text-color); cursor: pointer; font-size: 15px; }
.acs-sw-hint { margin: -4px 0 0; font-size: 13px; color: var(--secondary-text); }
.acs-sw-list { display: grid; gap: 8px; }
.acs-sw-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 1px solid var(--jw-edge, var(--glass-border));
    background: var(--jw-strong, transparent); color: var(--text-color); cursor: pointer; text-align: start; font: inherit; transition: background-color .25s, transform .12s; }
.acs-sw-row:active { transform: scale(.98); }
.acs-sw-row[aria-current="true"] { cursor: default; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-green) 55%, transparent); }
.acs-sw-row .ql-avatar { flex: none; border-radius: 50%; }
.acs-sw-meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.acs-sw-meta b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acs-sw-meta span { font-size: 12.5px; color: var(--secondary-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: isolate; text-align: start; }
.acs-sw-tag { font-size: 12px; font-weight: 700; color: var(--accent-green); white-space: nowrap; }
.acs-sw-empty { font-size: 13px; color: var(--secondary-text); text-align: center; padding: 6px 0; }
.acs-sw-add { min-height: 50px; border-radius: 18px; border: 0; background: var(--jw-pill, var(--accent-gold)); color: var(--jw-on-pill, #000); font: inherit; font-weight: 700; cursor: pointer; }
/* ==== f85 account page ==== */ /* end */

/* ==== f86 menu layout ==== */
.jw-lay { margin-top: 18px; display: grid; gap: 10px; }
.jw-lay-title { font-size: 14px; font-weight: 700; color: var(--text-color); }
.jw-lay-sub { font-size: 12.5px; color: var(--secondary-text); margin-top: -6px; }
.jw-lay-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jw-lay-opt { display: grid; justify-items: center; gap: 8px; padding: 12px 10px; border-radius: 18px; cursor: pointer; font: inherit; font-weight: 600; color: var(--text-color);
    background: var(--jw-strong, var(--grouped-bg)); border: 1px solid var(--jw-edge, var(--glass-border)); transition: box-shadow .25s, transform .12s; }
.jw-lay-opt:active { transform: scale(.97); }
.jw-lay-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--jw-pill, var(--accent-gold)); }
.jw-lay-pic { width: 96px; height: 60px; border-radius: 10px; position: relative; background: color-mix(in srgb, var(--text-color) 6%, transparent); overflow: hidden; }
.jw-lay-pic i { position: absolute; background: color-mix(in srgb, var(--text-color) 30%, transparent); border-radius: 6px; }
.jw-lay-pic.rail i { left: 6px; top: 6px; bottom: 6px; width: 14px; border-radius: 999px; }
.jw-lay-pic.top i { left: 6px; right: 6px; top: 6px; height: 10px; }
.jw-lay-pic b { position: absolute; background: color-mix(in srgb, var(--text-color) 14%, transparent); border-radius: 4px; }
.jw-lay-pic.rail b { left: 26px; right: 6px; top: 6px; bottom: 6px; }
.jw-lay-pic.top b { left: 6px; right: 6px; top: 22px; bottom: 6px; }
@media (max-width: 600px) { .jw-lay { display: none; } }
/* ==== f86 menu layout ==== */ /* end */

/* ==== f88 swipe rail edge ==== */
html, body { overscroll-behavior-x: none; }
/* ==== f88 swipe rail edge ==== */ /* end */

/* ==== f89 phone header fit ==== */
#spotBar .spot-bar-main > #wsStatus { margin-inline-end: 2px; align-self: center; }
@media (max-width: 600px) {
html[data-theme="glassd"] #spotBar,
html[data-theme="glassl"] #spotBar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important; row-gap: 12px !important; z-index: 120 !important; }
html[data-theme="glassd"] .tb-keys,
html[data-theme="glassl"] .tb-keys { top: calc(env(safe-area-inset-top, 0px) + 2px) !important; }
}
/* ==== f89 phone header fit ==== */ /* end */

/* ==== f91 inline switches ==== */
/* the pill switch (reference: .switch — 46 × 28, knob 20, green when on) */
input.ql-switch, #capInclDebts {
    -webkit-appearance: none; appearance: none; width: 50px !important; height: 30px !important; min-height: 0 !important; margin: 0; flex: none;
    border-radius: 999px; position: relative; cursor: pointer; vertical-align: middle;
    background: color-mix(in srgb, var(--text-color) 16%, transparent); border: 1px solid var(--jw-edge, rgba(255, 255, 255, 0.12));
    transition: background-color .25s cubic-bezier(.65, 0, .35, 1), border-color .25s cubic-bezier(.65, 0, .35, 1);
}
input.ql-switch::after, #capInclDebts::after {
    content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--secondary-text); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); transition: transform .25s cubic-bezier(.65, 0, .35, 1), background-color .25s cubic-bezier(.65, 0, .35, 1);
}
input.ql-switch:checked, #capInclDebts:checked { background: var(--jw-btn-buy, var(--accent-green)); border-color: transparent; }
input.ql-switch:checked::after, #capInclDebts:checked::after { background: #fff; transform: translateX(20px); }
html[dir="rtl"] input.ql-switch:checked::after, html[dir="rtl"] #capInclDebts:checked::after { transform: translateX(-20px); }
input.ql-switch:focus-visible, #capInclDebts:focus-visible { outline: 2px solid var(--jw-pill, var(--accent-gold)); outline-offset: 2px; }
.ios-switch-track { background: color-mix(in srgb, var(--text-color) 16%, transparent) !important; border: 1px solid var(--jw-edge, transparent); }
.ios-switch input:checked + .ios-switch-track { background: var(--jw-btn-buy, var(--accent-green)) !important; border-color: transparent; }
.ios-switch-knob { transition: transform .25s cubic-bezier(.65, 0, .35, 1) !important; }
/* the same switch inside the Settings-list rows */
.jw-sw { position: relative; width: 50px; height: 30px; flex: none; border-radius: 999px; margin-inline-start: auto;
    background: color-mix(in srgb, var(--text-color) 16%, transparent); border: 1px solid var(--jw-edge, rgba(255, 255, 255, 0.12)); transition: background-color .25s cubic-bezier(.65, 0, .35, 1); }
.jw-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--secondary-text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); transition: transform .25s cubic-bezier(.65, 0, .35, 1), background-color .25s cubic-bezier(.65, 0, .35, 1); }
.jw-sw[aria-checked="true"] { background: var(--jw-btn-buy, var(--accent-green)); border-color: transparent; }
.jw-sw[aria-checked="true"] i { background: #fff; transform: translateX(20px); }
#swaRoot[dir="rtl"] .jw-sw[aria-checked="true"] i, html[dir="rtl"] .jw-sw[aria-checked="true"] i { transform: translateX(-20px); }
#swaRoot .swa-row.jw-inline .swa-val, #swaRoot .swa-row.jw-inline .swa-chev, #swaRoot .swa-row.jw-has-sw .swa-val { display: none !important; }
@media (prefers-reduced-motion: reduce) { input.ql-switch::after, #capInclDebts::after, .jw-sw i, .ios-switch-knob { transition: none !important; } }
/* ==== f91 inline switches ==== */ /* end */

/* ==== f93 lang ccy ==== */
#swaRoot #swaWin-lang > .settings-card + .settings-card { margin-top: 0; }
#swaRoot #swaWin-lang .settings-title { display: block !important; font-size: 13px; font-weight: 700; color: var(--secondary-text); margin-bottom: 8px; }
#swaRoot #swaWin-lang .settings-row-head { display: block; margin-bottom: 8px; }
/* ==== f93 lang ccy ==== */ /* end */

/* ==== f94 settings page title ==== */
html[data-theme] #swaRoot .swa-head-slot { height: 64px; margin: -4px 0 12px; }
html[data-theme] #swaRoot .swa-head { height: 64px; padding: 0 2px; gap: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none; justify-content: flex-start;
    transition: background-color .25s, box-shadow .25s; }
html[data-theme] #swaRoot .swa-head-spacer { display: none; }
html[data-theme] #swaRoot .swa-head-title { flex: 1 1 auto; text-align: start; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; padding: 0; }
html[lang="ar"][data-theme] #swaRoot .swa-head-title { font-size: 29px; line-height: 42px; letter-spacing: 0; }
html[data-theme] #swaRoot .swa-back { flex: 0 0 44px; width: 44px; height: 44px; }
html[data-theme] #swaRoot .swa-back > span { width: 44px; height: 44px; background: var(--jw-strong, var(--hover-bg)); border: 1px solid var(--jw-edge, var(--glass-border)); box-shadow: var(--jw-sel-shadow, none); }
/* stuck on screen while the page scrolls: a soft glass strip */
html[data-theme] #swaRoot .swa-head.is-pinned, html[data-theme] #swaRoot .swa-head.jw-stuck { background: var(--jw-glass, var(--glass-bg)); box-shadow: var(--jw-rim, var(--shadow));
    -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }
html[data-theme] #swaRoot .swa-head.is-pinned { padding: 0 16px; border-radius: 0 0 22px 22px; }
html.jw-android[data-theme] #swaRoot .swa-head.is-pinned, html.jw-android[data-theme] #swaRoot .swa-head.jw-stuck { background: var(--jw-card, var(--card-bg)); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme] #swaRoot .swa-head.is-pinned .swa-head-title, html[data-theme] #swaRoot .swa-head.jw-stuck .swa-head-title { font-size: 21px; line-height: 30px; }
@media (min-width: 601px) {
    html[data-theme] #swaRoot .swa-head-slot { height: 64px; margin: 0 0 16px; }
    html[data-theme] #swaRoot .swa-head { height: 64px; border: 0; border-radius: 22px; }
    html[data-theme] #swaRoot .swa-head.jw-stuck { padding: 0 12px; }
}
/* ==== f94 settings page title ==== */ /* end */

/* ==== f96 account card layout ==== */
.acs-pcard .settings-row-head { display: none !important; }
.acs-pcard .acs-top-name { font-size: 22px; line-height: 30px; font-weight: 700; color: var(--text-color); margin: 0 0 14px; text-align: start;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acs-pcard .acs-top-name:empty { display: none; }
html[lang="ar"] .acs-pcard .acs-top-name { font-size: 23px; line-height: 34px; }
#swaWin-profile .acs-pcard .pp-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: nowrap; }
.acs-pcard .acs-photo-col { flex: none; width: 124px; display: grid; justify-items: center; gap: 10px; }
.acs-pcard .acs-photo-col .pp-btns { display: grid; gap: 8px; width: 100%; }
.acs-pcard .acs-photo-col .pp-btns button { width: 100%; min-height: 38px; padding: 8px 10px !important; font-size: 13.5px !important; }
#swaWin-profile .acs-pcard .acs-info { flex: 1 1 auto; min-width: 0; border: 0; padding: 4px 0 0; align-self: center; gap: 10px; }
.acs-pcard .acs-info .acs-info-name { display: none; }
@media (max-width: 600px) {
    #swaWin-profile .acs-pcard .acs-info { flex-basis: auto; border-top: 0; padding-top: 4px; }
    .acs-pcard .acs-info-row > span { display: none; }
    .acs-pcard .acs-info-row b { font-size: 13.5px; }
    .acs-pcard .acs-photo-col { width: 112px; }
}
/* ==== f96 account card layout ==== */ /* end */

/* ==== f97 shop preview ==== */
#shopInfoPreview { margin-top: 10px !important; padding: 20px 18px 16px !important; border: 0 !important; border-radius: 22px !important;
    background: var(--jw-glass, var(--glass-bg)) !important; box-shadow: var(--jw-rim, var(--shadow)) !important;
    font-family: inherit !important; font-size: 14px !important; line-height: 1.5 !important; white-space: normal !important; text-align: center !important; }
#shopInfoPreview .sip { display: grid; justify-items: center; gap: 10px; }
#shopInfoPreview .sip-badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent); }
#shopInfoPreview .sip-name { font-family: "Readex Pro", "IBM Plex Sans Arabic", inherit; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--text-color); max-width: 100%; overflow-wrap: anywhere; }
#shopInfoPreview .sip-name::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 3px; margin: 8px auto 0; background: var(--accent-gold); opacity: .85; }
#shopInfoPreview .sip-rows { display: grid; gap: 6px; justify-items: center; max-width: 100%; }
#shopInfoPreview .sip-row { display: inline-flex; align-items: center; gap: 8px; color: var(--secondary-text); font-size: 14px; max-width: 100%; }
#shopInfoPreview .sip-row span, #shopInfoPreview .sip-row bdi { color: var(--text-color); overflow-wrap: anywhere; }
#shopInfoPreview svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#shopInfoPreview .sip-badge svg { width: 22px; height: 22px; }
#shopInfoPreview .sip-edge { width: 100%; margin-top: 6px; border-top: 1.5px dashed var(--jw-edge, var(--glass-border)); }
#shopInfoPreview .sip-empty { color: var(--secondary-text); font-size: 13.5px; }
#shopInfoView .btn-gray { background: var(--jw-strong, var(--grouped-bg)) !important; color: var(--text-color) !important; border: 1px solid var(--jw-edge, var(--glass-border)) !important;
    border-radius: 16px !important; min-height: 46px; font-weight: 600 !important; box-shadow: var(--jw-sel-shadow, none) !important; }
/* ==== f97 shop preview ==== */ /* end */

/* ==== f98 rail melt ==== */
#jwMelt { display: none; position: fixed; z-index: 7; pointer-events: none; background: var(--sidebar-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45); will-change: top, height, clip-path; }
html.jw-android #jwMelt { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.jw-rail .jw-rglide { pointer-events: auto; cursor: grab; touch-action: none; }
html.jw-rail #sbNavStrip .sb-nav-item.active { touch-action: none; cursor: grab; }
html.jw-rail #sidebar #sbNavStrip .sb-nav-item.active .sb-nav-label { color: var(--text-color) !important; opacity: 1 !important; }   /* the open page name stays readable (Glass Light painted it white) */
html.jw-rail.jw-orb-drag .jw-rglide { cursor: grabbing; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.55); }
/* ==== f98 rail melt ==== */ /* end */

/* ==== f99 data page ==== */
html[data-theme] #dataManageView .dm2-wrap { gap: 18px; }
html[data-theme] #dataManageView .dm2-hero { background: var(--jw-glass, var(--glass-bg)) !important; border: 0 !important; border-radius: 24px !important; padding: 18px !important;
    box-shadow: var(--jw-rim, var(--shadow)) !important; }
html[data-theme]:not(.jw-android) #dataManageView .dm2-hero { -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); }
html[data-theme] #dataManageView .dm2-hero-top { gap: 14px; margin-bottom: 16px; }
html[data-theme] #dataManageView .dm2-hero-icon { width: 50px !important; height: 50px !important; border-radius: 50% !important; background: color-mix(in srgb, var(--accent-blue) 14%, transparent) !important;
    color: var(--accent-blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 30%, transparent); }
html[data-theme] #dataManageView .dm2-hero-title { font-family: "Readex Pro", "IBM Plex Sans Arabic", inherit; font-size: 18px; font-weight: 700; }
html[data-theme] #dataManageView .dm2-hero-sub { font-size: 12.5px; margin-top: 4px; }
html[data-theme] #dataManageView .dm2-status-pill { padding: 6px 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important;
    background: var(--jw-strong, var(--grouped-bg)) !important; color: var(--text-color) !important; box-shadow: var(--jw-sel-shadow, none); }
html[data-theme] #dataManageView .dm2-status-pill:empty { display: none !important; }
html[data-theme] #dataManageView .dm2-hero-btns { gap: 10px; margin-bottom: 10px; }
html[data-theme] #dataManageView .dm2-btn { min-height: 52px; border-radius: 18px !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html[data-theme] #dataManageView .dm2-btn-pull { background: color-mix(in srgb, var(--accent-green) 13%, var(--jw-strong, transparent)) !important; color: var(--accent-green) !important;
    border: 1px solid color-mix(in srgb, var(--accent-green) 32%, transparent) !important; }
html[data-theme] #dataManageView .dm2-btn-push { background: color-mix(in srgb, var(--accent-blue) 13%, var(--jw-strong, transparent)) !important; color: var(--accent-blue) !important;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 32%, transparent) !important; }
html[data-theme] #dataManageView .dm2-btn-stop { background: color-mix(in srgb, var(--accent-red) 11%, transparent) !important; color: var(--accent-red) !important;
    border: 1px solid color-mix(in srgb, var(--accent-red) 32%, transparent) !important; }
html[data-theme] #dataManageView .dm2-hero-note { font-size: 12px; margin-top: 10px; }
html[data-theme] #dataManageView .dm2-section-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 4px 10px !important; }
html[data-theme] #dataManageView .dm2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (min-width: 601px) { html[data-theme] #dataManageView .dm2-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
html[data-theme] #dataManageView .dm2-tile { background: var(--jw-card, var(--glass-bg)) !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--jw-rim, var(--shadow)) !important;
    padding: 18px 12px 16px !important; gap: 8px !important; min-height: 136px; justify-content: center !important; }
html[data-theme] #dataManageView .dm2-tile-icon { width: 50px !important; height: 50px !important; border-radius: 50% !important; font-size: 20px !important; }
html[data-theme] #dataManageView .dm2-tile-blue { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 30%, transparent); color: var(--accent-blue) !important; background: color-mix(in srgb, var(--accent-blue) 14%, transparent) !important; }
html[data-theme] #dataManageView .dm2-tile-green { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 30%, transparent); background: color-mix(in srgb, var(--accent-green) 14%, transparent) !important; }
html[data-theme] #dataManageView .dm2-tile-gold { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 30%, transparent); background: color-mix(in srgb, var(--accent-gold) 14%, transparent) !important; }
html[data-theme] #dataManageView .dm2-tile-title { font-size: 14px !important; font-weight: 700 !important; line-height: 1.35; }
html[data-theme] #dataManageView .dm2-tile-sub { font-size: 12px !important; line-height: 1.4; }
html[data-theme] #dataManageView .dm2-danger-btn { background: color-mix(in srgb, var(--accent-red) 9%, var(--jw-card, transparent)) !important; border: 1px solid color-mix(in srgb, var(--accent-red) 30%, transparent) !important;
    border-radius: 22px !important; padding: 16px !important; box-shadow: var(--jw-rim, none) !important; }
html[data-theme] #dataManageView .dm2-danger-icon { border-radius: 50% !important; }
html[data-theme] #dataManageView .dm2-danger-sub { color: color-mix(in srgb, var(--accent-red) 75%, var(--text-color)) !important; font-size: 12.5px !important; }
/* ==== f99 data page ==== */ /* end */

/* ==== f101 client page ==== */
html[data-theme] #customerProfileView .cp-topbar { display: flex; align-items: center; margin: 0 0 12px; }
html[data-theme] #customerProfileView .cp-topbar .btn-back { width: 44px !important; height: 44px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center;
    background: var(--jw-strong, var(--hover-bg)) !important; border: 1px solid var(--jw-edge, var(--glass-border)) !important; box-shadow: var(--jw-sel-shadow, none) !important;
    color: var(--text-color) !important; transform: none !important; flex: none !important; order: 0 !important; font-size: 0 !important; }
html[data-theme] #customerProfileView .cp-back-ico svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"][data-theme] #customerProfileView .cp-back-ico svg { transform: scaleX(-1); }
html[data-theme] #customerProfileView .cp-header.cp-card { display: grid !important; justify-items: center; gap: 8px; padding: 20px 16px 16px !important; margin: 0 0 16px !important; flex-wrap: nowrap !important;
    border-radius: 24px; background: var(--jw-glass, var(--glass-bg)); box-shadow: var(--jw-rim, var(--shadow)); }
html[data-theme]:not(.jw-android) #customerProfileView .cp-header.cp-card { -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); }
html[data-theme] #customerProfileView .cp-card .cp-name-col { width: 100%; gap: 6px !important; order: 0 !important; flex: none !important; }
html[data-theme] #customerProfileView .cp-card .cp-title { font-family: "Readex Pro", "IBM Plex Sans Arabic", inherit; font-size: 22px !important; line-height: 30px; font-weight: 700 !important; color: var(--accent-gold) !important;
    white-space: normal !important; overflow-wrap: anywhere; text-align: center; }
html[data-theme] #customerProfileView .cp-card .cp-phone-link { font-size: 14px; color: var(--secondary-text); }
html[data-theme] #customerProfileView .cp-card .cp-actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
html[data-theme] #customerProfileView .cp-card .cp-actions button { width: 46px !important; height: 46px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center;
    order: 0 !important; flex: none !important; font-size: 17px !important; box-shadow: none !important; }
html[data-theme] #customerProfileView .cp-card .btn-icon-gold { background: color-mix(in srgb, var(--accent-gold) 14%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent) !important; color: var(--accent-gold) !important; }
html[data-theme] #customerProfileView .cp-card .btn-icon-green { background: color-mix(in srgb, var(--accent-green) 14%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent-green) 35%, transparent) !important; color: var(--accent-green) !important; }
html[data-theme] #customerProfileView .cp-balance-hero { border-radius: 22px !important; border: 0 !important; background: var(--jw-glass, var(--glass-bg)) !important; box-shadow: var(--jw-rim, var(--shadow)) !important; margin-bottom: 16px !important; }
html[data-theme] #customerProfileView .cp-add-settle-bar { gap: 10px !important; margin-bottom: 16px !important; }
html[data-theme] #customerProfileView .cp-add-settle-btn { min-height: 52px; border-radius: 18px !important; }
/* ==== f101 client page ==== */ /* end */

/* ==== f102 about splash ==== */
/* glass launch screen */
.app-splash { background:
    radial-gradient(55% 22% at 62% 58%, rgba(232, 178, 76, 0.16), transparent 70%),
    radial-gradient(90% 40% at 50% 0%, rgba(190, 196, 204, 0.30), transparent 70%),
    linear-gradient(180deg, #4a4f56 0%, #24272c 38%, #121418 70%, #0e0f12 100%) !important; }
.app-splash-logo { width: 104px !important; height: 104px !important; border-radius: 26px !important;
    box-shadow: 0 22px 44px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14) !important; }
.app-splash-title { font-family: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif; font-weight: 700 !important; color: #f2f4f7 !important; letter-spacing: 0; }
.app-splash-sub { color: rgba(242, 244, 247, 0.55) !important; letter-spacing: .32em !important; }
.app-splash-bar { width: 132px !important; height: 3px !important; background: rgba(255, 255, 255, 0.12) !important; }
.app-splash-bar i { background: #f3c76a !important; box-shadow: 0 0 10px rgba(243, 199, 106, 0.6); }
.app-splash.app-splash-light { background:
    radial-gradient(55% 22% at 62% 58%, rgba(245, 186, 70, 0.22), transparent 70%),
    radial-gradient(90% 40% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(180deg, #d9dee5 0%, #c9cfd8 34%, #e5e8ed 64%, #eceff3 100%) !important; }
.app-splash.app-splash-light .app-splash-title { color: #121722 !important; }
.app-splash.app-splash-light .app-splash-sub { color: rgba(18, 23, 34, 0.5) !important; }
.app-splash.app-splash-light .app-splash-bar { background: rgba(18, 23, 34, 0.1) !important; }
.app-splash.app-splash-light .app-splash-bar i { background: #8f5d10 !important; box-shadow: none; }
/* Settings footer */
#swaList .jw-about { display: grid; justify-items: center; gap: 6px; margin: 26px 0 12px; padding: 0 12px; text-align: center; }
#swaList .jw-about img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--jw-edge, rgba(255, 255, 255, 0.12)); margin-bottom: 4px; }
#swaList .jw-about-name { font-size: 15px; font-weight: 700; color: var(--text-color); }
#swaList .jw-about-ver { font-size: 13px; color: var(--secondary-text); }
#swaList .jw-about-ver bdi { direction: ltr; unicode-bidi: isolate; }
#swaList .jw-about-dev { font-size: 13px; color: var(--secondary-text); }
#swaList .jw-about a { font-size: 14px; font-weight: 600; color: var(--accent-gold); text-decoration: none; padding: 4px 10px; border-radius: 999px; }
#swaList .jw-about a:active { background: var(--hover-bg); }
/* ==== f102 about splash ==== */ /* end */

/* ==== f104 pin colours ==== */
/* loading = blue */
#quickLockScreen .ql-card.qo-run #qlDots.qo .qo-slot:not(.ok):not(.bad) .qo-tile { border-color: var(--accent-blue); }
#quickLockScreen .ql-card.qo-run #qlDots.qo .qo-slot:not(.ok):not(.bad) .qo-tile::before { background: var(--accent-blue); opacity: .12; }
#quickLockScreen .ql-card.qo-run #qlDots.qo .qo-slot:not(.ok):not(.bad) .qo-dot { background: var(--accent-blue); }
#quickLockScreen .ql-card.qo-run #qlDots.qo .qo-hub { background: var(--accent-blue); }
#quickLockScreen .ql-card.qo-run #qlDots.qo .qo-ring circle { stroke: var(--accent-blue); stroke-opacity: .7; }
/* confirmation = green */
#quickLockScreen .ql-card.qo-run #qlDots.qo:has(.qo-slot.ok) .qo-hub { background: var(--accent-green); }
#quickLockScreen .ql-card.qo-run #qlDots.qo:has(.qo-slot.ok) .qo-ring circle { stroke: var(--accent-green); }
#qlDots.qo .qo-slot.ok .qo-tile { border-color: var(--accent-green); }
#qlDots.qo .qo-slot.ok .qo-tile::before { background: var(--accent-green); }
#qlDots.qo .qo-slot.ok .qo-dot { background: var(--accent-green); }
#qlDots.qo .qo-slot.ok .qo-flash { color: var(--accent-green); }
#qlDots.qo .qo-glow { background: radial-gradient(circle, var(--accent-green), transparent 68%); }
#qlDots.qo .qo-done { border-color: var(--accent-green); }
#qlDots.qo .qo-done::before { background: var(--accent-green); }
#qlDots.qo .qo-done svg { stroke: var(--accent-green); }
#qlDots.qo .qo-rs { border-color: var(--accent-green); }
#qlDots.qo .qo-pt { background: var(--accent-green); }
/* ==== f104 pin colours ==== */ /* end */
/* ==== f107 demo card ==== */
html[data-theme] #demoBanner.demo-banner { margin: 4px 0 10px; padding: 12px 14px; border: 0; border-radius: 20px; gap: 12px; flex-wrap: nowrap; justify-content: space-between;
    background: var(--jw-glass, var(--glass-bg)); box-shadow: var(--jw-rim, var(--shadow)); color: var(--text-color); font-size: 13.5px; font-weight: 600; line-height: 1.5; text-align: start; }
html[data-theme]:not(.jw-android) #demoBanner.demo-banner { -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); }
#demoBanner .demo-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 32%, transparent); }
#demoBanner .demo-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #demoBanner span[data-i18n] { flex: 1; min-width: 0; }
html[lang="ar"] #demoBanner.demo-banner { direction: rtl; }
html[data-theme] #demoBanner.demo-banner button { flex: none; min-height: 36px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: var(--jw-pill); color: var(--jw-on-pill); border: 0; box-shadow: none; }
/* ==== f107 demo card ==== */ /* end */

/* ==== f108 arc menu v3 ==== */
html[data-theme="glassd"] { --jwa-band: #2a2d34; --jwa-ico: rgba(242, 244, 247, 0.86); }
html[data-theme="glassl"] { --jwa-band: #fdfdfe; --jwa-ico: rgba(18, 23, 34, 0.8); }
html[data-theme="glassd"] { --jwa-pearl-hi: #F4F2EC; --jwa-pearl: #E4E1D8; --jwa-pearl-lo: #BDB9AE; --jwa-ink: #242423; }
html[data-theme="glassl"] { --jwa-pearl-hi: #121722; --jwa-pearl: #121722; --jwa-pearl-lo: #121722; --jwa-ink: #FFFFFF; }
html.jw-arc-on body.mobile-nav-open #sidebar { transform: translateY(110%) !important; visibility: hidden !important; transition: none !important; }
#jwArc { position: fixed; inset: 0; z-index: 2400; pointer-events: none; display: none; }
#jwArc.on { display: block; }
#jwArc .jwa-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3)); }
#jwArc .jwa-goo { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; will-change: transform; }
#jwArc .jwa-band { fill: none; stroke: var(--jwa-band); stroke-width: 55px; stroke-linecap: round; }
#jwArc .jwa-blob { fill: var(--jwa-pearl); transform-box: fill-box; transform-origin: center; }
#jwArc .jwa-hit { fill: none; stroke: transparent; stroke-width: 72px; stroke-linecap: round; pointer-events: stroke; touch-action: none; }
#jwArc .jwa-bead { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
#jwArc .jwa-pearl { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--jwa-pearl-hi), var(--jwa-pearl) 58%, var(--jwa-pearl-lo) 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 10px 1px rgba(228, 225, 216, 0.22), 0 8px 16px -6px rgba(0, 0, 0, 0.45); }
html[data-theme="glassl"] #jwArc .jwa-pearl { background: #121722; box-shadow: none; }   /* flat, no 3D */
#jwArc .jwa-it { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--jwa-ico); display: grid; place-items: center; pointer-events: auto; touch-action: none;
    -webkit-tap-highlight-color: transparent; transition: color .18s ease; }
#jwArc .jwa-it svg { width: 22px; height: 22px; display: block; }
#jwArc .jwa-it.is-f { color: var(--jwa-ink); }
#jwArc .jwa-cap { position: absolute; left: 0; top: 0; width: 190px; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
#jwArc .jwa-name { font-family: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif; font-size: 21px; line-height: 30px; font-weight: 700; color: var(--text-color); }
#jwArc .jwa-hint { font-size: 12px; line-height: 18px; color: var(--secondary-text); margin-top: 2px; }
/* Glass Light: a flat black bead on the phone bar and the tablet menu (no highlight, no shine) */
html.mdk-bar[data-theme="glassl"] { --mdk-bead-hi: #121722; --mdk-bead: #121722; --mdk-ink: #FFFFFF; --mdk-bead-shadow: none; }
html.mds-nav[data-theme="glassl"] { --mds-bead-hi: #121722; --mds-bead: #121722; --mds-ink: #FFFFFF; --mds-bead-shadow: none; }
/* the More tab wearing a hidden page */
#iosBottomNav .ios-tab-more .ios-tab-label { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* ==== f108 arc menu v3 ==== */ /* end */

/* ==== f109 rail melt fit ==== */
html.jw-rail #sbNavStrip { padding-top: 48px !important; padding-bottom: 48px !important; }
/* ==== f109 rail melt fit ==== */ /* end */

/* ==== f110 no yellow text ==== */
/* from styles.css */
html[data-theme] .support-faq-item[open] summary::after { color: var(--jw-hl) !important; }
html[data-theme] .tb-title { color: var(--jw-hl) !important; }
html[data-theme] .spot-bar-21 { color: var(--jw-hl) !important; }
html[data-theme] .sb-collapse-btn:hover { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .sb-nav-item.active { color: var(--jw-hl) !important; }
html[data-theme] .sb-bal-gold { color: var(--jw-hl) !important; }
html[data-theme] .sb-bal-capital .sb-bal-card-title { color: var(--jw-hl) !important; }
html[data-theme] .reconcile-app { color: var(--jw-hl) !important; }
html[data-theme] .act-net .act-label { color: var(--jw-hl) !important; }
html[data-theme] .pending-item-chip .pi-label { color: var(--jw-hl) !important; }
html[data-theme] .avg-sub { color: var(--jw-hl) !important; }
html[data-theme] .avg-val.gold { color: var(--jw-hl) !important; }
html[data-theme] .tc-name { color: var(--jw-hl) !important; }
html[data-theme] .trade-client-name { color: var(--jw-hl) !important; }
html[data-theme] .karat-chip { color: var(--jw-hl) !important; }
html[data-theme] .cap-drop-card[data-cap="gold"] .cap-drop-title { color: var(--jw-hl) !important; }
html[data-theme] .cap-drop-card[data-cap="gold"] .cap-drop-total { color: var(--jw-hl) !important; }
html[data-theme] .dm-this-chip { color: var(--jw-hl) !important; }
html[data-theme] .dm-dev-rename { color: var(--jw-hl) !important; }
html[data-theme] .debt-header h3 { color: var(--jw-hl) !important; }
html[data-theme] .debt-col-mid h4 { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .cp-title { color: var(--jw-hl) !important; }
html[data-theme] .btn-icon-gold { color: var(--jw-hl) !important; }
html[data-theme] .cp-phone-link:hover { color: var(--jw-hl) !important; }
html[data-theme] .btn-settle { color: var(--jw-hl) !important; }
html[data-theme] .tc-convert-btn { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .eod-date-lbl { color: var(--jw-hl) !important; }
html[data-theme] .pl-total-card h3 { color: var(--jw-hl) !important; }
html[data-theme] .conv-selects label { color: var(--jw-hl) !important; }
html[data-theme] .btn-swap { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .card-title { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .modal-content h3 { color: var(--jw-hl) !important; }
html[data-theme] .as-gold { color: var(--jw-hl) !important; }
html[data-theme] .btn-karat-edit { color: var(--jw-hl) !important; }
html[data-theme] .st-fill-btn { color: var(--jw-hl) !important; }
html[data-theme] .settle-preview-title { color: var(--jw-hl) !important; }
html[data-theme] .share-opt.share-system { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .stmt-select-all { color: var(--jw-hl) !important; }
html[data-theme] .code-display { color: var(--jw-hl) !important; }
html[data-theme] .fl-gold strong { color: var(--jw-hl) !important; }
html[data-theme] .name-cell { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .nt-label { color: var(--jw-hl) !important; }
html[data-theme="glassd"] .sb-nav-item.active { color: var(--jw-hl) !important; }
html[data-theme] .rc2-table tbody td small { color: var(--jw-hl) !important; }
html[data-theme] .es-iqd-hint { color: var(--jw-hl) !important; }
html[data-theme] .live-alert .la-title { color: var(--jw-hl) !important; }
html[data-theme] .tf-full { color: var(--jw-hl) !important; }
html[data-theme] .tf-preview b { color: var(--jw-hl) !important; }
html[data-theme] .st-karat-select { color: var(--jw-hl) !important; }
html[data-theme] .karat-more:hover { color: var(--jw-hl) !important; }
html[data-theme] .support-btn { color: var(--jw-hl) !important; }
html[data-theme] .support-phone { color: var(--jw-hl) !important; }
html[data-theme] .ql-avatar-initial { color: var(--jw-hl) !important; }
html[data-theme] .ql-pad .ql-bio { color: var(--jw-hl) !important; }
html[data-theme] .link-btn-gold { color: var(--jw-hl) !important; }
html[data-theme] .app-splash-title { color: var(--jw-hl) !important; }
html[data-theme] .tc-new-btn { color: var(--jw-hl) !important; }
html[data-theme] .dbt-title { color: var(--jw-hl) !important; }
html[data-theme] .md-capital summary { color: var(--jw-hl) !important; }
html[data-theme] .cap-exceeded .md-big,
html[data-theme] .cap-exceeded .cap-state,
html[data-theme] .cap-exceeded .cap-verdict { color: var(--jw-hl) !important; }
html[data-theme] .rc-info { color: var(--jw-hl) !important; }
html[data-theme] .rc-banner { color: var(--jw-hl) !important; }
html[data-theme] .st-gold-echo b { color: var(--jw-hl) !important; }
html[data-theme] .st-gold-echo b.st-conv { color: var(--jw-hl) !important; }
html[data-theme] .st-k + .st-conv-ico { color: var(--jw-hl) !important; }
html[data-theme] .del-sellers { color: var(--jw-hl) !important; }
html[data-theme] .fl-site-link { color: var(--jw-hl) !important; }
html[data-theme] #firstLaunchModal .fl-site-link { color: var(--jw-hl) !important; }
html[data-theme] #swaRoot .swa-cam { color: var(--jw-hl) !important; }
html[data-theme] #swaRoot .swa-ico { color: var(--jw-hl) !important; }
html[data-theme] #qlDots.qo .qo-flash { color: var(--jw-hl) !important; }
html[data-theme] #kHero .kh-stats i,
html[data-theme] #kHero .kh-res i { color: var(--jw-hl) !important; }
html[data-theme="glassl"] .ccp-aging-amber { color: var(--jw-hl) !important; }
html[data-theme="glassl"] .karat-btn[data-karat="21"] { color: var(--jw-hl) !important; }
html[data-theme="glassl"] .client-toolbar ._cat-tab[data-cat="usd"] { color: var(--jw-hl) !important; }
html[data-theme="glassl"] .client-toolbar ._cat-tab[data-cat="usd"]._cat-active { color: var(--jw-hl) !important; }
html[data-theme] #shopInfoPreview .sip-badge { color: var(--jw-hl) !important; }
html[data-theme][data-theme] #customerProfileView .cp-card .cp-title { color: var(--jw-hl) !important; }
html[data-theme][data-theme] #customerProfileView .cp-card .btn-icon-gold { color: var(--jw-hl) !important; }
html[data-theme] #swaList .jw-about a { color: var(--jw-hl) !important; }
html[data-theme] #demoBanner .demo-ico { color: var(--jw-hl) !important; }
/* from mobile.css */
@media (max-width: 600px) {
html[data-theme] .spot-bar-gram { color: var(--jw-hl) !important; }
}
@media (max-width: 600px) {
html[data-theme] .spot-rates-header h2 { color: var(--jw-hl) !important; }
}
html[data-theme] .dm2-tile-gold { color: var(--jw-hl) !important; }
html[data-theme] .settings-lang-btn.active,
html[data-theme][dir="ltr"] .settings-lang-btn[data-lang="en"].active,
html[data-theme][dir="rtl"] .settings-lang-btn[data-lang="ar"].active { color: var(--jw-hl) !important; }
html[data-theme] .dm-card-rename { color: var(--jw-hl) !important; }
@media (max-width: 600px) {
html[data-theme] .client-toolbar ._cat-tab[data-cat="gold"] { color: var(--jw-hl) !important; }
}
@media (max-width: 600px) {
html[data-theme] .client-toolbar ._cat-tab[data-cat="gold"]._cat-active { color: var(--jw-hl) !important; }
}
@media (max-width: 600px) {
html[data-theme] .mb-settle-body .mb-hint { color: var(--jw-hl) !important; }
}
html[data-theme] .mb-settle-header h2 { color: var(--jw-hl) !important; }
@media (max-width: 600px) {
html[data-theme] .ios-bottom-nav .ios-tab.active,
html[data-theme] .ios-bottom-nav .sb-nav-item.ios-tab.active { color: var(--jw-hl) !important; }
}
@media (max-width: 600px) {
html[data-theme="glassd"] #sidebar .sb-nav-item.active { color: var(--jw-hl) !important; }
}
@media (max-width: 600px) {
html[data-theme="glassd"] #sidebar .sb-nav-item.active { color: var(--jw-hl) !important; }
}
/* inline style="color:var(--accent-gold)" in app.js / index.html (background-color / border-color never match: they have no space or ; right before "color") */
html[data-theme] [style^="color:var(--accent-gold)"],
html[data-theme] [style*=";color:var(--accent-gold)"],
html[data-theme] [style*="; color:var(--accent-gold)"],
html[data-theme] [style*=" color:var(--accent-gold)"],
html[data-theme] [style^="color: var(--accent-gold)"],
html[data-theme] [style*=";color: var(--accent-gold)"],
html[data-theme] [style*="; color: var(--accent-gold)"],
html[data-theme] [style*=" color: var(--accent-gold)"] { color: var(--jw-hl) !important; }

/* the small round "new trade" button on trade cards, and the demo badge (f107) */
html[data-theme] .tc-new-btn { color: var(--jw-hl) !important; border-color: color-mix(in srgb, var(--jw-hl) 45%, transparent) !important; }
html[data-theme] #demoBanner .demo-ico { color: var(--jw-hl); background: color-mix(in srgb, var(--jw-hl) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jw-hl) 32%, transparent); }
/* ==== f110 no yellow text ==== */ /* end */

/* ==== f111 rail hold inward ==== */
html.jw-rail #jwMelt { display: none !important; }   /* f111: no outward bulge */
html.jw-rail #sbNavStrip .sb-nav-item, html.jw-rail .jw-rglide { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.jw-rail #sbNavStrip .jw-rmelt { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
html.jw-rail #sbNavStrip .jw-rmelt circle { fill: var(--jw-pill); }
/* ==== f111 rail hold inward ==== */ /* end */

/* ==== f95 manager prices ==== */
/* f95: welcome prices from the manager app (see dev-tools/patches/f95_manager_prices.js) */
html #firstLaunchModal .fl-price.mp-on .fl-price-row { max-width: 380px; }
html #firstLaunchModal .fl-price.mp-on #flPriceIqdCell { order: -2; min-width: 168px; padding: 7px 16px 6px; background: rgba(255, 246, 214, 0.75); border: 1.5px solid rgba(160, 112, 20, 0.55);
  box-shadow: 0 4px 14px rgba(120, 80, 10, 0.14); }
html #firstLaunchModal .fl-price.mp-on #flPriceIqdCell small { font-size: 11px; color: #6B4600; }
html #firstLaunchModal .fl-price.mp-on #flPriceIqdCell b { font-size: 22px; color: #3A2A06; font-variant-numeric: lining-nums tabular-nums; }
html #firstLaunchModal .fl-price.mp-on #flPriceIqdCell b::after { content: " IQD"; font-size: 12px; font-weight: 700; color: #6B4600; }
html[lang="ar"] #firstLaunchModal .fl-price.mp-on #flPriceIqdCell b::after { content: " د.ع"; }
html #firstLaunchModal .fl-price .mp-rate, html #firstLaunchModal .fl-price .mp-break { display: none; }
html #firstLaunchModal .fl-price.mp-on .mp-rate { display: flex; order: -1; align-self: stretch; justify-content: center; }
html #firstLaunchModal .fl-price.mp-on .mp-break { display: block; order: 0; flex-basis: 100%; height: 0; }
html #firstLaunchModal .fl-price.mp-on .fl-price-cell:not(#flPriceIqdCell):not(.mp-rate) { order: 1; }
html #firstLaunchModal .fl-price.mp-on .fl-price-tag { font-weight: 600; }
html #firstLaunchModal .fl-price.mp-on .fl-price-tag:not(:empty)::before { content: "· "; }
@media (min-width: 601px) {
  html #firstLaunchModal .fl-price.mp-on .fl-price-row { max-width: none; }
  html #firstLaunchModal .fl-price.mp-on .mp-break { display: none !important; }
}
@media (max-width: 600px) {
  html.mp-on #firstLaunchModal .fl-slide { padding-top: calc(env(safe-area-inset-top, 0px) + 206px); }
  html.mp-on.kh-ready #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-sub { display: none; }
}
@media (max-width: 600px) and (max-height: 780px) {
  html.mp-on #kHero .kh-lbl { display: none; }
  html.mp-on #kHero .kh-prod { height: 76px; }
  html.mp-on #kHero .kh-item { width: 134px; height: 76px; margin: -38px 0 0 -67px; }
}
#kHero .kh-ci { display: none; font-style: normal; font-size: 12px; font-weight: 600; color: #66614F; margin-inline-start: 3px; }
#kHero .kh-cs { font-style: normal; }
#kHero.kh-iqd .kh-ci { display: inline; }
#kHero.kh-iqd .kh-cs { display: none; }
#kHero.kh-iqd .kh-res .kh-ci { color: #6B4600; }
/* ==== f95 manager prices ==== */ /* end */

/* ==== f112 glass welcome ==== */
/* ground: the app's glass scene + the drifting gold light */
html[data-theme] #firstLaunchModal { background: var(--bg-color) !important; color: var(--text-color) !important; }
html[data-theme] #firstLaunchModal, html[data-theme] #firstLaunchModal button, html[data-theme] #firstLaunchModal input { font-family: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif; }
html[data-theme] #firstLaunchModal .fl-bg { position: absolute !important; inset: 0 !important; overflow: hidden !important; background: transparent !important; pointer-events: none; }
html[data-theme] #firstLaunchModal .fl-bg::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important;
    height: min(100%, 900px) !important; border-radius: 0 !important; background: var(--jw-scene) !important; filter: blur(10px) !important; transform: scale(1.04) !important; opacity: 1 !important; animation: none !important; }
html[data-theme] #firstLaunchModal .fl-bg::after { content: "" !important; position: absolute !important; left: -25% !important; top: 120px !important; right: auto !important; bottom: auto !important; width: 150% !important; height: 260px !important;
    border-radius: 0 !important; transform: rotate(-16deg) !important; opacity: var(--jw-gold-o) !important; filter: blur(34px) !important;
    background: radial-gradient(50% 50% at 50% 50%, var(--jw-gold-light), transparent 72%), radial-gradient(18% 40% at 62% 50%, rgb(255 236 190 / .9), transparent 70%) !important;
    animation: jwBeam 19s ease-in-out infinite alternate !important; }
html[data-theme] #firstLaunchModal .fl-particles .fl-dot { background: color-mix(in srgb, var(--text-color) 40%, transparent) !important; box-shadow: none !important; }
/* titles */
html[data-theme] #firstLaunchModal .fl-hero-title { font-family: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; text-shadow: none !important; filter: none !important;
    background: linear-gradient(180deg, var(--text-color) 30%, color-mix(in srgb, var(--text-color) 62%, var(--bg-color))) !important; -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: var(--text-color) !important; }
html[data-theme] #firstLaunchModal .fl-section-title, html[data-theme] #firstLaunchModal .fl-form-panel h2 { font-family: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important;
    color: var(--text-color) !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
html[data-theme] #firstLaunchModal .fl-hero-sub, html[data-theme] #firstLaunchModal .fl-section-sub, html[data-theme] #firstLaunchModal .fl-form-panel p, html[data-theme] #firstLaunchModal .fl-site-line { color: var(--secondary-text) !important; }
/* language button */
html[data-theme] #firstLaunchModal #flLangBtn { background: var(--jw-glass) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45); color: var(--text-color) !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; gap: 8px; }
html[data-theme] #firstLaunchModal #flLangBtn #flLangLabel { color: var(--text-color) !important; font-weight: 600; }
html[data-theme] #firstLaunchModal #flLangIcon.fl-svg { display: inline-grid; place-items: center; font-size: 0 !important; }
html[data-theme] #firstLaunchModal #flLangIcon.fl-svg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* price strip */
html[data-theme] #firstLaunchModal .fl-price-title, html[data-theme] #firstLaunchModal .fl-price-title span, html[data-theme] #firstLaunchModal .fl-price .fl-price-tag { color: var(--secondary-text) !important; }
html[data-theme] #firstLaunchModal .fl-price-title span:first-child { color: var(--text-color) !important; font-weight: 700; }
html[data-theme] #firstLaunchModal .fl-price-cell { background: var(--jw-glass) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45); border-radius: 16px !important; }
html[data-theme] #firstLaunchModal .fl-price-cell small { color: var(--secondary-text) !important; }
html[data-theme] #firstLaunchModal .fl-price-cell b, html[data-theme] #firstLaunchModal .fl-price-cell b span { color: var(--text-color) !important; font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif !important; }
html[data-theme] #firstLaunchModal .fl-price.mp-on #flPriceIqdCell { background: var(--jw-pill) !important; box-shadow: var(--jw-sel-shadow) !important; }
html[data-theme] #firstLaunchModal .fl-price.mp-on #flPriceIqdCell small, html[data-theme] #firstLaunchModal .fl-price.mp-on #flPriceIqdCell b, html[data-theme] #firstLaunchModal .fl-price.mp-on #flPriceIqdCell b span,
html[data-theme] #firstLaunchModal .fl-price.mp-on #flPriceIqdCell b::after { color: var(--jw-on-pill) !important; }
/* karat card */
html[data-theme] #firstLaunchModal #kHero { background: var(--jw-glass) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45); border-radius: 28px !important; }
html[data-theme] #firstLaunchModal #kHero .kh-lbl, html[data-theme] #firstLaunchModal #kHero .kh-note, html[data-theme] #firstLaunchModal #kHero .kh-note span, html[data-theme] #firstLaunchModal #kHero .kh-calc label, html[data-theme] #firstLaunchModal #kHero .kh-stats small,
html[data-theme] #firstLaunchModal #kHero .kh-stats i, html[data-theme] #firstLaunchModal #kHero .kh-res i, html[data-theme] #firstLaunchModal #kHero .kh-stats b u, html[data-theme] #firstLaunchModal #kHero .kh-res b u, html[data-theme] #firstLaunchModal #kHero .kh-ci, html[data-theme] #firstLaunchModal #kHero .kh-cs { color: var(--secondary-text) !important; }
html[data-theme] #firstLaunchModal #kHero .kh-chips, html[data-theme] #firstLaunchModal #kHero .kh-unit { background: var(--jw-strong) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--jw-edge) !important; }
html[data-theme] #firstLaunchModal #kHero .kh-pill { background: var(--jw-pill) !important; box-shadow: var(--jw-sel-shadow) !important; }
html[data-theme] #firstLaunchModal #kHero .kh-chips button, html[data-theme] #firstLaunchModal #kHero .kh-unit button { color: var(--secondary-text) !important; background: transparent !important; box-shadow: none !important; }
html[data-theme] #firstLaunchModal #kHero .kh-chips button[aria-pressed="true"] { color: var(--jw-on-pill) !important; }
html[data-theme] #firstLaunchModal #kHero .kh-unit button[aria-pressed="true"] { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; box-shadow: var(--jw-sel-shadow) !important; }
html[data-theme] #firstLaunchModal #kHero .kh-stats > div, html[data-theme] #firstLaunchModal #kHero .kh-calc { background: var(--jw-card) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; }
html[data-theme] #firstLaunchModal #kHero .kh-stats > div { border-radius: 18px !important; }
html[data-theme] #firstLaunchModal #kHero .kh-calc { border-radius: 20px !important; }
html[data-theme] #firstLaunchModal #kHero .kh-stats b, html[data-theme] #firstLaunchModal #kHero .kh-num, html[data-theme] #firstLaunchModal #kHero .kh-res-v, html[data-theme] #firstLaunchModal #kHero .kh-res b { color: var(--text-color) !important; font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif !important; }
html[data-theme] #firstLaunchModal #kHero .kh-calc input#khW { background: var(--jw-field) !important; border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--jw-edge) !important; color: var(--text-color) !important; border-radius: 14px !important; }
html[data-theme] #firstLaunchModal #kHero .kh-calc input#khW:focus { box-shadow: inset 0 0 0 2px var(--jw-hl) !important; outline: none !important; }
html[data-theme] #firstLaunchModal #kHero .kh-res { border-color: var(--jw-edge) !important; }
/* feature cards + steps */
html[data-theme] #firstLaunchModal .fl-feat, html[data-theme] #firstLaunchModal .fl-wf-step, html[data-theme] #firstLaunchModal .fl-auth-btn, html[data-theme] #firstLaunchModal .fl-section-badge { background: var(--jw-glass) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45); }
html[data-theme] #firstLaunchModal .fl-feat { border-radius: 22px !important; }
html[data-theme] #firstLaunchModal .fl-wf-step, html[data-theme] #firstLaunchModal .fl-auth-btn { border-radius: 20px !important; }
html[data-theme] #firstLaunchModal .fl-feat-title, html[data-theme] #firstLaunchModal .fl-wf-title, html[data-theme] #firstLaunchModal .fl-auth-label { color: var(--text-color) !important; }
html[data-theme] #firstLaunchModal .fl-feat-desc, html[data-theme] #firstLaunchModal .fl-wf-desc, html[data-theme] #firstLaunchModal .fl-auth-desc { color: var(--secondary-text) !important; }
html[data-theme] #firstLaunchModal .fl-section-badge { color: var(--text-color) !important; border-radius: 999px !important; }
html[data-theme] #firstLaunchModal .fl-wf-num { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border: 0 !important; box-shadow: var(--jw-sel-shadow) !important; border-radius: 50% !important;
    font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif !important; }
html[data-theme] #firstLaunchModal .fl-feat-icon.fl-svg, html[data-theme] #firstLaunchModal .fl-auth-icon.fl-svg { width: 40px !important; height: 40px !important; min-width: 40px; border-radius: 50% !important; display: inline-grid !important; place-items: center;
    background: var(--jw-strong) !important; box-shadow: inset 0 0 0 1px var(--jw-edge) !important; color: var(--text-color) !important; font-size: 0 !important; filter: none !important; flex: none; }
html[data-theme] #firstLaunchModal .fl-feat-icon.fl-svg svg, html[data-theme] #firstLaunchModal .fl-auth-icon.fl-svg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #firstLaunchModal .fl-auth-btn:active { transform: scale(.985); }
html[data-theme] #firstLaunchModal .fl-quick-cards > * { background: var(--jw-glass) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; color: var(--text-color) !important; }
/* the big panel icons */
html[data-theme] #firstLaunchModal #flChoicePanel > div[style*="font-size:48px"] { font-size: 0 !important; width: 72px; height: 72px; margin: 0 auto 14px !important; border-radius: 20px; filter: none !important;
    background: url(assets/icon.png?v=2) center / cover no-repeat; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--jw-edge); }
html[data-theme] #firstLaunchModal #flForgotPanel div[style*="font-size:40px"], html[data-theme] #firstLaunchModal #flPendingPanel div[style*="font-size:48px"], html[data-theme] #firstLaunchModal #flSalesmanPanel div[style*="font-size:48px"] {
    font-size: 0 !important; width: 64px; height: 64px; margin: 4px auto 12px !important; border-radius: 50%; position: relative; filter: none !important; background: var(--jw-glass) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; }
html[data-theme] #firstLaunchModal #flForgotPanel div[style*="font-size:40px"]::before, html[data-theme] #firstLaunchModal #flPendingPanel div[style*="font-size:48px"]::before, html[data-theme] #firstLaunchModal #flSalesmanPanel div[style*="font-size:48px"]::before {
    content: ""; position: absolute; inset: 18px; background: var(--text-color); -webkit-mask: var(--fl-ico) center / contain no-repeat; mask: var(--fl-ico) center / contain no-repeat; }
html[data-theme] #firstLaunchModal #flForgotPanel div[style*="font-size:40px"] { --fl-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M11%2012l9-9M17%206l3%203M14%209l2%202%22%2F%3E%3C%2Fsvg%3E"); }
html[data-theme] #firstLaunchModal #flPendingPanel div[style*="font-size:48px"] { --fl-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
html[data-theme] #firstLaunchModal #flSalesmanPanel div[style*="font-size:48px"] { --fl-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E"); }
/* forms */
html[data-theme] #firstLaunchModal .fl-form-panel input[type="text"], html[data-theme] #firstLaunchModal .fl-form-panel input[type="email"], html[data-theme] #firstLaunchModal .fl-form-panel input[type="password"], html[data-theme] #firstLaunchModal .fl-form-panel input[type="tel"], html[data-theme] #firstLaunchModal .fl-form-panel input:not([type]) {
    background: var(--jw-field) !important; border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--jw-edge) !important; color: var(--text-color) !important; border-radius: 14px !important;
    min-height: 50px; padding: 0 16px !important; font-size: 16px !important; -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45); }
html[data-theme="glassl"] #firstLaunchModal .fl-form-panel input { box-shadow: inset 0 0 0 1px rgba(20, 30, 50, 0.14), 0 6px 14px -10px rgba(30, 40, 60, 0.25) !important; }
html[data-theme] #firstLaunchModal .fl-form-panel input::placeholder { color: var(--secondary-text) !important; opacity: .85; }
html[data-theme] #firstLaunchModal .fl-form-panel input:focus { box-shadow: inset 0 0 0 2px var(--jw-hl) !important; outline: none !important; }
html[data-theme] #firstLaunchModal .fl-form-panel button[style*="width:100%"], html[data-theme] #firstLaunchModal .fl-btn-start, html[data-theme] #firstLaunchModal #flNoReqOpenBtn, html[data-theme] #firstLaunchModal #flNav .fl-btn-next {
    background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; border: 0 !important; border-radius: 999px !important; box-shadow: var(--jw-sel-shadow) !important;
    min-height: 52px; font-weight: 700 !important; text-shadow: none !important; }
html[data-theme] #firstLaunchModal #flNav .fl-btn-next { min-height: 0; }
html[data-theme] #firstLaunchModal #flPendingSignOutBtn, html[data-theme] #firstLaunchModal #flPendingCancelBtn, html[data-theme] #firstLaunchModal .btn-back-fl, html[data-theme] #firstLaunchModal #flNav .fl-btn-prev {
    background: var(--jw-glass) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45); color: var(--text-color) !important; border-radius: 999px !important; text-decoration: none !important; font-weight: 600 !important; }
html[data-theme] #firstLaunchModal .btn-back-fl { padding: 8px 16px !important; }
html[data-theme] #firstLaunchModal .fl-link-btn, html[data-theme] #firstLaunchModal .fl-site-link { color: var(--jw-hl) !important; text-decoration: none !important; font-weight: 600 !important; background: transparent !important; }
html[data-theme] #firstLaunchModal [id$="Msg"] { color: var(--secondary-text); }
/* page dots */
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav { background: color-mix(in srgb, var(--text-color) 22%, transparent) !important; border: 0 !important; box-shadow: none !important; }
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav.active { background: var(--jw-pill) !important; box-shadow: var(--jw-sel-shadow) !important; }
/* wide but short screens (iPad landscape, a PC window): the first slide starts under the one-row price strip instead of behind it */
@media (min-width: 601px) { html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] { padding-top: 160px !important; } }
@media (min-width: 601px) and (max-height: 900px) {
    html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-sub { display: none !important; }
    html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-title { font-size: 34px !important; margin-bottom: 10px !important; }
}
@media (min-width: 601px) and (max-height: 760px) { html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] #kHero .kh-prod { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html[data-theme] #firstLaunchModal .fl-bg::after { animation: none !important; } }
html.jw-android #firstLaunchModal .fl-price-cell, html.jw-android #firstLaunchModal #kHero, html.jw-android #firstLaunchModal .fl-feat, html.jw-android #firstLaunchModal .fl-wf-step,
html.jw-android #firstLaunchModal .fl-auth-btn, html.jw-android #firstLaunchModal #flLangBtn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* ==== f112 glass welcome ==== */ /* end */

/* ==== f114 rail auth ==== */
html[data-theme] #flChoicePanel.ra-on > :not(#jwRauth) { display: none !important; }
html[data-theme] #jwRauth { --h: 340px; --t: .5s; --ease: cubic-bezier(.65, 0, .35, 1); width: 100%; max-width: 440px; margin: 0 auto; text-align: start;
    background: var(--jw-glass); box-shadow: var(--jw-rim); border-radius: 26px; padding: 8px; color: var(--text-color);
    font-family: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif; }
html[data-theme]:not(.jw-android) #jwRauth { -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45); }
/* hero banner: a window onto the app's misty scene, with facet lines and a faint gold glow */
html[data-theme] #jwRauth .ra-hero { position: relative; height: 128px; border-radius: 18px; overflow: hidden; isolation: isolate;
    box-shadow: inset 0 0 0 1px var(--jw-edge), 0 14px 30px -18px rgba(0, 0, 0, 0.55); }
html[data-theme] #jwRauth .ra-hero-bg { position: absolute; inset: -24px 0 -24px; z-index: -1; transition: translate var(--t) var(--ease);
    background-image: linear-gradient(118deg, transparent 49.7%, color-mix(in srgb, var(--text-color) 14%, transparent) 50%, transparent 50.3%),
        linear-gradient(64deg, transparent 49.7%, color-mix(in srgb, var(--text-color) 10%, transparent) 50%, transparent 50.3%),
        radial-gradient(90% 45% at 50% 112%, color-mix(in srgb, var(--jw-gold-light) 45%, transparent), transparent 70%), var(--jw-scene);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 260%; background-position: center, center, center, top; }
html[data-theme] #jwRauth.signup .ra-hero-bg { translate: 0 -24px; }
html[data-theme] #jwRauth .ra-hero-track { height: 200%; transition: translate var(--t) var(--ease); }
html[data-theme] #jwRauth.signup .ra-hero-track { translate: 0 -50%; }
html[data-theme] #jwRauth .ra-hero-slide { height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 18px; text-align: center;
    opacity: 0; transition: opacity var(--t) var(--ease); }
html[data-theme] #jwRauth.signin .ra-hero-slide.ra-in, html[data-theme] #jwRauth.signup .ra-hero-slide.ra-up { opacity: 1; }
html[data-theme] #jwRauth .ra-hero-slide h2 { margin: 0; font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--text-color); }
html[data-theme] #jwRauth .ra-hero-slide p { margin: 0; font-size: 13px; line-height: 20px; color: var(--secondary-text); }
/* tab row with the sliding underline */
html[data-theme] #jwRauth .ra-rail { position: relative; display: flex; height: 54px; margin: 4px 0 0; }
html[data-theme] #jwRauth .ra-tab { all: unset; box-sizing: border-box; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    color: var(--secondary-text); font: 600 15px "IBM Plex Sans Arabic", system-ui, sans-serif; transition: color .3s; -webkit-tap-highlight-color: transparent; }
html[data-theme] #jwRauth .ra-tab[aria-selected="true"] { color: var(--text-color); }
html[data-theme] #jwRauth .ra-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #jwRauth .ra-tab:focus-visible { outline: 2px solid var(--jw-hl); outline-offset: -6px; border-radius: 12px; }
html[data-theme] #jwRauth .ra-bar { position: absolute; bottom: 0; left: 0; width: 50%; height: 3px; pointer-events: none; transition: translate .4s var(--ease); }
html[data-theme] #jwRauth.ra-rtl .ra-bar { left: auto; right: 0; }
html[data-theme] #jwRauth .ra-bar::after { content: ""; display: block; width: 56px; height: 3px; margin: 0 auto; border-radius: 3px 3px 0 0; background: var(--jw-pill); }
html[data-theme] #jwRauth.signup .ra-bar { translate: 100% 0; }
html[data-theme] #jwRauth.ra-rtl.signup .ra-bar { translate: -100% 0; }
/* the two forms, stacked in a 200 % track that slides one form height */
html[data-theme] #jwRauth .ra-pane { position: relative; height: var(--h); overflow: hidden; border-radius: 0 0 20px 20px; transition: height .3s var(--ease); }
html[data-theme] #jwRauth .ra-forms { height: calc(var(--h) * 2); transition: translate var(--t) var(--ease); }
html[data-theme] #jwRauth.signup .ra-forms { translate: 0 calc(var(--h) * -1); }
html[data-theme] #jwRauth .ra-form { height: var(--h); display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px 12px 14px; transition: opacity var(--t) var(--ease); }
html[data-theme] #jwRauth .ra-form[inert] { opacity: .2; }
html[data-theme] #jwRauth .ra-swap { margin: 0; text-align: center; font-size: 13px; color: var(--secondary-text); }
html[data-theme] #jwRauth .ra-swap button, html[data-theme] #jwRauth .ra-link { all: unset; cursor: pointer; color: var(--jw-hl); font-weight: 600; }
html[data-theme] #jwRauth .ra-field { display: grid; gap: 6px; }
html[data-theme] #jwRauth .ra-field label { font-size: 13px; font-weight: 600; color: var(--text-color); }
html[data-theme] #jwRauth .ra-input { position: relative; }
html[data-theme] #jwRauth .ra-input input { width: 100% !important; height: 48px !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box; border: 0 !important; border-radius: 14px !important;
    padding: 0 46px 0 14px !important; background: var(--jw-field) !important; box-shadow: inset 0 0 0 1.5px var(--jw-edge) !important; color: var(--text-color) !important;
    font: 400 16px "IBM Plex Sans Arabic", system-ui, sans-serif !important; outline: none !important; text-align: start; }
html[data-theme] #jwRauth.ra-rtl .ra-input input { padding: 0 14px 0 46px !important; }
html[data-theme="glassl"] #jwRauth .ra-input input { box-shadow: inset 0 0 0 1px rgba(20, 30, 50, 0.14), 0 6px 14px -10px rgba(30, 40, 60, 0.25) !important; }
html[data-theme] #jwRauth .ra-input input:focus { box-shadow: inset 0 0 0 2px var(--jw-hl) !important; }
html[data-theme] #jwRauth .ra-input input::placeholder { color: var(--secondary-text); }
html[data-theme] #jwRauth .ra-ico { position: absolute; top: 0; bottom: 0; right: 4px; width: 40px; display: grid; place-items: center; color: var(--secondary-text); border: 0; background: none; padding: 0; }
html[data-theme] #jwRauth.ra-rtl .ra-ico { right: auto; left: 4px; }
html[data-theme] #jwRauth button.ra-ico { cursor: pointer; }
html[data-theme] #jwRauth .ra-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #jwRauth .ra-row { display: flex; justify-content: flex-end; font-size: 13px; }
html[data-theme] #jwRauth.ra-rtl .ra-row { justify-content: flex-start; }
html[data-theme] #jwRauth #flSiMsg { min-height: 0 !important; margin: 0 !important; font-size: 13px; text-align: center; }
html[data-theme] #jwRauth #flSiMsg:empty { display: none; }
html[data-theme] #jwRauth .ra-primary, html[data-theme] #jwRauth #flSiBtn { all: unset; box-sizing: border-box; width: 100%; height: 50px; display: flex !important; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    border-radius: 999px; background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; box-shadow: var(--jw-sel-shadow) !important; font: 700 15px "IBM Plex Sans Arabic", system-ui, sans-serif; text-align: center; }
html[data-theme] #jwRauth .ra-primary:active, html[data-theme] #jwRauth #flSiBtn:active { transform: scale(.985); }
html[data-theme] #jwRauth .ra-or { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--secondary-text); }
html[data-theme] #jwRauth .ra-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-theme] #jwRauth .ra-alt { all: unset; box-sizing: border-box; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    background: var(--jw-strong); box-shadow: inset 0 0 0 1px var(--jw-edge); color: var(--text-color); font: 600 14px "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[data-theme] #jwRauth .ra-alt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #jwRauth .ra-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html[data-theme] #jwRauth .ra-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--jw-strong); box-shadow: inset 0 0 0 1px var(--jw-edge);
    font-size: 13px; line-height: 19px; color: var(--text-color); }
html[data-theme] #jwRauth .ra-steps b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--jw-pill); color: var(--jw-on-pill);
    font: 700 13px "Readex Pro", system-ui, sans-serif; }
html[data-theme] #jwRauth .ra-note { margin: 0; text-align: center; font-size: 12px; color: var(--secondary-text); }
html[data-theme] #jwRauth #flQuickCards { margin: 0 0 4px; }
/* Arabic reads right to left (the app keeps an LTR page); typed emails keep their own direction */
html[lang="ar"][data-theme] #jwRauth { direction: rtl; }
html[data-theme] #jwRauth .ra-input input { unicode-bidi: plaintext; }
/* phones: a little tighter so the card clears the Back / dots row */
@media (max-width: 600px) {
    html[data-theme] #jwRauth .ra-hero { height: 104px; }
    html[data-theme] #jwRauth .ra-hero-slide h2 { font-size: 20px; line-height: 26px; }
    html[data-theme] #jwRauth .ra-rail { height: 50px; margin-top: 2px; }
    html[data-theme] #jwRauth .ra-form { gap: 8px; padding: 8px 10px 10px; }
    html[data-theme] #jwRauth .ra-input input { height: 46px !important; }
    html[data-theme] #jwRauth .ra-primary, html[data-theme] #jwRauth #flSiBtn { height: 48px; }
    html[data-theme] #jwRauth .ra-alt { height: 42px; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme] #jwRauth { --t: .01s; } html[data-theme] #jwRauth .ra-bar { transition-duration: .01s; } }
/* ==== f114 rail auth ==== */ /* end */

/* ==== f115 welcome tidy ==== */
/* 3 · nothing from the app shows through the welcome screen */
.receipt-panel { visibility: hidden; transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.32s; }
.receipt-panel.open { visibility: visible; transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
html.fl-on #receiptPanel, html.fl-on #spotBar, html.fl-on #iosBottomNav, html.fl-on #jwArc, html.fl-on #sidebar, html.fl-on #jwMelt { visibility: hidden !important; }
html[data-theme] #firstLaunchModal #flLangBtn { top: calc(env(safe-area-inset-top, 0px) + 10px) !important; }
/* 1 · the price header lives on the first page only */
html[data-theme] #firstLaunchModal #flPrice { transition: opacity .25s ease, visibility 0s linear 0s; }
html[data-theme] #firstLaunchModal:not(.fl-s0) #flPrice { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
@media (max-width: 600px) { html.mp-on[data-theme] #firstLaunchModal:not(.fl-s0) .fl-slide { padding-top: calc(env(safe-area-inset-top, 0px) + 64px) !important; } }
/* 2 · first page: no gold bar, no exchange-rate cell, a solid app name */
html[data-theme] #kHero .kh-prod { display: none !important; }
html[data-theme] #firstLaunchModal .fl-price .mp-rate { display: none !important; }
html[data-theme] #firstLaunchModal .fl-hero-title { background: none !important; -webkit-text-fill-color: var(--text-color) !important; color: var(--text-color) !important;
    line-height: 1.4 !important; padding-bottom: 4px !important; overflow: visible !important; }
/* 1 · saved accounts: a drop-down of compact rows */
html[data-theme] #jwRauth .ra-saved { display: grid; gap: 8px; }
html[data-theme] #jwRauth .ra-saved[hidden] { display: none; }
html[data-theme] #jwRauth .ra-saved-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 14px; border-radius: 14px; cursor: pointer;
    background: var(--jw-strong); box-shadow: inset 0 0 0 1px var(--jw-edge); color: var(--text-color); font: 600 14px "IBM Plex Sans Arabic", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
html[data-theme] #jwRauth .ra-saved-btn .ra-saved-ico, html[data-theme] #jwRauth .ra-saved-btn .ra-chev { display: grid; place-items: center; flex: none; color: var(--secondary-text); }
html[data-theme] #jwRauth .ra-saved-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #jwRauth .ra-saved-btn .ra-saved-txt { flex: 1 1 auto; text-align: start; }
html[data-theme] #jwRauth .ra-saved-btn .ra-count { flex: none; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center;
    background: var(--jw-pill); color: var(--jw-on-pill); font: 700 12px "Readex Pro", system-ui, sans-serif; }
html[data-theme] #jwRauth .ra-saved-btn .ra-chev { transition: transform .25s ease; }
html[data-theme] #jwRauth .ra-saved.open .ra-chev { transform: rotate(180deg); }
html[data-theme] #jwRauth .ra-saved:not(.open) #flQuickCards { display: none !important; }
html[data-theme] #jwRauth #flQuickCards.fl-quick-cards { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: none; margin: 0 !important; }
html[data-theme] #jwRauth .fl-quick-card { position: relative !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "av name btn x" "av sub btn x" "msg msg msg msg";
    align-items: center; column-gap: 10px; row-gap: 0; max-width: none !important; margin: 0 !important; padding: 10px 10px 10px 12px !important; border-radius: 16px !important; text-align: start;
    background: var(--jw-card) !important; border: 0 !important; box-shadow: var(--jw-rim) !important; }
html[data-theme] #jwRauth .fl-quick-avatar { grid-area: av; margin: 0 !important; width: 42px; height: 42px; }
html[data-theme] #jwRauth .fl-quick-avatar > *, html[data-theme] #jwRauth .fl-quick-avatar img { width: 42px !important; height: 42px !important; min-width: 0 !important; font-size: 17px !important; line-height: 42px !important;
    border-radius: 50% !important; box-shadow: 0 0 0 1.5px var(--jw-edge) !important; border: 0 !important; }
html[data-theme] #jwRauth .fl-quick-name { grid-area: name; align-self: end; margin: 0 !important; font: 700 14px/20px "IBM Plex Sans Arabic", system-ui, sans-serif !important; color: var(--text-color) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] #jwRauth .fl-quick-sub { grid-area: sub; align-self: start; margin: 0 !important; font-size: 12px !important; line-height: 17px; color: var(--secondary-text) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: plaintext; }
html[data-theme] #jwRauth .fl-quick-btns { grid-area: btn; display: flex !important; flex-direction: row !important; gap: 6px !important; margin: 0 !important; }
html[data-theme] #jwRauth .fl-quick-btn { width: auto !important; min-height: 0 !important; height: 36px; padding: 0 12px !important; gap: 6px !important; border-radius: 999px !important; border: 0 !important;
    background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; box-shadow: none !important; font: 700 13px "IBM Plex Sans Arabic", system-ui, sans-serif !important; white-space: nowrap; }
html[data-theme] #jwRauth .fl-quick-btn .ico { width: 16px !important; height: 16px !important; }
html[data-theme] #jwRauth .fl-quick-x { grid-area: x; position: static !important; inset: auto !important; width: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important; border: 0 !important; background: var(--jw-strong) !important; box-shadow: inset 0 0 0 1px var(--jw-edge) !important; color: var(--secondary-text) !important;
    font-size: 12px !important; line-height: 30px !important; display: grid !important; place-items: center; cursor: pointer; }
html[data-theme] #jwRauth .fl-quick-msg { grid-area: msg; margin: 6px 0 0 !important; min-height: 0 !important; font-size: 12px !important; }
html[data-theme] #jwRauth .fl-quick-msg:empty { display: none; }
/* phones: room for the open list under any number of saved accounts (it scrolls past three) */
@media (max-width: 600px) {
    html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="4"] { padding-top: calc(env(safe-area-inset-top, 0px) + 56px) !important; }
    html[data-theme] #jwRauth .ra-hero { height: 92px; }
    html[data-theme] #jwRauth .fl-quick-card { padding: 8px 8px 8px 10px !important; }
    html[data-theme] #jwRauth .fl-quick-avatar, html[data-theme] #jwRauth .fl-quick-avatar > *, html[data-theme] #jwRauth .fl-quick-avatar img { width: 38px !important; height: 38px !important; line-height: 38px !important; }
    html[data-theme] #jwRauth .fl-quick-btn { height: 34px; }
    html[data-theme] #jwRauth .fl-quick-btn:has(svg) { width: 38px !important; height: 38px; padding: 0 !important; justify-content: center; }   /* PIN / Face ID → a round icon: the name and email get the room */
    html[data-theme] #jwRauth .fl-quick-btn:has(svg) span { display: none !important; }
    html[data-theme] #jwRauth .ra-saved.open #flQuickCards { max-height: 190px; overflow-y: auto; overscroll-behavior: contain; }
}
/* ==== f115 welcome tidy ==== */ /* end */

/* ==== f116 welcome layout ==== */
/* ── page dots + swipe hint (no Back / Next buttons) ── */
html[data-theme] #firstLaunchModal #flPrevBtn, html[data-theme] #firstLaunchModal #flNextBtn { display: none !important; }
html[data-theme] #firstLaunchModal #flNav { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 8px !important; }
html[data-theme] #firstLaunchModal #flDots { display: flex !important; align-items: center; justify-content: center; gap: 2px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important; }
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav { box-sizing: content-box !important; width: 8px !important; height: 8px !important; min-width: 0 !important; min-height: 0 !important; max-height: 8px !important; line-height: 0 !important; font-size: 0 !important; padding: 10px 5px !important; margin: 0 !important; flex: none !important;
    border: 0 !important; border-radius: 999px !important; background-clip: content-box !important; background-color: color-mix(in srgb, var(--text-color) 28%, transparent) !important;
    box-shadow: none !important; transition: width .3s cubic-bezier(.65, 0, .35, 1), background-color .3s !important; cursor: pointer; }
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav.active { width: 24px !important; background-color: var(--jw-pill) !important; }
html[data-theme] #firstLaunchModal #flSwipeHint { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--secondary-text); transition: opacity .3s ease; pointer-events: none; }
html[data-theme] #firstLaunchModal #flSwipeHint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: flSwipeNudge 1.6s ease-in-out infinite; }
html[data-theme] #firstLaunchModal #flSwipeHint.off { opacity: 0; }
html[data-theme] #firstLaunchModal.fl-last #flSwipeHint { display: none; }   /* the last page: nothing to swipe on to — and the room goes to the card */
@keyframes flSwipeNudge { 0%, 100% { transform: translateX(0); opacity: .55; } 50% { transform: translateX(-7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-theme] #firstLaunchModal #flSwipeHint svg { animation: none; } }
html[data-theme] #firstLaunchModal #flSlides, html[data-theme] #firstLaunchModal .fl-slide { touch-action: pan-y; }   /* each slide scrolls on its own: the horizontal swipe has to be ours on the slide itself */
/* ── sign-in page: the card fills the screen ── */
@media (max-width: 600px) {
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="4"] { padding-left: 12px !important; padding-right: 12px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="4"] .fl-slide-inner { max-width: none !important; }
    html[data-theme] #firstLaunchModal #jwRauth { max-width: none; width: 100%; display: flex; flex-direction: column;
        min-height: calc(100svh - env(safe-area-inset-top, 0px) - 56px - 112px - env(safe-area-inset-bottom, 0px)); }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero { flex: 1 1 auto; height: auto !important; min-height: 84px; max-height: 220px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-rail, html[data-theme] #firstLaunchModal #jwRauth .ra-pane { flex: none; }
}
/* ── first page: name on top, prices inside a bigger karat card ── */
html[data-theme] #firstLaunchModal .fl-hero-title { font-family: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; }
html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] { padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; }
html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-title { font-size: 30px !important; line-height: 44px !important; margin: 0 0 12px !important; padding: 0 !important; }
html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-sub { display: none !important; }
html[data-theme] #firstLaunchModal #kHero #flPrice { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; z-index: auto !important; }
html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-row { justify-content: center; }
html[data-theme] #firstLaunchModal #kHero .kh-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
html[data-theme] #firstLaunchModal #kHero .kh-stats > div:nth-child(3) { display: none !important; }
html[data-theme] #firstLaunchModal #kHero .kh-stats b { font-size: 20px !important; }
@media (max-width: 600px) {
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] { padding-left: 12px !important; padding-right: 12px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-slide-inner { max-width: none !important; }
    html[data-theme] #firstLaunchModal #kHero { width: 100% !important; max-width: none !important; box-sizing: border-box; display: flex !important; flex-direction: column; justify-content: space-between; gap: 16px !important;
        padding: 18px 14px !important; min-height: calc(100svh - env(safe-area-inset-top, 0px) - 14px - 56px - 112px - env(safe-area-inset-bottom, 0px)); }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell { flex: 1 1 0; min-width: 0; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell { flex: 1 1 100%; padding-top: 12px !important; padding-bottom: 12px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell b { font-size: 28px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-chips button { font-size: 16px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats > div { padding: 14px 8px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc { padding: 16px 14px !important; }
}
@media (min-width: 601px) {
    html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] { padding-top: calc(env(safe-area-inset-top, 0px) + 28px) !important; }
    html[data-theme] #firstLaunchModal #kHero { max-width: 560px !important; width: 100% !important; box-sizing: border-box; gap: 16px !important; }
}
/* ==== f116 welcome layout ==== */ /* end */

/* ==== f117 welcome large ==== */
/* page dots: a real circle drawn by ::before, the button stays a comfortable hit area */
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav { box-sizing: border-box !important; position: relative; width: 18px !important; height: 28px !important; max-height: none !important; padding: 0 !important;
    background: transparent !important; background-clip: border-box !important; transition: width .3s cubic-bezier(.65, 0, .35, 1) !important; }
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 999px; transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--text-color) 30%, transparent); transition: width .3s cubic-bezier(.65, 0, .35, 1), background-color .3s; }
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav.active { width: 34px !important; background: transparent !important; }
html[data-theme] #firstLaunchModal #flDots .fl-dot-nav.active::before { width: 24px; background: var(--jw-pill); }
@media (min-width: 768px) {
    /* first page */
    html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] { padding: calc(env(safe-area-inset-top, 0px) + 24px) 32px 120px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-slide-inner { max-width: 880px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-title { font-size: 42px !important; line-height: 58px !important; margin-bottom: 16px !important; }
    html[data-theme] #firstLaunchModal #kHero { max-width: 880px !important; width: 100% !important; box-sizing: border-box; display: flex !important; flex-direction: column; justify-content: space-between;
        gap: 22px !important; padding: 28px 30px !important; border-radius: 32px !important; min-height: calc(100svh - env(safe-area-inset-top, 0px) - 24px - 74px - 150px); }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-title, html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-title span { font-size: 16px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-row { gap: 12px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell { padding: 14px 22px !important; border-radius: 20px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell small { font-size: 14px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell b, html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell b span { font-size: 24px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell { padding: 16px 34px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell small { font-size: 15px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell b, html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell b span { font-size: 38px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-lbl { font-size: 16px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-chips button { font-size: 20px !important; padding: 12px 30px !important; min-height: 52px; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats { gap: 14px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats > div { padding: 20px 14px !important; border-radius: 22px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats small { font-size: 16px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats b { font-size: 32px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats i { font-size: 15px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc { padding: 22px 24px !important; border-radius: 24px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc label { font-size: 16px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc input#khW { height: 60px !important; font-size: 24px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-unit button { font-size: 18px !important; padding: 12px 22px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-res-v b, html[data-theme] #firstLaunchModal #kHero .kh-res b { font-size: 34px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-res i { font-size: 15px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-note, html[data-theme] #firstLaunchModal #kHero .kh-note span { font-size: 14px !important; }
    /* sign-in page */
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="4"] { padding: calc(env(safe-area-inset-top, 0px) + 72px) 32px 120px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="4"] .fl-slide-inner { max-width: 720px !important; }
    html[data-theme] #firstLaunchModal #jwRauth { max-width: 720px; width: 100%; display: flex; flex-direction: column; padding: 10px; border-radius: 32px;
        min-height: calc(100svh - env(safe-area-inset-top, 0px) - 72px - 150px); }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero { flex: 1 1 auto; height: auto !important; min-height: 150px; max-height: 300px; border-radius: 24px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide h2 { font-size: 34px; line-height: 44px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide p { font-size: 17px; line-height: 26px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-rail { height: 64px; flex: none; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-tab { font-size: 18px; gap: 10px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-tab svg { width: 24px; height: 24px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-bar::after { width: 80px; height: 4px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-pane { flex: none; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-form { gap: 14px; padding: 18px 26px 22px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-swap, html[data-theme] #firstLaunchModal #jwRauth .ra-row, html[data-theme] #firstLaunchModal #jwRauth .ra-or, html[data-theme] #firstLaunchModal #jwRauth .ra-note { font-size: 16px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-field { gap: 8px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-field label { font-size: 16px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-input input { height: 60px !important; font-size: 18px !important; border-radius: 16px !important; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-ico { width: 48px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-ico svg { width: 22px; height: 22px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-primary, html[data-theme] #firstLaunchModal #jwRauth #flSiBtn { height: 60px; font-size: 18px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-alt { height: 56px; font-size: 17px; border-radius: 16px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-alt svg { width: 22px; height: 22px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-steps li { font-size: 16px; line-height: 24px; padding: 14px 16px; border-radius: 18px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-steps b { width: 32px; height: 32px; font-size: 15px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-saved-btn { min-height: 56px; font-size: 16px; }
    html[data-theme] #firstLaunchModal #jwRauth .fl-quick-name { font-size: 16px !important; }
    html[data-theme] #firstLaunchModal #jwRauth .fl-quick-sub { font-size: 14px !important; }
    html[data-theme] #firstLaunchModal #flSwipeHint { font-size: 15px; }
}
/* tall screens (iPad portrait, big monitors): the 21K dinar price on its own row, the three dollar prices evenly below */
@media (min-width: 768px) and (min-height: 901px) {
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-row { flex-wrap: wrap !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell { flex: 1 1 100% !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell:not(#flPriceIqdCell) { flex: 1 1 0 !important; min-width: 0; }
}
/* wide but short (iPad landscape, a 1280 × 800 window): the same layout, sized to the height */
@media (min-width: 768px) and (max-height: 900px) {
    html.mp-on[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] { padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; padding-bottom: 96px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-title { font-size: 32px !important; line-height: 44px !important; margin-bottom: 10px !important; }
    html[data-theme] #firstLaunchModal #kHero { gap: 14px !important; padding: 18px 24px !important; min-height: 0; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell { padding: 9px 18px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell { padding: 10px 28px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell b, html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-cell b span { font-size: 20px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell b, html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell b span { font-size: 30px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-chips button { font-size: 18px !important; padding: 9px 26px !important; min-height: 44px; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats > div { padding: 12px 12px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats b { font-size: 26px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc { padding: 14px 20px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc input#khW { height: 52px !important; font-size: 20px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-res-v b, html[data-theme] #firstLaunchModal #kHero .kh-res b { font-size: 28px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="4"] { padding-top: calc(env(safe-area-inset-top, 0px) + 60px) !important; padding-bottom: 96px !important; }
    html[data-theme] #firstLaunchModal #jwRauth { min-height: 0; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero { min-height: 110px; max-height: 150px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide h2 { font-size: 28px; line-height: 36px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-rail { height: 56px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-form { gap: 10px; padding: 12px 24px 16px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-input input { height: 52px !important; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-primary, html[data-theme] #firstLaunchModal #jwRauth #flSiBtn { height: 54px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-alt { height: 50px; }
}
/* a small window (≤ 720 px tall) */
@media (min-width: 768px) and (max-height: 720px) {
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-title { font-size: 26px !important; line-height: 36px !important; margin-bottom: 6px !important; }
    html[data-theme] #firstLaunchModal #kHero { gap: 10px !important; padding: 14px 20px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-note, html[data-theme] #firstLaunchModal #kHero .kh-lbl { display: none !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice .fl-price-title { margin-bottom: 4px !important; }
    html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell b, html[data-theme] #firstLaunchModal #kHero #flPrice #flPriceIqdCell b span { font-size: 26px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-chips button { min-height: 40px; padding: 7px 22px !important; font-size: 17px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats > div { padding: 9px 10px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats b { font-size: 22px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc { padding: 10px 18px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc input#khW { height: 46px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-res-v b, html[data-theme] #firstLaunchModal #kHero .kh-res b { font-size: 24px !important; }
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="4"] { padding-top: calc(env(safe-area-inset-top, 0px) + 54px) !important; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero { min-height: 84px; max-height: 96px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide h2 { font-size: 24px; line-height: 30px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide p { font-size: 15px; line-height: 20px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-rail { height: 50px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-form { gap: 8px; padding: 8px 22px 12px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-input input { height: 48px !important; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-primary, html[data-theme] #firstLaunchModal #jwRauth #flSiBtn { height: 50px; }
    html[data-theme] #firstLaunchModal #jwRauth .ra-alt { height: 46px; }
}
/* ==== f117 welcome large ==== */ /* end */

/* ==== f119 hero theme btn ==== */
/* banner: both messages laid over the banner, centred, sliding vertically */
html[data-theme] #jwRauth .ra-hero-track { position: absolute !important; inset: 0 !important; height: auto !important; translate: none !important; transition: none !important; }
html[data-theme] #jwRauth .ra-hero-slide { position: absolute; inset: 0; height: auto !important; translate: 0 0; transition: opacity var(--t) var(--ease), translate var(--t) var(--ease); }
html[data-theme] #jwRauth.signin .ra-hero-slide.ra-up { translate: 0 100%; }
html[data-theme] #jwRauth.signup .ra-hero-slide.ra-in { translate: 0 -100%; }
html[data-theme] #jwRauth .ra-hero-slide h2 { font-family: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif !important; font-weight: 700; }
/* light / dark button beside the language button */
html[data-theme] #firstLaunchModal #flThemeBtn { position: absolute; z-index: 10; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--jw-glass); box-shadow: var(--jw-rim); color: var(--text-color); -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
html[data-theme]:not(.jw-android) #firstLaunchModal #flThemeBtn { -webkit-backdrop-filter: blur(22px) saturate(1.45); backdrop-filter: blur(22px) saturate(1.45); }
html[data-theme] #firstLaunchModal #flThemeBtn:active { transform: scale(.92); }
html[data-theme] #firstLaunchModal #flThemeBtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #firstLaunchModal #flThemeBtn:focus-visible { outline: 2px solid var(--jw-hl); outline-offset: 2px; }
/* ==== f119 hero theme btn ==== */ /* end */

/* ==== f120 header pill ==== */
#jwTopShield { display: none; }
@media (max-width: 600px) {
html[data-theme="glassd"] #spotBar,
html[data-theme="glassl"] #spotBar { top: calc(env(safe-area-inset-top, 0px) + 6px) !important; left: 6px !important; right: 6px !important; border-radius: 28px !important;
    padding: 16px 10px 10px !important; row-gap: 12px !important; }
html[data-theme="glassd"] .tb-keys,
html[data-theme="glassl"] .tb-keys { top: 10px !important; }
html[data-theme="glassd"] .tb-keys-left,
html[data-theme="glassl"] .tb-keys-left { left: 10px !important; }
html[data-theme="glassd"] .tb-keys-right,
html[data-theme="glassl"] .tb-keys-right { right: 10px !important; }
html[data-theme="glassd"] #jwTopShield,
html[data-theme="glassl"] #jwTopShield { display: block; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 119; pointer-events: none;
    background: linear-gradient(to bottom, var(--jw-glass), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
html[data-theme]:not(.jw-android) #jwTopShield { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.fl-on #jwTopShield { visibility: hidden !important; }
}
/* ==== f120 header pill ==== */ /* end */

/* ==== f121 karat align ==== */
html[data-theme] #firstLaunchModal #kHero .kh-chips { align-self: center !important; width: max-content !important; max-width: 100%; margin-inline: auto !important; box-sizing: border-box; }
html[data-theme] #firstLaunchModal #kHero .kh-chips button, html[data-theme] #firstLaunchModal #kHero .kh-unit button { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.2 !important; }
html[data-theme] #firstLaunchModal #kHero .kh-unit button { height: auto !important; min-height: 34px; padding-block: 0 !important; }
html[data-theme] #firstLaunchModal #kHero .kh-unit { align-items: stretch; }
html[data-theme] #firstLaunchModal #kHero .kh-in { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
html[data-theme] #firstLaunchModal #kHero .kh-in > label { text-align: center !important; }
html[data-theme] #firstLaunchModal #kHero .kh-wrow { width: 100% !important; justify-content: center !important; }
html[data-theme] #firstLaunchModal #kHero .kh-calc input#khW { text-align: center !important; }
html[data-theme] #firstLaunchModal #kHero .kh-res { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; text-align: center !important; }
html[data-theme] #firstLaunchModal #kHero .kh-res label, html[data-theme] #firstLaunchModal #kHero .kh-res-v, html[data-theme] #firstLaunchModal #kHero .kh-res-v b, html[data-theme] #firstLaunchModal #kHero .kh-res-v i { text-align: center !important; }
html[data-theme] #firstLaunchModal #kHero .kh-stats > div { text-align: center !important; }
/* ==== f121 karat align ==== */ /* end */

/* ==== f122 my accounts tab ==== */
/* bigger banner text */
html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide h2 { font-size: 30px; line-height: 38px; }
html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide p { font-size: 16px; line-height: 24px; }
@media (min-width: 768px) { html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide h2 { font-size: 40px; line-height: 50px; } html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide p { font-size: 20px; line-height: 30px; } }
@media (min-width: 768px) and (max-height: 900px) { html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide h2 { font-size: 34px; line-height: 42px; } html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide p { font-size: 18px; line-height: 26px; } }
@media (min-width: 768px) and (max-height: 720px) { html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide h2 { font-size: 28px; line-height: 34px; } html[data-theme] #firstLaunchModal #jwRauth .ra-hero-slide p { font-size: 16px; line-height: 22px; } }
/* the old drop-down is replaced by the tab */
html[data-theme] #jwRauth .ra-saved { display: none !important; }
html[data-theme] #jwRauth .ra-tab[data-v="acc"], html[data-theme] #jwRauth .ra-form.ra-acc { display: none; }
html[data-theme] #jwRauth.ra-has-acc .ra-tab[data-v="acc"] { display: flex; }
html[data-theme] #jwRauth.ra-has-acc .ra-form.ra-acc { display: flex; }
/* three tabs: equal thirds, the underline moves a third at a time */
html[data-theme] #jwRauth.ra-has-acc .ra-bar { width: 33.3334%; }
html[data-theme] #jwRauth.ra-has-acc.acc .ra-bar { translate: 100% 0; }
html[data-theme] #jwRauth.ra-has-acc.signup .ra-bar { translate: 200% 0; }
html[data-theme] #jwRauth.ra-has-acc.ra-rtl.acc .ra-bar { translate: -100% 0; }
html[data-theme] #jwRauth.ra-has-acc.ra-rtl.signup .ra-bar { translate: -200% 0; }
html[data-theme] #jwRauth.ra-has-acc .ra-tab { min-width: 0; padding: 0 4px; text-align: center; }
html[data-theme] #jwRauth.ra-has-acc .ra-tab span { white-space: nowrap; }
@media (max-width: 600px) { html[data-theme] #jwRauth.ra-has-acc .ra-tab { gap: 6px; font-size: 14px; } html[data-theme] #jwRauth.ra-has-acc .ra-tab svg { width: 18px; height: 18px; } }
@media (max-width: 380px) { html[data-theme] #jwRauth.ra-has-acc .ra-tab svg { display: none; } }
/* panels in tab order: sign in, my accounts, open account */
html[data-theme] #jwRauth.ra-has-acc .ra-forms { height: calc(var(--h) * 3); }
html[data-theme] #jwRauth.ra-has-acc.acc .ra-forms { translate: 0 calc(var(--h) * -1); }
html[data-theme] #jwRauth.ra-has-acc.signup .ra-forms { translate: 0 calc(var(--h) * -2); }
html[data-theme] #jwRauth .ra-form.ra-acc { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
html[data-theme] #jwRauth .ra-acc > #flQuickCards.fl-quick-cards { margin: auto 0 0 !important; }
html[data-theme] #jwRauth .ra-acc > .ra-swap { margin: 4px 0 auto !important; }
/* banner: a third message, sliding in the same order */
html[data-theme] #jwRauth .ra-hero-slide.ra-acc { pointer-events: none; }
html[data-theme] #jwRauth.acc .ra-hero-slide.ra-acc { opacity: 1; }
html[data-theme] #jwRauth.signin .ra-hero-slide.ra-acc, html[data-theme] #jwRauth.acc .ra-hero-slide.ra-up { translate: 0 100%; }
html[data-theme] #jwRauth.signup .ra-hero-slide.ra-acc, html[data-theme] #jwRauth.acc .ra-hero-slide.ra-in { translate: 0 -100%; }
html[data-theme] #jwRauth.acc .ra-hero-bg { translate: 0 -12px; }
/* ==== f122 my accounts tab ==== */ /* end */

/* ==== f123 welcome no vscroll ==== */
html.fl-on, html.fl-on body { overflow: hidden !important; overscroll-behavior: none !important; }
html.fl-on #firstLaunchModal, html.fl-on #firstLaunchModal .fl-slide { overscroll-behavior: contain; }
@media (max-width: 600px) {
    html[data-theme] #firstLaunchModal #kHero { gap: 12px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-lbl { margin-bottom: 0 !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-stats > div { padding: 10px 8px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-calc { padding: 12px 14px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-in { gap: 6px !important; }
    html[data-theme] #firstLaunchModal #kHero .kh-res { margin-top: 6px !important; padding-top: 6px !important; }
}
/* ==== f123 welcome no vscroll ==== */ /* end */

/* ==== f127 settle sheet glass ==== */
/* the direction colours a shade deeper than the trade buttons so white text reads (5.0:1 / 4.7:1) */
html[data-theme] { --jw-dir-in: #0b7f55; --jw-dir-out: #d63a28; }
html[data-theme="glassd"] { --jw-sheet: rgba(22, 24, 29, 0.97); --jw-sheet-dim: rgba(0, 0, 0, 0.5); }
html[data-theme="glassl"] { --jw-sheet: rgba(248, 249, 252, 0.97); --jw-sheet-dim: rgba(20, 30, 50, 0.32); }
html[data-theme] #mbSettleModal { background: var(--jw-sheet-dim) !important; }
html[data-theme] #mbSettleModal .mb-settle-sheet { background: var(--jw-sheet) !important; border: 0 !important; border-radius: 26px 26px 0 0 !important; box-shadow: var(--jw-rim), 0 -14px 40px rgba(0, 0, 0, 0.28) !important; }
html[data-theme]:not(.jw-android) #mbSettleModal .mb-settle-sheet { -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
html[data-theme] #mbSettleModal .mb-settle-header { border-bottom: 1px solid var(--jw-edge) !important; padding: 16px 18px 12px !important; }
html[data-theme] #mbSettleModal .mb-settle-header h2 { color: var(--text-color) !important; font: 700 18px/1.3 "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif !important; }
html[data-theme] #mbSettleModal .mb-settle-close { width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--jw-strong) !important;
    box-shadow: var(--jw-sel-shadow) !important; color: var(--text-color) !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
html[data-theme] #mbSettleModal .mb-settle-body .mb-row label { color: var(--secondary-text) !important; font: 600 13px/1.4 "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif !important; }
html[data-theme] #mbSettleModal .mb-settle-body .mb-row-controls input, html[data-theme] #mbSettleModal .mb-settle-body .mb-row-controls select { background: var(--jw-field) !important; border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--jw-edge) !important;
    border-radius: 14px !important; min-height: 42px; color: var(--text-color) !important; font-size: 16px !important; }
html[data-theme] #mbSettleModal .mb-settle-body .mb-row-controls input:focus { box-shadow: inset 0 0 0 2px var(--jw-hl) !important; outline: none !important; }
/* the pills: same height, text in the middle both ways */
html[data-theme] #mbSettleModal .mb-fill-btn, html[data-theme] #mbSettleModal .mb-arrow-btn { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;
    height: 38px !important; min-height: 38px; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important; font: 600 14px/1 "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif !important; letter-spacing: 0 !important;
    box-shadow: var(--jw-sel-shadow) !important; white-space: nowrap; cursor: pointer; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
html[data-theme] #mbSettleModal .mb-fill-btn:active, html[data-theme] #mbSettleModal .mb-arrow-btn:active { transform: scale(.96); }
html[data-theme] #mbSettleModal .mb-fill-btn:focus-visible, html[data-theme] #mbSettleModal .mb-arrow-btn:focus-visible, html[data-theme] #mbSettleModal .mb-settle-submit:focus-visible { outline: 2px solid var(--jw-hl) !important; outline-offset: 2px; }
html[data-theme] #mbSettleModal .mb-fill-btn { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; }
html[data-theme] #mbSettleModal .mb-arrow-btn { min-width: 76px !important; gap: 4px; background: var(--jw-dir-in) !important; color: #fff !important; }
html[data-theme] #mbSettleModal .mb-arrow-btn.given { background: var(--jw-dir-out) !important; color: #fff !important; }
html[data-theme] #mbSettleModal .mb-settle-submit { display: flex !important; align-items: center; justify-content: center; gap: 8px; height: 52px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important;
    background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; font: 700 16px/1 "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif !important; box-shadow: var(--jw-sel-shadow), 0 -14px 20px -12px var(--jw-sheet) !important; }
html[data-theme] #mbSettleModal .mb-settle-submit:active { transform: scale(.985); }
/* ==== f127 settle sheet glass ==== */ /* end */

/* ==== f128 flat buttons ==== */
html[data-theme] #mbSettleModal .mb-fill-btn, html[data-theme] #mbSettleModal .mb-arrow-btn, html[data-theme] #mbSettleModal .mb-arrow-btn.given, html[data-theme] #mbSettleModal .mb-settle-submit, html[data-theme] #mbSettleModal .mb-settle-close { box-shadow: none !important; text-shadow: none !important; background-image: none !important; }
/* ==== f128 flat buttons ==== */ /* end */

/* ==== f129 press animation ==== */
@keyframes jwPressIn { from { scale: 1; } to { scale: .94; } }
@keyframes jwPressOut { 0% { scale: .94; } 55% { scale: 1.03; } 100% { scale: 1; } }
:root .jw-press, :root .jw-press:active, :root .jw-press:focus, :root .jw-press:hover, html #sidebar .jw-press, html.mdk-bar #iosBottomNav.mdk .ios-tab.jw-press { animation: jwPressIn 90ms cubic-bezier(.3, .7, .4, 1) forwards !important; filter: brightness(.9) !important; }
:root .jw-release, :root .jw-release:focus, html #sidebar .jw-release, html.mdk-bar #iosBottomNav.mdk .ios-tab.jw-release { animation: jwPressOut 300ms cubic-bezier(.3, .7, .4, 1) !important; }
@media (prefers-reduced-motion: reduce) { :root .jw-press, :root .jw-press:active, :root .jw-press:focus, :root .jw-press:hover, html #sidebar .jw-press, html.mdk-bar #iosBottomNav.mdk .ios-tab.jw-press, :root .jw-release, :root .jw-release:focus, html #sidebar .jw-release, html.mdk-bar #iosBottomNav.mdk .ios-tab.jw-release { animation: none !important; } }
:is(button, .btn-undo, .client-search-inline .mb-wipe-x, .st-arrow-btn-sm, .calc-btn, .sb-nav-item, .sb-qbtn, .receipt-fab, .receipt-action-btn, .ql-pad button, #rcGlobalScreen .rc-btn, #buyBtn, #sellBtn, #eodBtn, .btn-pull-spot, .btn-curr-toggle, .dots-btn, .tc-new-btn, #spotBar .tb-key, .modal-content button, .dm2-btn, .del-zone-btn, #swaRoot .swa-win button, .glass-card button:not(.karat-btn), .acs-sw-row, .jw-lay-opt, #firstLaunchModal .fl-auth-btn, #jwRauth .ra-primary, #jwRauth #flSiBtn, #firstLaunchModal #flThemeBtn, #mbSettleModal .mb-fill-btn, #mbSettleModal .mb-arrow-btn, #mbSettleModal .mb-settle-submit, .mobile-menu-btn, .spot-rates-btn, .mb-wipe-x, .dm2-tile, .settings-lang-btn, .theme-preview, .dm-device-card, .mb-settle-trigger, #sidebar .sb-qbtn, #sidebar .sb-nav-item).jw-press, :is(button, .btn-undo, .client-search-inline .mb-wipe-x, .st-arrow-btn-sm, .calc-btn, .sb-nav-item, .sb-qbtn, .receipt-fab, .receipt-action-btn, .ql-pad button, #rcGlobalScreen .rc-btn, #buyBtn, #sellBtn, #eodBtn, .btn-pull-spot, .btn-curr-toggle, .dots-btn, .tc-new-btn, #spotBar .tb-key, .modal-content button, .dm2-btn, .del-zone-btn, #swaRoot .swa-win button, .glass-card button:not(.karat-btn), .acs-sw-row, .jw-lay-opt, #firstLaunchModal .fl-auth-btn, #jwRauth .ra-primary, #jwRauth #flSiBtn, #firstLaunchModal #flThemeBtn, #mbSettleModal .mb-fill-btn, #mbSettleModal .mb-arrow-btn, #mbSettleModal .mb-settle-submit, .mobile-menu-btn, .spot-rates-btn, .mb-wipe-x, .dm2-tile, .settings-lang-btn, .theme-preview, .dm-device-card, .mb-settle-trigger, #sidebar .sb-qbtn, #sidebar .sb-nav-item).jw-press:active { transform: none !important; }
/* ==== f129 press animation ==== */ /* end */

/* ==== f131 top bar glass pill ==== */
@media (min-width: 601px) {
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar {
    margin: 8px 8px 0 !important; border-radius: 28px !important; border: 0 !important; overflow: hidden;
    background: var(--jw-glass) !important; background-image: none !important; box-shadow: var(--jw-rim) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45);
}
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar > .mds-back, html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar > .mds-front, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar > .mds-back, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar > .mds-front { display: none !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #mainContent, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #mainContent { padding-top: 12px !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item { border-radius: 999px !important; box-shadow: none !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item .sb-nav-icon, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item .sb-nav-icon { transform: none !important; opacity: 1 !important; background: transparent !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item:not(.active), html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item.mds-on:not(.active), html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item:not(.active), html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item.mds-on:not(.active) { background: transparent !important; color: var(--text-color) !important; opacity: .78 !important; font-weight: 600; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item.active, html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item.active.mds-on, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item.active, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item.active.mds-on { background: var(--jw-pill) !important; color: var(--jw-on-pill) !important; opacity: 1 !important; font-weight: 700; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item.active .sb-nav-icon, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item.active .sb-nav-icon { background: transparent !important; color: var(--jw-on-pill) !important; filter: none !important; }
}
/* ==== f131 top bar glass pill ==== */ /* end */

/* ==== f132 no cards, splitters ==== */
html[data-theme="glassd"] { --jw-split: rgba(255, 255, 255, 0.12); }
html[data-theme="glassd"] body .trade-form-card { --jw-field: rgba(14, 16, 20, 0.62); }
html[data-theme="glassl"] { --jw-split: rgba(18, 23, 34, 0.12); }
html[data-theme="glassd"] body .trade-form-card, html[data-theme="glassd"] body .result-card, html[data-theme="glassl"] body .trade-form-card, html[data-theme="glassl"] body .result-card { background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html[data-theme="glassd"] body .trade-form-card::before, html[data-theme="glassd"] body .trade-form-card::after, html[data-theme="glassd"] body .result-card::before, html[data-theme="glassd"] body .result-card::after, html[data-theme="glassl"] body .trade-form-card::before, html[data-theme="glassl"] body .trade-form-card::after, html[data-theme="glassl"] body .result-card::before, html[data-theme="glassl"] body .result-card::after { display: none !important; }
html[data-theme="glassd"] body .result-card, html[data-theme="glassl"] body .result-card { border-top: 1px solid var(--jw-split) !important; margin-top: 16px !important; }
html[data-theme="glassd"] body .converter-box, html[data-theme="glassl"] body .converter-box { background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-top: 1px solid var(--jw-split) !important; border-bottom: 1px solid var(--jw-split) !important; }
html[data-theme="glassd"] body .hsh-card, html[data-theme="glassd"] body .act-card, html[data-theme="glassl"] body .hsh-card, html[data-theme="glassl"] body .act-card { background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; }
html[data-theme="glassd"] body .hsh-card::before, html[data-theme="glassd"] body .hsh-card::after, html[data-theme="glassd"] body .act-card::before, html[data-theme="glassd"] body .act-card::after, html[data-theme="glassl"] body .hsh-card::before, html[data-theme="glassl"] body .hsh-card::after, html[data-theme="glassl"] body .act-card::before, html[data-theme="glassl"] body .act-card::after { display: none !important; }
html[data-theme="glassd"] body .hsh-card + .hsh-card, html[data-theme="glassd"] body .act-card + .act-card, html[data-theme="glassl"] body .hsh-card + .hsh-card, html[data-theme="glassl"] body .act-card + .act-card { border-inline-start: 1px solid var(--jw-split) !important; }
html[data-theme="glassd"] body .trade-card, html[data-theme="glassl"] body .trade-card { background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin-bottom: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--jw-split) !important; }
/* ==== f132 no cards, splitters ==== */ /* end */

/* ==== f133 trade card fit ==== */
html[data-theme="glassd"] body .trade-card, html[data-theme="glassl"] body .trade-card { container-type: inline-size; }
html[data-theme="glassd"] body .trade-card.buy-card::before, html[data-theme="glassd"] body .trade-card.sell-card::before, html[data-theme="glassd"] body .trade-card::before, html[data-theme="glassl"] body .trade-card.buy-card::before, html[data-theme="glassl"] body .trade-card.sell-card::before, html[data-theme="glassl"] body .trade-card::before { display: none !important; }
html[data-theme="glassd"] body .trade-card .tc-row, html[data-theme="glassl"] body .trade-card .tc-row { flex-wrap: wrap !important; justify-content: space-around !important; gap: 6px 4px !important; padding-left: 6px !important; padding-right: 6px !important; }
html[data-theme="glassd"] body .trade-card .tc-sep, html[data-theme="glassl"] body .trade-card .tc-sep { display: none !important; }
html[data-theme="glassd"] body .trade-card .tc-cell, html[data-theme="glassl"] body .trade-card .tc-cell { flex: 1 1 auto !important; min-width: 0 !important; align-items: center !important; text-align: center !important; }
html[data-theme="glassd"] body .trade-card .tc-val, html[data-theme="glassl"] body .trade-card .tc-val { white-space: nowrap !important; font-size: clamp(12px, 6.4cqi, 16px) !important; }
html[data-theme="glassd"] body .trade-card .tc-remaining, html[data-theme="glassl"] body .trade-card .tc-remaining { flex-basis: 100% !important; }
html[data-theme="glassd"] body .trade-card .tc-remaining .tc-val, html[data-theme="glassl"] body .trade-card .tc-remaining .tc-val { white-space: normal !important; }
html[data-theme="glassd"] body .trade-card .tc-remaining .tc-val > span, html[data-theme="glassl"] body .trade-card .tc-remaining .tc-val > span { display: inline-block; white-space: nowrap !important; }
/* ==== f133 trade card fit ==== */ /* end */

/* ==== f134 phone hero title ==== */
@media (max-width: 600px) {
    html[data-theme] #firstLaunchModal .fl-slide[data-slide="0"] .fl-hero-title { text-align: left !important; padding-left: 6px !important; padding-right: 150px !important; position: relative; top: -6px; }
}
/* ==== f134 phone hero title ==== */ /* end */

/* ==== f135 top bar compact ==== */
@media (min-width: 601px) {
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar { width: fit-content !important; min-width: 0 !important; max-width: calc(100% - 16px) !important; margin: 8px auto 0 !important; align-self: center !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar #sbCollapseBtn, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar #sbCollapseBtn { display: none !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar #sbNavStrip, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar #sbNavStrip { flex: 0 1 auto !important; width: auto !important; gap: 4px !important; padding-left: 9px !important; padding-right: 9px !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item:not(.active) .sb-nav-label, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item:not(.active) .sb-nav-label { display: none !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item.active .sb-nav-label, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item.active .sb-nav-label { display: inline !important; white-space: nowrap; color: var(--jw-on-pill) !important; -webkit-text-fill-color: var(--jw-on-pill) !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item:not(.active), html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item:not(.active) { flex: 0 0 auto !important; width: 42px !important; min-width: 42px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; }
html.mds-nav:not(.jw-rail)[data-theme="glassd"] #sidebar .sb-nav-item.active, html.mds-nav:not(.jw-rail)[data-theme="glassl"] #sidebar .sb-nav-item.active { flex: 0 0 auto !important; width: auto !important; padding: 0 16px 0 12px !important; justify-content: center !important; gap: 8px !important; }
}
/* ==== f135 top bar compact ==== */ /* end */

/* ==== f136 flat keys ==== */
html[data-theme="glassd"] body .karat-btn[data-karat]:not(.active), html[data-theme="glassl"] body .karat-btn[data-karat]:not(.active) { color: var(--text-color) !important; }
html[data-theme="glassd"] body .karat-btn[data-karat].active, html[data-theme="glassl"] body .karat-btn[data-karat].active { box-shadow: none !important; }
html[data-theme="glassd"] body .btn-curr-toggle, html[data-theme="glassd"] body .btn-pull-spot, html[data-theme="glassd"] body .tc-new-btn, html[data-theme="glassd"] body .tc-name-btn, html[data-theme="glassl"] body .btn-curr-toggle, html[data-theme="glassl"] body .btn-pull-spot, html[data-theme="glassl"] body .tc-new-btn, html[data-theme="glassl"] body .tc-name-btn { background: var(--jw-chip) !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: var(--text-color) !important; text-shadow: none !important; }
html[data-theme="glassd"] body .btn-curr-toggle *, html[data-theme="glassd"] body .btn-pull-spot *, html[data-theme="glassd"] body .tc-new-btn *, html[data-theme="glassd"] body .tc-name-btn *, html[data-theme="glassl"] body .btn-curr-toggle *, html[data-theme="glassl"] body .btn-pull-spot *, html[data-theme="glassl"] body .tc-new-btn *, html[data-theme="glassl"] body .tc-name-btn * { color: inherit !important; }
/* ==== f136 flat keys ==== */ /* end */

/* ==== f138 flat colours ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .gold, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .blue, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .purple, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .gold *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .blue *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .purple *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .eod-date-lbl span, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .eod-month-name, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .section-title, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .section-title span, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .ccp-aging-badge, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .ccp-aging-badge *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .ccp-name, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .avg-val, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .avg-val *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .cap-state, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .cap-verdict, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .cap-banner, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .cap-banner *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #converterView label, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #convResult, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #calcPageDisplay, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .debt-header h3, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .debt-col-left h4, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .debt-col-mid h4, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .debt-col-right h4, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .pl-today-card h3, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .pl-total-card h3, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #plTotalIQD, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #plTotalUSD, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #expTotalGold, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-section-title-danger, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-danger-title, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .ql-avatar-initial, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #jwAbout a, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #syncManageView button span, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .act-label, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-time-chip, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body [data-i18n="lbl_logout_warning"], html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotAdjValue + span, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .gold, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .blue, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .purple, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .gold *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .blue *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .purple *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .eod-date-lbl span, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .eod-month-name, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .section-title, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .section-title span, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .ccp-aging-badge, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .ccp-aging-badge *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .ccp-name, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .avg-val, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .avg-val *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .cap-state, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .cap-verdict, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .cap-banner, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .cap-banner *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #converterView label, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #convResult, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #calcPageDisplay, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .debt-header h3, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .debt-col-left h4, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .debt-col-mid h4, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .debt-col-right h4, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .pl-today-card h3, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .pl-total-card h3, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #plTotalIQD, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #plTotalUSD, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #expTotalGold, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-section-title-danger, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-danger-title, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .ql-avatar-initial, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #jwAbout a, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #syncManageView button span, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .act-label, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-time-chip, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body [data-i18n="lbl_logout_warning"], html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotAdjValue + span { color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #jwAbout a, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #jwAbout a { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .ccp-aging-badge, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .cap-banner, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .ccp-aging-badge, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .cap-banner { background: var(--jw-chip) !important; border-color: transparent !important; box-shadow: none !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #dashBuyW, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #dashBuyIQD, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .act-buy .act-iqd small, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #plTodayBuyW, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #dashBuyW, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #dashBuyIQD, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .act-buy .act-iqd small, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #plTodayBuyW { color: var(--accent-green) !important; -webkit-text-fill-color: var(--accent-green) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .karat-btn[data-karat].active, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .karat-btn[data-karat].active { color: var(--jw-on-pill) !important; -webkit-text-fill-color: var(--jw-on-pill) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-display, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-display { border-color: var(--jw-chip-edge) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .tc-convert-btn, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-gold, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-red, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-gray, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-recalc, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .net-gold-clear, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .stmt-preset:not(.active), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-karat-edit, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-btn, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-clear, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body ._cat-tab:not(._cat-active), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #adjToggleBtn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .tc-convert-btn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-gold, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-red, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-gray, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-recalc, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .net-gold-clear, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .stmt-preset:not(.active), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-karat-edit, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-btn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-clear, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body ._cat-tab:not(._cat-active), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #adjToggleBtn { background: var(--jw-chip) !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .tc-convert-btn *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-gold *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-red *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-gray *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-recalc *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .net-gold-clear *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .stmt-preset:not(.active) *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-karat-edit *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-btn *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-clear *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body ._cat-tab:not(._cat-active) *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #adjToggleBtn *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .tc-convert-btn *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-gold *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-red *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-gray *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-recalc *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .net-gold-clear *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .stmt-preset:not(.active) *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-karat-edit *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-btn *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-clear *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body ._cat-tab:not(._cat-active) *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #adjToggleBtn * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-add-client, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-green, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-gold-full, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-blue-full, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .stmt-preset.active, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body ._cat-tab._cat-active, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-add-client, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-green, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-gold-full, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-blue-full, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .stmt-preset.active, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body ._cat-tab._cat-active { background: var(--jw-pill) !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--jw-on-pill) !important; -webkit-text-fill-color: var(--jw-on-pill) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-add-client *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .calc-btn-green *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-gold-full *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-blue-full *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .stmt-preset.active *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body ._cat-tab._cat-active *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-add-client *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .calc-btn-green *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-gold-full *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-blue-full *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .stmt-preset.active *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body ._cat-tab._cat-active * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
/* ==== f138 flat colours ==== */ /* end */

/* ==== f139 client page flat ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body [class*="btn-icon-"], html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbTransferTrigger, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body [class*="btn-icon-"], html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbTransferTrigger { background: var(--jw-chip) !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body [class*="btn-icon-"] *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbTransferTrigger *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body [class*="btn-icon-"] *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbTransferTrigger * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbSettleTrigger, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbSettleTrigger { background: var(--jw-pill) !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; color: var(--jw-on-pill) !important; -webkit-text-fill-color: var(--jw-on-pill) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbSettleTrigger *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView #mbSettleTrigger * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView th, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView th { border-bottom-color: var(--jw-split) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView th.cp-th-resize::after, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView th::after, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView th.cp-th-resize::after, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView th::after { background-color: var(--jw-split) !important; border-color: transparent !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView tbody tr:hover td, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView tbody tr:active td, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .cp-sheet tbody tr:hover td, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView tbody tr:hover td, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView tbody tr:active td, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .cp-sheet tbody tr:hover td { background: var(--jw-chip) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView #cpName, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView .cp-bal-label, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView td > span:not(.cell-pos):not(.cell-neg), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView td > span:not(.cell-pos):not(.cell-neg) *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #customerProfileView td small, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView #cpName, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView .cp-bal-label, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView td > span:not(.cell-pos):not(.cell-neg), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView td > span:not(.cell-pos):not(.cell-neg) *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #customerProfileView td small { color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
/* ==== f139 client page flat ==== */ /* end */

/* ==== f140 flat icons ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-ico, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-cam, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-swap, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .sip-badge, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-ico, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-cam, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-swap, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .sip-badge { color: var(--text-color) !important; border-color: var(--jw-chip-edge) !important; box-shadow: none !important; }   /* no new backing: these had none */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .demo-ico, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .demo-ico { color: var(--text-color) !important; background: var(--jw-chip) !important; background-image: none !important; border-color: var(--jw-chip-edge) !important; box-shadow: none !important; }   /* tinted circles → neutral */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-ico svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-cam svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-swap svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .sip-badge svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .demo-ico svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #syncManageView button svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-ico svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-cam svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-swap svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .sip-badge svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .demo-ico svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #syncManageView button svg { color: var(--text-color) !important; stroke: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-ico svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-cam svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-swap svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .sip-badge svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .demo-ico svg [stroke]:not([stroke="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #syncManageView button svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-ico svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-cam svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-swap svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .sip-badge svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .demo-ico svg [stroke]:not([stroke="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #syncManageView button svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-ico svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .swa-cam svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .btn-swap svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .sip-badge svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .demo-ico svg [fill]:not([fill="none"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #syncManageView button svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-ico svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .swa-cam svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .btn-swap svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .sip-badge svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-hero-icon svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-tile-icon svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .dm2-danger-icon svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .demo-ico svg [fill]:not([fill="none"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #syncManageView button svg [fill]:not([fill="none"]) { fill: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .eod-date-lbl svg { opacity: .7; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .ql-avatar-initial, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .ql-avatar-initial { background: var(--jw-chip) !important; background-image: none !important; border-color: var(--jw-chip-edge) !important; color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; box-shadow: none !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"], html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"] { background: var(--jw-chip) !important; border-color: var(--jw-chip-edge) !important; color: var(--text-color) !important; box-shadow: none !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"] *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"] svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"] svg *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"] *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"] svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body button[onclick="deviceSignOut()"] svg * { color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; stroke: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .theme-preview.active, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .theme-preview.active { border-color: var(--text-color) !important; background: var(--jw-chip) !important; box-shadow: none !important; }
/* ==== f140 flat icons ==== */ /* end */

/* ==== f141 rates sheet solid ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotRatesModal, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotRatesModal { background: var(--jw-sheet-dim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme="glassd"] { --jw-sheet-solid: rgb(22, 24, 29); }
html[data-theme="glassl"] { --jw-sheet-solid: rgb(248, 249, 252); }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-rates-sheet, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-rates-sheet { background: var(--jw-sheet-solid) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-top-color: var(--jw-chip-edge) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotRatesModal #spotRatesTitle, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-rates-row-label, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotRatesModal #spotRatesTitle, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-rates-row-label { color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-bar-adj, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-bar-adj input, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-bar-adj, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-bar-adj input { border-color: var(--jw-chip-edge) !important; box-shadow: none !important; outline-color: var(--jw-chip-edge) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-rates-close, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #spotRatesModal .spot-rates-close { background: var(--jw-chip) !important; border-color: transparent !important; box-shadow: none !important; color: var(--text-color) !important; }
/* ==== f141 rates sheet solid ==== */ /* end */

/* ==== f142 dialogs flat ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #mbSettleModal, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #mbSettleModal { --jw-hl: var(--text-color); --accent-blue: var(--text-color); --accent-purple: var(--text-color); }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal { background: var(--jw-sheet-dim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .modal-content, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #mbSettleModal .mb-settle-sheet, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .modal-content, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #mbSettleModal .mb-settle-sheet { background: var(--jw-sheet-solid) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: var(--jw-chip-edge) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h3, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h3 *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h2, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h2 *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h1, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h1 *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h3, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h3 *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h2, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h2 *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h1, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h1 * { color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h3 svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h2 svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h1 svg, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h3 svg *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal h1 svg *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h3 svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h2 svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h1 svg, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h3 svg *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal h1 svg * { stroke: currentColor !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .cv-row[style*="color"], html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .cv-row[style*="color"] *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal select, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .tf-full, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .support-phone, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .code-display, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #expToGoldGrams, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .stmt-select-all *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .cv-row[style*="color"], html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .cv-row[style*="color"] *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal select, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .tf-full, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .support-phone, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .code-display, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #expToGoldGrams, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .stmt-select-all * { color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .btn-green-full, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .btn-green-full { background: var(--jw-pill) !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--jw-on-pill) !important; -webkit-text-fill-color: var(--jw-on-pill) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #statementModal .btn-green-full, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .btn-red-full, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .share-opt, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #statementModal .btn-green-full, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .btn-red-full, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .share-opt { background: var(--jw-chip) !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .btn-green-full *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #statementModal .btn-green-full *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .btn-red-full *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal .share-opt *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .btn-green-full *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #statementModal .btn-green-full *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .btn-red-full *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal .share-opt * { color: inherit !important; -webkit-text-fill-color: currentColor !important; stroke: currentColor; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal select, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .modal textarea, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal select, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .modal textarea { border-color: var(--jw-chip-edge) !important; }
/* ==== f142 dialogs flat ==== */ /* end */

/* ==== f143 no purple ==== */
html[data-theme="glassd"]:not(#_jwA), html[data-theme="glassl"]:not(#_jwA) { --jw-hl: var(--text-color); --accent-purple: var(--text-color); }
/* ==== f143 no purple ==== */ /* end */

/* ==== f144 modal lock ==== */
html.jw-modal-open, html.jw-modal-open body { overflow: hidden !important; overscroll-behavior: none !important; }
html.jw-modal-open #mainContent, html.jw-modal-open .view-section, html.jw-modal-open #appLayout { overflow: hidden !important; overscroll-behavior: none !important; }
html.jw-modal-open body, html.jw-modal-open body * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
html.jw-modal-open :is(input, textarea, select, [contenteditable="true"]) { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; }
html.jw-modal-open :is(.modal, #spotRatesModal, #mbSettleModal, .as-overlay) { touch-action: none !important; overscroll-behavior: contain !important; }
html.jw-modal-open :is(.modal-content, .spot-rates-sheet, .spot-rates-body, .mb-settle-sheet, .mb-settle-body, .action-sheet, #reportOverlay) { touch-action: pan-y !important; overscroll-behavior: contain !important; }
/* ==== f144 modal lock ==== */ /* end */

/* ==== f145 sheet keyboard ==== */
html.jw-kb-open :is(#spotRatesModal, #mbSettleModal, .modal) { top: 0 !important; bottom: auto !important; height: var(--jw-vvh, 100%) !important; max-height: var(--jw-vvh, 100%) !important; }
html.jw-kb-open :is(#spotRatesModal .spot-rates-sheet, #mbSettleModal .mb-settle-sheet) { padding-bottom: 0 !important; max-height: var(--jw-vvh, 85vh) !important; }
html.jw-kb-open .modal .modal-content { max-height: calc(var(--jw-vvh, 100vh) - 24px) !important; }
/* ==== f145 sheet keyboard ==== */ /* end */

/* ==== f146 optional fields ==== */
html[data-theme="glassd"] { --jw-field-opt: rgba(4, 5, 7, 0.78); }
html[data-theme="glassl"] { --jw-field-opt: rgba(222, 227, 235, 0.85); }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #receivedWeight, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #amountPaid, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #editReceivedWeight, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #editAmountPaid, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #pastReceivedWeight, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body #pastAmountPaid, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body input.input-blue, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body input.input-green, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #receivedWeight, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #amountPaid, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #editReceivedWeight, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #editAmountPaid, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #pastReceivedWeight, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body #pastAmountPaid, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body input.input-blue, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body input.input-green { background: var(--jw-field-opt) !important; background-image: none !important; border-color: var(--jw-edge) !important; box-shadow: none !important; }
/* ==== f146 optional fields ==== */ /* end */

/* ==== f147 grid align ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs { gap: 10px !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs > *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs > * { margin-top: 0 !important; margin-bottom: 0 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #weight), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(#tradeNote), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #weight), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(#tradeNote) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #weight) > *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > *, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(#tradeNote) > *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #weight) > *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > *, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(#tradeNote) > * { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; flex: none !important; grid-column: span 1; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #weight, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #receivedWeight, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #weight, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #receivedWeight { grid-column: span 2 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #price, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #price { grid-column: span 3 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > .autocomplete, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > .autocomplete { grid-column: span 2 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > .autocomplete input, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > .autocomplete input { width: 100% !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #tradeOunce, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #tradeOunce { grid-column: 3 / 5 !important; grid-row: 1 !important; padding-inline-end: 42px !important; text-overflow: ellipsis !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #tradeOunce::placeholder, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #tradeOunce::placeholder { font-size: 14px !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #pullOunceBtn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row > #pullOunceBtn { grid-column: 4 / 5 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; width: 34px !important; height: 34px !important; min-height: 0 !important; padding: 0 !important; margin-inline-end: 6px !important; z-index: 1; position: relative; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #weight) > button:not(#pullOunceBtn), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > button:not(#pullOunceBtn), html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(#tradeNote) > button:not(#pullOunceBtn), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #weight) > button:not(#pullOunceBtn), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > button:not(#pullOunceBtn), html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(#tradeNote) > button:not(#pullOunceBtn) { width: 100% !important; justify-content: center; }

html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top { justify-content: flex-start !important; gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .dots-btn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .dots-btn { margin-inline-start: auto !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .tc-name-btn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .tc-name-btn { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .trade-time-chip, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .trade-type-badge, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .tc-new-btn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .trade-time-chip, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .trade-type-badge, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .tc-new-btn { flex: none !important; white-space: nowrap !important; }
@container (max-width: 279px) {
    html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top { flex-wrap: wrap !important; row-gap: 6px !important; }
    html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .tc-name-btn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top .tc-name-btn { flex: 1 0 calc(100% - 56px) !important; max-width: none !important; }
}
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 10px !important; padding-left: 12px !important; padding-right: 12px !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row > .tc-cell, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row > .tc-cell { min-width: 0 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row > .tc-remaining, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row > .tc-remaining { grid-column: 1 / -1 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row > .tc-note-cell, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row > .tc-note-cell { grid-column: span 2 !important; }

html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .avg-strip, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .avg-strip { display: contents !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .avg-box, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .profit-row, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .avg-box, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .profit-row { border: 0 !important; margin: 0 !important; padding: 2px 6px !important; text-align: center !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .avg-box + .avg-box, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .profit-row, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .avg-box + .avg-box, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .profit-row { border-inline-start: 1px solid var(--jw-split) !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .profit-row, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .profit-row { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; font-size: 15px !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .profit-row > span:first-child, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .profit-row > span:first-child { font-size: 11px !important; font-weight: 700 !important; color: var(--secondary-text) !important; margin-bottom: 4px !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .profit-vals, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .profit-vals { text-align: center !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.35 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .result-card .profit-vals span, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .result-card .profit-vals span { font-size: 15px !important; }
/* ==== f147 grid align ==== */ /* end */

/* ==== f148 trade card edges ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card { padding-left: 0 !important; padding-right: 0 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top, html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-top, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-card .tc-row { column-gap: 0 !important; }
/* ==== f148 trade card edges ==== */ /* end */

/* ==== f149 price row adaptive ==== */
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > #price, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > #price { grid-column: 1 / 4 !important; grid-row: 1 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > #currToggleBtn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #price) > #currToggleBtn { grid-column: 4 / 5 !important; grid-row: 1 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #pullSpotBtn[style*="block"]) > #pullSpotBtn, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #pullSpotBtn[style*="block"]) > #pullSpotBtn { grid-column: 1 / 2 !important; grid-row: 1 !important; width: 100% !important; height: auto !important; min-height: 0 !important; align-self: stretch !important; margin: 0 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #pullSpotBtn[style*="block"]) > #price, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #pullSpotBtn[style*="block"]) > #price { grid-column: 2 / 4 !important; }
html[data-theme="glassd"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #pullSpotBtn[style*="block"]) > #exchangeRate, html[data-theme="glassl"]:not(#_jwA):not(#_jwB) body .trade-inputs .input-row:has(> #pullSpotBtn[style*="block"]) > #exchangeRate { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; }
/* ==== f149 price row adaptive ==== */ /* end */

/* ==== f150 bg blur ==== */
html[data-theme="glassd"] #jwGlassFx::before, html[data-theme="glassl"] #jwGlassFx::before { filter: blur(18px) !important; transform: scale(1.08) !important; }
/* ==== f150 bg blur ==== */ /* end */