/* Coffee themes, made from the Desert Night styles with new colours (made by mkskins.py; do not edit by hand) */
/* ===== ORIGIN ===== */
/* ===== Desert Night: navy + sand gold theme, 3D globe backdrop, motion polish ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] {
  color-scheme: dark;
  --bg: #06150e; --card: rgba(16, 43, 30, .72); --ink: #dcf4e9; --muted: #90bca8; --line: rgba(255, 255, 255,.09); --line2: rgba(255, 255, 255,.09);
  --brand: #59df93; --brand-ink: #06190e; --brand-2: #8befb6; --brand-soft: rgba(89, 223, 147,.14);
  --chip-bg: rgba(255, 255, 255,.06); --hover: rgba(255, 255, 255,.06); --col-bg: rgba(10, 32, 22,.55); --sel: rgba(89, 223, 147,.10);
  --shadow: 0 1px 0 rgba(255, 255, 255,.04) inset, 0 8px 24px rgba(0, 0, 0,.35);
  --shadow-md: 0 1px 0 rgba(255, 255, 255,.05) inset, 0 18px 50px rgba(0, 0, 0,.55);
  --glow: rgba(89, 223, 147,.35); --pine-deep: #04120b; --saffron: #72eda7; --road: #6bfbb8;
  --fx-display: "Instrument Sans", "Geist", system-ui, sans-serif;
}
html[data-ui="v2"][data-theme="dark"][data-skin="origin"], html[data-ui="v2"][data-theme="dark"][data-skin="origin"] body,
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] body.home, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] body.authv2 { background: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] { background: radial-gradient(1200px 800px at 80% -10%, #1a4b34 0%, transparent 60%), radial-gradient(900px 700px at -10% 110%, #11291b 0%, transparent 55%), #06150e; background-attachment: fixed; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] body { font-family: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] h1, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] h2, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] h3 { font-family: var(--fx-display); letter-spacing: -.02em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important; letter-spacing: 0 !important; }

/* the 3D canvas sits behind everything */
#fx3d, #fx2d { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
html[data-theme="dark"][data-skin="origin"] #fx3d.on, html[data-theme="dark"][data-skin="origin"] #fx2d.on { opacity: 1; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] #app, #modal { position: relative; z-index: 1; }
#modal, #toast { z-index: 50; } /* the toast keeps its own fixed place on the screen (it was pushed into the page here, which also made phones scroll sideways) */

/* glass surfaces */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .card, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3card, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .top,
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tablewrap, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tab:not(.on), html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hhero {
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .card, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3card { border-color: rgba(255, 255, 255,.08); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
@media (hover: hover) {
  html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .card:hover, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3card:hover { border-color: rgba(89, 223, 147,.28); box-shadow: 0 0 0 1px rgba(89, 223, 147,.08), 0 20px 50px rgba(0, 0, 0,.5), 0 0 40px -10px var(--glow); }
}
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .top { background: rgba(6, 21, 14,.62) !important; border-bottom: 1px solid rgba(255, 255, 255,.07); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] input, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] select, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] textarea { background-color: rgba(255, 255, 255,.04); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] select option { background: #0e2d1e; }

/* gold buttons with a moving sheen */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn.primary { background: linear-gradient(135deg, #8befb6 0%, #59df93 45%, #36c172 100%); border-color: transparent; color: #06190e; position: relative; overflow: hidden; isolation: isolate; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255,.55) 48%, transparent 66%); transform: translateX(-120%); animation: fxSheen 4.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes fxSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .28; transform: scale(0); animation: fxRipple .7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tab.on { background: linear-gradient(135deg, #8befb6, #59df93); border-color: transparent; color: #06190e; box-shadow: 0 6px 18px -4px var(--glow); }

/* login: the brand panel turns into a window onto the globe */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbrand { background: linear-gradient(180deg, rgba(5, 19, 12,0) 0%, rgba(5, 19, 12,0) 40%, rgba(5, 19, 12,.82) 66%, rgba(5, 19, 12,.96) 100%) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbrand::after { background: radial-gradient(circle, rgba(89, 223, 147,.16), transparent 70%); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lroute { display: none; }
@media (min-width: 900px) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lhero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lhero h1 { background: linear-gradient(180deg, #ffffff 20%, #8befb6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lfeats div { background: rgba(255, 255, 255,.05); border-color: rgba(255, 255, 255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbox { position: relative; }
@media (min-width: 900px) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbox { padding: 34px 32px; border-radius: 24px; background: rgba(14, 39, 27,.6); border: 1px solid rgba(255, 255, 255,.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0,.8); } }
@media (min-width: 900px) {
  html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lside { background: linear-gradient(90deg, rgba(6, 21, 14,0) 0%, rgba(6, 21, 14,.7) 18%, rgba(6, 21, 14,.88) 100%); }
}
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lin { background: rgba(255, 255, 255,.04); border-color: rgba(255, 255, 255,.1); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lin:focus-within { border-color: #59df93; box-shadow: 0 0 0 4px rgba(89, 223, 147,.16), 0 0 30px -6px var(--glow); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lgo { box-shadow: 0 12px 32px -6px var(--glow); }
@media (max-width: 899.98px) {
  html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbrand { min-height: 44vh; border-radius: 0; background: none !important; }
  html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbox { background: rgba(12, 35, 25,.78); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255, 255, 255,.09); box-shadow: 0 30px 60px -20px rgba(0, 0, 0,.7); }
}
/* animated gold border around the login form */
.fx-ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--fx-a, 0deg), transparent 0 70%, rgba(139, 239, 182,.9) 82%, transparent 94%); -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fxSpin 6s linear infinite; }
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fxSpin { to { --fx-a: 360deg; } }

/* split-text pieces */
.fx-w { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }

/* scroll progress bar */
#fxbar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); z-index: 60; background: linear-gradient(90deg, #36c172, #8befb6); pointer-events: none; }
[dir="rtl"] #fxbar { transform-origin: 100% 50%; }
html[data-theme="light"] #fxbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn.primary::after, .fx-ring { animation: none !important; }
}

/* ===== cinematic edition ===== */
/* drifting nebula + vignette behind everything */
#fxneb, #fxaura { position: fixed; pointer-events: none; z-index: 0; display: none; }
html.fx-night #fxneb, html.fx-night #fxaura { display: block; }
#fxneb { inset: -20%; background: radial-gradient(38% 34% at 72% 22%, rgba(53, 177, 119,.30), transparent 70%), radial-gradient(34% 30% at 18% 78%, rgba(48, 182, 106,.20), transparent 70%), radial-gradient(26% 24% at 55% 60%, rgba(110, 60, 170,.14), transparent 70%); animation: fxDrift 46s ease-in-out infinite alternate; will-change: transform; }
@keyframes fxDrift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.12); } }
#fxaura { left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 239, 182,.075), rgba(105, 251, 183,.03) 45%, transparent 68%); will-change: transform; transform: translate3d(-999px,-999px,0); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 70; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(2, 9, 6,.55) 100%); }

/* opening sequence */
body.fx-intro #app { opacity: 0; pointer-events: none; }
#app { transition: opacity .7s ease; }
#fxintro { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-content: end; padding-bottom: 14vh; background: radial-gradient(90% 70% at 50% 40%, transparent 30%, rgba(2, 9, 6,.82) 100%); }
.fxi-in { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fxi-logo { display: flex; align-items: center; gap: 18px; }
.fxi-mark { width: 62px; height: auto; animation: fxiMark 1.1s cubic-bezier(.16,1,.3,1) .25s backwards; }
.fxi-word { width: min(250px, 52vw); height: auto; animation: fxiWord 1.2s cubic-bezier(.16,1,.3,1) .5s backwards; }
.fxi-sub { color: #8befb6; font: 600 12px/1 "Geist", system-ui, sans-serif; letter-spacing: .62em; margin-inline-start: .62em; animation: fxiSub 1.3s cubic-bezier(.16,1,.3,1) .85s backwards; }
.fxi-line { width: min(300px, 62vw); height: 1px; background: linear-gradient(90deg, transparent, #8befb6, transparent); animation: fxiLine 1.7s cubic-bezier(.65,0,.35,1) .7s backwards; }
@keyframes fxiMark { from { opacity: 0; transform: scale(.5) rotate(-25deg); filter: blur(12px); } }
@keyframes fxiWord { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-18px); filter: blur(8px); } to { clip-path: inset(0 0 0 0); } }
@keyframes fxiSub { from { opacity: 0; letter-spacing: 1.6em; filter: blur(6px); } }
@keyframes fxiLine { from { transform: scaleX(0); opacity: 0; } }
.fxflash { position: fixed; inset: 0; z-index: 65; pointer-events: none; background: radial-gradient(circle at var(--fx) var(--fy), rgba(193, 252, 219,.55) 0, rgba(139, 239, 182,.22) 14%, rgba(139, 239, 182,0) 46%); transform-origin: var(--fx) var(--fy); mix-blend-mode: screen; }

/* light that follows the mouse across a card, plus a lit edge */
.fx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(380px circle at var(--gx) var(--gy), rgba(174, 251, 207,.10), transparent 62%); }
.fx-glare::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(155, 250, 196,.95), transparent 72%); -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3card, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbox, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .wpoint, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hhero, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lfeats > div { transform-style: preserve-3d; will-change: transform; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }

/* login extras */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lhero h1 { background: linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #8befb6 46%, #e7fef1 52%, #59df93 60%, #ffffff 76%, #ffffff 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxShine 7s cubic-bezier(.65,0,.35,1) infinite; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lhero h1 .fx-w { background: inherit; -webkit-background-clip: text; background-clip: text; }
@keyframes fxShine { 0%, 30% { background-position: 100% 0; } 80%, 100% { background-position: 0% 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lfeats > div { animation: fxFloat 7s ease-in-out infinite; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lfeats > div:nth-child(2) { animation-delay: -2.3s; } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lfeats > div:nth-child(3) { animation-delay: -4.6s; }
@keyframes fxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbrand::after { display: none; }

/* inside the app */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .side { background: rgba(5, 19, 12,.58) !important; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-color: rgba(255, 255, 255,.07) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .side .sn { transition: background .3s, color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .side .sn.on { background: linear-gradient(90deg, rgba(89, 223, 147,.22), rgba(89, 223, 147,.03)) !important; color: #b7fbd4; box-shadow: inset 2px 0 0 #59df93, 0 0 28px -8px rgba(89, 223, 147,.55); }
[dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .side .sn.on { background: linear-gradient(270deg, rgba(89, 223, 147,.22), rgba(89, 223, 147,.03)) !important; box-shadow: inset -2px 0 0 #59df93, 0 0 28px -8px rgba(89, 223, 147,.55); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .side .sn:hover { transform: translateX(4px); } [dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .side .sn:hover { transform: translateX(-4px); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hhero { background: linear-gradient(120deg, rgba(24, 78, 53,.78) 0%, rgba(14, 43, 29,.7) 48%, rgba(21, 71, 43,.6) 100%) !important; border: 1px solid rgba(139, 239, 182,.2); box-shadow: 0 30px 70px -30px rgba(0, 0, 0,.8), 0 0 60px -20px rgba(89, 223, 147,.35), inset 0 1px 0 rgba(255, 255, 255,.08); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hhero::after { background: radial-gradient(circle, rgba(139, 239, 182,.28), transparent 68%); width: 420px; height: 420px; animation: fxOrb 14s ease-in-out infinite alternate; }
@keyframes fxOrb { from { transform: translate(0, 0) scale(1); } to { transform: translate(-140px, 60px) scale(1.25); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hh-date { background: linear-gradient(180deg, #ffffff 30%, #8befb6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hh-date .fx-w { background: inherit; -webkit-background-clip: text; background-clip: text; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hh-clock { background: rgba(255, 255, 255,.06); border-color: rgba(139, 239, 182,.25); box-shadow: inset 0 0 30px -10px rgba(139, 239, 182,.25); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hshift { background: rgba(6, 21, 14,.6); border: 1px solid rgba(255, 255, 255,.08); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] #toast { background: rgba(14, 39, 27,.82); border: 1px solid rgba(139, 239, 182,.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 50px -12px rgba(0, 0, 0,.7), 0 0 40px -10px rgba(89, 223, 147,.5); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tablewrap tbody tr { transition: background .25s, box-shadow .25s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tablewrap tbody tr:hover { background: rgba(89, 223, 147,.07); box-shadow: inset 2px 0 0 #59df93; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] ::selection { background: rgba(89, 223, 147,.35); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] ::-webkit-scrollbar-thumb { background: rgba(139, 239, 182,.22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] ::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) { #fxneb, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lhero h1, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lfeats > div, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hhero::after { animation: none !important; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3cash { background: linear-gradient(150deg, rgba(21, 71, 43,.72), rgba(20, 52, 37,.72)) !important; border-color: rgba(139, 239, 182,.28) !important; color: #defdeb !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3cash * { color: inherit; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .cashbar { background: rgba(255, 255, 255,.12) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lhero p { text-shadow: 0 2px 20px rgba(0, 0, 0,.8); }

/* ===== cinematic edition, part two ===== */
#fxgrain { position: fixed; inset: -64px; z-index: 72; pointer-events: none; opacity: .035; display: none; background-size: 128px 128px; animation: fxGrain .5s steps(5) infinite; }
html.fx-night #fxgrain { display: block; }
@keyframes fxGrain { 0% { transform: translate(0,0); } 20% { transform: translate(-31px,17px); } 40% { transform: translate(23px,-40px); } 60% { transform: translate(-12px,-22px); } 80% { transform: translate(38px,29px); } 100% { transform: translate(0,0); } }
#fxintro::before, #fxintro::after { content: ""; position: absolute; left: 0; right: 0; height: 11vh; background: #000000; transition: transform .7s cubic-bezier(.65,0,.35,1); animation: fxBarIn .8s cubic-bezier(.16,1,.3,1) backwards; }
#fxintro::before { top: 0; --d: -100%; } #fxintro::after { bottom: 0; --d: 100%; }
#fxintro.out::before { transform: translateY(-100%); } #fxintro.out::after { transform: translateY(100%); }
@keyframes fxBarIn { from { transform: translateY(var(--d)); } }
#fxintro { padding-bottom: 17vh; }
.fxsweep { position: fixed; top: -10%; bottom: -10%; left: 0; width: 45%; z-index: 66; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(139, 239, 182,.10) 40%, rgba(212, 253, 230,.22) 50%, rgba(139, 239, 182,.10) 60%, transparent); mix-blend-mode: screen; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .fx-tilt > *:not(.fx-glare):not(.fx-ring) { translate: var(--tx, 0) var(--ty, 0); transition: translate .25s ease-out; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .fx-tilt > h2, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .fx-tilt > :first-child:not(.fx-glare) { translate: calc(var(--tx, 0px) * 1.9) calc(var(--ty, 0px) * 1.9); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3card > *, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbox > *, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hhero > * { transition: translate .5s cubic-bezier(.16,1,.3,1); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .v3card, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hhero { box-shadow: 0 1px 0 rgba(255, 255, 255,.06) inset, 0 30px 60px -28px rgba(0, 0, 0,.75), 0 0 0 1px rgba(255, 255, 255,.02); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .lbox { box-shadow: 0 50px 100px -30px rgba(0, 0, 0,.85), 0 0 80px -30px rgba(89, 223, 147,.35), inset 0 1px 0 rgba(255, 255, 255,.08) !important; }
@media (prefers-reduced-motion: reduce) { #fxgrain { animation: none; } }

/* ===== every screen: pop-ups, menus, tables, tabs, chat, empty states ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .overlay { background: rgba(3, 13, 8,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .sheet { background: linear-gradient(180deg, rgba(18, 50, 35,.97), rgba(9, 28, 19,.98)) !important; border: 1px solid rgba(139, 239, 182,.18); box-shadow: 0 50px 120px -30px rgba(0, 0, 0,.9), 0 0 90px -30px rgba(89, 223, 147,.4), inset 0 1px 0 rgba(255, 255, 255,.09) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .sheet .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255,.035); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .pmenu, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .suggest { background: rgba(12, 35, 25,.97) !important; border: 1px solid rgba(139, 239, 182,.2) !important; box-shadow: 0 30px 70px -20px rgba(0, 0, 0,.85), 0 0 50px -20px rgba(89, 223, 147,.35) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: fxPop .45s cubic-bezier(.16,1,.3,1); transform-origin: top; }
@keyframes fxPop { from { opacity: 0; transform: perspective(700px) translateY(-10px) rotateX(-14deg) scale(.96); filter: blur(6px); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .segs { background: rgba(255, 255, 255,.05) !important; border: 1px solid rgba(255, 255, 255,.07); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .seg { transition: background .3s, color .3s, box-shadow .3s; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .seg.on, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] button.seg.on, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .seg input:checked + span { background: linear-gradient(135deg, #8befb6, #59df93) !important; color: #06190e !important; box-shadow: 0 6px 18px -6px rgba(89, 223, 147,.7) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .seg.on b { background: rgba(6, 25, 14,.18) !important; color: inherit; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] table:not(.pn-note table) th { background: rgba(139, 239, 182,.06) !important; color: #99d5b3; letter-spacing: .08em; border-bottom: 1px solid rgba(139, 239, 182,.16); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tablewrap { border-color: rgba(255, 255, 255,.08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0,.7); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .empty { background: rgba(14, 41, 28,.5) !important; border: 1px dashed rgba(139, 239, 182,.25) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-top: 96px; position: relative; overflow: hidden; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .empty::before { content: ""; position: absolute; left: 50%; top: 30px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; border: 1.5px solid rgba(139, 239, 182,.75); box-shadow: 0 0 24px -4px rgba(89, 223, 147,.8), inset 0 0 14px -4px rgba(89, 223, 147,.6); animation: fxRadar 2.6s cubic-bezier(.16,1,.3,1) infinite; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .empty::after { content: ""; position: absolute; left: 50%; top: 49px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #8befb6; box-shadow: 0 0 14px 2px rgba(139, 239, 182,.8); }
@keyframes fxRadar { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .guide-hero { background: linear-gradient(120deg, rgba(28, 86, 59,.9), rgba(14, 43, 29,.85) 50%, rgba(26, 94, 55,.8)) !important; border: 1px solid rgba(139, 239, 182,.22); box-shadow: 0 30px 70px -30px rgba(0, 0, 0,.8), 0 0 60px -24px rgba(89, 223, 147,.45) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .guide-ico { background: linear-gradient(135deg, #8befb6, #59df93) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .kpi { background: rgba(16, 43, 30,.6) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255,.08) !important; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .kpi::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(139, 239, 182,.7), transparent); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .kpi:hover { transform: translateY(-5px); border-color: rgba(139, 239, 182,.35) !important; box-shadow: 0 24px 50px -20px rgba(0, 0, 0,.7), 0 0 40px -14px rgba(89, 223, 147,.5); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .kpi b { background: linear-gradient(180deg, #ffffff 30%, #8befb6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .bcol { background: rgba(10, 32, 22,.5) !important; border: 1px solid rgba(255, 255, 255,.07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 2px 0 rgba(139, 239, 182,.35); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .bcol > :not(h3) { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .bcol > :not(h3):hover { transform: translateY(-4px) scale(1.015); border-color: rgba(139, 239, 182,.35); box-shadow: 0 18px 40px -16px rgba(0, 0, 0,.7), 0 0 30px -12px rgba(89, 223, 147,.5); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .msg { background: rgba(20, 54, 38,.75) !important; border-color: rgba(255, 255, 255,.09) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fxMsg .5s cubic-bezier(.16,1,.3,1) backwards; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .msg.mine { background: linear-gradient(135deg, rgba(89, 223, 147,.32), rgba(46, 154, 93,.22)) !important; border-color: rgba(139, 239, 182,.4) !important; color: #dffdec; }
@keyframes fxMsg { from { opacity: 0; transform: translateY(14px) scale(.96); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .bellrow { background: rgba(20, 54, 38,.8) !important; border-color: rgba(255, 255, 255,.08) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .bellrow.new { border-color: rgba(139, 239, 182,.45) !important; box-shadow: inset 2px 0 0 #59df93, 0 0 30px -14px rgba(89, 223, 147,.6); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .badge { box-shadow: 0 0 16px -5px currentColor; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .avatar { box-shadow: 0 0 0 1.5px rgba(139, 239, 182,.55), 0 0 18px -4px rgba(89, 223, 147,.6); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] input:focus, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] select:focus, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] textarea:focus { border-color: #59df93 !important; box-shadow: 0 0 0 3px rgba(89, 223, 147,.16), 0 0 24px -8px rgba(89, 223, 147,.55) !important; outline: 0; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hbtn { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .hbtn:hover { transform: translateY(-2px); border-color: rgba(139, 239, 182,.4); box-shadow: 0 0 24px -6px rgba(89, 223, 147,.6); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s, border-color .3s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn:hover { transform: translateY(-2px); } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn:not(.primary):hover { border-color: rgba(139, 239, 182,.4); } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn.primary:hover { box-shadow: 0 14px 34px -8px rgba(89, 223, 147,.75); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn:active { transform: translateY(0) scale(.97); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .brn { background: rgba(89, 223, 147,.14) !important; color: #8befb6 !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] details { transition: border-color .3s, box-shadow .3s; } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] details[open] { border-color: rgba(139, 239, 182,.25); }
@media (max-width: 899.98px) {
  html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tabbar { background: rgba(8, 26, 18,.78) !important; border: 1px solid rgba(139, 239, 182,.18) !important; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 20px 50px -10px rgba(0, 0, 0,.8), 0 0 40px -16px rgba(89, 223, 147,.4) !important; }
  html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tb { transition: background .3s, color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
  html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tb.on { background: linear-gradient(135deg, rgba(139, 239, 182,.26), rgba(89, 223, 147,.1)) !important; color: #8befb6 !important; transform: translateY(-3px); box-shadow: 0 0 24px -8px rgba(89, 223, 147,.8); }
}
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .empty::before, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .msg, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .pmenu, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .suggest { animation: none !important; } }

/* ===== last dark-green leftovers, order lists, order details, customer tracking page ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .olist .ohead, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .plist .phead, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] th:not(.pn-note th) { background: rgba(139, 239, 182,.06) !important; color: #99d5b3; letter-spacing: .08em; border-bottom: 1px solid rgba(139, 239, 182,.16); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .olist .orow, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .plist .prow { transition: background .3s, box-shadow .3s, transform .35s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .olist .orow:hover, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .plist .prow:hover, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] table:not(.pn-note table) tbody tr:hover td { background: rgba(89, 223, 147,.08) !important; } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .olist .orow:hover, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .plist .prow:hover { box-shadow: inset 2px 0 0 #59df93, 0 0 40px -18px rgba(89, 223, 147,.6); transform: translateX(3px); } [dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .olist .orow:hover, [dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .plist .prow:hover { box-shadow: inset -2px 0 0 #59df93; transform: translateX(-3px); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .olist .orow.card, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .plist .prow.card { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .olist, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .plist { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 18px; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .kv, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .chatbox, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .app .ico, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .dthumb { background: rgba(255, 255, 255,.04) !important; border: 1px solid rgba(255, 255, 255,.07); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn:hover { background: rgba(255, 255, 255,.08); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .x { background: rgba(255, 255, 255,.07) !important; transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s; } html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .x:hover { background: rgba(89, 223, 147,.25) !important; transform: rotate(90deg); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .stockplan, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .batch:not(.neg), html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .paypick .pp input:checked + span { background: rgba(105, 251, 183,.08) !important; border-color: rgba(105, 251, 183,.22) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .rtable tr.wrow td, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .gsec[open] summary { background: rgba(139, 239, 182,.05) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .ref { color: #b7fbd4; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .trk { background: linear-gradient(180deg, rgba(24, 78, 53,.55) 0, rgba(21, 71, 43,.3) 210px, transparent 320px) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] body.trkbody, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .trk-card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .trk-card { background: rgba(14, 41, 28,.72) !important; border-color: rgba(139, 239, 182,.16) !important; box-shadow: 0 40px 90px -40px rgba(0, 0, 0,.85), 0 0 60px -30px rgba(89, 223, 147,.4) !important; }

/* ===== final pass: titles, rows, badges, pop-up edges, phone bar, live map ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .top h1 { text-shadow: 0 0 28px rgba(139, 239, 182,.28); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .ref { text-shadow: 0 0 18px rgba(139, 239, 182,.35); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .badge.out { animation: fxBreath 2.4s ease-in-out infinite; }
@keyframes fxBreath { 50% { box-shadow: 0 0 26px -2px currentColor; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .nb, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tabbar .tb b { animation: fxPulse 2.2s ease-out infinite; }
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 rgba(90, 236, 153,.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(90, 236, 153,0); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] :focus-visible { outline: 2px solid rgba(139, 239, 182,.7); outline-offset: 2px; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] input[type="checkbox"], html[data-ui="v2"][data-theme="dark"][data-skin="origin"] input[type="radio"] { accent-color: #59df93; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .btn { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s, border-color .3s, translate .25s ease-out; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .sheet { position: relative; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .sheet::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #8befb6, transparent); opacity: .85; pointer-events: none; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .cashbar div { background: linear-gradient(90deg, #36c172, #8befb6, #36c172); background-size: 200% 100%; animation: fxFlow 3s linear infinite; box-shadow: 0 0 14px rgba(139, 239, 182,.6); }
@keyframes fxFlow { to { background-position: -200% 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .chip { transition: border-color .3s, color .3s, box-shadow .3s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .chip:hover { border-color: rgba(139, 239, 182,.4); box-shadow: 0 0 20px -8px var(--glow); } }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tabbar { background: rgba(8, 26, 18,.72) !important; border: 1px solid rgba(139, 239, 182,.16) !important; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 20px 50px -12px rgba(0, 0, 0,.85), 0 0 40px -18px var(--glow); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tabbar .tb { transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s, background .3s; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tabbar .tb.on { background: linear-gradient(180deg, rgba(139, 239, 182,.22), rgba(139, 239, 182,.04)); color: #b7fbd4; transform: translateY(-3px); box-shadow: 0 0 26px -8px var(--glow); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .leaflet-container { background: #071a11; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(.82) contrast(.92) saturate(.65); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .leaflet-bar a, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .leaflet-popup-content-wrapper, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .leaflet-popup-tip { background: rgba(12, 37, 26,.94); color: #dcf4e9; border-color: rgba(139, 239, 182,.25); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .leaflet-control-attribution { background: rgba(6, 21, 14,.6); color: #90bca8; }
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .badge.out, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .nb, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .tabbar .tb b, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .cashbar div { animation: none !important; } }

/* ---- readable text on the gold and navy surfaces (white on gold and dark on navy were too faint) ---- */
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] #toast { color: #dcf4e9; }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .sn b, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] body.shelled .side .sn b,
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .branchpick .chip.on, html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .slide3 .slide-lbl { color: var(--brand-ink); }
html[data-ui="v2"][data-theme="dark"][data-skin="origin"] .slide3 .slide-lbl { font-weight: 600; }

/* ===== NAJD ===== */
/* ===== Desert Night: navy + sand gold theme, 3D globe backdrop, motion polish ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] {
  color-scheme: dark;
  --bg: #091814; --card: rgba(22, 49, 42, .72); --ink: #ffffff; --muted: #bed5ce; --line: rgba(255, 255, 255,.09); --line2: rgba(255, 255, 255,.09);
  --brand: #cca75c; --brand-ink: #161108; --brand-2: #e0c288; --brand-soft: rgba(204, 167, 92,.14);
  --chip-bg: rgba(255, 255, 255,.06); --hover: rgba(255, 255, 255,.06); --col-bg: rgba(14, 36, 30,.55); --sel: rgba(204, 167, 92,.10);
  --shadow: 0 1px 0 rgba(255, 255, 255,.04) inset, 0 8px 24px rgba(0, 0, 0,.35);
  --shadow-md: 0 1px 0 rgba(255, 255, 255,.05) inset, 0 18px 50px rgba(0, 0, 0,.55);
  --glow: rgba(204, 167, 92,.35); --pine-deep: #061410; --saffron: #dcb871; --road: #baf7e6;
  --fx-display: "Instrument Sans", "Geist", system-ui, sans-serif;
}
html[data-ui="v2"][data-theme="dark"][data-skin="najd"], html[data-ui="v2"][data-theme="dark"][data-skin="najd"] body,
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] body.home, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] body.authv2 { background: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] { background: radial-gradient(1200px 800px at 80% -10%, #245648 0%, transparent 60%), radial-gradient(900px 700px at -10% 110%, #241e13 0%, transparent 55%), #091814; background-attachment: fixed; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] body { font-family: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] h1, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] h2, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] h3 { font-family: var(--fx-display); letter-spacing: -.02em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important; letter-spacing: 0 !important; }

/* the 3D canvas sits behind everything */
#fx3d, #fx2d { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
html[data-theme="dark"][data-skin="najd"] #fx3d.on, html[data-theme="dark"][data-skin="najd"] #fx2d.on { opacity: 1; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] #app, #modal { position: relative; z-index: 1; }
#modal, #toast { z-index: 50; } /* the toast keeps its own fixed place on the screen (it was pushed into the page here, which also made phones scroll sideways) */

/* glass surfaces */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .card, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3card, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .top,
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tablewrap, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tab:not(.on), html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hhero {
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .card, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3card { border-color: rgba(255, 255, 255,.08); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
@media (hover: hover) {
  html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .card:hover, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3card:hover { border-color: rgba(204, 167, 92,.28); box-shadow: 0 0 0 1px rgba(204, 167, 92,.08), 0 20px 50px rgba(0, 0, 0,.5), 0 0 40px -10px var(--glow); }
}
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .top { background: rgba(9, 24, 20,.62) !important; border-bottom: 1px solid rgba(255, 255, 255,.07); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] input, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] select, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] textarea { background-color: rgba(255, 255, 255,.04); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] select option { background: #14332a; }

/* gold buttons with a moving sheen */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn.primary { background: linear-gradient(135deg, #e0c288 0%, #cca75c 45%, #a98742 100%); border-color: transparent; color: #161108; position: relative; overflow: hidden; isolation: isolate; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255,.55) 48%, transparent 66%); transform: translateX(-120%); animation: fxSheen 4.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes fxSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .28; transform: scale(0); animation: fxRipple .7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tab.on { background: linear-gradient(135deg, #e0c288, #cca75c); border-color: transparent; color: #161108; box-shadow: 0 6px 18px -4px var(--glow); }

/* login: the brand panel turns into a window onto the globe */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbrand { background: linear-gradient(180deg, rgba(7, 21, 17,0) 0%, rgba(7, 21, 17,0) 40%, rgba(7, 21, 17,.82) 66%, rgba(7, 21, 17,.96) 100%) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbrand::after { background: radial-gradient(circle, rgba(204, 167, 92,.16), transparent 70%); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lroute { display: none; }
@media (min-width: 900px) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lhero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lhero h1 { background: linear-gradient(180deg, #ffffff 20%, #e0c288 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lfeats div { background: rgba(255, 255, 255,.05); border-color: rgba(255, 255, 255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbox { position: relative; }
@media (min-width: 900px) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbox { padding: 34px 32px; border-radius: 24px; background: rgba(19, 45, 38,.6); border: 1px solid rgba(255, 255, 255,.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0,.8); } }
@media (min-width: 900px) {
  html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lside { background: linear-gradient(90deg, rgba(9, 24, 20,0) 0%, rgba(9, 24, 20,.7) 18%, rgba(9, 24, 20,.88) 100%); }
}
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lin { background: rgba(255, 255, 255,.04); border-color: rgba(255, 255, 255,.1); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lin:focus-within { border-color: #cca75c; box-shadow: 0 0 0 4px rgba(204, 167, 92,.16), 0 0 30px -6px var(--glow); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lgo { box-shadow: 0 12px 32px -6px var(--glow); }
@media (max-width: 899.98px) {
  html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbrand { min-height: 44vh; border-radius: 0; background: none !important; }
  html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbox { background: rgba(17, 41, 34,.78); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255, 255, 255,.09); box-shadow: 0 30px 60px -20px rgba(0, 0, 0,.7); }
}
/* animated gold border around the login form */
.fx-ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--fx-a, 0deg), transparent 0 70%, rgba(224, 194, 136,.9) 82%, transparent 94%); -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fxSpin 6s linear infinite; }
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fxSpin { to { --fx-a: 360deg; } }

/* split-text pieces */
.fx-w { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }

/* scroll progress bar */
#fxbar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); z-index: 60; background: linear-gradient(90deg, #a98742, #e0c288); pointer-events: none; }
[dir="rtl"] #fxbar { transform-origin: 100% 50%; }
html[data-theme="light"] #fxbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn.primary::after, .fx-ring { animation: none !important; }
}

/* ===== cinematic edition ===== */
/* drifting nebula + vignette behind everything */
#fxneb, #fxaura { position: fixed; pointer-events: none; z-index: 0; display: none; }
html.fx-night #fxneb, html.fx-night #fxaura { display: block; }
#fxneb { inset: -20%; background: radial-gradient(38% 34% at 72% 22%, rgba(86, 192, 162,.30), transparent 70%), radial-gradient(34% 30% at 18% 78%, rgba(159, 126, 59,.20), transparent 70%), radial-gradient(26% 24% at 55% 60%, rgba(110, 60, 170,.14), transparent 70%); animation: fxDrift 46s ease-in-out infinite alternate; will-change: transform; }
@keyframes fxDrift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.12); } }
#fxaura { left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 194, 136,.075), rgba(184, 247, 229,.03) 45%, transparent 68%); will-change: transform; transform: translate3d(-999px,-999px,0); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 70; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3, 11, 8,.55) 100%); }

/* opening sequence */
body.fx-intro #app { opacity: 0; pointer-events: none; }
#app { transition: opacity .7s ease; }
#fxintro { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-content: end; padding-bottom: 14vh; background: radial-gradient(90% 70% at 50% 40%, transparent 30%, rgba(3, 11, 8,.82) 100%); }
.fxi-in { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fxi-logo { display: flex; align-items: center; gap: 18px; }
.fxi-mark { width: 62px; height: auto; animation: fxiMark 1.1s cubic-bezier(.16,1,.3,1) .25s backwards; }
.fxi-word { width: min(250px, 52vw); height: auto; animation: fxiWord 1.2s cubic-bezier(.16,1,.3,1) .5s backwards; }
.fxi-sub { color: #e0c288; font: 600 12px/1 "Geist", system-ui, sans-serif; letter-spacing: .62em; margin-inline-start: .62em; animation: fxiSub 1.3s cubic-bezier(.16,1,.3,1) .85s backwards; }
.fxi-line { width: min(300px, 62vw); height: 1px; background: linear-gradient(90deg, transparent, #e0c288, transparent); animation: fxiLine 1.7s cubic-bezier(.65,0,.35,1) .7s backwards; }
@keyframes fxiMark { from { opacity: 0; transform: scale(.5) rotate(-25deg); filter: blur(12px); } }
@keyframes fxiWord { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-18px); filter: blur(8px); } to { clip-path: inset(0 0 0 0); } }
@keyframes fxiSub { from { opacity: 0; letter-spacing: 1.6em; filter: blur(6px); } }
@keyframes fxiLine { from { transform: scaleX(0); opacity: 0; } }
.fxflash { position: fixed; inset: 0; z-index: 65; pointer-events: none; background: radial-gradient(circle at var(--fx) var(--fy), rgba(242, 222, 181,.55) 0, rgba(224, 194, 136,.22) 14%, rgba(224, 194, 136,0) 46%); transform-origin: var(--fx) var(--fy); mix-blend-mode: screen; }

/* light that follows the mouse across a card, plus a lit edge */
.fx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(380px circle at var(--gx) var(--gy), rgba(239, 214, 165,.10), transparent 62%); }
.fx-glare::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(236, 207, 149,.95), transparent 72%); -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3card, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbox, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .wpoint, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hhero, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lfeats > div { transform-style: preserve-3d; will-change: transform; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }

/* login extras */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lhero h1 { background: linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #e0c288 46%, #f8ecd5 52%, #cca75c 60%, #ffffff 76%, #ffffff 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxShine 7s cubic-bezier(.65,0,.35,1) infinite; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lhero h1 .fx-w { background: inherit; -webkit-background-clip: text; background-clip: text; }
@keyframes fxShine { 0%, 30% { background-position: 100% 0; } 80%, 100% { background-position: 0% 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lfeats > div { animation: fxFloat 7s ease-in-out infinite; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lfeats > div:nth-child(2) { animation-delay: -2.3s; } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lfeats > div:nth-child(3) { animation-delay: -4.6s; }
@keyframes fxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbrand::after { display: none; }

/* inside the app */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .side { background: rgba(7, 21, 17,.58) !important; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-color: rgba(255, 255, 255,.07) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .side .sn { transition: background .3s, color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .side .sn.on { background: linear-gradient(90deg, rgba(204, 167, 92,.22), rgba(204, 167, 92,.03)) !important; color: #f0daac; box-shadow: inset 2px 0 0 #cca75c, 0 0 28px -8px rgba(204, 167, 92,.55); }
[dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .side .sn.on { background: linear-gradient(270deg, rgba(204, 167, 92,.22), rgba(204, 167, 92,.03)) !important; box-shadow: inset -2px 0 0 #cca75c, 0 0 28px -8px rgba(204, 167, 92,.55); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .side .sn:hover { transform: translateX(4px); } [dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .side .sn:hover { transform: translateX(-4px); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hhero { background: linear-gradient(120deg, rgba(34, 90, 74,.78) 0%, rgba(20, 49, 41,.7) 48%, rgba(62, 50, 25,.6) 100%) !important; border: 1px solid rgba(224, 194, 136,.2); box-shadow: 0 30px 70px -30px rgba(0, 0, 0,.8), 0 0 60px -20px rgba(204, 167, 92,.35), inset 0 1px 0 rgba(255, 255, 255,.08); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hhero::after { background: radial-gradient(circle, rgba(224, 194, 136,.28), transparent 68%); width: 420px; height: 420px; animation: fxOrb 14s ease-in-out infinite alternate; }
@keyframes fxOrb { from { transform: translate(0, 0) scale(1); } to { transform: translate(-140px, 60px) scale(1.25); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hh-date { background: linear-gradient(180deg, #ffffff 30%, #e0c288); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hh-date .fx-w { background: inherit; -webkit-background-clip: text; background-clip: text; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hh-clock { background: rgba(255, 255, 255,.06); border-color: rgba(224, 194, 136,.25); box-shadow: inset 0 0 30px -10px rgba(224, 194, 136,.25); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hshift { background: rgba(9, 24, 20,.6); border: 1px solid rgba(255, 255, 255,.08); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] #toast { background: rgba(19, 45, 38,.82); border: 1px solid rgba(224, 194, 136,.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 50px -12px rgba(0, 0, 0,.7), 0 0 40px -10px rgba(204, 167, 92,.5); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tablewrap tbody tr { transition: background .25s, box-shadow .25s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tablewrap tbody tr:hover { background: rgba(204, 167, 92,.07); box-shadow: inset 2px 0 0 #cca75c; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] ::selection { background: rgba(204, 167, 92,.35); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] ::-webkit-scrollbar-thumb { background: rgba(224, 194, 136,.22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] ::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) { #fxneb, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lhero h1, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lfeats > div, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hhero::after { animation: none !important; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3cash { background: linear-gradient(150deg, rgba(62, 50, 25,.72), rgba(27, 60, 51,.72)) !important; border-color: rgba(224, 194, 136,.28) !important; color: #f6e8cd !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3cash * { color: inherit; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .cashbar { background: rgba(255, 255, 255,.12) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lhero p { text-shadow: 0 2px 20px rgba(0, 0, 0,.8); }

/* ===== cinematic edition, part two ===== */
#fxgrain { position: fixed; inset: -64px; z-index: 72; pointer-events: none; opacity: .035; display: none; background-size: 128px 128px; animation: fxGrain .5s steps(5) infinite; }
html.fx-night #fxgrain { display: block; }
@keyframes fxGrain { 0% { transform: translate(0,0); } 20% { transform: translate(-31px,17px); } 40% { transform: translate(23px,-40px); } 60% { transform: translate(-12px,-22px); } 80% { transform: translate(38px,29px); } 100% { transform: translate(0,0); } }
#fxintro::before, #fxintro::after { content: ""; position: absolute; left: 0; right: 0; height: 11vh; background: #000000; transition: transform .7s cubic-bezier(.65,0,.35,1); animation: fxBarIn .8s cubic-bezier(.16,1,.3,1) backwards; }
#fxintro::before { top: 0; --d: -100%; } #fxintro::after { bottom: 0; --d: 100%; }
#fxintro.out::before { transform: translateY(-100%); } #fxintro.out::after { transform: translateY(100%); }
@keyframes fxBarIn { from { transform: translateY(var(--d)); } }
#fxintro { padding-bottom: 17vh; }
.fxsweep { position: fixed; top: -10%; bottom: -10%; left: 0; width: 45%; z-index: 66; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(224, 194, 136,.10) 40%, rgba(245, 229, 197,.22) 50%, rgba(224, 194, 136,.10) 60%, transparent); mix-blend-mode: screen; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .fx-tilt > *:not(.fx-glare):not(.fx-ring) { translate: var(--tx, 0) var(--ty, 0); transition: translate .25s ease-out; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .fx-tilt > h2, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .fx-tilt > :first-child:not(.fx-glare) { translate: calc(var(--tx, 0px) * 1.9) calc(var(--ty, 0px) * 1.9); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3card > *, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbox > *, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hhero > * { transition: translate .5s cubic-bezier(.16,1,.3,1); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .v3card, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hhero { box-shadow: 0 1px 0 rgba(255, 255, 255,.06) inset, 0 30px 60px -28px rgba(0, 0, 0,.75), 0 0 0 1px rgba(255, 255, 255,.02); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .lbox { box-shadow: 0 50px 100px -30px rgba(0, 0, 0,.85), 0 0 80px -30px rgba(204, 167, 92,.35), inset 0 1px 0 rgba(255, 255, 255,.08) !important; }
@media (prefers-reduced-motion: reduce) { #fxgrain { animation: none; } }

/* ===== every screen: pop-ups, menus, tables, tabs, chat, empty states ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .overlay { background: rgba(5, 15, 12,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .sheet { background: linear-gradient(180deg, rgba(25, 58, 49,.97), rgba(13, 32, 27,.98)) !important; border: 1px solid rgba(224, 194, 136,.18); box-shadow: 0 50px 120px -30px rgba(0, 0, 0,.9), 0 0 90px -30px rgba(204, 167, 92,.4), inset 0 1px 0 rgba(255, 255, 255,.09) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .sheet .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255,.035); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .pmenu, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .suggest { background: rgba(17, 41, 34,.97) !important; border: 1px solid rgba(224, 194, 136,.2) !important; box-shadow: 0 30px 70px -20px rgba(0, 0, 0,.85), 0 0 50px -20px rgba(204, 167, 92,.35) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: fxPop .45s cubic-bezier(.16,1,.3,1); transform-origin: top; }
@keyframes fxPop { from { opacity: 0; transform: perspective(700px) translateY(-10px) rotateX(-14deg) scale(.96); filter: blur(6px); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .segs { background: rgba(255, 255, 255,.05) !important; border: 1px solid rgba(255, 255, 255,.07); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .seg { transition: background .3s, color .3s, box-shadow .3s; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .seg.on, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] button.seg.on, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .seg input:checked + span { background: linear-gradient(135deg, #e0c288, #cca75c) !important; color: #161108 !important; box-shadow: 0 6px 18px -6px rgba(204, 167, 92,.7) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .seg.on b { background: rgba(22, 17, 8,.18) !important; color: inherit; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] table:not(.pn-note table) th { background: rgba(224, 194, 136,.06) !important; color: #c8b794; letter-spacing: .08em; border-bottom: 1px solid rgba(224, 194, 136,.16); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tablewrap { border-color: rgba(255, 255, 255,.08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0,.7); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .empty { background: rgba(20, 47, 39,.5) !important; border: 1px dashed rgba(224, 194, 136,.25) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-top: 96px; position: relative; overflow: hidden; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .empty::before { content: ""; position: absolute; left: 50%; top: 30px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; border: 1.5px solid rgba(224, 194, 136,.75); box-shadow: 0 0 24px -4px rgba(204, 167, 92,.8), inset 0 0 14px -4px rgba(204, 167, 92,.6); animation: fxRadar 2.6s cubic-bezier(.16,1,.3,1) infinite; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .empty::after { content: ""; position: absolute; left: 50%; top: 49px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #e0c288; box-shadow: 0 0 14px 2px rgba(224, 194, 136,.8); }
@keyframes fxRadar { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .guide-hero { background: linear-gradient(120deg, rgba(40, 98, 82,.9), rgba(20, 49, 41,.85) 50%, rgba(82, 65, 32,.8)) !important; border: 1px solid rgba(224, 194, 136,.22); box-shadow: 0 30px 70px -30px rgba(0, 0, 0,.8), 0 0 60px -24px rgba(204, 167, 92,.45) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .guide-ico { background: linear-gradient(135deg, #e0c288, #cca75c) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .kpi { background: rgba(22, 49, 42,.6) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255,.08) !important; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .kpi::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(224, 194, 136,.7), transparent); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .kpi:hover { transform: translateY(-5px); border-color: rgba(224, 194, 136,.35) !important; box-shadow: 0 24px 50px -20px rgba(0, 0, 0,.7), 0 0 40px -14px rgba(204, 167, 92,.5); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .kpi b { background: linear-gradient(180deg, #ffffff 30%, #e0c288); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .bcol { background: rgba(14, 36, 30,.5) !important; border: 1px solid rgba(255, 255, 255,.07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 2px 0 rgba(224, 194, 136,.35); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .bcol > :not(h3) { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .bcol > :not(h3):hover { transform: translateY(-4px) scale(1.015); border-color: rgba(224, 194, 136,.35); box-shadow: 0 18px 40px -16px rgba(0, 0, 0,.7), 0 0 30px -12px rgba(204, 167, 92,.5); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .msg { background: rgba(27, 62, 52,.75) !important; border-color: rgba(255, 255, 255,.09) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fxMsg .5s cubic-bezier(.16,1,.3,1) backwards; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .msg.mine { background: linear-gradient(135deg, rgba(204, 167, 92,.32), rgba(135, 108, 55,.22)) !important; border-color: rgba(224, 194, 136,.4) !important; color: #f6e9ce; }
@keyframes fxMsg { from { opacity: 0; transform: translateY(14px) scale(.96); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .bellrow { background: rgba(27, 62, 52,.8) !important; border-color: rgba(255, 255, 255,.08) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .bellrow.new { border-color: rgba(224, 194, 136,.45) !important; box-shadow: inset 2px 0 0 #cca75c, 0 0 30px -14px rgba(204, 167, 92,.6); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .badge { box-shadow: 0 0 16px -5px currentColor; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .avatar { box-shadow: 0 0 0 1.5px rgba(224, 194, 136,.55), 0 0 18px -4px rgba(204, 167, 92,.6); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] input:focus, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] select:focus, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] textarea:focus { border-color: #cca75c !important; box-shadow: 0 0 0 3px rgba(204, 167, 92,.16), 0 0 24px -8px rgba(204, 167, 92,.55) !important; outline: 0; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hbtn { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .hbtn:hover { transform: translateY(-2px); border-color: rgba(224, 194, 136,.4); box-shadow: 0 0 24px -6px rgba(204, 167, 92,.6); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s, border-color .3s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn:hover { transform: translateY(-2px); } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn:not(.primary):hover { border-color: rgba(224, 194, 136,.4); } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn.primary:hover { box-shadow: 0 14px 34px -8px rgba(204, 167, 92,.75); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn:active { transform: translateY(0) scale(.97); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .brn { background: rgba(204, 167, 92,.14) !important; color: #e0c288 !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] details { transition: border-color .3s, box-shadow .3s; } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] details[open] { border-color: rgba(224, 194, 136,.25); }
@media (max-width: 899.98px) {
  html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tabbar { background: rgba(11, 30, 25,.78) !important; border: 1px solid rgba(224, 194, 136,.18) !important; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 20px 50px -10px rgba(0, 0, 0,.8), 0 0 40px -16px rgba(204, 167, 92,.4) !important; }
  html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tb { transition: background .3s, color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
  html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tb.on { background: linear-gradient(135deg, rgba(224, 194, 136,.26), rgba(204, 167, 92,.1)) !important; color: #e0c288 !important; transform: translateY(-3px); box-shadow: 0 0 24px -8px rgba(204, 167, 92,.8); }
}
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .empty::before, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .msg, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .pmenu, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .suggest { animation: none !important; } }

/* ===== last dark-green leftovers, order lists, order details, customer tracking page ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .olist .ohead, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .plist .phead, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] th:not(.pn-note th) { background: rgba(224, 194, 136,.06) !important; color: #c8b794; letter-spacing: .08em; border-bottom: 1px solid rgba(224, 194, 136,.16); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .olist .orow, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .plist .prow { transition: background .3s, box-shadow .3s, transform .35s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .olist .orow:hover, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .plist .prow:hover, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] table:not(.pn-note table) tbody tr:hover td { background: rgba(204, 167, 92,.08) !important; } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .olist .orow:hover, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .plist .prow:hover { box-shadow: inset 2px 0 0 #cca75c, 0 0 40px -18px rgba(204, 167, 92,.6); transform: translateX(3px); } [dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .olist .orow:hover, [dir="rtl"]html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .plist .prow:hover { box-shadow: inset -2px 0 0 #cca75c; transform: translateX(-3px); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .olist .orow.card, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .plist .prow.card { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .olist, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .plist { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 18px; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .kv, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .chatbox, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .app .ico, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .dthumb { background: rgba(255, 255, 255,.04) !important; border: 1px solid rgba(255, 255, 255,.07); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn:hover { background: rgba(255, 255, 255,.08); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .x { background: rgba(255, 255, 255,.07) !important; transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s; } html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .x:hover { background: rgba(204, 167, 92,.25) !important; transform: rotate(90deg); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .stockplan, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .batch:not(.neg), html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .paypick .pp input:checked + span { background: rgba(184, 247, 229,.08) !important; border-color: rgba(184, 247, 229,.22) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .rtable tr.wrow td, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .gsec[open] summary { background: rgba(224, 194, 136,.05) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .ref { color: #f0daac; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .trk { background: linear-gradient(180deg, rgba(34, 90, 74,.55) 0, rgba(62, 50, 25,.3) 210px, transparent 320px) !important; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] body.trkbody, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .trk-card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .trk-card { background: rgba(20, 47, 39,.72) !important; border-color: rgba(224, 194, 136,.16) !important; box-shadow: 0 40px 90px -40px rgba(0, 0, 0,.85), 0 0 60px -30px rgba(204, 167, 92,.4) !important; }

/* ===== final pass: titles, rows, badges, pop-up edges, phone bar, live map ===== */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .top h1 { text-shadow: 0 0 28px rgba(224, 194, 136,.28); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .ref { text-shadow: 0 0 18px rgba(224, 194, 136,.35); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .badge.out { animation: fxBreath 2.4s ease-in-out infinite; }
@keyframes fxBreath { 50% { box-shadow: 0 0 26px -2px currentColor; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .nb, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tabbar .tb b { animation: fxPulse 2.2s ease-out infinite; }
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 rgba(217, 175, 93,.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(217, 175, 93,0); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] :focus-visible { outline: 2px solid rgba(224, 194, 136,.7); outline-offset: 2px; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] input[type="checkbox"], html[data-ui="v2"][data-theme="dark"][data-skin="najd"] input[type="radio"] { accent-color: #cca75c; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .btn { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s, border-color .3s, translate .25s ease-out; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .sheet { position: relative; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .sheet::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #e0c288, transparent); opacity: .85; pointer-events: none; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .cashbar div { background: linear-gradient(90deg, #a98742, #e0c288, #a98742); background-size: 200% 100%; animation: fxFlow 3s linear infinite; box-shadow: 0 0 14px rgba(224, 194, 136,.6); }
@keyframes fxFlow { to { background-position: -200% 0; } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .chip { transition: border-color .3s, color .3s, box-shadow .3s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .chip:hover { border-color: rgba(224, 194, 136,.4); box-shadow: 0 0 20px -8px var(--glow); } }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tabbar { background: rgba(11, 30, 25,.72) !important; border: 1px solid rgba(224, 194, 136,.16) !important; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 20px 50px -12px rgba(0, 0, 0,.85), 0 0 40px -18px var(--glow); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tabbar .tb { transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s, background .3s; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tabbar .tb.on { background: linear-gradient(180deg, rgba(224, 194, 136,.22), rgba(224, 194, 136,.04)); color: #f0daac; transform: translateY(-3px); box-shadow: 0 0 26px -8px var(--glow); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .leaflet-container { background: #0a1e18; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(.82) contrast(.92) saturate(.65); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .leaflet-bar a, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .leaflet-popup-content-wrapper, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .leaflet-popup-tip { background: rgba(17, 43, 35,.94); color: #ffffff; border-color: rgba(224, 194, 136,.25); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .leaflet-control-attribution { background: rgba(9, 24, 20,.6); color: #bed5ce; }
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .badge.out, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .nb, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .tabbar .tb b, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .cashbar div { animation: none !important; } }

/* ---- readable text on the gold and navy surfaces (white on gold and dark on navy were too faint) ---- */
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] #toast { color: #ffffff; }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .sn b, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] body.shelled .side .sn b,
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .branchpick .chip.on, html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .slide3 .slide-lbl { color: var(--brand-ink); }
html[data-ui="v2"][data-theme="dark"][data-skin="najd"] .slide3 .slide-lbl { font-weight: 600; }

/* ===== shared: the scene canvas of the coffee themes ===== */
#fxs { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
html[data-skin="latte"] #fxs.on, html[data-skin="origin"] #fxs.on, html[data-skin="najd"] #fxs.on { opacity: 1; }
html[data-skin="origin"] #fx3d, html[data-skin="origin"] #fx2d, html[data-skin="najd"] #fx3d, html[data-skin="najd"] #fx2d { display: none; }
html[data-ui="v2"][data-skin="origin"] { background: radial-gradient(1100px 800px at 50% 10%, #0d3324 0%, transparent 60%), #030c08 !important; }
html[data-ui="v2"][data-skin="najd"] { background: radial-gradient(1100px 800px at 50% 0%, #1d4a3d 0%, transparent 60%), #071410 !important; }
html[data-ui="v2"][data-skin="najd"] h1, html[data-ui="v2"][data-skin="najd"] h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
html[data-ui="v2"][data-skin="najd"] .hhero h1, html[data-ui="v2"][data-skin="najd"] .top h1 { color: #f3dca4; }

/* ===== LATTE: warm cream, frosted glass over a latte cup seen from above ===== */
html[data-ui="v2"][data-skin="latte"] {
  color-scheme: light;
  --bg: #efe4d4; --card: rgba(255, 250, 243, .66); --ink: #2b1a10; --muted: #7d6553; --line: rgba(120, 80, 50, .16); --line2: rgba(120, 80, 50, .16);
  --brand: #6b3a1e; --brand-ink: #fff7ec; --brand-2: #a0663a; --brand-soft: rgba(107, 58, 30, .10); --chip-bg: rgba(120, 80, 50, .08); --hover: rgba(120, 80, 50, .06);
  --col-bg: rgba(255, 250, 243, .45); --sel: rgba(107, 58, 30, .08); --glow: rgba(107, 58, 30, .28); --pine-deep: #2b1a10; --saffron: #b9772f;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 28px -14px rgba(90, 50, 20, .35); --shadow-md: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 50px -18px rgba(90, 50, 20, .45);
  background: #efe4d4;
}
html[data-ui="v2"][data-skin="latte"] body, html[data-ui="v2"][data-skin="latte"] body.home, html[data-ui="v2"][data-skin="latte"] body.authv2 { background: transparent; }
html[data-ui="v2"][data-skin="latte"] #app, html[data-ui="v2"][data-skin="latte"] #modal { position: relative; z-index: 1; }
html[data-ui="v2"][data-skin="latte"] .card, html[data-ui="v2"][data-skin="latte"] .v3card, html[data-ui="v2"][data-skin="latte"] .hhero,
html[data-ui="v2"][data-skin="latte"] .tablewrap, html[data-ui="v2"][data-skin="latte"] .side, html[data-ui="v2"][data-skin="latte"] .tabbar,
html[data-ui="v2"][data-skin="latte"] .top, html[data-ui="v2"][data-skin="latte"] .orow, html[data-ui="v2"][data-skin="latte"] .prow, html[data-ui="v2"][data-skin="latte"] .kpi {
  background: var(--card) !important; border-color: var(--line) !important; -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
html[data-ui="v2"][data-skin="latte"] h1, html[data-ui="v2"][data-skin="latte"] h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
html[data-ui="v2"][data-skin="latte"] .hhero { color: var(--ink) !important; }
html[data-ui="v2"][data-skin="latte"] .hhero * { color: inherit; }
html[data-ui="v2"][data-skin="latte"] .btn.primary { background: linear-gradient(140deg, #8a4f28, #5a2f16) !important; color: #fff7ec !important; border: 0; }
html[data-ui="v2"][data-skin="latte"] .card, html[data-ui="v2"][data-skin="latte"] .v3card, html[data-ui="v2"][data-skin="latte"] .orow { animation: fxsIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes fxsIn { from { opacity: 0; transform: translateY(14px); } }
[dir="rtl"] h1, [dir="rtl"] h2 { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important; }

/* ===== the theme picker ===== */
.thpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.thopt { display: grid; gap: 8px; padding: 8px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-align: start; font: inherit; }
.thopt.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.thopt i { display: block; height: 74px; border-radius: 11px; }
.thopt b { font-size: 14px; } .thopt small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.th-light i { background: linear-gradient(140deg, #f3f4f1 55%, #0e7a5f 56%); }
.th-night i { background: radial-gradient(circle at 70% 35%, #3b4b8f 0 14%, transparent 15%), linear-gradient(140deg, #060a17 55%, #e6ad52 56%); }
.th-latte i { background: radial-gradient(circle at 60% 60%, #fff6ea 0 10%, #b07a4c 11% 32%, #6b3a1e 33% 40%, transparent 41%), #efe4d4; }
.th-origin i { background: radial-gradient(circle at 66% 40%, #e2463f 0 7%, transparent 8%), radial-gradient(circle at 48% 55%, #7fe0a6 0 9%, transparent 10%), #04110c; }
.th-najd i { background: conic-gradient(from 22.5deg at 50% 50%, #d6b268 0 12.5%, transparent 0 25%, #d6b268 0 37.5%, transparent 0 50%, #d6b268 0 62.5%, transparent 0 75%, #d6b268 0 87.5%, transparent 0) center / 46px 46px no-repeat, #0d1f1a; }
/* Latte: the cash card and the phone tab bar were made for a dark surface; on cream they need dark text */
html[data-ui="v2"][data-skin="latte"] .v3cash { background: linear-gradient(150deg, #7a4423, #4a2512) !important; border-color: transparent !important; }
html[data-ui="v2"][data-skin="latte"] .v3cash, html[data-ui="v2"][data-skin="latte"] .v3cash * { color: #fff3e2 !important; }
html[data-ui="v2"][data-skin="latte"] .tabbar { background: rgba(255, 250, 243, .82) !important; border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 12px 30px -12px rgba(90, 50, 20, .4); }
html[data-ui="v2"][data-skin="latte"] .tabbar .tb, html[data-ui="v2"][data-skin="latte"] .tabbar .tb span { color: #7d6553 !important; }
html[data-ui="v2"][data-skin="latte"] .tabbar .tb.on, html[data-ui="v2"][data-skin="latte"] .tabbar .tb.on span { color: #6b3a1e !important; }
html[data-ui="v2"][data-skin="latte"] .tabbar .tb.on { background: rgba(107, 58, 30, .1) !important; }