/* The palette: every colour the stylesheet uses, named once by its family and lightness (2026-10-24).
   Their values are the ones written inline before, so nothing changed on screen; a look redefines them (html.calm). */
:root {
  --c-amber-5: #1c1300;
  --c-amber-11: #2a2210;
  --c-amber-13: #3a2a08;
  --c-amber-40: #ca8a04;
  --c-amber-50: #ffd400;
  --c-amber-56: #fbbf24;
  --c-amber-59: #febc2e;
  --c-amber-65: #fcd34d;
  --c-amber-70: #ffe066;
  --c-amber-72: #d6c39b;
  --c-amber-77: #fde68a;
  --c-amber-85: #efe2c4;
  --c-amber-86: #f3e3c3;
  --c-amber-89: #fef3c7;
  --c-amber-94: #fff7e0;
  --c-amber-95: #fff7e6;
  --c-amber-96: #fffbeb;
  --c-amber-99: #fffdf8;
  --c-black: #000000;
  --c-blue-5: #020617;
  --c-blue-5-2: #0a0c10;
  --c-blue-5-3: #060a14;
  --c-blue-8: #0b1220;
  --c-blue-9: #10141c;
  --c-blue-10: #121722;
  --c-blue-11: #0f172a;
  --c-blue-11-2: #141922;
  --c-blue-11-3: #161a20;
  --c-blue-12: #0b1b33;
  --c-blue-12-2: #111a2e;
  --c-blue-12-3: #181c23;
  --c-blue-13: #121c31;
  --c-blue-16: #16213a;
  --c-blue-17: #1e293b;
  --c-blue-17-2: #1f2937;
  --c-blue-18: #262c36;
  --c-blue-22: #22314f;
  --c-blue-27: #334155;
  --c-blue-33: #1e3a8a;
  --c-blue-34: #174a96;
  --c-blue-35: #475569;
  --c-blue-38: #1b40a8;
  --c-blue-39: #586070;
  --c-blue-42: #1d5bb8;
  --c-blue-44: #1a43c4;
  --c-blue-47: #64748b;
  --c-blue-48: #1d4ed8;
  --c-blue-49: #2453d6;
  --c-blue-52: #728299;
  --c-blue-53: #2563eb;
  --c-blue-55: #2457f5;
  --c-blue-56: #7c8aa3;
  --c-blue-60: #3b82f6;
  --c-blue-61: #8f97a8;
  --c-blue-65: #94a3b8;
  --c-blue-67: #6366f1;
  --c-blue-76: #b9c0ca;
  --c-blue-82: #c9ceda;
  --c-blue-86: #d6dae0;
  --c-blue-89: #dde1e8;
  --c-blue-90: #e1e4e9;
  --c-blue-92: #dbe6fb;
  --c-blue-93: #e7ecf3;
  --c-blue-93-2: #e9ecf2;
  --c-blue-94: #e9eef5;
  --c-blue-94-2: #eceef1;
  --c-blue-95: #edf1f7;
  --c-blue-95-2: #f1f3f6;
  --c-blue-95-3: #eaf0fa;
  --c-blue-95-4: #eef0f4;
  --c-blue-95-5: #e6ecfe;
  --c-blue-95-6: #e7edfc;
  --c-blue-96: #eaf1ff;
  --c-blue-96-2: #f1f4f9;
  --c-blue-96-3: #ecedff;
  --c-blue-96-4: #f3f4f6;
  --c-blue-97: #f3f6fc;
  --c-blue-97-2: #eef4ff;
  --c-blue-97-3: #eff4ff;
  --c-blue-98: #f6f8fc;
  --c-cyan-5: #061312;
  --c-cyan-11: #0b2c2a;
  --c-cyan-11-2: #112625;
  --c-cyan-14: #163331;
  --c-cyan-18: #0a524c;
  --c-cyan-21: #085563;
  --c-cyan-22: #115e59;
  --c-cyan-26: #0f766e;
  --c-cyan-27: #0b6e80;
  --c-cyan-31: #0e6f8f;
  --c-cyan-31-2: #0e7490;
  --c-cyan-36: #0891b2;
  --c-cyan-42: #0ea5c6;
  --c-cyan-43: #06b6d4;
  --c-cyan-49: #5b8fa0;
  --c-cyan-53: #22d3ee;
  --c-cyan-62: #5fd0de;
  --c-cyan-63: #7fb3c4;
  --c-cyan-65: #8fb3bb;
  --c-cyan-69: #67e8f9;
  --c-cyan-78: #a6d8e6;
  --c-cyan-79: #9eeaf3;
  --c-cyan-88: #d7ebea;
  --c-cyan-92: #e1f0f3;
  --c-cyan-93: #e3f4f6;
  --c-cyan-93-2: #e0f7fb;
  --c-cyan-94: #e7f7fa;
  --c-cyan-95: #ecf9fb;
  --c-cyan-96: #f0f8f8;
  --c-green-24: #166534;
  --c-green-29: #15803d;
  --c-green-33: #2f7a3e;
  --c-green-36: #16a34a;
  --c-green-43: #1ebe57;
  --c-green-45: #22c55e;
  --c-green-47: #28c840;
  --c-green-49: #25d366;
  --c-green-90: #d1fae5;
  --c-green-93: #dcfce7;
  --c-green-97: #f0fdf6;
  --c-grey-4: #0a0a0a;
  --c-grey-10: #1c1917;
  --c-grey-11: #1c1c1e;
  --c-grey-39: #6d645b;
  --c-grey-40: #5a6270;
  --c-grey-41: #5f6774;
  --c-grey-65: #9ca3af;
  --c-grey-65-2: #a6a6a6;
  --c-indigo-7: #0e0b1a;
  --c-indigo-16: #211a38;
  --c-indigo-31: #3f3070;
  --c-indigo-59: #4f46e5;
  --c-indigo-85: #c4b5fd;
  --c-indigo-95: #ede9fe;
  --c-indigo-97: #f5f3fc;
  --c-indigo-98: #f5f3ff;
  --c-orange-5: #100d09;
  --c-orange-5-2: #150d07;
  --c-orange-9: #2b1d05;
  --c-orange-10: #1f1a12;
  --c-orange-10-2: #211c14;
  --c-orange-10-3: #1f1a16;
  --c-orange-11: #2a1a10;
  --c-orange-12: #2d1c10;
  --c-orange-13: #2c2415;
  --c-orange-14: #3d2a08;
  --c-orange-14-2: #451a03;
  --c-orange-14-3: #3a1d0b;
  --c-orange-16: #3a2616;
  --c-orange-17: #3b2f1e;
  --c-orange-18: #3a3020;
  --c-orange-26: #78350f;
  --c-orange-27: #8a5a00;
  --c-orange-31: #92400e;
  --c-orange-32: #7c5b28;
  --c-orange-33: #a85d00;
  --c-orange-34: #9a3412;
  --c-orange-35: #b26500;
  --c-orange-37: #b45309;
  --c-orange-40: #c2410c;
  --c-orange-41: #9a7338;
  --c-orange-44: #d97706;
  --c-orange-48: #ea580c;
  --c-orange-50: #f59e0b;
  --c-orange-52: #b08d57;
  --c-orange-53: #f97316;
  --c-orange-56: #f58529;
  --c-orange-61: #fb923c;
  --c-orange-65: #d4b07a;
  --c-orange-72: #fdba74;
  --c-orange-84: #e8dcc6;
  --c-orange-86: #e6ddd0;
  --c-orange-89: #f0e3d6;
  --c-orange-90: #f3ead9;
  --c-orange-92: #ffedd5;
  --c-orange-93: #f4efe6;
  --c-orange-93-2: #fcf0dc;
  --c-orange-93-3: #fbf1e1;
  --c-orange-94: #f6f1e7;
  --c-orange-94-2: #fff3df;
  --c-orange-94-3: #f5f1ea;
  --c-orange-95: #fff1e6;
  --c-orange-96: #fff7ed;
  --c-orange-96-2: #fbf6f1;
  --c-orange-97: #fffaf0;
  --c-pink-5: #140810;
  --c-pink-13: #301424;
  --c-pink-15: #3a1127;
  --c-pink-16: #3a1a2c;
  --c-pink-51: #db2777;
  --c-pink-52: #dd2a7b;
  --c-pink-60: #ec4899;
  --c-pink-70: #f472b6;
  --c-pink-91: #f1dfe7;
  --c-pink-95: #fce7f3;
  --c-pink-96: #fdebf4;
  --c-pink-97: #fbf4f7;
  --c-red-35: #991b1b;
  --c-red-41: #b3261e;
  --c-red-42: #b91c1c;
  --c-red-47: #c62828;
  --c-red-51: #dc2626;
  --c-red-60: #ef4444;
  --c-red-67: #ff5f57;
  --c-red-71: #f87171;
  --c-red-75: #ff8a80;
  --c-red-82: #fca5a5;
  --c-red-89: #fecaca;
  --c-red-94: #fee2e2;
  --c-red-95: #fbeaea;
  --c-red-97: #fef2f2;
  --c-red-98: #fff5f5;
  --c-rose-15: #3a1518;
  --c-rose-35: #9d174d;
  --c-rose-41: #be123c;
  --c-rose-42: #be185d;
  --c-rose-90: #fecdd3;
  --c-rose-97: #fff1f2;
  --c-sky-7: #04121f;
  --c-sky-7-2: #03161f;
  --c-sky-8: #041a24;
  --c-sky-9: #04202c;
  --c-sky-10: #07212b;
  --c-sky-10-2: #0f1d26;
  --c-sky-10-3: #07172a;
  --c-sky-11: #072431;
  --c-sky-12: #042838;
  --c-sky-12-2: #04263b;
  --c-sky-14: #0c2b3d;
  --c-sky-15: #0b2540;
  --c-sky-15-2: #0b3142;
  --c-sky-19: #0c3554;
  --c-sky-24: #0c4a6e;
  --c-sky-24-2: #145068;
  --c-sky-32: #0369a1;
  --c-sky-32-2: #1d6b88;
  --c-sky-39: #0284c7;
  --c-sky-43: #5b6b80;
  --c-sky-48: #0ea5e9;
  --c-sky-52: #1877f2;
  --c-sky-60: #38bdf8;
  --c-sky-70: #a3b1c2;
  --c-sky-70-2: #a3b1c4;
  --c-sky-74: #7dd3fc;
  --c-sky-78: #93c5fd;
  --c-sky-84: #cbd5e1;
  --c-sky-86: #bae6fd;
  --c-sky-87: #bfdbfe;
  --c-sky-87-2: #d5dde8;
  --c-sky-89: #dde2e8;
  --c-sky-91: #e2e8f0;
  --c-sky-94: #e0f2fe;
  --c-sky-94-2: #e4f3fc;
  --c-sky-95: #eef2f7;
  --c-sky-96: #f1f5f9;
  --c-sky-97: #f0f9ff;
  --c-sky-97-2: #eff6ff;
  --c-sky-97-3: #f0fbff;
  --c-sky-98: #f8fafc;
  --c-sky-99: #fbfdff;
  --c-teal-5: #07140f;
  --c-teal-5-2: #07130f;
  --c-teal-7: #0a1a14;
  --c-teal-9: #022c22;
  --c-teal-9-2: #0d2019;
  --c-teal-10: #052e22;
  --c-teal-10-2: #062e22;
  --c-teal-12: #0f2e24;
  --c-teal-12-2: #122b22;
  --c-teal-12-3: #0d2e24;
  --c-teal-12-4: #142821;
  --c-teal-14: #0b3b2e;
  --c-teal-14-2: #173228;
  --c-teal-16: #064e3b;
  --c-teal-20: #065f46;
  --c-teal-20-2: #1f4536;
  --c-teal-24: #047857;
  --c-teal-24-2: #0e6b63;
  --c-teal-27: #2c5c49;
  --c-teal-27-2: #0f7a55;
  --c-teal-30: #059669;
  --c-teal-32: #0d9488;
  --c-teal-39: #10b981;
  --c-teal-40: #14b8a6;
  --c-teal-46: #5a8f7a;
  --c-teal-50: #2dd4bf;
  --c-teal-52: #34d399;
  --c-teal-59: #7bb39c;
  --c-teal-67: #6ee7b7;
  --c-teal-75: #a7d9c2;
  --c-teal-80: #a7f3d0;
  --c-teal-87: #ccf0ea;
  --c-teal-89: #ccfbf1;
  --c-teal-89-2: #dcebe4;
  --c-teal-91: #e2efec;
  --c-teal-92: #e4f3ec;
  --c-teal-93: #e3f6f3;
  --c-teal-93-2: #e4f6ee;
  --c-teal-95: #e8fbf3;
  --c-teal-96: #ecfdf5;
  --c-teal-96-2: #f1f8f5;
  --c-teal-97: #f0fdfa;
  --c-violet-14: #241334;
  --c-violet-16: #221a3a;
  --c-violet-17: #2a1640;
  --c-violet-17-2: #241a3d;
  --c-violet-20: #2a2145;
  --c-violet-23: #3b1a5a;
  --c-violet-32: #581c87;
  --c-violet-39: #6b21a8;
  --c-violet-42: #5b21b6;
  --c-violet-45: #8134af;
  --c-violet-47: #7e22ce;
  --c-violet-50: #6d28d9;
  --c-violet-56: #9333ea;
  --c-violet-58: #7c3aed;
  --c-violet-65: #a855f7;
  --c-violet-66: #8b5cf6;
  --c-violet-75: #c084fc;
  --c-violet-76: #a78bfa;
  --c-violet-92: #e9d5ff;
  --c-violet-92-2: #e6e1f5;
  --c-violet-95: #f3e8ff;
  --c-violet-96: #f5ecff;
  --c-violet-96-2: #f1ecff;
  --c-violet-98: #faf5ff;
  --c-white: #ffffff;
  --c-yellow-37: #bfa300;
}
/* Corners: every radius of 7px and more is one of these, with the value it replaced. A look squares the program by
   redefining them (html.calm.look-tool). Smaller corners stay as they are. */
:root { --rad-7: 7px; --rad-8: 8px; --rad-9: 9px; --rad-10: 10px; --rad-11: 11px; --rad-12: 12px; --rad-13: 13px; --rad-14: 14px; --rad-15: 15px; --rad-16: 16px; --rad-18: 18px; --rad-19: 19px; --rad-20: 20px; --rad-22: 22px; --rad-24: 24px; --rad-26: 26px; --rad-28: 28px; --rad-30: 30px; --rad-32: 32px; --rad-34: 34px; --rad-36: 36px; --rad-48: 48px; --rad-99: 99px; --rad-pill: 999px; }

:root {
  --p: #0369a1; --ph: #075985; --pl: #e0f2fe;
  --bg: #f4f6fb; --card: rgba(255, 255, 255, 0.92);
  --txt: #0f172a; --txt-m: #64748b; --bdr: #e2e8f0;
  --s: #059669; --sl: #d1fae5;
  --d: #dc2626; --dl: #fee2e2;
  --w: #d97706; --wl: #fef3c7;
  --m: #db2777;
  --font: 'Noto Sans Arabic', 'Noto Sans', 'Noto Sans Hebrew', sans-serif;
  --shadow-sm: 0 2px 10px rgba(15,23,42,0.04);
  --shadow-md: 0 10px 28px rgba(15,23,42,0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p: var(--c-sky-60); --ph: var(--c-sky-48); --pl: var(--c-sky-14);
    --bg: var(--c-blue-8); --card: color-mix(in srgb, var(--c-blue-17) 85%, transparent);
    --txt: var(--c-sky-96); --txt-m: var(--c-blue-65); --bdr: var(--c-blue-17);
    --s: var(--c-teal-52); --sl: var(--c-teal-12);
    --d: var(--c-red-71); --dl: var(--c-rose-15);
    --w: var(--c-amber-56); --wl: var(--c-amber-13);
    --m: var(--c-pink-70);
    --shadow-sm: 0 2px 10px color-mix(in srgb, var(--c-black) 25%, transparent);
    --shadow-md: 0 10px 28px color-mix(in srgb, var(--c-black) 40%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --p: var(--c-sky-60); --ph: var(--c-sky-48); --pl: var(--c-sky-14);
  --bg: var(--c-blue-8); --card: color-mix(in srgb, var(--c-blue-17) 85%, transparent);
  --txt: var(--c-sky-96); --txt-m: var(--c-blue-65); --bdr: var(--c-blue-17);
  --s: var(--c-teal-52); --sl: var(--c-teal-12);
  --d: var(--c-red-71); --dl: var(--c-rose-15);
  --w: var(--c-amber-56); --wl: var(--c-amber-13);
  --m: var(--c-pink-70);
  --shadow-sm: 0 2px 10px color-mix(in srgb, var(--c-black) 25%, transparent);
  --shadow-md: 0 10px 28px color-mix(in srgb, var(--c-black) 40%, transparent);
  color-scheme: dark;
}
* { box-sizing: border-box; font-family: var(--font); -webkit-tap-highlight-color: transparent; }
body {
  background:
    radial-gradient(circle at 12% 0%, var(--glow1, color-mix(in srgb, var(--c-sky-32) 7%, transparent)), transparent 38%),
    radial-gradient(circle at 90% 8%, var(--glow2, color-mix(in srgb, var(--c-teal-39) 6%, transparent)), transparent 34%),
    var(--bg);
  background-attachment: fixed;
  color: var(--txt); margin: 0; padding: 0 0 118px 0; min-height: 100vh; transition: background 0.25s ease, color 0.25s ease;
}
/* Capacitor 8 يستخدم حافة-إلى-حافة على Android؛ احترم أشرطة النظام وحواف الشاشة على iOS. */
html.capacitor-native body {
  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  padding-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  padding-bottom: calc(118px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  padding-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}
html.capacitor-native .app-header { top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); }
html.capacitor-native .nav-bar {
  left: calc(10px + var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
  right: calc(10px + var(--safe-area-inset-right, env(safe-area-inset-right, 0px)));
  bottom: calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}
html.capacitor-native #toastContainer { top: calc(20px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
html.capacitor-native .modal-content { padding-bottom: calc(35px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
#toastContainer { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2147483000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
/* The space the fixed bottom bar occupies, and the space the bar itself needs.
   One value, used by the bar, by the padding that keeps content clear of it, and
   by the assistant's launcher. They were each guessing, which is how the launcher
   ended up sitting on top of the navigation and the last card of a section ended
   up behind it. On a wide screen the bar becomes a sidebar and reserves nothing. */
:root { --navbar-space: 96px; --sidebar-space: 0px; }
/* On a desktop the navigation is not a bar at the bottom of the page but a fixed 252px
   column down the right-hand side, running the full height of the window. Two things follow, and
   both were got wrong before: the space to reserve is now sideways rather than underneath, and
   nothing should be measuring the bar's height -- a full-height column measures 900px, which as
   a bottom margin lifts the assistant off the top of the screen. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 1024px) { :root { --navbar-space: 0px; --sidebar-space: 252px; } }
.toast { background: var(--c-blue-17); color: var(--c-white); padding: 12px 24px; border-radius: var(--rad-pill); font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 25px color-mix(in srgb, var(--c-black) 20%, transparent); opacity: 0; transform: translateY(-20px); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); display: flex; align-items: center; gap: 8px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-err { background: var(--d); } .toast-succ { background: var(--s); }
.app-header { background: var(--card); backdrop-filter: blur(16px) saturate(1.4); padding: 18px 20px; position: sticky; top: 0; z-index: 90; border-bottom: 1px solid var(--bdr); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); border-radius: 0 0 var(--rad-22) var(--rad-22); }
/* The header title, in the app's primary colour.
 *
 * It used to be painted by clipping a gradient to the glyphs:
 * `background-clip: text` with `-webkit-text-fill-color: transparent`. That is a flourish, and it
 * was being applied to the one piece of text on every screen that is a *person's name* -- the
 * signed-in user's own name in the header -- inside a flex container.
 *
 * On Android's WebView the two together are where it goes wrong. The background box of a flex
 * container is the container's box, the clip is computed against the text of its descendants, and
 * a flex item per child means the glyph run is laid out and rasterised per child. Chromium on
 * Android re-renders that as stacked, ghosted glyphs -- the same word drawn over and over, which
 * is what "the browser outputs the name with insane repetition" describes. The value in the field
 * is correct throughout, which is why it only ever looked like a rendering fault and never like
 * data.
 *
 * It gets worse with each inline element added inside. The name is a `<span translate="no"
 * dir="auto">` now, so that it is not translated -- which means the title has one more text run in
 * it than it had, and a second text run is enough to take a marginal case to an unreadable one.
 *
 * A solid colour costs one gradient on one heading and removes the whole class of fault, on the
 * element that is on screen more than any other in the application. */
.app-title { font-weight: 900; font-size: 1.32rem; color: var(--p); margin: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.2s; letter-spacing: -0.3px; }
.app-title:active { transform: scale(0.97); }
.nav-bar { position: fixed; bottom: 10px; left: 10px; right: 10px; max-width: 640px; margin: 0 auto; background: var(--card); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--bdr); border-radius: var(--rad-22); display: flex; align-items: stretch; z-index: 100; padding: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; box-shadow: var(--shadow-md); }
/* There are more items than a phone can show, so the bar scrolls. Fading the two
   ends turns a label sliced through the middle into an obvious "there is more
   this way", which is what it is; a hard cut reads as a broken layout. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  .nav-bar {
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--c-black) 16px, var(--c-black) calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, var(--c-black) 16px, var(--c-black) calc(100% - 16px), transparent 100%);
  }
}
/* One label, one line, always. A label that wraps makes its button taller than
   its neighbours, so the icons stop lining up across the bar; and the bar itself
   changes height between languages, which moves everything sitting behind it.
   Both were visible as labels sitting at different heights beside their icons. */
.nav-btn { flex: 0 0 auto; width: clamp(62px, 15vw, 78px); padding: 9px 4px 8px; text-align: center; border: none; background: none; border-radius: var(--rad-16); font-size: 0.68rem; font-weight: 800; color: var(--txt-m); cursor: pointer; transition: 0.25s; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; scroll-snap-align: center; margin: 0 1px; }
.nav-btn > span { display: block; width: 100%; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The icon is a fixed box, so every glyph sits on the same line whatever its
   own drawing does, and the stroke weight is uniform with the rest of the
   interface. `1em` keeps it scaling with the label's size on a large screen. */
.nav-ico { width: 1.35em; height: 1.35em; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-btn:active { transform: scale(0.94); }
.nav-btn.active { color: var(--p); background: var(--pl); } .nav-btn.active .nav-ico { transform: scale(1.06); }
/* The bar is a fixed height, and the content above it is padded to clear it, so
   neither changes when a language's labels are a different length. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 1024px) { .nav-bar { justify-content: center; overflow-x: auto; } .nav-btn { flex: 0 0 auto; width: auto; min-width: 104px; } }
.content-area { padding: 16px 16px calc(16px + var(--navbar-space)); max-width: 640px; margin: 0 auto; }
.section { display: none; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
.section.active { display: block; opacity: 1; transform: translateY(0); animation: fadeInUp 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.search-input { width: 100%; padding: 14px 16px; border: 1.5px solid var(--bdr); border-radius: var(--rad-16); font-size: 0.95rem; background: var(--card); transition: all 0.25s; outline: none; color: var(--txt); font-weight: 500; }
.search-input:focus { border-color: var(--p); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-sky-32) 15%, transparent); }
.btn-main, .btn-pay, .btn-cancel, .btn-scan { border: none; padding: 14px 20px; border-radius: var(--rad-18); font-size: 0.95rem; font-weight: 800; cursor: pointer; transition: 0.2s cubic-bezier(0.16,1,0.3,1); display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; letter-spacing: -0.1px; }
.btn-main { background: linear-gradient(135deg, var(--p), var(--ph)); color: var(--c-white); box-shadow: 0 8px 20px color-mix(in srgb, var(--c-sky-32) 28%, transparent); }
.btn-pay { background: linear-gradient(135deg, var(--s), var(--c-teal-30)); color: var(--c-white); box-shadow: 0 8px 20px color-mix(in srgb, var(--c-teal-30) 28%, transparent); }
.btn-scan { background: linear-gradient(135deg, var(--c-blue-17), var(--c-blue-11)); color: var(--c-white); box-shadow: 0 8px 20px color-mix(in srgb, var(--c-blue-11) 32%, transparent); }
.btn-cancel { background: var(--bg); color: var(--txt-m); border: 1.5px solid var(--bdr); box-shadow: none; }
.btn-main:hover, .btn-pay:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-main:active, .btn-pay:active, .btn-cancel:active, .btn-scan:active { transform: scale(0.96); }
@keyframes bell-shake { 0%,100%{transform:rotate(0);} 10%{transform:rotate(14deg);} 20%{transform:rotate(-12deg);} 30%{transform:rotate(10deg);} 40%{transform:rotate(-8deg);} 50%{transform:rotate(6deg);} 60%{transform:rotate(-4deg);} 70%{transform:rotate(2deg);} 80%,100%{transform:rotate(0);} }
.bell-alert { animation: bell-shake 1.8s ease-in-out infinite; background: var(--dl) !important; border-color: var(--d) !important; }
.ledger-table { width:100%; border-collapse:collapse; font-size:0.85rem; background:var(--card); }
.ledger-table th { background:var(--bg); padding:10px; text-align:right; font-weight:900; color:var(--txt-m); font-size:0.72rem; border-bottom:2px solid var(--bdr); }
.ledger-table td { padding:10px; border-bottom:1px solid var(--bdr); }
.ledger-row { cursor:pointer; transition:background 0.15s; }
.ledger-row:hover { background:var(--bg); }
.wizard-dot { width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--bdr);color:var(--txt-m);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:0.85rem;transition:0.3s; }
.wizard-dot.active { background:var(--p);border-color:var(--p);color:var(--c-white); box-shadow:0 4px 10px color-mix(in srgb, var(--c-sky-39) 30%, transparent); }
.wizard-dot-line { flex:0 1 36px; height:2px; background:var(--bdr); }
.btn-quick-order { width: 100%; margin-bottom: 20px; padding: 17px 20px; border-radius: var(--rad-26); background: linear-gradient(135deg, var(--p), var(--s)); border: none; color: white; font-size: 1.12rem; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 14px 32px color-mix(in srgb, var(--c-sky-32) 30%, transparent); cursor: pointer; transition: all 0.25s; letter-spacing: -0.2px; }
.btn-quick-order:active { transform: scale(0.98); }
.dash-card, .account-card, .lab-box, .check-card, .network-card { background: var(--card); backdrop-filter: blur(14px); border: 1.5px solid var(--bdr); border-radius: var(--rad-22); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); transition: transform 0.25s, box-shadow 0.25s; position: relative; overflow: hidden; cursor: pointer; }
.dash-card:hover, .account-card:hover, .case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--p); }
.dash-card::before { content: ''; position: absolute; top: 0; right: 0; width: 6px; height: 100%; background: var(--p); border-radius: 0 6px 6px 0; }
.dash-c-1::before { background: var(--d); } .dash-c-3::before { background: var(--s); } .dash-c-4::before { background: var(--w); }
.dash-card-title { font-size: 0.85rem; font-weight: 800; color: var(--txt-m); margin-bottom: 8px; display: block; }
.dash-card-val { font-size: 2.35rem; font-weight: 900; color: var(--txt); line-height: 1; letter-spacing: -0.5px; }
@keyframes pulse-red { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--c-red-60) 40%, transparent);} 50%{box-shadow:0 0 12px 6px color-mix(in srgb, var(--c-red-60) 10%, transparent);} 100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--c-red-60) 0%, transparent);} }
.dash-card.is-overdue { border: 2px solid var(--d); background: color-mix(in srgb, var(--c-red-60) 8%, transparent); animation: pulse-red 2s infinite ease-in-out; }
.case-card { background: var(--card); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--c-sky-91) 80%, transparent); border-radius: var(--rad-20); padding: 18px; margin-bottom: 14px; box-shadow: 0 4px 20px -2px color-mix(in srgb, var(--c-black) 3%, transparent); transition: all 0.25s; cursor: pointer; }
.case-card.is-overdue, .case-card.is-late { border: 2px solid var(--d) !important; border-right: 7px solid var(--d) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--c-red-60) 4%, transparent), color-mix(in srgb, var(--c-red-60) 12%, transparent)) , var(--card) !important; box-shadow: 0 6px 22px color-mix(in srgb, var(--c-red-60) 18%, transparent) !important; animation: pulse-red 2s infinite ease-in-out; }
.case-card.is-overdue::before, .case-card.is-late::before { content: ''; display: inline-block; box-sizing: content-box; width: 16px; height: 16px; background: var(--d) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%206v6h4.5m4.5%200a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%27%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; padding: 2px 10px; border-radius: var(--rad-10); margin-bottom: 8px; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.patient-meta { display: flex; align-items: center; gap: 12px; }
.avatar-ring { width: 44px; height: 44px; border-radius: var(--rad-14); background: var(--pl); color: var(--p); font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-sky-86); }
.patient-name { margin: 0; font-size: 1.05rem; font-weight: 900; color: var(--txt); }
.sub-text { font-size: 0.78rem; color: var(--txt-m); font-weight: 600; display: block; margin-top: 4px; }
.badge-status { font-size: 0.7rem; font-weight: 800; padding: 4px 12px; border-radius: var(--rad-20); white-space: nowrap; }
.card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--bdr); padding-top: 12px; margin-top: 12px; }
.filter-card { background: var(--card); padding: 16px; border-radius: var(--rad-18); border: 1px solid var(--bdr); margin-bottom: 16px; }
.view-toggle-bar { display: flex; gap: 8px; margin-top: 12px; background: var(--bg); padding: 6px; border-radius: var(--rad-14); border: 1px solid var(--bdr); }
.btn-view-toggle { flex: 1; padding: 10px; font-size: 0.85rem; font-weight: 700; border-radius: var(--rad-10); border: none; background: transparent; color: var(--txt-m); cursor: pointer; transition: 0.3s; }
.btn-view-toggle.active { background: var(--card); color: var(--p); box-shadow: 0 2px 6px color-mix(in srgb, var(--c-black) 5%, transparent); }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chart-container { background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 12px 8px; margin: 16px 0; }
.arch-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 2px; margin-bottom: 12px; width: 100%; }
.arch-divider { flex: 0 0 2px; height: 28px; background: var(--c-sky-84); border-radius: 2px; margin: 0 2px; }
.tooth-btn { flex: 1; min-width: 0; height: 38px; font-size: clamp(0.55rem, 2.5vw, 0.85rem); font-weight: 800; border-radius: 6px; border: 1px solid var(--bdr); background: var(--card); color: var(--txt-m); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; user-select: none; padding: 0; box-shadow: 0 1px 3px color-mix(in srgb, var(--c-black) 2%, transparent); }
.tooth-btn.active-tooth { border-color: var(--pl); background: var(--pl); color: var(--p); transform: translateY(-1px); }
.teeth-badges-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tooth-pill { padding: 6px 12px; border-radius: var(--rad-10); font-size: 0.8rem; font-weight: 800; color: var(--c-white); display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 6px color-mix(in srgb, var(--c-black) 10%, transparent); }
.modal { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--c-blue-11) 60%, transparent); z-index: 1000000; align-items: flex-end; justify-content: center; backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; }
.modal.active { display: flex; opacity: 1; }
.modal-content { background: var(--card); backdrop-filter: blur(18px); color: var(--txt); width: 100%; max-width: 600px; max-height: 90vh; border-radius: var(--rad-30) var(--rad-30) 0 0; padding: 24px 24px 35px 24px; overflow-y: auto; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 -10px 40px color-mix(in srgb, var(--c-black) 18%, transparent); }
.modal.active .modal-content { transform: translateY(0); }
.modal-top-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bdr); padding-bottom: 16px; margin-bottom: 20px; position: sticky; top: -24px; background: var(--card); z-index: 5; }
.btn-icon-close { background: var(--bg); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; font-weight: 900; color: var(--txt-m); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.form-group { margin-bottom: 16px; }
label { display: block; font-size: 0.85rem; font-weight: 800; margin-bottom: 8px; color: var(--txt-m); }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; } .form-row .form-group { flex: 1 1 150px; min-width: 0; }
/* Two fields side by side need more room than a phone has — a date input will
   not shrink below its own width, so the row pushed the page wider than the
   screen and the archive scrolled sideways. Stacked, both are readable and
   nothing is cut off. */
@media (max-width: 520px) {
  .form-row { flex-direction: column; gap: 10px; }
  .form-row .form-group { flex: none; width: 100%; }
}
.status-container { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.status-check { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; font-weight: 800; padding: 12px 16px; border-radius: var(--rad-14); background: var(--bg); border: 1px solid var(--bdr); transition: 0.2s; }
.status-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--p); cursor: pointer; }
.step-date-input { font-size: 0.8rem; color: var(--p); background: var(--pl); border: none; padding: 6px 12px; border-radius: var(--rad-8); font-weight: 700; outline: none; }
.disabled-step { opacity: 0.6; border-style: dashed; cursor: not-allowed; }
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 10px; }
.studio-item { position: relative; border-radius: var(--rad-12); overflow: hidden; border: 1px solid var(--bdr); background: var(--bg); aspect-ratio: 1; }
.studio-item img { width: 100%; height: 100%; object-fit: cover; }
.studio-item .btn-remove { position: absolute; top: 4px; left: 4px; background: color-mix(in srgb, var(--c-red-60) 90%, transparent); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 10px; cursor: pointer; z-index: 10; }
.carousel-container { position: relative; width: 100%; height: 250px; border-radius: var(--rad-20); overflow: hidden; box-shadow: 0 10px 20px color-mix(in srgb, var(--c-black) 15%, transparent); background: var(--c-blue-11); direction: ltr; margin-top: 16px; }
.carousel-track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.carousel-slide { min-width: 100%; height: 100%; position: relative; cursor: pointer; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; transition: 0.3s; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--c-white) 80%, transparent); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; color: var(--p); cursor: pointer; z-index: 10; }
.carousel-prev { left: 10px; } .carousel-next { right: 10px; }
.carousel-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, color-mix(in srgb, var(--c-black) 80%, transparent), transparent); color: white; padding: 20px 15px 10px; text-align: center; font-size: 0.85rem; font-weight: bold; }
.group-section { background: var(--card); border-radius: var(--rad-20); border: 1px solid var(--bdr); margin-bottom: 16px; overflow: hidden; box-shadow: 0 2px 8px color-mix(in srgb, var(--c-black) 2%, transparent); }
.group-header { padding: 14px 20px; font-size: 0.95rem; font-weight: 900; display: flex; justify-content: space-between; align-items: center; background: var(--bg); border-bottom: 1px solid var(--bdr); }
.group-item { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 12px 16px; margin: 8px 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.ledger-table-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bdr); cursor: pointer; }
.sub-stat { background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 12px; font-size: 0.82rem; cursor: pointer; flex: 1; text-align: center; }
.sub-stat-title { font-weight: 800; color: var(--txt-m); display: block; margin-bottom: 4px; }
.sub-stat-val { font-size: 1.4rem; font-weight: 900; }
.active-debt-banner { background: var(--dl); border: 1px solid var(--c-red-89); border-radius: var(--rad-14); padding: 14px; flex: 1; }
.total-debt-banner { background: var(--wl); border: 1px solid var(--c-amber-77); border-radius: var(--rad-14); padding: 14px; flex: 1; }
.active-debt-banner.is-cleared, .total-debt-banner.is-cleared { background: var(--sl); border-color: var(--c-teal-80); }

#loginScreen, #registerScreen, #devScreen { position: fixed; inset: 0; background: linear-gradient(135deg, var(--c-blue-11) 0%, var(--c-blue-17) 100%); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.login-box, .register-box { background: color-mix(in srgb, var(--c-white) 95%, transparent); backdrop-filter: blur(20px); padding: 35px 25px; border-radius: var(--rad-30); width: 100%; max-width: 400px; text-align: center; box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--c-black) 50%, transparent); margin: auto; }
.register-box { max-width: 450px; text-align: right; }
.dev-box { background: color-mix(in srgb, var(--c-white) 95%, transparent); backdrop-filter: blur(20px); padding: 30px; border-radius: var(--rad-30); width: 100%; max-width: 1000px; box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--c-black) 50%, transparent); margin: auto; text-align: right; }

.auth-tabs { display: flex; margin-bottom: 20px; background: var(--bg); border-radius: var(--rad-14); padding: 4px; border: 1px solid var(--bdr); }
.auth-tab { flex: 1; text-align: center; padding: 10px; font-weight: 800; font-size: 0.85rem; cursor: pointer; border-radius: var(--rad-10); color: var(--txt-m); transition: 0.3s; }
.auth-tab.active { background: var(--card); color: var(--p); box-shadow: 0 2px 6px color-mix(in srgb, var(--c-black) 5%, transparent); }

.dev-table-wrapper { overflow-x: auto; margin-top: 20px; border-radius: var(--rad-12); border: 1px solid var(--bdr); }
.dev-table { width: 100%; border-collapse: collapse; text-align: right; background: var(--card); }
.dev-table th, .dev-table td { padding: 12px; border-bottom: 1px solid var(--bdr); font-size: 0.85rem; }
.dev-table th { background: var(--pl); color: var(--p); font-weight: 900; }
.role-badge { padding: 4px 8px; border-radius: var(--rad-8); font-size: 0.75rem; font-weight: bold; background: var(--pl); color: var(--p); }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--bdr); gap: 10px; }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-weight: 800; color: var(--txt-m); font-size: 0.85rem; white-space: nowrap; }
.detail-val { font-weight: 700; color: var(--txt); font-size: 0.85rem; text-align: left; word-break: break-all; }

.link-req-item { background: var(--card); border: 1px solid var(--bdr); padding: 12px; border-radius: var(--rad-12); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }

/* A resident doctor is in the `role-sec` group for money and outside it for the centre's
   linked laboratories -- see the rule below, which is the only thing that exempts them.
   Nothing here is exempt: an earlier version exempted the whole `role-sec` group from
   `.hide-from-sec`, and a browser check caught that this also handed the resident doctor
   the patients list. Two directions, two mistakes, one lesson: the grant has to name what
   is granted. */
body.role-sec .admin-only, body.role-sec:not(.grant-money) .financial-info, body.role-lab .admin-only, body.role-lab .sec-only, body.role-sec .hide-from-sec { display: none !important; }

/* The centre's laboratories, and the network screen that lists them. A resident doctor
   resolves them through the manager's account, so the data was always right and the tabs
   were simply hidden over a correct answer. The explore and approve controls inside are a
   separate rule (`netview-admin-only`) and are NOT exempted: the resident sees the centre's
   laboratories and cannot go and add more, which is what the comment on that rule says. */
body.role-sec:not(.role-sees-links) .hide-from-centre-staff { display: none !important; }
body.role-lab .hide-from-lab { display: none !important; }
/* الاستكشاف وإرسال/الموافقة على طلبات الربط حصراً على الإداريين الحقيقيين
   (مدير مركز، طبيب مستقل، مدير مختبر، فني مستقل) — الموظفون تحتهم (سكرتاريا،
   طبيب داخلي، فني، مراسل) يشوفون بس الجهات المرتبطة أصلاً دون توسيعها. */
body:not(.role-admin) .netview-admin-only { display: none !important; }
/* سكرتاريا المختبر استثناء: تشوف ملخص الحسابات والشيكات كاملاً (لتتابع/تطالب)
   رغم حجب الأسعار الفردية عنها؛ سكرتاريا المركز الطبي تبقى محجوبة بالكامل. */
body.role-centersec:not(.grant-accounts) .hide-from-centersec { display: none !important; }

/* ===== Dental Warehouse (integrated, preview data) =====
   دور المستودع معزول تماماً: يرى أزرار المستودع فقط، ولا يرى أي شاشة
   من شاشات الأطباء أو المرضى أو المختبرات. */
body.role-warehouse .nav-btn:not(.warehouse-only) { display: none !important; }
body.role-warehouse .nav-btn.warehouse-only { display: flex !important; }
/* The side brand stays hidden for a warehouse -- it links to the clinic home. The scanner does
not: it was hidden here because pressing it as a supplier could only fail, searching an order
collection that role never loads. `openBarcodeScanner` routes by role now, so a warehouse's
scan finds a product and everyone else's still finds a case. */
body.role-warehouse .side-brand { display: none !important; }
body:not(.role-warehouse) .nav-btn.warehouse-only { display: none !important; }
body:not(.role-warehouse) .warehouse-only-section { display: none !important; }
/* A warehouse's sales representative works the same console with the owner's controls taken
away: what the warehouse sells and charges, its settings, its customer approvals, cancelling or
re-writing an order. Matched on the action each control performs, so a button the console draws
later is covered by the same line as one in the page. The server refuses every one of these to a
representative in any case; this is so the screen does not offer what will be refused. */
body.role-wh-rep #btnNavWhSettings,
body.role-wh-rep #warehouseSettingsTab,
body.role-wh-rep #btnNavWhReps,
body.role-wh-rep #warehouseRepsTab,
body.role-wh-rep #whDeleteProduct,
body.role-wh-rep #whProductModal button[type="submit"],
body.role-wh-rep #whProductModal [onclick^="whClearImage"],
body.role-wh-rep #whProductModal [onchange^="whOnImagePicked"],
body.role-wh-rep #whProductModal [onclick^="whOpenScanner"],
body.role-wh-rep #whProductModal [onclick^="whClearBarcode"],
body.role-wh-rep [onclick^="whOpenProductEditor()"],
body.role-wh-rep [onclick^="openCategories"],
body.role-wh-rep [onclick^="deleteCategory"],
body.role-wh-rep [onclick^="whOpenInvite"],
body.role-wh-rep [onclick^="whInviteCustomer"],
body.role-wh-rep [onclick^="whRespondLink"],
body.role-wh-rep [onclick^="whOpenDiscount"],
body.role-wh-rep [onclick^="whCancelOrder"],
body.role-wh-rep [onclick^="whOpenOrderEditor"],
body.role-wh-rep [onclick^="whSendChangeRequest"],
body.role-wh-rep [onclick^="whAnswerChange"],
body.role-wh-rep [onclick^="whWithdrawChange"] { display: none !important; }

/* Buyer side (ordering from a warehouse): clinics, labs and independent
   doctors only. */
body.role-warehouse .nav-btn.buyer-only { display: none !important; }

/* Whoever answers for a clinic: reviewing the supply requests their own staff
   raised. A clinic's doctor and secretary ask for supplies; the person who
   answers for the clinic decides what is actually bought, so the queue and its
   prices are shown to that person alone. That is a medical centre's manager and
   an independent physician alike — a physician's own clinic id is their uid, in
   the same sense a centre manager's is, so a secretary working for one can be
   answered for. The server enforces the same boundary in MANAGER_ROLES. */
body:not(.role-center_admin):not(.role-indep_doc) .nav-btn.manager-only { display: none !important; }
body:not(.role-center_admin):not(.role-indep_doc) .manager-only-section { display: none !important; }

.wh-notice { background: var(--pl); border: 1px solid var(--c-sky-86); color: var(--ph); border-radius: var(--rad-12); padding: 11px 13px; font-size: 0.78rem; line-height: 1.7; }
.wh-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; unicode-bidi: embed; }

#reader { width: 100%; border: none; border-radius: var(--rad-16); overflow: hidden; margin-top: 10px; background: var(--c-black); }
#reader video { border-radius: var(--rad-16); }
/* The library shades what lies outside the reading box; lightly, so the picture stays visible. */
#reader #qr-shaded-region { border-color: color-mix(in srgb, var(--c-black) 28%, transparent) !important; }

@media print {
    @page { margin: 1cm; size: auto; }
    body, html { background: var(--c-white) !important; padding: 0 !important; margin: 0 !important; height: auto !important; overflow: visible !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
    body.printing-mode .app-header, body.printing-mode .nav-bar, body.printing-mode .section, body.printing-mode .modal, body.printing-mode .filter-card, body.printing-mode .action-grid { display: none !important; }
    body.printing-mode .print-target-active { display: block !important; position: relative !important; opacity: 1 !important; visibility: visible !important; width: 100% !important; height: auto !important; background: var(--c-white) !important; transform: none !important; margin: 0 !important; padding: 0 !important; }
    body.printing-mode .print-target-active .modal-content { position: relative !important; width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; overflow: visible !important; transform: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
    body.printing-mode .no-print { display: none !important; }
    .invoice-print-header { display: flex !important; justify-content: space-between; border-bottom: 2px solid var(--p); padding-bottom: 20px; margin-bottom: 20px; }
    .barcode-svg-container svg { max-height: 80px; }
}

#loadingOverlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--c-blue-11) 80%, transparent); z-index: 9999999; display: none; align-items: center; justify-content: center; color: white; font-size: 1.2rem; font-weight: bold; flex-direction: column; gap: 15px; }
.spinner { width: 50px; height: 50px; border: 5px solid color-mix(in srgb, var(--c-white) 30%, transparent); border-radius: 50%; border-top-color: var(--p); animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
  .lang-pill { border:1px solid var(--bdr); background:var(--card); color:var(--txt-m); border-radius:var(--rad-20); padding:6px 14px; font-size:0.78rem; font-weight:800; cursor:pointer; font-family:inherit; }
  .lang-pill.active { background:var(--p); color:var(--c-white); border-color:var(--p); }
  .notif-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--bdr); font-size:0.85rem; font-weight:700; color:var(--txt); cursor:pointer; margin:0; }
  .notif-row input { width:20px; height:20px; accent-color:var(--p); cursor:pointer; flex-shrink:0; }
  .notif-row.is-off { opacity:0.45; }
  .notif-row.master { border-top:none; font-weight:900; }

/* ===== معرض الأعمال (شكل منصة اجتماعية) ===== */
.social-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; border-radius:var(--rad-14); overflow:hidden; }
.social-tile { position:relative; aspect-ratio:1; cursor:pointer; background:var(--bg); overflow:hidden; }
.social-tile img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.social-tile:hover img { transform:scale(1.06); }
.social-tile .likes { position:absolute; bottom:6px; right:6px; background:color-mix(in srgb, var(--c-black) 55%, transparent); color:var(--c-white); font-size:0.72rem; font-weight:800; padding:2px 8px; border-radius:var(--rad-10); }
.social-view { position:relative; background:var(--c-black); border-radius:var(--rad-18); overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:50vh; }
.social-view img { max-width:100%; max-height:66vh; object-fit:contain; }
.social-nav { position:absolute; top:50%; transform:translateY(-50%); background:color-mix(in srgb, var(--c-white) 85%, transparent); border:none; border-radius:50%; width:40px; height:40px; font-size:1.2rem; cursor:pointer; }
.social-like { display:flex; align-items:center; gap:10px; padding:12px 4px; font-weight:900; }
.social-like button { background:none; border:none; font-size:1.8rem; cursor:pointer; transition:transform 0.15s; line-height:1; }
.social-like button:active { transform:scale(1.3); }
/* ===== المحادثات ===== */
.chat-tabs { display:flex; gap:6px; margin-bottom:10px; }
.chat-row { display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:var(--rad-14); cursor:pointer; border-bottom:1px solid var(--bdr); }
.chat-row:hover, .chat-row.active { background:var(--pl); }
.chat-row .chat-name { font-weight:900; color:var(--txt); font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-row .chat-sub { font-size:0.75rem; color:var(--txt-m); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-row .chat-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; font-size:0.68rem; color:var(--txt-m); }
.chat-unread { background:var(--d); color:var(--c-white); border-radius:var(--rad-12); padding:1px 8px; font-weight:900; font-size:0.7rem; }
.chat-thread-pane { display:none; }
.chat-empty { margin:auto; color:var(--txt-m); font-weight:800; }
/* ===================================================================
   v4.2 — عناصر مشتركة
   =================================================================== */
:root { --disc: #7c3aed; --discl: #f5f0ff; --disc-b: #dccffb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --disc: var(--c-indigo-85); --discl: var(--c-violet-16); --disc-b: var(--c-indigo-31); } }
:root[data-theme="dark"] { --disc: var(--c-indigo-85); --discl: var(--c-violet-16); --disc-b: var(--c-indigo-31); }
:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.desktop-only { display: none !important; }
.side-brand, .side-user, .page-title { display: none; }
.link-btn { background: none; border: none; color: var(--p); font-weight: 800; font-size: 0.8rem; cursor: pointer; padding: 6px 0; font-family: inherit; }
.link-btn:hover { text-decoration: underline; }

/* ----- الخصم ----- */
.disc-ring { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 5px; border-radius: var(--rad-pill); border: 2.5px solid var(--disc); color: var(--disc); background: var(--discl); font-weight: 900; font-size: 0.82rem; vertical-align: middle; margin: 0 6px; line-height: 1; letter-spacing: -0.3px; flex-shrink: 0; }
.disc-ring small { font-size: 0.6rem; margin-inline-start: 1px; }
.disc-box { margin-top: 12px; border-radius: var(--rad-14); padding: 14px 16px; border: 1.5px dashed var(--disc-b); background: var(--discl); }
.disc-box.disc-doc { border-style: solid; background: linear-gradient(135deg, var(--discl) 0%, var(--sl) 130%); }
.disc-head { display: flex; align-items: center; gap: 12px; }
.disc-head strong { display: block; color: var(--disc); font-size: 0.95rem; font-weight: 900; }
.disc-head span { font-size: 0.78rem; color: var(--txt-m); font-weight: 600; }
.disc-gift { font-size: 1.7rem; line-height: 1; }
.disc-lines { margin-top: 10px; display: grid; gap: 5px; }
.disc-lines > div { display: flex; justify-content: space-between; font-size: 0.86rem; }
.disc-lines .net { border-top: 1px solid var(--disc-b); padding-top: 7px; margin-top: 2px; font-weight: 900; }
.disc-lines .minus { color: var(--disc); }
.disc-lines .strike { text-decoration: line-through; color: var(--txt-m); font-weight: 600; }
.disc-chip { display: inline-block; background: var(--discl); color: var(--disc); border: 1px solid var(--disc-b); font-size: 0.68rem; font-weight: 900; padding: 1px 7px; border-radius: var(--rad-pill); vertical-align: middle; }
.ledger-row.disc-row td { background: var(--discl); color: var(--disc); font-weight: 800; }
.group-item.disc-item { border-color: var(--disc-b) !important; background: var(--discl) !important; }
.disc-summary { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--rad-12); background: var(--discl); color: var(--disc); font-weight: 800; font-size: 0.85rem; border: 1px solid var(--disc-b); }
.disc-summary span { flex: 1; }
.acc-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.disc-ring, .disc-chip, .disc-lines b, .disc-summary strong { direction: ltr; unicode-bidi: isolate; }

/* ----- حفظ الملفات + ملاحظة الفاتورة ----- */
.retention-note { margin-top: 16px; padding: 10px 14px; border-radius: var(--rad-12); background: var(--bg); border: 1px solid var(--bdr); color: var(--txt-m); font-size: 0.78rem; font-weight: 700; line-height: 1.6; }
.retention-note.is-soon { background: var(--wl); border-color: var(--c-amber-65); color: var(--c-orange-37); }
.retention-note.is-purged { border-style: dashed; }
.print-only { display: none; }
.invoice-note { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--c-sky-84); font-size: 0.8rem; color: var(--c-blue-35); white-space: pre-wrap; }
@media print { .print-only { display: block !important; } }

/* ----- الإعدادات ----- */
.set-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 16px; margin-bottom: 14px; }
.set-title { color: var(--txt) !important; font-size: 0.9rem !important; margin-bottom: 10px !important; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.set-row > span { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.set-row select { max-width: 230px; padding: 10px 12px; }
.set-hint { font-size: 0.72rem; color: var(--txt-m); margin: 8px 0 0; line-height: 1.6; }
.kbd-list > div { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 0.82rem; }
.kbd-list span { margin-inline-start: 8px; color: var(--txt-m); }
kbd { display: inline-block; min-width: 26px; text-align: center; padding: 2px 7px; border-radius: var(--rad-7); border: 1px solid var(--bdr); border-bottom-width: 3px; background: var(--bg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--txt); }

/* ----- جدول الطلبيات ----- */
.orders-table-wrap { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-16); overflow: auto; max-height: calc(100vh - 230px); }
.orders-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.orders-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); text-align: right; padding: 11px 14px; font-weight: 800; color: var(--txt-m); font-size: 0.75rem; border-bottom: 1px solid var(--bdr); cursor: pointer; white-space: nowrap; user-select: none; }
.orders-table thead th:hover { color: var(--p); }
.orders-table td { padding: 10px 14px; border-bottom: 1px solid var(--bdr); vertical-align: middle; }
.orders-table tbody tr { cursor: pointer; }
.orders-table tbody tr:hover td { background: var(--pl); }
.orders-table tbody tr.is-late td:first-child { box-shadow: inset -4px 0 0 var(--d); }
.orders-table tbody tr.is-cancelled { opacity: 0.55; }
.orders-table .num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-patient { font-weight: 800; color: var(--txt); white-space: nowrap; }
.ot-sub { font-size: 0.72rem; color: var(--txt-m); }
.ot-service { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-count { font-size: 0.75rem; color: var(--txt-m); padding: 10px 4px; font-weight: 700; }
.stage-pill { --c: var(--c-blue-47); display: inline-block; padding: 3px 10px; border-radius: var(--rad-pill); font-size: 0.74rem; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); white-space: nowrap; }

/* ===================================================================
   شاشة الدخول
   =================================================================== */
#loginScreen, #registerScreen {
  --auth-bg: var(--c-sky-10); --auth-ink: var(--c-cyan-93); --auth-muted: var(--c-cyan-65); --auth-accent: var(--c-cyan-62);
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--c-cyan-62) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--c-sky-32) 35%, transparent), transparent 60%),
    var(--auth-bg) !important;
  padding: 24px !important;
}
.auth-shell { width: 100%; max-width: 1080px; min-width: 0; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.auth-brand { display: none; color: var(--auth-ink); min-width: 0; }
.auth-card { background: var(--auth-card) !important; color: var(--txt); border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); border-radius: var(--rad-26) !important; padding: 30px 28px 22px !important; box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--c-black) 55%, transparent) !important; text-align: right !important; width: 100%; min-width: 0; max-width: 440px !important; margin: auto; }
#loginScreen, #registerScreen { --auth-card: var(--c-white); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #loginScreen, :root:not([data-theme="light"]) #registerScreen { --auth-card: var(--c-sky-10-2); } }
:root[data-theme="dark"] #loginScreen, :root[data-theme="dark"] #registerScreen { --auth-card: var(--c-sky-10-2); }
.register-box.auth-card { max-width: 480px !important; }
.auth-card-top { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.auth-card-top .lang-switch { display: flex; gap: 4px; }
.auth-card-top .lang-pill { padding: 5px 10px; font-size: 0.72rem; }
.auth-mark { width: 60px; height: 60px; border-radius: var(--rad-18); display: grid; place-items: center; color: var(--auth-accent); background: color-mix(in srgb, var(--c-cyan-62) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan-62) 35%, transparent); }
.auth-mark--sm { width: 44px; height: 44px; border-radius: var(--rad-13); color: var(--p); background: var(--pl); border-color: transparent; }
.auth-heading { margin: 0 0 4px; font-size: 1.55rem; font-weight: 900; color: var(--txt); letter-spacing: -0.4px; }
.auth-sub { margin: 0 0 18px; color: var(--txt-m); font-size: 0.88rem; }
.auth-notice { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--rad-12); background: var(--wl); color: var(--w); font-size: 0.85rem; font-weight: 700; line-height: 1.7; border: 1px solid var(--w); }
.auth-notice[hidden] { display: none; }
.auth-label { display: block; font-size: 0.8rem; font-weight: 800; color: var(--txt-m); margin: 14px 0 6px; }
.auth-label-row { display: flex; align-items: flex-end; justify-content: space-between; }
.auth-label-row .auth-label { margin-bottom: 6px; }
.auth-input { text-align: left; }
.auth-input::placeholder { color: var(--c-sky-70); }
.auth-pw { position: relative; }
.auth-pw .auth-input { padding-right: 46px; }
.auth-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.05rem; cursor: pointer; color: var(--txt-m); width: 34px; height: 34px; border-radius: var(--rad-10); }
.auth-eye:hover { background: var(--bg); }
.auth-submit { margin-top: 20px; }
.auth-foot { text-align: center; margin-top: 18px; }
.auth-foot .app-version-label { font-size: 0.68rem; color: var(--txt-m); font-weight: 700; }
#loginScreen .auth-tabs, #registerScreen .auth-tabs { width: 100%; min-width: 0; margin-bottom: 6px; }
#loginScreen .auth-tab, #registerScreen .auth-tab { min-width: 0; overflow: hidden; padding-inline: 6px; text-overflow: ellipsis; white-space: nowrap; }
/* الرسم: قوس الأسنان يُرسم مرة واحدة عند الفتح */
.auth-arch { width: 100%; max-width: 380px; height: auto; display: block; margin: 26px 0 8px; }
.auth-arch .arch-line { fill: none; stroke: var(--auth-accent); stroke-width: 1.4; stroke-dasharray: 900; stroke-dashoffset: 900; opacity: 0.55; animation: arch-draw 1.6s cubic-bezier(.6,.1,.2,1) 0.2s forwards; }
.auth-arch .t { fill: color-mix(in srgb, var(--c-cyan-93) 6%, transparent); stroke: color-mix(in srgb, var(--c-cyan-62) 60%, transparent); stroke-width: 1.2; opacity: 0; animation: tooth-in 0.5s ease forwards; animation-delay: calc(0.6s + var(--i) * 60ms); }
@keyframes arch-draw { to { stroke-dashoffset: 0; } }
@keyframes tooth-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.auth-brand-copy h1 { font-size: 2.1rem; line-height: 1.25; font-weight: 900; margin: 6px 0 12px; letter-spacing: -0.6px; color: var(--c-white); }
.auth-lede { font-size: 1.02rem; line-height: 1.8; color: var(--auth-ink); opacity: 0.9; margin: 0 0 20px; max-width: 34ch; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.auth-points li { position: relative; padding-right: 22px; color: var(--auth-muted); font-size: 0.9rem; line-height: 1.6; }
.auth-points li::before { content: ''; position: absolute; right: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 3px; background: var(--auth-accent); opacity: 0.8; }
@media (min-width: 900px) {
  .auth-shell { grid-template-columns: minmax(0, 1.1fr) minmax(380px, 440px); }
  .auth-brand { display: block; }
  #loginScreen .auth-card-top .auth-mark--sm { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-arch .arch-line, .auth-arch .t { animation: none; opacity: 0.6; stroke-dashoffset: 0; }
  .section.active { animation: none; }
}


/* ===== v4.3: الشعار DentaLab + قائمة اللغة ===== */
.brand-word { font-weight: 900; letter-spacing: -0.6px; color: var(--txt); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.brand-word > span { color: var(--c-cyan-42); }
.brand-word--hero { font-size: 2.6rem !important; line-height: 1.1; color: var(--c-white) !important; margin: 4px 0 6px !important; }
.brand-word--hero > span { color: var(--auth-accent, var(--c-cyan-62)); }
.auth-tagline { color: var(--auth-accent, var(--c-cyan-62)); font-weight: 800; font-size: 1rem; margin: 0 0 14px; letter-spacing: 0.2px; }
.brand-word--card { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1.25rem; margin-inline-end: auto; margin-inline-start: 10px; }
.brand-word--side { font-size: 1.15rem !important; }
.brand-word--dev { font-size: 1.3rem; }
.lang-select-wrap { display: inline-flex; min-width: 0; max-width: 150px; flex: 0 1 150px; align-items: center; gap: 6px; padding: 0 10px; height: 38px; border-radius: var(--rad-12); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt-m); cursor: pointer; }
.lang-select-wrap:focus-within { border-color: var(--p); color: var(--p); }
.lang-select { min-width: 0; width: 100%; border: none; background: transparent; color: var(--txt); font: inherit; font-weight: 800; font-size: 0.82rem; cursor: pointer; outline: none; padding: 6px 2px; }
.auth-card { text-align: start !important; }
.auth-points li { padding-right: 0; padding-inline-start: 22px; }
.auth-points li::before { right: auto; inset-inline-start: 2px; }
#loginScreen[dir="ltr"] .auth-lede, #loginScreen[dir="ltr"] .auth-points { direction: ltr; }
@media (min-width: 900px) { #loginScreen .auth-card-top .brand-word--card { visibility: hidden; } }

/* ===== Warehouse / supplies product cards =====
   A square card per product: picture, name, price where the viewer is allowed
   to see one, and a quantity stepper. A grid reads far better than a list when
   the deciding factor is a photograph. */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.prod-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card, var(--c-white)); border: 1px solid var(--bdr); border-radius: var(--rad-16);
  overflow: hidden; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.prod-card:hover { border-color: var(--p); transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--c-blue-11) 8%, transparent); }
.prod-card.is-picked { border-color: var(--p); box-shadow: 0 0 0 2px var(--pl); }
/* The square: one product, one picture, whatever the aspect of the source. */
.prod-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-thumb .prod-thumb-empty { font-size: 2rem; opacity: .35; }
.prod-thumb .prod-out { position: absolute; inset-inline-start: 8px; top: 8px; background: var(--dl); color: var(--d); font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: var(--rad-pill); }
.prod-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prod-name { font-size: .84rem; font-weight: 800; line-height: 1.4; color: var(--txt); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-meta { font-size: .7rem; color: var(--txt-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-price { font-size: .95rem; font-weight: 900; color: var(--p); margin-top: auto; padding-top: 4px; }
/* Shown instead of a price to the people who are not allowed one. */
.prod-price-hidden { font-size: .7rem; font-weight: 700; color: var(--txt-m); margin-top: auto; padding-top: 4px; }
.prod-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--bdr); }
.prod-stepper button { width: 30px; height: 30px; flex: none; border-radius: var(--rad-9); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); font-size: 1rem; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.prod-stepper button:hover:not(:disabled) { border-color: var(--p); color: var(--p); }
.prod-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.prod-stepper .prod-qty { min-width: 26px; text-align: center; font-weight: 900; font-size: .9rem; }
.prod-badge-picked { position: absolute; inset-inline-end: 8px; top: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--rad-pill); background: var(--p); color: var(--c-white); font-size: .74rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }

@media (max-width: 480px) {
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
}

/* ===== The landing ====================================================
   A navigation strip with dropdowns, one panel per kind of account, and the
   workflow in four steps.

   The direction of the page is inherited, not set here: `dir` is already correct
   for the chosen language, and writing a direction here would override the one
   the translator sets and break the logical properties below. */

/* ---- navigation ---- */
.lp-nav { margin: 0 0 22px; }
.lp-nav-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 5px;
  background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-14);
}
.lp-nav-item { position: relative; }
.lp-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; color: var(--txt-m);
  font: inherit; font-size: 0.84rem; font-weight: 800;
  padding: 8px 14px; border-radius: var(--rad-10); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.lp-nav-link:hover { color: var(--p); background: var(--card, var(--c-white)); }
.lp-nav-link:focus-visible { outline: 2px solid var(--p); outline-offset: 1px; }
.lp-nav-link[aria-expanded="true"] { color: var(--p); background: var(--card, var(--c-white)); }
.lp-nav-link--cta { background: var(--p); color: var(--c-white); }
.lp-nav-link--cta:hover { color: var(--c-white); filter: brightness(1.08); background: var(--p); }
.lp-caret { font-size: 0.7em; opacity: 0.65; transition: transform .18s ease; }
.lp-nav-link[aria-expanded="true"] .lp-caret { transform: rotate(180deg); }

.lp-menu {
  position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 6px);
  min-width: 230px; z-index: 40; padding: 6px;
  background: var(--card, var(--c-white)); border: 1px solid var(--bdr); border-radius: var(--rad-13);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--c-blue-11) 14%, transparent);
  display: none;
}
.lp-menu.is-open { display: block; }
.lp-menu--wide { min-width: 260px; }
.lp-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: none; background: transparent; color: var(--txt); text-align: start;
  font: inherit; font-size: 0.83rem; font-weight: 700;
  padding: 8px 10px; border-radius: var(--rad-9); cursor: pointer; text-decoration: none;
}
.lp-menu-item:hover { background: var(--bg); color: var(--p); }
.lp-menu-item:focus-visible { outline: 2px solid var(--p); outline-offset: -2px; }
.lp-menu-ico { font-size: 1rem; flex: none; }

/* ---- the service panel strip ---- */
.lp-panels { margin: 0 0 22px; }
.lp-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--bdr);
}
.lp-tab {
  border: none; background: transparent; color: var(--txt-m);
  font: inherit; font-size: 0.84rem; font-weight: 800;
  padding: 9px 14px; margin-bottom: -1px; cursor: pointer;
  border-bottom: 2px solid transparent; border-radius: var(--rad-9) var(--rad-9) 0 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.lp-tab:hover { color: var(--p); }
.lp-tab:focus-visible { outline: 2px solid var(--p); outline-offset: -2px; }
.lp-tab[aria-selected="true"] { color: var(--p); border-bottom-color: var(--p); }

.lp-panel {
  background: var(--card, var(--c-white)); border: 1px solid var(--bdr);
  border-radius: var(--rad-16); padding: 18px;
}
.lp-panel[hidden] { display: none; }
.lp-panel-lede { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.9; color: var(--txt); }
.lp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-points li {
  position: relative; padding-inline-start: 20px;
  font-size: 0.83rem; line-height: 1.8; color: var(--txt-m);
}
.lp-points li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
  color: var(--s, var(--p)); font-weight: 900;
}

/* ---- the workflow ---- */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 26px; }
.lp-step {
  background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 14px;
}
.lp-step:target { border-color: var(--p); }
.lp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--p); color: var(--c-white); font-size: 0.75rem; font-weight: 900;
  margin-bottom: 8px;
}
.lp-step-h { margin: 0 0 5px; font-size: 0.88rem; font-weight: 900; color: var(--p); }
.lp-step p { margin: 0; font-size: 0.79rem; line-height: 1.8; color: var(--txt-m); }

/* ---- the card-payment notice ---- */
.lp-gateway-note {
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--rad-11);
  background: var(--wl, var(--c-amber-95)); color: var(--w, var(--c-orange-27));
  font-size: 0.76rem; font-weight: 700; line-height: 1.75;
  border: 1px solid transparent;
}
.lp-gateway-note:target { border-color: var(--w, var(--c-orange-27)); }
.lp-nav-link:focus-visible, .lp-step:target { scroll-margin-top: 20px; }

@media (max-width: 720px) {
  .lp-nav-list { flex-direction: column; }
  .lp-menu { position: static; box-shadow: none; border: none; padding: 0 0 4px 10px; }
  .lp-menu--wide { min-width: 0; }
  .lp-tab { font-size: 0.78rem; padding: 8px 10px; }
}

/* ===== The assistant ==================================================
   A launcher in the corner and a panel beside it. Deliberately small: it is
   present on every page, so it must not compete with the screen it is on.

   It sits clear of the navigation rather than on top of it. Both occupy the
   bottom corner, and the launcher was placed first and won, so it covered the
   first navigation item completely. The offset is the same reserved height the
   bar itself uses, so they cannot collide when one of them changes. */
.ai-assistant { position: fixed; inset-block-end: calc(18px + var(--navbar-space)); inset-inline-end: calc(18px + var(--sidebar-space)); z-index: 900; }
.ai-launcher {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--bdr);
  background: var(--p); color: var(--c-white); font-size: 1.3rem; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-blue-11) 18%, transparent); display: flex; align-items: center; justify-content: center;
}
.ai-launcher:hover { transform: translateY(-1px); }
.ai-launcher.is-open { background: var(--txt); }
.ai-panel {
  position: absolute; inset-block-end: 62px; inset-inline-end: 0; width: min(340px, calc(100vw - 36px));
  background: var(--card, var(--c-white)); border: 1px solid var(--bdr); border-radius: var(--rad-18);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--c-blue-11) 20%, transparent); padding: 14px; display: none;
  /* The panel floats over the content rather than sitting on the page's own
     background, so the eight percent of transparency in --card is enough to read
     the cards behind it straight through the answers. Blurred, the same way the
     navigation bar is, it stops being legible — which is what a panel over
     content needs to be. Capped as a column so that a long conversation scrolls
     inside it instead of running off the top of a phone screen. */
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  max-height: min(76vh, 640px);
  flex-direction: column;
}
.ai-panel.is-open { display: flex; }
.ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .95rem; flex: none; }
.ai-head strong { flex: 1; min-width: 0; }
.ai-note { margin: 0 0 10px; font-size: .72rem; color: var(--txt-m); line-height: 1.6; flex: none; }
.ai-row { display: flex; gap: 8px; align-items: stretch; flex: none; }
.ai-row .search-input { flex: 1; min-width: 0; }
.ai-mic {
  width: 42px; flex: none; border-radius: var(--rad-11); border: 1px solid var(--bdr);
  background: var(--bg); color: var(--txt); font-size: 1rem; cursor: pointer;
}
.ai-mic.is-listening { background: var(--dl); color: var(--d); border-color: var(--dl); }
.ai-state { font-size: .7rem; color: var(--txt-m); margin: 6px 0 0; flex: none; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: .72rem; color: var(--txt-m); flex: none; }

/* What was said while listening, and nothing else. The conversation below already
   shows what was said and what came back, so this line is here for the words
   arriving from the microphone — which is the one thing that has nowhere else to
   appear. */
.ai-transcript { font-size: .78rem; color: var(--txt-m); margin-top: 6px; font-style: italic; flex: none; }
.ai-transcript:empty { display: none; }

/* The latest answer, as a region a screen reader announces and the tests read.
   It is not shown: the conversation carries it, and showing it in both places
   printed every answer twice. */
.ai-answer {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ai-suggest button {
  border: 1px solid var(--bdr); background: var(--bg); color: var(--txt);
  border-radius: var(--rad-pill); padding: 4px 10px; font-size: .72rem; cursor: pointer;
}
.ai-suggest button:hover { border-color: var(--p); color: var(--p); }

/* The conversation. A panel that shows only the latest answer loses the thread:
   after the third question there is no way to see what the second one was about,
   and "the second one" as a reply has nothing to refer back to. */
.ai-log {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; margin: 10px 0 2px; flex: 1 1 auto; min-height: 0;
  scrollbar-width: thin;
}
.ai-log:empty { display: none; }
.ai-turn { border-inline-start: 3px solid var(--bdr); padding-inline-start: 10px; }
.ai-said { font-size: .78rem; font-weight: 800; color: var(--p); line-height: 1.6; }
.ai-reply { font-size: .8rem; color: var(--txt); line-height: 1.75; margin-top: 2px; }
:root[data-theme="dark"] .ai-turn { border-inline-start-color: var(--bdr); }

/* Every word in the panel is something a person typed, and a person may type in
   any of the three languages regardless of the one the interface is in. Left to
   the document, an English answer inside a Hebrew page puts its full stop at the
   front and its punctuation on the wrong side of every line — so each answer and
   each question is laid out in its own direction. */
.ai-said, .ai-reply, .ai-item-title, .ai-answer, .ai-suggest button { unicode-bidi: plaintext; text-align: start; }

/* The rows an answer offers. They are the difference between a reply that can be
   acted on and one that can only be read: "which orders are late" is answered with
   a list, and each line of it opens that order. */
.ai-items { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; flex: none; }
.ai-items:empty { display: none; }
.ai-item {
  display: flex; align-items: baseline; gap: 8px; text-align: start; width: 100%;
  border: 1px solid var(--bdr); background: var(--bg); color: var(--txt);
  border-radius: var(--rad-12); padding: 8px 11px; font: inherit; cursor: pointer;
}
.ai-item:hover { border-color: var(--p); }
.ai-item-title { font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
.ai-item-sub { font-size: .7rem; color: var(--txt-m); margin-inline-start: auto; white-space: nowrap; }
.ai-clear {
  width: 30px; height: 30px; flex: none; border-radius: var(--rad-9); cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg); color: var(--txt-m);
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}
.ai-clear:hover { border-color: var(--p); color: var(--p); }
.ai-head .btn-icon-close { margin-inline-start: 0; }

@media (max-width: 480px) {
  .ai-assistant { inset-block-end: calc(12px + var(--navbar-space)); inset-inline-end: 12px; }
  .ai-launcher { width: 46px; height: 46px; }
}

/* ===== Login page: overview, subscriber features, how to subscribe ===== */
/* Sits under the login card and spans the full shell, so the same information
   is available on a phone, where the brand panel is hidden. */
.auth-overview { grid-column: 1 / -1; min-width: 0; color: var(--txt); background: var(--card, var(--c-white)); border: 1px solid var(--bdr); border-radius: var(--rad-22); padding: 26px 24px; box-shadow: 0 10px 30px color-mix(in srgb, var(--c-blue-11) 6%, transparent); }
.auth-overview-head { margin-bottom: 20px; }
.auth-overview-title { font-size: 1.35rem; font-weight: 900; margin: 0 0 8px; color: var(--p); }
.auth-overview-lede { font-size: 0.95rem; line-height: 1.85; color: var(--txt-m); margin: 0; max-width: 90ch; }
.auth-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 24px; }
.auth-overview-card { min-width: 0; background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 14px 15px; }
.auth-card-h { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 900; margin: 0 0 6px; color: var(--txt); }
.auth-card-ico { font-size: 1.05rem; line-height: 1; }
.auth-overview-card p { font-size: 0.84rem; line-height: 1.75; color: var(--txt-m); margin: 0; }
.auth-sub-title { font-size: 1.05rem; font-weight: 900; margin: 0 0 12px; color: var(--p); }
.auth-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 9px 20px; }
.auth-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.87rem; line-height: 1.7; color: var(--txt); }
.auth-tick { flex: none; color: var(--s, var(--c-green-29)); font-weight: 900; line-height: 1.5; }
.auth-subscribe { border-top: 1px solid var(--bdr); padding-top: 18px; }
.auth-subscribe-note { font-size: 0.88rem; line-height: 1.8; color: var(--txt-m); margin: 0 0 14px; }
.auth-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.auth-contact-item { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: inherit; background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 12px 14px; transition: border-color .15s ease, transform .15s ease; }
.auth-contact-item:hover, .auth-contact-item:focus-visible { border-color: var(--p); transform: translateY(-1px); }
.auth-contact-ico { flex: none; font-size: 1.15rem; }
.auth-contact-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-contact-label { font-size: 0.72rem; font-weight: 800; color: var(--txt-m); text-transform: uppercase; letter-spacing: 0.4px; }
.auth-contact-value { font-size: 0.95rem; font-weight: 900; color: var(--p); overflow-wrap: anywhere; }
#loginScreen[dir="ltr"] .auth-overview { direction: ltr; }
@media (max-width: 480px) {
  .auth-overview { padding: 20px 16px; border-radius: var(--rad-18); }
  .auth-overview-title { font-size: 1.18rem; }
  .auth-features { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .auth-card { padding: 24px 18px 20px !important; border-radius: var(--rad-22) !important; }
  .auth-card-top { gap: 8px; }
  .brand-word--card { font-size: 1.08rem; margin-inline-start: 6px; }
  .lang-select-wrap { max-width: 116px; flex-basis: 116px; padding-inline: 7px; }
  #loginScreen .auth-tab, #registerScreen .auth-tab { padding-inline: 4px; font-size: 0.76rem; }
}


.dev-dashboard-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 12px !important; margin-bottom: 20px; }
.dev-dashboard-grid .dash-card { margin: 0 !important; padding: 14px 16px !important; }
.dev-dashboard-grid .dash-card-val { font-size: 1.8rem; }





/* ===== v4.6: إعادة القياس + سحب وإفلات الملفات ===== */
.reimp-box { margin-top: 12px; padding: 14px; border-radius: var(--rad-14); background: var(--c-violet-98); border: 1.5px solid var(--c-violet-75); }
.reimp-box.is-soft { border-style: dashed; }
.reimp-head { font-weight: 900; color: var(--c-violet-47); font-size: 0.92rem; }
.reimp-count { background: var(--c-violet-56); color: var(--c-white); border-radius: var(--rad-pill); padding: 1px 8px; font-size: 0.7rem; margin-inline-start: 6px; }
.reimp-reason { margin-top: 6px; font-size: 0.85rem; color: var(--c-violet-32); line-height: 1.7; }
.reimp-meta { font-size: 0.72rem; color: var(--txt-m); margin-top: 4px; font-weight: 700; }
.reimp-hint { font-size: 0.78rem; color: var(--c-violet-39); margin-top: 8px; font-weight: 700; }
.reimp-btn { margin-top: 10px !important; border-color: var(--c-violet-75) !important; color: var(--c-violet-47) !important; background: var(--c-violet-98) !important; }
.reimp-form { margin-top: 10px; padding: 12px; border-radius: var(--rad-14); background: var(--bg); border: 1px solid var(--bdr); }
.reimp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 800; color: var(--txt-m); margin-bottom: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reimp-box { background: var(--c-violet-14); border-color: var(--c-violet-39); } :root:not([data-theme="light"]) .reimp-reason, :root:not([data-theme="light"]) .reimp-hint { color: var(--c-violet-75); } }
:root[data-theme="dark"] .reimp-box { background: var(--c-violet-14); border-color: var(--c-violet-39); } :root[data-theme="dark"] .reimp-reason, :root[data-theme="dark"] .reimp-hint { color: var(--c-violet-75); }
.stl-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; padding: 18px 12px; border-radius: var(--rad-16); border: 2px dashed var(--c-sky-74); background: var(--pl); color: var(--p); cursor: pointer; text-align: center; transition: background .15s, border-color .15s, transform .15s; }
.stl-drop:hover { border-color: var(--p); }
.stl-drop.is-drag { background: color-mix(in srgb, var(--p) 16%, var(--card)); border-color: var(--p); border-style: solid; transform: scale(1.01); }
.stl-drop-ico { font-size: 1.6rem; line-height: 1; }
.stl-drop-sub { font-size: 0.74rem; color: var(--txt-m); font-weight: 700; }
.stl-old { color: var(--txt-m); font-weight: 800; } .stl-new { color: var(--s); font-weight: 900; }
/* ===== v4.5: أيقونات ملونة (كل قسم بلونه) + شريط الموبايل ===== */
[data-icon="dashboard"] { --ic: var(--c-blue-53); } [data-icon="orders"] { --ic: var(--c-cyan-36); } [data-icon="cash"] { --ic: var(--c-green-36); }
[data-icon="wallet"] { --ic: var(--c-teal-32); } [data-icon="tag"] { --ic: var(--c-orange-44); } [data-icon="network"] { --ic: var(--c-violet-58); }
[data-icon="chart"] { --ic: var(--c-indigo-59); } [data-icon="users"] { --ic: var(--c-pink-51); } [data-icon="briefcase"] { --ic: var(--c-orange-48); } [data-icon="stethoscope"] { --ic: var(--c-sky-39); }
[data-icon="archive"] { --ic: var(--c-blue-47); } [data-icon="bell"] { --ic: var(--c-orange-44); } [data-icon="message"] { --ic: var(--c-blue-53); }
[data-icon="scan"] { --ic: var(--c-cyan-36); } [data-icon="settings"] { --ic: var(--c-violet-58); } [data-icon="logout"] { --ic: var(--c-red-51); }
/* The three concepts the bar has that the top bar does not, so that every item in
   the bar owns a colour rather than borrowing one and reading as a duplicate. */
[data-icon="warehouse"] { --ic: var(--c-indigo-59); } [data-icon="inbox"] { --ic: var(--c-amber-40); } [data-icon="box"] { --ic: var(--c-violet-56); }

/* The bar's own icons, drawn the way a phone draws an app icon: a rounded square
   in the item's colour, with the glyph sitting in it. Until now the top bar's
   buttons were given that treatment at start-up (see modernizeIcons in app.js)
   and the bar's were not, which is why the two ends of the same screen read as
   two different applications — small flat outlines at the bottom, tinted tiles at
   the top. The colour is on the button, so the label can be tinted with it too
   and one item is recognisable by its colour before its text is read.

   The glyph also gained a viewBox, which it had been missing: without one the
   paths were drawn in raw units inside a box too small to hold them, so each one
   was being clipped at its right and bottom edge. */
.nav-btn[data-icon] .nav-ico {
  width: 40px; height: 40px; flex: none; padding: 9px;
  border-radius: var(--rad-13); color: var(--ic); stroke-width: 1.9;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 26%, var(--card)), color-mix(in srgb, var(--ic) 13%, var(--card)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 42%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--ic) 65%, transparent);
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.nav-btn.active[data-icon] .nav-ico {
  transform: none; color: var(--c-white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 88%, var(--c-white)), var(--ic));
  box-shadow: 0 6px 15px -6px var(--ic), inset 0 1px 0 color-mix(in srgb, var(--c-white) 32%, transparent);
}
.nav-btn:active[data-icon] .nav-ico { transform: scale(0.94); }
.nav-btn.active[data-icon] > span { color: var(--ic); }

.nav-btn > i[data-icon] { width: 34px; height: 34px; border-radius: var(--rad-11); color: var(--ic); background: color-mix(in srgb, var(--ic) 13%, transparent); transition: background .15s, color .15s, box-shadow .15s; }
.nav-btn > i[data-icon] .ico { width: 20px; height: 20px; }
.nav-btn.active > i[data-icon] { background: var(--ic); color: var(--c-white); box-shadow: 0 6px 14px -6px var(--ic); transform: none; }
.nav-btn.active { color: var(--txt); }
.ico-btn[data-icon] { color: var(--ic) !important; background: color-mix(in srgb, var(--ic) 12%, var(--card)) !important; border: 1px solid color-mix(in srgb, var(--ic) 26%, transparent) !important; }
.ico-btn[data-icon]:hover { background: color-mix(in srgb, var(--ic) 20%, var(--card)) !important; }
@media (max-width: 1023px) {
  .app-header { padding: 12px 14px !important; gap: 10px; }
  .app-header .app-title { flex: 1; min-width: 0; font-size: 1.05rem; }
  .app-header .app-title #welcomeMsg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .app-header > div:last-child { gap: 6px !important; flex-shrink: 0; }
  .app-header > div:last-child > button { width: 38px !important; height: 38px !important; border-radius: var(--rad-11) !important; padding: 0 !important; }
  .app-header > div:last-child > button .ico { width: 19px; height: 19px; }
  .nav-btn > i[data-icon] { width: 30px; height: 30px; border-radius: var(--rad-10); }
  .nav-btn > i[data-icon] .ico { width: 18px; height: 18px; }
  .nav-btn[data-icon] .nav-ico { width: 36px; height: 36px; padding: 8px; border-radius: var(--rad-12); }
}
@media (max-width: 380px) {
  .app-header > div:last-child { gap: 4px !important; }
  .app-header > div:last-child > button { width: 34px !important; height: 34px !important; }
  .nav-btn[data-icon] .nav-ico { width: 32px; height: 32px; padding: 7px; border-radius: var(--rad-11); }
}
/* ===== v4.5: شاشة تأكيد البريد ===== */
#verifyScreen { position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; padding: 24px; overflow-y: auto;
  --auth-card: var(--c-white); --auth-accent: var(--c-cyan-62);
  background: radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--c-cyan-62) 16%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--c-sky-32) 35%, transparent), transparent 60%), var(--c-sky-10); }
:root[data-theme="dark"] #verifyScreen { --auth-card: var(--c-sky-10-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #verifyScreen { --auth-card: var(--c-sky-10-2); } }
.verify-card { text-align: center !important; }
.verify-card .auth-card-top { justify-content: flex-start; }
.verify-ico { width: 72px; height: 72px; border-radius: var(--rad-22); margin: 6px auto 14px; display: grid; place-items: center; background: var(--pl); color: var(--p); }
.verify-email { font-weight: 900; color: var(--p); font-size: 1rem; margin: -8px 0 14px; word-break: break-all; }
/* ===== v4.4: مخطط الأسنان التشريحي + الأيقونات ===== */
.teeth-arch { direction: ltr; }
.arch-svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; user-select: none; }
.arch-svg .tshape { fill: var(--c-sky-99); stroke: var(--c-blue-65); stroke-width: 1.4; transition: fill .15s, stroke .15s, transform .15s; }
.arch-svg .tgroove { fill: none; stroke: var(--c-sky-84); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.arch-svg .tlabel { font: 800 9.5px 'Noto Sans Arabic', Arial, sans-serif; fill: var(--c-blue-47); pointer-events: none; }
.arch-svg .tooth-g.is-on .tlabel { fill: var(--c-white); }
.arch-svg .tooth-g.is-on .tgroove { stroke: color-mix(in srgb, var(--c-white) 45%, transparent); }
.arch-svg [role="button"] { cursor: pointer; outline: none; }
.arch-svg [role="button"]:hover .tshape { stroke: var(--p); stroke-width: 2.2; }
.arch-svg [role="button"]:focus-visible .tshape { stroke: var(--p); stroke-width: 3; }
.arch-svg .arch-cap { font: 800 11px 'Noto Sans Arabic', Arial, sans-serif; fill: var(--c-blue-65); }
.arch-svg .arch-side { font: 900 12px Arial, sans-serif; fill: var(--c-sky-84); }
.arch-svg .arch-mid { stroke: var(--c-sky-91); stroke-dasharray: 3 4; }
.teeth-arch--view .arch-svg { max-width: 360px; }
.teeth-arch--view .tooth-g:not(.is-on) .tshape { opacity: 0.55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .arch-svg .tshape { fill: var(--c-blue-17); stroke: var(--c-blue-35); } :root:not([data-theme="light"]) .arch-svg .tgroove { stroke: var(--c-blue-27); } }
:root[data-theme="dark"] .arch-svg .tshape { fill: var(--c-blue-17); stroke: var(--c-blue-35); } :root[data-theme="dark"] .arch-svg .tgroove { stroke: var(--c-blue-27); }
.ico { display: block; flex-shrink: 0; }
.nav-btn > i { display: grid; place-items: center; font-style: normal; }
.ico-btn { display: inline-flex !important; align-items: center; justify-content: center; }
.ico-lead { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
/* ===== v4.4: البروفايل بستايل المنصات + الستيكرات ===== */
.sticker-btn { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-10); padding: 6px 12px; font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer; }
.sticker-btn:hover { border-color: var(--p); color: var(--p); }
.sticker-btn--return { border-color: var(--c-amber-65); background: var(--wl); color: var(--c-orange-37); }
.network-card h4 { cursor: pointer; }
.network-card h4:hover { color: var(--p); }
.network-card button[onclick*="openViewProfileModal("] { display: none !important; }
/* ===== A person's page ================================================
   Laid out as people know a profile page from social networks: a wide cover, the photograph
   over its edge with the name beside it, what can be done on the right, and below it "About"
   beside the person's work. One column on a phone. */
#viewProfileModal .modal-content.vp-content { padding: 0 !important; max-width: 920px !important; overflow-x: hidden; text-align: start !important; background: var(--bg); }
.vp-close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; background: color-mix(in srgb, var(--c-white) 90%, transparent) !important; }
.vp-cover { height: 210px; position: relative; overflow: hidden; background: var(--c-cyan-31); }
.vp-cover--lab { background: linear-gradient(135deg, var(--c-cyan-31-2), var(--c-sky-32) 55%, var(--c-blue-33)); }
.vp-cover--doc { background: linear-gradient(135deg, var(--c-blue-48), var(--c-cyan-42)); }
.vp-cover--center { background: linear-gradient(135deg, var(--c-violet-50), var(--c-blue-53)); }
.vp-cover-art { position: absolute; inset: 0; opacity: 0.2; background-image: radial-gradient(circle at 20% 30%, var(--c-white) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, var(--c-white) 0 2px, transparent 3px); background-size: 38px 38px, 52px 52px; }
.vp-cover::after { content: ''; position: absolute; inset-inline-end: -50px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; border: 22px solid color-mix(in srgb, var(--c-white) 12%, transparent); }
.vp-top { display: flex; align-items: flex-end; gap: 18px; padding: 0 28px 18px; background: var(--card); border-bottom: 1px solid var(--bdr); position: relative; }
.vp-avatar { width: 152px; height: 152px; border-radius: 50%; object-fit: cover; border: 5px solid var(--card); background: var(--bg); box-shadow: 0 8px 24px color-mix(in srgb, var(--c-black) 18%, transparent); flex-shrink: 0; margin-top: -76px; position: relative; z-index: 2; }
.vp-id { min-width: 0; flex: 1; padding-top: 14px; }
.vp-id h3 { margin: 0; font-size: 1.75rem; font-weight: 900; color: var(--txt); line-height: 1.25; letter-spacing: -0.3px; }
.vp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.vp-role { color: var(--p); font-weight: 800; font-size: 0.88rem; background: var(--pl); padding: 3px 10px; border-radius: var(--rad-pill); }
.vp-role:empty { display: none; }
.vp-loc { color: var(--txt-m); font-size: 0.85rem; font-weight: 700; }
.vp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--txt-m); font-size: 0.88rem; font-weight: 700; }
.vp-stats b { color: var(--txt); font-weight: 900; font-size: 1rem; }
.vp-stats i { font-style: normal; opacity: 0.6; }
.vp-actions { display: flex; gap: 8px; flex-shrink: 0; padding-bottom: 4px; }
.vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-12); padding: 10px 16px; font: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.vp-btn:hover { border-color: var(--p); }
.vp-btn--primary { background: var(--p); border-color: var(--p); color: var(--c-white); }
.vp-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 16px; padding: 16px; align-items: start; }
.vp-about, .vp-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-18); padding: 16px 18px; }
.vp-about h4 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 900; color: var(--txt); }
.vp-bio p { margin: 0 0 12px; line-height: 1.8; color: var(--txt); text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--bdr); }
.vp-bio-empty { color: var(--txt-m); font-size: 0.85rem; margin-bottom: 12px; padding: 10px; border: 1px dashed var(--bdr); border-radius: var(--rad-12); text-align: center; }
.vp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vp-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--txt); font-weight: 600; line-height: 1.5; }
.vp-facts li > span:first-child { width: 22px; text-align: center; flex-shrink: 0; }
.vp-phone { padding: 0; font-size: inherit; color: inherit; }
.vp-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bdr); }
.vp-social-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: var(--rad-pill); text-decoration: none; color: var(--c-white); font-weight: 800; font-size: 0.82rem; }
.vp-social-link b { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 22%, transparent); display: inline-grid; place-items: center; font-size: 0.85rem; }
.vp-social-link--fb { background: var(--c-sky-52); }
.vp-social-link--ig { background: linear-gradient(135deg, var(--c-orange-56), var(--c-pink-52), var(--c-violet-45)); }
.vp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vp-gallery-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vp-gallery-head strong { font-size: 1.05rem; color: var(--txt); }
.vp-gallery-head span { font-size: 0.78rem; color: var(--txt-m); font-weight: 800; }
.vp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--txt-m); font-weight: 700; padding: 40px 16px; }
.vp-empty span:first-child { font-size: 2rem; opacity: 0.6; }
#vpVideoBox { padding: 0; }
@media (max-width: 760px) {
  .vp-cover { height: 150px; }
  .vp-top { flex-direction: column; align-items: center; text-align: center; padding: 0 16px 16px; gap: 10px; }
  .vp-avatar { width: 128px; height: 128px; margin-top: -64px; }
  .vp-id { padding-top: 0; }
  .vp-id h3 { font-size: 1.45rem; }
  .vp-sub, .vp-stats { justify-content: center; }
  .vp-actions { width: 100%; }
  .vp-actions .vp-btn { flex: 1; }
  .vp-body { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
}

/* ===== v4.3: لوحة المطوّر — التقسيم والفوترة ===== */
.dev-seg { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.dev-seg-btn { border: 1px solid var(--bdr); background: var(--card); color: var(--txt-m); border-radius: var(--rad-pill); padding: 8px 14px; font: inherit; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
.dev-seg-btn b { background: var(--bg); border-radius: var(--rad-pill); padding: 1px 8px; margin-inline-start: 4px; color: var(--txt); }
.dev-seg-btn.active { background: var(--p); border-color: var(--p); color: var(--c-white); }
.dev-seg-btn.active b { background: color-mix(in srgb, var(--c-white) 25%, transparent); color: var(--c-white); }
.dev-seg-btn.is-alert:not(.active) { border-color: var(--d); color: var(--d); }
.bill-box { margin-top: 14px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 14px 16px; }
.bill-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.bill-head h4 { margin: 0; color: var(--txt); font-size: 0.98rem; }
.bill-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bill-stats > div { background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-12); padding: 8px 10px; }
.bill-stats span { display: block; font-size: 0.7rem; color: var(--txt-m); font-weight: 700; }
.bill-stats b { font-size: 0.95rem; color: var(--txt); font-variant-numeric: tabular-nums; }
.bill-stats .is-disc { background: var(--discl); border-color: var(--disc-b); } .bill-stats .is-disc b { color: var(--disc); }
.bill-stats .is-ok b { color: var(--s); } .bill-stats .is-due b { color: var(--c-orange-37); }
.bill-stats .is-late { background: var(--dl); border-color: var(--c-red-89); } .bill-stats .is-late b { color: var(--d); }
.bill-badge { display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: var(--rad-pill); white-space: nowrap; }
.bill-late { background: var(--dl); color: var(--d); } .bill-ok { background: var(--sl); color: var(--s); } .bill-next { background: var(--pl); color: var(--p); }
.bill-table td, .bill-table th { padding: 8px 10px; }
.bill-table tbody tr { cursor: default; }
.bill-act { border: 1px solid var(--s); background: var(--sl); color: var(--s); border-radius: var(--rad-10); padding: 4px 10px; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.bill-act.undo { border-color: var(--bdr); background: var(--bg); color: var(--txt-m); }
.bill-form { margin-top: 12px; border-top: 1px dashed var(--bdr); padding-top: 10px; }
.bill-form summary { cursor: pointer; font-weight: 800; color: var(--p); padding: 4px 0; }
.bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.bill-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; font-weight: 800; color: var(--txt-m); }
.bill-grid .search-input { padding: 9px 10px; }
.bill-due { display: block; font-size: 0.72rem; font-weight: 700; color: var(--txt-m); text-align: end; }
.bill-preview { background: var(--bg); border-radius: var(--rad-10); padding: 8px 12px; font-size: 0.85rem; margin-bottom: 10px; min-height: 1em; }
@media screen and (min-width: 1024px) { #devUserDetailsModal .modal-content { max-width: 860px !important; } .dev-box { max-width: 1280px !important; } }
/* ===================================================================
   واجهة الكمبيوتر (قائمة جانبية + مساحة عمل عريضة)
   يجب أن تبقى آخر الأنماط لتتغلب على أنماط الموبايل
   =================================================================== */
@media screen and (min-width: 1024px) {
  body { padding: 0 !important; background-attachment: fixed; }
  #appMainWrapper { padding-right: var(--sidebar-space); min-height: 100vh; }
  .desktop-only { display: revert !important; }
  .btn-view-toggle.desktop-only { display: block !important; }

  /* القائمة الجانبية */
  .nav-bar { position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important; width: 252px; max-width: none; margin: 0; flex-direction: column; justify-content: flex-start !important; gap: 2px; border-radius: 0; border: none; border-left: 1px solid var(--bdr); padding: 18px 14px 14px; overflow-y: auto; scroll-snap-type: none; box-shadow: none; background: var(--card); backdrop-filter: blur(20px); }
  /* The sidebar is a row: the icon at the start, and the label in a column of its
     own. The label is given the remaining width rather than being sized to its
     content, because a content-sized label starts at a different place for every
     label and the column ends up with a ragged edge — which is what reads as text
     sitting wrongly beside the icon. */
  .nav-btn { position: relative; flex: none !important; width: 100%; min-width: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 11px 14px; font-size: 0.92rem; font-weight: 700; border-radius: var(--rad-12); margin: 0; }
  .nav-btn > span { flex: 1 1 auto; width: auto; min-width: 0; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
  .nav-ico { width: 20px; height: 20px; flex: 0 0 20px; }
  /* The bar becomes a column here, so the tiles are sized down a little: at 40px
     twelve items no longer fit beside one another without the bar having to
     scroll, and a sidebar that scrolls hides items that exist. */
  .nav-btn[data-icon] .nav-ico { width: 36px; height: 36px; padding: 8px; border-radius: var(--rad-12); }
  .nav-btn { padding: 9px 12px; gap: 11px; }
  .nav-btn:hover { background: var(--bg); color: var(--txt); }
  .nav-btn:active { transform: none; }
  .nav-btn.active { background: var(--pl); color: var(--p); font-weight: 900; }
  .nav-btn.active .nav-ico { transform: none; }
  /* The marker on the leading edge, drawn as an element rather than an inset
     shadow. An inset shadow at the edge of a rounded box produced a dark curved
     band that read as a rendering fault, and a negative horizontal offset points
     at a physical side, which is the wrong side in a right-to-left document. */
  .nav-btn.active::before {
    content: ''; position: absolute; inset-block: 9px; inset-inline-start: 0;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--p);
  }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--bdr); cursor: pointer; border-radius: var(--rad-12); }
  .side-brand:hover .side-logo { background: var(--p); color: var(--c-white); }
  .side-logo { width: 42px; height: 42px; border-radius: var(--rad-12); background: var(--pl); color: var(--p); display: grid; place-items: center; flex-shrink: 0; }
  .side-brand strong { display: block; font-size: 0.95rem; font-weight: 900; color: var(--txt); }
  .side-brand .app-version-label { font-size: 0.7rem; color: var(--txt-m); font-weight: 700; }
  .side-user { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--rad-14); border: 1px solid var(--bdr); background: var(--bg); cursor: pointer; text-align: right; width: 100%; font: inherit; color: var(--txt); }
  .side-user:hover { border-color: var(--p); }
  .side-avatar { width: 36px; height: 36px; border-radius: var(--rad-10); overflow: hidden; display: grid; place-items: center; background: var(--pl); flex-shrink: 0; font-size: 1.1rem; }
  .side-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .side-user-txt { min-width: 0; display: flex; flex-direction: column; }
  .side-user-txt strong { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-user-txt small { color: var(--txt-m); font-size: 0.72rem; }

  /* الشريط العلوي */
  .app-header { position: sticky; top: 0 !important; border-radius: 0; padding: 14px 32px; box-shadow: none; }
  .app-header .app-title { display: none; }
  .page-title { display: block; margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--txt); letter-spacing: -0.3px; }
  .content-area { max-width: 1480px; padding: 24px 32px 40px; margin: 0; }
/* The sidebar reserves nothing along the bottom, and it takes the padding the
   bottom bar needed. */
#appMainWrapper { padding-bottom: 0; }

  /* الرئيسية: أرقام بسطر + الرسم والحسابات جنب بعض */
  #dashboardTab.active { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 20px 24px; align-items: start; }
  #dashboardTab > .btn-quick-order { grid-column: 1 / -1; width: auto; justify-self: start; margin: 0; padding: 13px 26px; font-size: 1rem; border-radius: var(--rad-16); }
  #dashboardTab > .dashboard-grid { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
  #dashboardTab > .dashboard-grid .dash-card { margin: 0; }
  #dashboardTab > #dashChartContainer { grid-column: 1; grid-row: span 2; margin: 0 !important; }
  #dashboardTab > .financial-info { grid-column: 2; margin: 0 !important; }

  /* الطلبيات: شريط أدوات بسطر واحد */
  #ordersTab .action-grid { display: flex; gap: 10px; margin-bottom: 14px; }
  #accountsTab > .btn-pay { width: auto; padding: 11px 22px; }
  #ordersContainer[data-view="groups"] { grid-auto-columns: minmax(270px, 1fr); }
  #ordersTab .action-grid > button { width: auto; padding: 11px 20px; }
  #ordersTab .filter-card { display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; padding: 12px; }
  #ordersTab .filter-card > div:first-child { margin: 0 !important; }
  #ordersTab .filter-card .view-toggle-bar { margin: 0; }
  #ordersTab .search-input { padding: 11px 14px; }
  #ordersContainer[data-view="cards"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
  #ordersContainer[data-view="cards"] .case-card { margin: 0; }
  /* حسب المرحلة: لوحة أعمدة */
  #ordersContainer[data-view="groups"] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 14px; overflow-x: auto; align-items: start; padding-bottom: 8px; }
  #ordersContainer[data-view="groups"] .group-section { margin: 0; max-height: calc(100vh - 230px); overflow-y: auto; }
  #ordersContainer[data-view="groups"] .group-header { position: sticky; top: 0; z-index: 1; }

  /* قوائم البطاقات: شبكة */
  #accountsReportContainer, #checksListContainer, #networkContainer, #employeesContainer, #patientsListContainer, #patientDoctorsContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
  #accountsReportContainer > *, #checksListContainer > *, #networkContainer > *, #employeesContainer > *, #patientsListContainer > *, #patientDoctorsContainer > * { margin-bottom: 0 !important; }
  #accountsReportContainer > :not(.account-card), #checksListContainer > :not(.check-card), #networkContainer > :not(.network-card):not(.account-card), #employeesContainer > :not(.network-card):not(.account-card):not(.group-item), #patientsListContainer > :not(.network-card):not(.group-item), #patientDoctorsContainer > :not(.network-card) { grid-column: 1 / -1; }
  .checks-stats, #checksTab .filter-card, #archiveTab .filter-card { max-width: 900px; }

  /* النوافذ */
  .modal { align-items: center !important; justify-content: center; padding: 24px; }
  .modal .modal-content { border-radius: var(--rad-20) !important; max-height: 86vh !important; width: 94% !important; max-width: 720px !important; padding: 24px 28px !important; transform: translateY(16px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; box-shadow: 0 24px 70px color-mix(in srgb, var(--c-black) 28%, transparent) !important; }
  .modal.active .modal-content { transform: none !important; opacity: 1; }
  .modal-top-header { position: sticky; top: -24px; z-index: 2; background: var(--card); }
  #orderModal .modal-content { max-width: 900px !important; }
  #settingsModal .modal-content { max-width: 960px !important; }
  #settingsModal .settings-body { columns: 2; column-gap: 14px; }
  #settingsModal .settings-body > div { break-inside: avoid; }
  #settingsModal .settings-body > div:first-child { column-span: all; }
  #labLedgerModal .modal-content, #accountCasesModal .modal-content { max-width: 900px !important; }
  /* تفاصيل الطلبية: لوحة جانبية تبقي القائمة ظاهرة */
  #orderDetailModal { justify-content: flex-end !important; align-items: stretch !important; padding: 0 !important; background: color-mix(in srgb, var(--c-blue-11) 32%, transparent); }
  #orderDetailModal .modal-content { width: min(800px, 62vw) !important; max-width: none !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 var(--rad-22) var(--rad-22) 0 !important; transform: translateX(-28px) !important; }
  #orderDetailModal.active .modal-content { transform: none !important; }
  /* المحادثات */
  #chatThreadModal .modal-content { height: 78vh !important; max-height: 78vh !important; }
  #messagesModal .modal-content { max-width: 1100px !important; height: 82vh !important; max-height: 82vh !important; display: flex; flex-direction: column; overflow: hidden !important; }
  #messagesModal .chat-shell { display: flex; gap: 14px; flex: 1; min-height: 0; }
  #messagesModal .chat-list-pane { width: 340px; flex-shrink: 0; overflow-y: auto; padding-left: 12px; border-left: 1px solid var(--bdr); }
  #messagesModal .chat-thread-pane { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  #messagesModal .chat-thread-pane .modal-top-header { position: static; }
  /* لوحة المراسل */
  #courierScreen .content-area, #courierScreen > div { max-width: 1200px; margin-left: auto; margin-right: auto; }
}
@media screen and (min-width: 1500px) {
  #ordersContainer[data-view="cards"] { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

/* البحث الشامل في بيانات الحساب */
.global-search-launch {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
  border: 1px solid var(--bdr);
  border-radius: var(--rad-18);
  background: linear-gradient(135deg, var(--card), var(--pl));
  color: var(--txt);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.global-search-launch:hover { transform: translateY(-1px); border-color: var(--c-sky-74); box-shadow: var(--shadow-md); }
.global-search-launch:active { transform: scale(.995); }
.global-search-launch-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rad-14); background: var(--p); color: var(--c-white); font-size: 1.25rem;
}
.global-search-launch-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.global-search-launch-copy strong { font-size: .95rem; font-weight: 900; }
.global-search-launch-copy small { color: var(--txt-m); font-size: .72rem; font-weight: 600; }
.global-search-shortcut {
  flex: 0 0 auto; padding: 5px 9px; border-radius: var(--rad-9);
  background: var(--bg); border: 1px solid var(--bdr); color: var(--txt-m);
  font-size: .68rem; font-weight: 800; direction: ltr;
}
.global-search-modal { max-width: 820px !important; width: 94% !important; }
.global-search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 0 14px;
  border: 1px solid var(--bdr); border-radius: var(--rad-15); background: var(--bg);
}
.global-search-input-wrap:focus-within { border-color: var(--p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sky-32) 10%, transparent); }
.global-search-input-wrap > span { font-size: 1.05rem; }
.global-search-input-wrap input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 14px 0; color: var(--txt); font: inherit; font-weight: 700;
}
.global-search-meta { min-height: 20px; padding: 10px 2px 6px; color: var(--txt-m); font-size: .72rem; font-weight: 700; }
.global-search-results { max-height: min(62vh, 560px); overflow-y: auto; padding: 2px 2px 8px; }
.global-search-group + .global-search-group { margin-top: 14px; }
.global-search-group-title {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; margin-bottom: 6px;
  color: var(--type-color); font-size: .76rem; font-weight: 900;
  border-bottom: 1px solid var(--bdr);
}
.global-search-result {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px; margin: 0; border: 0; border-radius: var(--rad-13);
  background: transparent; color: var(--txt); text-align: start; cursor: pointer;
}
.global-search-result:hover, .global-search-result:focus-visible { background: color-mix(in srgb, var(--type-color) 9%, var(--card)); outline: none; }
.global-search-result-icon {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rad-11); background: color-mix(in srgb, var(--type-color) 12%, var(--card)); font-size: 1rem;
}
.global-search-result-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.global-search-result-copy strong { font-size: .84rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-copy small { color: var(--txt-m); font-size: .71rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-meta { flex: 0 0 auto; max-width: 130px; color: var(--type-color); font-size: .68rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-empty { padding: 42px 18px; text-align: center; color: var(--txt-m); font-weight: 800; }
/* the search's microphone and «هل تقصد» (did-you.js) */
.global-search-mic { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--p); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.global-search-mic .fx-i { width: 20px; height: 20px; }
.global-search-mic.is-listening { background: var(--dl); color: var(--d); animation: ai-pulse 1.2s ease-in-out infinite; }
.global-search-did { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; color: var(--txt); }
.global-search-did-name { border: 1px solid var(--bdr); border-radius: var(--rad-15); background: var(--card, var(--bg)); color: var(--p); font: inherit; font-weight: 900; padding: 8px 14px; cursor: pointer; }
@media screen and (max-width: 640px) {
  .global-search-launch { padding: 13px; border-radius: var(--rad-15); }
  .global-search-launch-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .global-search-shortcut { display: none; }
  .global-search-modal { max-height: 92vh !important; padding: 18px !important; }
  .global-search-results { max-height: 64vh; }
  .global-search-result-meta { display: none; }
}

/* قالب العلاجات الموحد والاختصارات الإنجليزية */
.treatment-abbr {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 2px 7px; margin-inline-end: 6px;
  border-radius: var(--rad-7); background: var(--pl); color: var(--p);
  border: 1px solid var(--c-sky-74); font-size: .7rem; font-weight: 900;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap; letter-spacing: .3px;
}
.treatment-template-modal { max-width: 1000px !important; }
.treatment-template-filters { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, .4fr); gap: 10px; margin-top: 14px; }
.treatment-template-note { margin-top: 10px; padding: 9px 12px; border-radius: var(--rad-11); background: var(--bg); color: var(--txt-m); font-size: .72rem; line-height: 1.6; border: 1px solid var(--bdr); }
.treatment-template-note b { direction: ltr; unicode-bidi: isolate; }
.treatment-template-stats { padding: 10px 2px 6px; color: var(--txt-m); font-size: .72rem; font-weight: 800; }
.treatment-template-list { max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px 3px 8px; }
.treatment-template-group { margin-top: 10px; font-size: .78rem; font-weight: 900; color: var(--p); border-bottom: 1px solid var(--bdr); padding: 6px 4px; }
.treatment-template-row { display: grid; grid-template-columns: 26px 62px minmax(180px, 1fr) 92px 92px 92px; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid var(--bdr); border-radius: var(--rad-11); background: var(--bg); }
.treatment-template-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--p); }
.treatment-template-row .tpl-code { font-size: .62rem; color: var(--txt-m); direction: ltr; unicode-bidi: isolate; }
.treatment-template-row .tpl-name { font-size: .78rem; font-weight: 700; color: var(--txt); unicode-bidi: plaintext; }
.treatment-template-row input[type="number"] { width: 100%; padding: 6px 8px; border-radius: var(--rad-8); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font: inherit; }
.treatment-template-row.is-present { border-color: var(--c-sky-74); background: color-mix(in srgb, var(--pl) 45%, var(--card)); }
.treatment-option-label { display: flex; align-items: center; min-width: 0; }
.treatment-option-label .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (max-width: 760px) {
  .treatment-template-filters { grid-template-columns: 1fr; }
  .treatment-template-row { grid-template-columns: 26px 58px minmax(0, 1fr); }
  .treatment-template-row .tpl-name { grid-column: 3; }
  .treatment-template-row input[type="number"] { grid-column: span 1; width: 100%; }
  .treatment-template-row .tpl-code { display: none; }
  .treatment-template-list { max-height: 60vh; }
}


/* ===== The laboratory's wall screen (lab-wall.js) =====
   Read from across the room: big type, high contrast, one large button per case. */
.lab-wall .wall-card { cursor: pointer; }
.lab-wall .wall-more { opacity: .7; font-size: .8em; margin-inline-start: 8px; text-decoration: underline; }
.lab-wall { position: fixed; inset: 0; z-index: 999990; display: none; flex-direction: column; background: var(--w-bg); color: var(--w-txt); font-family: inherit; }
body.wall-open { overflow: hidden; }
.lab-wall .wall-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; background: var(--w-head); border-bottom: 2px solid var(--w-tool); }
.lab-wall .wall-title { font-size: 1.6rem; font-weight: 900; }
.lab-wall .wall-counts { display: flex; gap: 14px; margin-top: 4px; font-size: 1.05rem; font-weight: 800; color: var(--w-sub); }
.lab-wall .wall-counts .p { color: var(--c-amber-56); }
.lab-wall .wall-head-end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lab-wall .wall-head { gap: 16px; }
.lab-wall .wall-find { flex: 1 1 320px; max-width: 620px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.lab-wall .wall-find svg { position: absolute; inset-inline-start: 16px; width: 22px; height: 22px; color: var(--w-faint); pointer-events: none; }
.lab-wall .wall-find input { width: 100%; min-width: 0; background: var(--w-input); color: var(--w-txt); border: 1.5px solid var(--w-tool-bd); border-radius: var(--rad-16); padding: 14px 16px; padding-inline-start: 50px; font-size: 1.1rem; font-family: inherit; font-weight: 700; }
.lab-wall .wall-find input:focus { outline: none; border-color: var(--w-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-sky-60) 18%, transparent); }
.lab-wall .wall-find input::placeholder { color: var(--w-faint); font-weight: 600; }
.lab-wall .wall-tool { width: 52px; height: 52px; background: var(--w-tool); color: var(--w-txt2); border: 1px solid var(--w-tool-bd); border-radius: var(--rad-16); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.lab-wall .wall-tool svg { width: 26px; height: 26px; }
.lab-wall .wall-tool:hover { border-color: var(--w-accent); color: var(--c-white); }
.lab-wall .wall-tool--ai { background: linear-gradient(135deg, var(--c-cyan-42), var(--c-blue-67)); color: var(--c-white); border-color: transparent; }
.lab-wall .wall-tool--ai:hover { filter: brightness(1.1); }
.lab-wall .wall-tool.is-busy { cursor: progress; color: var(--w-accent); }
.lab-wall .wall-tool.is-busy svg { animation: wall-spin .9s linear infinite; }
@keyframes wall-spin { to { transform: rotate(360deg); } }
.lab-wall .wall-search { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--c-blue-5) 60%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 10px 16px 16px; }
.lab-wall .wall-search-top span { flex: 1; align-self: center; color: var(--w-mute); font-weight: 800; }
@media (max-width: 1100px) { .lab-wall .wall-head { flex-wrap: wrap; row-gap: 12px; } .lab-wall .wall-title { white-space: nowrap; } .lab-wall .wall-find { order: 3; flex-basis: 100%; max-width: none; } }
@media (max-width: 600px) { .lab-wall .wall-head { padding: 12px; } .lab-wall .wall-clock { font-size: 1.4rem; } .lab-wall .wall-tool, .lab-wall .wall-size { width: 42px; height: 42px; } .lab-wall .wall-head-end { gap: 6px; } }
.lab-wall .wall-search[hidden] { display: none; }
.lab-wall .wall-search-box { width: min(760px, 100%); max-height: calc(100vh - 100px); display: flex; flex-direction: column; background: var(--w-input); border: 1px solid var(--w-tool-bd); border-radius: var(--rad-20); overflow: hidden; box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 50%, transparent); }
.lab-wall .wall-search-top { display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--w-tool); }
.lab-wall .wall-search-top input { flex: 1; min-width: 0; background: var(--c-blue-5); color: var(--w-txt); border: 1px solid var(--w-tool-bd); border-radius: var(--rad-12); padding: 12px 14px; font-size: 1.15rem; font-family: inherit; }
.lab-wall .wall-search-results { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lab-wall .wall-search-hint { padding: 22px; text-align: center; color: var(--w-mute); font-weight: 700; }
.lab-wall .wall-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: start; background: var(--w-card); color: var(--w-txt); border: 1px solid var(--w-line); border-radius: var(--rad-14); padding: 12px 14px; cursor: pointer; font-family: inherit; }
.lab-wall .wall-result:hover { border-color: var(--w-accent); }
.lab-wall .wall-result.is-reimp { border-color: var(--c-violet-65); background: var(--c-violet-17); }
.lab-wall .wall-result.is-cancelled { opacity: .55; }
.lab-wall .wall-result-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lab-wall .wall-result-main b { font-size: 1.15rem; }
.lab-wall .wall-result small { color: var(--w-mute); font-size: .82rem; }
.lab-wall .wall-result-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; font-weight: 800; font-size: .85rem; color: var(--w-sub); }
/* The assistant answers over the wall, from the wall's own button. */
body.wall-open .ai-assistant { z-index: 999995; }
body.wall-open .ai-launcher:not(.is-open) { display: none; }

.lab-wall .wall-clock { font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.lab-wall .wall-exit { background: transparent; color: var(--w-mute); border: 1px solid var(--w-tool-bd); border-radius: var(--rad-12); padding: 10px 16px; font-size: 1rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.lab-wall .wall-body { flex: 1; overflow-y: auto; padding: 18px; }
/* The cases, and beside them the box of the ready ones -- one colour of its own, always there. */
.lab-wall .wall-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.lab-wall .wall-cases { min-width: 0; }
.lab-wall .wall-ready { position: sticky; top: 0; background: var(--c-teal-10); border: 2px solid var(--c-teal-39); border-radius: var(--rad-20); padding: 14px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-teal-39) 18%, transparent); max-height: calc(100vh - 140px); overflow-y: auto; }
.lab-wall .wall-ready-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.2rem; font-weight: 900; color: var(--c-teal-67); margin-bottom: 10px; }
.lab-wall .wall-ready-head span { min-width: 34px; height: 34px; border-radius: var(--rad-pill); background: var(--c-teal-39); color: var(--c-teal-9); display: inline-grid; place-items: center; font-size: 1.05rem; padding: 0 8px; }
.lab-wall .wall-ready-row { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--rad-14); background: var(--c-teal-16); margin-bottom: 8px; }
.lab-wall .wall-ready-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; background: none; border: none; color: var(--c-teal-96); cursor: pointer; font-family: inherit; padding: 0; }
.lab-wall .wall-ready-who b { font-size: 1.2rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-wall .wall-ready-who span { font-size: .9rem; color: var(--c-teal-80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-wall .wall-ready-go { flex-shrink: 0; background: var(--c-teal-39); color: var(--c-teal-9); border: none; border-radius: var(--rad-12); padding: 12px 14px; font-size: 1rem; font-weight: 900; cursor: pointer; font-family: inherit; }
.lab-wall .wall-ready-go:hover { background: var(--c-teal-52); }
.lab-wall .wall-ready-empty { color: var(--c-teal-67); opacity: .75; text-align: center; padding: 18px 6px; font-weight: 700; }
@media (max-width: 900px) { .lab-wall .wall-layout { grid-template-columns: 1fr; } .lab-wall .wall-ready { position: static; order: -1; max-height: none; } }
/* Small, medium, large. */
.lab-wall .wall-sizes { display: inline-flex; background: var(--w-tool); border: 1px solid var(--w-tool-bd); border-radius: var(--rad-16); padding: 3px; gap: 2px; }
.lab-wall .wall-size { width: 44px; height: 44px; border: none; border-radius: var(--rad-12); background: transparent; color: var(--w-mute); cursor: pointer; display: inline-grid; place-items: center; }
.lab-wall .wall-size svg { width: 20px; height: 20px; }
.lab-wall .wall-size.is-active { background: var(--w-accent); color: var(--w-bg); }
/* Small: as many as fit, for a wall with a long list -- the name and the button, a line for the work. */
.lab-wall.wall-size-s .wall-grid { grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 6px; }
.lab-wall.wall-size-s .wall-card { padding: 7px 8px; gap: 3px; border-radius: var(--rad-12); border-width: 1.5px; }
.lab-wall.wall-size-s .wall-card-top { gap: 4px; }
.lab-wall.wall-size-s .wall-name { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-wall.wall-size-s .wall-details { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--w-sub); }
.lab-wall.wall-size-s .wall-doctor, .lab-wall.wall-size-s .wall-more, .lab-wall.wall-size-s .wall-step, .lab-wall.wall-size-s .wall-star-txt { display: none; }
.lab-wall.wall-size-s .wall-go { font-size: .8rem; padding: 5px; border-radius: var(--rad-9); min-height: 34px; }
.lab-wall.wall-size-s .wall-star { font-size: .7rem; padding: 2px 7px; border-width: 1.5px; }
.lab-wall.wall-size-s .wall-due { font-size: .7rem; }
.lab-wall.wall-size-s .wall-reimp { font-size: .7rem; padding: 4px 6px; border-radius: var(--rad-8); }
.lab-wall.wall-size-s .wall-reimp small { display: none; }
/* Large is the wall's own layout, as the cards were before sizes existed. */
/* The change between sizes, as a short cross-fade (see setSize). */
.lab-wall .wall-body.is-resized .wall-layout { animation: wall-resized .2s ease-out; }
@keyframes wall-resized { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lab-wall .wall-body.is-resized .wall-layout { animation: none; } }
/* Medium (what small was): the essentials only -- the name, the work, the date, the button. */
.lab-wall.wall-size-m .wall-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px; }
.lab-wall.wall-size-m .wall-card { padding: 9px 10px; gap: 4px; border-radius: var(--rad-14); }
.lab-wall.wall-size-m .wall-name { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-wall.wall-size-m .wall-details { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--w-sub); }
.lab-wall.wall-size-m .wall-doctor, .lab-wall.wall-size-m .wall-more { display: none; }
.lab-wall.wall-size-m .wall-step { font-size: .8rem; }
.lab-wall.wall-size-m .wall-go { font-size: .9rem; padding: 8px; border-radius: var(--rad-10); min-height: 44px; }
.lab-wall.wall-size-m .wall-star { font-size: .75rem; padding: 3px 9px; }
.lab-wall.wall-size-m .wall-due { font-size: .78rem; }
.lab-wall.wall-size-m .wall-star-txt { display: none; }
.lab-wall .wall-due { white-space: nowrap; }
.lab-wall.wall-size-m .wall-reimp { font-size: .8rem; padding: 6px 8px; }
/* The locked exit. */
.lab-wall .wall-exit-lock svg { width: 16px; height: 16px; vertical-align: -2px; margin-inline-end: 4px; }
.lab-wall .wall-pin { position: absolute; inset: 0; z-index: 8; background: color-mix(in srgb, var(--c-blue-5) 88%, transparent); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lab-wall .wall-pin[hidden] { display: none; }
.lab-wall .wall-pin-box { width: min(360px, 100%); background: var(--w-input); border: 1px solid var(--w-tool-bd); border-radius: var(--rad-24); padding: 22px; text-align: center; box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 50%, transparent); }
.lab-wall .wall-pin-ico svg { width: 38px; height: 38px; color: var(--w-accent); }
.lab-wall .wall-pin-box h3 { margin: 6px 0 14px; font-size: 1.25rem; font-weight: 900; }
.lab-wall .wall-pin-dots { height: 26px; display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--w-faint); }
.lab-wall .wall-pin-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--w-accent); display: inline-block; }
.lab-wall .wall-pin-msg { min-height: 22px; margin: 6px 0 10px; color: var(--c-red-71); font-weight: 800; font-size: .92rem; }
.lab-wall .wall-pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; direction: ltr; }
.lab-wall .wall-pin-key { height: 62px; border-radius: var(--rad-16); border: 1px solid var(--w-tool-bd); background: var(--w-tool); color: var(--w-txt); font-size: 1.6rem; font-weight: 900; cursor: pointer; font-family: inherit; }
.lab-wall .wall-pin-key:active { background: var(--w-tool-bd); }
.lab-wall .wall-pin-key.is-ok { background: var(--c-teal-39); color: var(--c-teal-9); border-color: var(--c-teal-39); }
.lab-wall .wall-pin-cancel { margin-top: 14px; background: transparent; border: none; color: var(--w-mute); font-weight: 800; font-size: 1rem; cursor: pointer; font-family: inherit; }
.lab-wall .wall-group { font-size: 1.1rem; font-weight: 900; color: var(--w-sub); margin: 6px 0 10px; }
.lab-wall .wall-grid + .wall-group { margin-top: 22px; }
.lab-wall .wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.lab-wall .wall-card { background: var(--w-card); border: 2px solid var(--w-line); border-radius: var(--rad-20); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.lab-wall .wall-card.is-priority { border-color: var(--c-orange-50); background: var(--c-amber-11); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-orange-50) 25%, transparent); }
.lab-wall .wall-card.is-late { border-color: var(--c-red-60); }
.lab-wall .wall-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lab-wall .wall-star { background: transparent; color: var(--w-mute); border: 2px solid var(--w-tool-bd); border-radius: var(--rad-pill); padding: 6px 14px; font-size: 1rem; font-weight: 900; cursor: pointer; font-family: inherit; }
.lab-wall .wall-star.on { background: var(--c-orange-50); color: var(--c-amber-5); border-color: var(--c-orange-50); }
.lab-wall .wall-due { font-size: 1rem; font-weight: 800; color: var(--w-sub); }
.lab-wall .wall-due.soon { color: var(--c-amber-56); }
.lab-wall .wall-due.late { color: var(--c-red-71); }
.lab-wall .wall-name { font-size: 1.9rem; font-weight: 900; line-height: 1.2; }
.lab-wall .wall-details { font-size: 1.2rem; font-weight: 700; color: var(--w-txt2); }
.lab-wall .wall-doctor { font-size: 1rem; color: var(--w-mute); }
.lab-wall .wall-step { font-size: 1.05rem; font-weight: 800; color: var(--c-sky-74); }
.lab-wall .wall-go { margin-top: auto; width: 100%; min-height: 72px; border: none; border-radius: var(--rad-16); background: var(--w-accent2); color: var(--c-white); font-size: 1.35rem; font-weight: 900; cursor: pointer; font-family: inherit; }
.lab-wall .wall-go:active { transform: scale(.98); background: var(--c-sky-39); }
.lab-wall .wall-empty { text-align: center; font-size: 1.8rem; font-weight: 900; color: var(--w-mute); padding: 80px 20px; }
.lab-wall .wall-undo { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: var(--w-txt); color: var(--w-bg); border-radius: var(--rad-16); padding: 12px 16px; font-size: 1.1rem; font-weight: 800; box-shadow: 0 10px 30px color-mix(in srgb, var(--c-black) 40%, transparent); max-width: calc(100% - 32px); }
.lab-wall .wall-undo button { background: var(--w-bg); color: var(--c-white); border: none; border-radius: var(--rad-12); padding: 12px 20px; font-size: 1.1rem; font-weight: 900; cursor: pointer; font-family: inherit; }
@media (max-width: 1023px) {
  .wall-launch.wall-launch { bottom: calc(18px + var(--navbar-space, 96px)); width: 52px; height: 52px; padding: 0 !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  .wall-launch .wall-launch-txt { display: none; }
}
.wall-launch svg { width: 22px; height: 22px; vertical-align: middle; }
.wall-launch { display: inline-flex; align-items: center; gap: 8px; }
.wall-launch { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 900; background: var(--c-blue-8); color: var(--c-white); border: none; border-radius: var(--rad-pill); padding: 12px 18px; font-size: .95rem; font-weight: 900; box-shadow: 0 8px 20px color-mix(in srgb, var(--c-black) 25%, transparent); cursor: pointer; font-family: inherit; }
@media (max-width: 600px) { .lab-wall .wall-name { font-size: 1.5rem; } .lab-wall .wall-clock { font-size: 1.4rem; } .lab-wall .wall-title { font-size: 1.2rem; } }

/* ===== The landing, simply =============================================
   A hero over a photograph, the audiences as plain tabs with one photograph in the open panel,
   and the four steps. Built on the landing above (tabs, panels, steps), which still carries its
   behaviour; this block is the look. Photographs: src/images/landing (CC0). */
.auth-brand.mk-hero { display: block; position: relative; overflow: hidden; border-radius: var(--rad-26); min-height: 420px; color: var(--c-white); isolation: isolate; box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c-black) 55%, transparent); }
.mk-hero-media { position: absolute; inset: 0; z-index: -2; }
.mk-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, color-mix(in srgb, var(--c-sky-8) 86%, transparent) 0%, color-mix(in srgb, var(--c-sky-12) 62%, transparent) 55%, color-mix(in srgb, var(--c-sky-32) 28%, transparent) 100%); }
.mk-hero-copy { position: relative; padding: 34px 32px 40px; }
.mk-brand-row .brand-word--hero { font-size: 1.7rem !important; }
.mk-eyebrow { display: inline-block; margin: 18px 0 10px; padding: 6px 12px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-cyan-62) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan-62) 40%, transparent); color: var(--c-cyan-79); font-size: .8rem; font-weight: 800; }
.mk-hero-title { margin: 0 0 14px; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.3; font-weight: 900; letter-spacing: -.5px; color: var(--c-white); max-width: 20ch; }
.mk-hero-lede { margin: 0 0 22px; font-size: 1rem; line-height: 1.9; color: color-mix(in srgb, var(--c-cyan-95) 90%, transparent); max-width: 46ch; }
.mk-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--rad-14); font: inherit; font-size: .95rem; font-weight: 900; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, background .15s ease; }
.mk-btn:hover { transform: translateY(-1px); }
.mk-btn:focus-visible { outline: 3px solid var(--c-cyan-62); outline-offset: 2px; }
.mk-btn--primary { background: linear-gradient(135deg, var(--c-cyan-42), var(--c-sky-32)); color: var(--c-white); }
.mk-btn--ghost { background: color-mix(in srgb, var(--c-white) 8%, transparent); color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 35%, transparent); }

/* sections */
.mk-section-title { margin: 8px 0 6px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 900; color: var(--txt); letter-spacing: -.3px; }
.mk-section-lede { margin: 0 0 16px; font-size: .95rem; line-height: 1.85; color: var(--txt-m); max-width: 70ch; }
#lpSteps, #lpPanels { scroll-margin-top: 16px; }

/* the audiences: plain pills, one photograph in the open panel */
.lp-panels { margin: 8px 0 30px; }
.lp-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: none; margin-bottom: 14px; }
.lp-tab { margin: 0; padding: 9px 15px; border: 1.5px solid var(--bdr); border-radius: var(--rad-pill); background: var(--card, var(--c-white)); color: var(--txt); transition: border-color .15s ease, background .15s ease; }
.lp-tab:hover { border-color: var(--p); }
.lp-tab[aria-selected="true"] { border-color: var(--p); background: var(--p); color: var(--c-white); }
.lp-tab-label { font-size: .85rem; font-weight: 800; line-height: 1.3; }
.lp-panel { padding: 0; overflow: hidden; border-radius: var(--rad-22); }
.mk-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.mk-panel-photo { margin: 0; min-height: 280px; }
.mk-panel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-panel-copy { padding: 26px 26px 24px; }
.mk-panel-h { margin: 0 0 10px; font-size: 1.25rem; font-weight: 900; color: var(--txt); letter-spacing: -.3px; }
.mk-panel-copy .lp-panel-lede { font-size: .95rem; }
.mk-panel-copy .lp-points li { font-size: .88rem; color: var(--txt); }
.mk-panel-cta { margin-top: 18px; }

/* the workflow */
.lp-steps { gap: 12px; margin-bottom: 30px; }
.lp-step { padding: 18px; border-radius: var(--rad-18); background: var(--card, var(--c-white)); }
.lp-step-n { width: 32px; height: 32px; font-size: .9rem; background: linear-gradient(135deg, var(--c-cyan-42), var(--c-sky-32)); }
.lp-step-h { font-size: .98rem; }
.lp-step p { font-size: .86rem; }

@media (min-width: 900px) {
  .auth-shell { align-items: stretch; }
  .auth-brand.mk-hero { min-height: 480px; }
}
@media (max-width: 760px) {
  .mk-hero-copy { padding: 26px 20px 30px; }
  .auth-brand.mk-hero { min-height: 0; }
  .mk-hero-title { font-size: 1.5rem; }
  .lp-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .lp-tab { flex: 0 0 auto; white-space: nowrap; }
  .mk-panel-grid { grid-template-columns: 1fr; }
  .mk-panel-photo { min-height: 190px; max-height: 220px; }
  .mk-panel-copy { padding: 20px 18px; }
  .mk-cta-row .mk-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-btn, .lp-tab { transition: none; }
}
.mk-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-login-jump { display: none; min-height: 40px; padding: 0 16px; border-radius: var(--rad-12); border: 1px solid color-mix(in srgb, var(--c-white) 40%, transparent); background: color-mix(in srgb, var(--c-white) 12%, transparent); color: var(--c-white); font: inherit; font-size: .85rem; font-weight: 900; cursor: pointer; }
@media (max-width: 899px) { .mk-login-jump { display: inline-flex; align-items: center; } }

/* ===== A case waiting for a new impression =============================
   Set apart everywhere it is listed, in one colour of its own (purple), so neither the
   laboratory nor the doctor can miss it; the laboratory cannot move it on while it waits. */
.case-card.is-reimp { border: 2px solid var(--c-violet-56) !important; border-right: 7px solid var(--c-violet-56) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--c-violet-56) 5%, transparent), color-mix(in srgb, var(--c-violet-56) 14%, transparent)), var(--card) !important; box-shadow: 0 6px 22px color-mix(in srgb, var(--c-violet-56) 20%, transparent) !important; animation: none; }
.case-card.is-reimp::before { content: none; }
.orders-table tbody tr.is-reimp td { background: color-mix(in srgb, var(--c-violet-56) 9%, transparent); }
.orders-table tbody tr.is-reimp td:first-child { box-shadow: inset -5px 0 0 var(--c-violet-56); }
.group-item.is-reimp { border: 2px solid var(--c-violet-56); background: color-mix(in srgb, var(--c-violet-56) 8%, transparent); }
.badge-status.reimp-badge { background: var(--c-violet-95); color: var(--c-violet-47); border: 1px solid var(--c-violet-75); }
.reimp-hold { margin-top: 8px; padding: 8px 10px; border-radius: var(--rad-10); background: var(--c-violet-56); color: var(--c-white); font-size: 0.8rem; font-weight: 800; line-height: 1.6; }
:root[data-theme="dark"] .badge-status.reimp-badge { background: var(--c-violet-23); color: var(--c-violet-92); border-color: var(--c-violet-47); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-status.reimp-badge { background: var(--c-violet-23); color: var(--c-violet-92); border-color: var(--c-violet-47); } }
.lab-wall .wall-card.is-reimp { border-color: var(--c-violet-65); background: var(--c-violet-17); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-violet-65) 35%, transparent); }
.lab-wall .wall-reimp { display: block; padding: 10px 12px; border-radius: var(--rad-12); background: var(--c-violet-56); color: var(--c-white); font-weight: 900; font-size: 1rem; line-height: 1.5; }
.lab-wall .wall-reimp small { display: block; font-weight: 700; font-size: 0.8rem; opacity: 0.9; }

/* ===== The supplier's shop ===============================================
   A wide window laid out as an online shop: the supplier, a search with its shelves as
   buttons, the products as cards, and the basket beside them -- kept in view while the
   products scroll on a computer, under them with a bar that follows on a phone. */
#suppliesOrderModal .modal-content.shop-content { max-width: 1180px !important; width: 96% !important; max-height: 92vh !important; padding: 0 !important; background: var(--bg); }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: var(--card); border-bottom: 1px solid var(--bdr); position: sticky; top: 0; z-index: 4; }
.shop-store { display: flex; align-items: center; gap: 12px; min-width: 0; }
.shop-store-ico { width: 46px; height: 46px; border-radius: var(--rad-14); background: linear-gradient(135deg, var(--c-cyan-42), var(--c-sky-32)); color: var(--c-white); display: grid; place-items: center; flex-shrink: 0; }
.shop-store-ico svg { width: 26px; height: 26px; }
.shop-store-txt { min-width: 0; }
.shop-store-txt h3 { margin: 0; font-size: 1.25rem; font-weight: 900; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-store-txt small { color: var(--txt-m); font-weight: 700; font-size: 0.8rem; }
.shop-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 22px 8px; }
.shop-search { flex: 1 1 280px; position: relative; display: flex; align-items: center; margin: 0; }
.shop-search svg { position: absolute; inset-inline-start: 14px; width: 20px; height: 20px; color: var(--txt-m); pointer-events: none; }
.shop-search input { width: 100%; margin: 0; padding-inline-start: 44px !important; border-radius: var(--rad-14); min-height: 48px; font-size: 1rem; background: var(--card); }
.shop-cat-select { width: auto !important; min-width: 150px; flex: none; margin: 0 !important; min-height: 48px; border-radius: var(--rad-14); background: var(--card); }
/* The shelves are chosen from the buttons under the search; the select behind them keeps the choice. */
.shop-toolbar .shop-cat-select { display: none; }
.shop-scope { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; cursor: pointer; color: var(--txt-m); }
.shop-scope input { width: 18px; height: 18px; }
.shop-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 22px 12px; scrollbar-width: thin; }
.shop-chips[hidden] { display: none; }
.shop-chip { flex: none; border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-pill); padding: 8px 16px; font: inherit; font-size: 0.85rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.shop-chip:hover { border-color: var(--p); color: var(--p); }
.shop-chip.is-active { background: var(--p); border-color: var(--p); color: var(--c-white); }
#suppliesScopeNote { margin: 0 22px 10px !important; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; padding: 4px 22px 22px; align-items: start; }
.shop-main { min-width: 0; }
.shop-content .prod-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.shop-content .prod-card { border-radius: var(--rad-18); background: var(--card); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.shop-content .prod-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-blue-11) 35%, transparent); }
.shop-content .prod-card.is-out { opacity: 0.7; }
.shop-content .prod-thumb { aspect-ratio: 4 / 3.4; background: linear-gradient(135deg, var(--bg), var(--pl)); }
.shop-content .prod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.shop-content .prod-card:hover .prod-thumb img { transform: scale(1.05); }
.prod-thumb-empty svg { width: 54px; height: 54px; color: var(--p); opacity: 0.45; }
.prod-low { position: absolute; inset-inline-start: 8px; top: 8px; background: var(--c-amber-89); color: var(--c-orange-37); font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: var(--rad-pill); }
.shop-content .prod-body { padding: 12px 13px 13px; gap: 4px; }
.prod-brand { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase; color: var(--txt-m); }
.shop-content .prod-name { font-size: 0.92rem; }
.shop-content .prod-price { font-size: 1.15rem; }
.prod-add { margin-top: 10px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: none; border-radius: var(--rad-12); background: linear-gradient(135deg, var(--c-cyan-42), var(--c-sky-32)); color: var(--c-white); font: inherit; font-weight: 900; font-size: 0.88rem; cursor: pointer; }
.prod-add svg { width: 18px; height: 18px; }
.prod-add:hover { filter: brightness(1.07); }
.prod-add:disabled { background: var(--bg); color: var(--txt-m); cursor: not-allowed; }
.shop-content .prod-stepper { margin-top: 10px; padding: 4px; border: 1.5px solid var(--p); border-radius: var(--rad-12); background: var(--pl); }
.shop-content .prod-stepper button { width: 34px; height: 34px; border-radius: var(--rad-9); }
.shop-cart { position: sticky; top: 92px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-20); padding: 16px; box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--c-blue-11) 35%, transparent); }
.shop-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shop-cart-head strong { font-size: 1.05rem; font-weight: 900; color: var(--txt); }
.shop-cart-count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--rad-pill); background: var(--p); color: var(--c-white); font-weight: 900; font-size: 0.85rem; display: inline-grid; place-items: center; }
.shop-lines { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; }
.shop-line { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--rad-14); background: var(--bg); }
.shop-line-pic { width: 46px; height: 46px; border-radius: var(--rad-10); overflow: hidden; flex-shrink: 0; background: var(--pl); display: grid; place-items: center; }
.shop-line-pic img { width: 100%; height: 100%; object-fit: cover; }
.shop-line-pic svg { width: 24px; height: 24px; color: var(--p); opacity: .6; }
.shop-line-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-line-name { font-size: 0.82rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt); }
.shop-line-price { font-size: 0.8rem; font-weight: 900; color: var(--p); }
.shop-line-qty { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.shop-line-qty button { width: 26px; height: 26px; border-radius: var(--rad-8); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-weight: 900; cursor: pointer; }
.shop-line-qty b { min-width: 20px; text-align: center; font-size: 0.85rem; }
.shop-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--bdr); font-weight: 900; color: var(--txt); }
.shop-total b { font-size: 1.3rem; color: var(--p); }
.shop-total-hidden { margin-top: 12px; font-size: 0.78rem; color: var(--txt-m); font-weight: 700; }
.shop-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--txt-m); font-weight: 700; font-size: 0.85rem; padding: 18px 8px; }
.shop-cart-empty svg { width: 40px; height: 40px; opacity: 0.4; }
.shop-cart-note { margin: 14px 0 10px; }
.shop-cart-note label { font-size: 0.78rem; font-weight: 800; }
.shop-cart-note textarea { min-height: 64px; resize: vertical; }
.shop-send { margin: 0 !important; min-height: 48px; }
.shop-cancel { margin: 8px 0 0 !important; }
.shop-cartbar { display: none; }
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; padding: 4px 14px 90px; }
  .shop-toolbar { padding: 12px 14px 6px; }
  .shop-chips { padding: 4px 14px 10px; }
  .shop-head { padding: 14px 16px; }
  .shop-cart { position: static; }
  .shop-content .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-cartbar:not([hidden]) { display: flex; position: sticky; bottom: 0; margin-top: -76px; z-index: 5; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--bdr); box-shadow: 0 -10px 24px -12px color-mix(in srgb, var(--c-blue-11) 30%, transparent); }
  .shop-cartbar-txt { font-weight: 800; color: var(--txt); }
  .shop-cartbar-txt b { color: var(--p); font-size: 1.1rem; }
  .shop-cartbar button { border: none; border-radius: var(--rad-12); background: var(--p); color: var(--c-white); font: inherit; font-weight: 900; padding: 10px 18px; cursor: pointer; }
}

/* ===== The boards (role-wall.js) =========================================
   The lab wall's frame, with columns: each one a kind of thing to do or to watch, its count
   at the top, and a line per case that opens it -- the button on the line does its one job. */
.role-wall .wall-counts span.alert { color: var(--c-amber-56); }
.role-wall .wall-counts span.late { color: var(--c-red-71); }
.rw-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.rw-col { background: var(--w-head); border: 1.5px solid var(--w-line); border-radius: var(--rad-20); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 130px); }
.rw-col--wide { grid-column: 1 / -1; max-height: none; }
.rw-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; font-size: 1.15rem; font-weight: 900; border-bottom: 1px solid var(--w-line); }
.rw-col-head b { min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--rad-pill); display: inline-grid; place-items: center; font-size: 1rem; background: var(--w-tool); color: var(--w-txt2); }
.rw-col--alert { border-color: var(--c-orange-37); } .rw-col--alert .rw-col-head { color: var(--c-amber-56); } .rw-col--alert .rw-col-head b { background: var(--c-orange-50); color: var(--c-amber-5); }
.rw-col--coming { border-color: var(--c-teal-24); } .rw-col--coming .rw-col-head { color: var(--c-teal-67); } .rw-col--coming .rw-col-head b { background: var(--c-teal-39); color: var(--c-teal-9); }
.rw-col--leaving { border-color: var(--c-blue-48); } .rw-col--leaving .rw-col-head { color: var(--c-sky-78); } .rw-col--leaving .rw-col-head b { background: var(--c-blue-60); color: var(--c-white); }
.rw-col--lab .rw-col-head { color: var(--c-sky-74); }
.rw-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.rw-empty { padding: 22px 10px; text-align: center; color: var(--w-faint); font-weight: 700; }
.rw-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--rad-14); background: var(--w-card); border: 1.5px solid transparent; cursor: pointer; }
.rw-row:hover { border-color: var(--w-tool-bd); }
.rw-row--reimp { background: var(--c-violet-17); border-color: var(--c-violet-65); }
.rw-row--tryin { background: var(--c-amber-11); border-color: var(--c-orange-50); }
.rw-row--price, .rw-row--cancel { background: var(--c-orange-11); border-color: var(--c-orange-61); }
.rw-row--coming { background: var(--c-teal-10-2); border-color: var(--c-teal-39); }
.rw-row--late { border-color: var(--c-red-60); }
.rw-row--alert { border-color: var(--c-orange-50); }
.rw-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rw-row-main b { font-size: 1.25rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--w-txt); }
.rw-row-main span { font-size: .9rem; color: var(--w-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-row-main em { font-style: normal; font-size: .88rem; font-weight: 800; color: var(--w-txt2); }
.rw-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.rw-due { font-size: .85rem; font-weight: 800; color: var(--w-sub); white-space: nowrap; }
.rw-due.soon { color: var(--c-amber-56); } .rw-due.late { color: var(--c-red-71); }
.rw-go { border: none; border-radius: var(--rad-12); padding: 11px 14px; min-height: 46px; font: inherit; font-size: 1rem; font-weight: 900; cursor: pointer; background: var(--w-accent2); color: var(--c-white); white-space: nowrap; }
.rw-go:active { transform: scale(.97); }
.rw-go--ok { background: var(--c-teal-39); color: var(--c-teal-9); }
.rw-go--reimp { background: var(--c-violet-56); }
.rw-wait { font-size: .78rem; color: var(--w-mute); font-weight: 700; }
.rw-stock { font-size: .9rem; font-weight: 900; color: var(--c-amber-56); } .rw-stock.out { color: var(--c-red-71); }
/* The patient's own cases. */
.rw-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; padding: 14px; }
.rw-case { background: var(--w-card); border: 1.5px solid var(--w-line); border-radius: var(--rad-18); padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.rw-case.is-reimp { border-color: var(--c-violet-65); background: var(--c-violet-17); }
.rw-case.is-done { border-color: var(--c-teal-39); }
.rw-case-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rw-case-top b { font-size: 1.4rem; font-weight: 900; }
.rw-case-who { color: var(--w-sub); font-weight: 700; }
.rw-bar { height: 12px; border-radius: var(--rad-pill); background: var(--w-tool); overflow: hidden; }
.rw-bar span { display: block; height: 100%; border-radius: var(--rad-pill); background: linear-gradient(90deg, var(--w-accent2), var(--c-teal-39)); }
.rw-case-stage { font-size: 1.1rem; font-weight: 900; color: var(--c-sky-74); }
@media (max-width: 600px) { .rw-col { max-height: none; } .rw-row-main b { font-size: 1.1rem; } .rw-go { padding: 9px 11px; min-height: 42px; font-size: .92rem; } }

/* ===== The warehouse's month =================================================
   One large figure (sales this month, against last month), a row of four tiles, then three
   cards: who buys most, what sells most, what is running out. The bars are one hue -- the
   brand's -- and only compare the rows; every value is written beside its bar. */
.whx-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-radius: var(--rad-22); background: linear-gradient(135deg, var(--c-sky-32), var(--c-cyan-42)); color: var(--c-white); margin-bottom: 12px; box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--c-sky-32) 60%, transparent); }
.whx-hero .whx-label { color: color-mix(in srgb, var(--c-white) 85%, transparent); }
.whx-hero-value { font-size: 3.1rem; font-weight: 900; line-height: 1.1; letter-spacing: -1px; margin: 4px 0 6px; }
.whx-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .88rem; padding: 4px 10px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-white) 16%, transparent); }
.whx-delta.is-up { background: color-mix(in srgb, var(--c-teal-39) 28%, transparent); }
.whx-delta.is-down { background: color-mix(in srgb, var(--c-red-60) 30%, transparent); }
.whx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.whx-actions .btn-cancel { background: color-mix(in srgb, var(--c-white) 14%, transparent) !important; color: var(--c-white) !important; border-color: color-mix(in srgb, var(--c-white) 35%, transparent) !important; }
.whx-actions .btn-main { background: var(--c-white) !important; color: var(--c-sky-32) !important; box-shadow: none; }
.whx-label { font-size: .82rem; font-weight: 800; color: var(--txt-m); }
.whx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.whx-kpi { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-18); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.whx-kpi:hover { border-color: var(--p); transform: translateY(-2px); }
.whx-kpi b { font-size: 1.55rem; font-weight: 900; color: var(--txt); }
.whx-kpi small { font-size: .75rem; color: var(--txt-m); font-weight: 700; }
.whx-kpi--alert { border-color: var(--c-orange-50); }
.whx-kpi--alert b { color: var(--c-orange-37); }
.whx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.whx-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-18); padding: 14px 16px; min-width: 0; }
.whx-card h4 { margin: 0 0 12px; font-size: .98rem; font-weight: 900; color: var(--txt); }
.whx-rank { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.whx-rank + .whx-rank { border-top: 1px dashed var(--bdr); }
.whx-rank-n { width: 24px; height: 24px; border-radius: 50%; background: var(--pl); color: var(--p); display: inline-grid; place-items: center; font-weight: 900; font-size: .78rem; flex-shrink: 0; }
.whx-rank-body { flex: 1; min-width: 0; }
.whx-rank-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.whx-rank-top b { font-size: .88rem; font-weight: 800; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whx-rank-top span { font-size: .75rem; color: var(--txt-m); font-weight: 700; white-space: nowrap; }
.whx-bar { height: 8px; border-radius: 4px; background: var(--pl); margin-top: 6px; overflow: hidden; }
.whx-bar span { display: block; height: 100%; border-radius: 4px; background: var(--p); }
.whx-low { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; cursor: pointer; }
.whx-low + .whx-low { border-top: 1px dashed var(--bdr); }
.whx-low b { font-size: .86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt); }
.whx-low span { font-size: .75rem; font-weight: 900; padding: 2px 8px; border-radius: var(--rad-pill); white-space: nowrap; }
.whx-low span.is-low { background: var(--wl); color: var(--c-orange-37); }
.whx-low span.is-out { background: var(--dl); color: var(--d); }
.whx-empty { color: var(--txt-m); font-size: .85rem; font-weight: 700; text-align: center; padding: 16px 6px; }
@media (max-width: 1100px) { .whx-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .whx-kpis { grid-template-columns: 1fr 1fr; } .whx-grid { grid-template-columns: 1fr; } .whx-hero-value { font-size: 2.4rem; } }

/* An offer in the shop: the percentage on the photograph, the old price struck beside the new. */
.prod-offer { position: absolute; inset-inline-end: 8px; bottom: 8px; background: var(--c-red-51); color: var(--c-white); font-size: .75rem; font-weight: 900; padding: 3px 9px; border-radius: var(--rad-pill); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--c-red-51) 60%, transparent); }
.prod-was { color: var(--txt-m); font-size: .78rem; font-weight: 700; margin-inline-start: 6px; }
.prod-offer-until { font-size: .7rem; font-weight: 800; color: var(--c-red-51); }
.shop-chip--offer { border-color: var(--c-red-82); color: var(--c-red-51); }
.shop-chip--offer.is-active { background: var(--c-red-51); border-color: var(--c-red-51); color: var(--c-white); }

.supplies-reorder { width: auto !important; margin: 6px 0 0 !important; padding: 6px 12px !important; font-size: .78rem !important; min-height: 0 !important; }

/* ===== Five looks for the wall ===============================================
   Chosen on the wall itself with one button, and remembered on the device. The colours that
   carry a meaning -- green for ready, amber for priority, purple for a new impression, red for
   late -- are the same in every look, so a card means the same thing whichever is on. */
.lab-wall {
  --w-bg: var(--c-blue-8); --w-head: var(--c-blue-12-2); --w-card: var(--c-blue-16); --w-line: var(--c-blue-22); --w-tool: var(--c-blue-17); --w-tool-bd: var(--c-blue-27);
  --w-input: var(--c-blue-11); --w-txt: var(--c-sky-98); --w-txt2: #e2e8f0; --w-sub: var(--c-sky-84); --w-mute: var(--c-blue-65); --w-faint: var(--c-blue-47);
  --w-accent: var(--c-sky-60); --w-accent2: #0ea5e9;
}
.lab-wall.wall-theme-day {
  --w-bg: var(--c-sky-95); --w-head: var(--c-white); --w-card: var(--c-white); --w-line: var(--c-sky-87-2); --w-tool: var(--c-sky-96); --w-tool-bd: var(--c-sky-84);
  --w-input: var(--c-white); --w-txt: var(--c-blue-11); --w-txt2: #1e293b; --w-sub: var(--c-blue-27); --w-mute: var(--c-blue-47); --w-faint: var(--c-blue-65);
  --w-accent: var(--c-sky-32); --w-accent2: #0284c7;
}
.lab-wall.wall-theme-ocean {
  --w-bg: var(--c-sky-7-2); --w-head: var(--c-sky-11); --w-card: var(--c-sky-15-2); --w-line: var(--c-sky-24-2); --w-tool: var(--c-sky-15-2); --w-tool-bd: var(--c-sky-32-2);
  --w-input: var(--c-sky-9); --w-txt: var(--c-sky-97-3); --w-txt2: #d7f3fb; --w-sub: var(--c-cyan-78); --w-mute: var(--c-cyan-63); --w-faint: var(--c-cyan-49);
  --w-accent: var(--c-cyan-53); --w-accent2: #0891b2;
}
.lab-wall.wall-theme-forest {
  --w-bg: var(--c-teal-5); --w-head: var(--c-teal-9-2); --w-card: var(--c-teal-12-2); --w-line: var(--c-teal-20-2); --w-tool: var(--c-teal-12-2); --w-tool-bd: var(--c-teal-27);
  --w-input: var(--c-teal-7); --w-txt: var(--c-green-97); --w-txt2: #d1fae5; --w-sub: var(--c-teal-75); --w-mute: var(--c-teal-59); --w-faint: var(--c-teal-46);
  --w-accent: var(--c-teal-52); --w-accent2: #059669;
}
.lab-wall.wall-theme-contrast {
  --w-bg: var(--c-black); --w-head: var(--c-black); --w-card: var(--c-grey-4); --w-line: var(--c-amber-50); --w-tool: var(--c-black); --w-tool-bd: var(--c-amber-50);
  --w-input: var(--c-black); --w-txt: var(--c-white); --w-txt2: #ffffff; --w-sub: var(--c-amber-70); --w-mute: var(--c-amber-50); --w-faint: var(--c-yellow-37);
  --w-accent: var(--c-amber-50); --w-accent2: #ffd400;
}
.lab-wall.wall-theme-contrast .wall-go, .lab-wall.wall-theme-contrast .rw-go:not(.rw-go--ok) { color: var(--c-black); }
.lab-wall.wall-theme-contrast .wall-card, .lab-wall.wall-theme-contrast .rw-row, .lab-wall.wall-theme-contrast .rw-col { border-width: 2px; }
/* The daylight look keeps the meaning colours as light tints, so dark cards do not sit on a white wall. */
.lab-wall.wall-theme-day .wall-card.is-priority, .lab-wall.wall-theme-day .rw-row--tryin { background: var(--c-amber-94); }
.lab-wall.wall-theme-day .wall-card.is-reimp, .lab-wall.wall-theme-day .rw-row--reimp, .lab-wall.wall-theme-day .rw-case.is-reimp { background: var(--c-violet-96); }
.lab-wall.wall-theme-day .rw-row--coming { background: var(--c-teal-95); }
.lab-wall.wall-theme-day .rw-row--price, .lab-wall.wall-theme-day .rw-row--cancel { background: var(--c-orange-95); }
.lab-wall.wall-theme-day .wall-ready { background: var(--c-teal-96); }
.lab-wall.wall-theme-day .wall-ready-row { background: var(--c-green-90); }
.lab-wall.wall-theme-day .wall-ready-who, .lab-wall.wall-theme-day .wall-ready-who span, .lab-wall.wall-theme-day .wall-ready-head { color: var(--c-teal-16); }
.lab-wall.wall-theme-day .wall-reimp, .lab-wall.wall-theme-day .rw-go--reimp { color: var(--c-white); }
.lab-wall .wall-theme-btn { position: relative; }

/* ===== Five looks for the application ==========================================
   The brand colour and its two neighbours, for the light and the dark mode; everything that uses
   var(--p) follows. "ocean" is the colours above, so it needs no rule of its own. */

/* A warehouse's deals: what an order gives off, and the discount on a product in the shop. */
.deal-panel { margin: 10px 0; padding: 10px 12px; border-radius: var(--rad-12); background: var(--sl); color: var(--txt); font-size: .85rem; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.deal-panel--ask { background: var(--wl); }
.badge-status.deal-badge { background: var(--sl); color: var(--s); border: 1px solid var(--s); }
.prod-mine { align-self: flex-start; font-size: .7rem; font-weight: 900; color: var(--s); background: var(--sl); padding: 2px 8px; border-radius: var(--rad-pill); }
.shop-coupon { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border-radius: var(--rad-12); border: 1.5px dashed var(--s); background: var(--sl); font-size: .82rem; font-weight: 800; color: var(--txt); cursor: pointer; }
.shop-coupon input { width: 18px; height: 18px; }
.shop-total--coupon b { color: var(--s); }

/* A representative's account: six figures, how the money came in, and what they have handed over. */
.repacc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.repacc-title { margin: 0 0 8px; font-weight: 900; font-size: .92rem; color: var(--p); }
.repacc-card { background: var(--card, var(--bg)); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 14px color-mix(in srgb, var(--c-blue-11) 5%, transparent); }
.repacc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .95rem; }
.repacc-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.repacc-fig { background: var(--bg); border-radius: var(--rad-12); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.repacc-fig span { font-size: .7rem; color: var(--txt-m); font-weight: 700; }
.repacc-fig b { font-size: .95rem; font-weight: 900; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.repacc-fig.is-good b { color: var(--s); }
.repacc-fig.is-warn b { color: var(--w); }
.repacc-fig.is-strong { background: var(--pl); }
.repacc-fig.is-strong b { color: var(--p); }
.repacc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.repacc-chip { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--rad-pill); background: var(--sl); color: var(--txt); }
.repacc-returned { font-size: .78rem; color: var(--d); font-weight: 700; }
.repacc-btn { width: 100%; margin: 0; padding: 9px 12px; }
.repacc-hist summary { cursor: pointer; font-size: .78rem; font-weight: 800; color: var(--txt-m); }
.repacc-hist div { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; padding: 5px 0; border-top: 1px dashed var(--bdr); }

/* ---------------------------------------------------------------------------------------------
   The products screen (products.js): a search bar, shelves as chips, a grid of cards whose photo
   is the product on a white field (as a maker's own catalogue shows it), and a product window
   with a swipeable gallery, full-screen zoom, the facts, the description and the scores.
   --------------------------------------------------------------------------------------------- */
.pc-hero { background: linear-gradient(135deg, var(--pl), var(--card)); border: 1px solid var(--bdr); border-radius: var(--rad-22); padding: 18px; margin-bottom: 14px; display: grid; gap: 12px; }
.pc-hero-text h3 { margin: 0 0 4px; font-weight: 900; color: var(--p); font-size: 1.15rem; }
.pc-hero-text p { margin: 0; font-size: .82rem; color: var(--txt-m); line-height: 1.7; }
.pc-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--rad-16); padding: 4px 6px 4px 14px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
[dir="rtl"] .pc-search { padding: 4px 14px 4px 6px; }
.pc-search:focus-within { border-color: var(--p); box-shadow: 0 0 0 4px var(--pl); }
.pc-search > svg { width: 20px; height: 20px; color: var(--txt-m); flex: none; }
.pc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--txt); font: inherit; font-size: .95rem; padding: 10px 0; }
.pc-scan { flex: none; width: 42px; height: 42px; border-radius: var(--rad-12); border: 0; background: var(--p); color: var(--c-white); display: grid; place-items: center; cursor: pointer; }
.pc-scan svg { width: 22px; height: 22px; }
.pc-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-tools select { width: auto; flex: 1 1 140px; min-width: 0; padding: 8px 10px; margin: 0; }
.pc-mine-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: var(--txt); cursor: pointer; padding: 8px 12px; border-radius: var(--rad-12); background: var(--card); border: 1px solid var(--bdr); }
.pc-mine-toggle input { width: 16px; height: 16px; accent-color: var(--p); }
.pc-cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pc-cat { flex: none; border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-pill); padding: 7px 14px; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.pc-cat small { opacity: .6; font-weight: 700; margin-inline-start: 2px; }
.pc-cat.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }
.pc-meta { font-size: .78rem; color: var(--txt-m); font-weight: 700; margin: 0 2px 10px; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
@media (max-width: 560px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.pc-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-18); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; outline: none; }
.pc-card:hover, .pc-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 34px color-mix(in srgb, var(--c-blue-11) 12%, transparent); border-color: var(--p); }
.pc-media { position: relative; aspect-ratio: 1 / 1; background: var(--c-white); display: grid; place-items: center; overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: contain; padding: 9%; box-sizing: border-box; opacity: 0; transform: scale(.98); transition: opacity .3s ease, transform .35s ease; }
.pc-media img.is-in { opacity: 1; transform: none; }
.pc-card:hover .pc-media img.is-in { transform: scale(1.06); }
.pc-noimg { color: var(--c-sky-84); display: grid; place-items: center; width: 100%; height: 100%; }
.pc-noimg svg { width: 38%; height: 38%; }
.pc-score { position: absolute; top: 8px; inset-inline-start: 8px; font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-white) 94%, transparent); color: var(--c-blue-27); box-shadow: 0 2px 8px color-mix(in srgb, var(--c-blue-11) 12%, transparent); display: inline-flex; align-items: baseline; gap: 2px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
@media (max-width: 560px) { .pc-media .pc-score small { display: none; } }
.pc-score b { font-size: .88rem; font-weight: 900; }
.pc-score small { opacity: .75; font-weight: 700; }
.pc-score.is-high { background: var(--c-green-36); color: var(--c-white); }
.pc-score.is-mid { background: var(--c-orange-50); color: var(--c-white); }
.pc-score.is-low { background: var(--c-red-51); color: var(--c-white); }
.pc-headline .pc-score { position: static; box-shadow: none; }
.pc-photos { position: absolute; bottom: 8px; inset-inline-start: 8px; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-blue-11) 60%, transparent); color: var(--c-white); }
.pc-mine { position: absolute; bottom: 8px; inset-inline-end: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--p); color: var(--c-white); font-size: .75rem; box-shadow: 0 2px 8px color-mix(in srgb, var(--c-blue-11) 18%, transparent); }
.pc-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pc-brand { font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--p); }
.pc-name { margin: 0; font-size: .9rem; font-weight: 800; color: var(--txt); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-code { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; color: var(--txt-m); background: var(--bg); padding: 1px 7px; border-radius: 6px; }
.pc-sum { margin: 0; font-size: .74rem; color: var(--txt-m); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.pc-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pc-price b { font-size: 1.02rem; font-weight: 900; color: var(--txt); }
.pc-price s { font-size: .75rem; color: var(--txt-m); }
.pc-price em { font-style: normal; font-size: .7rem; font-weight: 900; color: var(--c-red-51); }
.pc-price--quiet { font-size: .74rem; font-weight: 800; color: var(--txt-m); }
.pc-wh { font-size: .7rem; color: var(--txt-m); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-card--ghost { pointer-events: none; }
.pc-card--ghost .pc-media, .pc-card--ghost i { background: linear-gradient(90deg, var(--bg) 25%, var(--bdr) 50%, var(--bg) 75%); background-size: 200% 100%; animation: pcShimmer 1.2s infinite linear; }
.pc-card--ghost i { display: block; height: 10px; border-radius: 6px; margin: 4px 0; }
.pc-card--ghost i:nth-child(2) { width: 70%; }
.pc-card--ghost i:nth-child(3) { width: 45%; }
@keyframes pcShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pc-empty { grid-column: 1 / -1; text-align: center; color: var(--txt-m); font-weight: 700; padding: 40px 12px; display: grid; gap: 10px; justify-items: center; }
.pc-empty-ico svg { width: 54px; height: 54px; opacity: .5; }

/* the product window */
.modal-content.pc-detail { max-width: 980px; width: min(980px, 96vw); padding: 0; position: relative; overflow: hidden; }
#pcDetailBody { max-height: 88vh; overflow-y: auto; padding: 18px; }
.pc-close { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-blue-11) 6%, transparent); color: var(--txt); font-size: 1rem; cursor: pointer; }
.pc-detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 760px) { .pc-detail-grid { grid-template-columns: 1fr; gap: 14px; } #pcDetailBody { padding: 12px; } }
.pc-gallery { position: relative; }
.pc-stage { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--rad-18); background: var(--c-white); border: 1px solid var(--bdr); aspect-ratio: 1 / 1; scrollbar-width: none; }
.pc-stage::-webkit-scrollbar { display: none; }
.pc-stage figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; }
.pc-stage img { width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; cursor: zoom-in; }
.pc-stage--empty { display: grid; place-items: center; }
.pc-nav { position: absolute; top: calc(50% - 40px); width: 38px; height: 38px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-white) 92%, transparent); color: var(--c-blue-11); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--c-blue-11) 18%, transparent); }
.pc-nav--prev { inset-inline-start: 10px; }
.pc-nav--next { inset-inline-end: 10px; }
.pc-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.pc-thumb { flex: none; width: 62px; height: 62px; border-radius: var(--rad-12); border: 2px solid var(--bdr); background: var(--c-white); padding: 3px; cursor: pointer; }
.pc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pc-thumb.is-on { border-color: var(--p); }
.pc-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pc-title { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--txt); line-height: 1.4; padding-inline-end: 36px; }
.pc-subtitle { font-size: .85rem; color: var(--txt-m); margin-top: -6px; }
.pc-headline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pc-info .pc-price b { font-size: 1.5rem; }
.pc-stock { font-size: .8rem; font-weight: 800; color: var(--c-green-36); }
.pc-stock.is-out { color: var(--c-red-51); }
.pc-buy { display: flex; gap: 10px; align-items: stretch; }
.pc-qty { display: flex; align-items: center; border: 1.5px solid var(--bdr); border-radius: var(--rad-14); overflow: hidden; }
.pc-qty button { width: 40px; height: 100%; min-height: 46px; border: 0; background: var(--bg); color: var(--txt); font-size: 1.1rem; cursor: pointer; }
.pc-qty b { min-width: 38px; text-align: center; font-weight: 900; }
.pc-cta { flex: 1; margin: 0; padding: 13px 16px; border-radius: var(--rad-14); font-size: .95rem; white-space: nowrap; }
.pc-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border-radius: var(--rad-14); border: 1.5px solid var(--p); color: var(--p); font-weight: 900; font-size: .88rem; text-decoration: none; }
.pc-link:hover { background: var(--pl); }
.pc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-fact { background: var(--bg); border-radius: var(--rad-12); padding: 8px 10px; min-width: 0; }
.pc-fact span { display: block; font-size: .68rem; color: var(--txt-m); font-weight: 700; }
.pc-fact b { display: block; font-size: .85rem; color: var(--txt); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.pc-copy { cursor: copy; }
.pc-sec { margin-top: 20px; border-top: 1px solid var(--bdr); padding-top: 14px; }
.pc-sec h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 900; color: var(--txt); }
.pc-desc { font-size: .9rem; line-height: 1.9; color: var(--txt); }
.pc-muted { color: var(--txt-m); }
.pc-rating-box { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pc-big { display: grid; justify-items: center; min-width: 120px; padding: 14px 16px; border-radius: var(--rad-18); background: var(--bg); }
.pc-big b { font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--txt-m); }
.pc-big span { font-size: .85rem; color: var(--txt-m); font-weight: 800; }
.pc-big small { font-size: .72rem; color: var(--txt-m); margin-top: 4px; }
.pc-big.is-high b { color: var(--c-green-36); }
.pc-big.is-mid b { color: var(--c-orange-50); }
.pc-big.is-low b { color: var(--c-red-51); }
.pc-bars { flex: 1; min-width: 200px; display: grid; gap: 3px; }
.pc-bar { display: grid; grid-template-columns: 22px 1fr 26px; gap: 8px; align-items: center; font-size: .72rem; color: var(--txt-m); font-weight: 700; }
.pc-bar i { height: 7px; border-radius: var(--rad-pill); background: var(--bg); overflow: hidden; display: block; }
.pc-bar u { display: block; height: 100%; border-radius: inherit; background: var(--p); text-decoration: none; }
.pc-rate { margin-top: 14px; }
.pc-rate-h { font-size: .82rem; font-weight: 800; color: var(--txt); margin-bottom: 8px; }
.pc-rate-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.pc-rate-b { aspect-ratio: 1 / 1; max-height: 44px; border-radius: var(--rad-10); border: 1.5px solid var(--bdr); background: var(--card); color: var(--txt); font: inherit; font-weight: 900; font-size: .88rem; cursor: pointer; transition: transform .12s, background .12s; padding: 0; }
.pc-rate-b:hover { transform: translateY(-2px); border-color: var(--p); }
.pc-rate-b.is-lit { background: var(--pl); border-color: var(--p); color: var(--p); }
.pc-rate-b.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }

/* full screen */
.pc-zoom { position: fixed; inset: 0; z-index: 100000; background: color-mix(in srgb, var(--c-blue-5) 94%, transparent); display: none; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.pc-zoom.is-open { display: flex; }
.pc-zoom img { max-width: 96vw; max-height: 92vh; object-fit: contain; background: var(--c-white); border-radius: var(--rad-12); }
.pc-zoom-nav { position: absolute; top: calc(50% - 24px); width: 48px; height: 48px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-white) 15%, transparent); color: var(--c-white); font-size: 1.8rem; cursor: pointer; }
.pc-zoom-nav--prev { inset-inline-start: 14px; }
.pc-zoom-nav--next { inset-inline-end: 14px; }
.pc-zoom-count { position: absolute; bottom: 18px; color: var(--c-white); font-weight: 800; font-size: .85rem; }

/* the warehouse's editor: the extra photographs */
.wh-gallery { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wh-gallery-item { position: relative; width: 70px; height: 70px; border-radius: var(--rad-12); overflow: hidden; border: 1px solid var(--bdr); background: var(--c-white); }
.wh-gallery-item img { width: 100%; height: 100%; object-fit: contain; }
.wh-gallery-item button { position: absolute; top: 2px; inset-inline-end: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-red-51) 90%, transparent); color: var(--c-white); font-size: .65rem; cursor: pointer; padding: 0; }

/* ---------------------------------------------------------------------------------------------
   A store's face (settings preview, the buyer's list, the top of its shop), WhatsApp buttons,
   a customer's terms, the representative's round, a cheque's photograph, and the first-minute tour.
   --------------------------------------------------------------------------------------------- */
.brand-preview { border: 1px solid var(--bdr); border-radius: var(--rad-18); overflow: hidden; background: var(--card); margin-bottom: 12px; }
.brand-cover { height: 120px; background: linear-gradient(135deg, var(--p), var(--ph)); }
.brand-row { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px 12px; margin-top: -34px; }
.brand-logo { width: 72px; height: 72px; flex: none; border-radius: var(--rad-20); background: var(--c-white); border: 3px solid var(--p); display: grid; place-items: center; font-size: 1.8rem; overflow: hidden; box-shadow: 0 6px 18px color-mix(in srgb, var(--c-blue-11) 15%, transparent); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-names { min-width: 0; padding-bottom: 4px; }
.brand-names strong { display: block; font-size: 1rem; font-weight: 900; color: var(--txt); }
.brand-names small { display: block; font-size: .78rem; color: var(--txt-m); }
.brand-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.brand-actions .btn-cancel { width: auto; margin: 0; padding: 8px 12px; font-size: .8rem; cursor: pointer; }
.store-line { display: flex; gap: 10px; align-items: center; min-width: 0; }
.store-logo { width: 44px; height: 44px; flex: none; border-radius: var(--rad-12); background: var(--c-white); border: 2px solid var(--bdr); display: grid; place-items: center; overflow: hidden; font-size: 1.2rem; }
.store-logo img { width: 100%; height: 100%; object-fit: contain; }
.store-tagline { display: block; font-size: .74rem; color: var(--p); font-weight: 700; }
.shop-head.has-cover { background-size: cover; background-position: center; color: var(--c-white); min-height: 120px; align-items: flex-end; border-radius: var(--rad-16); padding: 14px; }
.shop-head.has-cover h3, .shop-head.has-cover small { color: var(--c-white) !important; text-shadow: 0 1px 6px color-mix(in srgb, var(--c-black) 40%, transparent); }
.shop-head.has-cover .btn-icon-close { background: color-mix(in srgb, var(--c-white) 90%, transparent); }
.shop-store-ico.has-logo { background: var(--c-white); padding: 0; overflow: hidden; }
.shop-store-ico.has-logo img { width: 100%; height: 100%; object-fit: contain; }

.btn-wa { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--rad-12); padding: 7px 13px; background: var(--c-green-49); color: var(--c-white); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; width: auto; }
.btn-wa:hover { background: var(--c-green-43); }

.fld-modal { max-width: 620px; max-height: 92vh; overflow-y: auto; }
.fld-title { color: var(--p); margin: 0; font-weight: 900; font-size: 1rem; }
.fld-body { display: flex; flex-direction: column; gap: 10px; }
.fld-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .fld-cards { grid-template-columns: 1fr 1fr; } }
.fld-card { background: var(--bg); border-radius: var(--rad-14); padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld-card span { font-size: .7rem; color: var(--txt-m); font-weight: 700; }
.fld-card b { font-size: 1rem; font-weight: 900; color: var(--txt); }
.fld-card input { margin: 0; padding: 6px 8px; }
.fld-meter { height: 8px; border-radius: var(--rad-pill); background: var(--bg); overflow: hidden; }
.fld-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-orange-50), var(--c-red-51)); }
.fld-meter--good i { background: linear-gradient(90deg, var(--p), var(--c-green-36)); }
.fld-h { margin: 6px 0 0; font-size: .9rem; font-weight: 900; }
.fld-h small { color: var(--txt-m); font-weight: 700; }
.fld-hint { margin: 0; font-size: .76rem; color: var(--txt-m); line-height: 1.7; }
.fld-prices { max-height: 46vh; overflow-y: auto; border: 1px solid var(--bdr); border-radius: var(--rad-14); }
.fld-price-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--bdr); }
.fld-price-row:last-child { border-bottom: 0; }
.fld-price-row.is-set { background: var(--pl); }
.fld-price-row img { width: 40px; height: 40px; object-fit: contain; background: var(--c-white); border-radius: var(--rad-10); flex: none; }
.fld-price-row > div:first-of-type, .fld-price-row > div:not(.fld-step) { flex: 1; min-width: 0; }
.fld-price-row strong { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld-price-row small { font-size: .72rem; color: var(--txt-m); }
.fld-price-row input { width: 110px; flex: none; margin: 0; padding: 7px 8px; }
.fld-step { display: flex; align-items: center; gap: 4px; flex: none; }
.fld-step button { width: 32px; height: 32px; border-radius: var(--rad-10); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-size: 1rem; cursor: pointer; }
.fld-step b { min-width: 26px; text-align: center; }
.fld-total { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .9rem; }
.fld-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fld-chip { border: 1.5px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-pill); padding: 7px 13px; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.fld-chip.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }
.fld-geo { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; }

.fld-round { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-20); padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.fld-round-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fld-round-head h4 { margin: 0; font-weight: 900; font-size: .95rem; color: var(--p); }
.fld-round-actions { display: flex; gap: 8px; }
.fld-round-actions button { width: auto; margin: 0; padding: 8px 12px; font-size: .8rem; }
.fld-target { background: var(--bg); border-radius: var(--rad-14); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fld-target-row { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 800; }
.fld-target small { font-size: .72rem; color: var(--txt-m); }
.fld-customers { display: flex; flex-direction: column; gap: 6px; }
.fld-customer { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--bdr); border-radius: var(--rad-14); }
.fld-customer > div:first-child { flex: 1; min-width: 0; }
.fld-customer strong { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld-customer small { font-size: .7rem; color: var(--txt-m); }
.fld-customer-actions { display: flex; gap: 6px; flex: none; }
.fld-customer-actions button { width: 38px; height: 38px; border-radius: var(--rad-12); border: 1px solid var(--bdr); background: var(--bg); font-size: 1rem; cursor: pointer; }
.repacc-target { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border-radius: var(--rad-12); padding: 8px 10px; }
.repacc-target > div:first-child { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 800; }

.cheque-photo { display: flex; align-items: center; gap: 10px; }
.cheque-photo-preview { position: relative; width: 120px; height: 70px; border-radius: var(--rad-12); border: 1.5px dashed var(--bdr); background: var(--bg); display: grid; place-items: center; overflow: hidden; font-size: 1.3rem; }
.cheque-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.cheque-photo-preview button { position: absolute; top: 3px; inset-inline-end: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-red-51) 90%, transparent); color: var(--c-white); font-size: .65rem; cursor: pointer; padding: 0; }
.cheque-photo-btn { width: auto; margin: 0; padding: 9px 14px; cursor: pointer; }

.ob-modal { z-index: 100001; }
.ob-card { max-width: 440px; text-align: center; padding: 26px 22px 20px; position: relative; border-radius: var(--rad-26); }
.ob-skip { position: absolute; top: 12px; inset-inline-end: 14px; border: 0; background: none; color: var(--txt-m); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.ob-icon { width: 92px; height: 92px; margin: 8px auto 14px; border-radius: var(--rad-28); display: grid; place-items: center; font-size: 2.8rem; background: linear-gradient(135deg, var(--pl), var(--card)); box-shadow: inset 0 0 0 1px var(--bdr); animation: obPop .35s ease; }
@keyframes obPop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.ob-body h2 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 900; color: var(--txt); }
.ob-body p { margin: 0 auto; max-width: 340px; font-size: .9rem; line-height: 1.85; color: var(--txt-m); }
.ob-go { margin-top: 14px; border: 1.5px solid var(--p); background: none; color: var(--p); border-radius: var(--rad-pill); padding: 8px 16px; font: inherit; font-size: .84rem; font-weight: 900; cursor: pointer; }
.ob-dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 14px; }
.ob-dots i { width: 8px; height: 8px; border-radius: var(--rad-pill); background: var(--bdr); transition: width .2s, background .2s; }
.ob-dots i.is-on { width: 22px; background: var(--p); }
.ob-nav { display: flex; gap: 10px; }
.ob-nav button { flex: 1; margin: 0; }

/* The cheques screen. */
.chq-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .chq-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chq-card { background: var(--card); border: 1px solid var(--bdr); border-top: 4px solid var(--p); border-radius: var(--rad-16); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.chq-card.is-warn { border-top-color: var(--c-orange-50); }
.chq-card.is-bad { border-top-color: var(--c-red-51); }
.chq-card span { font-size: .72rem; color: var(--txt-m); font-weight: 800; }
.chq-card b { font-size: 1.1rem; font-weight: 900; color: var(--txt); }
.chq-card small { font-size: .7rem; color: var(--txt-m); }
.chq-row { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 10px 12px; margin-bottom: 8px; }
.chq-photo { width: 76px; height: 50px; flex: none; border-radius: var(--rad-10); overflow: hidden; background: var(--bg); display: grid; place-items: center; font-size: 1.3rem; border: 1px solid var(--bdr); }
.chq-photo img { width: 100%; height: 100%; object-fit: cover; }
.chq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chq-main strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chq-main small { font-size: .74rem; color: var(--txt-m); }
.chq-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.chq-side > b { font-size: 1rem; font-weight: 900; }
.chq-badge { font-size: .7rem; font-weight: 900; padding: 2px 9px; border-radius: var(--rad-pill); background: var(--pl); color: var(--p); }
.chq-badge.is-cashed { background: var(--c-green-93); color: var(--c-green-29); }
.chq-badge.is-returned, .chq-badge.is-late { background: var(--c-red-94); color: var(--c-red-42); }
.chq-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.chq-actions button { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-10); padding: 4px 8px; font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
@media (max-width: 520px) { .chq-row { flex-wrap: wrap; } .chq-side { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } }

/* A profile's cover: in the form, and changeable from one's own page. */
.pf-cover { position: relative; height: 120px; border-radius: var(--rad-16); margin-bottom: 14px; background: linear-gradient(135deg, var(--p), var(--ph)); background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: space-between; padding: 8px; }
.pf-cover-btn { border: 0; background: color-mix(in srgb, var(--c-blue-11) 60%, transparent); color: var(--c-white); border-radius: var(--rad-10); padding: 6px 10px; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.pf-cover:not(.has-photo) .pf-cover-btn--remove { display: none; }
.vp-cover.has-photo { background-size: cover !important; background-position: center !important; }
.vp-cover.has-photo .vp-cover-art, .vp-cover.has-photo::after { display: none; }
.vp-cover-edit { position: absolute; bottom: 10px; inset-inline-end: 12px; z-index: 2; background: color-mix(in srgb, var(--c-blue-11) 60%, transparent); color: var(--c-white); border-radius: var(--rad-12); padding: 7px 12px; font-size: .8rem; font-weight: 800; cursor: pointer; backdrop-filter: blur(4px); }
.pc-rate-later { margin-top: 12px; padding: 10px 12px; border-radius: var(--rad-12); background: var(--bg); color: var(--txt-m); font-size: .82rem; font-weight: 700; }

/* One statement of account (statement.js). */
.modal-content.st-modal { max-width: 980px; width: min(980px, 96vw); max-height: 92vh; overflow-y: auto; }
.st-title { color: var(--p); margin: 0; font-weight: 900; font-size: 1.05rem; }
.st-wrap { display: flex; flex-direction: column; gap: 12px; }
.st-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-segs { display: inline-flex; background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-12); padding: 3px; }
.st-seg { border: 0; background: none; color: var(--txt-m); font: inherit; font-size: .8rem; font-weight: 800; padding: 7px 12px; border-radius: var(--rad-9); cursor: pointer; }
.st-seg.is-on { background: var(--card); color: var(--p); box-shadow: 0 1px 4px color-mix(in srgb, var(--c-blue-11) 12%, transparent); }
.st-basis { width: auto; margin: 0; padding: 7px 10px; font-size: .8rem; }
.st-date { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 800; color: var(--txt-m); }
.st-date input { border: 1px solid var(--bdr); border-radius: var(--rad-10); padding: 6px 8px; background: var(--card); color: var(--txt); font: inherit; font-size: .8rem; }
.st-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.st-btn { border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-10); padding: 7px 11px; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.st-btn--wa { background: var(--c-green-49); border-color: var(--c-green-49); color: var(--c-white); }
.st-print-head { display: none; }
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.st-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.st-card span { font-size: .7rem; color: var(--txt-m); font-weight: 800; }
.st-card b { font-size: 1.05rem; font-weight: 900; color: var(--txt); }
.st-card.is-debit b { color: var(--p); }
.st-card.is-credit b { color: var(--s); }
.st-card.is-owed { border-color: var(--d); background: var(--dl); }
.st-card.is-owed b { color: var(--d); }
.st-card.is-clear { border-color: var(--s); background: var(--sl); }
.st-card.is-clear b { color: var(--s); }
.st-card.is-muted b { color: var(--txt-m); }
.st-table-wrap { overflow-x: auto; border: 1px solid var(--bdr); border-radius: var(--rad-14); background: var(--card); }
.st-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.st-table th { background: var(--bg); color: var(--txt-m); font-size: .72rem; font-weight: 900; text-align: start; padding: 8px 10px; white-space: nowrap; }
.st-table td { padding: 8px 10px; border-top: 1px solid var(--bdr); vertical-align: top; }
.st-table tr.st-click { cursor: pointer; }
.st-table tr.st-click:hover td { background: var(--pl); }
.st-name strong { display: block; font-weight: 800; }
.st-name small { display: block; color: var(--txt-m); font-size: .72rem; }
.st-tag { display: inline-block; margin-top: 2px; font-style: normal; font-size: .66rem; font-weight: 800; padding: 1px 7px; border-radius: var(--rad-pill); background: var(--wl); color: var(--c-orange-37); }
.st-tag--bad { background: var(--dl); color: var(--d); }
.st-tag--info { background: var(--pl); color: var(--p); }
.st-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-day { white-space: nowrap; color: var(--txt-m); font-size: .76rem; }
.st-debit { color: var(--p); font-weight: 800; }
.st-credit { color: var(--s); font-weight: 800; }
.st-run { font-weight: 900; }
.st-faint { opacity: .45; text-decoration: line-through dotted; }
.st-opening td, .st-total td { background: var(--bg); font-weight: 900; }
.st-empty { text-align: center; color: var(--txt-m); padding: 18px !important; }
.st-h { margin: 6px 0 0; font-size: .92rem; font-weight: 900; }
.st-h small { color: var(--txt-m); font-weight: 700; }
.st-equation { background: var(--bg); border-radius: var(--rad-14); padding: 12px 14px; font-size: .9rem; font-weight: 700; line-height: 2; }
.st-equation b { font-weight: 900; }
.st-owed { color: var(--d); }
.st-clear { color: var(--s); }
.pend-box { background: var(--wl); border: 1px solid var(--c-amber-65); border-radius: var(--rad-16); padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.pend-box h4 { margin: 0; font-size: .9rem; font-weight: 900; color: var(--c-orange-31); }
.pend-row { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: var(--rad-12); padding: 9px 11px; flex-wrap: wrap; }
.pend-main { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.pend-main small { font-size: .72rem; color: var(--txt-m); }
.pend-row > b { font-size: 1rem; font-weight: 900; }
.pend-actions { display: flex; gap: 6px; }
.pend-actions button { width: auto; margin: 0; padding: 7px 11px; font-size: .76rem; }

/* The team conversation, and photographs in a conversation. */
.chat-row--team { background: linear-gradient(135deg, var(--pl), transparent); border: 1px solid var(--bdr); border-radius: var(--rad-14); margin-bottom: 6px; }
.chat-team-ico { width: 42px; height: 42px; flex: none; border-radius: var(--rad-14); display: grid; place-items: center; background: var(--p); color: var(--c-white); font-size: 1.2rem; }
.chat-team-ico--sm { width: 30px; height: 30px; border-radius: var(--rad-10); font-size: .95rem; display: inline-grid; margin-inline-end: 8px; vertical-align: middle; }
.chat-attach { width: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--bdr); border-radius: var(--rad-14); background: var(--card); cursor: pointer; font-size: 1.2rem; }
.chat-img { display: block; max-width: min(260px, 100%); max-height: 260px; border-radius: var(--rad-12); margin: 2px 0 6px; cursor: zoom-in; object-fit: cover; }

/* The statement as a PDF: an A4 page in fixed light colours, whatever the application's theme. */
.st-pdf { position: fixed; top: 0; left: -12000px; width: 794px; padding: 28px; background: var(--c-white); color: var(--c-blue-11); font-family: inherit;
  --card: var(--c-white); --bg: var(--c-sky-96); --txt: var(--c-blue-11); --txt-m: var(--c-blue-35); --bdr: var(--c-sky-84); --p: var(--c-sky-32); --pl: var(--c-sky-94);
  --s: var(--c-green-29); --sl: var(--c-green-93); --d: var(--c-red-42); --dl: var(--c-red-94); --w: var(--c-orange-37); --wl: var(--c-amber-89); }
.st-pdf .no-print { display: none !important; }
.st-pdf .st-table-wrap { overflow: visible; }
.st-pdf .st-table { font-size: 12px; }
.st-pdf-head { border-bottom: 3px solid var(--c-sky-32); padding-bottom: 12px; margin-bottom: 14px; }
.st-pdf-brand { font-weight: 900; color: var(--c-sky-32); font-size: 14px; }
.st-pdf-head h1 { margin: 6px 0 2px; font-size: 22px; font-weight: 900; }
.st-pdf-head h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--c-sky-32); }
.st-pdf-head div { font-size: 12px; color: var(--c-blue-35); }
.st-btn--pdf { background: var(--c-red-42); border-color: var(--c-red-42); color: var(--c-white); }
.chat-file { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 2px 0 6px; border-radius: var(--rad-12); background: color-mix(in srgb, var(--c-white) 90%, transparent); color: var(--c-blue-11); text-decoration: none; border: 1px solid var(--bdr); }
.chat-file span { font-size: 1.4rem; }
.chat-file b { flex: 1; font-size: .82rem; word-break: break-word; }
.chat-file small { font-size: .65rem; font-weight: 900; color: var(--c-red-42); }

/* A date in a statement sits at the reading end of its column, in either direction. */
[dir="rtl"] .st-day { text-align: right; }

/* A doctor's own-cases button, for doctors only. */
.doc-self-only { display: none; }
body.role-doctor-self .doc-self-only { display: flex; }

/* On a computer the wall's button sits at the foot of the side bar: the bar keeps room for it, so its
   last items can scroll clear of the button instead of hiding under it. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 1024px) { .nav-bar { padding-bottom: 88px !important; } }

/* A centre's resident doctors, in the manager's accounts. */
.cdoc-title { margin: 26px 0 12px; font-size: 1.05rem; font-weight: 900; color: var(--p); }
.cdoc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cdoc-card { display: flex; flex-direction: column; gap: 12px; }
.cdoc-head { display: flex; align-items: center; gap: 12px; }
.cdoc-head h4 { margin: 0; font-size: 1.05rem; color: var(--p); font-weight: 900; }
.cdoc-head small { color: var(--txt-m); font-size: .75rem; }
.cdoc-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cdoc-figs div { background: var(--bg); border-radius: var(--rad-12); padding: 8px 10px; }
.cdoc-figs span { display: block; font-size: .7rem; color: var(--txt-m); font-weight: 700; }
.cdoc-figs b { font-size: 1rem; font-weight: 900; color: var(--txt); }
.cdoc-open { background: var(--pl); padding: 12px; border-radius: var(--rad-12); display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--ph); }

/* =============================================================================================
   The developer's console (#devScreen .dv): a header, three groups of figures, the subscribers,
   and a side column of tools. In the application's own colours, light or dark.
   ============================================================================================= */
#devScreen { background: var(--bg) !important; padding: 0 !important; display: block; }
.dev-box.dv { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 20px 40px; background: none; backdrop-filter: none; box-shadow: none; border-radius: 0; text-align: start; color: var(--txt); }
.dv-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; margin-bottom: 18px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--bdr); }
.dv-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dv-logo { width: 42px; height: 42px; flex: none; border-radius: var(--rad-13); display: grid; place-items: center; color: var(--c-white); background: linear-gradient(135deg, var(--p), var(--c-violet-58)); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--p) 70%, transparent); }
.dv-brand h2 { margin: 0; font-size: 1.15rem; font-weight: 900; color: var(--txt); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dv-sep { color: var(--txt-m); font-weight: 400; }
.dv-version { display: inline-block; margin-top: 3px; font-size: .7rem; font-weight: 800; color: var(--p); background: var(--pl); padding: 2px 10px; border-radius: var(--rad-pill); }
.dv-actions { display: flex; gap: 8px; flex: none; }
.dv-icon-btn { position: relative; height: 42px; min-width: 42px; padding: 0 12px; border-radius: var(--rad-12); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dv-icon-btn:hover { border-color: var(--p); }
.dv-logout { color: var(--d); }
@media (max-width: 560px) { .dv-logout span { display: none; } }
.dv-badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--rad-pill); background: var(--d); color: var(--c-white); font-size: .66rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }

.dv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
@media (max-width: 980px) { .dv-layout { grid-template-columns: 1fr; } }
.dv-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dv-group-h { margin: 0 0 10px; font-size: .92rem; font-weight: 900; color: var(--txt); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dv-group-h small { font-size: .72rem; font-weight: 600; color: var(--txt-m); }
.dv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dv-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .dv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-stat { display: flex; align-items: center; gap: 12px; text-align: start; padding: 14px; border-radius: var(--rad-16); background: var(--card); border: 1px solid var(--bdr); color: var(--txt); font: inherit; cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; min-width: 0; }
.dv-stat:hover { transform: translateY(-2px); border-color: var(--p); box-shadow: var(--shadow-md); }
.dv-stat--alert { border-color: color-mix(in srgb, var(--d) 45%, var(--bdr)); background: linear-gradient(135deg, var(--dl), var(--card) 70%); }
.dv-stat-ico { width: 42px; height: 42px; flex: none; border-radius: var(--rad-12); display: grid; place-items: center; font-size: 1.15rem; }
.dv-i-blue { background: var(--pl); } .dv-i-green { background: var(--sl); } .dv-i-amber { background: var(--wl); } .dv-i-red { background: var(--dl); }
.dv-stat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dv-stat-txt b { font-size: 1.55rem; font-weight: 900; line-height: 1.1; color: var(--txt); }
.dv-stat-txt small { font-size: .74rem; color: var(--txt-m); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-chev { color: var(--txt-m); font-size: 1.3rem; }
[dir="ltr"] .dv-chev { transform: scaleX(-1); }

.dv-users { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-20); padding: 16px; }
.dv-users-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dv-users-head .dv-group-h { margin: 0; }
.dv-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-12); padding: 0 12px; flex: 1; max-width: 360px; min-width: 200px; }
.dv-search:focus-within { border-color: var(--p); }
.dv-search span { color: var(--txt-m); }
.dv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--txt); font: inherit; font-size: .88rem; padding: 10px 0; }
#devScreen .dv-users .group-section { border: 1px solid var(--bdr); border-radius: var(--rad-14); overflow: hidden; background: var(--bg); }
#devScreen .dv-users .group-header { background: var(--card); padding: 12px 14px; font-weight: 800; }
#devScreen .dv-users .group-item { border-radius: 0; border: 0; border-top: 1px solid var(--bdr); margin: 0; background: var(--card); }
#devScreen .dv-users .group-item:hover { background: var(--pl); }

.dv-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
@media (max-width: 980px) { .dv-side { position: static; } }
.dv-panel { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-20); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dv-panel-h { margin: 0 0 4px; font-size: .95rem; font-weight: 900; color: var(--txt); }
.dv-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.dv-mini-stats button { background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-12); padding: 10px; cursor: pointer; text-align: start; font: inherit; color: var(--txt); display: flex; flex-direction: column; }
.dv-mini-stats button:hover { border-color: var(--p); }
.dv-mini-stats b { font-size: 1.3rem; font-weight: 900; } .dv-mini-stats small { font-size: .72rem; color: var(--txt-m); font-weight: 700; }
.dv-label { font-size: .75rem; font-weight: 800; color: var(--txt-m); margin-top: 4px; }
#devScreen .dv-panel .search-input { margin: 0; }
.dv-months { display: flex; gap: 6px; }
.dv-months input { flex: 1; min-width: 0; }
.dv-months button { width: 42px; border-radius: var(--rad-10); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); font: inherit; font-weight: 800; cursor: pointer; }
.dv-months button:hover { border-color: var(--p); color: var(--p); }
.dv-primary { margin: 8px 0 0 !important; }
.dv-code { margin-top: 8px; background: var(--sl); border: 1px dashed var(--s); border-radius: var(--rad-14); padding: 12px; text-align: center; }
.dv-code span { display: block; font-size: .75rem; color: var(--s); font-weight: 700; }
.dv-code strong { display: block; font-size: 1.4rem; letter-spacing: 2px; color: var(--s); cursor: copy; user-select: all; direction: ltr; }
.dv-tool { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: var(--rad-14); padding: 12px; }
.dv-tool div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dv-tool strong { font-size: .85rem; color: var(--txt); } .dv-tool small { font-size: .72rem; color: var(--txt-m); line-height: 1.6; }
.dv-tool button { width: auto; margin: 0; padding: 8px 14px; flex: none; }
@media (max-width: 760px) { .dv-stat-txt small { white-space: normal; } .dv-stat { padding: 12px; gap: 10px; } .dv-stat-ico { width: 36px; height: 36px; } .dv-chev { display: none; } }

/* One warehouse payment, whole (whOpenPaymentDetail). */
.whp-box{max-width:460px}
.whp-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 18px}
.whp-hero strong{font-size:1.9rem;font-weight:900;color:var(--p)}
.whp-hero small{color:var(--txt-m);font-size:.85rem}
.whp-badge{font-size:.75rem;font-weight:800;padding:4px 12px;border-radius:var(--rad-pill);background:var(--bg);color:var(--txt-m)}
.whp-badge.is-ok{background:color-mix(in srgb, var(--c-teal-39) 12%, transparent);color:var(--c-teal-30)}
.whp-badge.is-warn{background:color-mix(in srgb, var(--c-orange-50) 14%, transparent);color:var(--c-orange-37)}
.whp-badge.is-bad{background:color-mix(in srgb, var(--c-red-60) 12%, transparent);color:var(--c-red-51)}
.whp-card{padding:4px 16px}
.whp-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--bdr);font-size:.88rem}
.whp-row:last-child{border-bottom:0}
.whp-row span{color:var(--txt-m)}
.whp-row b,.whp-row strong{text-align:end}
.whp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.whp-actions button{flex:1 1 140px;width:auto}

/* A representative's home: their areas as one line, their own month, and the company's figures left out. */
.rep-areas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.rep-areas-label{font-size:.8rem;font-weight:800;color:var(--txt-m);margin-inline-end:4px}
.rep-areas-chip{font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:var(--rad-pill);background:var(--pl);color:var(--p)}
.rep-areas-none{font-size:.78rem;color:var(--txt-m)}
#warehouseDashTab.is-rep .whx-hero,#warehouseDashTab.is-rep .whx-kpis{display:none}
.fld-customer.is-link{cursor:pointer;transition:border-color .15s,background .15s}
.fld-customer.is-link:hover{border-color:var(--p);background:var(--pl)}
.fld-customer-actions button{width:auto;min-width:38px;padding:0 10px;display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:800;color:var(--txt)}
.fld-customer-search{margin:0 0 8px}
.whx-rank.is-link,.whx-low{cursor:pointer;border-radius:var(--rad-10);transition:background .15s}
.whx-rank.is-link:hover,.whx-low:hover{background:var(--bg)}
@media (max-width:340px){.fld-customer-actions button span{display:none}}
.orders-archive-note{display:block;margin:14px auto 0;padding:8px 16px;border-radius:var(--rad-pill);border:1px dashed var(--bdr);background:transparent;color:var(--txt-m);font-weight:800;font-size:.8rem;cursor:pointer;width:auto}
.orders-archive-note:hover{color:var(--p);border-color:var(--p)}

/* The buyer's suppliers: a search, three filters, and a card per warehouse (supplies.js renderWarehouses). */
.sw-toolbar{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.sw-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-16);padding:6px 6px 6px 14px;padding-inline-start:14px;box-shadow:0 6px 18px -14px color-mix(in srgb, var(--c-blue-11) 35%, transparent)}
.sw-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.92rem;color:var(--txt);padding:8px 0;outline:none}
.sw-scan{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bdr);background:var(--bg);color:var(--p);font-weight:800;font-size:.8rem;border-radius:var(--rad-12);padding:8px 12px;cursor:pointer}
.sw-scan:hover{border-color:var(--p)}
.sw-chips{display:flex;flex-wrap:wrap;gap:6px}
.sw-chip{border:1px solid var(--bdr);background:var(--card);color:var(--txt-m);font-weight:800;font-size:.78rem;border-radius:var(--rad-pill);padding:6px 14px;cursor:pointer;width:auto}
.sw-chip small{opacity:.7;margin-inline-start:2px}
.sw-chip.is-on{background:var(--p);border-color:var(--p);color:var(--c-white)}
.sw-head{margin:18px 0 10px;font-weight:900}
.sw-head--row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:26px}
.sw-head--row h4{margin:0;font-weight:900}
.sw-orders-search{max-width:260px;margin:0!important;padding:8px 12px!important;font-size:.82rem!important}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
#suppliesWarehouseList .sw-card{display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;border-radius:var(--rad-18);margin:0;gap:0;cursor:default;transition:transform .15s,box-shadow .15s,border-color .15s}
#suppliesWarehouseList .sw-card.is-linked{cursor:pointer}
#suppliesWarehouseList .sw-card.is-linked:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px color-mix(in srgb, var(--c-blue-11) 45%, transparent);border-color:var(--sw-tint,var(--p))}
.sw-cover{height:64px;background:linear-gradient(135deg,var(--sw-tint,var(--p)),color-mix(in srgb,var(--sw-tint,var(--p)) 45%,var(--c-white)));background-size:cover;background-position:center;opacity:.9}
.sw-body{position:relative;display:flex;flex-direction:column;gap:3px;padding:30px 14px 14px}
.sw-logo{position:absolute;top:-26px;inset-inline-start:14px;width:52px;height:52px;border-radius:var(--rad-16);background:var(--card);border:2px solid var(--card);box-shadow:0 6px 16px -8px color-mix(in srgb, var(--c-blue-11) 40%, transparent);display:grid;place-items:center;font-size:1.5rem;overflow:hidden}
.sw-logo img{width:100%;height:100%;object-fit:cover}
.sw-name{font-size:.98rem;font-weight:900;color:var(--txt)}
.sw-tagline{font-size:.76rem;color:var(--txt-m);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sw-place{font-size:.74rem;color:var(--txt-m)}
.sw-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}
.sw-empty{text-align:center;padding:26px;color:var(--txt-m);font-weight:700;border:1px dashed var(--bdr);border-radius:var(--rad-16)}
.sw-more{display:block;margin:10px auto 0;width:auto;border:1px solid var(--bdr);background:var(--card);border-radius:var(--rad-pill);padding:8px 18px;font-weight:800;font-size:.8rem;color:var(--p);cursor:pointer}
@media (max-width:600px){.sw-grid{grid-template-columns:1fr}.sw-orders-search{max-width:none;flex-basis:100%}}
@media (max-width:600px){.sw-cover{height:40px}.sw-body{padding-top:28px}}

/* A customer's debt, said on the warehouse's lists: yellow under the owner's line, red at or over it. */
.group-item.is-debt-warn{border-inline-start:4px solid var(--c-orange-50);background:linear-gradient(90deg,color-mix(in srgb, var(--c-orange-50) 8%, transparent),transparent 60%)}
.group-item.is-debt-bad{border-inline-start:4px solid var(--c-red-60);background:linear-gradient(90deg,color-mix(in srgb, var(--c-red-60) 9%, transparent),transparent 60%)}
[dir="rtl"] .group-item.is-debt-warn{background:linear-gradient(270deg,color-mix(in srgb, var(--c-orange-50) 8%, transparent),transparent 60%)}
[dir="rtl"] .group-item.is-debt-bad{background:linear-gradient(270deg,color-mix(in srgb, var(--c-red-60) 9%, transparent),transparent 60%)}
.debt-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:var(--rad-pill);vertical-align:middle}
.debt-chip.is-debt-warn{background:color-mix(in srgb, var(--c-orange-50) 15%, transparent);color:var(--c-orange-37)}
.debt-chip.is-debt-bad{background:color-mix(in srgb, var(--c-red-60) 13%, transparent);color:var(--c-red-51)}

/* The warehouse's own catalogue, as its customers see it, with the stock and the month on each card. */
#whProductsList{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
#whProductsList > :not(.whc-card){grid-column:1/-1}
#whProductsList .whc-card{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;margin:0;overflow:hidden;border-radius:var(--rad-18);cursor:pointer;transition:transform .15s,box-shadow .15s}
#whProductsList .whc-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px color-mix(in srgb, var(--c-blue-11) 45%, transparent)}
#whProductsList .whc-card.is-off{opacity:.62}
.whc-media{position:relative;aspect-ratio:4/3;background:var(--bg);display:grid;place-items:center;overflow:hidden}
.whc-media img{width:100%;height:100%;object-fit:cover}
.whc-noimg{font-size:2.4rem;opacity:.5}
.whc-stock{position:absolute;top:8px;inset-inline-start:8px;font-size:.7rem;font-weight:900;padding:3px 9px;border-radius:var(--rad-pill);background:color-mix(in srgb, var(--c-teal-39) 92%, transparent);color:var(--c-white)}
.whc-stock.is-low{background:color-mix(in srgb, var(--c-orange-50) 95%, transparent)}
.whc-stock.is-out{background:color-mix(in srgb, var(--c-red-60) 95%, transparent)}
.whc-stock.is-off{background:color-mix(in srgb, var(--c-blue-47) 92%, transparent)}
.whc-offer{position:absolute;top:8px;inset-inline-end:8px;font-size:.7rem;font-weight:900;padding:3px 9px;border-radius:var(--rad-pill);background:var(--c-white);color:var(--c-red-51)}
.whc-body{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.whc-brand{font-size:.68rem;font-weight:800;color:var(--p);text-transform:uppercase;letter-spacing:.4px}
.whc-name{font-size:.9rem;font-weight:900;color:var(--txt);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.whc-code{font-size:.68rem;color:var(--txt-m);font-family:ui-monospace,monospace}
.whc-price{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.whc-price b{font-size:1.05rem;font-weight:900;color:var(--p)}
.whc-price s{font-size:.75rem;color:var(--txt-m)}
.whc-price small{font-size:.7rem;color:var(--txt-m)}
.whc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px;border-top:1px dashed var(--bdr);padding-top:8px}
.whc-facts span{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.whc-facts small{font-size:.6rem;color:var(--txt-m);font-weight:700;line-height:1.2}
.whc-facts b{font-size:.85rem;font-weight:900;color:var(--txt)}
.whc-card.is-low .whc-facts span:first-child b{color:var(--c-orange-37)}
.whc-card.is-out .whc-facts span:first-child b{color:var(--c-red-51)}
.whc-alerts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.whc-alert{flex:1 1 240px;width:auto;text-align:start;border-radius:var(--rad-14);padding:10px 14px;font-weight:800;font-size:.82rem;cursor:pointer;border:1px solid}
.whc-alert.is-out{background:color-mix(in srgb, var(--c-red-60) 8%, transparent);border-color:color-mix(in srgb, var(--c-red-60) 35%, transparent);color:var(--c-red-42)}
.whc-alert.is-low{background:color-mix(in srgb, var(--c-orange-50) 10%, transparent);border-color:color-mix(in srgb, var(--c-orange-50) 40%, transparent);color:var(--c-orange-37)}
.whc-alert.is-on{box-shadow:inset 0 0 0 2px currentColor}
@media (max-width:600px){#whProductsList{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.whc-facts small{font-size:.55rem}}
@media (max-width:600px){.whc-facts{grid-template-columns:repeat(2,1fr)}.whc-facts span:nth-child(3){display:none}}

/* Warehouses in the network screen (SUPPLIES.networkHTML). */
.net-wh-head{margin:22px 0 10px;font-weight:900;display:flex;align-items:center;gap:6px}
.net-wh-head small{font-size:.72rem;background:var(--pl);color:var(--p);border-radius:var(--rad-pill);padding:2px 8px}
.net-wh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.net-wh-card{margin:0!important;display:flex;flex-direction:column;gap:12px}
.net-wh-top{display:flex;gap:12px;align-items:flex-start}
.net-wh-logo{position:static;width:46px;height:46px;border-radius:var(--rad-14);flex:none;border:1px solid var(--bdr);box-shadow:none;font-size:1.3rem}
.net-wh-kind{font-size:.66rem;font-weight:800;background:var(--c-indigo-95);color:var(--c-violet-50);border-radius:6px;padding:2px 7px;vertical-align:middle}
.net-wh-tag{margin:2px 0 0;font-size:.76rem;color:var(--txt-m)}
.net-wh-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.staff-head{margin:16px 0 8px;font-weight:900;font-size:.9rem;display:flex;align-items:center;gap:6px}
.staff-head small{font-size:.7rem;background:var(--pl);color:var(--p);border-radius:var(--rad-pill);padding:2px 8px}
.staff-empty{font-size:.8rem;color:var(--txt-m);padding:6px 0}
.staff-how{font-size:.75rem;color:var(--txt-m);line-height:1.8;margin:14px 0 0;background:var(--bg);border-radius:var(--rad-12);padding:10px 12px}

/* A select searched rather than scrolled (searchableSelect in app.js). */
.ss-hidden{display:none!important}
.ss-wrap{position:relative}
.ss-list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:50;max-height:260px;overflow:auto;background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-14);box-shadow:0 18px 40px -18px color-mix(in srgb, var(--c-blue-11) 45%, transparent);padding:6px}
.ss-item{display:block;width:100%;text-align:start;border:0;background:transparent;padding:9px 12px;border-radius:var(--rad-10);font:inherit;font-size:.88rem;color:var(--txt);cursor:pointer}
.ss-item:hover,.ss-item.is-on{background:var(--pl);color:var(--p)}
.ss-hint{padding:10px 12px;font-size:.8rem;color:var(--txt-m)}

/* The clinic board's late column, and the wall lock card in the settings. */
.rw-col--late { border-color: var(--c-red-42); } .rw-col--late .rw-col-head { color: var(--c-red-82); } .rw-col--late .rw-col-head b { background: var(--c-red-60); color: var(--c-white); }
.wl-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-14);padding:16px;margin-bottom:14px}
.wl-title{color:var(--txt);font-size:.9rem;margin-bottom:6px;font-weight:800}
.wl-state{font-size:.75rem;color:var(--txt-m);margin:2px 0 10px;line-height:1.7}
.wl-state.is-on{color:var(--s);font-weight:700}
.wl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.wl-grid label{display:block;font-size:.74rem;font-weight:800;color:var(--txt-m);margin-bottom:4px}
.wl-input{letter-spacing:6px;font-weight:900;text-align:center}
.wl-hint{font-size:.7rem;color:var(--txt-m);margin:8px 0 0}
.ss-list{background:var(--c-white)}
:root[data-theme="dark"] .ss-list{background:var(--c-sky-10-2)}

/* Beside a balance: payments not yet confirmed, and discounts -- neither is "paid". */
.acc-await{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:var(--rad-10);background:color-mix(in srgb, var(--c-orange-50) 10%, transparent);color:var(--c-orange-37);font-size:.78rem;font-weight:800}
.acc-extra{font-size:.76rem;color:var(--txt-m);margin-top:6px}
.st-rev td{background:color-mix(in srgb, var(--c-red-60) 5%, transparent)}
.st-rev .st-name strong{color:var(--c-red-51)}
.prod-cap{display:block;font-size:.68rem;font-weight:800;color:var(--c-orange-37);margin-top:4px;text-align:center}

/* A customer's representative on the warehouse's network page, and the payments' period bar. */
.crep-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.76rem;color:var(--txt-m);margin-top:4px}
.crep-select{width:auto!important;min-width:150px;padding:4px 8px!important;font-size:.76rem!important;margin:0!important}
.psr-bar{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.psr-bar label{display:flex;flex-direction:column;gap:2px;font-size:.72rem;font-weight:800;color:var(--txt-m)}
.psr-bar input{margin:0!important;padding:7px 10px!important;width:auto!important}
.psr-btn{width:auto!important;padding:8px 14px!important;margin:0!important}

/* A resident doctor's cases at the centre: a period, and settled or not, case by case. */
.ec-bar{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.ec-bar label{display:flex;flex-direction:column;gap:2px;font-size:.72rem;font-weight:800;color:var(--txt-m)}
.ec-bar input{margin:0!important;padding:7px 10px!important;width:auto!important}
.ec-chips{display:flex;gap:6px;flex-wrap:wrap}
.ec-chip{width:auto;border:1px solid var(--bdr);background:var(--card);border-radius:var(--rad-pill);padding:6px 12px;font-size:.76rem;font-weight:800;color:var(--txt-m);cursor:pointer}
.ec-chip.is-on{background:var(--p);border-color:var(--p);color:var(--c-white)}
.ec-chip--all{border-color:var(--s);color:var(--s)}
.ec-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rad-14);padding:10px 12px;margin-bottom:14px}
.ec-figs span{display:flex;flex-direction:column;gap:2px}
.ec-figs small{font-size:.7rem;color:var(--txt-m);font-weight:700}
.ec-row{gap:10px}
.ec-row.is-settled{opacity:.75}
.ec-settle{flex:none;width:auto;border:1.5px dashed var(--d);color:var(--d);background:transparent;border-radius:var(--rad-10);padding:6px 10px;font-size:.75rem;font-weight:900;cursor:pointer;white-space:nowrap}
.ec-settle.is-done{border-style:solid;border-color:var(--s);color:var(--c-white);background:var(--s)}

/* The sponsored strip (ticker.js): a slow band over the warehouses screen, and the developer's editor. */
.tkr-strip{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:6px;border-radius:var(--rad-16);background:linear-gradient(90deg,color-mix(in srgb, var(--c-sky-48) 8%, transparent),color-mix(in srgb, var(--c-violet-65) 8%, transparent));border:1px solid var(--bdr);overflow:hidden}
.tkr-tag{flex:none;font-size:.66rem;font-weight:900;letter-spacing:.4px;padding:4px 9px;border-radius:var(--rad-pill);background:var(--txt);color:var(--card)}
.tkr-viewport{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,var(--c-black) 6%,var(--c-black) 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--c-black) 6%,var(--c-black) 94%,transparent)}
.tkr-track{display:flex;width:max-content;animation:tkr-roll linear infinite}
.tkr-strip:hover .tkr-track{animation-play-state:paused}
.tkr-run{display:flex;gap:10px;padding-inline-end:10px}
.tkr-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 16px;border-radius:var(--rad-pill);background:linear-gradient(135deg,var(--tkr-a),var(--tkr-b));color:var(--c-white);font-size:.84rem;font-weight:700;text-decoration:none;box-shadow:0 6px 14px -8px var(--tkr-a)}
.tkr-item b{font-weight:900}
.tkr-item i{font-style:normal;opacity:.85}
@keyframes tkr-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .tkr-track{animation-name:tkr-roll-rtl}
@keyframes tkr-roll-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion: reduce){.tkr-track{animation:none}.tkr-viewport{overflow-x:auto}}
.tkr-dev-hint{font-size:.75rem;color:var(--txt-m);margin:0 0 10px}
.tkr-dev-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end;margin-bottom:12px}
.tkr-dev-form #devAdText{grid-column:1/-1}
.tkr-dev-form label{display:flex;flex-direction:column;gap:2px;font-size:.72rem;font-weight:800;color:var(--txt-m)}
.tkr-dev-form .search-input,.tkr-dev-form .btn-main{margin:0!important}
.tkr-dev-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--bdr);border-radius:var(--rad-12);margin-bottom:8px}
.tkr-dev-row.is-off{opacity:.55}
.tkr-dev-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.tkr-dev-main span{font-size:.84rem}
.tkr-dev-main small{font-size:.7rem;color:var(--txt-m)}
.tkr-dev-actions{display:flex;gap:4px;flex:none}
.tkr-dev-actions button{width:34px;height:34px;border-radius:var(--rad-10);border:1px solid var(--bdr);background:var(--bg);cursor:pointer}
.tkr-dev-empty{font-size:.8rem;color:var(--txt-m);padding:8px 0}

/* Themes: each sets the whole surface -- the colour, the page, the cards, the lines -- in light and dark. */
:root[data-palette="gold"] { --p: var(--c-orange-41); --ph: var(--c-orange-32); --pl: var(--c-orange-90); --bg: var(--c-orange-94); --card: color-mix(in srgb, var(--c-amber-99) 95%, transparent); --bdr: var(--c-orange-84); --txt: var(--c-orange-10); --glow1: rgba(176,141,87,.14); --glow2: rgba(23,20,15,.04); }
:root[data-palette="gold"][data-theme="dark"] { --p: var(--c-orange-65); --ph: var(--c-orange-52); --pl: var(--c-orange-13); --bg: var(--c-orange-5); --card: color-mix(in srgb, var(--c-orange-10-2) 90%, transparent); --bdr: var(--c-orange-18); --txt: var(--c-orange-93); }
@media (prefers-color-scheme: dark) { :root[data-palette="gold"]:not([data-theme="light"]) { --p: var(--c-orange-65); --ph: var(--c-orange-52); --pl: var(--c-orange-13); --bg: var(--c-orange-5); --card: color-mix(in srgb, var(--c-orange-10-2) 90%, transparent); --bdr: var(--c-orange-18); --txt: var(--c-orange-93); } }
:root[data-palette="graphite"] { --p: var(--c-blue-27); --ph: var(--c-blue-17); --pl: var(--c-sky-91); --bg: var(--c-blue-95-2); --bdr: var(--c-sky-89); --glow1: rgba(51,65,85,.07); --glow2: rgba(100,116,139,.05); }
:root[data-palette="graphite"][data-theme="dark"] { --p: var(--c-sky-84); --ph: var(--c-blue-65); --pl: var(--c-blue-17-2); --bg: var(--c-blue-5-2); --card: color-mix(in srgb, var(--c-blue-12-3) 90%, transparent); --bdr: var(--c-blue-18); }
@media (prefers-color-scheme: dark) { :root[data-palette="graphite"]:not([data-theme="light"]) { --p: var(--c-sky-84); --ph: var(--c-blue-65); --pl: var(--c-blue-17-2); --bg: var(--c-blue-5-2); --card: color-mix(in srgb, var(--c-blue-12-3) 90%, transparent); --bdr: var(--c-blue-18); } }
:root[data-palette="teal"] { --p: var(--c-cyan-26); --ph: var(--c-cyan-22); --pl: var(--c-teal-89); --bg: var(--c-cyan-96); --bdr: var(--c-cyan-88); --glow1: rgba(13,148,136,.09); --glow2: rgba(56,189,248,.05); }
:root[data-palette="teal"][data-theme="dark"] { --p: var(--c-teal-50); --ph: var(--c-teal-40); --pl: var(--c-cyan-11); --bg: var(--c-cyan-5); --card: color-mix(in srgb, var(--c-cyan-11-2) 85%, transparent); --bdr: var(--c-cyan-14); }
@media (prefers-color-scheme: dark) { :root[data-palette="teal"]:not([data-theme="light"]) { --p: var(--c-teal-50); --ph: var(--c-teal-40); --pl: var(--c-cyan-11); --bg: var(--c-cyan-5); --card: color-mix(in srgb, var(--c-cyan-11-2) 85%, transparent); --bdr: var(--c-cyan-14); } }
:root[data-palette="emerald"] { --p: var(--c-teal-24); --ph: var(--c-teal-20); --pl: var(--c-green-90); --bg: var(--c-teal-96-2); --bdr: var(--c-teal-89-2); --glow1: rgba(4,120,87,.08); --glow2: rgba(14,165,233,.05); }
:root[data-palette="emerald"][data-theme="dark"] { --p: var(--c-teal-52); --ph: var(--c-teal-39); --pl: var(--c-teal-12-3); --bg: var(--c-teal-5-2); --card: color-mix(in srgb, var(--c-teal-12-4) 85%, transparent); --bdr: var(--c-teal-14-2); }
@media (prefers-color-scheme: dark) { :root[data-palette="emerald"]:not([data-theme="light"]) { --p: var(--c-teal-52); --ph: var(--c-teal-39); --pl: var(--c-teal-12-3); --bg: var(--c-teal-5-2); --card: color-mix(in srgb, var(--c-teal-12-4) 85%, transparent); --bdr: var(--c-teal-14-2); } }
:root[data-palette="royal"] { --p: var(--c-violet-50); --ph: var(--c-violet-42); --pl: var(--c-indigo-95); --bg: var(--c-indigo-97); --bdr: var(--c-violet-92-2); --glow1: rgba(109,40,217,.08); --glow2: rgba(236,72,153,.05); }
:root[data-palette="royal"][data-theme="dark"] { --p: var(--c-violet-76); --ph: var(--c-violet-66); --pl: var(--c-violet-17-2); --bg: var(--c-indigo-7); --card: color-mix(in srgb, var(--c-indigo-16) 85%, transparent); --bdr: var(--c-violet-20); }
@media (prefers-color-scheme: dark) { :root[data-palette="royal"]:not([data-theme="light"]) { --p: var(--c-violet-76); --ph: var(--c-violet-66); --pl: var(--c-violet-17-2); --bg: var(--c-indigo-7); --card: color-mix(in srgb, var(--c-indigo-16) 85%, transparent); --bdr: var(--c-violet-20); } }
:root[data-palette="sunset"] { --p: var(--c-orange-40); --ph: var(--c-orange-34); --pl: var(--c-orange-92); --bg: var(--c-orange-96-2); --bdr: var(--c-orange-89); --glow1: rgba(234,88,12,.08); --glow2: rgba(245,158,11,.06); }
:root[data-palette="sunset"][data-theme="dark"] { --p: var(--c-orange-61); --ph: var(--c-orange-53); --pl: var(--c-orange-14-3); --bg: var(--c-orange-5-2); --card: color-mix(in srgb, var(--c-orange-12) 85%, transparent); --bdr: var(--c-orange-16); }
@media (prefers-color-scheme: dark) { :root[data-palette="sunset"]:not([data-theme="light"]) { --p: var(--c-orange-61); --ph: var(--c-orange-53); --pl: var(--c-orange-14-3); --bg: var(--c-orange-5-2); --card: color-mix(in srgb, var(--c-orange-12) 85%, transparent); --bdr: var(--c-orange-16); } }
:root[data-palette="rose"] { --p: var(--c-rose-42); --ph: var(--c-rose-35); --pl: var(--c-pink-95); --bg: var(--c-pink-97); --bdr: var(--c-pink-91); --glow1: rgba(190,24,93,.07); --glow2: rgba(168,85,247,.05); }
:root[data-palette="rose"][data-theme="dark"] { --p: var(--c-pink-70); --ph: var(--c-pink-60); --pl: var(--c-pink-15); --bg: var(--c-pink-5); --card: color-mix(in srgb, var(--c-pink-13) 85%, transparent); --bdr: var(--c-pink-16); }
@media (prefers-color-scheme: dark) { :root[data-palette="rose"]:not([data-theme="light"]) { --p: var(--c-pink-70); --ph: var(--c-pink-60); --pl: var(--c-pink-15); --bg: var(--c-pink-5); --card: color-mix(in srgb, var(--c-pink-13) 85%, transparent); --bdr: var(--c-pink-16); } }
.theme-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.theme-card{display:flex;flex-direction:column;gap:6px;padding:6px 6px 8px;border-radius:var(--rad-16);border:2px solid var(--bdr);background:var(--card);cursor:pointer;font:inherit;color:var(--txt);transition:transform .15s,border-color .15s,box-shadow .15s}
.theme-card:hover{transform:translateY(-2px)}
.theme-card.is-active{border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}
.tc-mock{position:relative;display:grid;grid-template-columns:22% 1fr;gap:4px;height:62px;padding:5px;border-radius:var(--rad-11);background:var(--tc-bg);overflow:hidden}
.tc-side{border-radius:var(--rad-7);background:var(--tc-card);display:flex;flex-direction:column;gap:3px;padding:4px 3px}
.tc-side i{display:block;height:5px;border-radius:3px;background:var(--tc-line)}
.tc-side i:first-child{background:var(--tc-p)}
.tc-main{display:flex;flex-direction:column;gap:4px}
.tc-head{height:12px;border-radius:5px;background:var(--tc-card)}
.tc-body{flex:1;border-radius:var(--rad-7);background:var(--tc-card);padding:5px;display:flex;flex-direction:column;gap:3px}
.tc-body i{display:block;height:4px;width:70%;border-radius:3px;background:var(--tc-line)}
.tc-body b{display:block;margin-top:auto;height:8px;width:45%;border-radius:4px;background:var(--tc-p)}
.tc-name{font-size:.74rem;font-weight:800;text-align:center}
.theme-card.is-active .tc-name{color:var(--p)}
.theme-mode{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bg);padding:4px;border-radius:var(--rad-14);border:1px solid var(--bdr);margin-bottom:12px}
.theme-mode button{border:0;background:transparent;border-radius:var(--rad-10);padding:9px 6px;font:inherit;font-size:.8rem;font-weight:800;color:var(--txt-m);cursor:pointer}
.theme-mode button.is-on{background:var(--card);color:var(--p);box-shadow:var(--shadow-sm)}
@media (max-width:520px){.theme-pick{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Over-the-air updates (ota.js): the question on the phone, and the developer's panel. */
.ota-layer{position:fixed;inset:0;z-index:2000000;display:none;align-items:center;justify-content:center;padding:18px;background:color-mix(in srgb, var(--c-blue-5) 62%, transparent);backdrop-filter:blur(6px)}
.ota-layer.is-open{display:flex}
.ota-card{width:100%;max-width:420px;background:var(--card);color:var(--txt);border:1px solid var(--bdr);border-radius:var(--rad-24);padding:24px;text-align:center;box-shadow:0 30px 60px -20px color-mix(in srgb, var(--c-black) 50%, transparent)}
.ota-ico{font-size:2.2rem}
.ota-card h3{margin:8px 0 4px;font-weight:900}
.ota-sub{margin:0 0 12px;font-size:.85rem;color:var(--txt-m);line-height:1.7}
.ota-notes{text-align:start;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rad-14);padding:12px;font-size:.84rem;line-height:1.8;max-height:40vh;overflow:auto;margin-bottom:14px}
.ota-bar{height:8px;border-radius:var(--rad-pill);background:var(--bg);overflow:hidden;margin-bottom:12px}
.ota-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-blue-53),var(--c-cyan-43));transition:width .2s}
.ota-actions{display:flex;flex-direction:column;gap:8px}
.ota-go{border:0;border-radius:var(--rad-14);padding:13px;font:inherit;font-weight:900;color:var(--c-white);background:linear-gradient(135deg,var(--c-blue-48),var(--c-cyan-43));cursor:pointer}
.ota-go:disabled{opacity:.7}
.ota-later{border:1px solid var(--bdr);border-radius:var(--rad-14);padding:11px;font:inherit;font-weight:800;background:transparent;color:var(--txt-m);cursor:pointer}
.ota-dev{margin-bottom:10px}
.ota-dev-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--bdr);font-size:.82rem}
.ota-dev-row span{color:var(--txt-m)}
.ota-dev-ok{font-size:.8rem;color:var(--s);font-weight:800;margin-top:8px}

/* The brand (src/images/brand/logo.svg): in the top bar, the cards, the side bar and the hero. */
.auth-mark--logo{background:none!important;border:0!important;width:auto!important;height:auto!important}
.auth-logo-img{width:48px;height:48px;border-radius:var(--rad-14);display:block;box-shadow:0 10px 22px -12px color-mix(in srgb, var(--c-blue-53) 70%, transparent)}
.side-logo--img{background:none!important;padding:0}
.side-logo-img{width:42px;height:42px;border-radius:var(--rad-12);display:block}

/* Consent to the privacy policy at sign-up, and its link under the front page. */
.reg-consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;padding:12px 14px;border-radius:var(--rad-14);background:color-mix(in srgb, var(--c-blue-53) 6%, transparent);border:1px solid color-mix(in srgb, var(--c-blue-53) 18%, transparent);font-size:.84rem;line-height:1.7;cursor:pointer}
.reg-consent input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--c-blue-53)}
.reg-consent a{color:var(--c-blue-48);font-weight:800}
.reg-consent.is-missing{border-color:var(--c-red-60);background:color-mix(in srgb, var(--c-red-60) 7%, transparent)}

/* The sponsored band (ticker.js), held under each header and along the foot of the walls. */
.tkr-bar{position:sticky;z-index:80;display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--card);border-bottom:1px solid var(--bdr)}
.tkr-bar[hidden]{display:none}
.tkr-bar .tkr-tag{flex:none;font-size:.62rem;font-weight:900;letter-spacing:.4px;padding:3px 8px;border-radius:var(--rad-pill);background:var(--txt);color:var(--card);opacity:.8}
/* No mask and no promoted layer: on an old graphics driver the masked, promoted band painted nothing at all. */
.tkr-bar .tkr-viewport{flex:1;min-width:0;overflow:hidden;border-radius:var(--rad-pill)}
.tkr-bar .tkr-track{display:flex;width:max-content;animation:none;transform:none;position:relative;left:100vw}
.tkr-bar .tkr-viewport{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tkr-bar .tkr-viewport[dir="rtl"] .tkr-track{margin-inline-start:0}
.tkr-bar .tkr-viewport.is-still{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
.tkr-bar .tkr-viewport.is-still .tkr-track{left:0!important}
.tkr-bar .tkr-item img{-webkit-user-drag:none;pointer-events:none}
.tkr-bar .tkr-run{display:flex;gap:10px;padding-inline-end:10px}
.tkr-bar .tkr-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:5px 14px 5px 6px;padding-inline-start:6px;border:0;border-radius:var(--rad-pill);background:linear-gradient(135deg,var(--tkr-a),var(--tkr-b));color:var(--c-white);font:inherit;font-size:.86rem;font-weight:700;cursor:default;box-shadow:0 6px 14px -9px var(--tkr-a);min-height:40px}
.tkr-bar .tkr-item.is-link{cursor:pointer}
.tkr-bar .tkr-item.is-link:hover{filter:brightness(1.08)}
.tkr-bar .tkr-item img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--c-white);flex:none}
.tkr-bar .tkr-item b{font-weight:900}
.tkr-bar .tkr-item i{font-style:normal;opacity:.9;font-size:1.1rem;line-height:1}
.tkr-bar .tkr-fold{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--bdr);background:var(--bg);color:var(--txt-m);font-size:.75rem;cursor:pointer}
.tkr-bar.is-folded{justify-content:flex-end;padding:3px 10px;background:transparent;border-bottom:0;backdrop-filter:none;pointer-events:none}
.tkr-bar .tkr-unfold{pointer-events:auto;border:1px solid var(--bdr);background:var(--card);border-radius:var(--rad-pill);padding:4px 10px;font:inherit;font-size:.72rem;font-weight:800;color:var(--txt-m);cursor:pointer;box-shadow:var(--shadow-sm)}
.tkr-bar--wall{position:relative;top:auto!important;flex:none;background:var(--w-head,var(--c-blue-11));border-bottom:1px solid var(--w-line,var(--c-blue-17));border-top:0}
.tkr-bar--wall .tkr-tag{background:var(--c-white);color:var(--c-blue-11)}
.tkr-bar--wall .tkr-fold,.tkr-bar--wall .tkr-unfold{background:transparent;color:var(--c-sky-84);border-color:var(--c-blue-27)}
@media (max-width:600px){.tkr-bar{padding:5px 8px}.tkr-bar .tkr-item{font-size:.8rem;min-height:36px}.tkr-bar .tkr-item img{width:26px;height:26px}}
/* The developer's editor for them. */
.tkr-dev-image{display:flex;align-items:center;gap:10px;grid-column:1/-1}
.tkr-dev-upload{width:auto!important;margin:0!important;cursor:pointer}
.tkr-dev-preview{display:inline-flex;align-items:center;gap:6px}
.tkr-dev-preview img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--bdr)}
.tkr-dev-preview button{border:0;background:var(--dl);color:var(--d);border-radius:50%;width:24px;height:24px;cursor:pointer}
.tkr-dev-pick{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.tkr-dev-pick[hidden]{display:none}
.tkr-dev-chosen{font-size:.8rem;font-weight:800;color:var(--s)}
.tkr-dev-targets{display:flex;flex-wrap:wrap;gap:6px}
.tkr-dev-targets button{border:1px solid var(--bdr);background:var(--bg);border-radius:var(--rad-10);padding:6px 10px;font:inherit;font-size:.78rem;cursor:pointer;color:var(--txt)}
.tkr-dev-targets button:hover{border-color:var(--p);color:var(--p)}
.tkr-dev-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.tkr-dev-form label[hidden]{display:none!important}
.tkr-dev-form label[hidden]{display:none!important}
.ota-last{margin-top:8px;font-size:.74rem;color:var(--txt-m);background:var(--bg);border-radius:var(--rad-10);padding:8px 10px;direction:ltr;text-align:left;word-break:break-word}
.lp-soon-badge{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:var(--rad-pill);background:var(--wl,var(--c-amber-89));color:var(--c-orange-37);font-size:.78rem;font-weight:900}
/* A little bigger, and never closed. */
.tkr-bar{padding:8px 12px}
.tkr-bar .tkr-item{font-size:.98rem;min-height:48px;padding:6px 18px 6px 7px;gap:10px}
.tkr-bar .tkr-item img{width:38px;height:38px}
.tkr-bar .tkr-tag{font-size:.7rem;padding:4px 10px}
.tkr-bar .tkr-fold,.tkr-bar .tkr-unfold{display:none!important}
@media (max-width:600px){.tkr-bar{padding:6px 8px}.tkr-bar .tkr-item{font-size:.9rem;min-height:44px}.tkr-bar .tkr-item img{width:34px;height:34px}}

/* The phone's own bar (clock, battery) above everything that covers the whole screen: Capacitor
   draws the page edge to edge, so each full-screen layer keeps the bar's height clear. */
html.capacitor-native { --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
html.capacitor-native #loginScreen, html.capacitor-native #registerScreen, html.capacitor-native #devScreen { padding-top: calc(20px + var(--sat)); padding-bottom: calc(20px + var(--sab)); }
html.capacitor-native .lab-wall { padding-top: var(--sat); padding-bottom: var(--sab); }
html.capacitor-native .modal { padding-top: var(--sat); }

/* The wall on a phone: its name and tools on one line, the search under them, small; the clock and
   the card sizes are for a wall screen, not a phone. */
@media (max-width: 600px) {
  .lab-wall .wall-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 8px; padding: 8px 10px; align-items: center; }
  .lab-wall .wall-head > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
  .lab-wall .wall-head .wall-head-end { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 4px; }
  .lab-wall .wall-head .wall-find { grid-column: 1 / -1; grid-row: 2; order: 0; flex-basis: auto; margin: 0; max-width: none; }
  .lab-wall .wall-title { font-size: 1.02rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lab-wall .wall-counts { font-size: .78rem; gap: 8px; margin-top: 1px; }
  .lab-wall .wall-clock, .lab-wall .wall-exit-txt { display: none !important; }
  .lab-wall .wall-sizes { padding: 2px; gap: 0; border-radius: var(--rad-10); }
  .lab-wall .wall-size { width: 28px !important; height: 28px !important; border-radius: var(--rad-8); }
  .lab-wall .wall-size svg { width: 14px; height: 14px; }
  .lab-wall .wall-exit { padding: 6px 10px; }
  .lab-wall .wall-tool { width: 34px !important; height: 34px !important; border-radius: var(--rad-10); }
  .lab-wall .wall-tool svg { width: 18px; height: 18px; }
  .lab-wall .wall-exit { padding: 6px 9px; font-size: .82rem; border-radius: var(--rad-10); }
  .lab-wall .wall-find input { padding: 8px 12px; padding-inline-start: 36px; font-size: .92rem; border-radius: var(--rad-12); }
  .lab-wall .wall-find svg { width: 17px; height: 17px; inset-inline-start: 12px; }
  .tkr-bar.tkr-bar--wall { padding: 4px 8px; }
  .tkr-bar.tkr-bar--wall .tkr-item { min-height: 34px; font-size: .8rem; padding: 3px 12px 3px 4px; }
  .tkr-bar.tkr-bar--wall .tkr-item img { width: 26px; height: 26px; }
  .tkr-bar.tkr-bar--wall .tkr-tag { font-size: .6rem; padding: 2px 7px; }
}
/* The forgotten code. */
.lab-wall .wall-pin-forgot { display: block; margin: 6px auto 0; background: transparent; border: none; color: var(--w-accent, var(--c-sky-60)); font-weight: 800; font-size: .92rem; cursor: pointer; font-family: inherit; text-decoration: underline; }
.lab-wall .wall-forgot { z-index: 9; }
.lab-wall .wall-forgot-p { margin: 0 0 12px; color: var(--w-mute, var(--c-blue-65)); font-size: .92rem; line-height: 1.6; }
.lab-wall .wall-forgot-input { width: 100%; box-sizing: border-box; background: var(--w-tool); color: var(--w-txt); border: 1.5px solid var(--w-tool-bd); border-radius: var(--rad-14); padding: 12px 14px; font-size: 1.05rem; font-family: inherit; }
.lab-wall .wall-forgot-open { width: 100%; height: 50px; font-size: 1.05rem; margin-top: 4px; }
.lab-wall .wall-forgot-send { display: block; width: 100%; margin-top: 10px; font-size: .9rem; color: var(--w-accent, var(--c-sky-60)); }
/* Inside the installed app there is nothing to download. */
html.capacitor-native .lx-btn--app { display: none !important; }

/* The clinic's, the doctor's and the warehouse's wall in three sizes, as the laboratory's. */
.role-wall.wall-size-s .rw-board { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.role-wall.wall-size-s .rw-col { border-radius: var(--rad-14); }
.role-wall.wall-size-s .rw-col-head { padding: 8px 10px; font-size: .92rem; }
.role-wall.wall-size-s .rw-col-head b { min-width: 24px; height: 24px; font-size: .8rem; }
.role-wall.wall-size-s .rw-col-body { padding: 6px; gap: 5px; }
.role-wall.wall-size-s .rw-row { padding: 6px 8px; gap: 6px; border-radius: var(--rad-10); }
.role-wall.wall-size-s .rw-row-main b { font-size: .95rem; }
.role-wall.wall-size-s .rw-row-main span, .role-wall.wall-size-s .rw-row-main em { font-size: .74rem; }
.role-wall.wall-size-s .rw-due, .role-wall.wall-size-s .rw-stock { font-size: .72rem; }
.role-wall.wall-size-s .rw-go { min-height: 32px; padding: 5px 9px; font-size: .8rem; border-radius: var(--rad-9); }
.role-wall.wall-size-s .rw-cases { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; padding: 8px; }
.role-wall.wall-size-s .rw-case { padding: 10px; gap: 6px; border-radius: var(--rad-12); }
.role-wall.wall-size-s .rw-case-top b { font-size: 1rem; }
.role-wall.wall-size-m .rw-board { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.role-wall.wall-size-m .rw-col-head { padding: 11px 13px; font-size: 1.04rem; }
.role-wall.wall-size-m .rw-col-head b { min-width: 28px; height: 28px; font-size: .9rem; }
.role-wall.wall-size-m .rw-col-body { padding: 8px; gap: 6px; }
.role-wall.wall-size-m .rw-row { padding: 9px 10px; gap: 8px; border-radius: var(--rad-12); }
.role-wall.wall-size-m .rw-row-main b { font-size: 1.08rem; }
.role-wall.wall-size-m .rw-row-main span, .role-wall.wall-size-m .rw-row-main em { font-size: .82rem; }
.role-wall.wall-size-m .rw-go { min-height: 38px; padding: 8px 11px; font-size: .9rem; border-radius: var(--rad-10); }
.role-wall.wall-size-m .rw-cases { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; padding: 10px; }
.role-wall.wall-size-m .rw-case { padding: 13px; gap: 8px; }
.role-wall.wall-size-m .rw-case-top b { font-size: 1.15rem; }

/* The privacy policy, over whatever is open (the login, the settings, the app). */
.privacy-viewer { position: fixed; inset: 0; z-index: 2147482000; display: none; flex-direction: column; background: var(--card, var(--c-white)); }
.privacy-viewer.is-open { display: flex; }
.privacy-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bdr, var(--c-sky-91)); background: var(--card, var(--c-white)); color: var(--txt, var(--c-blue-11)); }
html.capacitor-native .privacy-viewer-bar { padding-top: calc(12px + var(--sat, 0px)); }
.privacy-viewer-bar b { font-weight: 900; font-size: 1rem; }
.privacy-viewer-bar button { width: 40px; height: 40px; border-radius: var(--rad-12); border: 1px solid var(--bdr, var(--c-sky-91)); background: var(--bg, var(--c-sky-98)); color: var(--txt, var(--c-blue-11)); font-size: 1.1rem; cursor: pointer; }
.privacy-viewer iframe { flex: 1; width: 100%; border: 0; background: var(--c-white); }

/* The conversation's tools. */
.chat-tools { flex-shrink: 0; margin-top: 8px; border: 1px solid var(--bdr); border-radius: var(--rad-16); background: var(--card); padding: 8px; box-shadow: var(--shadow-sm); max-height: 240px; display: flex; flex-direction: column; gap: 8px; }
.chat-tools[hidden] { display: none; }
.chat-tools-tabs { display: flex; gap: 6px; overflow-x: auto; flex-shrink: 0; }
.chat-tools-tabs button { flex: none; border: 1px solid var(--bdr); background: var(--bg); color: var(--txt-m); border-radius: var(--rad-pill); padding: 6px 12px; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.chat-tools-tabs button.on { background: var(--p); border-color: var(--p); color: var(--c-white); }
.chat-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; overflow-y: auto; }
.chat-emoji button { border: 0; background: transparent; font-size: 1.45rem; height: 42px; border-radius: var(--rad-10); cursor: pointer; }
.chat-emoji button:hover, .chat-emoji button:active { background: var(--bg); transform: scale(1.12); }
.chat-phrases { display: flex; flex-wrap: wrap; gap: 6px; overflow-y: auto; }
.chat-phrases button { border: 1px solid var(--bdr); background: linear-gradient(135deg, var(--pl), var(--card)); color: var(--txt); border-radius: var(--rad-14); padding: 8px 12px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; text-align: start; }
.chat-phrases button:hover { border-color: var(--p); color: var(--p); }
.chat-shades { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; overflow-y: auto; }
.chat-shades button { border: 1px solid var(--bdr); border-radius: var(--rad-12); padding: 9px 4px; font: inherit; font-size: .85rem; font-weight: 900; cursor: pointer; color: var(--c-orange-17); background: linear-gradient(180deg, var(--c-orange-97), var(--c-amber-86)); }
.chat-shades button:hover { border-color: var(--p); }

/* Who is here, and what was read. */
.chat-av { position: relative; display: inline-flex; flex: none; }
.chat-dot { position: absolute; bottom: 1px; inset-inline-end: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-green-45); border: 2px solid var(--card); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-green-45) 25%, transparent); }
.chat-presence { display: block; font-size: .72rem; font-weight: 700; color: var(--txt-m); margin-top: 2px; }
.chat-presence.is-on { color: var(--c-green-36); }
.chat-presence.is-on::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green-45); margin-inline-end: 5px; vertical-align: 1px; }
.chat-tick { font-weight: 900; letter-spacing: -2px; opacity: .75; }
.chat-tick.is-read { color: var(--c-sky-74); opacity: 1; }
.bill-badge.pres-on { background: var(--c-green-93); color: var(--c-green-29); }
.bill-badge.pres-seen { background: var(--bg); color: var(--txt-m); }
.bill-badge.pres-idle { background: var(--c-amber-89); color: var(--c-orange-37); }
/* The invitation to turn notifications on. */
.push-invite { position: fixed; inset: 0; z-index: 2147481000; background: color-mix(in srgb, var(--c-blue-11) 55%, transparent); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + var(--sab, 0px)); }
@media (min-width: 700px) { .push-invite { align-items: center; } }
.push-invite-card { width: min(420px, 100%); background: var(--card); color: var(--txt); border-radius: var(--rad-26); padding: 26px 22px 20px; box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 35%, transparent); text-align: center; animation: push-in .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes push-in { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.push-invite-bell { width: 64px; height: 64px; margin: -58px auto 10px; border-radius: var(--rad-22); display: grid; place-items: center; font-size: 2rem; background: linear-gradient(135deg, var(--c-sky-48), var(--c-blue-53)); box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--c-blue-53) 60%, transparent); }
.push-invite-card h3 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 900; }
.push-invite-card p { margin: 0 0 10px; color: var(--txt-m); font-size: .92rem; }
.push-invite-card ul { list-style: none; margin: 0 0 12px; padding: 0; text-align: start; display: flex; flex-direction: column; gap: 8px; }
.push-invite-card li { background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 10px 12px; font-weight: 700; font-size: .9rem; }
.push-invite-card small { display: block; color: var(--txt-m); margin-bottom: 14px; }
.push-invite-actions { display: flex; flex-direction: column; gap: 8px; }
.push-invite-actions .btn-main, .push-invite-actions .btn-cancel { margin: 0; width: 100%; }
/* The conversation's box to write in sits above the phone's own buttons (back, home): the window's
   own inline padding took the space the system bar needs. */
html.capacitor-native #chatThreadModal .modal-content { padding-bottom: calc(22px + var(--sab, 0px)) !important; }
html.capacitor-native #messagesModalContent { padding-bottom: calc(22px + var(--sab, 0px)) !important; }
@supports (height: 100dvh) { html.capacitor-native #chatThreadModal .modal-content { height: calc(100dvh - 40px - var(--sat, 0px)) !important; } }

/* Voice messages: the bar while recording, and the player in a conversation. */
.chat-voice-bar { flex-shrink: 0; margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rad-16); background: var(--c-red-97); border: 1px solid var(--c-red-89); color: var(--c-red-35); }
.chat-voice-bar[hidden] { display: none; }
.chat-voice-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-red-60); animation: voice-pulse 1s ease-in-out infinite; flex: none; }
@keyframes voice-pulse { 50% { opacity: .35; transform: scale(.8); } }
.chat-voice-bar b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.chat-voice-hint { flex: 1; font-size: .8rem; font-weight: 700; }
.chat-voice-cancel { border: 1px solid var(--c-red-89); background: var(--c-white); color: var(--c-red-35); border-radius: var(--rad-12); padding: 8px 12px; font: inherit; font-weight: 800; cursor: pointer; }
.chat-voice-send { border: 0; background: var(--p); color: var(--c-white); border-radius: var(--rad-12); padding: 8px 16px; font: inherit; font-weight: 900; cursor: pointer; }
.chat-voice { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.chat-voice audio { width: 230px; max-width: 100%; height: 40px; }
.chat-voice small { font-size: .68rem; opacity: .8; }
/* Five small buttons beside the box to write in, on a phone. */
@media (max-width: 480px) {
  #chatThreadModal form, #chatThreadPane form { flex-wrap: wrap; row-gap: 6px; }
  #chatThreadModal form #chatMessageInput, #chatThreadPane form #chatMessageInput { order: 1; flex: 1 1 70% !important; min-width: 0; }
  #chatThreadModal form button[type="submit"], #chatThreadPane form button[type="submit"] { order: 2; }
  #chatThreadModal form .chat-attach, #chatThreadPane form .chat-attach { order: 3; width: 46px; height: 38px; font-size: 1.05rem; border-radius: var(--rad-12); }
}

/* The program's own messages: in the band, and their small form in the console. */
.tkr-bar .tkr-item.is-official { background: linear-gradient(135deg, var(--c-blue-12), var(--c-blue-48) 55%, var(--c-cyan-43)); box-shadow: 0 6px 16px -9px var(--c-blue-48); }
.tkr-bar .tkr-item.is-official img { background: var(--c-white); padding: 3px; object-fit: contain; }
.tkr-official { border: 1.5px solid color-mix(in srgb, var(--c-blue-53) 35%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue-53) 6%, transparent), color-mix(in srgb, var(--c-cyan-43) 6%, transparent)); border-radius: var(--rad-16); padding: 12px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.tkr-official-head { display: flex; align-items: center; gap: 8px; }
.tkr-official-head img { width: 30px; height: 30px; border-radius: var(--rad-9); }
.tkr-official-head b { font-size: 1rem; font-weight: 900; }
.tkr-official-head small { color: var(--txt-m); font-weight: 700; font-size: .78rem; margin-inline-start: auto; }
.tkr-official-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.tkr-official-row label { flex: 1; min-width: 150px; margin: 0; }
.tkr-official-row .btn-main { width: auto; margin: 0; padding: 11px 18px; }
/* An Android download offered to an iPhone is a file it cannot open. */
html.is-ios-web .lx-btn--app { display: none !important; }

/* Deleting one's own account: at the end of the settings, in the colour of a danger. */
.danger-card { border: 1px solid var(--dl, var(--c-red-94)) !important; }
.danger-note { margin: 4px 0 10px; color: var(--txt-m); font-size: .85rem; line-height: 1.7; }
.danger-btn { color: var(--d, var(--c-red-51)) !important; border-color: var(--d, var(--c-red-51)) !important; margin: 0 !important; }
/* Inside the installed apps there is no way to subscribe or pay: the stores allow none outside
   their own, and a subscription is arranged with the business directly. The website keeps it. */
html.capacitor-native #lpSubscribe, html.capacitor-native .lp-nav-item--cta, html.capacitor-native #lpGatewayNote { display: none !important; }

/* Report and block in a conversation; the reports in the console. */
.chat-safety { display: flex; gap: 6px; margin-inline-start: auto; margin-inline-end: 8px; }
.chat-safety[hidden] { display: none; }
.chat-safety button { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt-m); border-radius: var(--rad-10); padding: 6px 9px; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.chat-safety button:hover { border-color: var(--d); color: var(--d); }
.chat-blocked-note { flex-shrink: 0; margin-top: 10px; padding: 12px; border-radius: var(--rad-14); background: var(--dl, var(--c-red-94)); color: var(--d, var(--c-red-42)); font-weight: 800; font-size: .85rem; text-align: center; }
.chat-blocked-tag { font-size: .8rem; }
.report-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 12px; border: 1px solid var(--bdr); border-radius: var(--rad-14); margin-bottom: 8px; background: var(--card); }
.report-row.is-open { border-color: var(--d, var(--c-red-51)); }
.report-main { flex: 1; min-width: 220px; }
.report-main small { display: block; color: var(--txt-m); font-size: .74rem; margin-top: 2px; }
.report-main p { margin: 6px 0 0; font-size: .86rem; }
.report-main ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: .8rem; color: var(--txt-m); }
.report-acts { display: flex; gap: 6px; align-items: center; }
.report-acts .btn-main, .report-acts .btn-cancel { width: auto; margin: 0; padding: 8px 12px; font-size: .8rem; }
.report-done { color: var(--s, var(--c-teal-30)); font-weight: 800; font-size: .8rem; }

/* A team's size beside a request to join, and the developer's limits. */
.team-room { display: block; margin-top: 3px; font-size: .72rem; font-weight: 800; color: var(--txt-m); }
.team-room.is-full { color: var(--d, var(--c-red-51)); }
.team-limits { margin-top: 14px; padding: 12px; border: 1px solid var(--bdr); border-radius: var(--rad-14); background: var(--bg); }
.team-limits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.team-limits-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 800; margin: 0; }
.team-limits-grid small { color: var(--txt-m); font-weight: 700; }
/* A technician inside a laboratory: the work only -- no accounts, cheques or prices, and no buying
   from the warehouses (that costs the laboratory money, and is its manager's or secretary's to do). */
body.role-tech:not(.grant-accounts) #btnNavChecks, body.role-tech:not(.grant-accounts) #btnNavAccounts, body.role-tech #btnNavSupplies, body.role-tech #btnNavProducts, body.role-tech #btnNavSupplyRequests, body.role-tech #btnNavWhAccount,
body.role-tech:not(.grant-accounts) #checksTab, body.role-tech:not(.grant-accounts) #accountsTab, body.role-tech #suppliesTab, body.role-tech #productsTab, body.role-tech #supplyRequestsTab, body.role-tech #warehouseAccountTab,
body.role-tech:not(.grant-money) .financial-info, body.role-tech .admin-only { display: none !important; }

/* A new order from the wall: a soft floating button in the corner, out of the cards' way. */
.lab-wall .wall-new-order { position: absolute; inset-inline-end: 22px; bottom: calc(22px + var(--sab, 0px)); z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 10px 10px; border: none; border-radius: var(--rad-pill); background: linear-gradient(135deg, var(--c-cyan-42), var(--c-blue-67)); color: var(--c-white); font-family: inherit; font-size: 1.1rem; font-weight: 900; cursor: pointer; box-shadow: 0 14px 34px color-mix(in srgb, var(--c-cyan-42) 38%, transparent); transition: transform .2s ease, box-shadow .2s ease; animation: wall-fab-in .45s ease both; }
.lab-wall[dir="rtl"] .wall-new-order { padding: 10px 10px 10px 22px; }
.lab-wall .wall-new-order-plus { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 22%, transparent); display: inline-grid; place-items: center; font-size: 1.8rem; line-height: 1; font-weight: 700; transition: transform .25s ease; }
.lab-wall .wall-new-order:hover { transform: translateY(-3px); box-shadow: 0 18px 40px color-mix(in srgb, var(--c-blue-67) 45%, transparent); }
.lab-wall .wall-new-order:hover .wall-new-order-plus { transform: rotate(90deg); }
.lab-wall .wall-new-order:active { transform: scale(.96); }
@keyframes wall-fab-in { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .lab-wall .wall-new-order { inset-inline-end: 14px; bottom: calc(14px + var(--sab, 0px)); font-size: 1rem; } .lab-wall .wall-new-order-plus { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .lab-wall .wall-new-order { animation: none; } }
.lab-wall .wall-body { padding-bottom: 96px; }

/* The courier's counts at the top of the round. */
.courier-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.courier-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--rad-16); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-family: inherit; cursor: pointer; }
.courier-chip b { font-size: 1.5rem; font-weight: 900; color: var(--p); line-height: 1.1; }
.courier-chip span { font-size: .74rem; font-weight: 800; color: var(--txt-m); text-align: center; }
.courier-chip.is-mine { border-color: var(--c-sky-48); background: color-mix(in srgb, var(--c-sky-48) 10%, var(--card)); }
.courier-chip.is-mine b { color: var(--c-sky-48); }
.courier-chip.is-zero b { opacity: .45; }
@media (max-width: 420px) { .courier-summary { grid-template-columns: repeat(2, 1fr); } }

/* The wall's side column -- ready, and the courier's work -- always on the left, whatever the language. */
.lab-wall .wall-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; max-height: calc(100vh - 140px); overflow-y: auto; min-width: 0; }
.lab-wall .wall-side .wall-ready { position: static; max-height: none; overflow: visible; }
.lab-wall[dir="ltr"] .wall-layout { grid-template-columns: 320px minmax(0, 1fr); }
.lab-wall[dir="ltr"] .wall-side { order: -1; }
.lab-wall .wall-courier { background: var(--c-sky-15); border: 2px solid var(--c-sky-48); border-radius: var(--rad-20); padding: 14px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sky-48) 16%, transparent); }
.lab-wall .wall-courier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.2rem; font-weight: 900; color: var(--c-sky-74); margin-bottom: 6px; }
.lab-wall .wall-courier-head span { min-width: 34px; height: 34px; border-radius: var(--rad-pill); background: var(--c-sky-48); color: var(--c-sky-12-2); display: inline-grid; place-items: center; font-size: 1.05rem; padding: 0 8px; }
.lab-wall .wall-courier-part { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 2px 8px; font-size: .95rem; font-weight: 900; color: var(--c-sky-86); }
.lab-wall .wall-courier-part span { min-width: 26px; height: 26px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-sky-48) 25%, transparent); color: var(--c-sky-94); display: inline-grid; place-items: center; font-size: .85rem; padding: 0 7px; }
.lab-wall .wall-courier-row { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--rad-14); background: var(--c-sky-19); margin-bottom: 8px; }
.lab-wall .wall-courier-row .wall-ready-who { color: var(--c-sky-97); }
.lab-wall .wall-courier-row .wall-ready-who span { color: var(--c-sky-86); }
.lab-wall .wall-courier-go { flex-shrink: 0; background: var(--c-sky-48); color: var(--c-sky-12-2); border: none; border-radius: var(--rad-12); padding: 10px 12px; font-size: .95rem; font-weight: 900; cursor: pointer; font-family: inherit; }
.lab-wall .wall-courier-go:hover { background: var(--c-sky-60); }
.lab-wall .wall-courier-empty { color: var(--c-sky-74); opacity: .75; text-align: center; padding: 14px 6px; font-weight: 700; }
@media (max-width: 900px) {
  .lab-wall .wall-layout, .lab-wall[dir="ltr"] .wall-layout { grid-template-columns: 1fr; }
  .lab-wall .wall-side { display: contents; }
  .lab-wall .wall-side .wall-ready { order: -1; }
  .lab-wall .wall-courier { order: 2; }
}

/* A warehouse's own page (supplies.js: pageHtml): a full page over the application, in the
   warehouse's colour, in one of three looks -- the application's own, a dark one, a bold one. */
.wp-modal { padding: 0; align-items: stretch; background: color-mix(in srgb, var(--c-blue-5) 70%, transparent); }
.wp { --wp: var(--p); --wp-bg: var(--bg); --wp-card: var(--card); --wp-txt: var(--txt); --wp-mut: var(--txt-m); --wp-line: var(--bdr);
  position: relative; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--wp-bg); color: var(--wp-txt); scroll-behavior: smooth; }
.wp--dark { --wp-bg: var(--c-blue-5-3); --wp-card: var(--c-blue-11); --wp-txt: var(--c-sky-96); --wp-mut: var(--c-blue-65); --wp-line: var(--c-blue-17); }
.wp--bold { --wp-bg: color-mix(in srgb, var(--wp) 5%, var(--c-white)); --wp-card: var(--c-white); --wp-txt: var(--c-blue-11); --wp-mut: var(--c-blue-35); --wp-line: color-mix(in srgb, var(--wp) 18%, var(--c-sky-91)); }

.wp-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: 0; padding: 0 16px; }
.wp-top > * { position: relative; top: calc(30px + var(--sat, 0px)); }
.wp-back { width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent); background: color-mix(in srgb, var(--c-blue-11) 55%, transparent); color: var(--c-white); font-size: 1rem; cursor: pointer; flex: none; }
.wp-top-name { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; padding: 9px 16px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-blue-11) 72%, transparent); color: var(--c-white); font-size: .9rem; font-weight: 900; max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-top.is-solid .wp-top-name { opacity: 1; transform: none; }
.wp-preview { margin-inline-start: auto; padding: 7px 12px; border-radius: var(--rad-pill); background: var(--c-amber-89); color: var(--c-orange-31); font-size: .74rem; font-weight: 900; }

.wp-hero { position: relative; min-height: min(86vh, 720px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--c-white); isolation: isolate;
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--wp) 75%, var(--c-white)) 0%, var(--wp) 38%, color-mix(in srgb, var(--wp) 45%, var(--c-blue-5)) 100%); }
.wp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; animation: wp-zoom 18s ease-out both; }
@keyframes wp-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.wp-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--c-blue-5) 90%, transparent) 0%, color-mix(in srgb, var(--c-blue-5) 55%, transparent) 42%, color-mix(in srgb, var(--c-blue-5) 20%, transparent) 100%); }
.wp-hero:not(.has-cover) .wp-hero-shade { background: linear-gradient(to top, color-mix(in srgb, var(--c-blue-5) 55%, transparent), color-mix(in srgb, var(--c-blue-5) 0%, transparent) 60%); }
.wp-blob { position: absolute; z-index: -2; border-radius: 50%; filter: blur(60px); opacity: .55; }
.wp-blob--a { width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; top: -12%; inset-inline-start: -8%; background: color-mix(in srgb, var(--wp) 40%, var(--c-cyan-53)); animation: wp-float 14s ease-in-out infinite alternate; }
.wp-blob--b { width: 38vw; height: 38vw; max-width: 460px; max-height: 460px; bottom: 6%; inset-inline-end: -6%; background: color-mix(in srgb, var(--wp) 45%, var(--c-violet-65)); animation: wp-float 17s ease-in-out infinite alternate-reverse; }
@keyframes wp-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 8%) scale(1.15); } }
.wp-grid-lines { position: absolute; inset: 0; z-index: -2; opacity: .16; background-image: linear-gradient(color-mix(in srgb, var(--c-white) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-white) 60%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 50% 40%, var(--c-black), transparent); -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, var(--c-black), transparent); }
.wp-hero-in { width: 100%; max-width: 1120px; margin: 0 auto; padding: calc(96px + var(--sat, 0px)) 28px 34px; }
.wp-id { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; animation: wp-up .7s ease both; }
.wp-logo { flex: none; width: 72px; height: 72px; border-radius: var(--rad-20); background: var(--c-white); display: grid; place-items: center; font-size: 2rem; overflow: hidden; box-shadow: 0 14px 34px color-mix(in srgb, var(--c-blue-5) 40%, transparent); border: 3px solid color-mix(in srgb, var(--c-white) 85%, transparent); }
.wp-logo img { width: 100%; height: 100%; object-fit: cover; }
.wp-id strong { display: block; font-size: 1.15rem; font-weight: 900; }
.wp-id small { display: block; margin-top: 3px; font-size: .86rem; font-weight: 700; color: color-mix(in srgb, var(--c-white) 85%, transparent); }
.wp-hero h1 { margin: 0; max-width: 18ch; font-size: clamp(2.1rem, 6.4vw, 4.6rem); font-weight: 900; line-height: 1.12; letter-spacing: -1.5px; color: var(--c-white); text-wrap: balance; animation: wp-up .8s .08s ease both; }
.wp-sub { margin: 16px 0 0; max-width: 52ch; font-size: clamp(1rem, 2.1vw, 1.25rem); font-weight: 600; line-height: 1.7; color: color-mix(in srgb, var(--c-white) 90%, transparent); animation: wp-up .8s .16s ease both; }
@keyframes wp-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.wp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; animation: wp-up .8s .24s ease both; }
.wp-cta--center { justify-content: center; animation: none; }
.wp-cta-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wp-cta-link .btn-main { width: auto !important; margin: 0 !important; padding: 14px 26px !important; font-size: 1rem !important; border-radius: var(--rad-16) !important; background: var(--c-white) !important; color: var(--c-blue-11) !important; box-shadow: 0 14px 30px color-mix(in srgb, var(--c-blue-5) 30%, transparent); }
.wp-cta-link .btn-cancel { width: auto !important; margin: 0 !important; padding: 13px 20px !important; border-radius: var(--rad-16) !important; }
.wp-cta-link .badge-status { padding: 8px 14px; font-size: .82rem; }
.wp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--rad-16); border: 1px solid color-mix(in srgb, var(--c-white) 40%, transparent); background: color-mix(in srgb, var(--c-white) 12%, transparent); color: var(--c-white); font-weight: 900; font-size: .96rem; text-decoration: none; backdrop-filter: blur(8px); transition: transform .2s, background .2s; }
.wp-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c-white) 22%, transparent); }
.wp-btn--wa { background: var(--c-green-36); border-color: var(--c-green-36); }
.wp-btn--wa:hover { background: var(--c-green-29); }

.wp-stats { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 28px 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.wp-stats:empty { display: none; }
.wp-stat { padding: 18px 18px 16px; border-radius: var(--rad-20); background: color-mix(in srgb, var(--c-white) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 20%, transparent); backdrop-filter: blur(10px); animation: wp-up .8s .3s ease both; }
.wp-stat[hidden] { display: none; }
.wp-stat b { display: block; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.1; direction: ltr; text-align: start; }
.wp-stat b small { font-size: .5em; opacity: .75; }
.wp-stat span { display: block; margin-top: 4px; font-size: .84rem; font-weight: 700; color: color-mix(in srgb, var(--c-white) 85%, transparent); }
.wp-stat b span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }

.wp-sec { width: 100%; max-width: 1120px; margin: 0 auto; padding: 64px 28px 0; }
.wp-sec[hidden] { display: none; }
.wp-kicker { font-size: .78rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wp); margin-bottom: 8px; }
.wp--dark .wp-kicker { color: color-mix(in srgb, var(--wp) 60%, var(--c-white)); }
.wp-sec h3 { margin: 0 0 22px; font-size: clamp(1.5rem, 3.6vw, 2.3rem); font-weight: 900; letter-spacing: -.6px; line-height: 1.25; color: var(--wp-txt); }
.wp-sec h3 small { font-size: .45em; font-weight: 800; color: var(--wp-mut); letter-spacing: 0; vertical-align: middle; margin-inline-start: 8px; padding: 4px 10px; border-radius: var(--rad-pill); border: 1px solid var(--wp-line); }
.wp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.wp-reveal.is-in { opacity: 1; transform: none; }

.wp-about { display: grid; gap: 34px; align-items: center; }
.wp-about.has-photo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.wp-about p { margin: 0; font-size: 1.08rem; line-height: 2.05; color: var(--wp-mut); }
.wp-about-photo { padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--rad-28); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--wp) 60%, var(--c-blue-5)); transform: rotate(-1.5deg); transition: transform .4s ease; }
.wp-about-photo:hover { transform: rotate(0) scale(1.02); }
.wp-about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.wp-point { position: relative; padding: 26px 22px; border-radius: var(--rad-24); background: var(--wp-card); border: 1px solid var(--wp-line); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.wp-point::after { content: ''; position: absolute; inset-inline-end: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: color-mix(in srgb, var(--wp) 12%, transparent); }
.wp-point:hover { transform: translateY(-5px); border-color: var(--wp); box-shadow: 0 24px 44px -28px color-mix(in srgb, var(--wp) 70%, var(--c-blue-5)); }
.wp-point i { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--rad-18); font-style: normal; font-size: 1.7rem; background: linear-gradient(135deg, var(--wp), color-mix(in srgb, var(--wp) 55%, var(--c-white))); margin-bottom: 16px; box-shadow: 0 12px 24px -12px var(--wp); }
.wp-point span { position: relative; z-index: 1; display: block; font-size: 1.08rem; font-weight: 900; line-height: 1.6; color: var(--wp-txt); }

.wp-marquee { overflow: hidden; margin-bottom: 16px; mask-image: linear-gradient(90deg, transparent, var(--c-black) 8%, var(--c-black) 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, var(--c-black) 8%, var(--c-black) 92%, transparent); direction: ltr; }
.wp-marquee[hidden] { display: none; }
.wp-marquee-run { display: flex; gap: 14px; width: max-content; animation: wp-marquee 38s linear infinite; }
.wp-marquee:hover .wp-marquee-run { animation-play-state: paused; }
@keyframes wp-marquee { to { transform: translateX(-50%); } }
.wp-marquee-run span { padding: 14px 26px; border-radius: var(--rad-18); background: var(--wp-card); border: 1px solid var(--wp-line); font-size: 1.05rem; font-weight: 900; color: var(--wp-txt); white-space: nowrap; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-chips span { padding: 9px 16px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--wp) 9%, var(--wp-card)); border: 1px solid color-mix(in srgb, var(--wp) 22%, var(--wp-line)); font-size: .88rem; font-weight: 800; color: var(--wp-txt); }
.wp-chips small { opacity: .65; font-weight: 800; }
.wp-chips--areas span { padding: 12px 20px; font-size: 1rem; }

.wp-rail { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.wp-rail .pc-card { flex: 0 0 230px; scroll-snap-align: start; }

.wp-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; gap: 12px; }
.wp-mosaic button { padding: 0; border: none; border-radius: var(--rad-22); overflow: hidden; cursor: zoom-in; background: var(--wp-card); }
.wp-mosaic button:first-child { grid-column: span 2; grid-row: span 2; }
.wp-mosaic--1 button:first-child { grid-column: 1 / -1; }
.wp-mosaic--2 button { grid-column: span 2; grid-row: span 2; }
.wp-mosaic--4 button:last-child, .wp-mosaic--6 button:last-child { grid-column: span 2; }
.wp-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.wp-mosaic button:hover img { transform: scale(1.07); }

.wp-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.wp-contact > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 20px; border-radius: var(--rad-22); background: var(--wp-card); border: 1px solid var(--wp-line); }
.wp-contact i { grid-row: span 2; font-style: normal; display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--rad-16); font-size: 1.4rem; background: color-mix(in srgb, var(--wp) 12%, var(--wp-card)); }
.wp-contact small { color: var(--wp-mut); font-weight: 800; font-size: .76rem; }
.wp-contact strong { font-size: .98rem; font-weight: 800; overflow-wrap: anywhere; color: var(--wp-txt); }
.wp-contact a { color: var(--wp); text-decoration: none; }
.wp--dark .wp-contact a { color: color-mix(in srgb, var(--wp) 55%, var(--c-white)); }
.wp-map { display: inline-block; margin-inline-start: 6px; font-size: .8rem; font-weight: 900; }
.wp-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.wp-social a { padding: 11px 18px; border-radius: var(--rad-14); background: var(--wp-card); border: 1px solid var(--wp-line); color: var(--wp-txt); font-weight: 800; font-size: .9rem; text-decoration: none; }
.wp-social a:hover { border-color: var(--wp); }

.wp-foot { margin: 72px auto 0; max-width: 1120px; padding: 0 28px calc(40px + var(--sab, 0px)); text-align: center; }
.wp-foot > * { position: relative; }
.wp-foot { position: relative; }
.wp-foot::before { content: ''; position: absolute; inset: 0 28px calc(40px + var(--sab, 0px)); border-radius: var(--rad-34); background: linear-gradient(135deg, var(--wp), color-mix(in srgb, var(--wp) 50%, var(--c-blue-5))); }
.wp-foot h3 { margin: 0; padding: 48px 24px 0; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 900; color: var(--c-white); }
.wp-foot p { margin: 10px 0 0; padding: 0 24px; font-size: 1.02rem; font-weight: 600; color: color-mix(in srgb, var(--c-white) 88%, transparent); }
.wp-foot .wp-cta { padding: 0 24px 48px; }

.wp-lightbox { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c-blue-5) 94%, transparent); padding: 20px; }
.wp-lightbox[hidden] { display: none; }
.wp-lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--rad-18); box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 60%, transparent); }
.wp-lb-close, .wp-lb-nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent); background: color-mix(in srgb, var(--c-white) 12%, transparent); color: var(--c-white); font-size: 1.4rem; cursor: pointer; }
.wp-lb-close { top: calc(18px + var(--sat, 0px)); inset-inline-end: 18px; font-size: 1rem; }
.wp-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.wp-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.wp-lightbox.is-single .wp-lb-nav { display: none; }

@media (max-width: 760px) {
  .wp-hero { min-height: min(92vh, 680px); }
  .wp-hero-in { padding-inline: 20px; padding-bottom: 26px; }
  .wp-stats { padding-inline: 20px; grid-template-columns: repeat(2, 1fr); padding-bottom: 26px; }
  .wp-sec { padding: 46px 20px 0; }
  .wp-about.has-photo { grid-template-columns: 1fr; }
  .wp-about-photo { transform: none; }
  .wp-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .wp-rail .pc-card { flex-basis: 190px; }
  .wp-foot { padding-inline: 20px; margin-top: 54px; }
  .wp-foot::before { inset-inline: 20px; }
  .wp-cta-link .btn-main { padding: 13px 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-hero-bg, .wp-blob, .wp-id, .wp-hero h1, .wp-sub, .wp-cta, .wp-stat, .wp-marquee-run { animation: none; }
  .wp-reveal { opacity: 1; transform: none; transition: none; }
  .wp { scroll-behavior: auto; }
}
.sw-page-btn { margin-top: 8px; width: 100%; padding: 8px 10px; border-radius: var(--rad-12); border: 1px dashed color-mix(in srgb, var(--sw-tint, var(--p)) 55%, var(--bdr)); background: color-mix(in srgb, var(--sw-tint, var(--p)) 6%, transparent); color: var(--sw-tint, var(--p)); font-family: inherit; font-size: .78rem; font-weight: 900; cursor: pointer; }
.sw-page-btn:hover { background: color-mix(in srgb, var(--sw-tint, var(--p)) 14%, transparent); }
.whpg-gallery-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.whpg-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.whpg-thumb { position: relative; width: 84px; height: 64px; border-radius: var(--rad-12); overflow: hidden; border: 1px solid var(--bdr); }
.whpg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.whpg-thumb button { position: absolute; top: 3px; inset-inline-end: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--c-blue-11) 70%, transparent); color: var(--c-white); font-size: .7rem; cursor: pointer; padding: 0; }
.whpg-add { width: auto; margin: 0; cursor: pointer; }


.lab-wall .wall-tool[hidden] { display: none; }

/* A call from a conversation. */
.chat-call { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--c-green-36); background: var(--c-green-36); color: var(--c-white); border-radius: var(--rad-10); padding: 6px 10px; font-size: .76rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.chat-call[hidden] { display: none; }

/* Voice calls (calls.js): the button in a conversation, and the window over everything. */
.chat-safety .chat-voice-call { border: 1px solid var(--p); background: var(--p); color: var(--c-white); border-radius: var(--rad-10); padding: 6px 10px; font: inherit; font-size: .76rem; font-weight: 900; cursor: pointer; white-space: nowrap; }
.chat-safety .chat-voice-call:hover { border-color: var(--p); color: var(--c-white); filter: brightness(1.08); }
.chat-safety .chat-voice-call[hidden] { display: none; }
.chat-safety { flex-wrap: wrap; justify-content: flex-end; }
.call-overlay { position: fixed; inset: 0; z-index: 10000050; display: none; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--c-blue-5) 82%, transparent); }
.call-overlay.is-on { display: flex; }
/* Answered from the phone's call screen (CallScreenActivity): the call alone, on the call screen's own colours. */
html.call-answered-outside .call-overlay:not(.is-video) { background: linear-gradient(var(--c-teal-14), var(--c-sky-10-3)); }
.call-card { width: 100%; max-width: 360px; padding: 34px 24px 28px; border-radius: var(--rad-30); text-align: center; color: var(--c-white); background: linear-gradient(160deg, var(--c-blue-11), var(--c-blue-17) 55%, var(--c-sky-24)); box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 50%, transparent); }
.call-avatar { width: 108px; height: 108px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 2.8rem; font-weight: 900; color: var(--c-white); background: linear-gradient(135deg, var(--c-sky-48), var(--c-blue-67)); }
.call-avatar.is-ringing { animation: call-pulse 1.6s ease-out infinite; }
@keyframes call-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-sky-48) 55%, transparent); } 100% { box-shadow: 0 0 0 30px color-mix(in srgb, var(--c-sky-48) 0%, transparent); } }
.call-name { font-size: 1.45rem; font-weight: 900; overflow-wrap: anywhere; }
.call-state { margin-top: 6px; font-size: 1rem; font-weight: 700; color: var(--c-sky-86); min-height: 1.5em; }
.call-actions { display: flex; justify-content: center; gap: 34px; margin-top: 30px; }
.call-btn { width: 70px; height: 70px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.6rem; color: var(--c-white); background: color-mix(in srgb, var(--c-white) 14%, transparent); position: relative; font-family: inherit; }
.call-btn small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; font-size: .74rem; font-weight: 800; color: var(--c-sky-91); white-space: nowrap; }
.call-btn.is-on { background: var(--c-orange-50); }
.call-btn--no { background: var(--c-red-51); }
.call-btn--yes { background: var(--c-green-36); animation: call-pulse-yes 1.4s ease-out infinite; }
@keyframes call-pulse-yes { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-green-36) 60%, transparent); } 100% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--c-green-36) 0%, transparent); } }
.call-card audio { display: none; }
@media (prefers-reduced-motion: reduce) { .call-avatar.is-ringing, .call-btn--yes { animation: none; } }

.call-actions { gap: 26px; }

/* The warehouse's explorer: the program's doctors and laboratories, to look through and invite. */
#whInviteModal .modal-content { max-width: 720px; }
.whx-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.whx-kinds { display: flex; gap: 6px; flex: 1; min-width: 0; }
.whx-kind { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt-m); border-radius: var(--rad-pill); padding: 7px 14px; font-family: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.whx-kind.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }
.whx-filters select { width: auto; min-width: 130px; margin: 0; padding: 8px 10px; font-size: .8rem; }
.whx-count { font-size: .74rem; font-weight: 800; color: var(--txt-m); margin: 0 2px 8px; }
.whx-list { max-height: 52vh; overflow-y: auto; margin-bottom: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; align-content: start; }
/* The explorer's cards only: the dashboard's panels carry the same class name, and were laid out as rows by this. */
.whx-list > .whx-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--bdr); border-radius: var(--rad-16); background: var(--card); cursor: pointer; transition: border-color .15s, transform .15s; }
.whx-list > .whx-card:hover { border-color: var(--p); transform: translateY(-1px); }
.whx-avatar { flex: none; width: 46px; height: 46px; border-radius: var(--rad-14); display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--p) 12%, var(--card)); overflow: hidden; }
.whx-avatar.is-lab { background: color-mix(in srgb, var(--c-violet-58) 14%, var(--card)); }
.whx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.whx-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.whx-who strong { font-size: .9rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whx-who span { font-size: .74rem; color: var(--txt-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whx-invite { flex: none; width: auto !important; margin: 0 !important; padding: 7px 12px !important; font-size: .76rem !important; }
.whx-state { flex: none; font-size: .7rem; font-weight: 800; padding: 5px 9px; border-radius: var(--rad-pill); background: var(--bg); color: var(--txt-m); max-width: 120px; text-align: center; }
.whx-state.is-ok { background: var(--sl); color: var(--s); }
.whx-state.is-ask { background: var(--wl); color: var(--c-orange-37); }

.wp-top-name { display: none; }
.wp-marquee.is-static { mask-image: none; -webkit-mask-image: none; direction: inherit; }
.wp-marquee.is-static .wp-marquee-run { animation: none; width: auto; flex-wrap: wrap; }

/* A video call: the other side fills the screen, this side in a corner, the controls along the foot. */
.chat-safety .chat-video-call { background: var(--c-violet-58); border-color: var(--c-violet-58); }
.call-overlay.is-video { padding: 0; background: var(--c-black); }
.call-card--video { position: relative; max-width: none; width: 100%; height: 100%; padding: 0; border-radius: 0; background: var(--c-blue-8); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--c-blue-8); }
.call-local { position: absolute; z-index: 2; top: calc(18px + var(--sat, 0px)); inset-inline-end: 16px; width: 112px; height: 150px; object-fit: cover; border-radius: var(--rad-18); border: 2px solid color-mix(in srgb, var(--c-white) 70%, transparent); background: var(--c-blue-17); box-shadow: 0 12px 30px color-mix(in srgb, var(--c-black) 45%, transparent); }
.call-local.is-mirror { transform: scaleX(-1); }
.call-local.is-off { opacity: .25; }
.call-head { position: relative; z-index: 1; padding: calc(70px + var(--sat, 0px)) 20px 30px; background: linear-gradient(to bottom, color-mix(in srgb, var(--c-blue-5) 70%, transparent), color-mix(in srgb, var(--c-blue-5) 0%, transparent)); }
.call-card--video.is-talking .call-head { padding-top: calc(22px + var(--sat, 0px)); text-align: start; }
.call-card--video.is-talking .call-avatar { display: none; }
.call-card--video.is-talking .call-name { font-size: 1.1rem; }
.call-card--video.is-talking .call-state { margin-top: 2px; font-size: .9rem; }
.call-card--video .call-actions { position: relative; z-index: 1; margin: 0; padding: 40px 14px calc(46px + var(--sab, 0px)); gap: 18px; flex-wrap: wrap; background: linear-gradient(to top, color-mix(in srgb, var(--c-blue-5) 82%, transparent), color-mix(in srgb, var(--c-blue-5) 0%, transparent)); }
.call-card--video .call-btn { width: 62px; height: 62px; font-size: 1.4rem; background: color-mix(in srgb, var(--c-white) 20%, transparent); backdrop-filter: blur(8px); }
.call-card--video .call-btn--no { background: var(--c-red-51); }
.call-card--video .call-btn--yes { background: var(--c-green-36); }
.call-card--video .call-btn.is-on { background: var(--c-orange-50); }
@media (min-width: 900px) { .call-local { width: 190px; height: 142px; } }

/* A free trial, marked faintly across the program; the notice on the way in; the settings card. */
.trial-mark { position: fixed; inset: 0; z-index: 60; pointer-events: none; background-repeat: repeat; background-size: 300px 200px; }
.trial-chip { position: fixed; bottom: calc(10px + var(--sab, 0px)); left: 50%; transform: translateX(-50%); pointer-events: auto; border: 1px solid color-mix(in srgb, var(--c-orange-50) 50%, transparent); background: color-mix(in srgb, var(--c-amber-89) 92%, transparent); color: var(--c-orange-31); border-radius: var(--rad-pill); padding: 5px 12px; font-family: inherit; font-size: .7rem; font-weight: 900; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 16px color-mix(in srgb, var(--c-orange-31) 15%, transparent); opacity: .9; }
body.wall-open .trial-chip { display: none; }
@media print { .trial-mark { display: none; } }
.sub-notice { position: fixed; inset: 0; z-index: 10000040; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--c-blue-5) 60%, transparent); }
.sub-notice-card { width: 100%; max-width: 420px; padding: 28px 24px 22px; border-radius: var(--rad-26); background: var(--card); color: var(--txt); text-align: center; box-shadow: 0 30px 70px color-mix(in srgb, var(--c-blue-5) 40%, transparent); border-top: 6px solid var(--c-orange-50); }
.sub-notice.is-grace .sub-notice-card { border-top-color: var(--d, var(--c-red-51)); }
.sub-notice-ico { font-size: 2.6rem; line-height: 1; margin-bottom: 10px; }
.sub-notice-card h3 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 900; }
.sub-notice-card p { margin: 0 0 18px; font-size: .95rem; line-height: 1.9; color: var(--txt-m); }
.sub-notice-actions { display: flex; flex-direction: column; gap: 8px; }
.sub-notice-actions .btn-main, .sub-notice-actions .btn-cancel { width: 100%; margin: 0; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.sub-state { display: inline-block; padding: 6px 12px; border-radius: var(--rad-pill); font-size: .82rem; font-weight: 900; margin-bottom: 8px; background: var(--sl); color: var(--s); }
.sub-state.is-trial { background: var(--c-amber-89); color: var(--c-orange-31); }
.sub-state.is-grace { background: var(--dl); color: var(--d); }
.sub-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--bdr); font-size: .86rem; }
.sub-row span { color: var(--txt-m); font-weight: 700; }
.sub-plan { margin-top: 4px; }
.sub-plan > small { display: block; padding: 8px 0; color: var(--txt-m); }
.sub-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .82rem; }
.sub-table th, .sub-table td { padding: 7px 6px; border-top: 1px solid var(--bdr); text-align: start; }
.sub-table th { color: var(--txt-m); font-weight: 800; font-size: .74rem; }
.sub-table td.is-paid { color: var(--s); font-weight: 800; }
.sub-table td.is-late { color: var(--d); font-weight: 800; }

/* The announcement that opens with the program, and its settings in the developer's console. */
.tkr-popup { position: fixed; inset: 0; z-index: 10000030; display: flex; align-items: center; justify-content: center; padding: 18px; background: color-mix(in srgb, var(--c-blue-5) 72%, transparent); animation: tkr-pop-bg .25s ease both; }
@keyframes tkr-pop-bg { from { opacity: 0; } to { opacity: 1; } }
.tkr-popup-card { position: relative; max-width: min(520px, 100%); max-height: 88vh; display: flex; flex-direction: column; border-radius: var(--rad-24); overflow: hidden; background: var(--card); box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 50%, transparent); animation: tkr-pop .35s ease both; }
@keyframes tkr-pop { from { opacity: 0; transform: scale(.92) translateY(14px); } to { opacity: 1; transform: none; } }
.tkr-popup-card img { display: block; width: 100%; max-height: 74vh; object-fit: contain; background: var(--c-blue-8); }
.tkr-popup-card img.is-link { cursor: pointer; }
.tkr-popup-text { padding: 12px 16px; font-size: .92rem; font-weight: 700; color: var(--txt); text-align: center; }
.tkr-popup-tag { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; font-size: .62rem; font-weight: 900; padding: 3px 8px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-blue-11) 70%, transparent); color: var(--c-white); }
.tkr-popup-close { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c-white) 55%, transparent); background: color-mix(in srgb, var(--c-blue-11) 72%, transparent); color: var(--c-white); font-family: inherit; font-size: .95rem; font-weight: 900; cursor: not-allowed; }
.tkr-popup-close.is-ready { cursor: pointer; background: var(--c-white); color: var(--c-blue-11); border-color: var(--c-white); }
.tkr-dev-check { flex-direction: row !important; align-items: center; gap: 8px !important; grid-column: 1 / -1; font-size: .8rem !important; }
.tkr-dev-check input { width: 18px; height: 18px; }
.tkr-dev-popup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border: 1px dashed var(--bdr); border-radius: var(--rad-12); }
.tkr-dev-popup label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 800; color: var(--txt-m); flex: 1; min-width: 200px; }
.tkr-dev-popup .search-input { margin: 0; max-width: 120px; }
.tkr-dev-popup .btn-cancel { width: auto; margin: 0; }
@media (prefers-reduced-motion: reduce) { .tkr-popup, .tkr-popup-card { animation: none; } }

/* The warehouse's representatives on its page, and one representative's sheet. */
.whpg-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.whpg-check input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.wp-reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.wp-rep { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px 18px; border-radius: var(--rad-24); border: 1px solid var(--wp-line); background: var(--wp-card); color: var(--wp-txt); font-family: inherit; cursor: pointer; text-align: center; transition: transform .25s ease, border-color .25s, box-shadow .25s; }
.wp-rep:hover { transform: translateY(-5px); border-color: var(--wp); box-shadow: 0 24px 44px -28px color-mix(in srgb, var(--wp) 70%, var(--c-blue-5)); }
.wp-rep-avatar { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 1.9rem; font-weight: 900; color: var(--c-white); background: linear-gradient(135deg, var(--wp), color-mix(in srgb, var(--wp) 50%, var(--c-white))); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp) 18%, transparent); margin-bottom: 6px; }
.wp-rep-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wp-rep-avatar.is-large { width: 104px; height: 104px; font-size: 2.6rem; margin: 0 auto 12px; }
.wp-rep strong { font-size: 1.02rem; font-weight: 900; }
.wp-rep small { font-size: .78rem; font-weight: 700; color: var(--wp-mut); min-height: 1.2em; }
.wp-rep em { margin-top: 8px; font-style: normal; font-size: .78rem; font-weight: 900; color: var(--wp); }
.wp--dark .wp-rep em { color: color-mix(in srgb, var(--wp) 55%, var(--c-white)); }
.wp-rep-sheet { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 18px; background: color-mix(in srgb, var(--c-blue-5) 70%, transparent); }
.wp-rep-sheet[hidden] { display: none; }
.wp-rep-card { position: relative; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; padding: 34px 24px 24px; border-radius: var(--rad-28); background: var(--card); color: var(--txt); text-align: center; box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 50%, transparent); animation: wp-up .3s ease both; }
.wp-rep-card h3 { margin: 0; font-size: 1.35rem; font-weight: 900; }
.wp-rep-card > small { display: block; margin-top: 4px; font-size: .82rem; font-weight: 800; color: var(--txt-m); }
.wp-rep-card p { margin: 14px 0 0; font-size: .92rem; line-height: 1.9; color: var(--txt-m); }
.wp-rep-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); cursor: pointer; }
.wp-chips--center { justify-content: center; margin-top: 14px; }
.wp-rep-card .wp-chips span { background: var(--bg); border-color: var(--bdr); color: var(--txt); font-size: .8rem; padding: 6px 12px; }
.wp-rep-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.wp-rep-actions .btn-main { width: 100%; margin: 0; }
.wp-rep-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--rad-14); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); font-weight: 900; font-size: .92rem; text-decoration: none; }
.wp-rep-btn.is-wa { background: var(--c-green-36); border-color: var(--c-green-36); color: var(--c-white); }

.call-note { margin-top: 34px; padding: 10px 12px; border-radius: var(--rad-14); background: color-mix(in srgb, var(--c-orange-50) 16%, transparent); color: var(--c-amber-77); font-size: .78rem; font-weight: 700; line-height: 1.7; }
.call-card--video .call-note { position: relative; z-index: 1; margin: 0 14px calc(14px + var(--sab, 0px)); }

/* A person's page as a full page, in the manner of a warehouse's: the cover fills the top with
   the name large over it, the figures in tiles, and the sections below as cards. */
#viewProfileModal { padding: 0; align-items: stretch; }
#viewProfileModal .modal-content.vp-content { max-width: none !important; width: 100%; height: 100%; max-height: none; border-radius: 0; overflow-y: auto; }
.vp-close { position: fixed; top: calc(16px + var(--sat, 0px)); inset-inline-end: 16px; z-index: 6; width: 42px; height: 42px; border-radius: 50% !important; background: color-mix(in srgb, var(--c-blue-11) 60%, transparent) !important; color: var(--c-white) !important; border: 1px solid color-mix(in srgb, var(--c-white) 35%, transparent) !important; }
.vp-cover { height: min(46vh, 380px); background-size: cover; background-position: center; }
.vp-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--c-blue-8) 0%, color-mix(in srgb, var(--c-blue-8) 55%, transparent) 45%, color-mix(in srgb, var(--c-blue-8) 12%, transparent) 100%); }
.vp-cover-edit { z-index: 3; }
.vp-top { --vp-pad: max(28px, calc((100% - 1120px) / 2)); margin-top: -150px; padding: 0 var(--vp-pad) 34px; border: 0; z-index: 2; color: var(--c-white); background: linear-gradient(to bottom, transparent 0, var(--c-blue-8) 150px); animation: wp-up .7s ease both; }
.vp-avatar { width: 140px; height: 140px; border-radius: var(--rad-36); border: 4px solid color-mix(in srgb, var(--c-white) 92%, transparent); margin-top: 0; box-shadow: 0 20px 44px color-mix(in srgb, var(--c-black) 45%, transparent); }
.vp-id { padding-top: 0; }
.vp-id h3 { color: var(--c-white); font-size: clamp(1.9rem, 5vw, 3.3rem); letter-spacing: -1px; line-height: 1.15; text-shadow: 0 4px 22px color-mix(in srgb, var(--c-black) 40%, transparent); }
.vp-sub { margin-top: 10px; }
.vp-role { background: color-mix(in srgb, var(--c-white) 16%, transparent); color: var(--c-white); border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent); padding: 5px 13px; font-size: .9rem; }
.vp-loc { color: color-mix(in srgb, var(--c-white) 88%, transparent); font-size: .92rem; }
.vp-stats { gap: 10px; margin-top: 18px; }
.vp-stats span { display: flex; flex-direction: column; min-width: 104px; padding: 12px 16px; border-radius: var(--rad-18); background: color-mix(in srgb, var(--c-white) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 20%, transparent); color: color-mix(in srgb, var(--c-white) 85%, transparent); font-size: .8rem; }
.vp-stats b { color: var(--c-white); font-size: 1.6rem; line-height: 1.15; }
.vp-stats i { display: none; }
.vp-actions { padding-bottom: 0; align-self: flex-end; }
.vp-actions .vp-btn { padding: 13px 22px; border-radius: var(--rad-16); font-size: .96rem; background: color-mix(in srgb, var(--c-white) 13%, transparent); border-color: color-mix(in srgb, var(--c-white) 40%, transparent); color: var(--c-white); }
.vp-actions .vp-btn--primary { background: var(--c-white); border-color: var(--c-white); color: var(--c-blue-11); box-shadow: 0 14px 30px color-mix(in srgb, var(--c-black) 30%, transparent); }
.vp-body { max-width: 1120px; margin: 0 auto; padding: 36px 28px 24px; gap: 22px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); }
.vp-about, .vp-card { border-radius: var(--rad-24); padding: 26px; animation: wp-up .7s .12s ease both; }
.vp-kicker { font-size: .74rem; font-weight: 900; letter-spacing: 1.4px; color: var(--p); margin-bottom: 6px; }
.vp-about h4, .vp-services h4 { margin: 0 0 14px; font-size: 1.45rem; font-weight: 900; letter-spacing: -.4px; color: var(--txt); }
.vp-gallery-head strong { font-size: 1.45rem; font-weight: 900; letter-spacing: -.4px; }
.vp-bio p { text-align: start; font-size: 1rem; line-height: 2; color: var(--txt-m); }
.vp-facts { gap: 12px; }
.vp-facts li { align-items: center; font-size: .95rem; font-weight: 700; }
.vp-facts li > span:first-child { width: 42px; height: 42px; border-radius: var(--rad-14); display: grid; place-items: center; background: color-mix(in srgb, var(--p) 10%, var(--card)); font-size: 1.1rem; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-chips span { padding: 9px 15px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--p) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--p) 20%, var(--bdr)); font-size: .86rem; font-weight: 800; color: var(--txt); }
.vp-foot { max-width: 1064px; margin: 10px auto calc(40px + var(--sab, 0px)); padding: 44px 24px; border-radius: var(--rad-32); text-align: center; background: linear-gradient(135deg, var(--p), color-mix(in srgb, var(--p) 45%, var(--c-blue-5))); width: calc(100% - 56px); }
.vp-foot h3 { margin: 0 0 20px; font-size: clamp(1.4rem, 3.6vw, 2.1rem); font-weight: 900; color: var(--c-white); }
.vp-foot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vp-foot .vp-btn { padding: 13px 24px; border-radius: var(--rad-16); font-size: .98rem; background: color-mix(in srgb, var(--c-white) 14%, transparent); border-color: color-mix(in srgb, var(--c-white) 40%, transparent); color: var(--c-white); }
.vp-foot .vp-btn--primary { background: var(--c-white); border-color: var(--c-white); color: var(--c-blue-11); }
@media (max-width: 760px) {
  .vp-cover { height: 250px; }
  .vp-top { margin-top: -120px; padding: 0 18px 26px; background: linear-gradient(to bottom, transparent 0, var(--c-blue-8) 120px); gap: 12px; }
  .vp-avatar { width: 116px; height: 116px; border-radius: var(--rad-30); margin-top: 0; }
  .vp-stats { justify-content: center; }
  .vp-stats span { min-width: 92px; align-items: center; }
  .vp-actions { align-self: center; flex-wrap: wrap; justify-content: center; }
  .vp-body { padding: 22px 16px 16px; grid-template-columns: 1fr; }
  .vp-about, .vp-card { padding: 20px; }
  .vp-foot { width: calc(100% - 32px); padding: 34px 18px; border-radius: var(--rad-26); }
}
@media (prefers-reduced-motion: reduce) { .vp-top, .vp-about, .vp-card { animation: none; } }

/* The person's page fills the screen on a computer too, as the warehouse's does. */
#viewProfileModal.modal { padding: 0 !important; align-items: stretch !important; }
#viewProfileModal .modal-content.vp-content { width: 100% !important; min-width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important; transform: none !important; }
.vp-cover-edit { top: calc(18px + var(--sat, 0px)) !important; bottom: auto !important; inset-inline-start: 18px !important; inset-inline-end: auto !important; }

/* A person's page built from their answers (profile-page.js): the view, then the questions. */
.vp-headline { margin: 8px 0 0; font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.6; color: color-mix(in srgb, var(--c-white) 92%, transparent); max-width: 46ch; }
.vp-btn--wa { background: var(--c-green-36) !important; border-color: var(--c-green-36) !important; color: var(--c-white) !important; }
.vp-page { --wp: var(--p); --wp-card: var(--card); --wp-txt: var(--txt); --wp-mut: var(--txt-m); --wp-line: var(--bdr); display: flex; flex-direction: column; gap: 16px; }
.vp-page-card h4 { margin: 0 0 16px; font-size: 1.45rem; font-weight: 900; letter-spacing: -.4px; color: var(--txt); }
.vp-page .wp-points { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.vp-page .wp-point { padding: 20px 18px; border-radius: var(--rad-20); background: var(--bg); }
.vp-page .wp-point i { width: 50px; height: 50px; border-radius: var(--rad-16); font-size: 1.45rem; margin-bottom: 12px; }
.vp-page .wp-point span { font-size: .98rem; }
.vp-page .wp-contact { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.vp-page .wp-contact > div { padding: 14px; border-radius: var(--rad-18); background: var(--bg); }
.vp-page .wp-contact i { width: 44px; height: 44px; font-size: 1.25rem; }
.vp-page-empty { text-align: center; color: var(--txt-m); font-weight: 700; line-height: 1.9; border-style: dashed; }
.pp-box { margin-top: 20px; border-top: 1px solid var(--bdr); padding-top: 15px; }
.pp-box h4 { margin: 0 0 6px; color: var(--p); }
.pp-hint { margin: 0 0 12px; font-size: .78rem; color: var(--txt-m); line-height: 1.7; }
.pp-label, .pp-field label { display: block; margin: 10px 0 6px; font-size: .8rem; font-weight: 800; }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.pp-field--wide { grid-column: 1 / -1; }
.pp-field .search-input, .pp-point { margin: 0 0 4px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-pill); padding: 7px 13px; font-family: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.pp-chip.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }
@media (max-width: 520px) { .pp-grid { grid-template-columns: 1fr; } }

/* The work on a person's page: a mosaic across the page, and a viewer over the whole screen. */
section.vp-gallery { max-width: 1120px; margin: 0 auto; padding: 22px 28px 30px; }
section.vp-gallery .vp-gallery-head { margin-bottom: 18px; align-items: flex-end; }
section.vp-gallery .vp-gallery-head strong { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 900; letter-spacing: -.6px; color: var(--txt); }
section.vp-gallery .vp-gallery-head span { font-size: .86rem; padding: 6px 12px; border-radius: var(--rad-pill); background: var(--card); border: 1px solid var(--bdr); }
.sg-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 12px; }
.sg-tile { position: relative; padding: 0; border: none; border-radius: var(--rad-22); overflow: hidden; cursor: zoom-in; background: var(--card); box-shadow: 0 16px 34px -24px color-mix(in srgb, var(--c-blue-11) 50%, transparent); }
.sg-tile.sg-big { grid-column: span 2; grid-row: span 2; }
.sg-tile.sg-wide { grid-column: span 2; }
.sg-mosaic--1 { grid-template-columns: 1fr; grid-auto-rows: 420px; }
.sg-mosaic--2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; }
.sg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sg-tile:hover img { transform: scale(1.08); }
.sg-over { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px; background: linear-gradient(to top, color-mix(in srgb, var(--c-blue-5) 62%, transparent), color-mix(in srgb, var(--c-blue-5) 0%, transparent) 50%); color: var(--c-white); opacity: 0; transition: opacity .3s ease; }
.sg-tile:hover .sg-over, .sg-tile:focus-visible .sg-over { opacity: 1; }
.sg-over b { font-size: .86rem; font-weight: 900; }
.sg-over i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-white) 20%, transparent); backdrop-filter: blur(6px); font-size: 1rem; }
.sg-more { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--c-blue-5) 62%, transparent); color: var(--c-white); font-size: 2rem; font-weight: 900; }
@media (hover: none) { .sg-over { opacity: 1; background: linear-gradient(to top, color-mix(in srgb, var(--c-blue-5) 45%, transparent), color-mix(in srgb, var(--c-blue-5) 0%, transparent) 40%); } .sg-over i { display: none; } }
@media (max-width: 760px) {
  section.vp-gallery { padding: 14px 16px 22px; }
  .sg-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 8px; }
  .sg-mosaic--1 { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .sg-mosaic--2 { grid-auto-rows: 200px; }
  .sg-tile { border-radius: var(--rad-16); }
}
.sv { position: fixed; inset: 0; z-index: 10000020; display: flex; flex-direction: column; background: color-mix(in srgb, var(--c-blue-5) 96%, transparent); color: var(--c-white); animation: tkr-pop-bg .2s ease both; }
.sv[hidden] { display: none; }
.sv-top { display: flex; align-items: center; gap: 12px; padding: calc(14px + var(--sat, 0px)) 16px 10px; }
.sv-owner { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; font-size: .95rem; }
.sv-owner strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-count { font-size: .86rem; font-weight: 800; color: var(--c-sky-84); padding: 5px 12px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-white) 10%, transparent); }
.sv-close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent); background: color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-white); font-size: 1rem; cursor: pointer; flex: none; }
.sv-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 12px; }
.sv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--rad-14); box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 60%, transparent); user-select: none; }
.sv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 52px; height: 52px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent); background: color-mix(in srgb, var(--c-blue-11) 60%, transparent); color: var(--c-white); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.sv-nav:hover { background: color-mix(in srgb, var(--c-white) 20%, transparent); }
.sv-prev { right: 16px; }
.sv-next { left: 16px; }
.sv-foot { display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(14px + var(--sab, 0px)); }
.sv-like { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--rad-pill); border: 1px solid color-mix(in srgb, var(--c-white) 30%, transparent); background: color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-white); font-family: inherit; font-size: 1.1rem; font-weight: 900; cursor: pointer; transition: transform .15s; }
.sv-like:active { transform: scale(1.12); }
.sv-like.is-on { background: color-mix(in srgb, var(--c-red-60) 22%, transparent); border-color: color-mix(in srgb, var(--c-red-60) 60%, transparent); }
.sv-like span { font-size: .95rem; }
.sv-thumbs { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; padding: 4px 2px; scrollbar-width: none; }
.sv-thumbs::-webkit-scrollbar { display: none; }
.sv-thumbs button { flex: none; width: 58px; height: 58px; padding: 0; border-radius: var(--rad-12); overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s; }
.sv-thumbs button.is-on { opacity: 1; border-color: var(--c-white); }
.sv-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .sv-nav { width: 42px; height: 42px; font-size: 1.3rem; } .sv-prev { right: 8px; } .sv-next { left: 8px; } .sv-thumbs button { width: 48px; height: 48px; } }

/* The pop-up hugs its picture: no dark bars beside it, as wide as a phone allows, never stretched. */
.tkr-popup-card { width: fit-content; max-width: min(560px, 94vw); background: transparent; box-shadow: none; overflow: visible; align-items: center; }
.tkr-popup-card img { width: auto; height: auto; max-width: 100%; max-height: 76vh; min-width: min(280px, 86vw); object-fit: contain; background: none; border-radius: var(--rad-22); box-shadow: 0 30px 80px color-mix(in srgb, var(--c-black) 55%, transparent); }
.tkr-popup-text { margin-top: 10px; padding: 9px 16px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-blue-11) 78%, transparent); color: var(--c-white); font-size: .88rem; }
.tkr-popup-close { top: -14px; inset-inline-end: -8px; width: 42px; height: 42px; box-shadow: 0 8px 20px color-mix(in srgb, var(--c-black) 40%, transparent); }
.tkr-popup-tag { top: 10px; inset-inline-start: 10px; }
@media (max-width: 520px) { .tkr-popup-close { top: -12px; inset-inline-end: -4px; } }

/* "Leave the program?", asked by the phone's back button on the first screen. */
.exit-ask { position: fixed; inset: 0; z-index: 10000060; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--c-blue-5) 60%, transparent); }
.exit-ask-card { width: 100%; max-width: 360px; padding: 26px 22px 20px; border-radius: var(--rad-26); background: var(--card); color: var(--txt); text-align: center; box-shadow: 0 30px 70px color-mix(in srgb, var(--c-blue-5) 40%, transparent); }
.exit-ask-ico { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.exit-ask-card h3 { margin: 0 0 18px; font-size: 1.15rem; font-weight: 900; }
.exit-ask-actions { display: flex; gap: 10px; }
.exit-ask-actions button { flex: 1; margin: 0; }

/* A cheque's photograph on a payment form, and on the payment's details. */
.chqp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 12px; border: 1px dashed var(--bdr); border-radius: var(--rad-14); background: var(--card); }
.chqp-btn { width: auto; margin: 0; cursor: pointer; }
.chqp small { flex-basis: 100%; font-size: .72rem; color: var(--txt-m); line-height: 1.6; }
.chqp-prev { position: relative; }
.chqp-prev:empty { display: none; }
.chqp-prev img { display: block; width: 96px; height: 64px; object-fit: cover; border-radius: var(--rad-10); border: 1px solid var(--bdr); }
.chqp-prev button { position: absolute; top: -8px; inset-inline-end: -8px; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--d, var(--c-red-51)); color: var(--c-white); font-size: .7rem; cursor: pointer; padding: 0; }
.chqp-view { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px; border: 1px solid var(--bdr); border-radius: var(--rad-14); text-decoration: none; color: var(--p); font-weight: 800; }
.chqp-view img { width: 110px; height: 72px; object-fit: cover; border-radius: var(--rad-10); }

/* The cheque's photograph: a title, then two named buttons -- take one, or choose one. */
.chqp { flex-direction: column; align-items: stretch; gap: 10px; border-style: solid; background: color-mix(in srgb, var(--p) 5%, var(--card)); }
.chqp-title { font-size: .88rem; font-weight: 900; color: var(--txt); }
.chqp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chqp-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; margin: 0; padding: 13px 10px; border-radius: var(--rad-14); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-size: .9rem; font-weight: 900; cursor: pointer; text-align: center; }
.chqp-btn--cam { background: var(--p); border-color: var(--p); color: var(--c-white); }
.chqp-btn:active { transform: scale(.98); }
.chqp-prev { align-self: flex-start; }
.chqp-prev img { width: 150px; height: 96px; }

/* On a phone the band is moved by a transform (ticker.js), from its own edge. */
html.tkr-by-transform .tkr-bar .tkr-track { left: 0; transform: translate3d(100vw,0,0); will-change: transform; }
html.tkr-by-transform .tkr-bar .tkr-viewport.is-still .tkr-track { transform: none !important; }

/* A representative's plan of the round, on the home screen; done rows on the wall. */
.fld-plan { margin-top: 14px; padding: 14px; border: 1px solid var(--bdr); border-radius: var(--rad-18); background: var(--card); }
.fld-plan-head h4 { margin: 0; font-size: 1rem; font-weight: 900; }
.fld-plan-head small { display: block; margin-top: 2px; font-size: .74rem; color: var(--txt-m); }
.fld-plan-days { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 6px; scrollbar-width: none; }
.fld-plan-days::-webkit-scrollbar { display: none; }
.fld-plan-day { position: relative; flex: none; min-width: 74px; padding: 8px 10px; border-radius: var(--rad-14); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fld-plan-day b { font-size: .8rem; font-weight: 900; white-space: nowrap; }
.fld-plan-day small { font-size: .68rem; color: var(--txt-m); }
.fld-plan-day i { position: absolute; top: -6px; inset-inline-end: -4px; min-width: 20px; height: 20px; border-radius: var(--rad-pill); background: var(--p); color: var(--c-white); font-style: normal; font-size: .68rem; font-weight: 900; display: grid; place-items: center; padding: 0 5px; }
.fld-plan-day.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }
.fld-plan-day.is-on small { color: color-mix(in srgb, var(--c-white) 85%, transparent); }
.fld-plan-day.is-on i { background: var(--c-white); color: var(--p); }
.fld-plan-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.fld-plan-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--bdr); border-radius: var(--rad-14); background: var(--bg); }
.fld-plan-item.is-alert { border-color: var(--d, var(--c-red-51)); background: color-mix(in srgb, var(--d, var(--c-red-51)) 7%, var(--bg)); }
.fld-plan-item.is-done { opacity: .55; }
.fld-plan-item.is-done strong { text-decoration: line-through; }
.fld-plan-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pl); color: var(--p); font-size: .78rem; font-weight: 900; display: grid; place-items: center; }
.fld-plan-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fld-plan-what strong { font-size: .9rem; font-weight: 900; }
.fld-plan-what small { font-size: .76rem; color: var(--txt-m); }
.fld-plan-acts { display: flex; gap: 4px; flex: none; }
.fld-plan-acts button { width: 32px; height: 32px; border-radius: var(--rad-10); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-family: inherit; font-size: .8rem; cursor: pointer; padding: 0; }
.fld-plan-acts button:disabled { opacity: .3; cursor: default; }
.fld-plan-acts .is-ok { color: var(--s); border-color: var(--s); }
.fld-plan-acts .is-del { color: var(--d, var(--c-red-51)); }
.fld-plan-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.fld-plan-add .search-input, .fld-plan-add .btn-main { margin: 0; }
.fld-plan-add .btn-main { width: auto; white-space: nowrap; }
@media (max-width: 640px) { .fld-plan-add { grid-template-columns: 1fr; } .fld-plan-add .btn-main { width: 100%; } }
.lab-wall .rw-row--done { opacity: .5; }
.lab-wall .rw-row--done b { text-decoration: line-through; }

/* A price offer: the button on a doctor's page, the form, the lists and the offer's window. */
.vp-actions .vp-btn--offer { background: var(--c-orange-50); border-color: var(--c-orange-50); color: var(--c-grey-10); }
.ofr-modal { max-width: 620px; }
.ofr-hint { margin: 0 0 12px; font-size: .82rem; line-height: 1.8; color: var(--txt-m); }
.ofr-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ofr-line { display: grid; grid-template-columns: minmax(0, 1.5fr) 96px minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.ofr-line .search-input { margin: 0; }
.ofr-x { width: 36px; height: 36px; border-radius: var(--rad-10); border: 1px solid var(--bdr); background: var(--bg); color: var(--d, var(--c-red-51)); cursor: pointer; }
.ofr-add { width: auto; margin: 0 0 14px; }
.ofr-h { margin: 14px 0 8px; font-size: .92rem; font-weight: 900; color: var(--p); }
.ofr-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--bdr); border-radius: var(--rad-16); background: var(--card); cursor: pointer; }
.ofr-card:hover { border-color: var(--p); }
.ofr-card.is-sent { border-inline-start: 4px solid var(--c-orange-50); }
.ofr-card.is-accepted { border-inline-start: 4px solid var(--s); }
.ofr-card-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ofr-card-main strong { font-size: .92rem; font-weight: 900; }
.ofr-card-main span { font-size: .8rem; color: var(--txt); }
.ofr-card-main small { font-size: .72rem; color: var(--txt-m); }
.ofr-status { flex: none; font-style: normal; font-size: .74rem; font-weight: 900; padding: 5px 10px; border-radius: var(--rad-pill); background: var(--bg); color: var(--txt-m); white-space: nowrap; }
.ofr-status.is-accepted { background: var(--sl); color: var(--s); }
.ofr-status.is-declined { background: var(--dl); color: var(--d); }
.ofr-empty { text-align: center; padding: 26px 10px; color: var(--txt-m); font-weight: 700; line-height: 1.8; }
.ofr-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ofr-who span { font-size: .78rem; color: var(--txt-m); font-weight: 800; }
.ofr-who strong { font-size: 1.05rem; font-weight: 900; }
.ofr-who small { color: var(--txt-m); font-size: .78rem; }
.ofr-who em { margin-inline-start: auto; }
.ofr-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.ofr-table th, .ofr-table td { padding: 10px 8px; border-top: 1px solid var(--bdr); text-align: start; font-size: .9rem; }
.ofr-table th { font-size: .74rem; color: var(--txt-m); font-weight: 800; }
.ofr-table td:last-child, .ofr-table th:last-child { text-align: end; white-space: nowrap; font-weight: 900; color: var(--s); }
.ofr-table td small { display: block; color: var(--txt-m); font-size: .76rem; }
.ofr-note { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--rad-12); background: var(--bg); font-size: .88rem; line-height: 1.8; }
.ofr-valid { margin: 0 0 10px; font-size: .8rem; font-weight: 800; color: var(--txt-m); }
.ofr-actions { display: flex; gap: 8px; margin-top: 6px; }
.ofr-actions button { flex: 1; margin: 0; }
.ofr-profile { margin-top: 10px; }
.whx-acts { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.whx-offer { width: auto !important; margin: 0 !important; padding: 6px 10px !important; font-size: .74rem !important; }
@media (max-width: 560px) { .ofr-line { grid-template-columns: minmax(0, 1fr) 84px 36px; } .ofr-line [data-f="note"] { grid-column: 1 / -1; grid-row: 2; } }

/* A price offer's lines: the real price from the list, the offer price beside it. */
.ofr-line { grid-template-columns: minmax(0, 1.4fr) 96px minmax(0, 1fr) 36px; }
.ofr-line-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ofr-line-name b { font-size: .88rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofr-line-name small { font-size: .72rem; color: var(--txt-m); }
.ofr-line-name em { font-style: normal; font-weight: 900; color: var(--s); }
.ofr-line-name em.is-bad, .ofr-line.is-bad [data-f="price"] { color: var(--d, var(--c-red-51)); border-color: var(--d, var(--c-red-51)); }
.ofr-empty--small { padding: 12px; font-size: .84rem; }
.ofr-pct { color: var(--s); font-weight: 900; }
.ofr-seller { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 12px; border-radius: var(--rad-16); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); font-family: inherit; cursor: pointer; text-align: start; }
.ofr-seller:hover { border-color: var(--p); }
.ofr-seller > span { flex: none; width: 46px; height: 46px; border-radius: var(--rad-14); display: grid; place-items: center; font-size: 1.4rem; background: var(--pl); }
.ofr-seller div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ofr-seller b { font-size: .95rem; font-weight: 900; }
.ofr-seller small { font-size: .76rem; color: var(--p); font-weight: 800; }
.ofr-seller i { font-style: normal; color: var(--txt-m); }
.ofr-table .ofr-was { color: var(--txt-m); text-decoration: line-through; font-weight: 700; white-space: nowrap; }
.ofr-table tfoot .ofr-was { text-decoration: line-through; }
.ofr-table .ofr-now { color: var(--s); font-weight: 900; white-space: nowrap; text-align: end; }
.ofr-table .ofr-now em { display: block; font-style: normal; font-size: .72rem; color: var(--c-orange-37); }
.ofr-table th:nth-child(2), .ofr-table td:nth-child(2) { text-align: end; color: var(--txt-m); font-weight: 700; }
.ofr-table tfoot td { font-weight: 900; border-top: 2px solid var(--bdr); }
.ofr-saving { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--rad-12); background: var(--sl); color: var(--s); font-weight: 900; font-size: .92rem; text-align: center; }
.ofr-truth { margin: 0 0 10px; font-size: .74rem; color: var(--txt-m); line-height: 1.7; }
@media (max-width: 560px) { .ofr-line { grid-template-columns: minmax(0, 1fr) 84px 36px; } .ofr-line [data-f="note"] { grid-column: 1 / -1; grid-row: 2; } }

/* A date asked for with the device's calendar; the same card adds a visit to a representative's round. */
.ask-date { position: fixed; inset: 0; z-index: 10000045; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--c-blue-5) 60%, transparent); }
.ask-date-card { width: 100%; max-width: 380px; padding: 22px 20px 18px; border-radius: var(--rad-24); background: var(--card); color: var(--txt); box-shadow: 0 30px 70px color-mix(in srgb, var(--c-blue-5) 40%, transparent); display: flex; flex-direction: column; gap: 10px; }
.ask-date-card h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 900; text-align: center; }
.ask-date-card .search-input { margin: 0; font-size: 1rem; }
.ask-date-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ask-date-actions button { width: 100%; margin: 0; }
.fld-plan-cal { position: relative; cursor: pointer; border-style: dashed; }
.fld-plan-cal input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fld-plan-later { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: .74rem; color: var(--txt-m); font-weight: 800; }
.fld-plan-later button { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-pill); padding: 4px 10px; font-family: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
/* The wall: a small round tick on a planned stop, and a small round button that adds a visit. */
.lab-wall .rw-go--dot { width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; font-size: 1rem; background: var(--c-teal-39); color: var(--c-teal-9); }
.lab-wall .rw-go--dot.is-done { background: color-mix(in srgb, var(--c-white) 14%, transparent); color: var(--c-sky-84); }
.lab-wall .wall-plan-add { position: absolute; inset-inline-end: 18px; bottom: calc(18px + var(--sab, 0px)); z-index: 6; width: 52px; height: 52px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--c-cyan-42), var(--c-blue-67)); color: var(--c-white); font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 12px 28px color-mix(in srgb, var(--c-cyan-42) 40%, transparent); }
.lab-wall .wall-plan-add:active { transform: scale(.94); }
/* A representative's wall on a phone: the tools and the rows a size smaller. */
@media (max-width: 640px) {
  .role-wall .wall-tool, .role-wall .wall-exit { width: 36px; height: 36px; border-radius: var(--rad-12); }
  .role-wall .wall-tool svg { width: 18px; height: 18px; }
  .role-wall .wall-size { width: 30px; height: 30px; }
  .role-wall .rw-row { padding: 10px 12px; }
  .role-wall .rw-row-main b { font-size: 1rem; }
  .role-wall .rw-go { padding: 8px 12px; font-size: .86rem; }
  .role-wall .rw-go--dot { width: 34px; height: 34px; min-width: 34px; padding: 0; }
  .role-wall .rw-col-head { font-size: 1rem; padding: 10px 12px; }
}

/* The print button every screen about money carries, and the head a printed page gets. */
.dl-print-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0 0 12px; padding: 8px 14px; border-radius: var(--rad-12); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-family: inherit; font-size: .8rem; font-weight: 900; cursor: pointer; }
.modal-top-header .dl-print-btn { margin: 0 8px; margin-inline-start: auto; }
.dl-print-btn:hover { border-color: var(--p); color: var(--p); }
.dl-print-head { display: none; }
@media print { .dl-print-head { display: flex !important; justify-content: space-between; align-items: baseline; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--c-blue-11); font-size: 14pt; } .dl-print-head span { font-size: 10pt; } }
body.printing-mode .dl-print-head { display: flex !important; justify-content: space-between; align-items: baseline; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--c-blue-11); }
/* A person's own code: a small tile at the corner of their photograph, and the window it opens. */
.vp-avatar-wrap, .wp-logo-wrap { position: relative; flex-shrink: 0; display: inline-block; }
.vp-qr-badge { position: absolute; bottom: -8px; inset-inline-end: -10px; z-index: 3; width: 46px; height: 46px; padding: 4px; border-radius: var(--rad-14); border: 2px solid var(--c-white); background: var(--c-white); color: var(--c-blue-11); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--c-blue-5) 40%, transparent); display: grid; place-items: center; transition: transform .2s ease; }
.vp-qr-badge:hover { transform: scale(1.08) rotate(-3deg); }
.vp-qr-badge img { width: 100%; height: 100%; display: block; image-rendering: pixelated; border-radius: var(--rad-8); }
.wp-logo-wrap .vp-qr-badge { width: 34px; height: 34px; border-radius: var(--rad-11); bottom: -6px; inset-inline-end: -8px; font-size: 1.05rem; }
.dl-code { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dl-code > img { width: min(280px, 70vw); height: auto; border-radius: var(--rad-20); border: 1px solid var(--bdr); padding: 10px; background: var(--c-white); image-rendering: pixelated; }
.dl-code strong { font-size: 1.15rem; font-weight: 900; }
.dl-code p { margin: 0; font-size: .82rem; line-height: 1.9; color: var(--txt-m); max-width: 40ch; }
.dl-code-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
.dl-code-actions .btn-main, .dl-code-actions .btn-cancel { width: 100%; margin: 0; text-decoration: none; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .vp-avatar-wrap { align-self: center; } }

/* The explorer's filters: the kinds on a line of their own, the city under them, so neither is pushed below the other. */
.whx-filters { flex-direction: column; align-items: stretch; gap: 8px; }
.whx-kinds { flex-wrap: wrap; flex: none; }
.whx-filters select { width: 100%; min-width: 0; }

/* The doctor's prices: a laboratory is chosen, and its board opens. */
.prices-pick { margin-bottom: 14px; }
.prices-pick-h { font-size: .84rem; font-weight: 800; color: var(--txt-m); margin-bottom: 8px; }
.prices-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.prices-pick-lab { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--rad-16); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-family: inherit; cursor: pointer; text-align: start; }
.prices-pick-lab span { flex: 1; min-width: 0; font-size: .92rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prices-pick-lab small { flex: none; font-size: .7rem; font-weight: 800; color: var(--txt-m); }
.prices-pick-lab:hover { border-color: var(--p); }
.prices-pick-lab.is-on { border-color: var(--p); background: var(--pl); box-shadow: 0 0 0 2px color-mix(in srgb, var(--p) 25%, transparent); }

/* The code stands beside the photograph at a size a phone reads as it is: no pressing to enlarge it first. */
.vp-avatar-wrap, .wp-logo-wrap { display: inline-flex; align-items: flex-end; gap: 12px; }
.vp-qr-badge, .wp-logo-wrap .vp-qr-badge { position: static; width: 132px; height: 132px; padding: 7px; border-radius: var(--rad-20); border: none; box-shadow: 0 14px 34px color-mix(in srgb, var(--c-blue-5) 45%, transparent); }
.vp-qr-badge:hover { transform: scale(1.03); }
.vp-qr-badge img { border-radius: var(--rad-10); }
.wp-id { align-items: flex-end; }
@media (max-width: 760px) {
  .vp-avatar-wrap { align-items: center; justify-content: center; }
  .vp-qr-badge, .wp-logo-wrap .vp-qr-badge { width: 116px; height: 116px; padding: 6px; border-radius: var(--rad-18); }
  .wp-id { flex-wrap: wrap; }
}

/* A person's page comes in as a warehouse's does: the cover settles, each section rises as it is
   reached, and the gallery's photographs follow one another. */
.vp-about, .vp-card { animation: none; }
.vp-reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.vp-reveal.is-in { opacity: 1; transform: none; }
.vp-cover.has-photo { animation: vp-cover-in 16s ease-out both; transform-origin: center; }
@keyframes vp-cover-in { from { transform: scale(1.1); } to { transform: scale(1); } }
section.vp-gallery .sg-tile { opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
section.vp-gallery.is-in .sg-tile { opacity: 1; transform: none; }
section.vp-gallery .sg-tile:hover { transition-delay: 0s; }
.vp-page .wp-point, .vp-page .wp-contact > div { transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.vp-page .wp-contact > div:hover { transform: translateY(-3px); border-color: var(--p); }
@media (prefers-reduced-motion: reduce) {
  .vp-reveal, section.vp-gallery .sg-tile { opacity: 1; transform: none; transition: none; }
  .vp-cover.has-photo { animation: none; }
}

/* A subsection beside its open section, in the products screen. */
.pc-cat--sub { border-style: dashed; font-size: .76rem; padding: 6px 12px; }

/* An account's own actions, and the book's; a question that warns before it is answered. */
.acc-top { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.acc-top > button { flex: 1 1 150px; width: auto; margin: 0; }
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-actions > button { flex: 1 1 130px; width: auto; margin: 0; padding: 8px 12px; font-size: .8rem; }
.acc-name { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.whx-new { width: 100%; justify-content: center; text-align: center; cursor: pointer; border-style: dashed; color: var(--p); font-weight: 900; font-family: inherit; }
.ask-warn { margin: 0; padding: 12px 14px; border-radius: var(--rad-14); background: color-mix(in srgb, var(--d) 9%, transparent); border: 1px solid color-mix(in srgb, var(--d) 35%, transparent); font-size: .86rem; line-height: 1.8; font-weight: 700; }
.ask-warn.is-debt { background: color-mix(in srgb, var(--w) 14%, transparent); border-color: color-mix(in srgb, var(--w) 45%, transparent); }
.ask-note { margin: 0; font-size: .82rem; line-height: 1.8; color: var(--txt-m); }
.ask-date-actions .ask-danger { background: var(--d); border-color: var(--d); color: var(--c-white); }

/* Long names in the warehouse's console stay inside the screen. */
.whx-low b { min-width: 0; flex: 1; }
.wh-acts { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; align-items: center; flex-wrap: wrap; }
.wh-acts > button { flex: 1 1 auto; }
#warehouseCustomersTab .group-item strong, #warehouseAccountsTab .group-item strong, #warehouseOrdersTab .group-item strong, #warehousePaymentsTab .group-item strong { overflow-wrap: anywhere; }

/* The installed app: nothing about subscribing or paying for the service. */
.in-app .lp-nav-item:has(> a[href="#lpFeatures"]), .in-app .lp-nav-item--cta, .in-app a[href="#lpSubscribe"], .in-app a[href="#lpFeatures"],
.in-app [onclick*="'plans'"], .in-app #lxChPlans, .in-app #lpSubscribe, .in-app #lpGatewayNote,
.in-app #subSettingsBox, .in-app #trialMark, .in-app #subNotice { display: none !important; }

/* The account with a supplier is the manager's: not the secretary's, the centre's doctor's or the technician's. */
body.role-center_sec #btnNavWhAccount, body.role-center_doc #btnNavWhAccount, body.role-lab_sec #btnNavWhAccount, body.role-lab_tech #btnNavWhAccount, body.role-lab_courier #btnNavWhAccount,
body.role-center_sec #warehouseAccountTab, body.role-center_doc #warehouseAccountTab, body.role-lab_sec #warehouseAccountTab, body.role-lab_tech #warehouseAccountTab, body.role-lab_courier #warehouseAccountTab { display: none !important; }
.pc-by-manager { margin: 0; padding: 10px 14px; border-radius: var(--rad-12); background: var(--bg); color: var(--txt-m); font-size: .84rem; font-weight: 800; text-align: center; }

/* What is behind an open window does not scroll under it. */
html:has(.modal.active), body:has(.modal.active), html:has(.ask-date), body:has(.ask-date) { overflow: hidden !important; overscroll-behavior: none; }
.modal, .ask-date { overscroll-behavior: contain; }
.modal-content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---- The walls: small squares that are squares, and a table ---- */
.role-wall.wall-size-s .rw-board, .role-wall.wall-size-t .rw-board { grid-template-columns: 1fr; }
.role-wall.wall-size-s .rw-col, .role-wall.wall-size-t .rw-col { max-height: none; }
.role-wall.wall-size-s .rw-col-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 8px; }
.role-wall.wall-size-s .rw-empty { grid-column: 1 / -1; }
.role-wall.wall-size-s .rw-row { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 5px; padding: 8px 7px; min-width: 0; min-height: 104px; text-align: center; overflow: hidden; }
.role-wall.wall-size-s .rw-row-main { flex: 1; align-items: center; justify-content: center; gap: 2px; min-width: 0; width: 100%; }
.role-wall.wall-size-s .rw-row-main b { font-size: .86rem; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.role-wall.wall-size-s .rw-row-main span { font-size: .68rem; max-width: 100%; }
.role-wall.wall-size-s .rw-row-main em { display: none; }
.role-wall.wall-size-s .rw-row-side { align-items: stretch; gap: 4px; width: 100%; }
.role-wall.wall-size-s .rw-due, .role-wall.wall-size-s .rw-stock { font-size: .66rem; white-space: normal; text-align: center; }
.role-wall.wall-size-s .rw-go { width: 100%; min-height: 30px; padding: 4px 6px; font-size: .72rem; border-radius: var(--rad-8); white-space: normal; line-height: 1.2; }
.role-wall.wall-size-s .rw-go--dot { width: 30px; margin: 0 auto; }
.role-wall.wall-size-t .rw-board { gap: 8px; }
.role-wall.wall-size-t .rw-col { border-radius: var(--rad-12); }
.role-wall.wall-size-t .rw-col-head { padding: 7px 12px; font-size: .92rem; }
.role-wall.wall-size-t .rw-col-head b { min-width: 24px; height: 24px; font-size: .8rem; }
.role-wall.wall-size-t .rw-col-body { padding: 0; gap: 0; }
.role-wall.wall-size-t .rw-row { border-radius: 0; border-width: 0 0 1px; border-style: solid; border-color: var(--w-line); padding: 6px 12px; gap: 8px; }
.role-wall.wall-size-t .rw-row:last-child { border-bottom-width: 0; }
.role-wall.wall-size-t .rw-row-main { flex-direction: row; align-items: baseline; gap: 10px; }
.role-wall.wall-size-t .rw-row-main b { font-size: .92rem; flex: 0 1 40%; min-width: 0; }
.role-wall.wall-size-t .rw-row-main span { font-size: .78rem; flex: 1 1 0; min-width: 0; }
.role-wall.wall-size-t .rw-row-main em { display: none; }
.role-wall.wall-size-t .rw-row-side { flex-direction: row; align-items: center; gap: 8px; }
.role-wall.wall-size-t .rw-due, .role-wall.wall-size-t .rw-stock { font-size: .74rem; }
.role-wall.wall-size-t .rw-go { min-height: 30px; padding: 4px 10px; font-size: .76rem; border-radius: var(--rad-8); }
.role-wall.wall-size-t .rw-cases { grid-template-columns: 1fr; gap: 0; padding: 0; }
.role-wall.wall-size-t .rw-case { flex-direction: row; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 0; border-width: 0 0 1px; }
.role-wall.wall-size-t .rw-case-top { flex: 0 1 42%; min-width: 0; } .role-wall.wall-size-t .rw-case-top b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-wall.wall-size-t .rw-bar { flex: 1; height: 8px; } .role-wall.wall-size-t .rw-case-stage { font-size: .78rem; white-space: nowrap; }
/* the laboratory's wall as a table: one case a line */
.lab-wall.wall-size-t .wall-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--w-line); border-radius: var(--rad-12); overflow: hidden; }
.lab-wall.wall-size-t .wall-card { flex-direction: row; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 0; border-width: 0 0 1px; min-width: 0; }
.lab-wall.wall-size-t .wall-card:last-child { border-bottom-width: 0; }
.lab-wall.wall-size-t .wall-card-top { order: 3; flex: none; gap: 6px; }
.lab-wall.wall-size-t .wall-name { order: 1; flex: 0 1 34%; min-width: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-wall.wall-size-t .wall-details { order: 2; flex: 1 1 0; min-width: 0; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--w-sub); }
.lab-wall.wall-size-t .wall-doctor, .lab-wall.wall-size-t .wall-step, .lab-wall.wall-size-t .wall-more, .lab-wall.wall-size-t .wall-star-txt, .lab-wall.wall-size-t .wall-reimp small { display: none; }
.lab-wall.wall-size-t .wall-reimp { order: 4; flex: none; font-size: .7rem; padding: 3px 6px; }
.lab-wall.wall-size-t .wall-go { order: 5; flex: none; width: auto; min-height: 30px; padding: 4px 10px; font-size: .76rem; border-radius: var(--rad-8); }
.lab-wall.wall-size-t .wall-star { font-size: .7rem; padding: 2px 6px; }
.lab-wall.wall-size-t .wall-due { font-size: .7rem; white-space: nowrap; }
@media (max-width: 600px) {
  .lab-wall.wall-size-t .wall-details { display: none; }
  .lab-wall.wall-size-t .wall-name { flex: 1 1 0; }
  .lab-wall.wall-size-s .wall-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .role-wall.wall-size-t .rw-row-main { flex-direction: column; align-items: stretch; gap: 0; }
  .role-wall.wall-size-t .rw-row-main b { flex: none; }
}

/* ---- A product's photograph, over the window it was pressed in, with a way out ---- */
.pc-zoom { z-index: 10000040; }
.pc-zoom-x { position: absolute; top: calc(16px + var(--sat, 0px)); inset-inline-end: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-white) 40%, transparent); background: color-mix(in srgb, var(--c-white) 16%, transparent); color: var(--c-white); font-size: 1.1rem; font-weight: 900; cursor: pointer; z-index: 2; }
.wp-lightbox { z-index: 10000040; }
.wp-lb-close { width: 46px; height: 46px; font-size: 1.1rem; font-weight: 900; border-color: color-mix(in srgb, var(--c-white) 45%, transparent); background: color-mix(in srgb, var(--c-white) 20%, transparent); }

/* ---- The assistant: its own solid sheet, one scroll, words that wrap as words ---- */
.ai-panel { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto; overscroll-behavior: contain; max-height: min(70vh, 600px); max-height: min(70dvh, 600px); }
.ai-log { overflow: visible; flex: none; }
.ai-item { flex-wrap: wrap; }
.ai-item-title { flex: 1 1 150px; min-width: 0; overflow-wrap: break-word; word-break: normal; }
.ai-item-sub { white-space: normal; margin-inline-start: 0; }
.ai-said, .ai-reply { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.ai-turn { min-width: 0; }
@media (max-width: 600px) {
  .ai-assistant:has(.ai-panel.is-open)::before { content: ''; position: fixed; inset: 0; background: color-mix(in srgb, var(--c-blue-11) 50%, transparent); z-index: -1; }
  .ai-panel { position: fixed; inset-inline: 10px; width: auto; inset-block-end: calc(78px + var(--navbar-space)); max-height: calc(100vh - 200px); max-height: calc(100dvh - 190px - var(--sat, 0px)); border-radius: var(--rad-20); }
}

/* ---- The phone's own bar: nothing of the page shows through it while the page scrolls ---- */
html.capacitor-native body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--sat, 0px); background: var(--bg); z-index: 95; pointer-events: none; }
html.capacitor-native .pc-zoom, html.capacitor-native .wp-lightbox, html.capacitor-native .call-overlay, html.capacitor-native .tkr-popup, html.capacitor-native .sv,
html.capacitor-native .privacy-viewer, html.capacitor-native .push-invite, html.capacitor-native .ota-layer, html.capacitor-native #verifyScreen, html.capacitor-native .ask-date, html.capacitor-native .exit-ask { padding-top: var(--sat); }

/* ---- The teeth, in words: each work with its teeth, and each tooth with more than one work ---- */
.arch-svg .tmulti { fill: var(--c-blue-11); stroke: var(--c-white); stroke-width: 1.4; pointer-events: none; }
.arch-svg .tmulti-n { font: 900 8px 'Noto Sans Arabic', Arial, sans-serif; fill: var(--c-white); pointer-events: none; }
.arch-svg .tooth-g.is-multi .tlabel { paint-order: stroke; stroke: color-mix(in srgb, var(--c-blue-11) 55%, transparent); stroke-width: 2px; }
.teeth-badges-grid { display: block; min-width: 0; }
.tooth-key { display: grid; gap: 6px; margin-top: 12px; min-width: 0; }
.tooth-key-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--rad-12); background: var(--bg); border: 1px solid var(--bdr); min-width: 0; }
.tooth-key-dot { flex: none; width: 16px; height: 16px; border-radius: 5px; margin-top: 3px; }
.tooth-key-txt { flex: 1; min-width: 0; display: grid; gap: 5px; }
.tooth-key-txt b { font-size: .84rem; font-weight: 900; overflow-wrap: anywhere; }
.tooth-key-txt b i { font-style: normal; font-weight: 900; color: var(--p); }
.tooth-key-txt b small { font-weight: 800; color: var(--txt-m); }
.tooth-key-txt > span { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
.tooth-key u { text-decoration: none; display: inline-block; min-width: 26px; padding: 2px 6px; border-radius: var(--rad-7); background: var(--card); border: 1px solid var(--bdr); font-size: .78rem; font-weight: 900; text-align: center; color: var(--txt); }
.tooth-key-multi { padding: 8px 10px; border-radius: var(--rad-12); border: 1px dashed var(--bdr); display: grid; gap: 6px; font-size: .8rem; min-width: 0; }
.tooth-key-multi strong { font-size: .76rem; color: var(--txt-m); }
.tooth-key-multi > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.tooth-key-multi em { font-style: normal; font-weight: 800; border-bottom: 3px solid; padding-bottom: 1px; overflow-wrap: anywhere; }
.tooth-key-hint { font-size: .68rem; color: var(--txt-m); margin-top: 8px; line-height: 1.7; }
.tooth-pill { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }

/* ---- Pulled down from the top: read again ---- */
html { overscroll-behavior-y: contain; }
.dl-refresh-pill { position: fixed; top: calc(10px + var(--sat, 0px)); left: 50%; z-index: 999990; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--p); border: 1px solid var(--bdr); box-shadow: 0 10px 26px color-mix(in srgb, var(--c-blue-11) 18%, transparent); font-size: 1.25rem; font-weight: 900; opacity: 0; transform: translateY(-60px) scale(.8); transition: opacity .18s, transform .18s; pointer-events: none; }
.dl-refresh-pill.is-on { opacity: calc(.35 + .65 * var(--pull, 1)); transform: translateY(calc(34px * var(--pull, 1))) scale(calc(.8 + .2 * var(--pull, 1))); }
.dl-refresh-pill.is-on span { display: block; transform: rotate(calc(260deg * var(--pull, 1))); }
.dl-refresh-pill.is-armed { background: var(--p); color: var(--c-white); border-color: var(--p); }
.dl-refresh-pill.is-busy { opacity: 1; transform: translateY(34px) scale(1); }
.dl-refresh-pill.is-busy span { animation: dlSpin .8s linear infinite; }
@keyframes dlSpin { to { transform: rotate(360deg); } }

/* ---- A window on a phone: it moves up and down only, and is not blurred through ---- */
.modal-content { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
#settingsModal .modal-content > *, #settingsModal .form-group, #settingsModal .set-card { max-width: 100%; min-width: 0; box-sizing: border-box; }
#settingsModal .set-row { min-width: 0; flex-wrap: wrap; }
#settingsModal .set-row > * { min-width: 0; max-width: 100%; }
#settingsModal select, #settingsModal input { max-width: 100%; }
/* The blur behind a window is the costliest thing a phone draws, and a long window (the settings)
   scrolled slowly under it: on a phone the window is solid and what is behind is only dimmed. */
@media (hover: none) and (pointer: coarse) {
  .modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--c-blue-11) 66%, transparent); transition: none; }
  .modal-content { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app-header, .nav-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (hover: none) and (pointer: coarse) {
  .modal-content, .app-header, .nav-bar { background: linear-gradient(var(--card), var(--card)), var(--bg); }
}

/* ---- An order with many works: its card wraps inside the screen, nothing pushes it sideways ---- */
.card-header { flex-wrap: wrap; gap: 8px; min-width: 0; }
.card-header .patient-meta { flex: 1 1 210px; min-width: 0; }
.card-header .patient-meta > div:last-child { min-width: 0; flex: 1; }
.card-header > div:last-child { min-width: 0; max-width: 100%; }
.patient-name, .sub-text, .card-footer { overflow-wrap: anywhere; min-width: 0; }
.card-footer { flex-wrap: wrap; gap: 8px; }
.treatment-abbr { overflow-wrap: anywhere; white-space: normal; }

/* ---- An incoming call: a swipe to answer or decline ---- */
.call-swipe { position: relative; width: min(320px, 86vw); height: 76px; margin: 6px auto 0; border-radius: var(--rad-pill); display: flex; align-items: center; justify-content: space-between; padding: 0 8px;
  background: linear-gradient(90deg, rgba(220,38,38,calc(.18 + .5 * var(--no, 0))) 0%, color-mix(in srgb, var(--c-white) 8%, transparent) 50%, rgba(22,163,74,calc(.18 + .5 * var(--yes, 0))) 100%); border: 1px solid color-mix(in srgb, var(--c-white) 18%, transparent); touch-action: none; user-select: none; -webkit-user-select: none; }
.call-swipe-end { width: 56px; height: 56px; border-radius: 50%; border: 0; font: inherit; font-size: 1.3rem; font-weight: 900; color: var(--c-white); cursor: pointer; z-index: 1; }
.call-swipe-end.is-no { background: var(--c-red-51); }
.call-swipe-end.is-yes { background: var(--c-green-36); }
.call-swipe-hint { position: absolute; top: 50%; transform: translateY(-50%); font-size: .74rem; font-weight: 900; color: color-mix(in srgb, var(--c-white) 75%, transparent); pointer-events: none; animation: callHint 1.6s ease-in-out infinite; }
.call-swipe-hint.is-no { left: 74px; } .call-swipe-hint.is-yes { right: 74px; animation-delay: .8s; }
.call-swipe.is-dragging .call-swipe-hint { opacity: 0; animation: none; }
@keyframes callHint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.call-swipe-knob { position: absolute; left: calc(50% - 31px); top: 7px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--c-white); color: var(--c-blue-11); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-black) 35%, transparent); cursor: grab; z-index: 2; touch-action: none; animation: callKnob 1.4s ease-in-out infinite; }
.call-swipe.is-dragging .call-swipe-knob { animation: none; cursor: grabbing; }
.call-swipe-knob.is-yes { background: var(--c-green-45); color: var(--c-white); } .call-swipe-knob.is-no { background: var(--c-red-60); color: var(--c-white); }
@keyframes callKnob { 0%, 100% { box-shadow: 0 8px 22px color-mix(in srgb, var(--c-black) 35%, transparent), 0 0 0 0 color-mix(in srgb, var(--c-white) 35%, transparent); } 50% { box-shadow: 0 8px 22px color-mix(in srgb, var(--c-black) 35%, transparent), 0 0 0 12px color-mix(in srgb, var(--c-white) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .call-swipe-knob, .call-swipe-hint { animation: none; } }
.call-card--video .call-swipe { margin-bottom: calc(10px + var(--sab, 0px)); }

/* ---- The laboratory's wall: the courier's box and what is ready stand still on the left, and only
   the cases scroll. From a tablet's width up; a phone shows them one under the other. ---- */
@media (min-width: 600px) {
  #labWall .wall-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 18px; }
  #labWall .wall-layout, #labWall[dir="ltr"] .wall-layout { flex: 1; min-height: 0; height: 100%; direction: ltr; display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; }
  #labWall[dir="rtl"] .wall-layout > * { direction: rtl; }
  #labWall .wall-side, #labWall[dir="ltr"] .wall-side { display: flex; order: 0; position: static; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  #labWall .wall-side .wall-ready, #labWall .wall-courier { order: 0; }
  #labWall .wall-cases { order: 1; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 96px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  #labWall .wall-layout, #labWall[dir="ltr"] .wall-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 12px; }
}

/* ---- A laboratory's own price list, and a case passed on ---- */
.mpl-hint { margin: 0 0 12px; font-size: .82rem; color: var(--txt-m); line-height: 1.8; }
.mpl-head, .mpl-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.mpl-head { font-size: .72rem; font-weight: 900; color: var(--txt-m); margin-bottom: 4px; }
.mpl-row { margin-bottom: 6px; }
.mpl-row .search-input { margin: 0; padding: 9px 8px; font-size: .85rem; min-width: 0; }
.mpl-x { width: 30px; height: 30px; border-radius: var(--rad-9); border: 1px solid var(--bdr); background: var(--bg); color: var(--d); cursor: pointer; }
@media (max-width: 520px) { .mpl-head { display: none; } .mpl-row { grid-template-columns: 1fr 1fr 30px; } .mpl-row .mpl-name { grid-column: 1 / -1; } }
.referral-line { margin-top: 10px; padding: 10px 14px; border-radius: var(--rad-14); background: var(--pl); color: var(--ph, var(--p)); font-size: .84rem; font-weight: 700; }

/* The network's "discover": laboratories or doctors. */
.net-kinds { display: flex; gap: 8px; margin: 4px 0 14px; }
.net-kind { flex: 1; padding: 10px 12px; border-radius: var(--rad-14); border: 1px solid var(--bdr); background: var(--card); color: var(--txt); font-family: inherit; font-weight: 900; font-size: .88rem; cursor: pointer; }
.net-kind.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }

/* The note written with an order, where the order is read first. */
.order-note-banner { margin-top: 12px; padding: 12px 14px; border-radius: var(--rad-14); background: color-mix(in srgb, var(--c-orange-50) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--c-orange-50) 40%, transparent); font-size: .88rem; line-height: 1.8; overflow-wrap: anywhere; }

/* ---- The bottom bar's icons: a fast swipe carries straight to the last one. ----
   It used to stop at each icon (a snap), and every button animated everything it had on each
   frame; on a phone the swipe died half way. Now the bar scrolls freely, on the compositor, and
   only the colours of a button change when it is pressed. */
@media (max-width: 1023px) {
  .nav-bar { scroll-snap-type: none; scroll-behavior: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; will-change: scroll-position; contain: layout paint; }
  .nav-btn { scroll-snap-align: none; transition: color .15s, background-color .15s; touch-action: pan-x; }
  .nav-btn > i[data-icon], .nav-btn[data-icon] .nav-ico { transition: background-color .15s, color .15s; }
}

/* A tap adds what most notes say. */
.note-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.note-chip { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-pill); padding: 6px 11px; font-family: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.note-chip:active { background: var(--pl); }

/* A conversation on a phone: the name and its buttons on one line, so the messages keep the screen. */
@media (max-width: 600px) {
  #chatThreadModal .modal-top-header { flex-wrap: nowrap; gap: 6px; align-items: center; }
  #chatThreadTitle { flex: 1 1 auto; min-width: 0; font-size: 1rem; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #chatThreadModal .chat-safety { flex: 0 1 auto; flex-wrap: nowrap; overflow-x: auto; max-width: 62%; margin-inline-end: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #chatThreadModal .chat-safety::-webkit-scrollbar { display: none; }
  #chatThreadModal .chat-safety > * { flex: 0 0 auto; }
  #chatThreadModal .chat-voice-call span, #chatThreadModal .chat-call span { display: none; }
}
.chat-older { align-self: center; border: 1px solid var(--bdr); background: var(--bg); color: var(--p); border-radius: var(--rad-12); padding: 6px 14px; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; margin: 4px 0 8px; }

/* ---- The wall on a phone: the tools on a line of their own, the counts under them, then the search;
   the courier's box and what is ready in a narrow column on the left, each scrolling on its own,
   and the cases in the middle -- the only thing that scrolls with the finger on the screen. ---- */
@media (max-width: 599px) {
  #labWall .wall-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #labWall .wall-head .wall-head-end { grid-column: 1; grid-row: 1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  #labWall .wall-head .wall-head-end::-webkit-scrollbar { display: none; }
  #labWall .wall-head > div:first-child { grid-column: 1; grid-row: 2; }
  #labWall .wall-head .wall-find { grid-row: 3; }
  #labWall .wall-counts { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  #labWall .wall-counts::-webkit-scrollbar { display: none; }
  #labWall .wall-body { overflow: hidden; display: flex; flex-direction: column; padding: 8px 8px 0; }
  #labWall .wall-layout, #labWall[dir="ltr"] .wall-layout { flex: 1; min-height: 0; height: 100%; direction: ltr; display: grid; grid-template-columns: 31% minmax(0, 1fr); gap: 8px; align-items: stretch; }
  #labWall[dir="rtl"] .wall-layout > * { direction: rtl; }
  #labWall .wall-side, #labWall[dir="ltr"] .wall-side { display: flex; flex-direction: column; gap: 8px; order: 0; position: static; height: 100%; min-height: 0; max-height: none; overflow: hidden; }
  #labWall .wall-side .wall-courier { order: 0; }
  #labWall .wall-side .wall-ready { order: 1; }
  #labWall .wall-side .wall-courier, #labWall .wall-side .wall-ready { flex: 1 1 0; min-height: 70px; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 7px; border-radius: var(--rad-12); margin: 0; scrollbar-width: thin; }
  #labWall .wall-side .wall-courier:not(:has(.wall-courier-row)), #labWall .wall-side .wall-ready:not(:has(.wall-ready-row)) { flex: 0 0 auto; }
  #labWall .wall-courier-head, #labWall .wall-ready-head { font-size: .74rem; gap: 4px; margin-bottom: 6px; padding: 0; }
  #labWall .wall-courier-head span, #labWall .wall-ready-head span { min-width: 20px; height: 20px; font-size: .7rem; padding: 0 5px; }
  #labWall .wall-courier-part { font-size: .64rem; margin: 6px 0 4px; gap: 4px; }
  #labWall .wall-courier-part span { min-width: 18px; height: 18px; font-size: .64rem; padding: 0 4px; }
  #labWall .wall-courier-row, #labWall .wall-ready-row { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; border-radius: var(--rad-10); margin-bottom: 5px; }
  #labWall .wall-side .wall-ready-who b { font-size: .74rem; line-height: 1.3; }
  #labWall .wall-side .wall-ready-who span { font-size: .62rem; }
  #labWall .wall-courier-go, #labWall .wall-ready-go { padding: 5px 4px; font-size: .68rem; border-radius: var(--rad-8); }
  #labWall .wall-courier-empty, #labWall .wall-ready-empty { font-size: .64rem; padding: 6px 2px; }
  #labWall .wall-cases { order: 1; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 96px; }
}

/* A case's stage on its card: a small dot and a word, quiet. */
.stage-dot { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; color: var(--txt-m); white-space: nowrap; padding: 2px 0; }
.stage-dot i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* A new price list: by hand, from the template, or one treatment. */
.price-choices { display: flex; flex-direction: column; gap: 10px; }
.price-choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; border: 1px solid var(--bdr); background: var(--card); border-radius: var(--rad-14); padding: 14px; cursor: pointer; font: inherit; color: var(--txt); }
.price-choice:hover { border-color: var(--p); background: var(--pl); }
.price-choice-ico { font-size: 1.6rem; flex-shrink: 0; }
.price-choice b { display: block; font-size: .95rem; } .price-choice small { display: block; color: var(--txt-m); font-size: .76rem; margin-top: 2px; }
.price-empty-start { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; border: 2px dashed var(--p); background: var(--pl); color: var(--p); border-radius: var(--rad-14); padding: 18px; cursor: pointer; font: inherit; }
.price-empty-start b { font-size: 1rem; } .price-empty-start small { color: var(--txt-m); font-size: .76rem; }

/* What a representative handed over: a table, with its total. */
.repacc-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .76rem; }
.repacc-table th, .repacc-table td { padding: 6px 6px; border-bottom: 1px solid var(--bdr); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.repacc-table th { color: var(--txt-m); font-weight: 800; font-size: .7rem; background: var(--bg); }
.repacc-table tfoot td { font-weight: 900; border-bottom: none; }
.repacc-table small { color: var(--txt-m); }
.repacc-hist .repacc-table tr { display: table-row; }
@media (max-width: 599px) {
  /* Over the cases, on the right, a round button: the column on the left stays readable. */
  #labWall .wall-new-order, #labWall[dir="rtl"] .wall-new-order { inset-inline-end: auto; left: auto; right: 14px; padding: 6px; gap: 0; }
  #labWall .wall-new-order > :not(.wall-new-order-plus) { display: none; }
}
#whInviteKinds { display: none !important; }

/* A representative or a secretary on the warehouse's staff page: each thing on a line of its own. */
.staff-card { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 6px; }
.staff-card .staff-name { font-size: .92rem; cursor: pointer; color: var(--p); text-decoration: underline; overflow-wrap: anywhere; }
.staff-card .staff-reach { font-size: .74rem; color: var(--txt-m); overflow-wrap: anywhere; text-align: start; }
.staff-card .staff-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--bdr); padding-top: 8px; margin-top: 2px; }
.staff-card .staff-badges { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.staff-card .badge-status { position: static !important; margin: 0 !important; }
.staff-card .staff-foot > button { width: auto; margin: 0; padding: 6px 14px; }
.repacc-table td[dir="ltr"] { white-space: nowrap; }
.repacc-table td[dir="ltr"] small { display: block; }
.repacc-table th:nth-child(4), .repacc-table td:nth-child(4) { width: 34%; }
.lab-wall .wall-more { display: block; width: 100%; margin: 14px 0 0; padding: 12px; border-radius: var(--rad-14); border: 1px dashed var(--w-tool, var(--c-blue-27)); background: transparent; color: inherit; font: inherit; font-weight: 900; cursor: pointer; opacity: .85; }
.lab-wall .wall-side-more { display: block; width: 100%; margin-top: 4px; padding: 6px; border-radius: var(--rad-10); border: 1px dashed currentColor; background: transparent; color: inherit; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; opacity: .8; }
.role-wall .wall-side-more { display: block; width: 100%; margin-top: 6px; padding: 8px; border-radius: var(--rad-10); border: 1px dashed currentColor; background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; opacity: .8; }
@media (max-width: 600px) {
  /* The person's name gets the room: report and block are their icons alone on a phone. */
  #chatThreadModal .chat-safety > button:not(.chat-voice-call) { font-size: 0; padding: 6px 8px; }
  #chatThreadModal .chat-safety > button:not(.chat-voice-call)::first-letter { font-size: .95rem; }
  #chatThreadModal .chat-safety { max-width: 50%; }
}
@media (max-width: 600px) {
  /* On a phone the title is one line: "online" is its green dot, "last seen" is left out. */
  #chatThreadTitle .chat-presence { font-size: 0; margin: 0; flex-shrink: 0; order: 9; }
  #chatThreadTitle .chat-presence.is-on::before { margin: 0; }
}

/* A supply request opened in full. */
.rq-state { padding: 10px 14px; border-radius: var(--rad-12); font-weight: 800; font-size: .88rem; margin-bottom: 12px; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 12px; }
.rq-row { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px dashed var(--bdr); padding-bottom: 6px; min-width: 0; }
.rq-row span { font-size: .72rem; color: var(--txt-m); font-weight: 700; } .rq-row b { font-size: .88rem; overflow-wrap: anywhere; }
.rq-note { background: var(--wl); border-radius: var(--rad-12); padding: 10px 12px; margin-bottom: 12px; font-size: .85rem; white-space: pre-wrap; }
.rq-lines { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rq-lines th, .rq-lines td { padding: 7px 6px; border-bottom: 1px solid var(--bdr); text-align: start; vertical-align: top; }
.rq-lines th { font-size: .72rem; color: var(--txt-m); background: var(--bg); }
.rq-lines tfoot td { font-weight: 900; border-bottom: none; }
.rq-lines small { color: var(--txt-m); }
.rq-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }

/* The order form's key: each work can be taken off, from every tooth or from one. */
.tooth-key--edit .tooth-key-row { align-items: center; }
.tooth-key--edit .tk-tooth { display: inline-flex; align-items: center; gap: 2px; padding-inline-end: 2px !important; }
.tooth-key--edit .tk-x { border: none; background: color-mix(in srgb, var(--c-red-51) 12%, transparent); color: var(--d); width: 18px; height: 18px; border-radius: 50%; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0; font-weight: 900; }
.tooth-key--edit .tk-del { flex-shrink: 0; border: 1px solid var(--c-red-89); background: var(--dl); color: var(--d); border-radius: var(--rad-10); padding: 6px 10px; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; white-space: nowrap; }

/* A question before a step that sends a case away (app.js: dlConfirm) -- above every screen and wall. */
.dl-confirm { position: fixed; inset: 0; z-index: 2147483000; background: color-mix(in srgb, var(--c-blue-11) 55%, transparent); display: flex; align-items: center; justify-content: center; padding: 16px; animation: dlcIn .12s ease-out; }
.dl-confirm-card { background: var(--card, var(--c-white)); color: var(--txt, var(--c-blue-11)); border-radius: var(--rad-20); padding: 20px; width: min(420px, 100%); box-shadow: 0 24px 60px color-mix(in srgb, var(--c-black) 35%, transparent); }
.dl-confirm-title { font-size: 1.1rem; font-weight: 900; margin-bottom: 8px; }
.dl-confirm-text { font-size: .95rem; line-height: 1.7; color: var(--txt-m, var(--c-blue-35)); margin-bottom: 16px; overflow-wrap: anywhere; }
.dl-confirm-acts { display: flex; gap: 10px; }
.dl-confirm-acts button { flex: 1; margin: 0; padding: 12px; }
@keyframes dlcIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 599px) {
  /* The clinic's board on a phone, headed as the laboratory's wall: tools, then counts, then search. */
  #roleWall .wall-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #roleWall .wall-head .wall-head-end { grid-column: 1; grid-row: 1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  #roleWall .wall-head .wall-head-end::-webkit-scrollbar { display: none; }
  #roleWall .wall-head > div:first-child { grid-column: 1; grid-row: 2; }
  #roleWall .wall-head .wall-find { grid-row: 3; }
  #roleWall .wall-counts { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  #roleWall .wall-counts::-webkit-scrollbar { display: none; }
}

/* A conversation's header on a phone: the calls inside the program in sight, always; the call to
   the person's own number, report and block behind ⋯ -- the green phone was being taken for the
   program's call. */
.chat-safety .chat-more { display: none; }
@media (max-width: 600px) {
  #chatThreadModal .chat-safety { max-width: 70%; overflow: visible; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  #chatThreadModal .chat-safety .chat-more { display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem !important; padding: 4px 10px; color: var(--txt); }
  #chatThreadModal .chat-safety > .chat-voice-call { order: 1; }
  #chatThreadModal .chat-safety > .chat-video-call { order: 2; }
  #chatThreadModal .chat-safety > .chat-more { order: 3; }
  #chatThreadModal .chat-safety > .chat-call,
  #chatThreadModal .chat-safety > button:not(.chat-voice-call):not(.chat-more) { display: none !important; order: 4; }
  #chatThreadModal .chat-safety.is-open > .chat-call:not([hidden]),
  #chatThreadModal .chat-safety.is-open > button:not(.chat-voice-call):not(.chat-more) { display: inline-flex !important; font-size: .76rem !important; flex-basis: auto; }
  #chatThreadModal .chat-safety.is-open > .chat-call span { display: inline !important; }
  #chatThreadModal .chat-safety > .chat-voice-call { font-size: 1.05rem; padding: 6px 12px; }
}
@media (max-width: 600px) {
  /* Where the program cannot call, the number is the call: in sight, not behind ⋯. */
  #chatThreadModal .chat-safety:not(:has(> .chat-voice-call:not([hidden]))) > .chat-call:not([hidden]) { display: inline-flex !important; order: 1; }
}
@media (max-width: 600px) {
  /* The name on its own line with the close button; the calls on the line under it. */
  #chatThreadModal .modal-top-header { flex-wrap: wrap; row-gap: 8px; }
  #chatThreadModal #chatThreadTitle { order: 0; flex: 1 1 0; }
  #chatThreadModal .modal-top-header > .btn-icon-close { order: 1; }
  #chatThreadModal .chat-safety { order: 2; flex: 1 1 100%; max-width: none; margin: 0; justify-content: flex-start; }
}

/* A warehouse order's own code: its number and a QR the program's scanner opens it from. */
.wo-qr { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--bdr); border-radius: var(--rad-14); background: var(--card); margin-bottom: 12px; }
.wo-qr img { width: 86px; height: 86px; image-rendering: pixelated; flex-shrink: 0; background: var(--c-white); border-radius: 6px; }
.wo-qr div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-qr span { font-size: .72rem; color: var(--txt-m); font-weight: 700; }
.wo-qr b { font-size: 1.35rem; font-weight: 900; letter-spacing: .5px; color: var(--p); }
.wo-qr small { font-size: .72rem; color: var(--txt-m); }

/* A laboratory's payments to confirm: on the doctor's card, and at the top of the home screen. */
.acc-await-box { border: 2px solid var(--d); background: var(--dl); border-radius: var(--rad-14); padding: 10px 12px; margin: 10px 0; }
.acc-await-head { font-weight: 900; color: var(--d); font-size: .86rem; margin-bottom: 8px; }
.acc-await-head b { background: var(--d); color: var(--c-white); border-radius: var(--rad-pill); padding: 1px 8px; font-size: .78rem; }
.acc-await-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border-radius: var(--rad-10); padding: 8px 10px; margin-top: 6px; }
.acc-await-row strong { font-size: 1.05rem; color: var(--txt); }
.acc-await-row span { font-size: .76rem; color: var(--txt-m); }
.acc-await-row .btn-pay { width: auto; margin: 0; padding: 8px 14px; font-size: .82rem; flex-shrink: 0; }
.pay-await-note { display: block; width: 100%; text-align: start; border: 2px solid var(--d); background: var(--dl); color: var(--d); border-radius: var(--rad-16); padding: 14px 16px; font: inherit; font-weight: 900; font-size: .95rem; cursor: pointer; margin: 0 0 14px; }
.pay-await-note b { background: var(--d); color: var(--c-white); border-radius: var(--rad-pill); padding: 1px 9px; }
.referral-chip { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 800; color: var(--c-violet-58); background: color-mix(in srgb, var(--c-violet-58) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-violet-58) 30%, transparent); border-radius: var(--rad-pill); padding: 2px 8px; white-space: nowrap; }

/* ---- What the manager allows each member of the staff (app.js: applyPermClasses) ---- */
body.grant-pay .btn-pay[onclick^="openPaymentModal"] { display: inline-flex !important; }
body.deny-accounts #btnNavChecks, body.deny-accounts #btnNavAccounts, body.deny-accounts #checksTab, body.deny-accounts #accountsTab { display: none !important; }
body.deny-orders_new [onclick^="openOrderModal(null)"], body.deny-orders_new [onclick^="openOrderModal()"], body.deny-orders_new .wall-new-order { display: none !important; }
body.deny-chat #btnMessages { display: none !important; }
body.deny-supplies #btnNavSupplies, body.deny-supplies #btnNavProducts, body.deny-supplies #btnNavWhAccount, body.deny-supplies #btnNavSupplyRequests,
body.deny-supplies #suppliesTab, body.deny-supplies #productsTab, body.deny-supplies #warehouseAccountTab { display: none !important; }
body.deny-wh_accounts #btnNavWhAccounts, body.deny-wh_accounts #warehouseAccountsTab { display: none !important; }
body.deny-wh_pay [onclick^="whRecordPayment"], body.deny-wh_pay [onclick*="whOpenPayment("] { display: none !important; }
body.deny-wh_invite #whNetDiscover, body.deny-wh_invite .whx-invite { display: none !important; }

/* ---- The settings, in sections (app.js: settingsShow) ---- */
#settingsModal .set-off { display: none !important; }
.set-menu { display: flex; flex-direction: column; gap: 8px; }
.set-menu-row, .staff-perm-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-16); padding: 14px; cursor: pointer; font: inherit; }
.set-menu-row:hover, .staff-perm-row:hover { border-color: var(--p); background: var(--pl); }
.set-menu-ico { width: 42px; height: 42px; border-radius: var(--rad-12); background: var(--pl); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.set-menu-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.set-menu-txt b { font-size: .95rem; font-weight: 900; overflow-wrap: anywhere; }
.set-menu-txt small { font-size: .74rem; color: var(--txt-m); line-height: 1.5; }
.set-menu-go { color: var(--txt-m); font-size: 1.3rem; flex-shrink: 0; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.set-head b { font-size: 1rem; font-weight: 900; color: var(--txt); }
.set-back { border: 1px solid var(--bdr); background: var(--bg); color: var(--p); border-radius: var(--rad-12); padding: 7px 12px; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
html[dir="ltr"] .set-menu-go, html[dir="ltr"] .set-back-ico { display: inline-block; transform: scaleX(-1); }
/* staff permissions */
.staff-perm-row { margin-bottom: 8px; padding: 10px 12px; }
.staff-perm-state { font-size: .7rem; font-weight: 800; color: var(--txt-m); background: var(--bg); border-radius: var(--rad-pill); padding: 3px 9px; white-space: nowrap; flex-shrink: 0; }
.staff-perm-state.is-set { color: var(--c-orange-37); background: var(--wl); }
.staff-perm-who { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 12px; border-radius: var(--rad-14); background: var(--pl); }
.staff-perm-group { font-size: .8rem; font-weight: 900; color: var(--p); margin: 16px 0 6px; }
.staff-perm-switch span { line-height: 1.5; }
.staff-perm-tag { font-style: normal; font-size: .66rem; font-weight: 800; color: var(--c-orange-37); background: var(--wl); border-radius: var(--rad-pill); padding: 1px 7px; margin-inline-start: 4px; white-space: nowrap; }
.staff-perm-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 8px; font-size: 1.6rem; }
.staff-perm-empty b { font-size: .95rem; } .staff-perm-empty small { font-size: .78rem; color: var(--txt-m); line-height: 1.7; }

/* The wall's code forgotten, in the settings. */
.wl-forgot-link { display: inline-block; margin: 6px 0 0; font-size: .8rem; }
.wl-forgot-box { grid-column: 1 / -1; background: var(--bg); border: 1px dashed var(--bdr); border-radius: var(--rad-12); padding: 10px 12px; }
.wl-forgot-box[hidden] { display: none; }

/* Reactions on a message (app.js: chatReact). */
.chat-msg { -webkit-user-select: text; user-select: text; -webkit-touch-callout: none; }
.chat-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 -18px; justify-content: flex-start; position: relative; z-index: 1; }
.chat-reacts.is-me { justify-content: flex-end; }
.chat-react { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-pill); padding: 1px 7px; font-size: .9rem; line-height: 1.5; cursor: pointer; box-shadow: 0 2px 6px color-mix(in srgb, var(--c-black) 8%, transparent); }
.chat-react small { font-size: .7rem; font-weight: 800; color: var(--txt-m); }
.chat-react.is-mine { border-color: var(--p); background: var(--pl); }
.chat-msg:has(.chat-reacts) { margin-bottom: 18px; }
.chat-react-bar { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; display: flex; gap: 2px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-pill); padding: 4px 6px; box-shadow: 0 8px 24px color-mix(in srgb, var(--c-black) 18%, transparent); z-index: 5; animation: dlcIn .12s ease-out; }
.chat-react-bar button { border: none; background: transparent; font-size: 1.35rem; padding: 2px 5px; cursor: pointer; border-radius: 50%; }
.chat-react-bar button:active { transform: scale(1.25); }
/* Nothing that floats over the screen goes on paper: the assistant, the walls' and boards' buttons, the toasts. */
@media print {
  #aiLauncher, .ai-launcher, .ai-assistant, #aiPanel, .wall-launch, .wall-new-order, .dl-confirm, .toast, #toastContainer, .chat-react-bar, .call-screen { display: none !important; }
}
/* The order of the cases: newest first, or the nearest delivery first. */
.orders-sort-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-12); padding: 7px 12px; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.orders-sort-btn span { color: var(--p); font-size: .95rem; }
.orders-sort-btn:hover { border-color: var(--p); }

/* ---- The orders' cards, about half their old height: the same contents, tighter ---- */
#ordersContainer .case-card { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--rad-14); }
#ordersContainer .case-card .card-header { margin-bottom: 4px; gap: 6px; }
#ordersContainer .case-card .patient-meta { gap: 8px; }
#ordersContainer .case-card .avatar-ring { width: 32px; height: 32px; border-radius: var(--rad-10); font-size: .9rem; }
#ordersContainer .case-card .patient-name { font-size: .92rem; line-height: 1.3; }
#ordersContainer .case-card .patient-name img { width: 22px !important; height: 22px !important; }
#ordersContainer .case-card .sub-text { font-size: .72rem; margin-top: 1px; line-height: 1.4; }
#ordersContainer .case-card .sub-text .avatar-ring, #ordersContainer .case-card .sub-text span[style*="border-radius:50%"] { width: 16px !important; height: 16px !important; font-size: .55rem !important; }
#ordersContainer .case-card .badge-status { font-size: .64rem; padding: 2px 8px; }
#ordersContainer .case-card .stage-dot { font-size: .68rem; padding: 0; }
#ordersContainer .case-card .card-footer { padding-top: 6px; margin-top: 6px; font-size: .74rem; }
#ordersContainer .case-card .card-footer .sub-text { margin-top: 0; }
#ordersContainer .case-card .treatment-abbr { font-size: .66rem; padding: 1px 6px; }
#ordersContainer .case-card .referral-chip { font-size: .64rem; padding: 1px 6px; }
#ordersContainer .case-card button.btn-cancel, #ordersContainer .case-card button.btn-main { padding: 6px 8px !important; font-size: .72rem !important; }
#ordersContainer .case-card > div[onclick] { margin-top: 8px !important; padding-top: 8px !important; }
@media (min-width: 1024px) {
  #ordersContainer[data-view="cards"] { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 10px; }
}
#ordersContainer .case-card .card-footer { flex-wrap: nowrap; align-items: center; }
#ordersContainer .case-card .card-footer-txt { font-size: .7rem !important; line-height: 1.4 !important; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ordersContainer .case-card .card-footer-txt .card-sent { font-size: .66rem; font-weight: 600; color: var(--c-blue-65); }
#ordersContainer .case-card .card-footer-txt img, #ordersContainer .case-card .card-footer-txt span[style*="border-radius:50%"] { width: 16px !important; height: 16px !important; font-size: .55rem !important; vertical-align: -3px; }
#ordersContainer .case-card .card-total { font-size: .9rem !important; padding: 2px 9px !important; border-radius: var(--rad-9) !important; flex-shrink: 0; }
#ordersContainer .case-card > div[onclick] { gap: 6px !important; }
@media (max-width: 599px) {
  /* The wall as a table on a phone: the cases' column is narrow, so a row is two lines --
     the case's name across the top, its date and its button under it. One line left the name no room. */
  #labWall.wall-size-t .wall-card { flex-wrap: wrap; row-gap: 4px; padding: 7px 8px; }
  #labWall.wall-size-t .wall-name { order: 0; flex: 1 1 100%; font-size: .88rem; }
  #labWall.wall-size-t .wall-card-top { order: 1; flex: 1 1 auto; }
  #labWall.wall-size-t .wall-reimp { order: 2; }
  #labWall.wall-size-t .wall-go { order: 3; margin-inline-start: auto; padding: 3px 8px; font-size: .72rem; min-height: 26px; }
  #labWall.wall-size-t .wall-star { padding: 1px 5px; }
}

/* ---- The intraoral scanner, on this computer (app.js: scannerChosenHtml) ---- */
.scan-suggest { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--c-teal-96); border: 1px solid var(--c-teal-67); color: var(--c-teal-20); border-radius: var(--rad-12); padding: 10px 12px; font-size: .84rem; }
.scan-suggest[hidden] { display: none; }
.scan-suggest .btn-main { width: auto; margin: 0 0 0 auto; margin-inline-start: auto; padding: 6px 12px; font-size: .8rem; }
.scan-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-14); padding: 8px 10px; margin-bottom: 8px; cursor: pointer; font: inherit; }
.scan-row.is-on { border-color: var(--p); background: var(--pl); box-shadow: 0 0 0 2px var(--p) inset; }
.scan-row img, .scan-noimg { width: 64px; height: 48px; object-fit: cover; border-radius: var(--rad-8); background: var(--c-white); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.scan-row .set-menu-txt small { line-height: 1.4; }
.scan-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bdr); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: var(--c-white); flex-shrink: 0; }
.scan-row.is-on .scan-check { background: var(--p); border-color: var(--p); }
.scan-tag { font-style: normal; font-size: .64rem; font-weight: 800; color: var(--c-teal-20); background: var(--c-green-90); border-radius: var(--rad-pill); padding: 1px 7px; white-space: nowrap; }
.scan-tag.is-used { color: var(--c-orange-31); background: var(--wl); }
.scan-chosen { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--pl); border: 1px solid var(--p); border-radius: var(--rad-12); font-size: .8rem; }
.scan-chosen small { color: var(--txt-m); flex: 1; min-width: 0; }
.scan-chosen button { border: none; background: transparent; color: var(--d); font-weight: 900; cursor: pointer; }
.scan-steps { margin: 10px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; font-size: .85rem; }
.scan-key { display: flex; gap: 6px; margin-top: 6px; }
.scan-key input { margin: 0; font-size: .74rem; }
.scan-key .btn-cancel { width: auto; margin: 0; padding: 8px 12px; }
.scan-guide { margin: 0 0 10px; border: 1px solid var(--bdr); border-radius: var(--rad-12); padding: 8px 12px; background: var(--bg); }
.scan-guide summary { cursor: pointer; font-weight: 900; font-size: .85rem; }
.scan-guide dl { margin: 6px 0 0; display: grid; gap: 2px; font-size: .8rem; }
.scan-guide dt { font-weight: 900; margin-top: 6px; }
.scan-guide dd { margin: 0; color: var(--txt-m); line-height: 1.5; }
.scan-devices { display: grid; gap: 8px; margin-top: 10px; }
.scan-device { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bdr); background: var(--card); border-radius: var(--rad-14); padding: 8px 10px; }
.scan-device-ic { font-size: 1.3rem; flex-shrink: 0; }
.scan-device .set-menu-txt { flex: 1; min-width: 0; }
.scan-device-x { border: none; background: var(--dl); color: var(--d); border-radius: var(--rad-10); padding: 6px 10px; font-weight: 900; cursor: pointer; flex-shrink: 0; }
/* A chosen scan in the case: each of its files, ticked to keep (app.js: scannerChosenHtml). */
.scan-chosen-box { display: grid; gap: 6px; border: 1px solid var(--p); border-radius: var(--rad-14); padding: 8px; background: var(--card); }
.scan-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--rad-10); background: var(--bg); font-size: .8rem; cursor: pointer; }
.scan-file input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--p); }
.scan-file-kind { font-weight: 900; color: var(--p); min-width: 44px; }
.scan-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.scan-file small { color: var(--txt-m); flex-shrink: 0; }
.scan-file.is-off { opacity: .5; }
.scan-file.is-off .scan-file-name { text-decoration: line-through; }
/* Under a date field, the day it holds, day first (app.js: paintDateHints). */
.date-read { display: block; margin-top: 4px; font-size: .74rem; font-weight: 800; color: var(--p); direction: rtl; unicode-bidi: plaintext; }
.date-read[hidden] { display: none; }

/* ---- The navigation in sections (app.js: buildNavGroups) ---- */
.nav-group { flex: 0 0 auto; display: flex; }
.nav-group--none { display: none !important; }
.nav-group--single > .nav-group-head { display: none !important; }
.nav-group--single > .nav-sub { display: contents !important; }
.nav-group-caret { display: none; }
/* A phone: the section's buttons in a panel standing over the bar. */
.nav-sub { display: none; }
body > .nav-sub { display: grid; position: fixed; z-index: 2600; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; padding: 10px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-20); box-shadow: var(--shadow-md, 0 12px 30px color-mix(in srgb, var(--c-black) 18%, transparent)); animation: navSubIn .16s ease-out; }
body > .nav-sub .nav-btn { width: auto; margin: 0; }
@keyframes navSubIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nav-group.open > .nav-group-head { color: var(--p); background: var(--pl); }
@media screen and (min-width: 1024px) {
  .nav-group { display: block; width: 100%; }
  .nav-group > .nav-sub { display: none; padding-inline-start: 14px; margin: 2px 0 6px; border-inline-start: 2px solid var(--bdr); margin-inline-start: 26px; }
  .nav-group.open > .nav-sub { display: block; }
  .nav-group-caret { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .2s; margin-inline-end: 4px; }
  .nav-group.open .nav-group-caret { transform: rotate(-135deg); }
  .nav-group > .nav-sub .nav-btn { padding-block: 7px; font-size: .86rem; }
  .nav-group > .nav-sub .nav-btn[data-icon] .nav-ico { width: 30px; height: 30px; padding: 6px; }
}

/* Whether a warehouse is linked, as a dot on its logo (supplies.js: renderWarehouses). */
.sw-logo { position: relative; }
.sw-dot { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--card); box-shadow: 0 1px 3px color-mix(in srgb, var(--c-black) 25%, transparent); }
.sw-dot--on { background: var(--c-green-36); }
.sw-dot--wait { background: var(--c-orange-50); }
.sw-dot--off { background: var(--c-grey-65); }

/* The cases at work as a ring cut by stage (app.js: buildCasesDonut). */
.cases-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.cases-donut svg { width: 150px; height: 150px; flex: 0 0 auto; }
.cases-donut circle { transition: stroke-width .15s; }
.cases-donut circle:hover { stroke-width: 19; }
.cd-total { font-size: 26px; font-weight: 900; fill: var(--txt); }
.cd-sub { font-size: 10px; font-weight: 800; fill: var(--txt-m); }
.cd-legend { display: grid; gap: 4px; flex: 1 1 170px; min-width: 160px; max-width: 300px; }
.cd-row { display: flex; align-items: center; gap: 8px; border: none; background: none; padding: 5px 6px; border-radius: var(--rad-10); font: inherit; font-size: .82rem; color: var(--txt); cursor: pointer; text-align: start; }
.cd-row:hover { background: var(--bg); }
.cd-row i { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; }
.cd-row span { flex: 1; min-width: 0; }
.cd-row b { font-weight: 900; }
.cd-late { margin-top: 4px; padding: 6px 8px; border-radius: var(--rad-10); background: var(--dl); color: var(--d); font-size: .8rem; font-weight: 800; }
/* The section's panel stands clear of the page: solid, the page dimmed behind it, each button a tile. */
body > .nav-sub { background: linear-gradient(var(--card), var(--card)), var(--bg); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--c-blue-11) 45%, transparent), 0 16px 40px color-mix(in srgb, var(--c-black) 30%, transparent); border-color: var(--p); }
body > .nav-sub .nav-btn { background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 10px 4px; color: var(--txt); }
body > .nav-sub .nav-btn.active { background: var(--pl); border-color: var(--p); color: var(--p); }
.svc-search { margin-bottom: 6px; }

/* The laboratories this one passes work to, in its accounts (app.js: renderReferralAccounts). */
.ref-acc-title { margin: 18px 4px 8px; font-size: 1rem; font-weight: 900; color: var(--p); }
.ref-acc-card { cursor: pointer; padding: 14px; border: 1px solid var(--bdr); border-radius: var(--rad-16); background: var(--card); margin-bottom: 10px; }
.ref-acc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ref-acc-head small { color: var(--txt-m); font-weight: 800; }
.ref-acc-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ref-acc-figs span { display: grid; gap: 2px; background: var(--bg); border-radius: var(--rad-10); padding: 6px 8px; font-size: .74rem; color: var(--txt-m); font-weight: 800; }
.ref-acc-figs b { font-size: 1rem; color: var(--txt); }
.ref-acc-figs .is-owed b { color: var(--d); }

/* ---- The clinic's own storeroom (app.js: privateDraw) ---- */
.pv-head h2 { margin: 0 0 4px; font-size: 1.2rem; color: var(--p); }
.pv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 12px; }
.pv-tab { border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-pill); padding: 8px 14px; font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; }
.pv-tab.is-on { background: var(--p); border-color: var(--p); color: var(--c-white); }
.pv-n { font-style: normal; background: var(--d); color: var(--c-white); border-radius: var(--rad-pill); padding: 0 7px; font-size: .72rem; margin-inline-start: 4px; }
.pv-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.pv-search { display: flex; gap: 6px; align-items: center; }
.pv-search .search-input { margin: 0; flex: 1; }
.pv-scan { border: 1px solid var(--bdr); background: var(--bg); border-radius: var(--rad-12); width: 46px; height: 44px; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-chip { border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); border-radius: var(--rad-12); padding: 8px 12px; font: inherit; cursor: pointer; display: grid; text-align: center; }
.pv-chip:active { transform: scale(.96); }
.pv-chip small { color: var(--txt-m); font-size: .72rem; }
.pv-free { display: flex; gap: 6px; }
.pv-free .search-input { margin: 0; flex: 1; }
.pv-free .btn-main { width: auto; margin: 0; padding: 0 16px; }
.pv-cart { border-top: 1px dashed var(--bdr); padding-top: 8px; display: grid; gap: 6px; }
.pv-cart h4 { margin: 0; }
.pv-line { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: var(--rad-12); padding: 6px 10px; }
.pv-line > span { flex: 1; min-width: 0; font-weight: 800; }
.pv-qty { display: flex; align-items: center; gap: 6px; }
.pv-qty button { width: 30px; height: 30px; border-radius: var(--rad-10); border: 1px solid var(--bdr); background: var(--card); font-weight: 900; cursor: pointer; }
.pv-x { border: none; background: var(--dl); color: var(--d); border-radius: var(--rad-10); padding: 4px 9px; font-weight: 900; cursor: pointer; }
.pv-req-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pv-pill { font-size: .75rem; font-weight: 800; background: var(--bg); border-radius: var(--rad-pill); padding: 3px 10px; }
.pv-req.is-open { border-color: var(--c-orange-50); }
.pv-req.is-done .pv-pill { background: var(--c-green-93); color: var(--c-green-24); }
.pv-req.is-rejected .pv-pill, .pv-req.is-cancelled .pv-pill { background: var(--dl); color: var(--d); }
.pv-when { color: var(--txt-m); }
.pv-lines { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; }
.pv-free-tag { font-style: normal; font-size: .68rem; color: var(--txt-m); background: var(--bg); border-radius: var(--rad-pill); padding: 0 6px; }
.pv-note { margin: 0; color: var(--txt-m); }
.pv-acts { display: flex; gap: 8px; }
.pv-acts button { width: auto; margin: 0; padding: 8px 16px; }
.pv-row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.pv-row2 .search-input { margin: 0; }
.pv-item { grid-template-columns: 1fr auto auto; align-items: center; }
.pv-item small { color: var(--txt-m); }
.nav-btn { position: relative; }
.nav-count { position: absolute; top: 4px; inset-inline-end: 8px; font-style: normal; background: var(--d); color: var(--c-white); border-radius: var(--rad-pill); min-width: 18px; height: 18px; padding: 0 5px; font-size: .68rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }

/* An outside order, from the warehouse's orders (warehouse-ui.js: externalOrder). */
.wh-ext-btn { width: auto; margin: 0 0 12px; padding: 10px 18px; }
.wh-ext-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: var(--rad-12); padding: 10px 12px; margin-top: 6px; font: inherit; cursor: pointer; text-align: start; }
.wh-ext-row small { color: var(--txt-m); }

.pv-photo-pick { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--bdr); border-radius: var(--rad-12); padding: 8px 12px; cursor: pointer; font-weight: 800; color: var(--txt-m); }
.pv-photo-pick img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--rad-10); }
.pv-item { grid-template-columns: auto 1fr auto auto; }
.pv-thumb { width: 44px; height: 44px; border-radius: var(--rad-10); background: var(--bg); border: 1px solid var(--bdr); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; font-size: 1.1rem; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv-chip img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--rad-10); margin: 0 auto 4px; }

/* A hand-over's state, and the side's own confirming buttons (settings.js: repHistoryTable). */
.repacc-state { font-size: .7rem; color: var(--txt-m); font-weight: 800; margin-top: 2px; }
.repacc-mini { width: auto !important; margin: 4px 4px 0 0 !important; padding: 4px 10px !important; font-size: .74rem !important; }
.repacc-map { margin-inline-start: 6px; font-weight: 800; color: var(--p); text-decoration: none; white-space: nowrap; }
.repacc-route { display: inline-flex; width: auto; margin: 6px 0 8px; padding: 8px 14px; text-decoration: none; font-size: .82rem; }
.repacc-noloc { margin-inline-start: 6px; color: var(--txt-m); background: var(--bg); border-radius: var(--rad-pill); padding: 1px 8px; font-size: .68rem; white-space: nowrap; }

/* The representative's visits of today, in the round (warehouse-field.js: todaysVisits). */
.fld-visits { margin: 10px 0; border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 8px 10px; background: var(--card); }
.fld-visits h5 { margin: 0 0 6px; font-size: .88rem; color: var(--p); }
.fld-visit { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--bdr); font-size: .82rem; flex-wrap: wrap; }
.fld-visit:first-of-type { border-top: none; }
.fld-visit > span { color: var(--txt-m); font-weight: 800; }
.fld-visit small { color: var(--txt-m); }
.repacc-more { display: block; color: var(--txt-m); margin-top: 6px; }

/* A laboratory's own doctors (sponsor.js) */
.sp-invite-btn{width:auto;margin:0 0 12px;padding:9px 16px}
.sp-mine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--bdr)}
.sp-badge{background:var(--pl);color:var(--p);padding:3px 10px;border-radius:var(--rad-pill);font-size:.72rem;font-weight:800}
.sp-note{display:block;color:var(--txt-m);font-size:.78rem;line-height:1.6;margin:6px 0 10px}
.sp-h{margin:16px 0 8px;font-size:.9rem}
.sp-share{display:grid;gap:8px;margin-top:8px}
.sp-share code{display:block;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rad-10);padding:8px 10px;font-size:.78rem;word-break:break-all}
.sp-share-btns{display:flex;gap:8px}.sp-share-btns .btn-main{width:auto;padding:7px 14px;font-size:.8rem;text-decoration:none;display:inline-flex;align-items:center}
.sp-made{margin-top:12px;padding:12px;border-radius:var(--rad-12);background:var(--sl,var(--c-teal-96));border:1px solid color-mix(in srgb, var(--c-teal-39) 25%, transparent);font-weight:700;font-size:.85rem}
.sp-inv{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--bdr)}
.sp-inv>div:first-child{display:grid;gap:1px}.sp-inv small{color:var(--txt-m);font-size:.72rem}
.sp-inv-act{display:flex;gap:6px}.sp-inv-act .btn-cancel{width:auto;margin:0;padding:4px 10px}
.sp-lab{display:grid;gap:4px;margin-bottom:8px}.sp-lab b{font-size:1.05rem}.sp-lab small{color:var(--txt-m);font-size:.8rem;line-height:1.6}
.sp-row{font-size:.85rem}
.sp-banner{display:flex;gap:12px;align-items:center;margin:0 0 14px;padding:12px 14px;border-radius:var(--rad-14);background:var(--pl);border:1px solid color-mix(in srgb, var(--c-blue-53) 18%, transparent)}
.sp-banner img{width:46px;height:46px;border-radius:var(--rad-12);object-fit:cover}
.sp-banner-ico{width:46px;height:46px;border-radius:var(--rad-12);display:grid;place-items:center;background:var(--card);font-size:1.4rem}
.sp-banner div{display:grid;gap:1px}.sp-banner b{font-size:1.05rem;color:var(--txt)}.sp-banner small{color:var(--txt-m);font-size:.76rem}
.side-logo-img.is-lab-logo{border-radius:var(--rad-12);object-fit:cover}
.brand-word--side.is-lab-brand{font-size:1rem;line-height:1.25;white-space:normal}
body.is-sponsored .app-title{flex-wrap:wrap;row-gap:0}
.app-title .sp-head-lab{flex-basis:100%;font-size:.68rem;font-weight:700;color:var(--txt-m);margin:3px 0 0;line-height:1.2;padding-inline-start:34px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1024px){.app-title .sp-head-lab{display:none}}

/* A laboratory's management accounts (lab-finance.js): its manager's alone. */
body:not(.role-lab_admin):not(.role-indep_tech):not(.role-center_admin):not(.role-indep_doc):not(.role-warehouse_admin) .fin-owner-only{display:none!important}
body.role-warehouse.role-warehouse_admin .nav-btn.fin-owner-only{display:flex!important;order:50}
.lf-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lf-month{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-14);padding:4px}
.lf-month b{min-width:150px;text-align:center;font-size:1rem}
.lf-nav{width:36px;height:36px;border:none;border-radius:var(--rad-10);background:var(--bg);color:var(--txt);font-size:1.3rem;font-weight:900;cursor:pointer}
.lf-nav:disabled{opacity:.35;cursor:default}
.lf-actions{display:flex;gap:8px}.lf-actions .btn-main,.lf-actions .btn-cancel{width:auto;margin:0;padding:9px 14px;font-size:.85rem}
.lf-views{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none}
.lf-views button{flex:none;border:1px solid var(--bdr);background:var(--card);color:var(--txt-m);border-radius:var(--rad-pill);padding:8px 14px;font-weight:800;font-size:.84rem;cursor:pointer;font-family:inherit}
.lf-views button.on{background:var(--p);border-color:var(--p);color:var(--c-white)}
.lf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media (max-width:900px){.lf-kpis{grid-template-columns:1fr 1fr}}
.lf-kpi{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-18);padding:14px 16px;display:grid;gap:4px;border-top:4px solid var(--bdr)}
.lf-kpi small{color:var(--txt-m);font-weight:700;font-size:.78rem}.lf-kpi b{font-size:1.35rem;font-weight:900;line-height:1.2;text-align:start}.lf-kpi span{font-size:.72rem;color:var(--txt-m);line-height:1.5}
.lf-kpi.in{border-top-color:var(--p)}.lf-kpi.out{border-top-color:var(--w)}.lf-kpi.net{border-top-color:var(--s)}.lf-kpi.net b{color:var(--s)}.lf-kpi.loss{border-top-color:var(--d)}.lf-kpi.loss b{color:var(--d)}.lf-kpi.cash{border-top-color:var(--c-violet-66)}
.lf-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-18);padding:14px 16px;margin-bottom:14px}
.lf-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}.lf-card-h h4{margin:0;font-size:.95rem;font-weight:900}.lf-card-h a{color:var(--p);font-weight:800;font-size:.82rem;cursor:pointer}
.lf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.lf-two .lf-card{margin-bottom:14px}
@media (max-width:900px){.lf-two{grid-template-columns:1fr;gap:0}}
.lf-legend{display:flex;gap:12px;font-size:.75rem;color:var(--txt-m)}.lf-legend span{display:flex;align-items:center;gap:5px}.lf-legend i{width:10px;height:10px;border-radius:3px}
.lf-legend i.in,.lf-bar-pair i.in{background:var(--p)}.lf-legend i.out,.lf-bar-pair i.out{background:var(--w)}
.lf-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;height:200px;direction:ltr}
.lf-bar-m{display:grid;grid-template-rows:1fr auto auto;height:100%;gap:4px;cursor:pointer;border-radius:var(--rad-10);padding:4px 2px}
.lf-bar-m.is-now{background:var(--bg)}
.lf-bar-pair{display:flex;align-items:flex-end;justify-content:center;gap:3px;min-height:0}.lf-bar-pair i{width:38%;max-width:22px;border-radius:5px 5px 2px 2px;min-height:2px}
.lf-bar-m b{font-size:.68rem;text-align:center;white-space:nowrap}.lf-bar-m small{font-size:.68rem;text-align:center;color:var(--txt-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos{color:var(--s)}.neg{color:var(--d)}
.lf-hb{display:grid;grid-template-columns:minmax(90px,1.1fr) 2fr auto;gap:10px;align-items:center;padding:6px 0;font-size:.84rem}
.lf-hb-t{height:9px;border-radius:var(--rad-9);background:var(--bg);overflow:hidden}.lf-hb-t i{display:block;height:100%;border-radius:var(--rad-9);background:var(--w)}
.lf-doc .lf-hb-t i{background:var(--s)}
.lf-hb b{font-size:.82rem;white-space:nowrap}
.lf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bdr)}.lf-row:last-child{border-bottom:none}
.lf-row>div:first-child{display:grid;gap:2px;min-width:0}.lf-row>div:first-child b{font-size:.9rem}.lf-row small{color:var(--txt-m);font-size:.76rem;line-height:1.5}
.lf-row>b{white-space:nowrap;font-size:.9rem}
.lf-click{cursor:pointer}.lf-click:hover{background:var(--bg);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:var(--rad-10)}
.lf-pm{display:grid;justify-items:end;gap:2px;flex:none}.lf-pm b{white-space:nowrap}.lf-margin{font-weight:800;color:var(--s)}.lf-margin.low{color:var(--w)}
.lf-empty{color:var(--txt-m);font-size:.84rem;text-align:center;padding:16px 4px;margin:0;line-height:1.7}
.lf-note{display:block;color:var(--txt-m);font-size:.76rem;line-height:1.6;margin:8px 0}
.lf-tip{background:var(--pl);color:var(--txt);border-radius:var(--rad-14);padding:12px 14px;font-size:.84rem;line-height:1.6;margin-bottom:14px}
.lf-switch{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--txt-m);font-weight:700}
.lf-doc{padding:10px 0;border-bottom:1px solid var(--bdr);display:grid;gap:6px}.lf-doc:last-child{border-bottom:none}.lf-doc-h{display:flex;justify-content:space-between;gap:8px}.lf-doc small{color:var(--txt-m);font-size:.76rem;line-height:1.6}
.lf-emp{border:1px solid var(--bdr);border-radius:var(--rad-14);padding:12px;margin-bottom:10px;display:grid;gap:10px}
.lf-emp-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.lf-emp-h>div:first-child{display:grid}.lf-emp-h small{color:var(--txt-m);font-size:.76rem}
.lf-emp-pay{display:flex;align-items:flex-end;gap:8px}.lf-emp-pay label{display:grid;font-size:.72rem;color:var(--txt-m);gap:2px}.lf-emp-pay input{width:110px;padding:7px 10px;border:1px solid var(--bdr);border-radius:var(--rad-10);background:var(--bg);color:var(--txt);font-family:inherit}
.lf-paid{color:var(--s);font-weight:900;font-size:.82rem;padding-bottom:8px}
.lf-emp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}.lf-emp-stats span{background:var(--bg);border-radius:var(--rad-10);padding:8px;display:grid;font-size:.72rem;color:var(--txt-m)}.lf-emp-stats b{font-size:1rem;color:var(--txt)}
.lf-sm{width:auto!important;margin:0!important;padding:6px 12px!important;font-size:.78rem!important}
.lf-btns{display:flex;gap:6px;flex-wrap:wrap}
.lf-cur{width:auto;min-width:90px}
.lf-lines{display:grid;gap:8px;margin-bottom:8px}.lf-line{display:grid;grid-template-columns:1fr 100px;gap:8px}
.lf-modal-acts{display:flex;gap:8px;margin-top:14px}.lf-modal-acts .btn-main,.lf-modal-acts .btn-cancel{margin:0}
.lf-case-sum{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border-radius:var(--rad-12);padding:10px 12px;font-weight:800}

/* Every business's management accounts (finance-core.js, finance-kinds.js) */
.fin-period{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fin-modes{display:flex;background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-12);padding:3px;gap:2px}
.fin-modes button{border:none;background:none;color:var(--txt-m);font-weight:800;font-size:.8rem;padding:7px 11px;border-radius:var(--rad-9);cursor:pointer;font-family:inherit}
.fin-modes button.on{background:var(--p);color:var(--c-white)}
.fin-custom{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.fin-custom input{padding:7px 9px;border:1px solid var(--bdr);border-radius:var(--rad-10);background:var(--card);color:var(--txt);font-family:inherit}
.fin-inc{background:var(--s)!important}
.fin-loading{font-size:.8rem;color:var(--txt-m);margin:-6px 0 10px}
.fin-kpis .lf-kpi span{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.fin-d{font-style:normal;font-weight:800;font-size:.72rem;padding:1px 6px;border-radius:var(--rad-99)}.fin-d.up{color:var(--s);background:color-mix(in srgb, var(--c-teal-39) 12%, transparent)}.fin-d.down{color:var(--d);background:color-mix(in srgb, var(--c-red-60) 12%, transparent)}
.lf-kpi.out .fin-d.up,.fin-pl tr:not(.net) .fin-d{filter:none}
.fin-bars12{grid-template-columns:repeat(12,1fr);gap:4px;height:210px}.fin-bars12 .lf-bar-m b{font-size:.6rem}.fin-bars12 .lf-bar-m small{font-size:.6rem}
@media (max-width:700px){.fin-bars12 .lf-bar-m b{display:none}}
.fin-todo{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--rad-12);background:var(--bg);margin-bottom:8px;font-size:.84rem;font-weight:700}.fin-todo.bad{background:color-mix(in srgb, var(--c-red-60) 8%, transparent);color:var(--d)}
.fin-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fin-pl,.fin-aging{width:100%;border-collapse:collapse;font-size:.84rem;min-width:520px}
.fin-pl th,.fin-pl td,.fin-aging th,.fin-aging td{padding:8px 10px;border-bottom:1px solid var(--bdr);text-align:start;white-space:nowrap}
.fin-pl th,.fin-aging th{font-size:.74rem;color:var(--txt-m);font-weight:800;background:var(--bg)}
.fin-pl td:nth-child(n+2),.fin-aging td:nth-child(n+2),.fin-pl th:nth-child(n+2),.fin-aging th:nth-child(n+2){text-align:end}
.fin-pl .ind{padding-inline-start:26px;color:var(--txt)}
.fin-pl tr.sec td{font-weight:900;color:var(--p);background:transparent;padding-top:16px;border-bottom:none}
.fin-pl tr.tot td{font-weight:900;border-top:2px solid var(--bdr)}
.fin-pl tr.net td{font-weight:900;font-size:1rem;border-top:3px double var(--txt);background:var(--bg)}
.fin-pl tr.net.pos td:nth-child(2){color:var(--s)}.fin-pl tr.net.neg td:nth-child(2){color:var(--d)}
.fin-pl .pv{color:var(--txt-m)}.fin-pl .pc,.fin-pl .bg{color:var(--txt-m);font-size:.78rem}
@media (max-width:700px){.fin-pl .pc,.fin-pl .bg{display:none}.fin-pl{min-width:0}}
.fin-aging td small{display:block;font-size:.68rem;color:var(--txt-m);font-weight:400}.fin-aging tr.tot td{font-weight:900;border-top:2px solid var(--bdr)}
.fin-aging tr.lf-click:hover td{background:var(--bg)}
.fin-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.fin-filters select,.fin-filters input{flex:1;min-width:130px;padding:8px 10px;border:1px solid var(--bdr);border-radius:var(--rad-10);background:var(--card);color:var(--txt);font-family:inherit;font-size:.84rem}
.fin-sum{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--txt-m);font-weight:700;padding:8px 0;border-bottom:1px solid var(--bdr)}
.fin-tag{font-style:normal;font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:var(--rad-99);vertical-align:middle;background:var(--bg);color:var(--txt-m)}
.fin-tag.unpaid{background:color-mix(in srgb, var(--c-red-60) 12%, transparent);color:var(--d)}.fin-tag.partial{background:color-mix(in srgb, var(--c-orange-50) 14%, transparent);color:var(--c-orange-37)}.fin-tag.auto{background:var(--pl);color:var(--p)}
.fin-acc{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--bdr)}.fin-acc:last-child{border:none}
.fin-acc>div:first-child{display:grid}.fin-acc small{color:var(--txt-m);font-size:.76rem}
.fin-acc-f{display:flex;align-items:center;gap:12px;font-size:.78rem;color:var(--txt-m)}.fin-acc-f b{font-size:1.1rem;color:var(--txt)}
.fin-buds{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.fin-bud{border:1px solid var(--bdr);border-radius:var(--rad-12);padding:10px;display:grid;gap:6px}.fin-bud small{color:var(--txt-m);font-size:.74rem}
.fin-bud-h{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.84rem;font-weight:800}.fin-bud-h label{font-size:.7rem;color:var(--txt-m);font-weight:600;display:flex;align-items:center;gap:4px}
.fin-bud-h input,.fin-set-row input,.fin-acc-edit input,.fin-acc-edit select,.fin-map select,.fin-cost input{width:96px;padding:6px 8px;border:1px solid var(--bdr);border-radius:var(--rad-9);background:var(--bg);color:var(--txt);font-family:inherit}
.fin-bud-t i{background:var(--s)!important}.fin-bud-t i.near{background:var(--w)!important}.fin-bud-t i.over{background:var(--d)!important}
.fin-set-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-size:.84rem}.fin-set-row label{display:flex;align-items:center;gap:6px}
.fin-acc-edit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--bdr)}.fin-acc-edit>input{flex:1;min-width:140px;width:auto}.fin-acc-edit label{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--txt-m)}
.fin-map{display:grid;gap:8px}.fin-map label{display:flex;align-items:center;gap:8px;font-size:.84rem}.fin-map select{width:auto;min-width:160px}
.fin-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:var(--rad-99);padding:5px 10px;margin:3px;font-size:.8rem}.fin-chip small{color:var(--txt-m)}.fin-chip button{border:none;background:none;color:var(--d);cursor:pointer}
.fin-type{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);border-radius:var(--rad-12);padding:4px;margin-bottom:12px}
.fin-type button{border:none;background:none;padding:9px;border-radius:var(--rad-9);font-weight:900;color:var(--txt-m);cursor:pointer;font-family:inherit}.fin-type button.on{background:var(--d);color:var(--c-white)}.fin-type button.on.inc{background:var(--s)}
#finRecModal .fin-type button.on{background:var(--p)}
.fin-paynow,.fin-pays{border:1px dashed var(--bdr);border-radius:var(--rad-12);padding:10px 12px;margin:10px 0;display:grid;gap:8px}
.fin-pay{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.82rem}.fin-pay span{color:var(--txt-m)}.fin-pay button{border:none;background:none;color:var(--d);cursor:pointer}
.fin-attach{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:.82rem}.fin-attach label{cursor:pointer}
.fin-costs{display:grid;gap:6px;max-height:60vh;overflow:auto}
.fin-cost{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bdr)}.fin-cost span{display:grid;font-weight:700;font-size:.86rem}.fin-cost small{color:var(--txt-m);font-weight:500;font-size:.74rem}

/* A case's teeth beside it on a statement (statement.js): small, grey, never in the way. */
.st-teeth{display:inline-block;font-size:.68rem;font-weight:600;color:var(--txt-m);background:var(--bg);border-radius:6px;padding:0 5px;margin-inline-start:4px;white-space:nowrap;vertical-align:middle;letter-spacing:.02em}

/* ===== The review of October 2026: words whole, nothing under the floating buttons ===== */
/* The last lines of a page clear the two floating buttons (the assistant, the clinic's screen). */
.content-area { padding-bottom: calc(92px + var(--navbar-space)); }
@media (min-width: 1024px) { .content-area { padding-bottom: 104px; } }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  /* The bottom bar: each button as wide as its word -- the bar scrolls, a word is never cut. */
  .nav-bar .nav-btn { width: auto; min-width: clamp(60px, 15vw, 78px); padding-inline: 7px; }
  .nav-bar .nav-btn > span { overflow: visible; text-overflow: clip; }
  /* A long name at the top takes two lines, a little smaller, rather than losing its end. */
  .app-header .app-title #welcomeMsg { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: .92em; overflow: hidden; }
}
/* A case's card: who sent it on one line, when on the next -- the date is never cut. */
#ordersContainer .case-card .card-footer-txt { white-space: normal; }
#ordersContainer .case-card .card-footer-txt .card-sent { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The wall in order (lab-wall.js): the steps of the work as buttons, and the cases by how soon each is due. */
.lab-wall .wall-steps { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 4px; scrollbar-width: none; position: sticky; top: 0; z-index: 3; background: var(--w-bg, transparent); }
.lab-wall .wall-steps::-webkit-scrollbar { display: none; }
.lab-wall .wall-step-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--rad-pill); border: 2px solid var(--w-line); background: var(--w-card); color: var(--w-sub); font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.lab-wall .wall-step-chip b { min-width: 26px; padding: 1px 8px; border-radius: var(--rad-pill); background: var(--w-tool, color-mix(in srgb, var(--c-white) 10%, transparent)); color: inherit; font-size: .9rem; text-align: center; }
.lab-wall .wall-step-chip.on { background: var(--c-sky-48); border-color: var(--c-sky-48); color: var(--c-white); }
.lab-wall .wall-step-chip.on b { background: color-mix(in srgb, var(--c-white) 25%, transparent); }
.lab-wall .wall-group { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--rad-14); background: var(--w-card); border-inline-start: 6px solid var(--w-line); margin: 8px 0 12px; }
.lab-wall .wall-group span { flex: 1; }
.lab-wall .wall-group b { min-width: 34px; padding: 2px 10px; border-radius: var(--rad-pill); background: var(--w-tool, color-mix(in srgb, var(--c-white) 10%, transparent)); text-align: center; font-size: 1rem; }
.lab-wall .wall-group--priority { border-color: var(--c-amber-56); color: var(--c-amber-56); }
.lab-wall .wall-group--late { border-color: var(--c-red-60); color: var(--c-red-71); }
.lab-wall .wall-group--today { border-color: var(--c-orange-50); color: var(--c-amber-56); }
.lab-wall .wall-group--tomorrow { border-color: var(--c-sky-60); color: var(--c-sky-74); }
.lab-wall .wall-group--week { border-color: var(--c-green-45); }
.lab-wall .wall-group--later, .lab-wall .wall-group--none { border-color: var(--w-line); }
.lab-wall.wall-theme-day .wall-group--late { color: var(--c-red-51); } .lab-wall.wall-theme-day .wall-group--today, .lab-wall.wall-theme-day .wall-group--priority { color: var(--c-orange-37); } .lab-wall.wall-theme-day .wall-group--tomorrow { color: var(--c-sky-32); }
.lab-wall .wall-counts .wall-cnt { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--rad-8, 8px); }
.lab-wall .wall-counts .wall-cnt:hover { text-decoration: underline; text-underline-offset: 4px; }
.lab-wall .wall-flash { box-shadow: 0 0 0 3px var(--w-acc, var(--c-sky-60)); border-radius: var(--rad-12, 12px); transition: box-shadow .3s; }
.lab-wall .wall-counts .late { color: var(--c-red-71); } .lab-wall .wall-counts .today { color: var(--c-amber-56); }
.lab-wall.wall-theme-day .wall-counts .late { color: var(--c-red-51); } .lab-wall.wall-theme-day .wall-counts .today { color: var(--c-orange-37); }

/* The emoji drawn as Heroicons line icons (emoji-icons.js): the menu's weight; most in the colour of the words around
   them, a few in a quiet colour of what they mean. */
.emo-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; line-height: 0; }
.emo-ico svg { width: 100%; height: 100%; display: block; }
.emo-t-ok { color: var(--s); } .emo-t-bad { color: var(--d); } .emo-t-warn { color: var(--w); } .emo-t-blue { color: var(--c-sky-39); }
.emo-t-teal { color: var(--c-teal-32); } .emo-t-violet { color: var(--c-violet-58); } .emo-t-gold { color: var(--c-orange-44); } .emo-t-hot { color: var(--c-orange-48); }
.emo-t-pink { color: var(--c-pink-51); } .emo-t-muted { color: var(--txt-m); }
.emo-star.emo-t-gold svg, .emo-heart.emo-t-bad svg { fill: currentColor; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .emo-t-blue { color: var(--c-sky-60); } :root:not([data-theme="light"]) .emo-t-teal { color: var(--c-teal-50); } :root:not([data-theme="light"]) .emo-t-violet { color: var(--c-violet-76); } :root:not([data-theme="light"]) .emo-t-gold { color: var(--c-amber-56); } }
:root[data-theme="dark"] .emo-t-blue { color: var(--c-sky-60); } :root[data-theme="dark"] .emo-t-teal { color: var(--c-teal-50); } :root[data-theme="dark"] .emo-t-violet { color: var(--c-violet-76); } :root[data-theme="dark"] .emo-t-gold { color: var(--c-amber-56); }
.lab-wall .emo-t-teal, .role-wall .emo-t-teal { color: var(--c-teal-50); } .lab-wall .emo-t-blue, .role-wall .emo-t-blue { color: var(--c-sky-60); }
/* In a button, a badge or a chip, the icon is in the colour of its words. */
button .emo-ico, .btn-main .emo-ico, .btn-pay .emo-ico, .badge-status .emo-ico, .pill .emo-ico, .fin-tag .emo-ico, .wall-go .emo-ico, .st-tag .emo-ico, a[class*="btn"] .emo-ico { color: currentColor; }
button .emo-ico svg { fill: none; }

/* A product priced through the representative (supplies.js, products.js, warehouse-ui.js). */
.prod-ask, .pc-ask { color: var(--p) !important; font-weight: 800; }
.prod-add.prod-contact { background: var(--pl); color: var(--p); border: 1.5px solid var(--p); }
.whc-contact { position: absolute; bottom: 8px; inset-inline-start: 8px; background: var(--p); color: var(--c-white); font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: var(--rad-pill); }

/* =====================================================================================================
   The new look, in trial (v2.js): html.v2. The arrangement of the apps people live in -- five places at
   the thumb, the states as rings, the latest cases as a list, the rest under "more" -- worn in the
   program's own theme: its colours, its glass, its tinted tiles. Whatever theme is chosen, it follows.
   ===================================================================================================== */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 { --navbar-space: 92px; } }
.v2-ico { width: 22px; height: 22px; display: block; flex: none; }

/* The header keeps its tinted buttons; on a phone the settings are under "more", and signing out stays in reach up here. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.v2 #appMainWrapper .app-header button[onclick*="openSettingsModal"] { display: none !important; }
  html.v2 #dashboardTab .global-search-launch { display: none !important; }
}
html.v2 #v2Search { display: inline-flex !important; align-items: center; justify-content: center; }

/* The bar at the thumb (phones): floating glass, five places, each its coloured tile; the + in the middle. */
.v2-tabbar { display: none; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.v2 .nav-bar, html.v2 body > .nav-sub { display: none !important; }
  html.v2 .v2-tabbar { display: flex; position: fixed; z-index: 95; left: 10px; right: 10px; bottom: calc(10px + var(--sab, env(safe-area-inset-bottom, 0px))); max-width: 640px; margin: 0 auto; padding: 6px 4px; background: var(--card); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--bdr); border-radius: var(--rad-24); box-shadow: var(--shadow-md); justify-content: space-around; align-items: center; }
  html.v2 .v2-tab { flex: 1; min-width: 0; border: none; background: none; color: var(--txt-m); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 0 2px; font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.v2 .v2-tab .nav-ico { width: 38px; height: 38px; padding: 8.5px; border-radius: var(--rad-13); color: var(--ic); stroke-width: 1.9;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 26%, var(--card)), color-mix(in srgb, var(--ic) 13%, var(--card)));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 42%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--ic) 65%, transparent); transition: background .2s, color .2s, transform .2s; }
  html.v2 .v2-tab.on { color: var(--ic); }
  html.v2 .v2-tab.on .nav-ico { color: var(--c-white); background: linear-gradient(180deg, color-mix(in srgb, var(--ic) 88%, var(--c-white)), var(--ic)); box-shadow: 0 6px 15px -6px var(--ic), inset 0 1px 0 color-mix(in srgb, var(--c-white) 32%, transparent); }
  html.v2 .v2-tab:active .nav-ico { transform: scale(.92); }
  html.v2 .v2-tab > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.v2 .v2-tab--add { flex: 0 0 auto; width: 56px; height: 56px; margin: -22px 4px 0; border-radius: var(--rad-19); color: var(--c-white); background: linear-gradient(135deg, var(--p), var(--s)); box-shadow: 0 10px 22px -8px var(--p), 0 0 0 5px var(--card); }
  html.v2 .v2-tab--add .v2-ico { width: 26px; height: 26px; stroke-width: 2.6; }
  html.v2 .v2-tab--add:active { transform: scale(.93); }
  html.v2 .v2-tabbar.has-shop .v2-tab[data-k="money"], html.v2 .v2-tabbar.has-shop .v2-tab[data-k="more"] { flex: 1.5; }
  html.v2 .ai-assistant { inset-block-end: calc(98px + var(--sab, 0px)); }
  html.v2 .wall-launch { bottom: calc(98px + var(--sab, 0px)) !important; }
  html.v2 .content-area { padding-bottom: calc(110px + var(--sab, 0px)) !important; }
}

/* "More": a sheet from below, the rest of the program as its coloured tiles. */
.v2-sheet-wrap { position: fixed; inset: 0; z-index: 2000; background: color-mix(in srgb, var(--c-blue-11) 0%, transparent); transition: background .2s; display: flex; align-items: flex-end; }
.v2-sheet-wrap.open { background: color-mix(in srgb, var(--c-blue-11) 45%, transparent); }
.v2-sheet { width: 100%; max-height: 84vh; overflow-y: auto; background: var(--bg); color: var(--txt); border-radius: var(--rad-26) var(--rad-26) 0 0; padding: 8px 14px calc(20px + var(--sab, 0px)); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.v2-sheet-wrap.open .v2-sheet { transform: none; }
.v2-grab { display: block; width: 40px; height: 5px; border-radius: var(--rad-9); background: var(--bdr); margin: 4px auto 14px; }
.v2-me { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--bdr); background: var(--card); border-radius: var(--rad-18); font: inherit; color: inherit; cursor: pointer; text-align: start; box-shadow: var(--shadow-sm); }
.v2-me > :first-child { width: 46px !important; height: 46px !important; min-width: 46px; border-radius: 50% !important; overflow: hidden; flex: none; }
.v2-me > span { flex: 1; display: grid; } .v2-me b { font-size: 1rem; } .v2-me small { color: var(--txt-m); font-size: .8rem; }
.v2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.v2-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 1px solid var(--bdr); background: var(--card); border-radius: var(--rad-18); font: inherit; font-size: .78rem; font-weight: 800; color: var(--txt); cursor: pointer; box-shadow: var(--shadow-sm); }
.v2-cell .nav-ico { width: 44px; height: 44px; padding: 10px; border-radius: var(--rad-14); color: var(--ic, var(--p)); stroke-width: 1.9;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic, var(--p)) 26%, var(--card)), color-mix(in srgb, var(--ic, var(--p)) 13%, var(--card))); }
.v2-cell:active { transform: scale(.96); }
.v2-rows { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-18); padding: 2px 10px; }
.v2-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 4px; border: none; background: none; font: inherit; font-size: .95rem; font-weight: 700; color: var(--txt); cursor: pointer; }
.v2-row + .v2-row { border-top: 1px solid var(--bdr); }
.v2-row.is-bad { color: var(--d); }

/* Home: the states as rings, all on the screen at once; then what moved last. */
html.v2 #dashboardTab .dashboard-grid { display: none !important; }
html.v2 #dashboardTab .btn-quick-order { display: none !important; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 #dashboardTab #dashChartContainer { order: 9; } }
.v2-rings { display: grid; gap: 12px 6px; padding: 16px 8px 14px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-22); box-shadow: var(--shadow-sm); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.v2-ring { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; font: inherit; color: var(--txt); cursor: pointer; padding: 0; }
.v2-ring-c { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--rc) 7%, var(--card)); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--rc) 22%, var(--bdr)); }
.v2-ring.hot .v2-ring-c { background: conic-gradient(from 200deg, var(--rc), color-mix(in srgb, var(--rc) 60%, var(--c-white)), var(--rc)); padding: 3.5px; box-shadow: 0 6px 16px -8px var(--rc); }
.v2-ring.hot .v2-ring-c b { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--rc) 9%, var(--card)); box-shadow: 0 0 0 2.5px var(--card); color: var(--rc); }
.v2-ring-c b { font-size: 1.3rem; font-weight: 800; color: var(--txt-m); }
.v2-ring small { font-size: .68rem; line-height: 1.25; text-align: center; color: var(--txt-m); font-weight: 700; max-height: 2.5em; overflow: hidden; }
.v2-ring.t-red { --rc: var(--d); } .v2-ring.t-blue { --rc: var(--p); } .v2-ring.t-green { --rc: var(--s); } .v2-ring.t-dark { --rc: var(--c-orange-37); }
.v2-ring:active .v2-ring-c { transform: scale(.94); }
.v2-feed { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-22); padding: 6px 4px; margin-bottom: 14px; box-shadow: var(--shadow-sm); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.v2-feed-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 4px; }
.v2-feed-h h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.v2-feed-h button { border: none; background: var(--pl); color: var(--p); font: inherit; font-weight: 800; font-size: .8rem; padding: 5px 12px; border-radius: var(--rad-pill); cursor: pointer; }
.v2-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: none; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; border-radius: var(--rad-14); }
.v2-item + .v2-item { border-top: 1px solid var(--bdr); border-radius: 0; }
.v2-item:active { background: var(--pl); }
.v2-av { width: 42px; height: 42px; border-radius: var(--rad-14); flex: none; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, var(--card)), color-mix(in srgb, var(--c) 10%, var(--card))); }
.v2-item-t { flex: 1; min-width: 0; display: grid; }
.v2-item-t b { font-size: .95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-item-t small { font-size: .78rem; color: var(--txt-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-chip { flex: none; font-style: normal; font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: var(--rad-pill); color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); white-space: nowrap; }
.v2-empty { color: var(--txt-m); text-align: center; padding: 18px; margin: 0; }

/* Windows rise from below on a phone, with a handle. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.v2 .modal-content { border-radius: var(--rad-24) var(--rad-24) 0 0 !important; }
  html.v2 .modal-content::before { content: ''; display: block; width: 40px; height: 5px; border-radius: var(--rad-9); background: var(--bdr); margin: -10px auto 12px; }
}

/* The switch, in Settings > Look and language. */
.v2-switch { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; background: var(--pl); border-radius: var(--rad-12); padding: 12px 14px !important; margin: 0 0 14px !important; font-weight: 800; cursor: pointer; }

/* Noto Sans Arabic has tall ascenders and descenders: a "normal" line is ~1.75 of its size, so text that
   wraps opened wide gaps. The lines are set here instead -- body text 1.55, titles and labels tighter. */
body { line-height: 1.55; }
h1, h2, h3, h4, .modal-header h2, .modal-header h3, .dash-card-title, .patient-name, .v2-ring small, .v2-tab > span, .nav-btn > span, .v2-cell span, button, label { line-height: 1.35; }

/* The bar at the thumb sits on the bottom edge of a phone, solid, with the home indicator's space inside it:
   floating 10px above the edge, the page showed through beneath the icons. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  .nav-bar, html.capacitor-native .nav-bar, html.v2 .v2-tabbar {
    left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; margin: 0 !important;
    border-radius: var(--rad-22) var(--rad-22) 0 0 !important; border-bottom: none !important;
    background: linear-gradient(var(--card), var(--card)), var(--bg) !important;
    padding-bottom: calc(6px + var(--sab, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))) !important;
    box-shadow: 0 -6px 24px -12px color-mix(in srgb, var(--c-blue-11) 18%, transparent) !important;
  }
  html.v2 .v2-tabbar { padding-top: 8px !important; }
}

/* ---- The new look: every page opens the same way (v2.js pageHead) -------------------------------------------- */
html.v2 .v2-src-title, html.v2 .v2-src-row { display: none !important; }
.v2-head { display: none; }
html.v2 .v2-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 18px; }
html.v2 .v2-head-t { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.3px; color: var(--txt); line-height: 1.25; }
html.v2 .v2-head-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.v2 .v2-head-a > div:not(.action-grid):not(.doc-self-only) { display: flex; gap: 8px; flex-wrap: wrap; }
html.v2 .v2-head-a .action-grid { display: contents; }
html.v2 .v2-head-a .doc-self-only { margin: 0 !important; }
html.v2 .v2-head-a button { width: auto !important; min-height: 40px; margin: 0 !important; padding: 0 16px !important; border-radius: var(--rad-12) !important; font-size: .88rem !important; font-weight: 700 !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; box-shadow: none !important; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.v2 .v2-head { margin-bottom: 14px; }
  html.v2 .v2-head-t { font-size: 1.3rem; }
  html.v2 .v2-head-a { width: 100%; }
  html.v2 .v2-head-a button { flex: 1 1 auto; }
  html.v2 #dashboardTab > .v2-head { display: none; }
}

/* ---- The new look on a computer: a calm header, the page's own head, the assistant in its corner ------------------- */
@media (min-width: 1024px) {
  html.v2 #pageTitle { display: none !important; }
  html.v2 #dashboardTab .global-search-launch { display: none !important; }
  html.v2 .app-header { min-height: 64px; }
  html.v2 .ai-assistant { inset-inline-start: auto !important; inset-inline-end: auto !important; left: 24px !important; right: auto !important; inset-block-end: 24px !important; }
  html.v2 .content-area { padding-top: 26px !important; }
  /* Home: the head and the rings across, then the latest cases beside the money and the chart. */
  html.v2 #dashboardTab.active { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); }
  html.v2 #dashboardTab > .v2-head, html.v2 #dashboardTab > .v2-rings { grid-column: 1 / -1; margin: 0; }
  html.v2 #dashboardTab .v2-rings { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; padding: 20px 12px 16px; }
  html.v2 #dashboardTab > .v2-feed { grid-column: 1; grid-row: span 3; margin: 0; }
  html.v2 #dashboardTab > .financial-info { grid-column: 2; }
  html.v2 #dashboardTab > #dashChartContainer { grid-column: 2; grid-row: auto; }
}

/* ---- The new look: calm cards -- the figure carries the colour, not the whole box ------------------------------- */
html.v2 .sub-stat { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); }
html.v2 .active-debt-banner, html.v2 .total-debt-banner { background: var(--card); border: 1px solid var(--bdr); border-inline-start: 4px solid var(--d); }
html.v2 .total-debt-banner { border-inline-start-color: var(--w); }
html.v2 .active-debt-banner.is-cleared, html.v2 .total-debt-banner.is-cleared { background: var(--card); border-color: var(--bdr); border-inline-start-color: var(--s); }
html.v2 .account-card, html.v2 .network-card { border-radius: var(--rad-20) !important; }
html.v2 .network-card button.btn-main { background: var(--card) !important; color: var(--txt) !important; border: 1px solid var(--bdr) !important; border-radius: var(--rad-10) !important; padding: 6px 12px !important; font-weight: 700 !important; box-shadow: none !important; }
html.v2 .network-card button.btn-main:hover { border-color: var(--p) !important; color: var(--p) !important; }
html.v2 .net-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
html.v2 .net-kind { flex: 0 0 auto !important; width: auto !important; border-radius: var(--rad-pill) !important; padding: 8px 16px !important; box-shadow: none !important; }
html.v2 .sp-invite-btn { width: auto !important; border-radius: var(--rad-12) !important; box-shadow: none !important; }
@media (min-width: 768px) and (min-height: 501px), (min-width: 1024px) {
  html.v2 .view-toggle-bar { display: inline-flex; width: auto; max-width: 100%; }
  html.v2 .view-toggle-bar .btn-view-toggle { flex: 0 0 auto; min-width: 110px; }
}
/* The orders' filters in one row on a computer: the search with its order beside it, the stage, the view. */
@media (min-width: 1024px) {
  html.v2 #ordersTab .filter-card { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; }
  html.v2 #ordersTab .filter-card > div:first-child { display: flex; gap: 8px; align-items: center; }
  html.v2 #ordersTab .filter-card > div:first-child .search-input { flex: 1; margin: 0; }
  html.v2 #ordersTab .orders-sort-btn { margin: 0; flex: none; height: 46px; }
  html.v2 #ordersTab .filter-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  html.v2 #ordersTab .filter-grid > div:empty, html.v2 #ordersTab .filter-grid > .hide-from-lab:not(:has(select:not([style*="none"]))) { }
}
/* On a computer the header's search is a wide field, as on the sites people know; on a phone, a round button. */
.v2-search-l, .v2-search-k { display: none; }
@media (min-width: 1024px) {
  html.v2 .app-header > div:last-child { flex: 1; justify-content: flex-end; }
  html.v2 #v2Search { width: min(420px, 40vw) !important; justify-content: flex-start !important; gap: 10px; padding: 0 14px !important; margin-inline-end: auto; color: var(--txt-m) !important; background: var(--bg) !important; border: 1px solid var(--bdr) !important; border-radius: var(--rad-pill) !important; }
  html.v2 #v2Search .ico { color: var(--c-violet-58); }
  html.v2 #v2Search .v2-search-l { display: inline; flex: 1; text-align: start; font-size: .9rem; font-weight: 600; }
  html.v2 #v2Search .v2-search-k { display: inline-block; font: 600 .7rem ui-monospace, monospace; padding: 2px 6px; border: 1px solid var(--bdr); border-radius: 6px; background: var(--card); }
}
html.v2 #networkContainer .sp-invite-btn { width: auto !important; display: inline-flex !important; align-self: flex-start; justify-self: start; padding: 0 18px !important; min-height: 40px; margin: 0 0 14px !important; }
html.v2 .v2-head-a .dl-print-btn { background: var(--card) !important; color: var(--txt) !important; border: 1px solid var(--bdr) !important; }
/* Filters in one row on a computer: the search first, then its choices -- the cheques, the archive. */
@media (min-width: 1024px) {
  html.v2 #checksTab .filter-card, html.v2 #archiveTab .filter-card { max-width: none; display: flex; gap: 10px; align-items: center; padding: 12px; }
  html.v2 #checksTab .filter-card > div:first-child, html.v2 #archiveTab .filter-card > div:first-child { flex: 2; margin: 0 !important; }
  html.v2 #checksTab .filter-card .form-row, html.v2 #archiveTab .filter-card .form-row { flex: 1.4; margin: 0; }
  html.v2 .checks-stats, html.v2 #checksTab > div.no-print[style*="grid-template-columns"] { max-width: none; }
}
/* Home's money: white boxes, the figures in their colours; what is owed marked by a line at its side. */
html.v2 #dashboardTab .financial-info .form-row > div { background: var(--card) !important; border: 1px solid var(--bdr) !important; }
html.v2 #dashboardTab .financial-info .form-row > div > span { color: var(--txt-m) !important; }
html.v2 #dashDebtBox { background: var(--card) !important; border: 1px solid var(--bdr) !important; border-inline-start: 4px solid var(--d) !important; }
html.v2 #dashDebtLabel { color: var(--txt-m) !important; }
/* ---- The new look on a phone: compact cards and filters --------------------------------------------------------- */
.v2-due { display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: flex-start; font-size: .74rem; font-weight: 800; padding: 4px 10px; border-radius: var(--rad-pill); color: var(--txt-m); background: var(--bg); border: 1px solid var(--bdr); white-space: nowrap; }
.v2-due.is-soon { color: var(--w); background: color-mix(in srgb, var(--w) 10%, var(--card)); border-color: color-mix(in srgb, var(--w) 30%, transparent); }
.v2-due.is-late { color: var(--d); background: color-mix(in srgb, var(--d) 9%, var(--card)); border-color: color-mix(in srgb, var(--d) 30%, transparent); }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  /* The + at the thumb makes a new case: the head keeps the other buttons. */
  html.v2 .v2-head-a button[onclick^="openOrderModal"] { display: none !important; }
  /* Accounts: the figures two by two, not one under another. */
  html.v2 .account-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-direction: initial; }
  html.v2 .account-card .sub-stat, html.v2 .account-card .active-debt-banner, html.v2 .account-card .total-debt-banner { padding: 10px; }
  html.v2 .account-card .sub-stat-val { font-size: 1.2rem; }
  /* Orders' filters: the search with its order beside it; the stage and the view in one row. */
  html.v2 #ordersTab .filter-card { padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
  html.v2 #ordersTab .filter-card > div:first-child { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin: 0 !important; }
  html.v2 #ordersTab .filter-card > div:first-child .search-input { flex: 1; margin: 0; }
  html.v2 #ordersTab .orders-sort-btn { margin: 0; flex: none; height: 46px; padding: 0 10px; }
  html.v2 #ordersTab .filter-grid { grid-template-columns: 1fr; gap: 8px; }
  html.v2 #ordersTab .filter-card .view-toggle-bar { margin: 0; }
  html.v2 #ordersTab .filter-card .view-toggle-bar .btn-view-toggle { padding: 9px 12px; min-width: 0; }
}

/* ---- The wall on a phone: one list at a time -- the cases, what is ready, the courier's -- chosen by
   three tabs above it, each the whole width; no longer a third of the screen beside the cases. ---- */
.wall-panes { display: none; }
@media (max-width: 599px) {
  #labWall .wall-panes { display: flex; gap: 6px; padding: 2px 0 10px; }
  #labWall .wall-pane { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: var(--rad-pill); border: 1px solid var(--w-line); background: var(--w-card); color: var(--w-sub); font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
  #labWall .wall-pane b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--rad-pill); display: inline-grid; place-items: center; font-size: .75rem; background: var(--w-tool); color: var(--w-txt); }
  #labWall .wall-pane.on { background: var(--w-txt); color: var(--w-bg); border-color: var(--w-txt); }
  #labWall .wall-pane.on b { background: var(--w-bg); color: var(--w-txt); }
  #labWall .wall-layout, #labWall[dir="ltr"] .wall-layout { display: block; height: auto; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; direction: inherit; }
  #labWall .wall-layout > * { direction: inherit; }
  #labWall .wall-layout[data-pane="cases"] .wall-side { display: none !important; }
  #labWall .wall-layout:not([data-pane="cases"]) .wall-cases { display: none !important; }
  #labWall .wall-layout[data-pane="ready"] .wall-courier, #labWall .wall-layout[data-pane="courier"] .wall-ready { display: none !important; }
  #labWall .wall-cases { height: auto; overflow: visible; padding-bottom: 96px; }
  #labWall .wall-side, #labWall[dir="ltr"] .wall-side { display: block; height: auto; overflow: visible; padding-bottom: 96px; }
  #labWall .wall-side .wall-courier, #labWall .wall-side .wall-ready { max-height: none; overflow: visible; padding: 12px; border-radius: var(--rad-16); }
  #labWall .wall-courier-head, #labWall .wall-ready-head { font-size: 1rem; margin-bottom: 10px; }
  #labWall .wall-courier-part { font-size: .82rem; margin: 10px 0 6px; }
  #labWall .wall-courier-row, #labWall .wall-ready-row { flex-direction: row; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; }
  #labWall .wall-ready-who b { font-size: 1rem; } #labWall .wall-ready-who span { font-size: .8rem; }
  #labWall .wall-grid { grid-template-columns: 1fr !important; gap: 10px; }
  #labWall.wall-size-s .wall-grid, #labWall.wall-size-m .wall-grid { grid-template-columns: 1fr 1fr !important; }
  #labWall .wall-card { padding: 14px; border-radius: var(--rad-18); }
  #labWall .wall-due { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ---- The wall's head on a large screen: the name and the clock, the search, the tools -- and under them the
   counts as a row of small tags, never broken over two lines. ---- */
@media (min-width: 900px) {
  #labWall .wall-head { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; grid-template-areas: "title find tools" "counts counts counts"; align-items: center; gap: 10px 18px; padding: 12px 22px; }
  #labWall .wall-head > div:first-child { display: contents; }
  #labWall .wall-title { grid-area: title; white-space: nowrap; }
  #labWall .wall-head .wall-find { grid-area: find; max-width: 640px; width: 100%; justify-self: center; margin: 0; order: 0; flex-basis: auto; }
  #labWall .wall-head .wall-head-end { grid-area: tools; flex-wrap: nowrap; }
  #labWall .wall-counts { grid-area: counts; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: .92rem; }
  #labWall .wall-counts > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--rad-pill); background: var(--w-card); border: 1px solid var(--w-line); white-space: nowrap; }
}
@media (max-width: 599px) { #labWall .wall-counts { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 4px; } #labWall .wall-counts > span { white-space: nowrap; } }
/* The new look on a phone: two dates, two choices side by side; the wall's and the clinic board's floating
   button is a row under "more" (v2.js), so only the assistant floats above the bar. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.v2 #archiveTab .filter-card .form-row, html.v2 #checksTab .filter-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.v2 #archiveTab .filter-card > div, html.v2 #checksTab .filter-card > div { margin-bottom: 8px !important; }
  html.v2 #archiveTab .filter-card input[type="date"] { min-width: 0; padding-inline: 8px; }
}
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 #archiveTab .filter-card .form-row, html.v2 #checksTab .filter-card .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } html.v2 #archiveTab .filter-card .form-row > div { min-width: 0; } html.v2 #archiveTab .filter-card input[type="date"] { width: 100%; max-width: 100%; box-sizing: border-box; font-size: .85rem; } }
html.v2 .view-toggle-bar.v2-one { display: none !important; }
/* A case card on a phone: its stage, its notes and its due date in one line under the name, not a column beside nothing. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 #ordersContainer .case-card .card-header > div:last-child { flex: 1 1 100% !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-start; gap: 6px !important; } }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 #ordersTab .filter-card { grid-template-columns: 1fr; } html.v2 #ordersTab .filter-grid { display: flex; gap: 8px; } html.v2 #ordersTab .filter-grid > div { flex: 1 1 0; min-width: 0; } html.v2 #ordersTab .filter-grid select { min-width: 0; } html.v2 #ordersTab .filter-card .view-toggle-bar { display: flex; width: 100%; } html.v2 #ordersTab .filter-card .view-toggle-bar .btn-view-toggle { flex: 1; } }

/* ---- The financial management, arranged as accounting programs are: five groups across the top, the period and
   the two buttons under them, and an overview that answers a manager's questions in order (finance-core.js). ---- */
#finBody { display: flex; flex-direction: column; }
#finBody > .fin-groups { order: -1; }
.fin-groups { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-16); overflow-x: auto; scrollbar-width: none; }
.fin-groups::-webkit-scrollbar { display: none; }
.fin-groups button { flex: 1 0 auto; border: none; background: none; padding: 11px 16px; border-radius: var(--rad-12); font: inherit; font-size: .92rem; font-weight: 800; color: var(--txt-m); cursor: pointer; white-space: nowrap; }
.fin-groups button.on { background: var(--p); color: var(--c-white); box-shadow: 0 6px 16px -8px var(--p); }
.fin-sub { margin-top: -2px; }
.fin-hero { background: var(--card); border: 1px solid var(--bdr); border-top: 4px solid var(--s); border-radius: var(--rad-22); padding: 18px; margin-bottom: 14px; }
.fin-hero.is-neg { border-top-color: var(--d); }
.fin-hero-q { font-size: 1rem; color: var(--txt-m); font-weight: 700; margin-bottom: 12px; }
.fin-hero-q b { color: var(--txt); }
.fin-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.fin-eq-op { align-self: center; font-size: 1.7rem; font-weight: 300; color: var(--txt-m); }
.fin-eq-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border: 1px solid var(--bdr); border-radius: var(--rad-16); background: var(--bg); font: inherit; color: var(--txt); text-align: start; cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.fin-eq-t:hover { border-color: var(--p); box-shadow: var(--shadow-sm); }
.fin-eq-t small { font-size: .8rem; font-weight: 700; color: var(--txt-m); }
.fin-eq-t b { font-size: 1.45rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.fin-eq-t.in b { color: var(--s); } .fin-eq-t.out b { color: var(--w); }
.fin-eq-t.net { background: color-mix(in srgb, var(--s) 9%, var(--card)); border-color: color-mix(in srgb, var(--s) 30%, var(--bdr)); }
.fin-hero.is-neg .fin-eq-t.net { background: color-mix(in srgb, var(--d) 8%, var(--card)); border-color: color-mix(in srgb, var(--d) 30%, var(--bdr)); }
.fin-hero.is-neg .fin-eq-t.net b { color: var(--d); } .fin-hero.is-pos .fin-eq-t.net b { color: var(--s); }
.fin-hows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; }
.fin-how { font-size: .82rem; }
.fin-how summary { cursor: pointer; color: var(--p); font-weight: 800; list-style: none; padding: 4px 0; }
.fin-how summary::-webkit-details-marker { display: none; }
.fin-how summary::before { content: 'ⓘ '; }
.fin-how ul { list-style: none; margin: 6px 0; padding: 8px 10px; background: var(--bg); border-radius: var(--rad-12); }
.fin-how li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--bdr); }
.fin-how li:last-child { border-bottom: none; }
.fin-how li b { font-weight: 700; white-space: nowrap; }
.fin-how li b.tot { font-weight: 900; }
.fin-how li b.neg { color: var(--d); }
.fin-how p { margin: 6px 0 0; color: var(--txt-m); line-height: 1.7; }
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.fin-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--card); border: 1px solid var(--bdr); border-inline-start: 4px solid var(--p); border-radius: var(--rad-18); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.fin-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fin-tile.in { border-inline-start-color: var(--s); } .fin-tile.out { border-inline-start-color: var(--w); }
.fin-tile small { font-size: .82rem; font-weight: 700; color: var(--txt-m); }
.fin-tile > b { font-size: 1.5rem; font-weight: 800; }
.fin-tile-sub { font-size: .78rem; color: var(--txt-m); }
.fin-tile-sub .neg, .fin-tile-sub i.neg { color: var(--d); font-style: normal; font-weight: 700; }
.fin-tile-go { position: absolute; top: 16px; inset-inline-end: 16px; font-size: .78rem; font-weight: 800; color: var(--p); }
.fin-todo2 { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--bdr); border-radius: var(--rad-14); background: var(--card); font: inherit; color: var(--txt); text-align: start; cursor: pointer; }
.fin-todo2:hover { border-color: var(--p); }
.fin-todo2.bad { border-inline-start: 4px solid var(--d); }
.fin-todo2 b { flex: 1; font-size: .88rem; font-weight: 700; }
.fin-todo2 i { font-style: normal; color: var(--txt-m); font-size: 1.2rem; }
.fin-allgood { padding: 18px; text-align: center; color: var(--s); font-weight: 800; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  .fin-eq { grid-template-columns: 1fr; gap: 6px; }
  .fin-eq-op { justify-self: center; font-size: 1.2rem; line-height: 1; }
  .fin-eq-t { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; }
  .fin-eq-t b { font-size: 1.2rem; }
  .fin-hows { grid-template-columns: 1fr; }
  .fin-groups button { padding: 10px 12px; font-size: .86rem; }
}
.fin-hero-hint { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--txt-m); }
/* On a phone the five groups wrap into rows -- nothing to slide sideways. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  .fin-groups { flex-wrap: wrap; overflow: visible; }
  .fin-groups button { flex: 1 1 30%; }
  #finBody .lf-views { flex-wrap: wrap; overflow: visible; }
}

/* ---- An account: who, what is owed now in large type, three figures that each open their cases, the statement ---- */
.account-card.acc2 { cursor: pointer; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.acc2-top { display: flex; align-items: center; gap: 12px; }
.acc2-who { flex: 1; min-width: 0; }
.acc2-who .acc-name { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--txt); overflow-wrap: anywhere; }
.acc2-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.acc2-tags:empty { display: none; }
.acc2-who small { display: block; margin-top: 4px; font-size: .78rem; color: var(--txt-m); font-weight: 600; }
.acc2-who small b.pos { color: var(--s); font-weight: 800; }
.acc2-debt { text-align: end; flex: none; }
.acc2-debt small { display: block; font-size: .72rem; font-weight: 700; color: var(--txt-m); }
.acc2-debt b { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.15; direction: ltr; }
.acc2-debt.owe b { color: var(--d); } .acc2-debt.clear b { color: var(--s); }
.acc2-go { flex: none; font-size: 1.5rem; color: var(--txt-m); line-height: 1; }
.acc2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acc2-stats button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border: 1px solid var(--bdr); border-radius: var(--rad-12); background: var(--bg); font: inherit; color: var(--txt); text-align: start; cursor: pointer; min-width: 0; }
.acc2-stats button:hover { border-color: var(--p); background: var(--pl); }
.acc2-stats span { font-size: .72rem; font-weight: 700; color: var(--txt-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.acc2-stats b { font-size: 1.05rem; font-weight: 800; direction: ltr; }
.acc2-stats b.warn { color: var(--w); }
.acc2-extra:empty { display: none; }
.acc2-extra > * { margin: 0 0 6px !important; }
.acc2-st { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 14px; border: none; border-radius: var(--rad-12); background: var(--pl); color: var(--ph); font: inherit; font-weight: 800; cursor: pointer; }
.acc2-st span { color: var(--p); font-weight: 700; }
#accountsReportContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
#accountsReportContainer > .account-card { margin: 0; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { #accountsReportContainer { grid-template-columns: 1fr; gap: 10px; } .acc2-debt b { font-size: 1.35rem; } }
#accountsReportContainer > :not(.account-card) { grid-column: 1 / -1; }

/* ---- The wall as a board: a column for each step of the work, each scrolling on its own; the cases in it
   by priority, then by how soon each is due. One look tells where every case is; one press moves it on. ---- */
#labWall.wall-size-k .wall-cases { overflow: hidden !important; padding-bottom: 0 !important; }
#labWall .wall-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; height: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
#labWall .wall-col { display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--w-card) 55%, transparent); border: 1px solid var(--w-line); border-radius: var(--rad-18); overflow: hidden; }
#labWall .wall-col-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 1.05rem; font-weight: 900; color: var(--w-txt); border-bottom: 1px solid var(--w-line); background: var(--w-card); }
#labWall .wall-col-h span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#labWall .wall-col-h b { min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--rad-pill); display: inline-grid; place-items: center; background: var(--w-tool); font-size: .9rem; }
#labWall .wall-col-h i.late { font-style: normal; font-size: .82rem; font-weight: 800; color: var(--c-red-71); }
#labWall .wall-col-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 90px; display: flex; flex-direction: column; gap: 10px; }
#labWall .wall-col-empty { text-align: center; color: var(--w-sub); padding: 24px 0; opacity: .6; }
#labWall .wall-board .wall-card { padding: 12px; gap: 6px; border-radius: var(--rad-16); }
#labWall .wall-board .wall-name { font-size: 1.3rem; line-height: 1.25; }
#labWall .wall-board .wall-details { font-size: .92rem; }
#labWall .wall-board .wall-doctor { font-size: .85rem; }
#labWall .wall-board .wall-step { font-size: .85rem; }
#labWall .wall-board .wall-step .wall-more, #labWall .wall-board .wall-star-txt { display: none; }
#labWall .wall-board .wall-go { padding: 11px 12px; font-size: 1.05rem; border-radius: var(--rad-12); margin-top: 2px; }
#labWall .wall-board .wall-due { font-size: .82rem; }
#labWall .wall-board { grid-auto-columns: minmax(270px, 340px); justify-content: start; }
#labWall .wall-board .wall-go { min-height: 0 !important; height: auto !important; }
#labWall .wall-board.by-due .wall-col--late .wall-col-h { color: var(--c-red-71); box-shadow: inset 0 -3px 0 var(--c-red-60); }
#labWall .wall-board.by-due .wall-col--today .wall-col-h { color: var(--c-amber-56); box-shadow: inset 0 -3px 0 var(--c-orange-50); }
#labWall .wall-board.by-due .wall-col--tomorrow .wall-col-h { box-shadow: inset 0 -3px 0 var(--c-sky-60); }
#labWall .wall-board { grid-auto-flow: row; grid-auto-columns: auto; }
@media (min-width: 600px) { #labWall.wall-size-k .wall-layout, #labWall.wall-size-k[dir="ltr"] .wall-layout { grid-template-columns: 260px minmax(0, 1fr); } }
#labWall .wall-board { gap: 10px; }
#labWall .wall-board .wall-card-top { flex-wrap: wrap; gap: 4px; }
#labWall .wall-board .wall-due { white-space: normal; overflow: visible; }
#labWall .wall-board .wall-name { font-size: 1.2rem; }
#labWall .wall-col-h { font-size: .95rem; align-items: flex-start; } #labWall .wall-col-h span { white-space: normal; overflow: visible; line-height: 1.3; }
/* The wall's cards on a phone, as on the board: the name, the work, the date, and a button that does not fill the card. */
@media (max-width: 599px) {
  #labWall .wall-card { padding: 12px; gap: 5px; }
  #labWall .wall-name { font-size: 1.2rem !important; line-height: 1.25; }
  #labWall .wall-details { font-size: .9rem !important; }
  #labWall .wall-doctor, #labWall .wall-step { font-size: .82rem !important; }
  #labWall .wall-step .wall-more, #labWall .wall-star-txt { display: none; }
  #labWall .wall-go { padding: 10px 12px !important; font-size: 1rem !important; min-height: 0 !important; height: auto !important; border-radius: var(--rad-12); }
  #labWall .wall-card-top { flex-wrap: wrap; gap: 4px; }
  #labWall .wall-group { margin-bottom: 8px; }
}

/* ---- An account statement on a phone: what is owed first and large, the other sums small in one row, the
   sending buttons in one row, and the table small enough that its last column -- the balance -- shows. ---- */
@media (max-width: 600px) {
  .st-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .st-card { padding: 7px 8px; border-radius: var(--rad-12); }
  .st-card span { font-size: .64rem; line-height: 1.3; }
  .st-card b { font-size: .92rem; }
  .st-card.is-owed, .st-card.is-clear { order: -1; grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px; }
  .st-card.is-owed span, .st-card.is-clear span { font-size: .85rem; }
  .st-card.is-owed b, .st-card.is-clear b { font-size: 1.5rem; }
  .st-actions { width: 100%; margin: 0; flex-wrap: nowrap; }
  .st-actions .st-btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  .st-date { flex: 1 1 40%; min-width: 0; }
  .st-date input { width: 100%; min-width: 0; }
  .st-table { font-size: .72rem; }
  .st-table th { padding: 6px 4px; font-size: .64rem; }
  .st-table td { padding: 6px 4px; }
  .st-table td.st-day { font-size: .64rem; white-space: normal; min-width: 52px; }
  .st-table td.st-name strong { font-size: .76rem; }
  .st-table .st-teeth { font-size: .6rem; }
}

/* ---- A warehouse's accounts in the new look: the book's three figures in one row, its two buttons in the page's
   head, and each customer a white card with a line at its side for what is owed. ---- */
html.v2 .v2-head-a .acc-top { display: contents; }
html.v2 #warehouseAccountsTab > .card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px !important; }
html.v2 #warehouseAccountsTab > .card > div { flex-direction: column; justify-content: flex-start !important; gap: 2px; padding: 6px 8px !important; border: none !important; background: var(--bg); border-radius: var(--rad-12); }
html.v2 #warehouseAccountsTab > .card > div span { font-size: .72rem !important; }
html.v2 #warehouseAccountsTab > .card > div strong { font-size: 1.05rem; }
html.v2 #whAccountsList .group-item { background: var(--card) !important; border: 1px solid var(--bdr); border-radius: var(--rad-16); }
html.v2 #whAccountsList .group-item.is-debt-bad { border-inline-start: 4px solid var(--d); }
html.v2 #whAccountsList .group-item.is-debt-warn { border-inline-start: 4px solid var(--w); }
html.v2 #whAccountsList .acc-actions { display: flex; gap: 8px; }
html.v2 #whAccountsList .acc-actions button { flex: 1; width: auto !important; margin: 0 !important; padding: 8px 10px !important; font-size: .82rem !important; border-radius: var(--rad-10) !important; box-shadow: none !important; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 .v2-head-a button { flex: 1 1 40% !important; min-width: 0; font-size: .82rem !important; padding: 0 10px !important; } }
/* The financial management's head on a phone: the period and the month in one row, the two buttons in one row. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  #finBody .lf-head { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-bottom: 10px; }
  #finBody .fin-period { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; justify-content: space-between; }
  #finBody .fin-modes { flex: none; margin: 0; }
  #finBody .fin-modes button { padding: 6px 8px; font-size: .74rem; }
  #finBody .lf-month { flex: 1; min-width: 0; margin: 0; }
  #finBody .lf-month b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #finBody .lf-actions { display: flex; gap: 8px; }
  #finBody .lf-actions .lf-add { flex: 1; justify-content: center; }
}
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { #finBody .lf-month b { min-width: 0 !important; flex: 1; } #finBody .lf-month { padding: 3px; } #finBody .lf-month .lf-nav { flex: none; } #finBody .lf-actions .lf-add { width: auto !important; min-width: 0; } }
#finBody > * { min-width: 0; max-width: 100%; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { #finBody .fin-period { min-width: 0; width: 100%; } #finBody .fin-modes { min-width: 0; } #finBody .fin-modes button { padding: 6px 6px; } #finBody .lf-actions { width: 100%; } }

/* =====================================================================================================
   A person's page (profile-look.js): light, the photograph first and round, the name under it, the
   figures and the buttons in rows, then two tabs -- the work and about the person. The dark cover with
   the name over it, the QR the size of the photograph, and the half-empty cards are gone.
   ===================================================================================================== */
#viewProfileModal .modal-content.vp-content { background: var(--bg); overflow-x: hidden; }
.vp-close { background: var(--card) !important; color: var(--txt) !important; border: 1px solid var(--bdr) !important; box-shadow: var(--shadow-sm); }
/* The cover: a short band of colour or the person's photograph; nothing is written over it. */
.vp-cover { height: 150px; }
.vp-cover::before { background: linear-gradient(to top, color-mix(in srgb, var(--c-blue-8) 25%, transparent), transparent 60%); }
.vp-cover::after { display: none; }
.vp-cover-edit { top: auto !important; bottom: 12px !important; inset-inline-end: 12px !important; inset-inline-start: auto !important; }
/* The head: one centred column on a white card. */
.ig-head { background: var(--card); border-bottom: 1px solid var(--bdr); }
.vp-top { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: -58px; padding: 0 20px 18px; background: none; color: var(--txt); border: 0; }
.vp-avatar-wrap { display: inline-block; align-items: initial; gap: 0; }
.vp-avatar { width: 116px; height: 116px; border-radius: 50%; border: 4px solid var(--card); margin: 0; box-shadow: 0 8px 24px color-mix(in srgb, var(--c-blue-11) 18%, transparent); }
.vp-qr-badge, .wp-logo-wrap .vp-qr-badge { position: absolute; bottom: 2px; inset-inline-end: 2px; width: 36px; height: 36px; padding: 3px; border-radius: 50%; border: 2px solid var(--card); background: var(--card); box-shadow: var(--shadow-sm); }
.vp-qr-badge img { border-radius: 50%; }
.vp-id { width: 100%; max-width: 560px; text-align: center; padding-top: 10px; }
.vp-id h3 { color: var(--txt); font-size: 1.45rem; font-weight: 800; letter-spacing: -.3px; text-shadow: none; line-height: 1.3; }
.vp-headline { margin: 4px auto 0; color: var(--txt-m); font-size: .92rem; font-weight: 600; max-width: 40ch; line-height: 1.6; }
.vp-sub { justify-content: center; margin-top: 8px; gap: 6px 10px; }
.vp-role { background: var(--pl); color: var(--p); border: none; padding: 4px 12px; font-size: .8rem; }
.vp-loc { color: var(--txt-m); font-size: .84rem; }
/* The figures: three in a row, as the numbers over a profile are. */
.vp-stats { display: flex; justify-content: center; gap: 0; margin-top: 14px; width: 100%; }
.vp-stats span { flex: 1 1 0; max-width: 150px; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border: none; border-radius: 0; background: none; color: var(--txt-m); font-size: .74rem; font-weight: 700; line-height: 1.3; text-align: center; }
.vp-stats span + span { border-inline-start: 1px solid var(--bdr); }
.vp-stats b { color: var(--txt); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
/* The buttons: one row, the first filled, the others plain. */
.vp-actions { display: flex; width: 100%; max-width: 560px; gap: 8px; padding: 14px 0 0; align-self: center; flex-wrap: nowrap; }
.vp-actions .vp-btn { flex: 1 1 0; min-width: 0; padding: 10px 8px; border-radius: var(--rad-12); font-size: .88rem; background: var(--bg); border: 1px solid var(--bdr); color: var(--txt); box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-actions .vp-btn--primary { background: var(--p); border-color: var(--p); color: var(--c-white); box-shadow: none; }
.vp-actions .vp-btn--offer { background: var(--wl); border-color: color-mix(in srgb, var(--w) 40%, transparent); color: var(--c-orange-31); }
.vp-actions .vp-btn--wa { background: var(--c-green-36) !important; border-color: var(--c-green-36) !important; color: var(--c-white) !important; }
/* The tabs: two, with a line under the one that is open. */
.ig-tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--bdr); position: sticky; top: 0; z-index: 4; }
.ig-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .9rem; font-weight: 700; color: var(--txt-m); cursor: pointer; margin-bottom: -1px; }
.ig-tabs button svg { width: 20px; height: 20px; }
.ig-tabs button.on { color: var(--txt); border-bottom-color: var(--txt); }
.ig-pane { display: none; max-width: 1120px; margin: 0 auto; padding: 16px; }
.ig-pane.on { display: block; }
/* The work: a tight, even grid of squares, as a profile's photographs are. */
.ig-pane--photos { padding: 3px; }
.vp-gallery { padding: 0; }
.vp-gallery .vp-kicker, .vp-gallery-head { display: none; }
.sg-mosaic, .sg-mosaic--1, .sg-mosaic--2 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 3px; }
.sg-mosaic .sg-tile { aspect-ratio: 1; border-radius: 0; box-shadow: none; }
.sg-tile.sg-big { grid-column: span 2; grid-row: span 2; }
.sg-tile.sg-wide { grid-column: span 1; }
@media (min-width: 900px) { .sg-mosaic, .sg-mosaic--1, .sg-mosaic--2 { grid-template-columns: repeat(4, 1fr); gap: 4px; } }
.ig-pane--photos #vpVideoBox { padding: 12px; }
.vp-empty { padding: 56px 20px; }
/* About: one column of plain cards, each with a small heading; no decoration, no half-empty tiles. */
.ig-pane--about { display: none; flex-direction: column; gap: 12px; }
.ig-pane--about.on { display: flex; }
.vp-about, .vp-card, .vp-page .vp-card { border-radius: var(--rad-16); padding: 16px 18px; animation: none; box-shadow: none; }
.vp-kicker { display: none; }
.vp-about h4, .vp-services h4, .vp-page-card h4 { margin: 0 0 12px; font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.vp-bio p { margin: 0 0 14px; padding-bottom: 14px; font-size: .95rem; line-height: 1.9; color: var(--txt); }
.vp-facts { gap: 8px; }
.vp-facts li { font-size: .9rem; font-weight: 600; }
.vp-facts li > span:first-child { width: 34px; height: 34px; border-radius: var(--rad-10); font-size: .95rem; }
.vp-main { gap: 12px; }
.vp-page { gap: 12px; }
.vp-page .wp-points { grid-template-columns: 1fr; gap: 8px; }
.vp-page .wp-point { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--rad-12); background: var(--bg); border: none; overflow: visible; transform: none !important; box-shadow: none !important; }
.vp-page .wp-point::after { display: none; }
.vp-page .wp-point i { width: 36px; height: 36px; border-radius: var(--rad-10); font-size: 1.1rem; margin: 0; flex: none; background: var(--card); box-shadow: none; }
.vp-page .wp-point span { font-size: .9rem; font-weight: 700; line-height: 1.5; }
.vp-page .wp-contact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vp-page .wp-contact > div { padding: 10px 12px; border-radius: var(--rad-12); border: none; background: var(--bg); column-gap: 10px; }
.vp-page .wp-contact i { width: 34px; height: 34px; border-radius: var(--rad-10); font-size: 1rem; }
.vp-page .wp-contact small { font-size: .72rem; }
.vp-page .wp-contact strong { font-size: .9rem; }
.vp-chips span, .vp-page .wp-chips span { padding: 6px 12px; font-size: .82rem; }
.vp-page-empty { padding: 20px; font-size: .9rem; }
.vp-bio-empty { font-size: .85rem; }
/* The closing band: a plain card with the ways to reach the person. */
.vp-foot { width: auto; max-width: none; margin: 0 0 calc(24px + var(--sab, 0px)); padding: 18px; border-radius: var(--rad-16); background: var(--card); border: 1px solid var(--bdr); box-shadow: none; }
.vp-foot h3 { color: var(--txt); font-size: 1rem; margin-bottom: 12px; }
.vp-foot .vp-btn { background: var(--bg); border: 1px solid var(--bdr); color: var(--txt); padding: 10px 16px; border-radius: var(--rad-12); font-size: .9rem; }
.vp-foot .vp-btn--primary { background: var(--p); border-color: var(--p); color: var(--c-white); }
.vp-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (max-width: 760px) {
  .vp-cover { height: 120px; }
  .vp-top { margin-top: -50px; padding: 0 14px 14px; }
  .vp-avatar { width: 100px; height: 100px; }
  .vp-id h3 { font-size: 1.3rem; }
  .vp-stats span { padding: 6px 4px; font-size: .7rem; }
  .vp-stats b { font-size: 1.15rem; }
  .vp-actions .vp-btn { padding: 10px 6px; font-size: .82rem; }
  .ig-pane { padding: 12px; }
  .ig-pane--photos { padding: 2px; }
  .sg-mosaic, .sg-mosaic--1, .sg-mosaic--2 { gap: 2px; }
}
/* The barcode camera stays in the header on a phone: it is reached for many times a day. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 #btnScanner { display: inline-flex !important; } }
/* The profile's grid: equal squares, nothing enlarged; the page never wider than the screen. */
.sg-mosaic .sg-tile.sg-big, .sg-mosaic .sg-tile.sg-wide { grid-column: span 1; grid-row: span 1; }
#viewProfileModal .vp-content > * { max-width: 100%; min-width: 0; }
#viewProfileModal .vp-content { overflow-x: hidden !important; }
.vp-cover-art { display: none; }
.ig-pane--photos { max-width: 935px; }
.ig-pane--about { max-width: 720px; }
@media (min-width: 900px) {
  .sg-mosaic, .sg-mosaic--1, .sg-mosaic--2 { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .vp-top { padding-bottom: 22px; }
  .vp-avatar { width: 150px; height: 150px; }
  .vp-top { margin-top: -75px; }
  .vp-cover { height: 220px; }
  .vp-id h3 { font-size: 1.7rem; }
}

/* =====================================================================================================
   The assistant, made over (ai-assistant.js): a line-icon button in the header beside the messages, and
   a small floating one on a computer only; a sheet from below on a phone, a side panel on a computer;
   no fine print; the input first, three quick actions, and every answer a card with its rows inside.
   ===================================================================================================== */
.ai-hdr-btn { display: inline-flex; align-items: center; justify-content: center; }
.ai-hdr-btn svg { width: 20px; height: 20px; }
/* The floating button: a computer only; on a phone the header has it. */
.ai-assistant { inset-block-end: 24px; inset-inline-end: auto; inset-inline-start: 24px; }
.ai-launcher { width: 48px; height: 48px; border-radius: var(--rad-16); border: 1px solid var(--bdr); background: var(--card); color: var(--c-violet-58); font-size: 0; box-shadow: var(--shadow-md); }
.ai-launcher svg { width: 24px; height: 24px; }
.ai-launcher:hover { transform: translateY(-1px); border-color: var(--c-violet-58); }
.ai-launcher.is-open { background: var(--c-violet-58); color: var(--c-white); border-color: var(--c-violet-58); }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { .ai-launcher { display: none !important; } }
html.v2 .ai-assistant { left: auto !important; right: auto !important; inset-inline-start: 24px !important; inset-inline-end: auto !important; inset-block-end: 24px !important; }
/* The panel. */
.ai-panel { position: fixed; inset-block-end: 0; inset-inline: 0; width: auto; max-height: min(78dvh, 640px); border-radius: var(--rad-22) var(--rad-22) 0 0; padding: 8px 14px calc(14px + var(--sab, 0px)); background: var(--bg); border: 1px solid var(--bdr); box-shadow: 0 -12px 40px color-mix(in srgb, var(--c-blue-11) 18%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ai-grab { display: block; width: 40px; height: 5px; border-radius: var(--rad-9); background: var(--bdr); margin: 2px auto 10px; flex: none; }
.ai-head { margin-bottom: 10px; }
.ai-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; color: var(--txt); }
.ai-head strong svg { width: 20px; height: 20px; color: var(--c-violet-58); }
.ai-hbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bdr); background: var(--card); color: var(--txt-m); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.ai-hbtn svg { width: 18px; height: 18px; }
.ai-head .ai-clear, .ai-head .btn-icon-close { display: none; }
.ai-row { gap: 6px; align-items: center; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-pill); padding: 4px; }
.ai-row:focus-within { border-color: var(--c-violet-58); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-violet-58) 15%, transparent); }
.ai-input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: .95rem; padding: 8px 6px; color: var(--txt); outline: none; }
.ai-mic, .ai-send { width: 38px; height: 38px; flex: none; border-radius: 50%; border: none; display: inline-grid; place-items: center; cursor: pointer; padding: 0; font-size: 0; }
.ai-mic { background: var(--bg); color: var(--txt-m); }
.ai-mic.is-listening { background: var(--dl); color: var(--d); animation: ai-pulse 1.2s ease-in-out infinite; }
@keyframes ai-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--d) 18%, transparent); } }
.ai-send { background: var(--c-violet-58); color: var(--c-white); }
.ai-mic svg, .ai-send svg { width: 18px; height: 18px; }
.ai-send-lbl { display: none; }
.ai-row.has-text .ai-send { width: auto; padding: 0 14px 0 12px; gap: 6px; display: inline-flex; align-items: center; border-radius: var(--rad-pill); }
.ai-row.has-text .ai-send-lbl { display: inline; font-size: .9rem; font-weight: 600; }
.ai-state { margin: 4px 6px 0; font-size: .72rem; }
.ai-state:empty { display: none; }
.ai-suggest { margin-top: 10px; gap: 6px; }
.ai-suggest:empty { display: none; }
.ai-suggest > span { display: none; }
.ai-suggest button { padding: 8px 14px; font-size: .8rem; font-weight: 700; border-radius: var(--rad-pill); background: var(--card); border: 1px solid var(--bdr); color: var(--txt); }
.ai-suggest button:hover { border-color: var(--c-violet-58); color: var(--c-violet-58); }
/* The conversation: what was said as a small bubble on one side, the answer as a card on the other. */
.ai-log { gap: 12px; margin: 12px 0 0; padding-bottom: 4px; }
.ai-turn { border: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-said { align-self: flex-start; max-width: 85%; padding: 8px 14px; border-radius: var(--rad-16) var(--rad-16) var(--rad-16) 4px; background: var(--c-violet-58); color: var(--c-white); font-size: .88rem; font-weight: 600; line-height: 1.5; }
.ai-reply { align-self: stretch; padding: 12px 14px; border-radius: var(--rad-16); background: var(--card); border: 1px solid var(--bdr); font-size: .92rem; line-height: 1.75; color: var(--txt); }
.ai-reply .ai-items { margin-top: 10px; gap: 6px; }
.ai-items { margin: 0; }
.ai-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--rad-12); border: 1px solid var(--bdr); background: var(--bg); font: inherit; color: var(--txt); text-align: start; cursor: pointer; }
.ai-item::after { content: '›'; margin-inline-start: auto; color: var(--txt-m); font-size: 1.2rem; }
.ai-item:hover { border-color: var(--c-violet-58); }
.ai-item-title { font-size: .88rem; font-weight: 700; flex: 1 1 auto; }
.ai-item-sub { font-size: .74rem; color: var(--txt-m); margin: 0; }
.ai-note[hidden] { display: none !important; }
@media (min-width: 768px) and (min-height: 501px), (min-width: 1024px) {
  .ai-panel { inset-block-end: 90px; inset-inline-start: 24px; inset-inline-end: auto; width: 400px; border-radius: var(--rad-22); padding: 10px 14px 14px; max-height: min(72vh, 640px); box-shadow: var(--shadow-md), 0 24px 60px -20px color-mix(in srgb, var(--c-blue-11) 35%, transparent); }
  html.v2 .ai-panel { inset-inline-start: 24px; inset-inline-end: auto; }
  .ai-grab { display: none; }
  .ai-assistant:has(.ai-panel.is-open)::before { display: none; }
}
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  .ai-assistant:has(.ai-panel.is-open)::before { content: ''; position: fixed; inset: 0; background: color-mix(in srgb, var(--c-blue-11) 45%, transparent); z-index: -1; }
  .ai-panel.is-open { z-index: 2001; }
}

@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { .ai-panel { inset-inline: 0 !important; inset-block-end: 0 !important; max-height: min(78dvh, 640px) !important; } }

/* "More": settings and signing out as two buttons under the name, before the tiles. */
.v2-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.v2-qbtn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--rad-14); border: 1px solid var(--bdr); background: var(--card); font: inherit; font-weight: 800; font-size: .9rem; color: var(--txt); cursor: pointer; }
.v2-qbtn .v2-ico { width: 20px; height: 20px; }
.v2-qbtn.is-bad { color: var(--d); }
.v2-rows:not(:has(button)) { display: none; }
/* The settings' list of sections: two columns of short tiles that fit on one screen, signing out the last. */
#settingsModal .set-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#settingsModal .set-menu-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: var(--rad-14); min-width: 0; }
#settingsModal .set-menu-row .set-menu-txt { min-width: 0; width: 100%; }
#settingsModal .set-menu-row .set-menu-txt b { display: block; font-size: .88rem; line-height: 1.3; }
#settingsModal .set-menu-row .set-menu-txt small { display: none; }
#settingsModal .set-menu-row .set-menu-go { display: none; }
#settingsModal .set-menu-row .set-menu-ico { font-size: 1.25rem; }
#settingsModal .set-menu-out { color: var(--d); border-color: color-mix(in srgb, var(--d) 30%, var(--bdr)); }
@media (min-width: 768px) and (min-height: 501px), (min-width: 1024px) { #settingsModal .set-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } #settingsModal .set-menu-row .set-menu-txt small { display: block; font-size: .72rem; color: var(--txt-m); } }

/* ---- A warehouse's home (wh-home.js): the work first, as cards with a count; the figures under it. ---- */
.whh-now { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 1024px) { .whh-now { grid-template-columns: 1fr 1fr; align-items: start; } }
.whh-block { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-18); padding: 14px; margin-bottom: 14px; }
.whh-now .whh-block { margin: 0; }
.whh-req { border-inline-start: 4px solid var(--w); }
.whh-pen { border-inline-start: 4px solid var(--p); }
.whh-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.whh-head h4 { margin: 0; flex: 1; font-size: 1rem; font-weight: 800; }
.whh-n { min-width: 28px; height: 28px; padding: 0 9px; border-radius: var(--rad-pill); display: inline-grid; place-items: center; background: var(--bg); font-size: .85rem; font-weight: 800; }
.whh-req:not(.is-empty) .whh-n { background: var(--w); color: var(--c-white); }
.whh-block .group-item { margin-bottom: 8px; }
.whh-block .group-item:last-child { margin-bottom: 0; }
.whh-empty { display: none; }
.whh-block.is-empty .whh-empty { display: block; color: var(--txt-m); font-weight: 700; font-size: .88rem; padding: 4px 2px; }
.whh-block.is-empty > div:not(.whh-empty):not(.whh-head) { display: none; }
.whh-block.is-empty { border-inline-start-color: var(--s); }
.whh-req > div.no-print { margin-bottom: 10px !important; }
.whh-req.is-empty > div.no-print { display: none; }
.whh-figures { margin-bottom: 14px; }
/* The month's figures as one band: the sales a tile among the others, not a banner over the page. */
html.v2 .whh-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.v2 .whh-figures .whx-hero { grid-column: 1 / -1; margin: 0; padding: 16px; border-radius: var(--rad-18); min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html.v2 .whh-figures .whx-hero-value { font-size: 1.8rem; }
html.v2 .whh-figures .whx-kpis { display: contents; }
html.v2 .whh-figures .whx-kpi { margin: 0; }
@media (min-width: 1024px) { html.v2 .whh-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Pages of one subject: a switch under the page's head. */
.v2-seg { display: flex; gap: 4px; padding: 4px; margin: -6px 0 16px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); }
.v2-seg button { flex: 1; min-width: 0; border: none; background: none; padding: 10px 6px; border-radius: var(--rad-10); font: inherit; font-size: .88rem; font-weight: 800; color: var(--txt-m); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-seg button.on { background: var(--p); color: var(--c-white); }
.wp-own-edit { position: fixed; z-index: 2100; inset-block-end: calc(20px + var(--sab, 0px)); inset-inline-start: 50%; transform: translateX(50%); padding: 13px 22px; border: none; border-radius: var(--rad-pill); background: var(--p); color: var(--c-white); font: inherit; font-weight: 800; font-size: .95rem; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--c-blue-11) 50%, transparent); cursor: pointer; }
[dir="ltr"] .wp-own-edit { transform: translateX(-50%); }
/* A warehouse's switches (orders by status, products by stock, cheques by state): one row, nothing wrapped. */
html.v2 .warehouse-only-section .dev-seg { display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); overflow-x: auto; scrollbar-width: none; }
html.v2 .warehouse-only-section .dev-seg::-webkit-scrollbar { display: none; }
html.v2 .warehouse-only-section .dev-seg-btn { flex: 1 0 auto; border-radius: var(--rad-10); padding: 9px 12px; font-size: .84rem; white-space: nowrap; box-shadow: none; border: none; }
html.v2 .warehouse-only-section .dev-seg-btn.active { background: var(--p); color: var(--c-white); }
/* The orders' cards: white, a line at the side for their state. */
html.v2 #whOrdersList .group-item, html.v2 .whh-block .group-item { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) { html.v2 .v2-head-a .dl-print-btn { flex: 0 0 auto !important; padding: 0 12px !important; } html.v2 .v2-head-a .dl-print-btn span { display: none; } }

/* =====================================================================================================
   A warehouse's page (store-look.js): a short cover, the logo round under it, the name and its line, the
   figures and the buttons in rows, then two tabs -- the products as a grid, and about the warehouse.
   ===================================================================================================== */
.wp.sl { background: var(--bg); }
.wp.sl .wp-hero { min-height: 0; height: 170px; }
.wp.sl .wp-hero-in { display: none; }
.wp.sl .wp-hero-shade { background: linear-gradient(to top, color-mix(in srgb, var(--c-blue-5) 25%, transparent), transparent 70%); }
.wp.sl .wp-grid-lines { opacity: .08; }
.wp.sl .wp-top > * { top: calc(16px + var(--sat, 0px)); }
.wp.sl .wp-back { background: var(--card); color: var(--txt); border: 1px solid var(--bdr); box-shadow: var(--shadow-sm); }
.wp.sl .wp-preview { background: var(--card); }
/* The head. */
.sl-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 0 18px 18px; background: var(--card); border-bottom: 1px solid var(--bdr); }
.sl-head .wp-id { flex-direction: column; gap: 8px; margin: -56px 0 0; animation: none; color: var(--txt); }
.sl-head .wp-logo-wrap { display: inline-block; position: relative; }
.sl-head .wp-logo { width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--card); background: var(--card); font-size: 2.6rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--c-blue-11) 18%, transparent); }
.sl-head .wp-logo-wrap .vp-qr-badge { position: absolute; width: 34px; height: 34px; padding: 3px; bottom: 2px; inset-inline-end: 2px; border-radius: 50%; border: 2px solid var(--card); box-shadow: var(--shadow-sm); }
.sl-head .wp-logo-wrap .vp-qr-badge img { border-radius: 50%; }
.sl-head .wp-id strong { font-size: 1.45rem; font-weight: 800; color: var(--txt); }
.sl-head .wp-id small { color: var(--txt-m); font-size: .86rem; margin-top: 2px; }
.sl-line { margin: 8px auto 0; max-width: 44ch; font-size: .95rem; font-weight: 600; line-height: 1.6; color: var(--txt-m); }
.sl-head .wp-sub { margin: 4px auto 0; color: var(--txt-m); font-size: .9rem; animation: none; }
/* The figures: in a row, divided by a thin line. */
.sl-head .wp-stats { display: flex; justify-content: center; gap: 0; padding: 0; margin: 14px 0 0; width: 100%; max-width: 520px; }
.sl-head .wp-stat { flex: 1 1 0; min-width: 0; padding: 6px 4px; border: none; border-radius: 0; background: none; backdrop-filter: none; animation: none; text-align: center; }
.sl-head .wp-stat + .wp-stat:not([hidden]) { border-inline-start: 1px solid var(--bdr); }
.sl-head .wp-stat b { font-size: 1.25rem; font-weight: 800; color: var(--txt); text-align: center; }
.sl-head .wp-stat span { font-size: .74rem; color: var(--txt-m); margin-top: 2px; }
/* The buttons: one row. */
.sl-head .wp-cta { width: 100%; max-width: 560px; margin: 14px 0 0; justify-content: center; gap: 8px; animation: none; }
.sl-head .wp-cta-link { flex: 1 1 100%; justify-content: center; }
.sl-head .wp-cta-link .btn-main { flex: 1; background: var(--wp) !important; color: var(--c-white) !important; box-shadow: none !important; padding: 12px 18px !important; border-radius: var(--rad-12) !important; font-size: .92rem !important; }
.sl-head .wp-cta-link .btn-cancel { padding: 11px 16px !important; border-radius: var(--rad-12) !important; }
.sl-head .wp-btn { flex: 1 1 0; justify-content: center; padding: 11px 14px; border-radius: var(--rad-12); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); font-size: .9rem; }
.sl-head .wp-btn:hover { transform: none; border-color: var(--wp); background: var(--bg); }
.sl-head .wp-btn--wa { background: var(--c-green-36); border-color: var(--c-green-36); color: var(--c-white); }
/* The tabs. */
.sl-tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--bdr); position: sticky; top: 0; z-index: 4; }
.sl-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .92rem; font-weight: 700; color: var(--txt-m); cursor: pointer; margin-bottom: -1px; }
.sl-tabs button svg { width: 20px; height: 20px; }
.sl-tabs button.on { color: var(--txt); border-bottom-color: var(--txt); }
.sl-pane { display: none; max-width: 1120px; margin: 0 auto; padding: 16px 16px 40px; }
.sl-pane.on { display: block; }
.sl-empty { display: none; text-align: center; color: var(--txt-m); font-weight: 700; padding: 40px 0; }
.sl-pane--shop.is-empty .sl-empty { display: block; }
/* Sections inside a tab: plain cards with a small heading, no display type, no reveal. */
.wp.sl .wp-sec { max-width: none; padding: 16px; margin: 0 0 12px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-16); }
.wp.sl .wp-kicker { display: none; }
.wp.sl .wp-sec h3 { font-size: 1.05rem; margin: 0 0 12px; letter-spacing: 0; }
.wp.sl .wp-reveal { opacity: 1; transform: none; }
/* The products as a grid, not a rail to slide through. */
.wp.sl #wpProducts .wp-rail, .wp.sl #wpOffers .wp-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; overflow: visible; padding: 0; }
.wp.sl .wp-rail .pc-card { flex: none; }
.wp.sl .wp-marquee-run { animation: none; flex-wrap: wrap; width: auto; }
.wp.sl .wp-marquee { mask-image: none; -webkit-mask-image: none; }
.wp.sl .wp-marquee-run span { padding: 8px 14px; font-size: .88rem; border-radius: var(--rad-12); }
.wp.sl .wp-about { display: block; }
.wp.sl .wp-about p { font-size: .95rem; line-height: 1.9; }
.wp.sl .wp-about-photo { display: none; }
.wp.sl .wp-points { grid-template-columns: 1fr; gap: 8px; }
.wp.sl .wp-point { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--rad-12); background: var(--bg); border: none; }
.wp.sl .wp-point::after { display: none; }
.wp.sl .wp-point:hover { transform: none; box-shadow: none; }
.wp.sl .wp-point i { width: 36px; height: 36px; border-radius: var(--rad-10); font-size: 1.1rem; margin: 0; }
.wp.sl .wp-point span { font-size: .9rem; }
.wp.sl .wp-mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 3px; }
.wp.sl .wp-mosaic button, .wp.sl .wp-mosaic button:first-child, .wp.sl .wp-mosaic--2 button, .wp.sl .wp-mosaic--4 button:last-child, .wp.sl .wp-mosaic--6 button:last-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 1; border-radius: 0; }
.wp.sl .wp-contact { grid-template-columns: 1fr; gap: 8px; }
.wp.sl .wp-contact > div { padding: 10px 12px; border-radius: var(--rad-12); background: var(--bg); border: none; }
.wp.sl .wp-contact i { width: 34px; height: 34px; font-size: 1rem; border-radius: var(--rad-10); }
.wp.sl .wp-foot { margin: 0; padding: 0; text-align: center; }
.wp.sl .wp-foot::before { display: none; }
.wp.sl .wp-foot h3 { color: var(--txt); padding: 16px 0 0; font-size: 1.05rem; }
.wp.sl .wp-foot p { color: var(--txt-m); font-size: .9rem; }
.wp.sl .wp-foot .wp-cta { padding: 12px 0 16px; }
.wp.sl .wp-foot .wp-btn { border: 1px solid var(--bdr); background: var(--card); color: var(--txt); }
.wp.sl .wp-foot .wp-btn--wa { background: var(--c-green-36); color: var(--c-white); border-color: var(--c-green-36); }
.wp.sl .wp-foot .wp-cta-link .btn-main { background: var(--wp) !important; color: var(--c-white) !important; }
@media (min-width: 900px) {
  .wp.sl .wp-hero { height: 240px; }
  .sl-head .wp-id { margin-top: -70px; }
  .sl-head .wp-logo { width: 140px; height: 140px; }
  .sl-head .wp-id strong { font-size: 1.8rem; }
  .sl-pane--about.on { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .sl-pane--about .wp-sec { margin: 0; }
}
@media (max-width: 600px) { .wp.sl #wpProducts .wp-rail, .wp.sl #wpOffers .wp-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .wp.sl .sl-pane { padding: 12px 10px 40px; } .wp.sl .wp-sec { padding: 12px; } }

/* ---- A warehouse's lists in the new look: no paragraphs of explanation over them, switches in one row, the
   customers' cards white with their actions as small buttons in a row and ending a relationship the last. ---- */
html.v2 #warehouseChequesTab > p[data-i18n="chq_intro"], html.v2 #warehouseCustomersTab > p[data-i18n="wh_customers_intro"],
html.v2 #warehouseRepsTab p[data-i18n="wh_reps_hint"]:first-of-type, html.v2 #whAccountsIntro { display: none !important; }
html.v2 .warehouse-only-section .fld-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
html.v2 .warehouse-only-section .fld-chips::-webkit-scrollbar { display: none; }
html.v2 .warehouse-only-section .fld-chips > * { flex: 0 0 auto; white-space: nowrap; }
html.v2 .chq-summary { gap: 8px; }
html.v2 .chq-summary > * { padding: 10px 12px !important; border-radius: var(--rad-14) !important; }
html.v2 #whCustomersList .group-item, html.v2 #warehouseCustomersTab .group-item { background: var(--card) !important; border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 12px 14px; align-items: flex-start; }
html.v2 #warehouseCustomersTab .group-item > div:first-child { flex: 1 1 100% !important; }
html.v2 #warehouseCustomersTab .group-item > button, html.v2 #warehouseCustomersTab .group-item > div:not(:first-child) { flex: 0 0 auto; }
html.v2 #warehouseCustomersTab .group-item button { width: auto !important; margin: 0 !important; padding: 7px 12px !important; font-size: .78rem !important; border-radius: var(--rad-10) !important; box-shadow: none !important; }
html.v2 #warehouseCustomersTab .group-item > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
html.v2 #warehouseCustomersTab .crep-line { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: .82rem; }
html.v2 #warehouseCustomersTab .crep-select { width: auto; min-width: 0; padding: 6px 10px; font-size: .82rem; }
html.v2 #warehouseCustomersTab .wh-acts { flex: 1 1 100%; gap: 6px; }
html.v2 #warehouseCustomersTab .wh-acts > button { flex: 0 0 auto; }
html.v2 #warehouseCustomersTab .wh-acts > button[onclick*="disconnect"] { margin-inline-start: auto !important; background: none !important; border: none !important; color: var(--d) !important; }
html.v2 #warehouseCustomersTab .wh-acts { flex: 1 1 100% !important; flex-wrap: wrap !important; width: 100%; }
html.v2 #warehouseCustomersTab .group-item { flex-wrap: wrap !important; }
/* The representatives: the page's head names them; the card under it does not again. */
html.v2 #warehouseRepsTab > .dash-card { background: none; border: none; box-shadow: none; padding: 0; }
html.v2 #warehouseRepsTab > .dash-card > h4 { display: none; }
html.v2 #warehouseSettingsTab > p:first-of-type { display: none; }
/* The settings' sections on a phone: short rows, icon beside the name, so the whole list and signing out fit. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  #settingsModal .set-menu-row { flex-direction: row; align-items: center; gap: 8px; padding: 10px; }
  #settingsModal .set-menu-row .set-menu-ico { width: 32px; height: 32px; font-size: 1.05rem; flex: none; }
  #settingsModal .set-menu-row .set-menu-txt b { font-size: .82rem; }
}

/* ---- A product priced by the representative: ordered all the same; waiting for its price until it is given. ---- */
.prod-act-row { display: flex; gap: 6px; align-items: stretch; }
.prod-act-row > :first-child { flex: 1; min-width: 0; }
.prod-ask-rep { flex: none; width: 40px; border-radius: var(--rad-10); border: 1px solid var(--bdr); background: var(--card); cursor: pointer; font-size: 1rem; }
.shop-line-ask { color: var(--w) !important; font-size: .78rem !important; font-weight: 800; }
.shop-ask-note, .pc-ask-note { margin: 8px 0 0; padding: 9px 12px; border-radius: var(--rad-12); background: var(--wl); color: var(--c-orange-31); font-size: .8rem; font-weight: 700; line-height: 1.6; }
.pc-ask-rep { margin-top: 8px !important; }
.wo-pending td { background: color-mix(in srgb, var(--w) 8%, transparent); }
.wo-pending-tag { display: inline-block; padding: 3px 10px; border-radius: var(--rad-pill); background: var(--wl); color: var(--c-orange-31); font-size: .74rem; font-weight: 800; white-space: nowrap; }
.wo-price-in { width: 100px; padding: 6px 8px; text-align: center; margin: 0; }
.wo-price-box { margin-top: 12px; padding: 12px; border-radius: var(--rad-14); background: var(--wl); color: var(--c-orange-31); font-size: .85rem; font-weight: 700; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.wo-price-box .btn-main { width: auto; margin: 0; padding: 9px 16px; }
#whOrderActions button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none !important; }
.sp-room { display: flex; gap: 8px; margin: 0 0 10px; } .sp-room span { flex: 1; padding: 8px 10px; border-radius: var(--rad-12); background: var(--bg); font-size: .85rem; font-weight: 700; } .sp-room b { font-weight: 900; }

/* ---- "Today" on a doctor's home (today.js): what waits, one line each ---- */
.dl-today { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-22); padding: 6px 6px 8px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.dl-today-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
.dl-today-h h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--txt); }
.dl-today-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--rad-11); background: var(--p); color: var(--c-white); font-size: .75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.dl-today-row { --c: var(--c-sky-39); display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; background: transparent; border: 0; border-radius: var(--rad-16); padding: 10px; cursor: pointer; color: var(--txt); font: inherit; }
.dl-today-row:hover, .dl-today-row:focus-visible { background: color-mix(in srgb, var(--c) 8%, transparent); }
.dl-today-row.t-red { --c: var(--c-red-51); } .dl-today-row.t-green { --c: var(--c-teal-30); } .dl-today-row.t-blue { --c: var(--c-sky-39); }
.dl-today-row.t-amber { --c: var(--c-orange-44); } .dl-today-row.t-offer { --c: var(--c-orange-48); }
.dl-today-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--rad-13); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: color-mix(in srgb, var(--c) 13%, transparent); }
.dl-today-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-today-t b { font-size: .95rem; font-weight: 800; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-today-t small { font-size: .78rem; color: var(--txt-m); }
.dl-today-go { font-style: normal; font-size: 1.3rem; color: var(--txt-m); flex-shrink: 0; }
[dir="ltr"] .dl-today-go { transform: scaleX(-1); }
.dl-today-empty { margin: 2px 10px 6px; color: var(--txt-m); font-size: .9rem; }
.pc-cat.pc-cat--offers { border-color: var(--c-orange-72); color: var(--c-orange-40); background: var(--c-orange-96); }
.pc-cat.pc-cat--offers.is-on { background: var(--c-orange-48); border-color: var(--c-orange-48); color: var(--c-white); }
.pc-cat.pc-cat--offers.is-on small { color: var(--c-orange-92); }

/* "More" in sections: each heading over its own tiles (v2.js: sections). */
.v2-sec { margin-top: 12px; }
.v2-sec h4 { margin: 0 6px 8px; font-size: .8rem; font-weight: 800; color: var(--txt-m); letter-spacing: .2px; }
.v2-sec .v2-grid { margin-top: 0; }
/* The clinic's board button floats on the home screen only: over a list on a phone it covered what was under it. */
@media (max-width: 760px) {
  body:has(#dashboardTab:not(.active)) .wall-launch:not(.wall-launch-nav) { display: none !important; }
}
/* Nor while the assistant is open: it floats in the same corner and sat on the microphone. */
body:has(#aiPanel.is-open) .wall-launch:not(.wall-launch-nav) { display: none !important; }

/* The money for a clinic's manager, in plain words (finance-core.js: simpleView). */
.fs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fs-top .lf-month { margin: 0; }
.fs-add { display: flex; gap: 8px; }
.fs-add .btn-main { width: auto; margin: 0; padding: 9px 16px; border-radius: var(--rad-12); font-size: .92rem; }
.fs-add .btn-main:first-child { background: var(--c-rose-97); color: var(--c-rose-41); border: 1px solid var(--c-rose-90); box-shadow: none; }
.fs-add .fin-inc { background: var(--c-teal-96); color: var(--c-teal-24); border: 1px solid var(--c-teal-80); box-shadow: none; }
.fs-hero { border-radius: var(--rad-22); padding: 16px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--bdr); box-shadow: var(--shadow-sm); }
.fs-hero p { margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; color: var(--txt); }
.fs-hero.is-neg p { color: var(--c-red-42); }
.fs-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fs-three > div { background: var(--bg); border-radius: var(--rad-14); padding: 10px; min-width: 0; }
.fs-three small { display: block; font-size: .78rem; color: var(--txt-m); font-weight: 700; }
.fs-three b { display: block; font-size: 1.05rem; font-weight: 900; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-three .fs-net { background: color-mix(in srgb, var(--c-teal-30) 10%, var(--bg)); }
.fs-hero.is-neg .fs-net { background: color-mix(in srgb, var(--c-red-51) 10%, var(--bg)); }
.fs-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-20); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.fs-card h4 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; color: var(--txt); display: flex; justify-content: space-between; align-items: baseline; }
.fs-card h4 small { font-size: .9rem; color: var(--txt-m); }
.fs-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--bdr); font-size: .9rem; }
.fs-row:first-of-type { border-top: 0; }
.fs-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); font-weight: 700; }
.fs-row b { font-weight: 800; color: var(--txt); white-space: nowrap; }
.fs-bar { display: block; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.fs-bar em { display: block; height: 100%; border-radius: 4px; background: var(--p); }
.fs-person { grid-template-columns: minmax(0, 1fr) auto auto; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; font: inherit; text-align: start; }
.fs-person i { font-style: normal; color: var(--txt-m); }
.fs-full, .fin-simple-back { display: block; margin: 4px auto 16px; background: none; border: 0; color: var(--txt-m); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fin-simple-back { margin: 0 0 10px; text-decoration: none; color: var(--p); }
.fs-top { flex-direction: column; align-items: stretch; }
.fs-top .lf-month { justify-content: space-between; width: 100%; }
.fs-add .btn-main { flex: 1; }

/* A clinic's takings on the home screen, and each doctor's pay (takings.js). */
.dl-take { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-22); padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.tk-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tk-h h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--txt); }
.tk-add { border: 0; border-radius: var(--rad-12); padding: 9px 14px; font: inherit; font-weight: 800; font-size: .9rem; color: var(--c-white); background: linear-gradient(135deg, var(--c-teal-30), var(--c-teal-39)); cursor: pointer; box-shadow: 0 6px 14px -8px var(--c-teal-30); }
.tk-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.tk-figs > div { background: var(--bg); border-radius: var(--rad-14); padding: 9px 10px; min-width: 0; }
.tk-figs small { display: block; font-size: .76rem; font-weight: 700; color: var(--txt-m); }
.tk-figs b { display: block; font-size: 1.05rem; font-weight: 900; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-figs .tk-pay { background: color-mix(in srgb, var(--c-teal-30) 10%, var(--bg)); }
.tk-figs .tk-pay em { display: block; font-style: normal; font-size: .72rem; color: var(--c-teal-24); font-weight: 700; }
.tk-list { margin-top: 8px; }
.tk-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--bdr); font-size: .88rem; }
.tk-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-m); }
.tk-row b { color: var(--txt); font-weight: 800; }
.tk-del { border: 0; background: none; color: var(--txt-m); cursor: pointer; font-size: .9rem; padding: 2px 6px; }
.tk-amount { font-size: 1.4rem !important; font-weight: 800; text-align: center; }
.tk-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-methods label { flex: 1 1 auto; margin: 0; cursor: pointer; }
.tk-methods input { position: absolute; opacity: 0; pointer-events: none; }
.tk-methods span { display: block; text-align: center; padding: 9px 12px; border: 1px solid var(--bdr); border-radius: var(--rad-12); background: var(--card); font-weight: 700; font-size: .9rem; color: var(--txt); }
.tk-methods input:checked + span { border-color: var(--p); background: color-mix(in srgb, var(--p) 10%, var(--card)); color: var(--p); }
.tk-kind { margin-bottom: 12px; }
.fs-doc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--bdr); background: none; font: inherit; text-align: start; cursor: pointer; color: var(--txt); }
.fs-doc:first-of-type { border-top: 0; }
.fs-doc-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-doc-n b { font-weight: 800; }
.fs-doc-n small { color: var(--txt-m); font-size: .78rem; }
.fs-doc-p { text-align: end; display: flex; flex-direction: column; }
.fs-doc-p small { font-size: .72rem; color: var(--txt-m); }
.fs-doc-p b { font-weight: 900; color: var(--c-teal-24); }
.fs-doc-p em { font-style: normal; font-size: .72rem; color: var(--txt-m); }
.fs-note { margin: 6px 0 0; font-size: .78rem; color: var(--txt-m); }

/* "Between us" on another person's page: the account, the cases, a payment (app.js: drawProfileBetween). */
.vp-between { width: 100%; max-width: 520px; margin: 12px auto 0; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-18); padding: 8px; text-align: start; grid-column: 1 / -1; }
.vp-between h4 { margin: 4px 8px 6px; font-size: .82rem; font-weight: 800; color: var(--txt-m); }
.vp-bt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: var(--rad-13); background: none; font: inherit; text-align: start; cursor: pointer; color: var(--txt); }
.vp-bt:hover, .vp-bt:focus-visible { background: var(--bg); }
.vp-bt + .vp-bt { border-top: 1px solid var(--bdr); border-radius: 0; }
.vp-bt-i { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--rad-12); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.vp-bt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vp-bt-t b { font-weight: 800; font-size: .95rem; }
.vp-bt-t small { color: var(--txt-m); font-size: .8rem; }
.vp-bt > i { font-style: normal; font-size: 1.2rem; color: var(--txt-m); }
.fs-add .btn-main.fin-inc { background: var(--c-teal-96) !important; color: var(--c-teal-24) !important; border: 1px solid var(--c-teal-80) !important; box-shadow: none !important; }
.fs-add .btn-main:not(.fin-inc) { background: var(--c-rose-97) !important; color: var(--c-rose-41) !important; border: 1px solid var(--c-rose-90) !important; box-shadow: none !important; }

/* The shop while its products come, and the send button while the order is on its way (supplies.js). */
.shop-loading { text-align: center; padding: 30px 10px; color: var(--txt-m); font-weight: 700; }
.shop-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--c-white) 45%, transparent); border-top-color: var(--c-white); animation: shopSpin .7s linear infinite; vertical-align: -2px; }
@keyframes shopSpin { to { transform: rotate(360deg); } }
.shop-send[disabled] { opacity: .85; cursor: progress; }

/* "My speciality" on the products screen (products.js). */
.pc-cat.pc-cat--mine { border-color: var(--c-indigo-85); color: var(--c-violet-50); background: var(--c-indigo-98); }
.pc-cat.pc-cat--mine.is-on { background: var(--c-violet-58); border-color: var(--c-violet-58); color: var(--c-white); }
.pc-cat.pc-cat--edit { padding-inline: 10px; }
.pc-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.pc-spec { margin: 0; cursor: pointer; }
.pc-spec input { position: absolute; opacity: 0; pointer-events: none; }
.pc-spec span { display: block; padding: 10px 12px; border: 1px solid var(--bdr); border-radius: var(--rad-12); background: var(--card); font-weight: 700; font-size: .9rem; color: var(--txt); }
.pc-spec input:checked + span { border-color: var(--c-violet-58); background: var(--c-indigo-98); color: var(--c-violet-50); }

/* "Show more" under a long list: the first rows are drawn, the rest a press away (app.js: LIST_CAP). */
.list-more { display: block; width: 100%; max-width: 420px; margin: 12px auto; padding: 11px 16px; border-radius: var(--rad-14); border: 1px dashed var(--bdr); background: var(--card); color: var(--p); font: inherit; font-weight: 800; cursor: pointer; }
.list-more small { color: var(--txt-m); font-weight: 700; }

/* ===== The walls made calm (wall-look.js, role-wall.js) ===== */
/* The head: the "⋯" and its menu, every button in it named. */
.lab-wall .wall-head-end { position: relative; }
.lab-wall .wall-more.is-on { background: var(--w-acc, var(--c-sky-60)); color: var(--c-sky-7); }
.lab-wall .wall-menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 30; min-width: 280px; padding: 12px; border-radius: var(--rad-18); background: var(--w-head, var(--c-blue-11)); border: 1px solid var(--w-line, var(--c-blue-27)); box-shadow: 0 24px 50px -18px color-mix(in srgb, var(--c-black) 60%, transparent); display: flex; flex-direction: column; gap: 10px; }
.lab-wall .wall-menu[hidden] { display: none; }
.lab-wall .wall-menu .wm-head { font-size: .8rem; font-weight: 800; color: var(--w-sub, var(--c-blue-65)); }
.lab-wall .wall-menu .wall-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-wall .wall-menu .wm-row { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--w-line, var(--c-blue-27)); padding-top: 10px; }
.lab-wall .wall-menu .wm-row .wall-tool { width: 100%; justify-content: flex-start; gap: 10px; padding: 10px 12px; height: auto; }
.lab-wall .wall-menu .wm-label { font-size: .95rem; font-weight: 800; }
/* The counts: a number with its name, pressable. */
.role-wall .wall-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.role-wall .wall-count { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: var(--rad-pill); border: 1px solid var(--w-line, var(--c-blue-27)); background: var(--w-tool, var(--c-blue-17)); color: var(--w-txt2, var(--c-sky-91)); font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer; }
.role-wall .wall-count i { font-style: normal; }
.role-wall .wall-count b { font-size: 1.05rem; }
.role-wall .wall-count small { font-size: .85rem; font-weight: 700; color: var(--w-sub, var(--c-blue-65)); }
.role-wall .wall-count.alert { border-color: var(--c-orange-37); color: var(--c-amber-56); } .role-wall .wall-count.late { border-color: var(--c-red-42); color: var(--c-red-82); }
.role-wall .wall-count.is-zero { opacity: .5; }
/* An empty column folds to its name and goes to the end. */
.rw-col--empty { order: 50; max-height: none; border-style: dashed; opacity: .6; }
.rw-col--empty .rw-col-body { display: none; }
.rw-col--empty .rw-col-head { border-bottom: 0; padding: 10px 14px; font-size: .95rem; }
.rw-col--flash { box-shadow: 0 0 0 3px var(--w-acc, var(--c-sky-60)); transition: box-shadow .3s; }
/* A phone: the columns side by side, a swipe apart, each nearly the screen's width. */
@media (max-width: 700px) {
  .rw-board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; align-items: stretch; }
  .rw-col { flex: 0 0 86vw; scroll-snap-align: center; max-height: calc(100vh - 210px); }
  .rw-col--empty { flex-basis: 52vw; align-self: flex-start; }
  .rw-col-body { overflow-y: auto; }
  .lab-wall .wall-menu { position: fixed; top: 70px; inset-inline: 12px; min-width: 0; }
  .role-wall .wall-count { font-size: .82rem; padding: 5px 10px 5px 8px; }
}
.lab-wall .wall-head-end { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.lab-wall .wall-head-end > .wall-more { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border-style: solid; display: inline-grid; place-items: center; }
.lab-wall .wall-more svg { width: 22px; height: 22px; }
.lab-wall .wall-clock { white-space: nowrap; }
@media (max-width: 700px) { .lab-wall .wall-head-end > .wall-more { width: 44px; height: 44px; } }
.lab-wall .wall-menu .wm-row .wall-tool { width: 100% !important; height: auto !important; min-height: 46px; display: flex !important; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px !important; border-radius: var(--rad-12); }
.lab-wall .wall-menu .wm-row .wall-tool svg { width: 22px; height: 22px; flex: none; }
.lab-wall .wall-menu .wall-sizes .wall-size { flex: 1 1 44px; }

/* Opening while signed in: a quiet logo until the account opens (diag.js), not a flash of the front page. */
html.dl-boot #loginScreen, html.dl-boot #registerScreen { display: none !important; }
html.dl-boot body::before { content: ""; position: fixed; inset: 0; z-index: 99999; background: var(--bg, var(--c-sky-98)) url("../images/brand/logo.svg") center / 72px no-repeat; animation: dlBootPulse 1.4s ease-in-out infinite; }
@keyframes dlBootPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.tk-add { white-space: nowrap; flex-shrink: 0; }
.tk-fed { white-space: nowrap; flex-shrink: 0; font-size: .78rem; font-weight: 800; padding: 5px 10px; border-radius: var(--rad-12); background: var(--c-teal-95, #e6f6f4); color: var(--c-teal-30, #0f766e); }

/* A picture full screen, pinched larger (zoom-view.js). */
#dlZoom { position: fixed; inset: 0; z-index: 100000000; background: color-mix(in srgb, var(--c-black) 94%, transparent); display: flex; align-items: center; justify-content: center; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; }
#dlZoom img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; -webkit-user-drag: none; }
#dlZoom .dlz-x { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-white) 16%, transparent); color: var(--c-white); font-size: 20px; cursor: pointer; }
.chat-img, img[onclick*="viewBase64Image"] { cursor: zoom-in; }
.acc2-pay { display: block; width: 100%; margin: 8px 0 4px; padding: 9px 12px; border-radius: var(--rad-12); border: 1px solid var(--c-teal-80); background: var(--c-teal-96); color: var(--c-teal-24); font: inherit; font-weight: 800; cursor: pointer; }

/* A phone turned sideways and a tablet: the page takes the screen's width (it stayed a 640px column in the middle,
   half the screen), up to a comfortable reading width. */
@media (min-width: 641px) and (max-width: 1023px) {
  .content-area { max-width: min(100%, 1000px); }
}
/* The clinic's board button sits above the assistant's, not on it (they shared the same corner). */
@media (min-width: 1024px) { .wall-launch.wall-launch { bottom: 84px !important; } }
@media (max-width: 1023px) {
  .wall-launch.wall-launch { bottom: calc(76px + var(--navbar-space, 96px)) !important; }
  html.v2 .wall-launch.wall-launch { bottom: calc(160px + var(--sab, 0px)) !important; }
}

/* A phone turned sideways (short and wide) is a phone: the phone rules above include it (max-height: 500px), and the
   tablet rules (min-width: 768px) leave it out -- it got a tablet bar 172px tall over half its screen. */

/* The works found by the new order's search, right under it (app.js: filterOrderServices). */
.svc-hits { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; max-height: 260px; overflow-y: auto; }
.svc-hits[hidden] { display: none; }
.svc-hit { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 1px solid var(--bdr); border-radius: var(--rad-12); background: var(--card); color: var(--txt); font: inherit; font-size: .92rem; text-align: start; cursor: pointer; }
.svc-hit:hover { border-color: var(--p); }
.svc-hit.is-on { border-color: var(--p); background: color-mix(in srgb, var(--p) 10%, var(--card)); }
.svc-hit b { flex: none; padding: 2px 7px; border-radius: var(--rad-7); background: var(--pl, var(--c-sky-94)); color: var(--p); font-size: .8rem; }
.svc-hit span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.svc-hit em { flex: none; font-style: normal; color: var(--txt-m); font-weight: 800; font-size: .85rem; }
.svc-hits small { color: var(--txt-m); padding: 4px 6px; }
/* The computer (and a tablet) has no bar with a "+" at the thumb: the home screen's own "new case" button shows there. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 1024px) {
  html.v2 #dashboardTab .btn-quick-order { display: flex !important; align-items: center; justify-content: center; gap: 10px; }
}

/* A payment to a warehouse, recorded from its card in the accounts */
.wa-card-pay{align-self:flex-start;padding:7px 14px;font-size:.82rem;border-radius:var(--rad-10);min-height:0;width:auto}

/* An internal doctor's month: the income brought in, how the pay is worked out, every entry (takings.js: details) */
.tk-more{display:block;width:100%;margin-top:10px;padding:9px 12px;border:1px dashed var(--bdr);border-radius:var(--rad-12);background:transparent;color:var(--p);font-weight:800;font-size:.84rem;cursor:pointer;text-align:center}
.tkd{display:flex;flex-direction:column;gap:12px}
.tkd-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tkd-nav strong{font-size:1rem}
.tkd-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--bdr);background:var(--card);font-size:1.3rem;font-weight:900;color:var(--p);cursor:pointer}
.tkd-nav button:disabled{opacity:.3;cursor:default}
.tkd-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tkd-hero>div{background:var(--card);border:1px solid var(--bdr);border-radius:var(--rad-14);padding:12px;display:flex;flex-direction:column;gap:3px}
.tkd-hero small{color:var(--txt-m);font-size:.74rem;font-weight:700}
.tkd-hero b{font-size:1.25rem;font-weight:900}
.tkd-hero em{font-style:normal;font-size:.72rem;color:var(--txt-m)}
.tkd-hero .tkd-mine{border-color:var(--s);background:color-mix(in srgb,var(--s) 8%,var(--card))}
.tkd-hero .tkd-mine b{color:var(--s)}
.tkd-how{border:1px solid var(--bdr);border-radius:var(--rad-14);padding:12px;background:color-mix(in srgb,var(--p) 4%,var(--card))}
.tkd-how h4,.tkd-h{margin:0 0 8px;font-size:.9rem;font-weight:900}
.tkd-how p{margin:6px 0;font-size:.8rem;color:var(--txt-m);line-height:1.6}
.tkd-sum{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:1.02rem;font-weight:800;direction:ltr}
.tkd-sum i{font-style:normal;color:var(--txt-m)}
.tkd-sum b{color:var(--s);font-size:1.15rem}
.tkd-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.tkd-split>div{background:var(--card);border-radius:var(--rad-10);padding:8px;text-align:center;display:flex;flex-direction:column}
.tkd-split small{font-size:.72rem;color:var(--txt-m)}
.tkd-methods{display:flex;flex-wrap:wrap;gap:6px}
.tkd-chip{border:1px solid var(--bdr);border-radius:var(--rad-pill);padding:4px 10px;font-size:.78rem}
.tkd-day{border:1px solid var(--bdr);border-radius:var(--rad-12);overflow:hidden}
.tkd-day+.tkd-day{margin-top:8px}
.tkd-dh{display:flex;align-items:center;gap:8px;padding:7px 10px;background:color-mix(in srgb,var(--p) 6%,var(--card));font-size:.82rem}
.tkd-dh small{color:var(--txt-m);margin-inline-start:auto}
.tkd-day .tk-row{padding:6px 10px}
.tkd-day .tk-row small{color:var(--txt-m)}
.tkd-empty{text-align:center;color:var(--txt-m);padding:18px;font-size:.85rem}
.tkd-past{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.tkd-prev{border:1px solid var(--bdr);border-radius:var(--rad-12);background:var(--card);padding:8px;display:flex;flex-direction:column;gap:2px;text-align:start;cursor:pointer;color:inherit;font:inherit}
.tkd-prev span{font-weight:800;font-size:.82rem}
.tkd-prev small{font-size:.72rem;color:var(--txt-m)}
.tkd-actions{display:flex;flex-wrap:wrap;gap:8px}
.tkd-actions>button{flex:1;min-width:140px}

/* A statement's span: this month (with the balance brought forward), three months, the year, all (statement.js) */
.st-spans{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.st-span{border:1px solid var(--bdr);background:var(--card);color:var(--txt);border-radius:var(--rad-pill);padding:6px 13px;font-size:.8rem;font-weight:800;cursor:pointer}
.st-span.is-on{background:var(--p);border-color:var(--p);color:var(--c-white)}
/* An account card read by the month (app.js: accMonthCardHTML): the pending, with it, on one line under the month */
.acc2-stats button small{font-size:.7rem;font-weight:700;color:var(--txt-m);direction:ltr}
.acc2-stats b.pos{color:var(--s)}
.acc2-pend{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;width:100%;padding:8px 12px;border:1px dashed var(--w);border-radius:var(--rad-12);background:transparent;font:inherit;font-size:.78rem;font-weight:700;color:var(--txt-m);cursor:pointer;text-align:start}
.acc2-pend b{color:var(--w);font-weight:800;direction:ltr;display:inline-block}
/* The centre's manager: each doctor's takings this month, on the home card and the doctor's account card (takings.js, app.js) */
.tk-doc{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--bdr);border-radius:var(--rad-12);background:var(--bg);font:inherit;color:var(--txt);text-align:start;cursor:pointer}
.tk-doc>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tk-doc>span:first-child b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-doc small{font-size:.74rem;color:var(--txt-m)}
.tk-doc small i{font-style:normal;font-weight:800;color:var(--txt)}
.tk-doc-m{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.tk-doc-m b{font-weight:900;color:var(--c-teal-24)}
.tk-doc em{font-style:normal;color:var(--txt-m);font-size:1.2rem}
.cdoc-take{margin-top:8px;background:var(--c-teal-96);color:var(--c-teal-20);gap:8px;flex-wrap:wrap}
.cdoc-take b{font-weight:900}
:root[data-theme="dark"] .cdoc-take{background:color-mix(in srgb, var(--c-teal-39) 14%, transparent);color:var(--c-teal-67)}

/* A share's sum with the laboratory's work taken off first (takings.js: details) */
.tkd-lab { color: var(--d); }
.tkd-split3 { grid-template-columns: repeat(3, 1fr); }
.tkd-cases { margin-top: 8px; border: 1px solid var(--bdr); border-radius: var(--rad-10); padding: 6px 10px; background: var(--card); }
.tkd-cases summary { cursor: pointer; font-size: .8rem; font-weight: 800; color: var(--txt-m); }
.tkd-cases .tk-row small { color: var(--txt-m); }

/* The orders grouped by stage ("تصنيف"): each group in its stage's colour, each case a clean row (app.js: renderOrders) */
.grp-sec { border-color: color-mix(in srgb, var(--gc) 28%, var(--bdr)); }
.grp-head { background: color-mix(in srgb, var(--gc) 10%, var(--card)); border-bottom-color: color-mix(in srgb, var(--gc) 22%, var(--bdr)); border-right: 0 !important; padding: 12px 16px; }
.grp-title { color: color-mix(in srgb, var(--gc) 82%, var(--txt)); display: inline-flex; align-items: center; gap: 8px; }
.grp-head .emo-ico { color: var(--gc); width: 1.25em; height: 1.25em; }
.grp-count { min-width: 28px; text-align: center; padding: 3px 10px; border-radius: var(--rad-pill); font-size: .8rem; font-weight: 900; background: var(--gc); color: var(--c-white); }
.grp-list { padding: 4px 0; }
.grp-row { gap: 12px; justify-content: flex-start; padding: 10px 12px; margin: 6px 10px; border-radius: var(--rad-14); transition: border-color .15s, background .15s; }
.grp-row:hover { border-color: color-mix(in srgb, var(--gc) 45%, var(--bdr)); background: color-mix(in srgb, var(--gc) 4%, var(--card)); }
.grp-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1rem; color: var(--gc); background: color-mix(in srgb, var(--gc) 13%, var(--card)); }
.grp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grp-main b { font-size: .95rem; font-weight: 900; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-main small { font-size: .78rem; color: var(--txt-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-side { flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 800; color: var(--p); background: var(--pl); padding: 4px 10px; border-radius: var(--rad-pill); }
.grp-pic { flex: none; color: var(--txt-m); }
.grp-go { flex: none; color: var(--txt-m); font-size: 1.1rem; font-weight: 900; }

/* An icon where a drawing cannot go (emoji-icons.js): inside a search box at its start, beside a list's chosen choice,
   and a list of our own with each choice's icon. */
.emo-box { background-image: var(--emo-img) !important; background-repeat: no-repeat !important; background-size: 18px 18px !important; padding-inline-start: 40px !important; }
html[dir="rtl"] .emo-box { background-position: right 13px center !important; }
html:not([dir="rtl"]) .emo-box { background-position: left 13px center !important; }
.emo-sel--ico { background-image: var(--emo-img), var(--sel-arrow, none) !important; background-repeat: no-repeat !important; background-size: 18px 18px, auto !important; padding-inline-start: 38px !important; }
html[dir="rtl"] .emo-sel--ico { background-position: right 12px center, left 12px center !important; }
html:not([dir="rtl"]) .emo-sel--ico { background-position: left 12px center, right 12px center !important; }
.emo-pick { position: fixed; z-index: 100000; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); box-shadow: 0 14px 40px color-mix(in srgb, var(--c-blue-11) 18%, transparent); padding: 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; animation: emoPickIn .12s ease-out; }
.emo-pick--sheet { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-height: 62vh; border-radius: var(--rad-20); padding: 10px; animation: emoSheetIn .16s ease-out; }
.emo-pick-o { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 11px 12px; border: 0; border-radius: var(--rad-10); background: transparent; color: var(--txt); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.emo-pick-o:hover, .emo-pick-o:focus-visible { background: var(--bg); outline: none; }
.emo-pick-o.is-on { background: var(--pl); color: var(--p); }
.emo-pick-o .emo-ico { width: 20px; height: 20px; vertical-align: 0; }
.emo-pick-gap { width: 20px; flex: none; }
@keyframes emoPickIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes emoSheetIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.emo-pick--sheet { box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--c-blue-11) 38%, transparent), 0 14px 40px color-mix(in srgb, var(--c-blue-11) 25%, transparent); }

/* An icon stands where its emoji stood: a rule that hid a button's words (its spans) or shrank them to nothing, so that
   only the emoji showed, leaves the icon showing and at a size that can be seen. */
span.emo-ico { display: inline-block !important; min-width: 14px; min-height: 14px; }
#chatThreadModal .chat-safety > button .emo-ico { font-size: .95rem; }

/* A try-in out and back, on the laboratory's wall (lab-wall.js: tryInNote) and in the case's window (app.js: tryInRoundsHTML) */
.wall-tryin { margin-top: 6px; padding: 6px 10px; border-radius: var(--rad-10); background: color-mix(in srgb, var(--c-orange-50) 14%, transparent); color: var(--c-orange-50); font-weight: 800; font-size: .82rem; display: flex; flex-direction: column; gap: 2px; }
.wall-tryin small { color: inherit; opacity: .85; font-weight: 700; }
.lab-wall.wall-theme-day .wall-tryin { color: var(--c-orange-37); }
.tri-rounds { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tri-round { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; border-radius: var(--rad-10); background: var(--card); border: 1px solid var(--c-amber-77); font-size: .78rem; }
.tri-round b { color: var(--c-orange-37); font-weight: 900; }
.tri-step { color: var(--txt-m); }
.tri-step i { font-style: normal; color: var(--txt); font-weight: 700; }
.tri-note { flex-basis: 100%; color: var(--txt); font-weight: 700; background: var(--wl); padding: 6px 8px; border-radius: var(--rad-8); }

/* Each choice of our list in its own colour: the icon in a soft round of it, the words in the text's colour */
.emo-pick-o .emo-ico { color: var(--oc, var(--txt-m)) !important; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: color-mix(in srgb, var(--oc, var(--txt-m)) 13%, transparent); flex: none; }
.emo-pick-o .emo-ico svg { width: 20px; height: 20px; }
.emo-pick-gap { width: 34px; }
.emo-pick-o { padding: 8px 10px; }
.emo-pick-o.is-on { background: color-mix(in srgb, var(--oc, var(--p)) 10%, var(--card)); color: var(--txt); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--oc, var(--p)) 45%, transparent); }
/* The try-ins' box in amber, not stuck to the top beside the ready box, each row its words over its button */
.lab-wall .wall-ready.wall-tryins { position: static; background: var(--c-orange-9); border-color: var(--c-orange-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-orange-50) 16%, transparent); max-height: none; margin-top: 12px; }
.lab-wall .wall-tryins .wall-ready-head { color: var(--c-amber-65); }
.lab-wall .wall-tryins .wall-ready-head span { background: var(--c-orange-50); color: var(--c-orange-9); }
.lab-wall .wall-tryins .wall-ready-row { flex-direction: column; align-items: stretch; background: var(--c-orange-14); }
.lab-wall .wall-tryins .wall-ready-who { color: var(--c-amber-96); }
.lab-wall .wall-tryins .wall-ready-who span { color: var(--c-amber-77); }
.lab-wall .wall-tryins .wall-tryin-where { color: var(--c-amber-56) !important; }
.lab-wall .wall-tryins .wall-tryin-note { white-space: normal; color: var(--c-amber-89) !important; }
.lab-wall .wall-tryins .wall-ready-go { background: var(--c-orange-50); color: var(--c-orange-9); width: 100%; }
.lab-wall .wall-tryins .wall-ready-go:hover { background: var(--c-amber-56); }
.lab-wall.wall-theme-day .wall-ready.wall-tryins { background: var(--c-amber-96); }
.lab-wall.wall-theme-day .wall-tryins .wall-ready-row { background: var(--c-amber-89); }
.lab-wall.wall-theme-day .wall-tryins .wall-ready-who { color: var(--c-orange-14-2); }
.lab-wall.wall-theme-day .wall-tryins .wall-ready-who span, .lab-wall.wall-theme-day .wall-tryins .wall-tryin-note { color: var(--c-orange-26) !important; }
.lab-wall.wall-theme-day .wall-tryins .wall-ready-head { color: var(--c-orange-37); }
@media (max-width: 767px) { #labWall .wall-layout[data-pane="courier"] .wall-ready.wall-tryins { display: block !important; } }
#labWall .wall-tryins .wall-ready-row { flex-direction: column !important; align-items: stretch !important; }
#labWall .wall-tryins .wall-ready-who { flex: none !important; width: 100%; }
#labWall .wall-tryins .wall-ready-go { width: 100%; }

/* The cover behind our list: a press outside only closes it (emoji-icons.js: openPick) */
.emo-pick-back { position: fixed; inset: 0; z-index: 99999; background: transparent; touch-action: none; }
.emo-pick-back.is-dim { background: color-mix(in srgb, var(--c-blue-11) 38%, transparent); animation: emoPickIn .12s ease-out; }
.emo-pick--sheet { box-shadow: 0 14px 40px color-mix(in srgb, var(--c-blue-11) 25%, transparent); }

/* What is saved on the device and not yet at the server (app.js: syncPending) */
.dl-sync-pill { position: fixed; inset-inline-start: 50%; transform: translateX(50%) translateY(-120%); top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 99990; background: var(--c-amber-89); color: var(--c-orange-31); border: 1px solid var(--c-amber-65); border-radius: var(--rad-pill); padding: 6px 14px; font-size: .8rem; font-weight: 800; box-shadow: 0 6px 20px color-mix(in srgb, var(--c-blue-11) 15%, transparent); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s; }
html:not([dir="rtl"]) .dl-sync-pill { transform: translateX(-50%) translateY(-120%); }
.dl-sync-pill.is-on { opacity: 1; transform: translateX(50%) translateY(0); }
html:not([dir="rtl"]) .dl-sync-pill.is-on { transform: translateX(-50%) translateY(0); }

/* The developer's list of what broke on people's devices (client-errors.js) */
.dv-errs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 480px; overflow-y: auto; }
.dv-err { border: 1px solid var(--bdr); border-radius: var(--rad-10); padding: 8px 10px; background: var(--card); }
.dv-err-top { display: flex; gap: 10px; align-items: baseline; font-size: .8rem; }
.dv-err-top b { color: var(--d); }
.dv-err-top small { margin-inline-start: auto; color: var(--txt-m); }
.dv-err-msg { font-family: ui-monospace, monospace; font-size: .8rem; margin-top: 4px; word-break: break-word; }
.dv-err-meta { font-size: .7rem; color: var(--txt-m); margin-top: 3px; word-break: break-word; }
.dv-err-empty { text-align: center; color: var(--txt-m); padding: 14px; }

/* The page can be pinched larger (index.html's viewport no longer forbids it), for whoever reads small print. An
   iPhone zooms by itself into a box whose words are under 16px when it is pressed: its boxes are written at 16px. */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* A quick second tap on a button is two presses, not the page zooming in (the page itself can be pinched) */
button, a, [role="button"], .nav-btn, select, label { touch-action: manipulation; }

/* =============================================================================================================
   The front page, the sign-up and the e-mail check (#loginScreen.lx, #registerScreen, #verifyScreen), October
   2026: light and quiet, the program's blue and cyan, one family of line icons (Heroicons, the #fx-… sprite in
   index.html), the program drawn from inside (.fx-device, .fx-phone, .fx-float) and the landing photographs
   (src/images/landing, CC0). Always light, whatever the phone's own setting: the program's own colour names are
   set again inside these three screens, so every shared piece (fields, buttons, lists) is drawn light too.
   ============================================================================================================= */
#loginScreen.lx, #registerScreen, #verifyScreen {
  --fx-bg: var(--c-blue-98); --fx-ink: var(--c-blue-8); --fx-ink-2: #334155; --fx-mute: var(--c-blue-47);
  --fx-line: color-mix(in srgb, var(--c-blue-11) 8%, transparent); --fx-line-2: rgba(15, 23, 42, .14);
  --fx-blue: var(--c-blue-53); --fx-blue-d: var(--c-blue-48); --fx-green: var(--c-teal-30);
  --fx-grad: linear-gradient(135deg, var(--c-blue-48) 0%, var(--c-blue-53) 38%, var(--c-cyan-36) 78%, var(--c-cyan-43) 100%);
  --fx-shadow-s: 0 1px 2px color-mix(in srgb, var(--c-blue-11) 5%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--c-blue-11) 6%, transparent);
  --fx-shadow-m: 0 1px 2px color-mix(in srgb, var(--c-blue-11) 4%, transparent), 0 12px 28px -12px color-mix(in srgb, var(--c-blue-11) 20%, transparent);
  --fx-shadow-l: 0 2px 6px color-mix(in srgb, var(--c-blue-11) 4%, transparent), 0 30px 60px -24px color-mix(in srgb, var(--c-blue-33) 30%, transparent);
  --p: var(--c-blue-53); --ph: var(--c-blue-48); --pl: var(--c-blue-97-3); --bg: var(--c-blue-98); --card: var(--c-white); --txt: var(--c-blue-8); --txt-m: var(--c-blue-47); --bdr: var(--c-sky-91);
  --s: var(--c-teal-30); --sl: var(--c-green-90); --d: var(--c-red-51); --dl: var(--c-red-94); --w: var(--c-orange-44); --wl: var(--c-amber-89);
  --auth-card: var(--c-white);
  color-scheme: light;
}

/* ---- the icons, and their quiet tones ---- */
.fx-i { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 1.6; overflow: visible; }
html[dir="ltr"] .fx-fwd, html[dir="ltr"] .fx-bwd { transform: scaleX(-1); }
.fx-tone-blue { --tone: var(--c-blue-53); --tone-bg: var(--c-blue-96); } .fx-tone-teal { --tone: var(--c-teal-32); --tone-bg: var(--c-teal-93); }
.fx-tone-violet { --tone: var(--c-violet-58); --tone-bg: var(--c-violet-96-2); } .fx-tone-green { --tone: var(--c-teal-30); --tone-bg: var(--c-teal-93-2); }
.fx-tone-amber { --tone: var(--c-orange-44); --tone-bg: var(--c-orange-94-2); } .fx-tone-pink { --tone: var(--c-pink-51); --tone-bg: var(--c-pink-96); }
.fx-tone-sky { --tone: var(--c-sky-39); --tone-bg: var(--c-sky-94-2); } .fx-tone-indigo { --tone: var(--c-indigo-59); --tone-bg: var(--c-blue-96-3); }
.fx-tone-gold { --tone: var(--c-orange-37); --tone-bg: var(--c-orange-93-2); }
.lp-menu-ico, .lx-trust-ico, .fx-fc-ico, .lx-tile-ico, .lx-feat-ico, .lx-ch-ico, .lx-flow-ico {
  display: inline-grid; place-items: center; flex: none; color: var(--tone, var(--c-blue-53)); background: var(--tone-bg, var(--c-blue-96)); }

/* ---- the page ---- */
#loginScreen.lx { display: block; flex-direction: column !important; padding: 0 !important; background: var(--fx-bg) !important; color: var(--fx-ink);
  overflow-x: hidden; overflow-y: auto; align-items: stretch !important; justify-content: flex-start !important; }
#loginScreen.lx .lx-page { position: relative; display: block; flex: none; width: 100%; max-width: none; min-height: 100%; margin: 0; padding: 0; gap: 0; grid-template-columns: none; }
/* Above the backdrop by order alone, with no z-index of their own: a section with one would hold the chapters' page
   (.lx-reader, fixed, inside the chapters' section) under the top bar and under every section after it. */
#loginScreen.lx .lx-page > *:not(.lx-bg) { position: relative; }
.lx-bg { position: absolute !important; inset: 0 0 auto; height: 1180px; pointer-events: none; z-index: 0 !important; overflow: hidden; }
.lx-glow { position: absolute; inset: 0; background: radial-gradient(42% 48% at 22% 22%, color-mix(in srgb, var(--c-blue-53) 13%, transparent), transparent 70%), radial-gradient(36% 42% at 80% 6%, color-mix(in srgb, var(--c-cyan-43) 12%, transparent), transparent 70%), radial-gradient(30% 36% at 60% 70%, color-mix(in srgb, var(--c-violet-58) 6%, transparent), transparent 70%); }
.lx-grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--c-blue-11) 4.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-blue-11) 4.5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, var(--c-black) 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, var(--c-black) 25%, transparent 75%); }
.lx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---- the top bar ---- */
.lx-top { position: sticky !important; top: 0; z-index: 30 !important; background: color-mix(in srgb, var(--c-blue-98) 72%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.lx-top.is-stuck { background: color-mix(in srgb, var(--c-white) 86%, transparent); border-bottom-color: var(--fx-line); }
.lx-top-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; }
.lx-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fx-ink); flex: none; }
.lx-logo-img { width: 36px; height: 36px; border-radius: var(--rad-10); display: block; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c-blue-53) 65%, transparent); }
.lx-logo-img--sm { width: 30px; height: 30px; border-radius: var(--rad-9); }
.lx-word { font-family: 'Noto Sans', 'Noto Sans Arabic', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; direction: ltr; unicode-bidi: isolate; color: var(--fx-ink); }
.lx-word b { font-weight: 800; background: var(--fx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-navwrap { flex: 1; min-width: 0; display: flex; justify-content: center; }
#loginScreen.lx .lp-nav { margin: 0; }
#loginScreen.lx .lp-nav-list { display: flex; gap: 2px; flex-wrap: nowrap; background: none; border: 0; padding: 0; box-shadow: none; }
#loginScreen.lx .lp-nav-link { gap: 6px; color: var(--fx-ink-2); font-weight: 600; font-size: .92rem; padding: 8px 14px; border-radius: var(--rad-10); background: none; }
#loginScreen.lx .lp-nav-link:hover, #loginScreen.lx .lp-nav-link[aria-expanded="true"] { background: color-mix(in srgb, var(--c-blue-11) 5%, transparent); color: var(--fx-ink); }
#loginScreen.lx .lp-caret { width: 15px; height: 15px; opacity: .6; font-size: inherit; }
#loginScreen.lx .lp-nav-item--cta { display: none; }
#loginScreen.lx .lp-menu { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-16); padding: 8px; box-shadow: var(--fx-shadow-l); min-width: 270px; }
#loginScreen.lx .lp-menu-item { gap: 12px; color: var(--fx-ink); border-radius: var(--rad-10); font-size: .9rem; font-weight: 600; padding: 7px 8px; background: none; }
#loginScreen.lx .lp-menu-item:hover { background: var(--c-blue-97); color: var(--fx-ink); }
#loginScreen.lx .lp-menu-ico { width: 34px; height: 34px; border-radius: var(--rad-10); font-size: inherit; }
#loginScreen.lx .lp-menu-ico .fx-i { width: 18px; height: 18px; }
.lx-top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lx-lang { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: var(--rad-10); border: 1px solid var(--fx-line-2); background: color-mix(in srgb, var(--c-white) 85%, transparent); color: var(--fx-ink-2); cursor: pointer; }
.lx-lang:focus-within { border-color: var(--fx-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue-53) 15%, transparent); }
.lx-lang .fx-i { width: 18px; height: 18px; }
.lx-lang .lx-lang-caret { width: 14px; height: 14px; opacity: .55; }
.lx-lang select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: .86rem; font-weight: 700; color: var(--fx-ink); cursor: pointer; outline: none; padding: 0; }
.lx-link { display: inline-flex; align-items: center; height: 40px; background: none; border: 0; font: inherit; font-weight: 700; font-size: .92rem; color: var(--fx-ink); cursor: pointer; padding: 0 12px; border-radius: var(--rad-10); }
.lx-link:hover { background: color-mix(in srgb, var(--c-blue-11) 5%, transparent); }
#loginScreen.lx .mk-login-jump.lx-link { display: inline-flex !important; }
.lx-burger { display: none; width: 40px; height: 40px; border-radius: var(--rad-10); border: 1px solid var(--fx-line-2); background: var(--c-white); color: var(--fx-ink); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.lx-burger .fx-i { width: 22px; height: 22px; }
.lx-burger .lx-burger-close, .lx-burger[aria-expanded="true"] .lx-burger-open { display: none; }
.lx-burger[aria-expanded="true"] .lx-burger-close { display: inline-block; }
@media (max-width: 1023px) {
  .lx-burger { display: inline-flex; }
  .lx-top-inner { padding: 10px 16px; gap: 10px; }
  .lx-top-actions { margin-inline-start: auto; gap: 8px; }
  #loginScreen.lx .lx-top-actions .lx-btn { display: none; }
  .lx-navwrap { position: fixed; top: 66px; inset-inline: 12px; display: none; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-18); padding: 10px; box-shadow: var(--fx-shadow-l); max-height: calc(100vh - 90px); overflow-y: auto; }
  .lx-navwrap.is-open { display: block; animation: lxDrop .25s cubic-bezier(.2, .8, .2, 1); }
  #loginScreen.lx .lp-nav-list { flex-direction: column; align-items: stretch; }
  #loginScreen.lx .lp-nav-link { width: 100%; justify-content: space-between; padding: 12px; font-size: 1rem; }
  #loginScreen.lx .lp-menu { position: static; box-shadow: none; border: 0; background: var(--c-blue-98); margin: 4px 0 8px; min-width: 0; }
  #loginScreen.lx .lp-nav-item--cta { display: block; }
  #loginScreen.lx .lp-nav-link--cta { justify-content: center; background: var(--fx-grad); color: var(--c-white); margin-top: 6px; }
}
@keyframes lxDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  #loginScreen.lx .lx-top .lx-word { display: none; }
  .lx-lang { padding: 0 8px; gap: 4px; } .lx-lang select { max-width: 64px; font-size: .8rem; } .lx-lang .lx-lang-caret { display: none; }
  .lx-link { padding: 0 8px; font-size: .86rem; }
}

/* ---- buttons ---- */
#loginScreen.lx .lx-btn, #registerScreen .lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; height: auto; padding: 0 22px; border-radius: var(--rad-12);
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s, border-color .2s, color .2s; width: auto !important; margin: 0 !important; }
#loginScreen.lx .lx-btn .fx-i { width: 18px; height: 18px; transition: transform .25s ease; }
#loginScreen.lx .lx-btn:hover { transform: translateY(-1px); }
#loginScreen.lx .lx-btn:active { transform: translateY(1px); }
#loginScreen.lx .lx-btn:hover .fx-fwd { transform: translateX(-3px); }
html[dir="ltr"] #loginScreen.lx .lx-btn:hover .fx-fwd { transform: scaleX(-1) translateX(-3px); }
#loginScreen.lx .lx-btn--sm { min-height: 40px; padding: 0 16px; font-size: .88rem; border-radius: var(--rad-10); }
#loginScreen.lx .lx-btn--ink { background: var(--fx-grad) !important; color: var(--c-white) !important; border-color: transparent !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 22%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--c-blue-53) 70%, transparent) !important; }
#loginScreen.lx .lx-btn--ink:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 22%, transparent), 0 14px 30px -10px color-mix(in srgb, var(--c-blue-53) 80%, transparent) !important; }
#loginScreen.lx .lx-btn--line { background: var(--c-white) !important; color: var(--fx-ink) !important; border-color: var(--fx-line-2) !important; box-shadow: var(--fx-shadow-s) !important; }
#loginScreen.lx .lx-btn--line:hover { border-color: color-mix(in srgb, var(--c-blue-53) 45%, transparent) !important; color: var(--fx-blue-d) !important; }
#loginScreen.lx .lx-btn--app { background: var(--c-blue-8) !important; color: var(--c-white) !important; border-color: var(--c-blue-8) !important; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c-blue-8) 60%, transparent) !important; }
#loginScreen.lx .lx-btn--app:hover { background: var(--c-blue-17) !important; }
#loginScreen.lx .lx-btn--light, #loginScreen.lx .lx-btn--gold { background: var(--c-white) !important; color: var(--fx-ink) !important; border-color: var(--c-white) !important; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--c-black) 50%, transparent) !important; }
#loginScreen.lx .lx-btn--line-light { background: color-mix(in srgb, var(--c-white) 6%, transparent) !important; color: var(--c-white) !important; border-color: color-mix(in srgb, var(--c-white) 28%, transparent) !important; }
#loginScreen.lx .lx-btn--line-light:hover { background: color-mix(in srgb, var(--c-white) 12%, transparent) !important; }
#loginScreen.lx .lx-btn:focus-visible, #loginScreen.lx .lx-show-tab:focus-visible, #loginScreen.lx .lx-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--c-blue-53) 45%, transparent); outline-offset: 2px; }

/* ---- the front: the promise, and the way in ---- */
.lx-hero { position: relative; max-width: 1200px; margin: 0 auto; padding: 48px 24px 72px; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  grid-template-areas: "head side" "tail side"; column-gap: 56px; align-items: center; }
.lx-hero-head { grid-area: head; align-self: end; }
.lx-hero-tail { grid-area: tail; align-self: start; }
.lx-hero-side { grid-area: side; position: relative; display: grid; place-items: center; min-height: 660px; animation: lxRise .8s .08s cubic-bezier(.2, .8, .2, 1) both; }
.lx-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 14px 7px 12px; border-radius: var(--rad-pill); background: color-mix(in srgb, var(--c-white) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-blue-53) 16%, transparent); box-shadow: var(--fx-shadow-s); color: var(--fx-blue-d); font-size: .86rem; font-weight: 700; }
.lx-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal-39); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-teal-39) 18%, transparent); animation: fxPulse 2.4s ease-in-out infinite; }
@keyframes fxPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-teal-39) 5%, transparent); } }
#loginScreen.lx .lx-h1 { font-family: inherit; font-weight: 800; font-size: clamp(2.5rem, 4.5vw, 3.9rem); line-height: 1.2; letter-spacing: normal; color: var(--fx-ink); margin: 0 0 22px; max-width: none; }
html[dir="ltr"] #loginScreen.lx .lx-h1 { letter-spacing: -.035em; line-height: 1.06; font-size: clamp(2.3rem, 4vw, 3.5rem); }
#loginScreen.lx .lx-h1 span, #loginScreen.lx .lx-h1 em { display: block; }
#loginScreen.lx .lx-h1 em { font-style: normal; background: linear-gradient(90deg, var(--c-blue-48), var(--c-blue-53) 32%, var(--c-cyan-36) 68%, var(--c-teal-32)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
#loginScreen.lx .lx-lede { font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.95; color: var(--fx-ink-2); max-width: 560px; margin: 0 0 30px; }
.lx-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.lx-trust { list-style: none; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--fx-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; max-width: 580px; }
.lx-trust li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--fx-ink-2); }
.lx-trust-ico { width: 34px; height: 34px; border-radius: var(--rad-10); }
.lx-trust-ico .fx-i { width: 18px; height: 18px; }

/* the sign-in card, with what the program sends between the parties floating around it */
.lx-hero-side::before { content: ""; position: absolute; inset: 8% 4%; border-radius: var(--rad-48); pointer-events: none;
  background: radial-gradient(50% 50% at 30% 30%, color-mix(in srgb, var(--c-blue-53) 22%, transparent), transparent 70%), radial-gradient(50% 50% at 75% 70%, color-mix(in srgb, var(--c-cyan-43) 20%, transparent), transparent 70%), radial-gradient(40% 40% at 70% 20%, color-mix(in srgb, var(--c-violet-58) 12%, transparent), transparent 70%); }
#loginScreen.lx .lx-login { position: relative; z-index: 2; width: 100%; max-width: 420px !important; margin: 0 auto; text-align: start !important;
  background: color-mix(in srgb, var(--c-white) 94%, transparent) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--c-blue-11) 7%, transparent) !important; border-radius: var(--rad-24) !important; box-shadow: var(--fx-shadow-l) !important; padding: 30px 30px 20px !important; color: var(--fx-ink) !important; }
#loginScreen.lx .lx-login .auth-card-top { display: none; }
.lx-login-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 18px; border-radius: var(--rad-15); background: var(--c-white); box-shadow: var(--fx-shadow-m), 0 0 0 1px var(--fx-line); }
.lx-login-mark img { width: 38px; height: 38px; border-radius: var(--rad-10); display: block; }
#loginScreen.lx .lx-login .auth-heading { font-family: inherit; font-weight: 800; font-size: 1.6rem; color: var(--fx-ink); margin: 0 0 6px; letter-spacing: normal; }
#loginScreen.lx .lx-login .auth-sub { color: var(--fx-mute); font-size: .93rem; margin: 0 0 20px; }
#loginScreen.lx .auth-tabs, #registerScreen .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 6px; background: var(--c-blue-96-2); border: 1px solid var(--fx-line); border-radius: var(--rad-12); }
#loginScreen.lx .auth-tab, #registerScreen .auth-tab { text-align: center; padding: 9px 6px; border-radius: var(--rad-9); font-size: .88rem; font-weight: 700; color: var(--fx-mute); cursor: pointer; background: none; border: 0; box-shadow: none; }
#loginScreen.lx .auth-tab.active, #registerScreen .auth-tab.active { background: var(--c-white); color: var(--fx-ink); box-shadow: var(--fx-shadow-s); }
#loginScreen.lx .auth-label { color: var(--fx-ink-2); font-size: .85rem; font-weight: 700; margin: 16px 0 7px; }
#loginScreen.lx .auth-label-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
#loginScreen.lx .auth-label-row .auth-label { margin-bottom: 7px; }
#loginScreen.lx .link-btn, #registerScreen .link-btn, #verifyScreen .link-btn { color: var(--fx-blue-d); font-weight: 700; font-size: .84rem; }
#loginScreen.lx .auth-notice { border-radius: var(--rad-12); }
.lx-field { position: relative; }
.lx-field .lx-field-ico { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-blue-65); pointer-events: none; z-index: 1; transition: color .15s; }
html[dir="rtl"] .lx-field .lx-field-ico { right: 14px; } html[dir="ltr"] .lx-field .lx-field-ico { left: 14px; }
.lx-field:focus-within .lx-field-ico { color: var(--fx-blue); }
#loginScreen.lx .lx-field input, #registerScreen .lx-field input { height: 50px; }
html[dir="rtl"] .lx-field input { padding-right: 44px !important; } html[dir="ltr"] .lx-field input { padding-left: 44px !important; }
html[dir="rtl"] .auth-pw.lx-field input { padding-left: 50px !important; } html[dir="ltr"] .auth-pw.lx-field input { padding-right: 50px !important; }
#loginScreen.lx .auth-input, #registerScreen .search-input, #verifyScreen .search-input { background: var(--c-white) !important; border: 1px solid var(--fx-line-2) !important; color: var(--fx-ink) !important;
  border-radius: var(--rad-12) !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--c-blue-11) 4%, transparent); transition: border-color .15s, box-shadow .15s; font-size: 1rem; }
#loginScreen.lx .auth-input:focus, #registerScreen .search-input:focus { border-color: var(--fx-blue) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-blue-53) 14%, transparent) !important; }
#loginScreen.lx .auth-input::placeholder, #registerScreen .search-input::placeholder { color: var(--c-sky-70-2); }
#loginScreen.lx .auth-eye, #registerScreen .auth-eye { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--rad-10); display: grid; place-items: center;
  background: none; border: 0; color: var(--c-blue-47); cursor: pointer; padding: 0; font-size: inherit; }
html[dir="rtl"] #loginScreen.lx .auth-eye, html[dir="rtl"] #registerScreen .auth-eye { left: 5px; right: auto; }
html[dir="ltr"] #loginScreen.lx .auth-eye, html[dir="ltr"] #registerScreen .auth-eye { right: 5px; left: auto; }
#loginScreen.lx .auth-eye:hover, #registerScreen .auth-eye:hover { background: var(--c-blue-96-2); color: var(--fx-ink); }
.auth-eye .fx-i { width: 20px; height: 20px; }
.auth-eye .eye-hide, .auth-eye[aria-pressed="true"] .eye-show { display: none; }
.auth-eye[aria-pressed="true"] .eye-hide { display: inline-block; }
#loginScreen.lx .lx-login .auth-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 22px; border: 0; border-radius: var(--rad-12) !important;
  background: var(--fx-grad) !important; color: var(--c-white) !important; font-weight: 800; font-size: 1rem; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 22%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--c-blue-53) 75%, transparent) !important; }
#loginScreen.lx .lx-login .auth-submit .fx-i { width: 18px; height: 18px; transition: transform .2s; }
#loginScreen.lx .lx-login .auth-submit:hover .fx-fwd { transform: translateX(-3px); }
html[dir="ltr"] #loginScreen.lx .lx-login .auth-submit:hover .fx-fwd { transform: scaleX(-1) translateX(-3px); }
#loginScreen.lx .lx-login .auth-submit[disabled] { opacity: .75; cursor: progress; }
#loginScreen.lx #whPreviewLogin .fx-i { width: 18px; height: 18px; }
#loginScreen.lx .lx-login .auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fx-line); text-align: start; }
.lx-secure { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--fx-mute); }
.lx-secure .fx-i { width: 15px; height: 15px; color: var(--fx-green); }
#loginScreen.lx .lx-login .auth-foot .app-version-label { font-size: .72rem; color: var(--c-blue-65); font-weight: 600; }

.fx-float { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 10px; min-width: 214px; padding: 12px 14px; border-radius: var(--rad-16); pointer-events: none;
  background: color-mix(in srgb, var(--c-white) 95%, transparent); border: 1px solid color-mix(in srgb, var(--c-blue-11) 7%, transparent); box-shadow: var(--fx-shadow-l); color: var(--fx-ink); font-size: .82rem; animation: fxFloat 7s ease-in-out infinite; }
.fx-fc-row { display: flex; align-items: center; gap: 10px; }
.fx-fc-ico { width: 34px; height: 34px; border-radius: var(--rad-10); }
.fx-fc-ico .fx-i { width: 18px; height: 18px; }
.fx-fc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.fx-fc-t b { font-weight: 800; font-size: .84rem; white-space: nowrap; }
.fx-fc-t small { color: var(--fx-mute); font-size: .74rem; white-space: nowrap; }
.fx-fc-amt { margin-inline-start: auto; padding-inline-start: 12px; font-weight: 800; color: var(--fx-green); font-size: .98rem; white-space: nowrap; }
.fx-fc-teeth { display: flex; gap: 5px; }
.fx-fc-teeth i { font-style: normal; width: 32px; height: 28px; border-radius: var(--rad-8); display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--fx-mute); border: 1px solid var(--fx-line-2); background: var(--c-white); }
.fx-fc-teeth i.on { background: var(--c-teal-93); border-color: color-mix(in srgb, var(--c-teal-32) 45%, transparent); color: var(--c-cyan-26); }
.fx-fc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--fx-ink-2); font-weight: 600; }
.fx-fc-meta em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--fx-blue-d); background: var(--c-blue-96); padding: 3px 9px; border-radius: var(--rad-pill); white-space: nowrap; }
.fx-fc-bar { display: block; height: 6px; border-radius: var(--rad-pill); background: var(--c-blue-95); overflow: hidden; }
.fx-fc-bar u { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--fx-grad); text-decoration: none; }
.fx-float--order { top: 3%; inset-inline-end: -36px; }
/* The courier only where there is room beside the card for it, outside the card altogether. */
.fx-float--courier { display: none; top: 47%; inset-inline-end: -158px; animation-delay: -2.4s; }
@media (min-width: 1560px) { .fx-float--courier { display: flex; } }
.fx-float--pay { bottom: -1%; inset-inline-end: -44px; animation-delay: -4.6s; }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.fx-float--static { animation: none; }

/* ---- the front on a phone or a narrow screen: the promise, then the way in, then the rest ---- */
@media (max-width: 1023px) {
  .lx-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "tail"; row-gap: 26px; padding: 28px 16px 48px; }
  .lx-hero-side { min-height: 0; }
  .lx-hero-side::before { inset: -4% 0; }
  .fx-float { display: none; }
  #loginScreen.lx .lx-h1 { font-size: clamp(2.1rem, 8.6vw, 3.2rem); margin-bottom: 14px; }
  #loginScreen.lx .lx-lede { margin-bottom: 0; }
  .lx-badge { margin-bottom: 16px; font-size: .8rem; }
  .lx-trust { margin-top: 26px; }
}
@media (max-width: 520px) {
  #loginScreen.lx .lx-login { padding: 24px 18px 16px !important; border-radius: var(--rad-22) !important; }
  .lx-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lx-cta > :first-child { grid-column: 1 / -1; }
  #loginScreen.lx .lx-cta .lx-btn { padding: 8px 12px; min-width: 0; white-space: normal; text-align: center; line-height: 1.35; }
  .lx-trust { grid-template-columns: 1fr; }
  .lx-login-mark { width: 46px; height: 46px; margin-bottom: 14px; }
  #loginScreen.lx .lx-login .auth-heading { font-size: 1.4rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .lx-hero { column-gap: 36px; }
  .fx-float--order { inset-inline-end: -12px; } .fx-float--pay { inset-inline-end: -16px; }
}

/* ---- a look inside: what each side sees ---- */
.lx-show { position: relative; padding: 88px 0 96px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-white) 70%, transparent) 18%, var(--c-white) 60%, transparent); }
.lx-sec-head { max-width: 760px; margin: 0 0 40px; }
.lx-sec-head--center { margin-inline: auto; text-align: center; }
.lx-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 13px; border-radius: var(--rad-pill); background: var(--c-blue-96); color: var(--fx-blue-d); font-size: .82rem; font-weight: 800; }
.lx-kicker .fx-i { width: 16px; height: 16px; }
#loginScreen.lx .lx-h2 { font-family: inherit; font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.28; letter-spacing: normal; color: var(--fx-ink); margin: 0 0 14px; text-align: inherit; }
html[dir="ltr"] #loginScreen.lx .lx-h2 { letter-spacing: -.025em; line-height: 1.12; }
#loginScreen.lx .lx-sub { color: var(--fx-ink-2); font-size: 1.05rem; line-height: 1.95; margin: 0; }
.lx-show-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 40px; padding: 6px; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-16); box-shadow: var(--fx-shadow-s); }
.lx-show-tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--rad-11); border: 0; background: none; font: inherit; font-weight: 700; font-size: .93rem; color: var(--fx-mute); cursor: pointer; transition: background-color .2s, color .2s; }
.lx-show-tab .fx-i { width: 18px; height: 18px; }
.lx-show-tab:hover { color: var(--fx-ink); background: var(--c-blue-97); }
.lx-show-tab[aria-selected="true"] { background: var(--fx-ink); color: var(--c-white); }
.lx-show-panel { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 56px; align-items: center; }
.lx-show-panel[hidden] { display: none; }
.lx-show-panel.is-on .lx-show-copy, .lx-show-panel.is-on .lx-show-visual { animation: lxRise .55s cubic-bezier(.2, .8, .2, 1) both; }
.lx-show-panel.is-on .lx-show-visual { animation-delay: .06s; }
.lx-show-copy h3 { font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.35; margin: 0 0 12px; color: var(--fx-ink); }
.lx-show-copy p { color: var(--fx-ink-2); line-height: 1.95; margin: 0 0 20px; font-size: 1rem; }
.lx-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.lx-checks li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--fx-ink); font-size: .95rem; }
.lx-checks .fx-i { width: 22px; height: 22px; color: var(--fx-green); }
/* The phone stands at the outer edge, half outside the window beside it, so it hides little of it. */
.lx-show-visual { position: relative; padding-bottom: 44px; padding-inline-end: 112px; }
@media (min-width: 1280px) { .lx-show-visual .fx-phone { inset-inline-end: -40px; } }
@media (max-width: 1023px) {
  .lx-show { padding: 48px 0 64px; }
  .lx-show-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lx-show-visual { order: -1; }
}
@media (max-width: 640px) {
  .lx-show-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .lx-show-tab { justify-content: center; padding: 0 10px; }
  .lx-show-visual { padding-inline-end: 0; padding-bottom: 0; }
  .lx-show-visual .fx-phone { display: none; }
}

/* the program, drawn: a browser window and a phone */
.fx-device { position: relative; background: var(--c-white); border-radius: var(--rad-16); border: 1px solid var(--fx-line-2); box-shadow: var(--fx-shadow-l); overflow: hidden; font-size: 12px; line-height: 1.5; color: var(--fx-ink); }
.fx-device-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--c-blue-96-2); border-bottom: 1px solid var(--fx-line); direction: ltr; }
.fx-device-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-red-67); } .fx-device-bar > i:nth-child(2) { background: var(--c-amber-59); } .fx-device-bar > i:nth-child(3) { background: var(--c-green-47); }
.fx-url { margin-inline: auto; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 12px; border-radius: var(--rad-7); background: var(--c-white); border: 1px solid var(--fx-line); color: var(--fx-mute); font-size: 11px; font-weight: 600; }
.fx-url .fx-i { width: 11px; height: 11px; color: var(--fx-green); }
.fx-app { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 340px; }
.fx-app-side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: var(--c-blue-8); }
.fx-app-side img { width: 28px; height: 28px; border-radius: var(--rad-8); margin-bottom: 8px; }
.fx-app-side i { width: 34px; height: 34px; border-radius: var(--rad-10); display: grid; place-items: center; color: var(--c-blue-56); }
.fx-app-side i.on { background: color-mix(in srgb, var(--c-blue-60) 22%, transparent); color: var(--c-white); }
.fx-app-side .fx-i { width: 18px; height: 18px; }
.fx-app-main { padding: 14px 16px; background: var(--c-sky-98); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx-app-top { display: flex; align-items: center; gap: 8px; }
.fx-app-top b { font-size: 15px; font-weight: 800; margin-inline-end: auto; }
.fx-app-search { width: 30px; height: 30px; border-radius: var(--rad-9); background: var(--c-white); border: 1px solid var(--fx-line); display: grid; place-items: center; color: var(--fx-mute); }
.fx-app-search .fx-i { width: 15px; height: 15px; }
.fx-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--fx-grad); color: var(--c-white); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.fx-order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fx-arch { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 14px 12px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fx-arch-svg { width: 100%; max-width: 240px; color: var(--c-blue-65); display: block; }
.fx-teeth rect { fill: var(--c-white); stroke: var(--c-sky-84); stroke-width: 1.2; }
.fx-teeth rect.on { fill: var(--c-teal-87); stroke: var(--c-teal-32); }
.fx-arch-n { font-size: 10px; color: var(--fx-mute); font-weight: 700; letter-spacing: .02em; }
.fx-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-content: start; }
.fx-fld { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-10); padding: 7px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-fld small, .fx-files small { font-size: 9.5px; color: var(--fx-mute); font-weight: 700; }
.fx-fld b { font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-shade { width: 12px; height: 12px; border-radius: 4px; background: var(--c-amber-85); border: 1px solid var(--c-amber-72); display: inline-block; }
.fx-files { grid-column: 1 / -1; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-10); padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-files > span { display: flex; gap: 5px; }
.fx-thumb { width: 30px; height: 30px; border-radius: var(--rad-7); display: block; background: var(--c-sky-91) center / cover no-repeat; }
.fx-thumb--a { background-image: url("../images/landing/lab.webp"); } .fx-thumb--b { background-image: url("../images/landing/courier.webp"); }
.fx-stl { font-style: normal; height: 30px; padding: 0 9px; border-radius: var(--rad-7); background: var(--c-blue-96); color: var(--fx-blue-d); font-weight: 800; font-size: 10px; display: grid; place-items: center; }
.fx-send { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: var(--rad-10); background: var(--fx-grad); color: var(--c-white); font-weight: 800; font-size: 12px; }
.fx-send .fx-i { width: 14px; height: 14px; }
html[dir="rtl"] .fx-send .fx-i { transform: scaleX(-1); }
.fx-phone { position: absolute; bottom: 0; inset-inline-end: 0; z-index: 2; width: 196px; padding: 7px; border-radius: var(--rad-32); background: var(--c-blue-8); box-shadow: var(--fx-shadow-l), inset 0 0 0 1px color-mix(in srgb, var(--c-white) 8%, transparent); }
.fx-phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 58px; height: 17px; border-radius: var(--rad-pill); background: var(--c-black); z-index: 2; }
.fx-phone-screen { background: var(--c-sky-98); border-radius: var(--rad-26); padding: 38px 10px 14px; min-height: 318px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; line-height: 1.45; color: var(--fx-ink); overflow: hidden; }
.fx-ph-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 800; font-size: 13px; padding: 0 2px 4px; }
.fx-ph-head .fx-i { width: 18px; height: 18px; color: var(--fx-mute); }
.fx-note { display: flex; align-items: center; gap: 8px; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 8px; }
.fx-note .fx-fc-ico { width: 28px; height: 28px; border-radius: var(--rad-8); }
.fx-note .fx-fc-ico .fx-i { width: 15px; height: 15px; }
.fx-note > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.fx-note b { font-weight: 800; font-size: 11px; } .fx-note small { color: var(--fx-mute); font-size: 10px; }
.fx-note.is-new { border-color: color-mix(in srgb, var(--c-violet-58) 35%, transparent); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--c-violet-58) 60%, transparent); }
.fx-bubble { max-width: 86%; padding: 8px 11px; border-radius: var(--rad-14); background: var(--c-white); border: 1px solid var(--fx-line); align-self: flex-start; font-weight: 600; }
.fx-bubble.is-mine { align-self: flex-end; background: var(--c-blue-53); color: var(--c-white); border-color: transparent; }
.fx-bubble--photo { padding: 4px; } .fx-bubble--photo i { display: block; width: 128px; height: 84px; border-radius: var(--rad-10); background: var(--c-sky-91) url("../images/landing/lab.webp") center / cover no-repeat; }
.fx-bubble--file { display: flex; align-items: center; gap: 6px; } .fx-bubble--file .fx-i { width: 16px; height: 16px; }
/* the laboratory's wall */
.fx-device--dark { background: var(--c-blue-8); border-color: color-mix(in srgb, var(--c-white) 8%, transparent); }
.fx-device--dark .fx-device-bar { background: var(--c-blue-12-2); border-color: color-mix(in srgb, var(--c-white) 6%, transparent); }
.fx-device--dark .fx-url { background: var(--c-blue-8); border-color: color-mix(in srgb, var(--c-white) 8%, transparent); color: var(--c-blue-65); }
.fx-wall { padding: 14px; color: var(--c-sky-91); min-height: 340px; }
.fx-wall-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fx-wall-top b { font-size: 15px; font-weight: 800; color: var(--c-white); } .fx-wall-clock { font-weight: 800; color: var(--c-sky-60); font-size: 15px; }
.fx-wall-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fx-col { background: color-mix(in srgb, var(--c-white) 3.5%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 6%, transparent); border-radius: var(--rad-12); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-col h4 { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--c-sky-84); }
.fx-col h4 em { font-style: normal; margin-inline-start: auto; background: color-mix(in srgb, var(--c-white) 8%, transparent); padding: 0 7px; border-radius: var(--rad-pill); font-size: 10px; }
.fx-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .fx-dot--blue { background: var(--c-blue-60); } .fx-dot--amber { background: var(--c-orange-50); } .fx-dot--violet { background: var(--c-violet-66); } .fx-dot--green { background: var(--c-teal-39); }
.fx-case { background: var(--c-blue-13); border: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent); border-radius: var(--rad-10); padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-case b { font-size: 11px; font-weight: 800; color: var(--c-sky-96); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-case small { font-size: 10px; color: var(--c-blue-65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-case u { display: block; height: 3px; border-radius: var(--rad-pill); background: var(--c-blue-60); margin-top: 5px; text-decoration: none; }
.fx-case.is-star { box-shadow: inset 3px 0 0 var(--c-orange-50); } html[dir="rtl"] .fx-case.is-star { box-shadow: inset -3px 0 0 var(--c-orange-50); }
.fx-case.is-alert { border-color: color-mix(in srgb, var(--c-red-60) 45%, transparent); background: color-mix(in srgb, var(--c-red-60) 9%, transparent); } .fx-case.is-alert u { background: var(--c-red-60); } .fx-case.is-alert small { color: var(--c-red-82); }
.fx-case.is-ready u { background: var(--c-teal-39); }
/* the warehouse's shop */
.fx-shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; padding: 14px; background: var(--c-sky-98); min-height: 340px; }
.fx-shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-content: start; }
.fx-prod { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-pimg { display: block; height: 66px; border-radius: var(--rad-8); margin-bottom: 4px; background: var(--c-sky-96); position: relative; overflow: hidden; }
.fx-pimg::after { content: ""; position: absolute; }
.fx-pimg--a { background: linear-gradient(135deg, var(--c-sky-94), var(--c-sky-97)); } .fx-pimg--a::after { inset: 24px 18%; border-radius: var(--rad-9); background: linear-gradient(90deg, var(--c-sky-32), var(--c-sky-60) 70%, var(--c-sky-91) 70%); transform: rotate(-12deg); }
.fx-pimg--b { background: linear-gradient(135deg, var(--c-sky-98), var(--c-sky-95)); } .fx-pimg--b::after { inset: 8px calc(50% - 25px); border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--c-white) 0 30%, var(--c-blue-94) 60%, var(--c-sky-84) 100%); box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--c-blue-11) 40%, transparent); }
.fx-pimg--c { background: linear-gradient(135deg, var(--c-teal-96), var(--c-teal-97)); } .fx-pimg--c::after { inset: 10px calc(50% - 20px); border-radius: var(--rad-10) var(--rad-10) 6px 6px; background: linear-gradient(var(--c-teal-80), var(--c-teal-52)); box-shadow: inset 0 -14px 0 color-mix(in srgb, var(--c-white) 55%, transparent); }
.fx-pimg--d { background: linear-gradient(135deg, var(--c-amber-89), var(--c-amber-96)); } .fx-pimg--d::after { inset: 12px calc(50% - 11px) 8px; border-radius: 6px 6px var(--rad-8) var(--rad-8); background: linear-gradient(var(--c-orange-26), var(--c-orange-37)); box-shadow: 0 -6px 0 -2px var(--c-blue-17-2); }
.fx-prod b { font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.fx-rate { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; color: var(--c-orange-37); }
.fx-rate .fx-i { width: 12px; height: 12px; fill: var(--c-orange-50); stroke: var(--c-orange-50); }
.fx-prod em { font-style: normal; font-weight: 800; color: var(--fx-blue-d); font-size: 12px; text-align: start; }
.fx-cart { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 12px; display: flex; flex-direction: column; gap: 8px; align-self: start; min-width: 0; }
.fx-cart-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; } .fx-cart-h .fx-i { width: 16px; height: 16px; color: var(--fx-blue); }
.fx-cart-l { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--fx-ink-2); padding-bottom: 7px; border-bottom: 1px dashed var(--fx-line-2); }
.fx-cart-l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-cart-l b { color: var(--fx-ink); }
.fx-cart-l--off b { color: var(--fx-green); }
.fx-cart-t { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 13px; }
.fx-stop { display: flex; align-items: center; gap: 10px; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 8px 10px; }
.fx-stop > i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-sky-84); background: var(--c-white); flex: none; }
.fx-stop.is-done > i { background: var(--c-teal-39); border-color: var(--c-teal-39); }
.fx-stop.is-now { border-color: color-mix(in srgb, var(--c-blue-53) 35%, transparent); } .fx-stop.is-now > i { border-color: var(--c-blue-53); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-blue-53) 15%, transparent); }
.fx-stop > span { display: flex; flex-direction: column; min-width: 0; } .fx-stop b { font-size: 11px; font-weight: 800; } .fx-stop small { font-size: 10px; color: var(--fx-mute); }
.fx-target { margin-top: auto; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 11px; font-weight: 700; }
.fx-target .fx-fc-bar { grid-column: 1 / -1; } .fx-target .fx-fc-bar u { width: 67%; }
/* the accounts' statement */
.fx-stmt { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; padding: 14px; background: var(--c-sky-98); min-height: 340px; }
.fx-stmt-main { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-stmt-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .fx-stmt-h b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-pdf { font-style: normal; font-size: 10px; font-weight: 800; color: var(--c-white); background: var(--c-red-60); padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; }
.fx-stmt-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--fx-line-2); font-size: 11px; color: var(--fx-ink-2); }
.fx-stmt-l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-stmt-l b { font-weight: 800; color: var(--fx-ink); min-width: 38px; text-align: end; } .fx-stmt-l i { font-style: normal; color: var(--fx-mute); min-width: 34px; text-align: end; }
.fx-stmt-l.is-pay b { color: var(--fx-green); }
.fx-stmt-t { display: flex; justify-content: space-between; align-items: baseline; padding-top: 9px; } .fx-stmt-t span { color: var(--fx-mute); font-weight: 700; } .fx-stmt-t b { font-size: 18px; font-weight: 800; }
.fx-stmt-side { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-12); padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-stmt-side small { color: var(--fx-mute); font-weight: 700; font-size: 11px; } .fx-stmt-side b { font-size: 18px; font-weight: 800; }
.fx-bars { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 14px; }
.fx-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--c-blue-92); } .fx-bars i.on { background: var(--fx-grad); }
@media (max-width: 640px) {
  .fx-device { font-size: 11px; }
  .fx-app { grid-template-columns: 40px minmax(0, 1fr); min-height: 0; }
  .fx-app-side i { width: 28px; height: 28px; } .fx-app-side img { width: 24px; height: 24px; }
  .fx-app-main { padding: 10px; }
  .fx-order, .fx-shop, .fx-stmt { grid-template-columns: minmax(0, 1fr); }
  .fx-wall-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-wall, .fx-shop, .fx-stmt { min-height: 0; }
  .fx-bars { height: 70px; }
}

/* ---- the six chapters, as cards with a photograph ---- */
#loginScreen.lx .lx-chapters { max-width: 1200px; margin: 0 auto; padding: 88px 24px 24px; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--fx-ink); }
#loginScreen.lx .lx-chapters .lx-sec-head { margin-bottom: 36px; }
.lx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1023px) { .lx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #loginScreen.lx .lx-chapters { padding: 64px 16px 16px; } }
@media (max-width: 600px) { .lx-tiles { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.lx-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; text-align: start; font: inherit; color: var(--fx-ink); cursor: pointer; overflow: hidden;
  background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-20); padding: 0 0 20px; box-shadow: var(--fx-shadow-s); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.lx-tile:hover { transform: translateY(-4px); box-shadow: var(--fx-shadow-l); border-color: color-mix(in srgb, var(--c-blue-53) 22%, transparent); }
.lx-tile-media { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-sky-91); }
.lx-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.lx-tile:hover .lx-tile-media img { transform: scale(1.05); }
.lx-tile-ico { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: var(--rad-15); margin: -25px 20px 6px; box-shadow: 0 0 0 4px var(--c-white), var(--fx-shadow-m); }
.lx-tile-ico .fx-i { width: 24px; height: 24px; }
.lx-tile h3 { margin: 0 20px; font-weight: 800; font-size: 1.2rem; line-height: 1.45; color: var(--fx-ink); }
.lx-tile p { margin: 0 20px; color: var(--fx-mute); font-size: .93rem; line-height: 1.8; }
.lx-tile-go { margin: auto 20px 0; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 800; color: var(--fx-blue-d); }
.lx-tile-go .fx-i { width: 17px; height: 17px; transition: transform .25s; }
.lx-tile:hover .lx-tile-go .fx-fwd { transform: translateX(-4px); }
html[dir="ltr"] .lx-tile:hover .lx-tile-go .fx-fwd { transform: scaleX(-1) translateX(-4px); }
.lx-tile--noir { justify-content: flex-start; padding-top: 26px; color: var(--c-white); border-color: transparent;
  background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--c-blue-53) 60%, transparent), transparent 60%), radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--c-cyan-43) 40%, transparent), transparent 60%), var(--c-blue-8); }
.lx-tile--noir .lx-tile-ico { margin: 0 20px 10px; background: color-mix(in srgb, var(--c-white) 12%, transparent); color: var(--c-white); box-shadow: none; }
.lx-tile--noir h3 { color: var(--c-white); } .lx-tile--noir p { color: var(--c-sky-84); } .lx-tile--noir .lx-tile-go { color: var(--c-sky-74); }

/* ---- how it works ---- */
.lx-how { padding: 72px 0 88px; }
.lx-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1023px) { .lx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-how { padding: 56px 0 64px; } }
@media (max-width: 560px) { .lx-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.lx-flow li { position: relative; min-width: 0; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-20); padding: 22px; box-shadow: var(--fx-shadow-s); }
.lx-flow-ico { width: 52px; height: 52px; border-radius: var(--rad-16); margin-bottom: 16px; }
.lx-flow-ico .fx-i { width: 26px; height: 26px; }
.lx-flow-n { position: absolute; top: 22px; inset-inline-end: 22px; font-weight: 800; font-size: .9rem; color: var(--c-sky-84); }
.lx-flow h3 { margin: 0 0 8px; font-weight: 800; font-size: 1.12rem; color: var(--fx-ink); }
.lx-flow p { margin: 0; color: var(--fx-mute); line-height: 1.85; font-size: .93rem; }

/* ---- the line, set large, and the way in ---- */
.lx-band { position: relative; overflow: hidden; max-width: 1152px; margin: 0 auto; border-radius: var(--rad-28); padding: 64px 32px; text-align: center; color: var(--c-white);
  background: radial-gradient(70% 120% at 88% 0%, color-mix(in srgb, var(--c-cyan-43) 45%, transparent), transparent 60%), radial-gradient(70% 120% at 8% 100%, color-mix(in srgb, var(--c-blue-53) 65%, transparent), transparent 60%), var(--c-blue-8); }
@media (max-width: 1200px) { .lx-band { margin-inline: 16px; } }
@media (max-width: 600px) { .lx-band { padding: 44px 20px; border-radius: var(--rad-22); } }
.lx-band-tooth { position: absolute; width: 360px; height: 360px; inset-inline-end: -70px; top: 50%; transform: translateY(-50%) rotate(-12deg); fill: none; stroke: color-mix(in srgb, var(--c-white) 9%, transparent); stroke-width: .5; pointer-events: none; }
.lx-band-inner { position: relative; max-width: 760px; margin: 0 auto; }
.lx-band-quote { font-weight: 800; font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: 1.55; margin: 0 0 28px; }
.lx-band-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.lx-footer { max-width: 1200px; margin: 0 auto; padding: 44px 24px 34px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; color: var(--fx-mute); font-size: .86rem; }
.lx-footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.lx-footer .lx-word { font-size: 1.1rem; }
.lx-privacy-link { color: var(--fx-ink-2); font-weight: 700; text-decoration: none; }
.lx-privacy-link:hover { color: var(--fx-blue-d); text-decoration: underline; }
@media (max-width: 760px) { .lx-footer { flex-direction: column; text-align: center; padding: 36px 16px 30px; } }

/* ---- a chapter, as a page of its own ---- */
.lx-reader { position: fixed; inset: 0; z-index: 60; background: var(--fx-bg); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(16px); transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1); }
.lx-reader.is-open { opacity: 1; transform: none; }
.lx-reader[hidden] { display: none; }
.lx-reader-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: color-mix(in srgb, var(--c-blue-98) 86%, transparent);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--fx-line); }
.lx-back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--rad-10); border: 1px solid var(--fx-line-2); background: var(--c-white); font: inherit; font-weight: 700; font-size: .9rem; color: var(--fx-ink); cursor: pointer; }
.lx-back .fx-i { width: 18px; height: 18px; }
.lx-count { margin-inline-start: auto; font-weight: 800; font-size: .9rem; color: var(--fx-mute); }
.lx-pager { display: flex; gap: 6px; }
.lx-pager button { width: 40px; height: 40px; border-radius: var(--rad-10); border: 1px solid var(--fx-line-2); background: var(--c-white); color: var(--fx-ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.lx-pager button:hover, .lx-back:hover { border-color: color-mix(in srgb, var(--c-blue-53) 45%, transparent); color: var(--fx-blue-d); }
.lx-pager .fx-i { width: 18px; height: 18px; }
.lx-chapter { max-width: 1100px; margin: 0 auto; padding: 48px 24px 90px; }
@media (max-width: 760px) { .lx-chapter { padding: 28px 16px 70px; } .lx-reader-bar { padding: 10px 14px; } }
.lx-ch-head { max-width: none; margin-bottom: 40px; }
.lx-ch-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.lx-ch-ico { width: 50px; height: 50px; border-radius: var(--rad-15); }
.lx-ch-ico .fx-i { width: 25px; height: 25px; }
.lx-ch-n { display: inline; font-family: inherit; font-style: normal; font-weight: 800; font-size: .95rem; line-height: 1; color: var(--fx-mute); -webkit-text-stroke: 0; margin: 0; direction: ltr; }
.lx-ch-head h2 { font-family: inherit; font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.25; letter-spacing: normal; margin: 0 0 14px; color: var(--fx-ink); }
html[dir="ltr"] .lx-ch-head h2 { letter-spacing: -.03em; line-height: 1.1; }
.lx-ch-lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.95; color: var(--fx-ink-2); margin: 0; max-width: 820px; }
.lx-ch-photo { margin: 28px 0 0; border-radius: var(--rad-24); overflow: hidden; aspect-ratio: 21 / 8; background: var(--c-sky-91); box-shadow: var(--fx-shadow-m); }
.lx-ch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .lx-ch-photo { aspect-ratio: 16 / 10; border-radius: var(--rad-18); } }
.lx-chapter.is-in .lx-ch-head, .lx-chapter.is-in .lx-vignette, .lx-chapter.is-in .lx-features section, .lx-chapter.is-in .lx-roles, .lx-chapter.is-in .lx-list li { animation: lxRise .7s cubic-bezier(.2, .8, .2, 1) both; }
.lx-chapter.is-in .lx-vignette { animation-delay: .1s; }
.lx-chapter.is-in .lx-features section:nth-child(2), .lx-chapter.is-in .lx-list li:nth-child(2) { animation-delay: .14s; }
.lx-chapter.is-in .lx-features section:nth-child(3), .lx-chapter.is-in .lx-list li:nth-child(3) { animation-delay: .18s; }
.lx-chapter.is-in .lx-features section:nth-child(4), .lx-chapter.is-in .lx-list li:nth-child(4) { animation-delay: .22s; }
.lx-chapter.is-in .lx-features section:nth-child(5), .lx-chapter.is-in .lx-list li:nth-child(5) { animation-delay: .26s; }
.lx-chapter.is-in .lx-features section:nth-child(6), .lx-chapter.is-in .lx-list li:nth-child(6) { animation-delay: .3s; }
.lx-vignette { margin: 0 0 44px; padding: 36px; border-radius: var(--rad-24); background: linear-gradient(135deg, var(--c-white), var(--c-blue-97-2) 60%, var(--c-cyan-94)); border: 1px solid var(--fx-line);
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: center; box-shadow: var(--fx-shadow-s); position: relative; overflow: hidden; }
@media (max-width: 760px) { .lx-vignette { padding: 18px; border-radius: var(--rad-20); } }
.lx-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; }
@media (max-width: 900px) { .lx-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lx-features { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.lx-features section { min-width: 0; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-18); padding: 20px; box-shadow: var(--fx-shadow-s); }
.lx-feat-ico { width: 44px; height: 44px; border-radius: var(--rad-13); margin-bottom: 14px; }
.lx-feat-ico .fx-i { width: 22px; height: 22px; }
.lx-features h3 { font-family: inherit; font-weight: 800; font-size: 1.08rem; line-height: 1.5; margin: 0 0 8px; color: var(--fx-ink); display: block; }
.lx-features p { margin: 0; color: var(--fx-mute); font-size: .93rem; line-height: 1.9; }
.lx-ch-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.lx-h3 { font-family: inherit; font-weight: 800; font-size: 1.6rem; margin: 56px 0 20px; color: var(--fx-ink); }
/* the vignettes: the program, drawn */
.lxv-card { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-20); padding: 20px; min-width: 280px; max-width: 420px; flex: 1; box-shadow: var(--fx-shadow-m); display: flex; flex-direction: column; gap: 12px; position: relative; }
.lxv-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lxv-row b { font-weight: 800; font-size: 1.05rem; } .lxv-row em { font-style: normal; font-size: .78rem; color: var(--fx-mute); direction: ltr; }
.lxv-row--soft { font-size: .86rem; color: var(--fx-ink-2); }
.lxv-teeth { display: flex; gap: 8px; flex-wrap: wrap; }
.lxv-teeth i { font-style: normal; width: 42px; height: 38px; border-radius: var(--rad-11); display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--fx-mute); border: 1px solid var(--fx-line-2); background: var(--c-white); }
.lxv-teeth i.on { background: var(--c-teal-93); color: var(--c-cyan-26); border-color: color-mix(in srgb, var(--c-teal-32) 45%, transparent); }
.lxv-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.lxv-steps i { height: 5px; border-radius: var(--rad-pill); background: var(--c-blue-93); }
.lxv-steps i.done { background: var(--fx-blue); } .lxv-steps i.now { background: linear-gradient(90deg, var(--fx-blue), var(--c-blue-93)); }
.lxv-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 640px; }
@media (max-width: 560px) { .lxv-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lxv-tile { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-14); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-height: 96px; box-shadow: var(--fx-shadow-s); }
.lxv-tile b { font-size: .92rem; font-weight: 800; } .lxv-tile small { color: var(--fx-mute); font-size: .78rem; }
.lxv-tile u { margin-top: auto; display: block; height: 4px; border-radius: var(--rad-pill); background: var(--fx-blue); text-decoration: none; }
.lxv-tile--star { border-color: color-mix(in srgb, var(--c-orange-50) 50%, transparent); box-shadow: inset 0 3px 0 var(--c-orange-50), var(--fx-shadow-s); }
.lxv-tile--alert { background: var(--c-red-98); border-color: var(--c-red-89); } .lxv-tile--alert u { background: var(--c-red-60); }
.lxv-tile--ready { background: var(--c-blue-8); color: var(--c-white); border-color: var(--c-blue-8); } .lxv-tile--ready small { color: var(--c-teal-67); } .lxv-tile--ready u { background: var(--c-teal-39); }
.lxv-store { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.lxv-prod { width: 150px; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-16); padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--fx-shadow-s); }
.lxv-prod i { display: block; height: 96px; border-radius: var(--rad-11); background: var(--c-sky-96); position: relative; }
.lxv-prod i::after { content: ""; position: absolute; inset: 22% 34%; border-radius: var(--rad-10); }
.lxv-prod i.p1::after { background: linear-gradient(var(--c-sky-60), var(--c-sky-32)); } .lxv-prod i.p2::after { inset: 16% 24%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--c-white) 0 30%, var(--c-blue-94) 60%, var(--c-sky-84) 100%); } .lxv-prod i.p3::after { background: linear-gradient(var(--c-teal-80), var(--c-teal-39)); border-radius: var(--rad-14); }
.lxv-prod b { font-size: .85rem; direction: ltr; text-align: start; } .lxv-prod span { font-weight: 800; color: var(--c-orange-37); font-size: .85rem; direction: ltr; text-align: start; } .lxv-prod em { font-style: normal; font-size: .82rem; font-weight: 800; color: var(--fx-blue-d); direction: ltr; text-align: start; }
.lxv-target { max-width: 320px; }
.lxv-bar { height: 7px; border-radius: var(--rad-pill); background: var(--c-blue-93); overflow: hidden; }
.lxv-bar u { display: block; height: 100%; background: var(--fx-grad); text-decoration: none; }
.lxv-statement { max-width: 460px; }
.lxv-pdf { background: var(--c-red-60); color: var(--c-white) !important; padding: 2px 10px; border-radius: 6px; font-weight: 800; letter-spacing: .04em; }
.lxv-line { display: flex; justify-content: space-between; font-size: .9rem; padding: 8px 0; border-bottom: 1px dashed var(--fx-line-2); color: var(--fx-ink-2); }
.lxv-line b { direction: ltr; font-weight: 800; color: var(--fx-ink); } .lxv-line--pay b { color: var(--fx-green); }
.lxv-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; }
.lxv-total span { color: var(--fx-mute); font-weight: 700; } .lxv-total b { font-weight: 800; font-size: 1.6rem; color: var(--fx-ink); direction: ltr; }
/* chapter five: every role, with its photograph, and the four steps */
#loginScreen.lx .lx-roles { background: none; border: 0; padding: 0; margin: 0; }
#loginScreen.lx .lx-roles .lp-tabs { display: flex; flex-wrap: wrap; gap: 8px; background: none; border: 0; padding: 0; margin: 0 0 20px; }
#loginScreen.lx .lx-roles .lp-tab { height: 42px; padding: 0 16px; margin: 0; border: 1px solid var(--fx-line-2); background: var(--c-white); color: var(--fx-ink-2); border-radius: var(--rad-pill); font-weight: 700; font-size: .88rem; }
#loginScreen.lx .lx-roles .lp-tab:hover { border-color: color-mix(in srgb, var(--c-blue-53) 40%, transparent); color: var(--fx-blue-d); }
#loginScreen.lx .lx-roles .lp-tab[aria-selected="true"] { background: var(--fx-ink); color: var(--c-white); border-color: var(--fx-ink); }
#loginScreen.lx .lx-roles .lp-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-areas: "badge photo" "h photo" "lede photo" "points photo" "cta photo" ". photo";
  grid-template-rows: auto auto auto auto auto 1fr; column-gap: 32px; background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-24); padding: 28px; box-shadow: var(--fx-shadow-m); color: var(--fx-ink); }
#loginScreen.lx .lx-roles .lp-panel[hidden] { display: none; }
#loginScreen.lx .lx-roles .lp-photo { grid-area: photo; margin: 0; min-height: 300px; border-radius: var(--rad-18); overflow: hidden; background: var(--c-sky-91); }
#loginScreen.lx .lx-roles .lp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#loginScreen.lx .lx-roles .lp-soon-badge { grid-area: badge; justify-self: start; margin-bottom: 10px; }
#loginScreen.lx .lx-roles .mk-panel-h { grid-area: h; font-family: inherit; font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.4; color: var(--fx-ink); margin: 0 0 10px; max-width: none; }
#loginScreen.lx .lx-roles .lp-panel-lede { grid-area: lede; color: var(--fx-ink-2); line-height: 1.95; font-size: .98rem; margin: 0 0 6px; }
#loginScreen.lx .lx-roles .lp-points { grid-area: points; list-style: none; padding: 0; margin: 14px 0 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#loginScreen.lx .lx-roles .lp-points li { position: relative; padding-inline-start: 30px; line-height: 1.8; font-size: .94rem; color: var(--fx-ink-2); }
#loginScreen.lx .lx-roles .lp-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 20px; height: 20px; background: var(--c-teal-30);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
#loginScreen.lx .lx-roles .mk-panel-cta { grid-area: cta; justify-self: start; }
@media (max-width: 800px) {
  #loginScreen.lx .lx-roles .lp-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "badge" "h" "lede" "points" "cta"; grid-template-rows: none; padding: 16px; }
  #loginScreen.lx .lx-roles .lp-photo { min-height: 0; aspect-ratio: 16 / 9; margin-bottom: 18px; }
  #loginScreen.lx .lx-roles .lp-tab { height: 38px; padding: 0 13px; font-size: .84rem; }
}
#loginScreen.lx .lx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border: 0; margin: 0; }
@media (max-width: 900px) { #loginScreen.lx .lx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #loginScreen.lx .lx-steps { grid-template-columns: minmax(0, 1fr); } }
#loginScreen.lx .lx-steps .lp-step { background: var(--c-white); border: 1px solid var(--fx-line); border-radius: var(--rad-18); box-shadow: var(--fx-shadow-s); padding: 20px; color: var(--fx-ink); }
#loginScreen.lx .lx-steps .lp-step:target { border-color: var(--fx-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue-53) 15%, transparent); }
#loginScreen.lx .lx-steps .lp-step-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rad-12); margin: 0 0 12px; background: var(--c-blue-96); color: var(--fx-blue-d); font-family: inherit; font-style: normal; font-weight: 800; font-size: .95rem; box-shadow: none; }
#loginScreen.lx .lx-steps .lp-step-h { font-family: inherit; font-weight: 800; font-size: 1.08rem; color: var(--fx-ink); margin: 0 0 6px; }
#loginScreen.lx .lx-steps .lp-step p { color: var(--fx-mute); line-height: 1.85; margin: 0; font-size: .92rem; }
/* chapter six, in the dark */
.lx-reader.is-noir { background: var(--c-blue-8); }
.lx-reader.is-noir .lx-reader-bar { background: color-mix(in srgb, var(--c-blue-8) 86%, transparent); border-color: color-mix(in srgb, var(--c-white) 8%, transparent); }
.lx-reader.is-noir .lx-back, .lx-reader.is-noir .lx-pager button { color: var(--c-sky-91); background: color-mix(in srgb, var(--c-white) 4%, transparent); border-color: color-mix(in srgb, var(--c-white) 14%, transparent); }
.lx-reader.is-noir .lx-count, .lx-chapter--noir .lx-ch-n { color: var(--c-blue-65); }
.lx-chapter--noir { color: var(--c-sky-91); }
.lx-chapter--noir .lx-ch-head h2 { color: var(--c-white); }
.lx-chapter--noir .lx-ch-lede { color: var(--c-blue-65); }
.lx-chapter--noir .lx-ch-ico { background: color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-amber-77); }
#loginScreen.lx .lx-list { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; }
@media (max-width: 900px) { #loginScreen.lx .lx-list { grid-template-columns: minmax(0, 1fr); } }
#loginScreen.lx .lx-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--rad-16); background: color-mix(in srgb, var(--c-white) 4%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); color: var(--c-sky-84); line-height: 1.85; font-size: .94rem; }
#loginScreen.lx .lx-list .auth-tick { flex: none; color: var(--c-sky-60); background: none; width: auto; height: auto; font-size: inherit; }
#loginScreen.lx .lx-list .auth-tick .fx-i { width: 22px; height: 22px; }
#loginScreen.lx .lx-subscribe { background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue-53) 20%, transparent), color-mix(in srgb, var(--c-cyan-43) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--c-sky-60) 25%, transparent); border-radius: var(--rad-24); padding: 32px; color: var(--c-sky-91); text-align: start; }
@media (max-width: 600px) { #loginScreen.lx .lx-subscribe { padding: 22px; } }
#loginScreen.lx .lx-subscribe .auth-sub-title { font-family: inherit; font-weight: 800; font-size: 1.7rem; color: var(--c-white); margin: 0 0 10px; }
#loginScreen.lx .lx-subscribe .auth-subscribe-note { color: var(--c-blue-65); line-height: 1.9; }
#loginScreen.lx .lx-subscribe .lp-gateway-note { color: var(--c-blue-47); font-size: .82rem; background: none; border: 0; padding: 0; }
#loginScreen.lx .lx-subscribe .auth-contact { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
#loginScreen.lx .lx-subscribe .auth-contact-item { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--c-white) 5%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent); border-radius: var(--rad-16); color: var(--c-white); padding: 12px 16px; text-decoration: none; }
#loginScreen.lx .lx-subscribe .auth-contact-ico { width: 40px; height: 40px; border-radius: var(--rad-12); display: grid; place-items: center; background: color-mix(in srgb, var(--c-sky-60) 15%, transparent); color: var(--c-sky-60); font-size: inherit; }
#loginScreen.lx .lx-subscribe .auth-contact-ico .fx-i { width: 20px; height: 20px; }
#loginScreen.lx .lx-subscribe .auth-contact-label { color: var(--c-blue-65); } #loginScreen.lx .lx-subscribe .auth-contact-value { color: var(--c-white); }

/* ---- arriving ---- */
@keyframes lxRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#loginScreen.lx-anim .lx-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
#loginScreen.lx .lx-reveal { transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
#loginScreen.lx .lx-hero .lx-reveal { opacity: 1; transform: none; animation: lxRise .7s cubic-bezier(.2, .8, .2, 1) both; }
.lx-hero-head .lx-reveal:nth-child(2) { animation-delay: .06s; } .lx-hero-head .lx-reveal:nth-child(3) { animation-delay: .12s; }
.lx-hero-tail .lx-reveal:nth-child(1) { animation-delay: .18s; } .lx-hero-tail .lx-reveal:nth-child(2) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  #loginScreen.lx .lx-reveal, #loginScreen.lx-anim .lx-reveal:not(.is-in) { opacity: 1; transform: none; transition: none; }
  #loginScreen.lx .lx-hero .lx-reveal, .lx-hero-side, .fx-float, .lx-badge-dot, .lx-show-panel.is-on .lx-show-copy, .lx-show-panel.is-on .lx-show-visual, .lx-navwrap.is-open { animation: none !important; }
  .lx-reader { transition: none; }
  .lx-chapter.is-in * { animation: none !important; }
  .lx-tile, .lx-tile-media img { transition: none; }
}

/* ---- inside the installed app ---- */
html.capacitor-native #loginScreen.lx { padding-top: 0 !important; padding-bottom: 0 !important; }
html.capacitor-native #loginScreen.lx .lx-top { padding-top: var(--sat); }
html.capacitor-native .lx-navwrap { top: calc(66px + var(--sat)); }
html.capacitor-native .lx-reader-bar { padding-top: calc(12px + var(--sat)); }
html.capacitor-native .lx-footer { padding-bottom: calc(34px + var(--sab)); }

/* ---- the sign-up: what an account opens, beside the form ---- */
#registerScreen { align-items: flex-start !important; padding: 24px !important;
  background: radial-gradient(40% 50% at 88% 0%, color-mix(in srgb, var(--c-blue-53) 12%, transparent), transparent 70%), radial-gradient(36% 46% at 8% 100%, color-mix(in srgb, var(--c-cyan-43) 12%, transparent), transparent 70%), var(--c-blue-98) !important; }
html.capacitor-native #registerScreen { padding-top: calc(14px + var(--sat)) !important; padding-bottom: calc(14px + var(--sab)) !important; }
.reg-shell { width: 100%; max-width: 1080px; margin: auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; align-items: stretch; }
.reg-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 560px; border-radius: var(--rad-28); padding: 40px 36px 32px; color: var(--c-white);
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--c-cyan-43) 50%, transparent), transparent 60%), radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--c-blue-53) 70%, transparent), transparent 60%), var(--c-blue-8); }
.reg-brand-logo { display: inline-flex; align-items: center; gap: 10px; }
.reg-brand-logo img { width: 40px; height: 40px; border-radius: var(--rad-11); display: block; }
.reg-brand .lx-word { color: var(--c-white); }
.reg-brand .lx-word b { background: linear-gradient(135deg, var(--c-sky-74), var(--c-cyan-69)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reg-brand h2 { margin: 18px 0 0; font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.35; color: var(--c-white); }
.reg-brand > p { margin: 0; color: var(--c-sky-84); line-height: 1.9; font-size: 1rem; }
.reg-points { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.reg-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--c-sky-91); }
.reg-pt-ico { width: 38px; height: 38px; border-radius: var(--rad-11); display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-sky-74); }
.reg-pt-ico .fx-i { width: 20px; height: 20px; }
.reg-art { position: relative; margin-top: auto; min-height: 176px; }
.reg-art .fx-float { position: absolute; }
.reg-art .fx-float--order { top: 0; bottom: auto; inset-inline-start: 0; inset-inline-end: auto; }
.reg-art .fx-float--pay { top: auto; bottom: 0; inset-inline-start: auto; inset-inline-end: 0; }
#registerScreen .register-box.auth-card { max-width: none !important; width: 100%; margin: 0; border-radius: var(--rad-28) !important; border: 1px solid var(--fx-line) !important; box-shadow: var(--fx-shadow-l) !important;
  padding: 32px !important; color: var(--fx-ink); background: var(--c-white) !important; text-align: start !important; }
#registerScreen .register-box .auth-card-top { display: none; }
.reg-title { margin: 0 0 18px; font-weight: 800; font-size: 1.55rem; color: var(--fx-ink); text-align: start; }
#registerScreen .form-group label { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--fx-ink-2); margin-bottom: 7px; }
#registerScreen .form-group label .fx-i { width: 16px; height: 16px; }
#registerScreen select.search-input, #registerScreen input.search-input { height: 50px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.reg-callout { padding: 14px; border-radius: var(--rad-14); }
.reg-callout--amber { background: var(--c-amber-96); border: 1px solid var(--c-amber-77); } #registerScreen .reg-callout--amber label { color: var(--c-orange-37); }
.reg-callout--blue { background: var(--c-sky-97-2); border: 1px solid var(--c-sky-87); } #registerScreen .reg-callout--blue label { color: var(--c-blue-48); }
.reg-note { font-size: .78rem; color: var(--c-blue-48); margin: 8px 0 0; line-height: 1.7; }
#registerScreen .reg-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 14px; border: 0; border-radius: var(--rad-12) !important;
  background: var(--fx-grad) !important; color: var(--c-white) !important; font-weight: 800; font-size: 1rem; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 22%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--c-blue-53) 75%, transparent) !important; }
#registerScreen .reg-submit .fx-i { width: 18px; height: 18px; }
.reg-switch { text-align: center; margin: 14px 0 0; color: var(--fx-mute); font-size: .9rem; }
.reg-switch .link-btn { font-size: .9rem; }
@media (max-width: 900px) {
  #registerScreen { padding: 16px !important; }
  .reg-shell { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .reg-brand { display: none; }
  #registerScreen .register-box .auth-card-top { display: flex; justify-content: center; margin-bottom: 10px; }
  #registerScreen .register-box.auth-card { padding: 24px 18px !important; border-radius: var(--rad-22) !important; }
  .reg-title { text-align: center; }
}

/* ---- the e-mail check ---- */
#verifyScreen { background: radial-gradient(40% 50% at 88% 0%, color-mix(in srgb, var(--c-blue-53) 12%, transparent), transparent 70%), radial-gradient(36% 46% at 8% 100%, color-mix(in srgb, var(--c-cyan-43) 12%, transparent), transparent 70%), var(--c-blue-98) !important; }
#verifyScreen .verify-card { max-width: 440px; margin: auto; border-radius: var(--rad-28) !important; border: 1px solid var(--fx-line) !important; box-shadow: var(--fx-shadow-l) !important; background: var(--c-white) !important; color: var(--fx-ink); }
#verifyScreen .auth-heading { color: var(--fx-ink); font-weight: 800; }
#verifyScreen .auth-sub { color: var(--fx-mute); }
#verifyScreen .verify-ico { width: 76px; height: 76px; border-radius: var(--rad-24); background: linear-gradient(135deg, var(--c-blue-96), var(--c-cyan-93-2)); color: var(--fx-blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-blue-53) 15%, transparent); }
#verifyScreen .verify-ico .fx-i { width: 36px; height: 36px; }
#verifyScreen .verify-email { color: var(--fx-blue-d); }
#verifyScreen .auth-submit { width: 100%; background: var(--fx-grad) !important; border-radius: var(--rad-12) !important; }
.verify-resend { width: 100%; margin-top: 10px; gap: 6px; border-radius: var(--rad-12) !important; }
.verify-resend .fx-i { width: 18px; height: 18px; }
.verify-out { text-align: center; margin-top: 8px; }
#verifyScreen .verify-card .auth-card-top { justify-content: center; gap: 10px; margin-bottom: 14px; }
#verifyScreen .verify-card .brand-word--card { flex: none; margin: 0; visibility: visible; color: var(--fx-ink); }

/* The assistant thinking (ai-assistant.js: ask, answered by Claude): three dots, while the server works. */
.ai-thinking { display: inline-flex; gap: 6px; padding: 6px 2px; }
.ai-thinking i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-violet-58); opacity: .3; animation: aiDot 1.1s ease-in-out infinite; }
.ai-thinking i:nth-child(2) { animation-delay: .15s; } .ai-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-thinking i { animation: none; opacity: .7; } }

/* "Remember me" on the sign-in form (remember.js). */
.auth-remember { display: flex; align-items: center; gap: 10px; margin: 4px 2px 14px; font-size: .92rem; font-weight: 700; color: var(--txt-m); cursor: pointer; user-select: none; }
.auth-remember input { width: 20px; height: 20px; margin: 0; accent-color: var(--p); cursor: pointer; flex: none; }

/* A list to choose from inside a window, in the installed app (select-sheet.js): above everything. */
.sel-sheet { position: fixed; inset: 0; z-index: 2147483100; background: color-mix(in srgb, var(--c-blue-11) 55%, transparent); display: flex; align-items: flex-end; justify-content: center; }
.sel-sheet-box { width: 100%; max-width: 600px; max-height: 70vh; display: flex; flex-direction: column; background: linear-gradient(var(--card), var(--card)), var(--bg); color: var(--txt); border-radius: var(--rad-24) var(--rad-24) 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 50px -20px color-mix(in srgb, var(--c-blue-11) 50%, transparent); }
.sel-sheet-title { font-weight: 900; font-size: 1rem; color: var(--p); padding: 6px 8px 10px; border-bottom: 1px solid var(--bdr); margin-bottom: 6px; }
.sel-sheet-list { overflow-y: auto; overscroll-behavior: contain; }
.sel-sheet-group { font-size: .8rem; font-weight: 800; color: var(--txt-m); padding: 12px 10px 4px; }
.sel-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 12px 14px; border: none; border-radius: var(--rad-14); background: none; color: inherit; font: inherit; font-size: 1rem; font-weight: 700; text-align: start; cursor: pointer; }
.sel-sheet-row:active { background: var(--bg); }
.sel-sheet-row.is-on { background: var(--pl); color: var(--p); }
.sel-sheet-row[disabled] { opacity: .45; }

/* The products screen's two shelf lists take a row of their own, above the order and the warehouse. */
.pc-tools select.pc-shelf { flex: 1 1 45%; }
.pc-tools select.pc-shelf:disabled { opacity: .55; }
.pc-cats:empty { display: none; }

/* The page's own calendar, month and colour pickers in the installed app (select-sheet.js). */
.sel-sheet-box--cal, .sel-sheet-box--colour { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.sel-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 10px; }
.sel-cal-head b { font-size: 1.05rem; font-weight: 900; }
.sel-nav { width: 44px; height: 44px; border-radius: var(--rad-14); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sel-cal-week, .sel-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sel-cal-week span { text-align: center; font-size: .78rem; font-weight: 800; color: var(--txt-m); padding: 4px 0; }
.sel-day { height: 44px; border: none; border-radius: var(--rad-12); background: none; color: var(--txt); font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; }
.sel-day:active { background: var(--bg); }
.sel-day.is-today { box-shadow: inset 0 0 0 2px var(--p); }
.sel-day.is-on { background: var(--p); color: var(--c-white); }
.sel-day[disabled] { opacity: .3; }
.sel-cal-grid--months { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sel-month { height: 52px; border: 1px solid var(--bdr); font-size: .95rem; }
.sel-cal-foot { display: flex; gap: 8px; margin-top: 12px; }
.sel-act { flex: 1; min-height: 46px; border-radius: var(--rad-14); border: 1px solid var(--p); background: var(--pl); color: var(--p); font: inherit; font-weight: 900; cursor: pointer; }
.sel-act--muted { border-color: var(--bdr); background: var(--bg); color: var(--txt-m); }
.sel-colours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 4px 2px 12px; }
.sel-colour { aspect-ratio: 1; border-radius: var(--rad-14); border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-blue-11) 10%, transparent) inset; }
.sel-colour.is-on { border-color: var(--txt); }
.sel-colour-hex { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 800; color: var(--txt-m); }
.sel-colour-hex input { flex: 1; min-width: 0; height: 46px; border-radius: var(--rad-12); border: 1px solid var(--bdr); background: var(--bg); color: var(--txt); padding: 0 12px; font: inherit; }
.sel-colour-hex .sel-act { flex: none; padding: 0 18px; }
/* On a wide screen the page's picker sits in the middle, a card rather than a sheet from the bottom. */
@media (min-width: 700px) {
  .sel-sheet { align-items: center; }
  .sel-sheet-box { max-width: 460px; border-radius: var(--rad-22); max-height: 80vh; }
}
/* The icon list (emoji-icons.js) and its cover above every window, as every picker is: under a window it was a list
   chosen from behind it. */
.emo-pick { z-index: 2147483090; }
.emo-pick-back { z-index: 2147483080; }

/* A business account waiting to be verified (app.js: showVerificationPending), and the developer's list of them. */
.verify-pending-card { text-align: center; }
.verify-pending-card p { margin: 6px 0 4px; line-height: 1.7; color: var(--txt-m); font-weight: 600; }
.verify-pending-ico { font-size: 2.4rem; line-height: 1; }
.verify-pending-actions { display: flex; flex-direction: column; gap: 8px; }
.verify-pending-actions > * { width: 100%; margin: 0; text-align: center; text-decoration: none; display: block; box-sizing: border-box; }
.verify-req { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-14); padding: 14px; margin-bottom: 10px; }
.verify-req-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.verify-req-head span { font-size: .8rem; color: var(--txt-m); font-weight: 700; }
.verify-req-lic { margin-top: 6px; font-weight: 800; }
.verify-req-meta { margin-top: 4px; font-size: .8rem; color: var(--txt-m); overflow-wrap: anywhere; }
.verify-req-acts { display: flex; gap: 8px; margin-top: 10px; }
.verify-req-acts > button { flex: 1; margin: 0; }

/* Reporting a product (products.js): quiet, under what can be done with it. */
.pc-report { display: block; margin: 14px auto 0; padding: 8px 12px; border: none; background: none; color: var(--txt-m); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Report and block (app.js: safetySheet): reasons to tap, a note, and the other side's name kept out of it. */
.safety-sheet .ask-date-card { max-width: 400px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.safety-lead { margin: 0; font-weight: 800; color: var(--txt); font-size: .92rem; }
.safety-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.safety-reason { position: relative; display: flex; }
.safety-reason input { position: absolute; opacity: 0; pointer-events: none; }
.safety-reason span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 8px 10px; border: 1.5px solid var(--bdr); border-radius: var(--rad-14); background: var(--bg); color: var(--txt); font-weight: 800; font-size: .86rem; cursor: pointer; line-height: 1.3; }
.safety-reason input:checked + span { border-color: var(--d); background: color-mix(in srgb, var(--d) 10%, var(--card)); color: var(--d); }
.safety-reason input:focus-visible + span { outline: 2px solid var(--p); outline-offset: 2px; }
.safety-note { min-height: 64px; resize: vertical; font-size: .95rem !important; }
.safety-also { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .88rem; cursor: pointer; }
.safety-also input { width: 20px; height: 20px; accent-color: var(--d); }
.safety-small { margin: 0; color: var(--txt-m); font-size: .78rem; text-align: center; }
.safety-quote { margin: 0; padding: 8px 12px; border-inline-start: 3px solid var(--d); border-radius: var(--rad-8); background: var(--bg); color: var(--txt-m); font-size: .86rem; max-height: 4.6em; overflow: hidden; }
.safety-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--txt); font-size: .9rem; line-height: 1.5; }
.ask-date-actions button:disabled { opacity: .45; cursor: not-allowed; }
.chat-react-bar .chat-react-flag { border-inline-start: 1px solid var(--bdr); margin-inline-start: 2px; padding-inline-start: 8px; opacity: .8; }
.safety-sheet .ask-date-card:focus { outline: none; }

/* A window and its sticky header are solid: the card colour (92% opaque, for the glass look) laid over the page's own
   solid colour, so nothing scrolled under the header -- or behind the window -- shows through. */
.modal-content { background: linear-gradient(var(--card), var(--card)), var(--bg); }
.modal-top-header { background: linear-gradient(var(--card), var(--card)), var(--bg); }

/* The seats above the open invitations (sponsor.js): apart from the button above, and each figure on one line. */
#spInvRoom .sp-room { margin: 14px 0 4px; }
.sp-room b { white-space: nowrap; display: inline-block; }
#spInvRoom .sp-room span { display: flex; flex-direction: column; gap: 2px; }
#spInvRoom .sp-room b { font-size: 1.05rem; }
#spInvRoom .sp-room b { direction: ltr; unicode-bidi: isolate; align-self: flex-start; }

/* A statement on a phone: the date's own column gives way to the figures, and is written under each line's name
   (statement.js: dayIn). A computer, the PDF and the print keep the column. */
.st-day-in { display: none; }
@media (max-width: 600px) {
  .st-table .st-day:not(.st-pdf *) { display: none; }
  .st-table .st-day-in:not(.st-pdf *) { display: block; color: var(--txt-m); font-size: .68rem; font-weight: 700; margin-top: 1px; }
  .st-table .st-num { white-space: nowrap; }
}

/* Date fields: figures read left to right in every language (an RTL field cut "01/10/2026" to "/2026" in a statement),
   still at the reading side of the field; an empty one shows only its calendar, since the browser draws its Arabic
   placeholder letters reversed ("قنس/رهش/موي"). The day itself is written out under the field (app.js: paintDateHints). */
input[type="date"] { direction: ltr; }
[dir="rtl"] input[type="date"] { text-align: right; }
input[type="date"].is-empty::-webkit-datetime-edit { color: transparent; }
.st-date { flex-wrap: wrap; }
.st-date .date-read { flex-basis: 100%; }

/* The iPhone app draws the page under the clock ("cover"); Android's starts below it (diag.js: android-app). A window
   90% of the screen tall therefore left a strip of the page above it on Android, and almost none on an iPhone, where
   it read as a page of its own. On an iPhone the window gives up the clock's height, so the same strip shows. */
html.capacitor-native:not(.android-app) .modal-content { max-height: calc(90vh - var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }

/* The App Store badge beside the Android download: black, Apple's logo, "Download on the / App Store". In the
   installed app there is nothing to download, and an Android phone's browser is offered the Android file only. */
#loginScreen.lx .lx-btn--store { display: inline-flex; align-items: center; gap: 9px; background: var(--c-black) !important; color: var(--c-white) !important; border: 1px solid var(--c-grey-65-2) !important; border-radius: var(--rad-12); padding: 7px 16px; text-decoration: none; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c-black) 60%, transparent); }
#loginScreen.lx .lx-btn--store:hover { background: var(--c-grey-11) !important; }
.lx-store-logo { width: 24px; height: 24px; flex: none; margin-top: -2px; }
.lx-store-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: start; }
.lx-store-txt small { font-size: .68rem; font-weight: 500; opacity: .92; }
.lx-store-txt b { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; }
html.capacitor-native .lx-btn--store, html.is-android-web .lx-btn--store { display: none !important; }
@media (max-width: 640px) { #loginScreen.lx .lx-cta .lx-btn--store { justify-content: center; padding: 6px 12px; } }
/* The Google Play badge (the app is on the store since 2026-10-21, in place of the .apk file, which the store's
   signature would refuse to update): the same black badge; on a computer and an Android phone, not on an iPhone or in the app. */
html.is-android-web .lx-btn--play { display: inline-flex !important; }
html.capacitor-native .lx-btn--play, html.is-ios-web .lx-btn--play { display: none !important; }

/* Inside the installed app, on the home screen: the same account on a computer (desktop-hint.js). */
.desk-hint { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rad-16); padding: 10px 12px; margin-bottom: 12px; }
.desk-hint-ico { font-size: 1.4rem; flex: none; }
.desk-hint-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.desk-hint-txt b { font-size: .84rem; font-weight: 600; color: var(--txt-m, var(--c-blue-47)); }
.desk-hint-txt small { font-size: .9rem; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-hint-copy { flex: none; border: 0; border-radius: var(--rad-10); padding: 8px 12px; font: inherit; font-size: .82rem; font-weight: 700; background: var(--primary, var(--c-blue-53)); color: var(--c-white); cursor: pointer; }
.desk-hint-x { flex: none; border: 0; background: transparent; color: var(--txt-m, var(--c-blue-47)); font-size: 1.3rem; line-height: 1; padding: 4px 6px; cursor: pointer; }

/* An iPhone draws a date field's value as one string in the phone's own format, with right-to-left marks between its
   numbers when the phone is in Arabic: read left to right, "19/10/2026" came out "192026/10/". Its characters are laid out
   in the order written (bidi-override), so it reads as the phone wrote it, in any language. And its date field has a
   width of its own, wider than a narrow window, so it ran past the window's edge: it takes the width it is given. */
html.is-ios-web input[type="date"], html.capacitor-native:not(.android-app) input[type="date"] { direction: ltr !important; unicode-bidi: bidi-override; -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; box-sizing: border-box; display: block; width: 100%; }
html.is-ios-web input[type="date"]::-webkit-date-and-time-value, html.capacitor-native:not(.android-app) input[type="date"]::-webkit-date-and-time-value { direction: ltr; unicode-bidi: bidi-override; min-height: 1.4em; }

/* Finance: the fixed-assets register (finance-core.js: viewAssets), its book value at the reading end of each row. */
.fin-asset-f{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:.76rem;color:var(--txt-m);flex:none}.fin-asset-f b{font-size:1.05rem;color:var(--txt)}
/* Finance: an amount and its currency side by side; the rate's sum in the business's currency beside it. */
.fin-amt{display:flex;gap:6px}.fin-amt input{flex:1;min-width:0}.fin-amt select{flex:0 0 78px;padding-inline:8px}
.fin-fx-sum{font-weight:800;color:var(--txt);padding:12px 2px;direction:ltr;text-align:start}
/* Finance: reconciling a bank account with its statement (finance-core.js: openRecon). */
.fin-rc-btn{display:inline-block;margin-top:6px;border:1px solid var(--bdr);background:var(--card);color:var(--txt);border-radius:var(--rad-pill);padding:5px 12px;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer}
.fin-rc-sum{display:grid;gap:6px;margin:12px 0;padding:12px;border-radius:var(--rad-14);background:var(--bg);border:1px solid var(--bdr)}
.fin-rc-sum>div{display:flex;justify-content:space-between;gap:10px;font-size:.86rem}.fin-rc-sum>div span{color:var(--txt-m)}
.fin-rc-sum>div.ok b{color:var(--s)}.fin-rc-sum>div.bad b{color:var(--d)}
.fin-rc-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}.fin-rc-tools b{flex:1;font-size:.88rem}
.fin-rc-list{max-height:46vh;overflow:auto;border:1px solid var(--bdr);border-radius:var(--rad-12)}
.fin-rc-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--bdr);cursor:pointer;margin:0}.fin-rc-row:last-child{border-bottom:0}
.fin-rc-row input{width:20px;height:20px;flex:none}.fin-rc-row span{flex:1;min-width:0;display:flex;flex-direction:column}.fin-rc-row small{color:var(--txt-m);font-size:.74rem}
.fin-rc-row b.pos{color:var(--s)}.fin-rc-row b.neg{color:var(--d)}
/* Finance: the accountant's export (finance-core.js: viewExport) and the account codes under Settings. */
.fin-exp-btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.fin-exp-btns button{width:auto;margin:0;padding:12px 18px}
.fin-exp-list{margin:6px 0 0;padding-inline-start:20px;color:var(--txt-m);font-size:.86rem;line-height:1.7}
.fin-chart-g{display:block;margin:14px 0 6px;font-size:.84rem;color:var(--txt-m)}.fin-chart-g:first-child{margin-top:0}
.fin-chart-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--bdr);margin:0;font-weight:500}
.fin-chart-row span{flex:1;min-width:0}.fin-chart-row input{width:96px;flex:none;padding:7px 10px;border:1px solid var(--bdr);border-radius:var(--rad-9);background:var(--bg);font:inherit;text-align:center}

/* On a computer the wall's button is the side menu's last item (role-wall.js, lab-wall.js: dockLaunch), not a pill
   floating over the menu's foot; and the assistant opens from the header's ✨, so its floating twin is not drawn. */
@media (min-width: 1024px) {
  .wall-launch.wall-launch-nav { position: static !important; inset: auto !important; bottom: auto !important; display: flex; align-items: center; justify-content: center; gap: 8px;
    width: calc(100% - 16px); height: auto !important; margin: 12px 8px 0; padding: 12px 14px !important; border-radius: var(--rad-14) !important;
    background: var(--card); color: var(--txt); border: 1px solid var(--bdr); box-shadow: none; font-size: .9rem; font-weight: 800; z-index: auto; }
  .wall-launch.wall-launch-nav .wall-launch-txt { display: inline !important; }
  .wall-launch.wall-launch-nav:hover { border-color: var(--p, var(--c-blue-53)); color: var(--p, var(--c-blue-53)); }
}
body:has(#aiHeaderBtn) .ai-launcher:not(.is-open) { display: none !important; }
/* The product window: its body scrolls inside the window's own height. It had a height of its own (88vh), taller
   than the window (which is kept clear of the screen's edges), so its foot -- the rating's buttons -- sat under the
   window's edge where no scrolling reached. */
.modal-content.pc-detail { display: flex; flex-direction: column; }
#pcDetailBody { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* The front page and the sign-in, read and pressed with ease (impeccable audit, 2026-10-16). The same colors and
   shapes, each only as much darker or larger as reading it needs:
   - the blue of the buttons ends on the app's own deep blue (#0369a1) instead of a light cyan, so their white words read on every part of them (5.2:1, was 3.6);
   - the green of the paid amounts and the ticks, the muted words, the empty fields' hints (a shade lighter than the words typed in them) and the version: darker;
   - "حمّله من" on the App Store badge: 12px, was 10.9;
   - the small links and the "remember me" line keep their look and get a 44px place to press (an invisible frame). */
#loginScreen.lx, #registerScreen, #verifyScreen {
  --fx-grad: linear-gradient(135deg, var(--c-blue-48) 0%, var(--c-blue-53) 45%, var(--c-sky-32) 100%);
  --fx-green: var(--c-teal-24); --fx-mute: var(--c-sky-43);
}
#loginScreen.lx .auth-input::placeholder, #registerScreen .search-input::placeholder { color: var(--c-blue-52); }
#loginScreen.lx .lx-login .auth-foot .app-version-label { color: var(--c-blue-47); }
.lx-store-txt small { font-size: .75rem; }
#loginScreen.lx .link-btn, #registerScreen .link-btn, #verifyScreen .link-btn, .lx-privacy-link, #loginScreen.lx .auth-remember, #loginScreen.lx .lx-logo { position: relative; }
#loginScreen.lx .link-btn::after, #registerScreen .link-btn::after, #verifyScreen .link-btn::after { content: ""; position: absolute; inset: -10px -6px 0; }
.lx-privacy-link::after { content: ""; position: absolute; inset: -12px -6px; }
#loginScreen.lx .auth-remember { margin: 0 2px; padding: 12px 0; }
#loginScreen.lx .lx-logo::after { content: ""; position: absolute; inset: -4px; }

/* Inside the app, read and pressed with ease (the playwright sweep of every role, phone and desktop, 2026-10-16).
   The same colours a shade deeper and the smallest words a little larger, nothing moved:
   - the muted grey, the green and the amber of the light theme: one shade deeper, so labels, "connected", "delivered",
     "confirmed" and the paid figures read at 4.5:1 or more (the dark theme keeps its own, which already read);
   - the active menu item and the "Lab" of the wordmark mix their tone with the text colour (darker on light, lighter on dark);
   - the phone's smallest words (the home's stage labels, the stage chips, the material codes, the case cards' stage,
     date and order number, the status badges, the rep's figures): 12px, was 10.2–11.2;
   - the small buttons (the finance period, "how was it counted", the small row buttons, the home's "all", the rep's
     name at the top): a larger place to press, by padding or an invisible frame that stays off their neighbours. */
:root { --txt-m: #5b6b80; --s: #047857; --w: #b45309; }
.nav-btn.active[data-icon] > span, html.v2 .v2-tab.on { color: color-mix(in srgb, var(--ic) 68%, var(--txt)); }
.brand-word > span { color: color-mix(in srgb, var(--c-cyan-42) 62%, var(--txt)); }
#ordersContainer .case-card .card-footer-txt .card-sent { color: var(--txt-m); }
@media (max-width: 760px) {
  .v2-ring small, .v2-chip, .stage-dot, .badge-status, .fld-plan-day small, .repacc-fig span { font-size: .75rem; }
  #ordersContainer .case-card .badge-status, #ordersContainer .case-card .stage-dot, #ordersContainer .case-card .treatment-abbr,
  #ordersContainer .case-card .card-footer-txt .card-sent, .treatment-abbr, .patient-name span { font-size: .75rem; }
  .fin-modes button { min-height: 40px; min-width: 44px; }
  details.fin-how > summary { min-height: 40px; display: flex; align-items: center; }
  .v2-feed-h button, .sw-chip, .sw-actions .btn-main, .supplies-reorder { position: relative; }
  .v2-feed-h button::after, .sw-chip::after { content: ""; position: absolute; inset: -6px -2px; }
  .sw-actions .btn-main, .supplies-reorder { min-height: 40px; }
  .app-header .app-title { padding-block: 10px; margin-block: -10px; }
}

/* A case's window opens on its next step (buildNextStepHTML): the stage, then the buttons of the moment. */
.ns-card { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--rad-18); background: color-mix(in srgb, var(--p) 7%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--p) 32%, transparent); }
.ns-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ns-title { font-weight: 900; font-size: 1rem; color: var(--p); margin-inline-end: auto; }
.ns-stage { font-size: .8rem; font-weight: 800; padding: 4px 12px; border-radius: var(--rad-pill); background: var(--card); color: var(--txt); border: 1px solid var(--bdr); }
.ns-stage--try { background: var(--wl); color: var(--w); border-color: color-mix(in srgb, var(--w) 30%, transparent); }
.ns-acts { display: grid; gap: 8px; margin-top: 12px; }
.ns-acts .ns-btn { margin: 0; min-height: 48px; }
.ns-acts .ns-btn--try { background: linear-gradient(135deg, var(--w), color-mix(in srgb, var(--w) 80%, var(--c-black))); box-shadow: 0 8px 20px color-mix(in srgb, var(--w) 28%, transparent); }
.ns-alert { margin-top: 10px; padding: 10px 12px; border-radius: var(--rad-12); background: color-mix(in srgb, var(--c-violet-56) 9%, var(--card)); color: color-mix(in srgb, var(--c-violet-56) 75%, var(--txt)); font-weight: 800; font-size: .88rem; }
.ns-none { margin-top: 8px; color: var(--txt-m); font-weight: 700; font-size: .88rem; }

/* A stopped account's notice at sign-in, with the way to reach us (showAccountNotice). */
.auth-notice-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.auth-notice-contact a { flex: 1 1 100%; justify-content: space-between; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: var(--rad-12); background: var(--card); border: 1px solid var(--bdr); color: var(--p); font-weight: 800; font-size: .85rem; text-decoration: none; }
.auth-notice-contact a:hover { border-color: var(--p); }

/* The ring around the sign-in card as on 2026-09-30 (index.html .lx-net): the four parties on its compass points,
   their emoji in coloured discs, bobbing; the ring turning, the cross running, three cyan dots round it. Behind the
   card, as then. Its size follows today's taller card on a computer, so the clinic and the warehouse sit on the
   card's top and bottom edges as they did; on a phone the card fills the width and it is left out. */
.lx-net { position: absolute; width: min(640px, 122%); aspect-ratio: 1; inset: 50% auto auto 50%; transform: translate(-50%, -50%); pointer-events: none; }
.lx-net svg { width: 100%; height: 100%; overflow: visible; }
.lx-net-ring { animation: lxTurn 60s linear infinite; transform-origin: 300px 300px; }
.lx-net-link { stroke-dasharray: 6 10; animation: lxFlowDash 1.6s linear infinite; }
@keyframes lxTurn { to { transform: rotate(360deg); } }
@keyframes lxFlowDash { to { stroke-dashoffset: -32; } }
#loginScreen.lx .lx-hero-side > .lx-login { position: relative; z-index: 2; }
.lx-node { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: var(--rad-pill); background: var(--c-white); border: 1px solid color-mix(in srgb, var(--c-blue-53) 18%, transparent);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-blue-53) 45%, transparent); font-weight: 800; font-size: .86rem; color: var(--c-blue-8); transform: translate(-50%, -50%); animation: lxBob 5s ease-in-out infinite; white-space: nowrap; }
.lx-node i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 1rem; background: linear-gradient(135deg, var(--c-blue-53), var(--c-cyan-43)); color: var(--c-white); }
.lx-node.n-top { left: 50%; top: 6.3%; } .lx-node.n-right { left: 93.7%; top: 50%; animation-delay: -1.2s; } .lx-node.n-bottom { left: 50%; top: 93.7%; animation-delay: -2.4s; } .lx-node.n-left { left: 6.3%; top: 50%; animation-delay: -3.6s; }
.lx-node.n-right i { background: linear-gradient(135deg, var(--c-cyan-43), var(--c-teal-39)); } .lx-node.n-bottom i { background: linear-gradient(135deg, var(--c-violet-58), var(--c-blue-53)); } .lx-node.n-left i { background: linear-gradient(135deg, var(--c-orange-50), var(--c-red-60)); }
@keyframes lxBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
@media (min-width: 961px) { .lx-net { width: 700px; } #loginScreen.lx .lx-hero-side .fx-float { display: none; }
  /* today's card is taller and not see-through: the clinic and the warehouse stand just outside its edges, the
     laboratory a little in from the text beside it */
  .lx-node.n-top { top: 2%; } .lx-node.n-bottom { top: 98%; } .lx-node.n-right { left: 91%; } }
@media (min-width: 961px) and (max-width: 1279px) { .lx-net { width: 660px; } }
@media (max-width: 960px) { .lx-net { display: none; } }
@media (prefers-reduced-motion: reduce) { .lx-net-ring, .lx-net-link, .lx-node { animation: none !important; } .lx-net animateMotion { display: none; } }

/* A case standing still (app.js caseStall): a red mark on its card, a line on its next-step card, and the doctor's
   written reason when taking it back. */
.stall-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 10px; border-radius: var(--rad-pill); font-size: .75rem; font-weight: 800;
  color: var(--d); background: var(--dl); border: 1px solid color-mix(in srgb, var(--d) 30%, transparent); white-space: nowrap; }
.ns-stall { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--rad-12);
  background: var(--dl); color: var(--d); font-weight: 800; font-size: .88rem; }
.ns-stall b { font-size: .8rem; padding: 2px 10px; border-radius: var(--rad-pill); background: var(--card); color: var(--txt); }
.ns-stall.is-mine b { background: var(--d); color: var(--c-white); }
.dl-ask-text { width: 100%; margin: 4px 0 12px; resize: vertical; }
.dl-ask-text.is-bad { border-color: var(--d); }

/* Inside سنان's frame (sinan-embed.js): only the sign-in card, then only the new-order form. */
html.dl-embed #appMainWrapper, html.dl-embed #courierScreen, html.dl-embed #loginScreen { visibility: hidden !important; }
html.dl-embed #loginScreen { overflow: hidden !important; }
html.dl-embed #loginScreen .lx-login { visibility: visible !important; position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; margin: 0 !important; z-index: 5; }
html.dl-embed #loginScreen .auth-tabs { display: none !important; }
html.dl-embed #dlEmbedDone { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--txt, var(--c-blue-11)); z-index: 3; }
html.dl-embed #dlEmbedDone[hidden] { display: none; }
/* The order form as سنان's own page: no grey cover, no sliding sheet, no second ✕ (سنان has its own back), a flat card. */
html.dl-embed #orderModal.modal { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: flex-start; transition: none; overflow-y: hidden; }
html.dl-embed #orderModal .modal-content { transform: none; transition: none; max-width: 900px; max-height: none !important; overflow: visible !important; margin: 0 auto; border-radius: var(--rad-18); border: 1px solid color-mix(in srgb, var(--c-blue-65) 35%, transparent); box-shadow: none; padding: 18px 20px 24px; }
html.dl-embed #orderModal .modal-top-header { display: none; }
/* The frame is as tall as the form (sinan-embed.js: dentalab:height), so a swipe scrolls سنان's page: nothing here holds it back. */
html.dl-embed, html.dl-embed body, html.dl-embed #orderModal, html.dl-embed #orderModal .modal-content { overscroll-behavior: auto !important; }
@media (max-width: 640px) { html.dl-embed #orderModal .modal-content { border-radius: 0; border: 0; padding: 12px 12px 20px; } }

/* An iPhone app older than 4.8.1: update from the App Store for calls as a call screen (push-notifications.js). */
.dl-ios-update { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 100000; display: flex; gap: 10px; align-items: center; padding: 12px 12px 12px 14px; border-radius: var(--rad-18); background: var(--card, var(--c-white)); color: var(--txt, var(--c-blue-11)); box-shadow: 0 12px 32px color-mix(in srgb, var(--c-blue-11) 22%, transparent); border: 1px solid var(--bdr, color-mix(in srgb, var(--c-blue-11) 8%, transparent)); }
.dl-ios-update__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; }
.dl-ios-update__t b { font-size: 14px; }
.dl-ios-update__t span { color: var(--txt-m, var(--c-blue-47)); }
.dl-ios-update__go { flex: none; padding: 10px 16px; border-radius: var(--rad-12); background: linear-gradient(135deg, var(--c-blue-48), var(--c-cyan-43)); color: var(--c-white); font-weight: 700; text-decoration: none; }
.dl-ios-update__x { flex: none; border: 0; background: transparent; color: var(--txt-m, var(--c-blue-47)); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }

/* ---- The calm look (html.calm, set by v2.js on the accounts it names; on trial since 2026-10-24) ----
   The same screens, in the same places, doing the same things. What changes is colour: it is kept for state
   (late, ready, owed, paid) and taken off everything else -- no tinted coin behind every icon, no gradients, no
   coloured glows under buttons, no frosted glass, no stripe down the side of a box. One blue marks what can be
   pressed; the rest is ink on white. In a dark theme the dark colours stay as they are and only the shapes change. */
@media not all and (prefers-color-scheme: dark) {
  html.calm:not([data-theme="dark"]) {
    --p: var(--c-blue-42); --ph: var(--c-blue-34); --pl: var(--c-blue-95-3);
    --bg: var(--c-blue-96-4); --card: var(--c-white);
    --txt: var(--c-blue-11-2); --txt-m: var(--c-grey-41); --bdr: var(--c-blue-90);
    --s: var(--c-teal-27-2); --sl: var(--c-teal-92); --d: var(--c-red-47); --dl: var(--c-red-95); --w: var(--c-orange-35); --wl: var(--c-orange-93-3);
    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--c-blue-11-2) 5%, transparent); --shadow-md: 0 1px 2px color-mix(in srgb, var(--c-blue-11-2) 5%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--c-blue-11-2) 25%, transparent);
  }
}
html.calm[data-theme="light"] {
  --p: var(--c-blue-42); --ph: var(--c-blue-34); --pl: var(--c-blue-95-3);
  --bg: var(--c-blue-96-4); --card: var(--c-white);
  --txt: var(--c-blue-11-2); --txt-m: var(--c-grey-41); --bdr: var(--c-blue-90);
  --s: var(--c-teal-27-2); --sl: var(--c-teal-92); --d: var(--c-red-47); --dl: var(--c-red-95); --w: var(--c-orange-35); --wl: var(--c-orange-93-3);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--c-blue-11-2) 5%, transparent); --shadow-md: 0 1px 2px color-mix(in srgb, var(--c-blue-11-2) 5%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--c-blue-11-2) 25%, transparent);
}

/* glass off: a bar is a bar */
html.calm .app-header, html.calm .v2-rings, html.calm .v2-feed, html.calm.v2 .v2-tabbar, html.calm .nav-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* the header's buttons: line icons in ink, a hairline round each, no pastel squares */
html.calm:not(.look-icons) .ico-btn[data-icon] { color: var(--txt) !important; background: var(--card) !important; border: 1px solid var(--bdr) !important; box-shadow: none !important; }
html.calm:not(.look-icons) .ico-btn[data-icon]:hover { border-color: var(--txt-m) !important; }

/* the menu down the side: the icon in the row's own colour, no coin; the open page in the one blue */
html.calm:not(.look-icons) .nav-btn[data-icon] .nav-ico, html.calm:not(.look-icons) .nav-btn > i[data-icon] { color: var(--txt-m); background: none !important; box-shadow: none !important; }
html.calm:not(.look-icons) .nav-btn.active[data-icon] .nav-ico, html.calm:not(.look-icons) .nav-btn.active > i[data-icon] { color: var(--p); background: none !important; box-shadow: none !important; }
html.calm:not(.look-icons) .nav-btn.active[data-icon] > span { color: var(--p); }

/* the bar at the thumb */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.calm.v2 .v2-tabbar { background: var(--card); border: 1px solid var(--bdr); box-shadow: 0 6px 20px -14px color-mix(in srgb, var(--c-blue-11-2) 35%, transparent); }
  html.calm.v2:not(.look-icons) .v2-tab .nav-ico { color: var(--txt-m); background: none; box-shadow: none; }
  html.calm.v2:not(.look-icons) .v2-tab.on, html.calm.v2:not(.look-icons) .v2-tab.on .nav-ico { color: var(--p); background: none; box-shadow: none; }
  html.calm.v2 .v2-tab--add { background: var(--p); box-shadow: 0 0 0 5px var(--card); border-radius: var(--rad-18); }
}

/* the new-case button */
html.calm .btn-quick-order { background: var(--p); box-shadow: none; border-radius: var(--rad-14); }
html.calm .btn-quick-order:hover { background: var(--ph); }

/* where the cases are: plain rings; colour only on the ones that mean something (late, ready) */
html.calm .v2-rings { box-shadow: none; border-radius: var(--rad-16); }
html.calm .v2-ring-c { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--bdr); }
html.calm .v2-ring-c b { color: var(--txt); font-variant-numeric: tabular-nums; }
html.calm .v2-ring.hot .v2-ring-c { background: var(--card); padding: 0; box-shadow: inset 0 0 0 2px var(--rc); }
html.calm .v2-ring.hot .v2-ring-c b { background: none; box-shadow: none; color: var(--rc); }
html.calm .v2-ring.t-blue { --rc: var(--txt); }
html.calm .v2-ring.t-dark { --rc: var(--w); }

/* today, the takings, the latest cases, the chart, the accounts: one card shape, flat */
html.calm :is(.v2-feed, .dl-today, .dl-take) { box-shadow: none; border-radius: var(--rad-16); }
html.calm #dashChartContainer > div, html.calm #dashboardTab > .financial-info { box-shadow: none !important; border-radius: var(--rad-16) !important; }
html.calm .dl-today-ico { background: none; color: var(--c); }
html.calm .dl-today-row:hover, html.calm .dl-today-row:focus-visible { background: var(--bg); }
html.calm .v2-feed-h button { background: none; color: var(--p); padding-inline: 4px; }
html.calm .v2-av { background: var(--bg); color: var(--txt-m); box-shadow: none; border-radius: var(--rad-12); }
html.calm .v2-item:active { background: var(--bg); }
html.calm .v2-chip { background: none; border: 1px solid var(--bdr); color: color-mix(in srgb, var(--c) 72%, var(--txt)); }
html.calm .tk-add { background: var(--p); box-shadow: none; }
html.calm .tk-figs > div, html.calm .tk-figs .tk-pay { background: var(--bg); }
html.calm .tk-figs b { font-variant-numeric: tabular-nums; }
html.calm .cd-late { background: none; padding-inline: 6px; }

/* the accounts summary: the figures keep their meaning (owed in red, paid in green), the boxes are plain */
html.calm .financial-info .form-row > div, html.calm #dashDebtBox { background: var(--bg) !important; border: 1px solid var(--bdr) !important; box-shadow: none !important; }
html.calm.v2 #dashDebtBox { border-inline-start: 1px solid var(--bdr) !important; }
html.calm .financial-info .form-row > div > span, html.calm #dashDebtLabel { color: var(--txt-m) !important; }
html.calm .financial-info strong { font-variant-numeric: tabular-nums; }
/* the header's own buttons carry their colours inline: plain here, the badge on them still red */
html.calm:not(.look-icons) .app-header > div:last-child > button:not(.v2-quiet) { color: var(--txt) !important; background: var(--card) !important; border: 1px solid var(--bdr) !important; box-shadow: none !important; }
html.calm:not(.look-icons) .app-header > div:last-child > button:hover { border-color: var(--txt-m) !important; }
html.calm:not(.look-icons) .app-header > div:last-child > button .emo-ico, html.calm:not(.look-icons) .app-header > div:last-child > button .ico { color: inherit; }
html.calm:not(.look-icons) .app-header > div:last-child > button[onclick^="logoutApp"] { color: var(--d) !important; }
/* cases simply moving: a grey ring and the number in ink; colour stays for late and ready */
html.calm .v2-ring.t-blue { --rc: var(--c-blue-76); }
html.calm .v2-ring.t-blue.hot .v2-ring-c b { color: var(--txt); }
html.calm .app-header > div:last-child > button.ai-hdr-btn { border-radius: var(--rad-12) !important; }

/* ---- Three looks to choose from, each on top of the calm one (html.calm.look-…; v2.js CALM_LOOK) ---- */
/* 1. warm paper: a cream ground, ink, one deep teal; the counts as large figures, no rings */
@media not all and (prefers-color-scheme: dark) {
  html.calm.look-paper:not([data-theme="dark"]) { --bg: var(--c-orange-94-3); --card: var(--c-amber-99); --txt: var(--c-orange-10-3); --txt-m: var(--c-grey-39); --bdr: var(--c-orange-86);
    --p: var(--c-teal-24-2); --ph: var(--c-cyan-18); --pl: var(--c-teal-91); --s: var(--c-green-33); --d: var(--c-red-41); --w: var(--c-orange-33); }
}
html.calm.look-paper[data-theme="light"] { --bg: var(--c-orange-94-3); --card: var(--c-amber-99); --txt: var(--c-orange-10-3); --txt-m: var(--c-grey-39); --bdr: var(--c-orange-86);
  --p: var(--c-teal-24-2); --ph: var(--c-cyan-18); --pl: var(--c-teal-91); --s: var(--c-green-33); --d: var(--c-red-41); --w: var(--c-orange-33); }
html.calm.look-paper :is(.v2-rings, .v2-feed, .dl-today, .dl-take, .financial-info) { border-radius: var(--rad-10) !important; }
html.calm.look-paper #dashChartContainer > div { border-radius: var(--rad-10) !important; }
html.calm:is(.look-paper, .look-tool) .v2-ring-c, html.calm:is(.look-paper, .look-tool) .v2-ring.hot .v2-ring-c { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; padding: 0; }
html.calm:is(.look-paper, .look-tool) .v2-ring-c b, html.calm:is(.look-paper, .look-tool) .v2-ring.hot .v2-ring-c b { font-size: 2rem; line-height: 1.1; font-weight: 700; background: none; box-shadow: none; }
html.calm:is(.look-paper, .look-tool) .v2-ring.t-blue.hot .v2-ring-c b { color: var(--txt); }
html.calm.look-paper .v2-ring small { font-size: .74rem; font-weight: 600; }
html.calm.look-paper .v2-head-t, html.calm.look-paper .dl-today-h h3, html.calm.look-paper .v2-feed-h h3, html.calm.look-paper .tk-h h3 { font-weight: 700; }

/* 2. dark ink: the header, the side menu and the bar at the thumb in ink, the work on white, one strong blue */
@media not all and (prefers-color-scheme: dark) {
  html.calm.look-ink:not([data-theme="dark"]) { --bg: var(--c-blue-95-4); --card: var(--c-white); --txt: var(--c-blue-9); --txt-m: var(--c-blue-39); --bdr: var(--c-blue-89); --p: var(--c-blue-55); --ph: var(--c-blue-44); --pl: var(--c-blue-95-5); }
}
html.calm.look-ink[data-theme="light"] { --bg: var(--c-blue-95-4); --card: var(--c-white); --txt: var(--c-blue-9); --txt-m: var(--c-blue-39); --bdr: var(--c-blue-89); --p: var(--c-blue-55); --ph: var(--c-blue-44); --pl: var(--c-blue-95-5); }
html.calm.look-ink .app-header { background: var(--c-blue-10) !important; border-bottom-color: var(--c-blue-10) !important; }
html.calm.look-ink .app-header .app-title, html.calm.look-ink .app-header .app-title * { color: var(--c-white) !important; }
html.calm.look-ink .app-header > div:last-child > button:not(.v2-quiet) { color: var(--c-blue-93-2) !important; background: transparent !important; border-color: color-mix(in srgb, var(--c-white) 16%, transparent) !important; }
html.calm.look-ink .app-header > div:last-child > button[onclick^="logoutApp"] { color: var(--c-red-75) !important; }
html.calm.look-ink .app-header :is(.global-search-launch, .v2-search) { background: color-mix(in srgb, var(--c-white) 8%, transparent) !important; border-color: color-mix(in srgb, var(--c-white) 14%, transparent) !important; color: var(--c-blue-93-2) !important; }
html.calm.look-ink .nav-bar { background: var(--c-blue-10) !important; border-color: var(--c-blue-10) !important; }
html.calm.look-ink .nav-bar .nav-btn, html.calm.look-ink .nav-bar .nav-btn > span, html.calm.look-ink .nav-bar .side-brand, html.calm.look-ink .nav-bar .side-user { color: var(--c-blue-82) !important; }
html.calm.look-ink .nav-bar .side-user { background: color-mix(in srgb, var(--c-white) 6%, transparent) !important; border-color: color-mix(in srgb, var(--c-white) 10%, transparent) !important; }
html.calm.look-ink .nav-bar .nav-btn.active { background: color-mix(in srgb, var(--c-white) 8%, transparent) !important; }
html.calm.look-ink .nav-bar .nav-btn.active > span, html.calm.look-ink .nav-bar .nav-btn.active .nav-ico { color: var(--c-white) !important; }
html.calm.look-ink .nav-bar .nav-btn[data-icon] .nav-ico { color: var(--c-blue-61); }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.calm.look-ink.v2 .v2-tabbar { background: var(--c-blue-10); border-color: var(--c-blue-10); }
  html.calm.look-ink.v2 .v2-tab, html.calm.look-ink.v2 .v2-tab .nav-ico { color: var(--c-blue-61); }
  html.calm.look-ink.v2 .v2-tab.on, html.calm.look-ink.v2 .v2-tab.on .nav-ico { color: var(--c-white); }
  html.calm.look-ink.v2 .v2-tab--add { box-shadow: 0 0 0 5px var(--c-blue-10); }
}
html.calm.look-ink .v2-ring-c b { font-weight: 800; }

/* 3. lab tool: dense and squared, hairlines, the counts as a table of figures */
@media not all and (prefers-color-scheme: dark) {
  html.calm.look-tool:not([data-theme="dark"]) { --bg: var(--c-blue-94-2); --card: var(--c-white); --txt: var(--c-blue-11-3); --txt-m: var(--c-grey-40); --bdr: var(--c-blue-86); --p: var(--c-cyan-27); --ph: var(--c-cyan-21); --pl: var(--c-cyan-92); }
}
html.calm.look-tool[data-theme="light"] { --bg: var(--c-blue-94-2); --card: var(--c-white); --txt: var(--c-blue-11-3); --txt-m: var(--c-grey-40); --bdr: var(--c-blue-86); --p: var(--c-cyan-27); --ph: var(--c-cyan-21); --pl: var(--c-cyan-92); }
html.calm.look-tool :is(.v2-rings, .v2-feed, .dl-today, .dl-take, .financial-info, .btn-quick-order, .v2-tabbar, .tk-add, .ico-btn) { border-radius: 6px !important; }
html.calm.look-tool #dashChartContainer > div { border-radius: 6px !important; }
html.calm.look-tool .app-header > div:last-child > button { border-radius: 6px !important; }
html.calm.look-tool .v2-rings { gap: 0 !important; padding: 0 !important; overflow: hidden; }
html.calm.look-tool .v2-ring { align-items: flex-start; padding: 12px 14px; border-inline-start: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); text-align: start; }
html.calm.look-tool .v2-ring small { text-align: start; font-size: .72rem; }
html.calm.look-tool .v2-ring-c b, html.calm.look-tool .v2-ring.hot .v2-ring-c b { font-size: 1.6rem; }
html.calm.look-tool .v2-av, html.calm.look-tool .v2-chip, html.calm.look-tool .dl-today-n { border-radius: 4px; }
html.calm.look-tool :is(.v2-feed-h h3, .dl-today-h h3, .tk-h h3) { font-size: .95rem; font-weight: 700; }
html.calm.look-ink .app-header .ico-btn[data-icon] { color: var(--c-blue-93-2) !important; background: transparent !important; border-color: color-mix(in srgb, var(--c-white) 16%, transparent) !important; }
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  html.calm.look-ink.v2 .v2-tabbar { background: var(--c-blue-10) !important; border-color: var(--c-blue-10) !important; }
}
html.calm.look-ink .nav-bar .side-brand, html.calm.look-ink .nav-bar .side-brand * { color: var(--c-white) !important; }
/* 1b. warm paper with the strong blue instead of the teal (?look=paperblue) */
@media not all and (prefers-color-scheme: dark) {
  html.calm.look-paper.look-blue:not([data-theme="dark"]) { --p: var(--c-blue-49); --ph: var(--c-blue-38); --pl: var(--c-blue-95-6); }
}
html.calm.look-paper.look-blue[data-theme="light"] { --p: var(--c-blue-49); --ph: var(--c-blue-38); --pl: var(--c-blue-95-6); }
/* 3b. the lab tool in the strong blue, the header's and the bars' icons left in their own colours (?look=toolblue) */
@media not all and (prefers-color-scheme: dark) {
  html.calm.look-tool.look-blue:not([data-theme="dark"]) { --p: var(--c-blue-49); --ph: var(--c-blue-38); --pl: var(--c-blue-95-6); }
}
html.calm.look-tool.look-blue[data-theme="light"] { --p: var(--c-blue-49); --ph: var(--c-blue-38); --pl: var(--c-blue-95-6); }
/* 3c. the lab tool on every screen, not the home alone (2026-10-25): every corner squared through the radius tokens
   (a pill too; a circle stays a circle), and the pressable things flat in the one blue -- no gradient, no glow. */
html.calm.look-tool { --rad-7: 4px; --rad-8: 4px; --rad-9: 4px; --rad-10: 4px; --rad-11: 6px; --rad-12: 6px; --rad-13: 6px; --rad-14: 6px;
  --rad-15: 6px; --rad-16: 6px; --rad-18: 6px; --rad-19: 6px; --rad-20: 6px; --rad-22: 6px; --rad-24: 6px; --rad-26: 6px; --rad-28: 6px;
  --rad-30: 6px; --rad-32: 6px; --rad-34: 6px; --rad-36: 6px; --rad-48: 6px; --rad-99: 6px; --rad-pill: 6px; }
html.calm.look-tool :is(.btn-main, .btn-pay, .btn-scan, .ota-go, .prod-add) { background: var(--p); box-shadow: none; }
html.calm.look-tool :is(.btn-main, .btn-pay, .btn-scan, .ota-go, .prod-add):hover { background: var(--ph); transform: none; filter: none; }
html.calm.look-tool :is(.brand-cover, .pf-cover:not([style*="url("]), .dv-logo, .shop-store-ico, .lp-step-n, .lab-wall .wall-tool--ai) { background: var(--p); }
html.calm.look-tool :is(.pc-hero, .chat-row--team, .disc-box.disc-doc) { background: var(--card); }
/* the price board's lab picker: its "fill the row" rule caught the letter avatar too and stretched it into an oval */
html.calm .prices-pick-lab > :first-child { flex: none; }