/* ===== Desert Night: navy + sand gold theme, 3D globe backdrop, motion polish ===== */
html[data-ui="v2"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #060a17; --card: rgba(16, 23, 46, .72); --ink: #eef1fa; --muted: #9aa4c4; --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.09);
  --brand: #e6ad52; --brand-ink: #1a1205; --brand-2: #f4cf86; --brand-soft: rgba(230,173,82,.14);
  --chip-bg: rgba(255,255,255,.06); --hover: rgba(255,255,255,.06); --col-bg: rgba(10,16,34,.55); --sel: rgba(230,173,82,.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(230,173,82,.35); --pine-deep: #040713; --saffron: #f4c26b; --road: #7aa2ff;
  --fx-display: "Instrument Sans", "Geist", system-ui, sans-serif;
}
html[data-ui="v2"][data-theme="dark"], html[data-ui="v2"][data-theme="dark"] body,
html[data-ui="v2"][data-theme="dark"] body.home, html[data-ui="v2"][data-theme="dark"] body.authv2 { background: transparent; }
html[data-ui="v2"][data-theme="dark"] { background: radial-gradient(1200px 800px at 80% -10%, #1a2350 0%, transparent 60%), radial-gradient(900px 700px at -10% 110%, #2a1d10 0%, transparent 55%), #060a17; background-attachment: fixed; }
html[data-ui="v2"][data-theme="dark"] body { font-family: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[data-ui="v2"][data-theme="dark"] h1, html[data-ui="v2"][data-theme="dark"] h2, html[data-ui="v2"][data-theme="dark"] 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"] #fx3d.on, html[data-theme="dark"] #fx2d.on { opacity: 1; }
html[data-ui="v2"][data-theme="dark"] #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"] .card, html[data-ui="v2"][data-theme="dark"] .v3card, html[data-ui="v2"][data-theme="dark"] .top,
html[data-ui="v2"][data-theme="dark"] .tablewrap, html[data-ui="v2"][data-theme="dark"] .tab:not(.on), html[data-ui="v2"][data-theme="dark"] .hhero {
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
html[data-ui="v2"][data-theme="dark"] .card, html[data-ui="v2"][data-theme="dark"] .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"] .card:hover, html[data-ui="v2"][data-theme="dark"] .v3card:hover { border-color: rgba(230,173,82,.28); box-shadow: 0 0 0 1px rgba(230,173,82,.08), 0 20px 50px rgba(0,0,0,.5), 0 0 40px -10px var(--glow); }
}
html[data-ui="v2"][data-theme="dark"] .top { background: rgba(6,10,23,.62) !important; border-bottom: 1px solid rgba(255,255,255,.07); }
html[data-ui="v2"][data-theme="dark"] input, html[data-ui="v2"][data-theme="dark"] select, html[data-ui="v2"][data-theme="dark"] textarea { background-color: rgba(255,255,255,.04); }
html[data-ui="v2"][data-theme="dark"] select option { background: #0e1530; }

/* gold buttons with a moving sheen */
html[data-ui="v2"][data-theme="dark"] .btn.primary { background: linear-gradient(135deg, #f4cf86 0%, #e6ad52 45%, #c98a2e 100%); border-color: transparent; color: #1a1205; position: relative; overflow: hidden; isolation: isolate; }
html[data-ui="v2"][data-theme="dark"] .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"] .tab.on { background: linear-gradient(135deg, #f4cf86, #e6ad52); border-color: transparent; color: #1a1205; 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"] .lbrand { background: linear-gradient(180deg, rgba(5,8,20,0) 0%, rgba(5,8,20,0) 40%, rgba(5,8,20,.82) 66%, rgba(5,8,20,.96) 100%) !important; }
html[data-ui="v2"][data-theme="dark"] .lbrand::after { background: radial-gradient(circle, rgba(230,173,82,.16), transparent 70%); }
html[data-ui="v2"][data-theme="dark"] .lroute { display: none; }
@media (min-width: 900px) { html[data-ui="v2"][data-theme="dark"] .lhero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1; } }
html[data-ui="v2"][data-theme="dark"] .lhero h1 { background: linear-gradient(180deg, #fff 20%, #f4cf86 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"] .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"] .lbox { position: relative; }
@media (min-width: 900px) { html[data-ui="v2"][data-theme="dark"] .lbox { padding: 34px 32px; border-radius: 24px; background: rgba(14,20,42,.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"] .lside { background: linear-gradient(90deg, rgba(6,10,23,0) 0%, rgba(6,10,23,.7) 18%, rgba(6,10,23,.88) 100%); }
}
html[data-ui="v2"][data-theme="dark"] .lin { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
html[data-ui="v2"][data-theme="dark"] .lin:focus-within { border-color: #e6ad52; box-shadow: 0 0 0 4px rgba(230,173,82,.16), 0 0 30px -6px var(--glow); }
html[data-ui="v2"][data-theme="dark"] .lgo { box-shadow: 0 12px 32px -6px var(--glow); }
@media (max-width: 899.98px) {
  html[data-ui="v2"][data-theme="dark"] .lbrand { min-height: 44vh; border-radius: 0; background: none !important; }
  html[data-ui="v2"][data-theme="dark"] .lbox { background: rgba(12,18,38,.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(244,207,134,.9) 82%, transparent 94%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 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, #c98a2e, #f4cf86); 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(52,72,190,.30), transparent 70%), radial-gradient(34% 30% at 18% 78%, rgba(190,120,40,.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(244,207,134,.075), rgba(120,150,255,.03) 45%, transparent 68%); will-change: transform; transform: translate3d(-999px,-999px,0); }
html[data-ui="v2"][data-theme="dark"] 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,3,10,.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,3,10,.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: #f4cf86; 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, #f4cf86, 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(255,236,190,.55) 0, rgba(244,207,134,.22) 14%, rgba(244,207,134,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(255,226,170,.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(255,220,150,.95), transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html[data-ui="v2"][data-theme="dark"] .v3card, html[data-ui="v2"][data-theme="dark"] .lbox, html[data-ui="v2"][data-theme="dark"] .wpoint, html[data-ui="v2"][data-theme="dark"] .hhero, html[data-ui="v2"][data-theme="dark"] .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"] .lhero h1 { background: linear-gradient(100deg, #fff 0%, #fff 30%, #f4cf86 46%, #fff8e6 52%, #e6ad52 60%, #fff 76%, #fff 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"] .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"] .lfeats > div { animation: fxFloat 7s ease-in-out infinite; }
html[data-ui="v2"][data-theme="dark"] .lfeats > div:nth-child(2) { animation-delay: -2.3s; } html[data-ui="v2"][data-theme="dark"] .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"] .lbrand::after { display: none; }

/* inside the app */
html[data-ui="v2"][data-theme="dark"] .side { background: rgba(5,8,20,.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"] .side .sn { transition: background .3s, color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
html[data-ui="v2"][data-theme="dark"] .side .sn.on { background: linear-gradient(90deg, rgba(230,173,82,.22), rgba(230,173,82,.03)) !important; color: #ffe6b3; box-shadow: inset 2px 0 0 #e6ad52, 0 0 28px -8px rgba(230,173,82,.55); }
[dir="rtl"]html[data-ui="v2"][data-theme="dark"] .side .sn.on { background: linear-gradient(270deg, rgba(230,173,82,.22), rgba(230,173,82,.03)) !important; box-shadow: inset -2px 0 0 #e6ad52, 0 0 28px -8px rgba(230,173,82,.55); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"] .side .sn:hover { transform: translateX(4px); } [dir="rtl"]html[data-ui="v2"][data-theme="dark"] .side .sn:hover { transform: translateX(-4px); } }
html[data-ui="v2"][data-theme="dark"] .hhero { background: linear-gradient(120deg, rgba(24,34,84,.78) 0%, rgba(14,20,46,.7) 48%, rgba(74,50,18,.6) 100%) !important; border: 1px solid rgba(244,207,134,.2); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(230,173,82,.35), inset 0 1px 0 rgba(255,255,255,.08); }
html[data-ui="v2"][data-theme="dark"] .hhero::after { background: radial-gradient(circle, rgba(244,207,134,.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"] .hh-date { background: linear-gradient(180deg, #fff 30%, #f4cf86); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"] .hh-date .fx-w { background: inherit; -webkit-background-clip: text; background-clip: text; }
html[data-ui="v2"][data-theme="dark"] .hh-clock { background: rgba(255,255,255,.06); border-color: rgba(244,207,134,.25); box-shadow: inset 0 0 30px -10px rgba(244,207,134,.25); }
html[data-ui="v2"][data-theme="dark"] .hshift { background: rgba(6,10,23,.6); border: 1px solid rgba(255,255,255,.08); }
html[data-ui="v2"][data-theme="dark"] #toast { background: rgba(14,20,42,.82); border: 1px solid rgba(244,207,134,.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(230,173,82,.5); }
html[data-ui="v2"][data-theme="dark"] .tablewrap tbody tr { transition: background .25s, box-shadow .25s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"] .tablewrap tbody tr:hover { background: rgba(230,173,82,.07); box-shadow: inset 2px 0 0 #e6ad52; } }
html[data-ui="v2"][data-theme="dark"] ::selection { background: rgba(230,173,82,.35); }
html[data-ui="v2"][data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-ui="v2"][data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(244,207,134,.22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } html[data-ui="v2"][data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) { #fxneb, html[data-ui="v2"][data-theme="dark"] .lhero h1, html[data-ui="v2"][data-theme="dark"] .lfeats > div, html[data-ui="v2"][data-theme="dark"] .hhero::after { animation: none !important; } }
html[data-ui="v2"][data-theme="dark"] .v3cash { background: linear-gradient(150deg, rgba(74,50,18,.72), rgba(20,26,56,.72)) !important; border-color: rgba(244,207,134,.28) !important; color: #fff3dc !important; }
html[data-ui="v2"][data-theme="dark"] .v3cash * { color: inherit; }
html[data-ui="v2"][data-theme="dark"] .cashbar { background: rgba(255,255,255,.12) !important; }
html[data-ui="v2"][data-theme="dark"] .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: #000; 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(244,207,134,.10) 40%, rgba(255,240,210,.22) 50%, rgba(244,207,134,.10) 60%, transparent); mix-blend-mode: screen; }
html[data-ui="v2"][data-theme="dark"] .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"] .fx-tilt > h2, html[data-ui="v2"][data-theme="dark"] .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"] .v3card > *, html[data-ui="v2"][data-theme="dark"] .lbox > *, html[data-ui="v2"][data-theme="dark"] .hhero > * { transition: translate .5s cubic-bezier(.16,1,.3,1); }
html[data-ui="v2"][data-theme="dark"] .v3card, html[data-ui="v2"][data-theme="dark"] .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"] .lbox { box-shadow: 0 50px 100px -30px rgba(0,0,0,.85), 0 0 80px -30px rgba(230,173,82,.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"] .overlay { background: rgba(3,5,14,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
html[data-ui="v2"][data-theme="dark"] .sheet { background: linear-gradient(180deg, rgba(18,25,54,.97), rgba(9,13,30,.98)) !important; border: 1px solid rgba(244,207,134,.18); box-shadow: 0 50px 120px -30px rgba(0,0,0,.9), 0 0 90px -30px rgba(230,173,82,.4), inset 0 1px 0 rgba(255,255,255,.09) !important; }
html[data-ui="v2"][data-theme="dark"] .sheet .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.035); }
html[data-ui="v2"][data-theme="dark"] .pmenu, html[data-ui="v2"][data-theme="dark"] .suggest { background: rgba(12,17,38,.97) !important; border: 1px solid rgba(244,207,134,.2) !important; box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 50px -20px rgba(230,173,82,.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"] .segs { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.07); }
html[data-ui="v2"][data-theme="dark"] .seg { transition: background .3s, color .3s, box-shadow .3s; }
html[data-ui="v2"][data-theme="dark"] .seg.on, html[data-ui="v2"][data-theme="dark"] button.seg.on, html[data-ui="v2"][data-theme="dark"] .seg input:checked + span { background: linear-gradient(135deg, #f4cf86, #e6ad52) !important; color: #1a1205 !important; box-shadow: 0 6px 18px -6px rgba(230,173,82,.7) !important; }
html[data-ui="v2"][data-theme="dark"] .seg.on b { background: rgba(26,18,5,.18) !important; color: inherit; }
html[data-ui="v2"][data-theme="dark"] table:not(.pn-note table) th { background: rgba(244,207,134,.06) !important; color: #d8c296; letter-spacing: .08em; border-bottom: 1px solid rgba(244,207,134,.16); }
html[data-ui="v2"][data-theme="dark"] .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"] .empty { background: rgba(14,20,44,.5) !important; border: 1px dashed rgba(244,207,134,.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"] .empty::before { content: ""; position: absolute; left: 50%; top: 30px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; border: 1.5px solid rgba(244,207,134,.75); box-shadow: 0 0 24px -4px rgba(230,173,82,.8), inset 0 0 14px -4px rgba(230,173,82,.6); animation: fxRadar 2.6s cubic-bezier(.16,1,.3,1) infinite; }
html[data-ui="v2"][data-theme="dark"] .empty::after { content: ""; position: absolute; left: 50%; top: 49px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #f4cf86; box-shadow: 0 0 14px 2px rgba(244,207,134,.8); }
@keyframes fxRadar { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
html[data-ui="v2"][data-theme="dark"] .guide-hero { background: linear-gradient(120deg, rgba(28,38,92,.9), rgba(14,20,46,.85) 50%, rgba(98,66,22,.8)) !important; border: 1px solid rgba(244,207,134,.22); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 60px -24px rgba(230,173,82,.45) !important; }
html[data-ui="v2"][data-theme="dark"] .guide-ico { background: linear-gradient(135deg, #f4cf86, #e6ad52) !important; }
html[data-ui="v2"][data-theme="dark"] .kpi { background: rgba(16,23,46,.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"] .kpi::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,207,134,.7), transparent); }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"] .kpi:hover { transform: translateY(-5px); border-color: rgba(244,207,134,.35) !important; box-shadow: 0 24px 50px -20px rgba(0,0,0,.7), 0 0 40px -14px rgba(230,173,82,.5); } }
html[data-ui="v2"][data-theme="dark"] .kpi b { background: linear-gradient(180deg, #fff 30%, #f4cf86); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ui="v2"][data-theme="dark"] .bcol { background: rgba(10,15,34,.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(244,207,134,.35); }
html[data-ui="v2"][data-theme="dark"] .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"] .bcol > :not(h3):hover { transform: translateY(-4px) scale(1.015); border-color: rgba(244,207,134,.35); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7), 0 0 30px -12px rgba(230,173,82,.5); } }
html[data-ui="v2"][data-theme="dark"] .msg { background: rgba(20,28,58,.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"] .msg.mine { background: linear-gradient(135deg, rgba(230,173,82,.32), rgba(160,110,40,.22)) !important; border-color: rgba(244,207,134,.4) !important; color: #fff4dd; }
@keyframes fxMsg { from { opacity: 0; transform: translateY(14px) scale(.96); } }
html[data-ui="v2"][data-theme="dark"] .bellrow { background: rgba(20,28,58,.8) !important; border-color: rgba(255,255,255,.08) !important; }
html[data-ui="v2"][data-theme="dark"] .bellrow.new { border-color: rgba(244,207,134,.45) !important; box-shadow: inset 2px 0 0 #e6ad52, 0 0 30px -14px rgba(230,173,82,.6); }
html[data-ui="v2"][data-theme="dark"] .badge { box-shadow: 0 0 16px -5px currentColor; }
html[data-ui="v2"][data-theme="dark"] .avatar { box-shadow: 0 0 0 1.5px rgba(244,207,134,.55), 0 0 18px -4px rgba(230,173,82,.6); }
html[data-ui="v2"][data-theme="dark"] input:focus, html[data-ui="v2"][data-theme="dark"] select:focus, html[data-ui="v2"][data-theme="dark"] textarea:focus { border-color: #e6ad52 !important; box-shadow: 0 0 0 3px rgba(230,173,82,.16), 0 0 24px -8px rgba(230,173,82,.55) !important; outline: 0; }
html[data-ui="v2"][data-theme="dark"] .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"] .hbtn:hover { transform: translateY(-2px); border-color: rgba(244,207,134,.4); box-shadow: 0 0 24px -6px rgba(230,173,82,.6); } }
html[data-ui="v2"][data-theme="dark"] .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"] .btn:hover { transform: translateY(-2px); } html[data-ui="v2"][data-theme="dark"] .btn:not(.primary):hover { border-color: rgba(244,207,134,.4); } html[data-ui="v2"][data-theme="dark"] .btn.primary:hover { box-shadow: 0 14px 34px -8px rgba(230,173,82,.75); } }
html[data-ui="v2"][data-theme="dark"] .btn:active { transform: translateY(0) scale(.97); }
html[data-ui="v2"][data-theme="dark"] .brn { background: rgba(230,173,82,.14) !important; color: #f4cf86 !important; }
html[data-ui="v2"][data-theme="dark"] details { transition: border-color .3s, box-shadow .3s; } html[data-ui="v2"][data-theme="dark"] details[open] { border-color: rgba(244,207,134,.25); }
@media (max-width: 899.98px) {
  html[data-ui="v2"][data-theme="dark"] .tabbar { background: rgba(8,12,28,.78) !important; border: 1px solid rgba(244,207,134,.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(230,173,82,.4) !important; }
  html[data-ui="v2"][data-theme="dark"] .tb { transition: background .3s, color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
  html[data-ui="v2"][data-theme="dark"] .tb.on { background: linear-gradient(135deg, rgba(244,207,134,.26), rgba(230,173,82,.1)) !important; color: #f4cf86 !important; transform: translateY(-3px); box-shadow: 0 0 24px -8px rgba(230,173,82,.8); }
}
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"][data-theme="dark"] .empty::before, html[data-ui="v2"][data-theme="dark"] .msg, html[data-ui="v2"][data-theme="dark"] .pmenu, html[data-ui="v2"][data-theme="dark"] .suggest { animation: none !important; } }

/* ===== last dark-green leftovers, order lists, order details, customer tracking page ===== */
html[data-ui="v2"][data-theme="dark"] .olist .ohead, html[data-ui="v2"][data-theme="dark"] .plist .phead, html[data-ui="v2"][data-theme="dark"] th:not(.pn-note th) { background: rgba(244,207,134,.06) !important; color: #d8c296; letter-spacing: .08em; border-bottom: 1px solid rgba(244,207,134,.16); }
html[data-ui="v2"][data-theme="dark"] .olist .orow, html[data-ui="v2"][data-theme="dark"] .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"] .olist .orow:hover, html[data-ui="v2"][data-theme="dark"] .plist .prow:hover, html[data-ui="v2"][data-theme="dark"] table:not(.pn-note table) tbody tr:hover td { background: rgba(230,173,82,.08) !important; } html[data-ui="v2"][data-theme="dark"] .olist .orow:hover, html[data-ui="v2"][data-theme="dark"] .plist .prow:hover { box-shadow: inset 2px 0 0 #e6ad52, 0 0 40px -18px rgba(230,173,82,.6); transform: translateX(3px); } [dir="rtl"]html[data-ui="v2"][data-theme="dark"] .olist .orow:hover, [dir="rtl"]html[data-ui="v2"][data-theme="dark"] .plist .prow:hover { box-shadow: inset -2px 0 0 #e6ad52; transform: translateX(-3px); } }
html[data-ui="v2"][data-theme="dark"] .olist .orow.card, html[data-ui="v2"][data-theme="dark"] .plist .prow.card { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui="v2"][data-theme="dark"] .olist, html[data-ui="v2"][data-theme="dark"] .plist { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 18px; }
html[data-ui="v2"][data-theme="dark"] .kv, html[data-ui="v2"][data-theme="dark"] .chatbox, html[data-ui="v2"][data-theme="dark"] .app .ico, html[data-ui="v2"][data-theme="dark"] .dthumb { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.07); }
html[data-ui="v2"][data-theme="dark"] .btn:hover { background: rgba(255,255,255,.08); }
html[data-ui="v2"][data-theme="dark"] .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"] .x:hover { background: rgba(230,173,82,.25) !important; transform: rotate(90deg); }
html[data-ui="v2"][data-theme="dark"] .stockplan, html[data-ui="v2"][data-theme="dark"] .batch:not(.neg), html[data-ui="v2"][data-theme="dark"] .paypick .pp input:checked + span { background: rgba(120,150,255,.08) !important; border-color: rgba(120,150,255,.22) !important; }
html[data-ui="v2"][data-theme="dark"] .rtable tr.wrow td, html[data-ui="v2"][data-theme="dark"] .gsec[open] summary { background: rgba(244,207,134,.05) !important; }
html[data-ui="v2"][data-theme="dark"] .ref { color: #ffe6b3; }
html[data-ui="v2"][data-theme="dark"] .trk { background: linear-gradient(180deg, rgba(24,34,84,.55) 0, rgba(74,50,18,.3) 210px, transparent 320px) !important; }
html[data-ui="v2"][data-theme="dark"] body.trkbody, html[data-ui="v2"][data-theme="dark"] .trk-card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-ui="v2"][data-theme="dark"] .trk-card { background: rgba(14,20,44,.72) !important; border-color: rgba(244,207,134,.16) !important; box-shadow: 0 40px 90px -40px rgba(0,0,0,.85), 0 0 60px -30px rgba(230,173,82,.4) !important; }

/* ===== final pass: titles, rows, badges, pop-up edges, phone bar, live map ===== */
html[data-ui="v2"][data-theme="dark"] .top h1 { text-shadow: 0 0 28px rgba(244,207,134,.28); }
html[data-ui="v2"][data-theme="dark"] .ref { text-shadow: 0 0 18px rgba(244,207,134,.35); }
html[data-ui="v2"][data-theme="dark"] .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"] .nb, html[data-ui="v2"][data-theme="dark"] .tabbar .tb b { animation: fxPulse 2.2s ease-out infinite; }
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 rgba(244,160,82,.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(244,160,82,0); } }
html[data-ui="v2"][data-theme="dark"] :focus-visible { outline: 2px solid rgba(244,207,134,.7); outline-offset: 2px; }
html[data-ui="v2"][data-theme="dark"] input[type="checkbox"], html[data-ui="v2"][data-theme="dark"] input[type="radio"] { accent-color: #e6ad52; }
html[data-ui="v2"][data-theme="dark"] .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"] .sheet { position: relative; }
html[data-ui="v2"][data-theme="dark"] .sheet::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #f4cf86, transparent); opacity: .85; pointer-events: none; }
html[data-ui="v2"][data-theme="dark"] .cashbar div { background: linear-gradient(90deg, #c98a2e, #f4cf86, #c98a2e); background-size: 200% 100%; animation: fxFlow 3s linear infinite; box-shadow: 0 0 14px rgba(244,207,134,.6); }
@keyframes fxFlow { to { background-position: -200% 0; } }
html[data-ui="v2"][data-theme="dark"] .chip { transition: border-color .3s, color .3s, box-shadow .3s; }
@media (hover: hover) { html[data-ui="v2"][data-theme="dark"] .chip:hover { border-color: rgba(244,207,134,.4); box-shadow: 0 0 20px -8px var(--glow); } }
html[data-ui="v2"][data-theme="dark"] .tabbar { background: rgba(8,12,28,.72) !important; border: 1px solid rgba(244,207,134,.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"] .tabbar .tb { transition: transform .35s cubic-bezier(.16,1,.3,1), color .3s, background .3s; }
html[data-ui="v2"][data-theme="dark"] .tabbar .tb.on { background: linear-gradient(180deg, rgba(244,207,134,.22), rgba(244,207,134,.04)); color: #ffe6b3; transform: translateY(-3px); box-shadow: 0 0 26px -8px var(--glow); }
html[data-ui="v2"][data-theme="dark"] .leaflet-container { background: #070c1c; }
html[data-ui="v2"][data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(.82) contrast(.92) saturate(.65); }
html[data-ui="v2"][data-theme="dark"] .leaflet-bar a, html[data-ui="v2"][data-theme="dark"] .leaflet-popup-content-wrapper, html[data-ui="v2"][data-theme="dark"] .leaflet-popup-tip { background: rgba(12,18,40,.94); color: #eef1fa; border-color: rgba(244,207,134,.25); }
html[data-ui="v2"][data-theme="dark"] .leaflet-control-attribution { background: rgba(6,10,23,.6); color: #9aa4c4; }
@media (prefers-reduced-motion: reduce) { html[data-ui="v2"][data-theme="dark"] .badge.out, html[data-ui="v2"][data-theme="dark"] .nb, html[data-ui="v2"][data-theme="dark"] .tabbar .tb b, html[data-ui="v2"][data-theme="dark"] .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"] #toast { color: #eef1fa; }
html[data-ui="v2"][data-theme="dark"] .sn b, html[data-ui="v2"][data-theme="dark"] body.shelled .side .sn b,
html[data-ui="v2"][data-theme="dark"] .branchpick .chip.on, html[data-ui="v2"][data-theme="dark"] .slide3 .slide-lbl { color: var(--brand-ink); }
html[data-ui="v2"][data-theme="dark"] .slide3 .slide-lbl { font-weight: 600; }