/*
 * Doctor Phone Pro - UI polish layer (presentation only)
 *
 * Loaded after mobile-shell.css. Tailwind (CDN) injects its <style> last, so every override of a utility class is prefixed
 * with `:root` (one extra class of specificity) instead of using !important. Nothing here changes markup, ids, handlers or data.
 *
 *   1. design tokens           calm dark palette, one shadow, one hairline border
 *   2. typography              a real scale: micro / meta / label / body / title, a readable floor for Arabic (Cairo), no letter-spacing
 *                              on Arabic, a monospace stack that falls back to Cairo (digits stay tabular, Arabic stays joined)
 *   3. surfaces                glass cards, radii, shadows: flat, quiet, cheap to paint on a phone
 *   4. brand                   the landing logo, unframed
 *   5. density / mobile        gutters, card padding, touch targets, safe areas
 *   6. disciplined motion      nothing moves while idle; motion = tap feedback, transitions, spinners, short attention cues
 */

/* 1. tokens ------------------------------------------------------------------------------------------------------ */
:root {
    --ui-bg: #070b14;
    --ui-surface: rgba(15, 23, 42, .78);
    --ui-surface-2: rgba(30, 41, 59, .55);
    --ui-hairline: rgba(148, 163, 184, .16);
    --ui-text: #f1f5f9;
    --ui-muted: #94a3b8;
    --ui-accent: #22d3ee;
    --ui-shadow: 0 8px 22px -14px rgba(2, 6, 23, .85);
    --ui-radius-card: 1.125rem;
    --ui-radius-ctl: .875rem;
    --ui-gutter: 12px;
    --fs-micro: .65625rem;   /* 10.5px  chips, counters, units */
    --fs-meta: .6875rem;     /* 11px    secondary metadata, helper text */
    --fs-label: .75rem;      /* 12px    field labels, table headings */
    --fs-body: .875rem;      /* 14px    content */
    --fs-title: 1rem;        /* 16px    card / section titles */
    --fs-hero: 1.25rem;      /* 20px    screen titles, key figures */
    --font-num: Cairo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 2. typography -------------------------------------------------------------------------------------------------- */
html, body { font-family: Cairo, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body { line-height: 1.55; }

/* a readable floor: Cairo at 8-10 px is illegible on a phone, so the micro utilities are lifted to a 10.5 px floor and the
   others step up by one notch, keeping the order micro < meta < label < body (the hierarchy is preserved, only compressed) */
:root .text-\[6px\], :root .text-\[7px\], :root .text-\[8px\], :root .text-\[8\.5px\], :root .text-\[9px\] { font-size: var(--fs-micro); line-height: 1.3; }
:root .text-\[9\.5px\], :root .text-\[10px\] { font-size: var(--fs-meta); line-height: 1.4; }
:root .text-\[10\.5px\] { font-size: .71875rem; line-height: 1.45; }
:root .text-\[11px\] { font-size: var(--fs-label); line-height: 1.5; }
:root .text-\[11\.5px\], :root .text-\[12px\] { font-size: .78125rem; line-height: 1.5; }
:root .text-xs { font-size: .78125rem; line-height: 1.45; }
:root .text-\[13px\] { font-size: .84375rem; line-height: 1.5; }

/* Arabic is cursive: letter-spacing breaks the joins. Latin brand lines and tracking-widest codes keep theirs. */
html[lang="ar"] :is(.tracking-wide, .tracking-wider, .tracking-tight) { letter-spacing: 0; }
/* `.font-mono` was used on ~900 labels, chips and amounts. A real monospace face stretches word gaps in Arabic (the space comes from the
   mono font, the letters from a fallback) and gives French / English labels a typewriter look. Cairo already has tabular figures, so
   amounts and codes still line up: .font-mono now means "tabular figures in the app face". Font Awesome icons keep their own face. */
:root .font-mono:not([class*="fa-"]):not(.fas):not(.far):not(.fab) { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* selects / inputs: 16 px only where iOS Safari would zoom the page on focus; elsewhere a calmer 14 px */
@supports not (-webkit-touch-callout: none) {
    :root input, :root select, :root textarea { font-size: .9375rem !important; }
}
:root select { font-weight: 700; }
:root input, :root textarea { text-overflow: ellipsis; }   /* long placeholders end in an ellipsis instead of being cut mid-word */
::placeholder { font-weight: 600; opacity: .55; }

/* titles keep the weight, secondary text lets go of it (hierarchy by weight + size + colour, not by shouting everywhere) */
:root h1, :root h2, :root h3, :root h4 { letter-spacing: 0; }
:root .text-gray-400, :root .text-gray-500 { line-height: 1.5; }

/* 3. surfaces ---------------------------------------------------------------------------------------------------- */
html:not([data-theme="light"]) body, html:not([data-theme="light"]) body[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--ui-bg); background-image: none; }   /* one flat surface: no cyan / red corner glows */
html:not([data-theme="light"]) .glass {
    background: var(--ui-surface);
    border-color: var(--ui-hairline);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* one quiet shadow instead of coloured neon glows */
:root .shadow-lg, :root .shadow-xl, :root .shadow-2xl, :root .shadow-md { box-shadow: var(--ui-shadow); }
:root .shadow-inner { box-shadow: inset 0 1px 3px rgba(2, 6, 23, .45); }
:root .drop-shadow-lg, :root [class*="drop-shadow-["] { filter: none; }
:root .blur-2xl, :root .blur-3xl { display: none; }   /* decorative background halos: never part of the information */

:root .rounded-3xl { border-radius: var(--ui-radius-card); }
:root .rounded-\[1\.8rem\], :root .rounded-\[2\.2rem\] { border-radius: var(--ui-radius-card); }

/* 4. brand ------------------------------------------------------------------------------------------------------- */
/* img/logo-mark.png is the logo with its black canvas keyed out to real transparency and the empty margins cropped, so it sits
   directly on the surface with no box around it (and works on any background, dark or light) */
.brand-hero { position: relative; display: flex; justify-content: center; width: 100%; padding: .25rem 0 .1rem; -webkit-tap-highlight-color: transparent; }
.brand-hero::before { content: ""; position: absolute; inset: 6% 12% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 211, 238, .13), transparent 72%); pointer-events: none; }
.brand-hero-logo { position: relative; display: block; width: min(14.5rem, 66vw); height: auto; transition: transform .18s ease; }
.brand-hero:active .brand-hero-logo { transform: scale(.97); }
[data-theme="light"] .brand-hero-logo { background: #000; border-radius: 1.5rem; padding: .5rem; }
@media (min-width: 640px) { .brand-hero-logo { width: 17rem; } }
@media (max-height: 640px) { .brand-hero-logo { width: min(12.5rem, 60vw); } }

/* the brand line under the logo: bold wordmark, accent on PRO, no glow */
#siteBrandMain, #siteBrandAccent { filter: none; text-shadow: none; }
h1[dir="ltr"] { letter-spacing: .04em; }

/* quick-search card: the QR chip never wraps; the title gives way instead (long French / English titles) */
#quickQrScanBtn { white-space: nowrap; flex-shrink: 0; }
[data-module-id="quickSearch"] > div:first-child { gap: .5rem; }
[data-module-id="quickSearch"] > div:first-child > span:first-child { min-width: 0; }
[data-module-id="quickSearch"] > div:first-child > span:first-child > span { line-height: 1.35; }

/* toasts: a compact rounded card, never a three-line pill; they sit below the status bar / notch */
#toastNotification { top: calc(env(safe-area-inset-top, 0px) + 4.5rem); max-width: min(92vw, 26rem); width: max-content; border-radius: 1rem; padding: .6rem 1rem; text-align: start; line-height: 1.45; }
#toastNotification #toastMessage { white-space: normal; }

/* 5. density / mobile -------------------------------------------------------------------------------------------- */
/* landing: three stacked pills (bio, open / closed, address) were three full-width banners; make them one compact stack */
#publicBioText { font-size: var(--fs-label); padding: .3rem .8rem; box-shadow: none; }
#publicWorkshopStatusContainer { padding: .35rem .9rem; border-width: 1px; font-size: var(--fs-label); }
#publicWorkshopAddressText { line-height: 1.45; }

@media (max-width: 640px) {
    :root main { padding-left: var(--ui-gutter); padding-right: var(--ui-gutter); padding-top: .75rem; }
    :root .tab-content.space-y-4 > * + * { margin-top: .75rem; }
    :root .tab-content .p-5, :root .tab-content .p-6, :root .tab-content .p-7 { padding: .95rem; }
    /* the screen-level wrapper card: less padding so the cards nested in it keep their width */
    :root .tab-content > .glass, :root .tab-content > .glass.p-4 { padding: .8rem; }
    :root .tab-content .sm\:p-5, :root .tab-content .sm\:p-6 { padding: .95rem; }
    :root .tab-content .py-6 { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    :root .tab-content .space-y-5 > * + * { margin-top: .9rem; }
    :root .tab-content .space-y-4 > * + * { margin-top: .75rem; }
}

/* touch targets: the form / edit-modal controls are sized to 44 px in mobile-shell.css; selects here too */
@media (pointer: coarse) {
    :root .tab-content select { min-height: 44px; }
}
/* smooth, momentum-based touch scrolling and no accidental text selection on controls */
button, [role="button"], .card-interactive { -webkit-user-select: none; user-select: none; }
.tab-content { scroll-margin-top: 4.5rem; }

/* footer and floating bars clear the home indicator */
#appGlobalPersistentFooter { padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
:root #adminApp .tab-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

/* 6. motion ---------------------------------------------------------------------------------------------------- */
/* The coarse Tailwind loops (pulse / ping / bounce) stay off: they are loud. Motion comes from the soft, purposeful effects of section 10. */
:root .animate-pulse, :root .animate-bounce, :root .animate-bounce-short, :root .animate-spin-slow { animation: none; }
:root .animate-ping { animation: none; display: none; }

/* urgent notification badges: a soft expanding ring that breathes while the badge is on screen (they only show when something needs attention) */
@keyframes urgentGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .5); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); transform: scale(1.07); } }
.badge-urgent { animation: urgentGlow 2.4s ease-in-out infinite; transform-origin: center; }

/* live work in progress (recording, uploading, receiving): a soft fade that only runs while that state is shown */
@keyframes liveFade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.motion-live { animation: liveFade 1.1s ease-in-out infinite; }

/* tap feedback: one consistent press state for every card / button */
.card-interactive { transition: transform .14s ease, border-color .2s ease, background-color .2s ease; }
.card-interactive:hover { transform: none; }
.card-interactive:active { transform: scale(.985); }
@media (hover: hover) { .card-interactive:hover { border-color: rgba(34, 211, 238, .38); } }

/* 7. LTR symmetry (French / English) ------------------------------------------------------------------------------ */
/* The markup was authored right-to-left with physical utilities (ml-*, pr-*, right-*, border-r-*, text-right). When the workshop language is
   French or English the document is dir="ltr": these rules mirror exactly those utilities, so icon gaps, input-icon padding, accent borders,
   chat-bubble corners and text alignment sit on the correct side without touching any markup. Arabic (dir="rtl") is unaffected. */
:root[dir="ltr"] .text-right { text-align: left; }
:root[dir="ltr"] .ml-0\.5 { margin-left:0;margin-right:0.125rem; }
:root[dir="ltr"] .mr-0\.5 { margin-right:0;margin-left:0.125rem; }
:root[dir="ltr"] .ml-1 { margin-left:0;margin-right:0.25rem; }
:root[dir="ltr"] .mr-1 { margin-right:0;margin-left:0.25rem; }
:root[dir="ltr"] .ml-1\.5 { margin-left:0;margin-right:0.375rem; }
:root[dir="ltr"] .mr-1\.5 { margin-right:0;margin-left:0.375rem; }
:root[dir="ltr"] .ml-2 { margin-left:0;margin-right:0.5rem; }
:root[dir="ltr"] .mr-2 { margin-right:0;margin-left:0.5rem; }
:root[dir="ltr"] .ml-2\.5 { margin-left:0;margin-right:0.625rem; }
:root[dir="ltr"] .mr-2\.5 { margin-right:0;margin-left:0.625rem; }
:root[dir="ltr"] .ml-auto { margin-left:0;margin-right:auto; }
:root[dir="ltr"] .mr-auto { margin-right:0;margin-left:auto; }
:root[dir="ltr"] .pr-0\.5 { padding-right:0;padding-left:0.125rem; }
:root[dir="ltr"] .pl-0\.5 { padding-left:0;padding-right:0.125rem; }
:root[dir="ltr"] .pr-1 { padding-right:0;padding-left:0.25rem; }
:root[dir="ltr"] .pl-1 { padding-left:0;padding-right:0.25rem; }
:root[dir="ltr"] .pr-1\.5 { padding-right:0;padding-left:0.375rem; }
:root[dir="ltr"] .pl-1\.5 { padding-left:0;padding-right:0.375rem; }
:root[dir="ltr"] .pr-2 { padding-right:0;padding-left:0.5rem; }
:root[dir="ltr"] .pl-2 { padding-left:0;padding-right:0.5rem; }
:root[dir="ltr"] .pr-3 { padding-right:0;padding-left:0.75rem; }
:root[dir="ltr"] .pl-3 { padding-left:0;padding-right:0.75rem; }
:root[dir="ltr"] .pr-4 { padding-right:0;padding-left:1rem; }
:root[dir="ltr"] .pl-4 { padding-left:0;padding-right:1rem; }
:root[dir="ltr"] .pr-5 { padding-right:0;padding-left:1.25rem; }
:root[dir="ltr"] .pl-5 { padding-left:0;padding-right:1.25rem; }
:root[dir="ltr"] .pr-7 { padding-right:0;padding-left:1.75rem; }
:root[dir="ltr"] .pl-7 { padding-left:0;padding-right:1.75rem; }
:root[dir="ltr"] .pr-8 { padding-right:0;padding-left:2rem; }
:root[dir="ltr"] .pl-8 { padding-left:0;padding-right:2rem; }
:root[dir="ltr"] .pr-9 { padding-right:0;padding-left:2.25rem; }
:root[dir="ltr"] .pl-9 { padding-left:0;padding-right:2.25rem; }
:root[dir="ltr"] .pr-10 { padding-right:0;padding-left:2.5rem; }
:root[dir="ltr"] .pl-10 { padding-left:0;padding-right:2.5rem; }
:root[dir="ltr"] .pr-11 { padding-right:0;padding-left:2.75rem; }
:root[dir="ltr"] .pl-11 { padding-left:0;padding-right:2.75rem; }
:root[dir="ltr"] .pr-24 { padding-right:0;padding-left:6rem; }
:root[dir="ltr"] .pl-24 { padding-left:0;padding-right:6rem; }
:root[dir="ltr"] .right-0 { right:auto;left:0; }
:root[dir="ltr"] .left-0 { left:auto;right:0; }
:root[dir="ltr"] .right-1 { right:auto;left:0.25rem; }
:root[dir="ltr"] .left-1 { left:auto;right:0.25rem; }
:root[dir="ltr"] .right-1\.5 { right:auto;left:0.375rem; }
:root[dir="ltr"] .left-1\.5 { left:auto;right:0.375rem; }
:root[dir="ltr"] .right-2\.5 { right:auto;left:0.625rem; }
:root[dir="ltr"] .left-2\.5 { left:auto;right:0.625rem; }
:root[dir="ltr"] .right-3 { right:auto;left:0.75rem; }
:root[dir="ltr"] .left-3 { left:auto;right:0.75rem; }
:root[dir="ltr"] .right-3\.5 { right:auto;left:0.875rem; }
:root[dir="ltr"] .left-3\.5 { left:auto;right:0.875rem; }
:root[dir="ltr"] .right-4 { right:auto;left:1rem; }
:root[dir="ltr"] .left-4 { left:auto;right:1rem; }
:root[dir="ltr"] .-right-1 { right:auto;left:-0.25rem; }
:root[dir="ltr"] .-left-1 { left:auto;right:-0.25rem; }
:root[dir="ltr"] .-right-1\.5 { right:auto;left:-0.375rem; }
:root[dir="ltr"] .-left-1\.5 { left:auto;right:-0.375rem; }
:root[dir="ltr"] .-right-10 { right:auto;left:-2.5rem; }
:root[dir="ltr"] .-left-10 { left:auto;right:-2.5rem; }
:root[dir="ltr"] .border-r-4 { border-right-width:1px;border-left-width:4px; }
:root[dir="ltr"] .border-l-4 { border-left-width:1px;border-right-width:4px; }
:root[dir="ltr"] .border-r { border-right-width:0;border-left-width:1px; }
:root[dir="ltr"] .border-l { border-left-width:0;border-right-width:1px; }
:root[dir="ltr"] .rounded-tr-none { border-top-right-radius:initial;border-top-left-radius:0; }
:root[dir="ltr"] .rounded-tl-none { border-top-left-radius:initial;border-top-right-radius:0; }
:root[dir="ltr"] .group:hover .group-hover\:-translate-x-1 { --tw-translate-x:.25rem; }
:root[dir="ltr"] .group:hover .group-hover\:-translate-x-1\.5 { --tw-translate-x:.375rem; }
:root[dir="ltr"] .group:hover .group-hover\:translate-x-0\.5 { --tw-translate-x:-.125rem; }
:root[dir="ltr"] .group:hover .group-hover\:translate-x-1 { --tw-translate-x:-.25rem; }

/* 8. light theme repairs ------------------------------------------------------------------------------------------ */
/* the light theme turns every .text-white dark; surfaces that keep a dark gradient (module tiles, hero cards) need their light text back,
   and the gradient wordmark needs dark stops to stay visible on the light page */
[data-theme="light"] [class*="bg-gradient-to-"] .text-white, [data-theme="light"] [class*="bg-gradient-to-"].text-white { color: #f8fafc !important; }
[data-theme="light"] [class*="bg-gradient-to-"] .text-gray-200, [data-theme="light"] [class*="bg-gradient-to-"] .text-gray-300 { color: #cbd5e1 !important; }
[data-theme="light"] #siteBrandMain { background-image: linear-gradient(90deg, #0f172a, #334155); }

/* 9. landing: rows that hold a title and an action never squeeze the action (long French / English labels) ------------ */
button[onclick="openAdminLoginModal()"] > div:last-child { flex-shrink: 0; white-space: nowrap; }
button[onclick="openAdminLoginModal()"] > div:first-child { min-width: 0; }
#publicRealtimeBadge { white-space: nowrap; flex-shrink: 0; }
#publicSearchLabel { min-width: 0; }
/* short phones: the logo keeps its presence but the tracking field stays reachable without scrolling */
@media (max-height: 780px) { .brand-hero-logo { width: min(12rem, 56vw); } }


/* 10. colour identity + tasteful motion -------------------------------------------------------------------------- */
/* Every dashboard section carries one hue (tone-*): a tinted icon tile, a lightened title, a tinted counter and a faint wash from the leading
   edge, so sections are told apart at a glance while the surface and the 1px border stay uniform. */
.tone-sky { --tone: 56, 189, 248; } .tone-cyan { --tone: 34, 211, 238; } .tone-emerald { --tone: 52, 211, 153; } .tone-rose { --tone: 251, 113, 133; }
.tone-amber { --tone: 251, 191, 36; } .tone-teal { --tone: 45, 212, 191; }  .tone-orange { --tone: 251, 146, 60; }
.tone-blue { --tone: 96, 165, 250; }
/* v3.8 palette: no pink / purple anywhere. closing emerald, losses red, expenses amber, records sapphire, chat sky, teardown industrial orange, store cobalt / slate blue, inventory neon teal */
.tone-petrol { --tone: 22, 170, 200; } .tone-red { --tone: 248, 80, 80; } .tone-sapphire { --tone: 37, 110, 245; } .tone-cobalt { --tone: 99, 130, 205; } .tone-neonteal { --tone: 20, 240, 200; } .tone-industrial { --tone: 249, 130, 40; }

.tone-icon { background: rgba(var(--tone), .15); color: rgb(var(--tone)); box-shadow: inset 0 0 0 1px rgba(var(--tone), .32); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
.tone-glyph { color: rgb(var(--tone)); }
.tone-title { color: rgb(var(--tone)); }
.tone-count { background: rgba(var(--tone), .16); color: rgb(var(--tone)); box-shadow: inset 0 0 0 1px rgba(var(--tone), .3); }

[class*="tone-"].card-interactive, [data-module-id].tone-cyan {
    background-image: linear-gradient(to left, rgba(var(--tone), .10), rgba(var(--tone), 0) 62%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 20px -14px rgba(var(--tone), .65);
}
[dir="ltr"] [class*="tone-"].card-interactive, [dir="ltr"] [data-module-id].tone-cyan { background-image: linear-gradient(to right, rgba(var(--tone), .10), rgba(var(--tone), 0) 62%); }
[data-module-id].tone-cyan { transition: border-color .25s, box-shadow .25s; }
[data-module-id].tone-cyan:focus-within { border-color: rgba(var(--tone), .55); box-shadow: 0 0 0 3px rgba(var(--tone), .12), 0 8px 24px -12px rgba(var(--tone), .7); }
@media (hover: hover) { [class*="tone-"].card-interactive:hover { border-color: rgba(var(--tone), .45); } }

/* one soft entrance for the dashboard (once per visit to the tab) */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#tab-home > * { animation: riseIn .55s cubic-bezier(.16, 1, .3, 1) both; }
#tab-home > *:nth-child(2) { animation-delay: .04s; } #tab-home > *:nth-child(3) { animation-delay: .08s; } #tab-home > *:nth-child(4) { animation-delay: .12s; }
#tab-home > *:nth-child(5) { animation-delay: .16s; } #tab-home > *:nth-child(6) { animation-delay: .2s; } #tab-home > *:nth-child(7) { animation-delay: .24s; }
#tab-home > *:nth-child(8) { animation-delay: .28s; } #tab-home > *:nth-child(9) { animation-delay: .32s; } #tab-home > *:nth-child(n+10) { animation-delay: .36s; }

/* touch / hover feedback: the icon tile springs, the arrow leans toward where the card goes */
.card-interactive:active .tone-icon { transform: scale(.92); }
@media (hover: hover) { .card-interactive:hover .tone-icon { transform: translateY(-1px) scale(1.08) rotate(-4deg); } }
.card-interactive .dir-arrow { transition: transform .25s ease; }
@media (hover: hover) { .card-interactive:hover .dir-arrow { transform: translateX(-3px); } [dir="ltr"] .card-interactive:hover .dir-arrow { transform: translateX(3px); } }

/* living indicators: slow breathing, never faster than a calm pulse */
@keyframes dotBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); opacity: 1; } 50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); opacity: .75; } }
.pulse-dot { animation: dotBreathe 3s ease-in-out infinite; }
@keyframes ringBreathe { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--tone), .32), 0 0 0 0 rgba(var(--tone), .4); } 50% { box-shadow: inset 0 0 0 1px rgba(var(--tone), .5), 0 0 0 6px rgba(var(--tone), 0); } }
#tab-home .tone-emerald .tone-icon { animation: ringBreathe 3.2s ease-in-out infinite; }
@keyframes bellRing { 0%, 12%, 100% { transform: rotate(0); } 3% { transform: rotate(14deg); } 6% { transform: rotate(-12deg); } 9% { transform: rotate(8deg); } }
#homeWatchdogStrip .fa-bell { display: inline-block; transform-origin: 50% 0; animation: bellRing 5s ease-in-out infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes haloBreathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.brand-hero-logo { animation: logoFloat 6s ease-in-out infinite; }
.brand-hero::before { animation: haloBreathe 5s ease-in-out infinite; }
.brand-hero:active .brand-hero-logo { animation: none; }

/* depth: a faint two-hue ambient glow behind the screens (fixed, so it costs nothing on scroll) */
html:not([data-theme="light"]) body, html:not([data-theme="light"]) body[data-theme="dark"], html[data-theme="dark"] body {
    background-image: radial-gradient(60% 40% at 0% 0%, rgba(56, 189, 248, .10), transparent 70%), radial-gradient(55% 40% at 100% 100%, rgba(96, 165, 250, .09), transparent 70%);
    background-attachment: fixed;
}
/* the primary action lifts a little on hover / press */
button.bg-sky-500, button.bg-cyan-500 { transition: transform .15s ease, box-shadow .2s ease, background-color .2s; }
@media (hover: hover) { button.bg-sky-500:hover, button.bg-cyan-500:hover { box-shadow: 0 8px 20px -10px rgba(56, 189, 248, .8); transform: translateY(-1px); } }

/* 11. section fingerprints: the hue of the dashboard tile follows the technician inside ------------------------------- */
/* Screens: shell.js stamps <body data-tab="...">. A fixed, diffused "stage light" falls from the top edge in that section's hue, the sticky header
   picks up a hairline refraction, and the screen's first heading takes the tone. Nothing here touches layout, ids or behaviour. */
body[data-tab="new"] { --stage: 56, 189, 248; }          /* intake        - sky     */
body[data-tab="active"] { --stage: 251, 146, 60; }       /* repairs       - orange  */
body[data-tab="closing"], body[data-tab="finance"] { --stage: 52, 211, 153; --stage-2: 251, 191, 36; }   /* treasury - emerald + amber */
body[data-tab="losses"], body[data-tab="deleted"] { --stage: 248, 80, 80; }   /* losses        - red */
body[data-tab="expenses"] { --stage: 251, 191, 36; }     /* expenses      - amber   */
body[data-tab="inventory"] { --stage: 20, 240, 200; }    /* spare parts   - neon teal */
body[data-tab="teardown"], body[data-tab="worker-station"] { --stage: 249, 130, 40; }   /* teardown      - industrial orange */
body[data-tab="messages"] { --stage: 56, 189, 248; }     /* messages      - sky */
body[data-tab="archive"], body[data-tab="dna"] { --stage: 37, 110, 245; }   /* records / audit - sapphire */
body[data-tab="customers"] { --stage: 34, 211, 238; }    /* accounts      - cyan    */

body::before {
    content: ""; position: fixed; inset: 0 0 auto 0; height: min(70vh, 520px); z-index: -1; pointer-events: none;
    background: radial-gradient(75% 85% at 50% 0%, rgba(var(--stage, 56, 189, 248), .30), transparent 74%),
                radial-gradient(45% 55% at 100% 0%, rgba(var(--stage-2, var(--stage, 56, 189, 248)), .16), transparent 70%);
    opacity: 0; transition: opacity .6s ease;
}
body[data-tab]:not([data-tab="home"])::before { opacity: 1; }
html[data-theme="light"] body::before { display: none; }

body[data-tab]:not([data-tab="home"]) > #adminApp > header {
    border-bottom-color: rgba(var(--stage), .38);
    box-shadow: 0 1px 0 rgba(var(--stage), .22), 0 14px 32px -22px rgba(var(--stage), .7);
    transition: box-shadow .5s ease, border-color .5s ease;
}
/* the first heading of the screen and its leading icon carry the tone */
body[data-tab]:not([data-tab="home"]) .tab-content:not(.hidden) > .glass:first-child :is(h2, h3):first-of-type { color: rgb(var(--stage)); }
body[data-tab]:not([data-tab="home"]) .tab-content:not(.hidden) > .glass:first-child :is(h2, h3):first-of-type i { color: inherit; }
/* intake sub-tabs, filter chips and primary buttons that were hard-coded to the old generic cyan/sky follow the screen's hue */
body[data-tab="new"] #btnSaveNewPhone { box-shadow: 0 -8px 24px rgba(2, 6, 23, .55), 0 10px 26px -14px rgba(var(--stage), .9); }

/* Modals: a hue-tinted crown light on the panel, a hairline top highlight, and the close / primary controls in the same tone.
   The tone class sits on the modal root (see index.html); the panel is its first child. */
.fixed[class*="tone-"] > :first-child {
    background-image: radial-gradient(110% 60% at 50% 0%, rgba(var(--tone), .20), transparent 68%);
    box-shadow: inset 0 1px 0 rgba(var(--tone), .5), 0 -18px 50px -30px rgba(var(--tone), .6), 0 24px 60px -28px rgba(0, 0, 0, .8);
    border-color: rgba(var(--tone), .28);
}
.fixed[class*="tone-"] > :first-child :is(h2, h3):first-of-type { color: rgb(var(--tone)); }
.fixed[class*="tone-"] > :first-child button[onclick*="close"], .fixed[class*="tone-"] > :first-child button[onclick*="Close"], .fixed[class*="tone-"] > :first-child button[onclick^="stopQrScanner"] {
    color: rgb(var(--tone)); background-color: rgba(var(--tone), .12); box-shadow: inset 0 0 0 1px rgba(var(--tone), .34);
    transition: background-color .2s, transform .15s;
}
.fixed[class*="tone-"] > :first-child button[onclick*="close"]:active, .fixed[class*="tone-"] > :first-child button[onclick*="Close"]:active { transform: scale(.92); }
/* the backdrop breathes in the tone too: a faint colour in the dim layer so the gate is felt before the panel is read */
.fixed.inset-0[class*="tone-"]:not(#scannerModal):not(#giantCodeModal) { background-image: radial-gradient(90% 55% at 50% 0%, rgba(var(--tone), .16), transparent 72%); }
@keyframes stageIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.fixed[class*="tone-"]:not(.hidden) > :first-child { animation: stageIn .32s cubic-bezier(.16, 1, .3, 1) both; }

/* 12. operational stages: one pill per stage, same hues in the ticket card, the edit modal and the tracking view ---------- */
.stage-pill { border: 1px solid rgba(var(--st), .4); background: rgba(var(--st), .14); color: rgb(var(--st)); display: inline-flex; align-items: center; gap: .25rem; }
.stage-diagnosis { --st: 96, 165, 250; } .stage-in_repair { --st: 56, 189, 248; } .stage-parts_wait { --st: 251, 191, 36; }
.stage-parts_install { --st: 45, 212, 191; } .stage-extra_fault { --st: 251, 113, 133; }

/* default action hue = neutral slate; each action below overrides it (a plain :root declaration cannot out-rank them) */
:root { --act: 148, 163, 184; }
/* 13. semantic action buttons: every recurring action keeps ONE colour identity in every card, modal and drawer -------------- */
/* Matched by the handler the button calls, so the same action looks the same wherever it appears. --act is the action's hue.
     confirm / save   cyan, filled          edit      amber           cloud print   orange         spare part   teal
     delivery         emerald               message   blue            loss          orange         delete       rose
     invoice / PDF    blue                  dismiss   slate ghost                                                                */
:root :is(button[onclick*="save" i], button[onclick*="confirm" i], button[onclick*="executeQuickDirectSearch"], button[onclick*="handleGoogleAdminSignIn"], button[data-act="print"], button#btnSaveNewPhone, button.v-btn:not(.alt):not(.danger),
          button[onclick*="openAdminEditModal"], button[onclick*="dispatchCloudPrint"], button[onclick*="openInventoryUseInRepair"], button[onclick*="openSendCustomerMessage"], button[onclick*="toggleCardLossDrawer"], button[onclick*="saveLossFromCard"],
          button[onclick*="attemptDelivery"], button[onclick*="deliverPhone"], button[onclick*="initiateNonRepairedHandover"], button[onclick*="openInvoiceById"], button[onclick*="printTracked"], button[onclick*="printHandoverSticker"], button[onclick*="openPaperSizeModal"],
          button[onclick*="delete" i], button[onclick*="Reset"], button.v-btn.alt, button.v-btn.danger,
          button[onclick*="goBack"], button[onclick*="cancel" i], button[onclick^="close"], button[onclick*="; close"], button[data-act="close"]) {
    background: rgba(var(--act), .13); color: rgb(var(--act)); border: 1px solid rgba(var(--act), .42); border-radius: .875rem; font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 16px -12px rgba(var(--act), .9);
    transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, background-color .2s, border-color .2s, filter .2s;
}
:root :is(button[onclick*="save" i], button[onclick*="confirm" i], button[onclick*="executeQuickDirectSearch"], button[onclick*="handleGoogleAdminSignIn"], button[data-act="print"], button#btnSaveNewPhone, button.v-btn:not(.alt):not(.danger)) {
    --act: 34, 211, 238; background: linear-gradient(180deg, #22d3ee, #06b6d4); color: #042f3a; border-color: rgba(103, 232, 249, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 22px -12px rgba(6, 182, 212, .95);
}
:root button[onclick*="openAdminEditModal"] { --act: 251, 191, 36; }
:root :is(button[onclick*="dispatchCloudPrint"], button[onclick*="printHandoverSticker"], button[onclick*="openPaperSizeModal"]) { --act: 56, 189, 248; }
:root button[onclick*="openInventoryUseInRepair"] { --act: 45, 212, 191; }
:root button[onclick*="openSendCustomerMessage"] { --act: 96, 165, 250; }
:root :is(button[onclick*="toggleCardLossDrawer"], button[onclick*="saveLossFromCard"]) { --act: 251, 146, 60; }
:root :is(button[onclick*="attemptDelivery"], button[onclick*="deliverPhone"], button[onclick*="initiateNonRepairedHandover"]) { --act: 52, 211, 153; }
:root :is(button[onclick*="openInvoiceById"], button[onclick*="printTracked"]) { --act: 96, 165, 250; }
:root :is(button[onclick*="delete" i], button[onclick*="Reset"], button.v-btn.danger) { --act: 251, 113, 133; }
:root :is(button[onclick*="goBack"], button[onclick*="cancel" i], button[onclick^="close"], button[onclick*="; close"], button[data-act="close"], button.v-btn.alt) {
    --act: 148, 163, 184; background: rgba(148, 163, 184, .07); color: #cbd5e1; border-color: rgba(148, 163, 184, .26); box-shadow: none;
}
/* the confirm / delivery family keeps its identity even where a primary fill would otherwise win: delivery = emerald fill */
:root:root :is(button[onclick*="attemptDelivery"], button[onclick*="deliverPhone"]) { background: linear-gradient(180deg, #34d399, #10b981); color: #03261a; border-color: rgba(110, 231, 183, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 22px -12px rgba(16, 185, 129, .95); }
/* icons carry the hue (outline buttons) and glow a little */
:root :is(button[onclick*="openAdminEditModal"], button[onclick*="dispatchCloudPrint"], button[onclick*="openInventoryUseInRepair"], button[onclick*="openSendCustomerMessage"], button[onclick*="toggleCardLossDrawer"], button[onclick*="delete" i], button[onclick*="openInvoiceById"], button[onclick*="initiateNonRepairedHandover"]) i { color: rgb(var(--act)); filter: drop-shadow(0 0 5px rgba(var(--act), .55)); }
:root :is(button[onclick*="save" i], button[onclick*="confirm" i], button[onclick*="attemptDelivery"], button.v-btn:not(.alt):not(.danger)):not(:disabled):active, :root :is(button[onclick*="openAdminEditModal"], button[onclick*="dispatchCloudPrint"], button[onclick*="delete" i], button[onclick*="goBack"], button[onclick*="cancel" i], button.v-btn):not(:disabled):active { transform: scale(.96); }
@media (hover: hover) {
    :root :is(button[onclick*="openAdminEditModal"], button[onclick*="dispatchCloudPrint"], button[onclick*="openInventoryUseInRepair"], button[onclick*="openSendCustomerMessage"], button[onclick*="toggleCardLossDrawer"], button[onclick*="delete" i], button[onclick*="openInvoiceById"], button[onclick*="initiateNonRepairedHandover"], button[onclick*="printTracked"], button[onclick*="printHandoverSticker"]):hover {
        background: rgba(var(--act), .22); border-color: rgba(var(--act), .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 3px rgba(var(--act), .14), 0 10px 22px -12px rgba(var(--act), 1);
    }
    :root :is(button[onclick*="save" i], button[onclick*="confirm" i], button[onclick*="attemptDelivery"], button.v-btn:not(.alt):not(.danger)):hover { filter: brightness(1.08); }
    :root :is(button[onclick*="goBack"], button[onclick*="cancel" i], button[data-act="close"], button.v-btn.alt):hover { background: rgba(255, 255, 255, .08); color: #fff; }
}

/* 14. the owner's suite: dark glass instead of the grey wireframe ----------------------------------------------------- */
:root .dpp-viz {
    --surface: #0a1020; --surface-2: rgba(30, 41, 59, .55); --ink: #f1f5f9; --ink-2: #b6c2d4; --ink-3: #7c8aa0;
    --grid: rgba(148, 163, 184, .12); --line: rgba(148, 163, 184, .2); --s1: #38bdf8; --s2: #fb7185; --s3: #34d399; --s4: #60a5fa;
    background: radial-gradient(90% 40% at 50% 0%, rgba(56, 189, 248, .14), transparent 70%), var(--surface);
}
html[data-theme="light"] .dpp-viz { background-image: none; }
:root .dpp-viz .v-card, :root .dpp-viz .v-tile {
    background: linear-gradient(180deg, rgba(51, 65, 85, .42), rgba(15, 23, 42, .6)); border: 1px solid var(--line); border-top-color: rgba(255, 255, 255, .13);
    box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
}
:root .dpp-viz .v-h { color: #f8fafc; letter-spacing: 0; }
:root .dpp-viz .v-k, :root .dpp-viz .v-sub { color: var(--ink-3); }
/* tabs: a luminous underline instead of a flat bar */
:root .dpp-viz .v-tab { position: relative; color: var(--ink-3); border-bottom: 2px solid transparent; transition: color .2s; }
:root .dpp-viz .v-tab[aria-selected="true"] { color: #f8fafc; border-bottom-color: transparent; }
:root .dpp-viz .v-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 14%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #38bdf8, #60a5fa); box-shadow: 0 0 14px rgba(56, 189, 248, .75); }
:root .dpp-viz .v-tab[aria-selected="true"] { text-shadow: 0 0 18px rgba(56, 189, 248, .45); }
/* time pills / chips: tinted glass; the active one glows instead of turning chalk-white */
:root .dpp-viz .v-chip { background: rgba(148, 163, 184, .08); border: 1px solid var(--line); color: var(--ink-2); transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
:root .dpp-viz .v-chip[aria-pressed="true"] { background: rgba(56, 189, 248, .18); color: #bae6fd; border-color: rgba(56, 189, 248, .55); box-shadow: 0 0 0 1px rgba(56, 189, 248, .2), 0 6px 18px -8px rgba(56, 189, 248, .8); }
/* inputs: dark glass with a soft focus ring */
:root .dpp-viz .v-in { background: rgba(2, 6, 23, .55); border: 1px solid var(--line); color: #f1f5f9; border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
:root .dpp-viz .v-in::placeholder { color: #64748b; }
:root .dpp-viz .v-in:focus { outline: none; border-color: rgba(56, 189, 248, .7); box-shadow: 0 0 0 3px rgba(56, 189, 248, .16); background: rgba(2, 6, 23, .75); }
/* rows with checkboxes (roles, permissions, modules): tinted when checked */
:root .dpp-viz label.v-row { background: rgba(30, 41, 59, .45); border: 1px solid var(--grid); transition: background-color .2s, border-color .2s; }
:root .dpp-viz label.v-row:has(input:checked) { background: rgba(56, 189, 248, .1); border-color: rgba(56, 189, 248, .4); }
:root .dpp-viz input[type="checkbox"], :root .dpp-viz input[type="radio"] { accent-color: #38bdf8; width: 18px; height: 18px; }
/* big numbers: emerald for profit, amber for the treasury, slate for the rest (the figures keep their own semantic colour if a script sets one) */
:root .dpp-viz .v-hero { color: #34d399; text-shadow: 0 0 24px rgba(52, 211, 153, .3); }
:root .dpp-viz .v-n { color: #f1f5f9; }
:root .dpp-viz .v-tile:nth-child(2) .v-n { color: #fbbf24; }
:root .dpp-viz .v-card .v-hero + .v-sub, :root .dpp-viz .v-k { color: var(--ink-3); }
/* reorder controls: cohesive pills */
:root .dpp-viz .v-btn.alt { background: rgba(148, 163, 184, .1); color: #dbe5f1; border: 1px solid var(--line); border-radius: 12px; }
:root .dpp-viz .v-btn { border-radius: 12px; }

/* 15. the admin drawer: tinted icon containers + a hue per section ------------------------------------------------------ */
/* every small rounded icon container takes the colour of its own icon (currentColor), so tiles are told apart at a glance */
#managementDrawerModal [class*="w-8"][class*="h-8"][class*="rounded"], #managementDrawerModal [class*="w-10"][class*="h-10"][class*="rounded"], #managementDrawerModal [class*="w-5"][class*="h-5"][class*="rounded"] {
    background-color: color-mix(in srgb, currentColor 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 32%, transparent);
}
#managementDrawerModal .grid > button.glass, #managementDrawerModal .grid > button[class*="rounded"] {
    background: linear-gradient(180deg, rgba(51, 65, 85, .35), rgba(15, 23, 42, .55)); border-color: rgba(148, 163, 184, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
@media (hover: hover) { #managementDrawerModal .grid > button:hover { border-color: color-mix(in srgb, currentColor 45%, transparent); } }
#managementDrawerModal span[class*="uppercase"], #managementDrawerModal .space-y-2 > .flex > span.font-black { letter-spacing: 0; }
#managementDrawerModal .border-t { border-color: rgba(148, 163, 184, .14); }

/* 16. admin drawer: every category header is a hued title block (tint, leading bar, glowing icon), and its tiles answer in that hue --- */
#managementDrawerModal .drawer-sec { padding: .4rem .7rem; border-radius: .8rem; background: linear-gradient(to left, rgba(var(--tone), .18), rgba(var(--tone), 0) 75%); box-shadow: inset 0 0 0 1px rgba(var(--tone), .24); border-inline-start: 3px solid rgb(var(--tone)); }
[dir="ltr"] #managementDrawerModal .drawer-sec { background: linear-gradient(to right, rgba(var(--tone), .18), rgba(var(--tone), 0) 75%); }
#managementDrawerModal .drawer-sec > span, #managementDrawerModal .drawer-sec span { color: rgb(var(--tone)); }
#managementDrawerModal .drawer-sec i { color: rgb(var(--tone)); filter: drop-shadow(0 0 6px rgba(var(--tone), .6)); }
#managementDrawerModal .drawer-sec > div:first-child { background-color: rgba(var(--tone), .18); box-shadow: inset 0 0 0 1px rgba(var(--tone), .4); }
@media (hover: hover) { #managementDrawerModal .drawer-sec + .grid > button:hover, #managementDrawerModal .drawer-sec ~ .grid > button:hover { border-color: rgba(var(--tone), .55); } }

/* 17. "هواتف المحل": the public showcase carousel (landing) --------------------------------------------------------------- */
/* a horizontal rail of cards (native touch scrolling, snap to a card), each card has its own swipeable photo gallery */
.sp-rail { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: .15rem .1rem .6rem; scrollbar-width: thin; overscroll-behavior-x: contain; }
.sp-card { flex: 0 0 min(82%, 280px); scroll-snap-align: center; border-radius: 1.1rem; overflow: hidden; background: linear-gradient(180deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .95)); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18), 0 10px 24px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.sp-gallery { position: relative; background: #020617; aspect-ratio: 4 / 3; }
.sp-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sp-track::-webkit-scrollbar { display: none; }
.sp-photo { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; user-select: none; -webkit-user-drag: none; }
.sp-nophoto { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: #64748b; font-size: .72rem; font-weight: 800; }
.sp-nophoto i { font-size: 2rem; }
.sp-dots { position: absolute; bottom: .45rem; left: 0; right: 0; display: flex; justify-content: center; gap: .3rem; pointer-events: none; }
.sp-dot { width: .4rem; height: .4rem; border-radius: 99px; background: rgba(255, 255, 255, .45); transition: width .15s, background .15s; }
.sp-dot.on { width: 1rem; background: #fff; }
.sp-count { position: absolute; top: .45rem; left: .45rem; padding: .1rem .45rem; border-radius: 99px; background: rgba(2, 6, 23, .7); color: #e2e8f0; font: 700 .62rem ui-monospace, monospace; direction: ltr; }
.sp-body { padding: .75rem .8rem .85rem; display: flex; flex-direction: column; gap: .5rem; text-align: right; }
.sp-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.sp-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 99px; font-size: .64rem; font-weight: 900; border: 1px solid transparent; }
.sp-cond-used_clean { background: rgba(45, 212, 191, .14); color: #5eead4; border-color: rgba(45, 212, 191, .35); }
.sp-cond-new { background: rgba(250, 204, 21, .14); color: #fde047; border-color: rgba(250, 204, 21, .38); }
.sp-trade-yes { background: rgba(56, 189, 248, .14); color: #7dd3fc; border-color: rgba(56, 189, 248, .38); }
.sp-trade-no { background: rgba(148, 163, 184, .12); color: #94a3b8; border-color: rgba(148, 163, 184, .25); }
.sp-name { margin: 0; font-size: 1rem; font-weight: 900; color: #f8fafc; line-height: 1.25; }
.sp-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .75rem; font-size: .72rem; font-weight: 700; color: #cbd5e1; }
.sp-specs li { display: inline-flex; align-items: center; gap: .3rem; }
.sp-specs i { color: #94a3b8; font-size: .7rem; }
.sp-notes { margin: 0; font-size: .7rem; line-height: 1.5; color: #94a3b8; }
.sp-price { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-top: .3rem; border-top: 1px dashed rgba(148, 163, 184, .22); }
.sp-price-k { font-size: .66rem; font-weight: 800; color: #94a3b8; }
.sp-price-v { font: 900 1.25rem/1.1 ui-monospace, monospace; color: #34d399; }
.sp-price-v small { font-size: .7rem; font-weight: 800; color: #6ee7b7; }
.sp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.sp-btn { min-height: 44px; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-size: .78rem; font-weight: 900; text-decoration: none; transition: transform .12s ease; }
.sp-btn:active { transform: scale(.97); }
.sp-call { background: linear-gradient(90deg, #0ea5e9, #2563eb); color: #fff; }
.sp-wa { background: linear-gradient(90deg, #10b981, #059669); color: #fff; }
@media (min-width: 640px) { .sp-card { flex-basis: 260px; } }
@media (prefers-reduced-motion: reduce) { .sp-dot, .sp-btn { transition: none; } }

/* 18. v3.5 marketplace: compact header, "هواتف المحل" as the landing's focal point, portal with brand filter + sorting ----------- */
/* the admin entrance is a subtle pill beside the language selector, not a hero card */
.admin-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: .2rem .65rem; border-radius: 99px; background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .3); color: #67e8f9; font-size: .68rem; font-weight: 900; white-space: nowrap; transition: background .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.admin-pill:hover { background: rgba(34, 211, 238, .18); }
.admin-pill:active { transform: scale(.96); }
.admin-pill i { font-size: .72rem; }
/* anti-clutter: a small logo beside the title instead of a tall hero logo */
.sp-brand-row .brand-hero { width: auto; padding: 0; }
.sp-brand-row .brand-hero-logo { width: 3.6rem; }
.sp-brand-row .brand-hero::before { inset: 0; }
@media (min-width: 640px) { .sp-brand-row .brand-hero-logo { width: 4.6rem; } }
/* floating utility buttons: discreet proportions */
#manualSyncContainer { transform: scale(.78); transform-origin: bottom left; opacity: .7; transition: opacity .2s; }
#manualSyncContainer:hover, #manualSyncContainer:focus-within { opacity: 1; }
#floatingQuickBackButton { transform: scale(.85); transform-origin: bottom left; }
/* the focal hero: one big tap target + a fast horizontal preview of the cards */
.sp-hero { display: block; }
.sp-hero-cta { width: 100%; display: flex; align-items: center; gap: .65rem; min-height: 56px; padding: .5rem .75rem; border-radius: 1rem; text-align: right; color: #fff; background: linear-gradient(100deg, rgba(37, 99, 235, .85), rgba(29, 78, 216, .85) 55%, rgba(37, 99, 235, .8)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 22px rgba(29, 78, 216, .28); transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.sp-hero-cta:active { transform: scale(.985); }
.sp-hero-ic { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.sp-hero-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sp-hero-txt b { font-size: 1rem; font-weight: 900; line-height: 1.2; }
.sp-hero-txt small { font-size: .66rem; font-weight: 700; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-hero-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 99px; background: rgba(2, 6, 23, .45); font-size: .72rem; font-weight: 900; }
.sp-hero-go:empty { display: none; }
.sp-hero .sp-rail { margin-top: .5rem; padding-bottom: .35rem; }
.sp-hero .sp-card { flex-basis: min(58%, 190px); border-radius: .95rem; cursor: pointer; }
.sp-hero .sp-gallery { aspect-ratio: 4 / 3; }
.sp-hero .sp-body { padding: .5rem .6rem .6rem; gap: .3rem; }
.sp-hero .sp-name { font-size: .85rem; }
.sp-hero .sp-price-v { font-size: 1rem; }
/* card pieces added in v3.5 */
.sp-warranty { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 99px; font-size: .62rem; font-weight: 900; color: #86efac; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .3); }
.sp-mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.sp-mini-actions .sp-btn { min-height: 38px; font-size: .72rem; }
/* the marketplace portal: a dedicated full-screen view with natural touch scrolling */
html.sp-lock, html.sp-lock body { overflow: hidden; }
.sp-portal { position: fixed; inset: 0; z-index: 100001; display: flex; flex-direction: column; background: rgba(2, 6, 23, .97); color: #e2e8f0; direction: rtl; }
.sp-portal[dir="ltr"] { direction: ltr; }
.sp-portal-head { flex: 0 0 auto; padding: .6rem .75rem .5rem; border-bottom: 1px solid rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .96); display: flex; flex-direction: column; gap: .5rem; }
.sp-portal-top { display: flex; align-items: center; gap: .6rem; }
.sp-portal-top h2 { margin: 0; flex: 1; font-size: 1rem; font-weight: 900; color: #fff; }
.sp-icon-btn { width: 40px; height: 40px; border-radius: .8rem; background: rgba(255, 255, 255, .08); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .12); display: inline-flex; align-items: center; justify-content: center; }
.sp-search { width: 100%; min-height: 40px; padding: 0 .8rem; border-radius: .8rem; background: rgba(2, 6, 23, .8); border: 1px solid rgba(148, 163, 184, .3); color: #fff; font-weight: 700; font-size: .85rem; }
.sp-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chip { flex: 0 0 auto; min-height: 36px; padding: 0 .8rem; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #cbd5e1; font-size: .74rem; font-weight: 800; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.sp-chip small { font: 700 .62rem ui-monospace, monospace; opacity: .7; }
.sp-chip[aria-pressed="true"] { background: #22d3ee; color: #020617; border-color: #67e8f9; }
.sp-sorts { display: flex; gap: .35rem; align-items: center; }
.sp-sorts > span { font-size: .66rem; font-weight: 800; color: #94a3b8; }
.sp-sort { flex: 1; min-height: 34px; border-radius: .7rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #cbd5e1; font-size: .72rem; font-weight: 800; }
.sp-sort[aria-pressed="true"] { background: rgba(96, 165, 250, .25); color: #fff; border-color: rgba(96, 165, 250, .6); }
.sp-portal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; padding: .75rem .75rem 1.5rem; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
@media (min-width: 640px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-grid .sp-card { flex: initial; cursor: pointer; }
.sp-grid .sp-gallery { aspect-ratio: 1 / 1; }
.sp-grid .sp-body { padding: .55rem .6rem .65rem; gap: .35rem; }
.sp-grid .sp-name { font-size: .88rem; }
.sp-grid .sp-price-v { font-size: 1.05rem; }
.sp-empty { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; color: #94a3b8; font-size: .8rem; font-weight: 700; }
/* the detail view: big gallery, specs, warranty terms, one-tap contact */
.sp-detail { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: flex-end; justify-content: center; background: rgba(2, 6, 23, .72); }
.sp-detail-sheet { width: 100%; max-width: 34rem; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 1.25rem 1.25rem 0 0; background: #0f172a; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); direction: rtl; }
.sp-detail-sheet[dir="ltr"] { direction: ltr; }
.sp-detail-sheet .sp-gallery { aspect-ratio: 4 / 3; border-radius: 1.25rem 1.25rem 0 0; overflow: hidden; }
.sp-detail-close { position: absolute; top: .55rem; right: .55rem; z-index: 2; }
.sp-terms { border-radius: .85rem; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .25); padding: .6rem .75rem; font-size: .72rem; line-height: 1.6; color: #cbd5e1; }
.sp-terms b { color: #86efac; font-size: .78rem; }
.sp-terms ul { margin: .35rem 0 0; padding: 0 1rem; }
.sp-terms li { margin-bottom: .25rem; }
@media (prefers-reduced-motion: reduce) { .sp-portal-body { scroll-behavior: auto; } .sp-hero-cta { transition: none; } }

/* 19. v3.6: catalog stock illustration fallback, release-year badges, management grid ---------------------------------------- */
.sp-stock { width: 100%; height: 100%; object-fit: contain; padding: .6rem; background: radial-gradient(closest-side, rgba(148, 163, 184, .16), transparent 80%); }
.dev-pill { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .12rem .2rem .12rem .6rem; border-radius: 99px; background: linear-gradient(90deg, rgba(34, 211, 238, .14), rgba(96, 165, 250, .14)); border: 1px solid rgba(125, 211, 252, .3); color: #e0f2fe; font-size: .7rem; font-weight: 800; line-height: 1.5; vertical-align: middle; }
.dev-pill-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-pill-dot { color: #67e8f9; opacity: .8; }
.dev-pill-y { font-family: ui-monospace, monospace; color: #93c5fd; }
.dev-pill-id { margin-inline-start: .15rem; padding: .05rem .5rem; border-radius: 99px; background: rgba(2, 6, 23, .55); color: #67e8f9; font-family: ui-monospace, monospace; font-weight: 900; }
.dev-year { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; border-radius: 99px; background: rgba(96, 165, 250, .14); border: 1px solid rgba(96, 165, 250, .35); color: #bfdbfe; font: 800 .62rem ui-monospace, monospace; }
.dev-year i { font-size: .55rem; opacity: .8; }
.sg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1rem; border: 1px solid rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .6); }
.sg-table { width: 100%; border-collapse: collapse; font-size: .72rem; color: #e2e8f0; min-width: 44rem; }
.sg-table th { position: sticky; top: 0; background: #0f172a; padding: .5rem .55rem; text-align: right; font-weight: 900; color: #94a3b8; white-space: nowrap; cursor: pointer; user-select: none; }
.sg-table th[aria-sort] { color: #67e8f9; }
.sg-table th[data-nosort] { cursor: default; }
.sg-table td { padding: .4rem .55rem; border-top: 1px solid rgba(148, 163, 184, .12); vertical-align: middle; }
.sg-table tr:hover td { background: rgba(255, 255, 255, .03); }
.sg-thumb { width: 2.6rem; height: 2.6rem; border-radius: .6rem; object-fit: cover; background: #020617; border: 1px solid rgba(255, 255, 255, .12); cursor: zoom-in; display: block; }
.sg-thumb.stock { object-fit: contain; padding: .15rem; cursor: default; opacity: .85; }
.sg-priv { background: rgba(250, 204, 21, .04); }
.sg-mono { font-family: ui-monospace, monospace; direction: ltr; unicode-bidi: plaintext; }
.sg-lightbox { position: fixed; inset: 0; z-index: 100003; background: rgba(2, 6, 23, .94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; }
.sg-lightbox-track { display: flex; width: min(92vw, 34rem); max-height: 70vh; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: .5rem; scrollbar-width: none; }
.sg-lightbox-track::-webkit-scrollbar { display: none; }
.sg-lightbox-track img { flex: 0 0 100%; width: 100%; max-height: 70vh; object-fit: contain; scroll-snap-align: center; border-radius: .8rem; background: #020617; }
.sg-suggest { display: flex; flex-direction: column; gap: .25rem; margin-top: .3rem; }
.sg-suggest button { display: flex; align-items: center; gap: .55rem; text-align: right; padding: .3rem .5rem; border-radius: .7rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #e2e8f0; font-size: .74rem; font-weight: 800; min-height: 44px; }
.sg-suggest img { width: 2rem; height: 2.4rem; object-fit: contain; }
.sg-suggest small { margin-inline-start: auto; font-family: ui-monospace, monospace; color: #93c5fd; }

/* 20. v3.8 high-density forms: "استلام هاتف جديد" and "تحرير حالة الصيانة" - smaller type, tighter gaps, fast scrolling -------------------- */
:is(#adminEditModal, #tab-new) :is(.space-y-5, .space-y-4, .space-y-3, .space-y-2\.5) > * + * { margin-top: .5rem !important; }
:is(#adminEditModal, #tab-new) :is(.gap-5, .gap-4, .gap-3) { gap: .5rem !important; }
:is(#adminEditModal, #tab-new) .glass { padding: .7rem !important; }
:is(#adminEditModal, #tab-new) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { padding-block: .3rem !important; padding-inline: .6rem !important; min-height: 36px !important; font-size: .8rem !important; line-height: 1.25 !important; border-radius: .7rem !important; }
:is(#adminEditModal, #tab-new) textarea { min-height: 54px !important; }
:is(#adminEditModal, #tab-new) :is(label, .text-xs, .text-sm) { font-size: .7rem !important; line-height: 1.25 !important; }
:is(#adminEditModal, #tab-new) :is(h3, h4) { font-size: .86rem !important; }
:is(#adminEditModal, #tab-new) :is(.py-4, .py-3\.5, .py-3) { padding-block: .45rem !important; }
:is(#adminEditModal, #tab-new) :is(.p-5, .p-4, .p-3\.5) { padding: .65rem !important; }
:is(#adminEditModal, #tab-new) :is(.mb-3, .mb-2\.5, .my-3, .mt-3, .pt-3, .pb-3) { margin-block: .3rem !important; }
:is(#adminEditModal, #tab-new) button:not(.sp-icon-btn) { min-height: 34px; }
#adminEditModal > div { padding: .7rem !important; }
/* customer tracking card: the chat drawer slides open instead of popping */
.cust-drawer-open { animation: custDrawerIn .22s ease-out both; }
@keyframes custDrawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cust-drawer-open { animation: none; } }

/* 19. v3.9.1 unified header: brand block (logo + 3 aligned lines) on the left, one tall TikTok card on the right ------------------- */
.hdr-body { display: flex; align-items: stretch; gap: .5rem; }
.hdr-brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .45rem; }
.hdr-brand .brand-hero-logo { width: 3rem; }
@media (min-width: 640px) { .hdr-brand .brand-hero-logo { width: 4.6rem; } }
.hdr-stack { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .3rem; text-align: left; }
.hdr-title { margin: 0; font-size: clamp(.78rem, 3.7vw, 1.4rem); font-weight: 900; letter-spacing: .01em; line-height: 1.05; white-space: nowrap; }
.hdr-sub { font-size: .66rem; font-weight: 800; line-height: 1.1; color: #9fb3c8; text-align: left; white-space: nowrap; }
.hdr-status { max-width: 100%; display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem; border-radius: .4rem; border: 1px solid; font-size: .66rem; font-weight: 900; line-height: 1.3; white-space: nowrap; }
.hdr-tt:not(.hidden) { flex: 0 0 auto; width: 5.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .5rem .35rem; text-align: center; border-radius: .9rem; color: #fff; border: 1.5px solid rgba(255, 255, 255, .4); background: linear-gradient(160deg, rgba(15, 23, 42, .95), rgba(2, 6, 23, .95)); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .18); transition: transform .12s ease, border-color .15s; -webkit-tap-highlight-color: transparent; }
.hdr-tt:hover { border-color: rgba(34, 211, 238, .7); }
.hdr-tt:active { transform: scale(.97); }
.hdr-tt-ic { width: 2.4rem; height: 2.4rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; background: #000; box-shadow: -2px -2px 0 #22d3ee, 2px 2px 0 #e2e8f0; }
.hdr-tt b { font-size: .66rem; font-weight: 900; line-height: 1.25; }
.hdr-tt small { font-size: .55rem; font-weight: 700; line-height: 1.25; color: #9fb3c8; }
#publicLangBar { flex-wrap: nowrap; }
#btnAdminEntrance { min-width: 0; max-width: 52%; }
#btnAdminEntranceTitle { overflow: hidden; text-overflow: ellipsis; }

/* 20. v3.9.2 store phone booking: promo badge + button on every card, the thank-you card with an entry animation ---------------- */
.sp-book-row { display: flex; flex-direction: column; gap: .4rem; margin-top: .35rem; }
.sp-promo { display: flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: .6rem; font-size: .66rem; font-weight: 900; line-height: 1.3; color: #fde68a; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .4); }
.sp-promo i { font-size: .7rem; color: #fbbf24; }
.sp-book { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: .75rem; font-size: .78rem; font-weight: 900; color: #022c22; background: linear-gradient(90deg, #34d399, #22d3ee); border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-book:active { transform: scale(.97); }
.sbk-thanks { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 6, 23, .72); backdrop-filter: blur(3px); animation: sbkFade .22s ease-out both; }
.sbk-card { width: min(92vw, 24rem); text-align: center; padding: 1.4rem 1.15rem 1.1rem; border-radius: 1.4rem; color: #fff; background: linear-gradient(160deg, #0f172a, #020617); border: 1px solid rgba(52, 211, 153, .45); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 211, 238, .12); animation: sbkPop .32s cubic-bezier(.2, .9, .3, 1.2) both; }
.sbk-check { width: 3.6rem; height: 3.6rem; margin: 0 auto .7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #022c22; background: linear-gradient(135deg, #34d399, #22d3ee); animation: sbkCheck .5s .12s cubic-bezier(.2, .9, .3, 1.3) both; }
.sbk-title { font-size: 1.1rem; font-weight: 900; margin: 0 0 .5rem; }
.sbk-body { font-size: .8rem; line-height: 1.75; font-weight: 700; color: #cbd5e1; margin: 0 0 1rem; }
.sbk-done { width: 100%; min-height: 46px; border-radius: .9rem; font-weight: 900; font-size: .85rem; color: #022c22; background: linear-gradient(90deg, #34d399, #22d3ee); border: 0; cursor: pointer; }
.sbk-thanks.sbk-out { animation: sbkFadeOut .18s ease-in both; }
.sbk-thanks.sbk-out .sbk-card { animation: sbkPopOut .18s ease-in both; }
@keyframes sbkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sbkFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sbkPop { from { opacity: 0; transform: scale(.82) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sbkPopOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.92); } }
@keyframes sbkCheck { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sbk-thanks, .sbk-card, .sbk-check, .sbk-thanks.sbk-out, .sbk-thanks.sbk-out .sbk-card { animation: none; } }

/* 21. v3.9.4 DNA stream alerts: non-blocking pills, smooth exit ------------------------------------------------------------------- */
.dna-toast-host { position: fixed; top: max(.6rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10040; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: min(94vw, 26rem); pointer-events: none; }
.dna-toast { pointer-events: auto; width: 100%; display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .8rem; border-radius: 99px; border: 1.5px solid rgba(148, 163, 184, .45); color: #fff; font-size: .78rem; font-weight: 900; text-align: right; background: rgba(2, 6, 23, .92); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); cursor: pointer; animation: dnaIn .28s cubic-bezier(.2, .9, .3, 1.15) both; transition: opacity .25s ease, transform .25s ease; -webkit-tap-highlight-color: transparent; }
.dna-toast i { flex: 0 0 auto; color: #67e8f9; font-size: .95rem; }
.dna-toast-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dna-toast small { flex: 0 0 auto; font-size: .62rem; font-weight: 800; color: #94a3b8; }
.dna-toast.dna-toast-out { opacity: 0; transform: translateY(-10px) scale(.96); }
@keyframes dnaIn { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dna-toast { animation: none; transition: none; } }

/* 22. v3.9.4-r2 sync health: one persistent pill when a listener or write is refused ---------------------------------------------- */
.sync-health { position: fixed; z-index: 10060; left: 50%; bottom: max(.7rem, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 30rem); padding: .6rem .8rem .7rem; border-radius: 1rem; color: #fff; background: rgba(127, 29, 29, .96); border: 1.5px solid rgba(252, 165, 165, .7); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); text-align: right; }
.sync-health-head { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 900; }
.sync-health-head b { flex: 1 1 auto; min-width: 0; }
.sync-health-x { min-width: 44px; min-height: 44px; margin: -.5rem; border: 0; background: transparent; color: #fecaca; font-size: 1.3rem; cursor: pointer; }
.sync-health-hint { margin: .3rem 0 0; font-size: .72rem; font-weight: 700; line-height: 1.6; color: #fee2e2; }
.sync-health-list { margin: .3rem 0 0; font-size: .62rem; font-weight: 700; color: #fca5a5; direction: ltr; text-align: left; overflow-wrap: anywhere; }
.sync-health-row { display: flex; gap: .45rem; margin-top: .55rem; }
.sync-health-btn { flex: 1 1 0; min-height: 44px; border-radius: .8rem; border: 0; font-size: .75rem; font-weight: 900; color: #450a0a; background: #fff; cursor: pointer; }
.sync-health-btn.alt { color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); }