/* ════════════════════════════════════════════════════════════════════════════════════════════════════
   POWER Family — shared responsive / interaction layer (loaded by ALL layouts, right after Midone app.css).
   Rules and class names are documented in docs/ui/DESIGN_SYSTEM.md — read it before adding page CSS.

   WHY THIS FILE WINS: Midone's prebuilt Tailwind v4 puts every utility (.hidden, .flex, lg:overflow-visible …)
   inside `@layer utilities`. Un-layered CSS (this file, gm-forms.css, every <style> block in a view) beats
   layered CSS regardless of specificity. So: no !important needed against utilities — only against inline styles.
   Breakpoints (Midone): sm 640 · md 768 · lg 1024 · xl 1280 (sidebar appears) · 2xl 1536.
   ════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Visibility safety nets ─────────────────────────────────────────────────────────────────────── */
/* Alpine: x-cloak must hide even when a component class sets display (e.g. .gm-unlock{display:flex}). */
[x-cloak] { display: none !important; }
/* `.hidden` lives in @layer utilities, so any un-layered `.gm-x{display:flex}` used to beat it. Re-assert it
   un-layered with high specificity — but NOT when the element carries a responsive / state display variant
   (hidden sm:flex, hidden group-hover:block, [&.show]:flex …) and never against inline styles (JS animations). */
.hidden.hidden:not([class*=":block"]):not([class*=":flex"]):not([class*=":grid"]):not([class*=":inline"]):not([class*=":table"]):not([class*=":contents"]) { display: none; }

/* ── 2. Text & media safety ────────────────────────────────────────────────────────────────────────── */
/* Long unbroken user content (URLs, @names, IBANs): OPT-IN per element. A global overflow-wrap on the content
   area was tried and rejected — Chrome then lets flex items shrink to one letter per line (profile header at 1024).
   Use .gm-break on the text element (titles, comments, descriptions, contact values) — it also sets min-width:0. */
.gm-break { overflow-wrap: anywhere; word-break: normal; min-width: 0; }
.gm-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 3. Focus (keyboard) — theme primary, never on mouse click ─────────────────────────────────────── */
:where(a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"]),
       button:not([class*="focus-visible:ring"]), input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid color-mix(in oklch, var(--color-primary) 65%, transparent); outline-offset: 2px;
}
/* Text fields: Midone's focus ring is foreground at 5% (almost invisible) → primary border + soft ring. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.border-none), select, textarea):focus-visible {
    outline: none; border-color: color-mix(in oklch, var(--color-primary) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 12%, transparent);
}

/* ── 4. Application shell (dashboard layout) ───────────────────────────────────────────────────────── */
/* Mobile browsers: 100vh is the *largest* viewport, so the bottom of the scroll area sat behind the browser
   toolbar. Use the dynamic viewport where supported. */
@supports (height: 100dvh) {
    .content.h-screen, .side-menu__content.h-screen { height: 100dvh; }
}
/* Anchors / #comment-12 deep links land below the fixed top bar. */
.content__scroll-area { scroll-padding-top: 7.5rem; }
/* Top bar (.gm-topbar) is a sibling of the scroll area, not a child: on iPhone (Safari AND Chrome — both WebKit) a
   position:fixed bar inside the z-20 overflow scroller was clipped to the scroller (which starts at y=128) and
   vanished. Stacking: below the scroll area (20), so in-page full-screen overlays (badge unlock, image viewer,
   community dialogs) still cover it; above it while its own bell / avatar menu is open — those drop over the page.
   The two never overlap otherwise (bar ends at y≈102, the scroll area starts at y=128). */
.content .gm-topbar { z-index: 15; }
.content .gm-topbar:is(:hover, :focus-within) { z-index: 30; }
/* iOS WebKit: the stacked "box" card (.box + before:/after: layers at z-index -1) drew its front layer offset
   from the card — two misaligned frames. The front layer carries backdrop-filter, which makes it a separately
   composited layer that iOS mis-places inside the scrolling area. It is opaque (bg-background), so the blur had no
   visible effect anyway: drop it on iOS and the layer is painted with the card again. */
@supports (-webkit-touch-callout: none) {
    [class*="after:backdrop-blur-md"]::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Phones: Midone's 28px content gutter + 16px card inset left only ~290px of a 375px screen.
   Card edge stays 16px from the screen, content gets a 12px inner gutter (≈ +32px usable width). */
@media (max-width: 639.98px) {
    .content.px-7 { padding-left: .75rem; padding-right: .75rem; }
}
/* Breadcrumb (xl+): never runs under the search pill; the current page ellipsises. */
.gm-crumbs { min-width: 0; }
.gm-crumbs > li { flex: none; }
.gm-crumbs > li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    padding-left: 1rem; margin-left: -1rem; }   /* room for the chevron (::before at -1rem) inside the clipped box */
/* Compact sidebar (xl–2xl): the brand name is faded out — also take it out of hit-testing so it can't
   overlap the breadcrumb while the menu animates. */
@media (min-width: 1280px) {
    .side-menu--collapsed:not(.side-menu--on-hover) .gm-brand-name { visibility: hidden; }
}
/* "⌘K" hint is meaningless on phones — the pill becomes a round search button. */
@media (max-width: 639.98px) {
    .quick-search-toggle .gm-kbd { display: none; }
    .quick-search-toggle { padding-left: 0; padding-right: 0; width: 2.25rem; justify-content: center; }
    .quick-search-toggle > div { gap: 0; }
}
/* Hover menus (bell, avatar, sidebar account) are `hidden group-hover:block`. Tailwind v4 only applies hover
   variants on devices that CAN hover, so on phones they never opened. Their triggers are focusable
   (tabindex=0): a tap / Tab focuses them and :focus-within opens the panel; tapping elsewhere closes it. */
.gm-hovermenu:focus-within > .hidden { display: block; }
.gm-hovermenu > [tabindex]:focus { outline: none; }
.gm-hovermenu > [tabindex]:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-nav-foreground, var(--color-primary)) 70%, transparent); outline-offset: 4px; border-radius: 9999px; }
/* ── Notifications sheet (phones / tablets < 1024px; desktop keeps the hover dropdown) ─────────────────────────────────
   The bell no longer opens on hover / focus there: a tap toggles .gm-notif-open (Alpine `sheet`) and the same panel becomes
   a full-height screen (Facebook-app style) — header, All / Unread chips, endless list; from 640px a side sheet over a dimmed page. */
.gm-ns-head, .gm-ns-backdrop, .gm-ns-older, .gm-nt-unread { display: none; }
@media (max-width: 1023.98px) {
    .gm-notif-menu > .hidden, .gm-notif-menu:focus-within > .hidden { display: none !important; }
    .gm-notif-menu.gm-notif-open > .hidden { display: block !important; }
    html.gm-sheet-lock, html.gm-sheet-lock body, html.gm-sheet-lock .content__scroll-area { overflow: hidden !important; overscroll-behavior: none; }
    html.gm-sheet-lock .gm-topbar { z-index: 60 !important; }   /* above the page (scroll area z-20) while the sheet is open */
    .gm-notif-open .gm-ns-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgb(15 23 42 / .45); animation: gmNsFade .2s ease-out; }
    .gm-notif-open .gm-notif-panel { position: fixed !important; inset-block: 0; inset-inline: 0; z-index: 80; width: auto !important; max-width: none;
        margin: 0 !important; padding: env(safe-area-inset-top) 0 0 !important; gap: 0 !important; color: var(--color-foreground);
        border-radius: 0 !important; background: var(--color-background); animation: gmNsUp .26s cubic-bezier(.2, .8, .2, 1); }
    .gm-notif-open .gm-notif-panel::before { display: none !important; }
    .gm-notif-open .gm-notif-panel::after { display: none !important; }
    .gm-notif-open .gm-nt-deskhead { display: none !important; }
    .gm-notif-open .gm-ns-head { display: block; flex: none; padding: .5rem .5rem 0 1rem; border-bottom: 1px solid color-mix(in oklch, var(--color-foreground) 8%, transparent); }
    .gm-ns-bar { display: flex; align-items: center; gap: .125rem; min-height: 3rem; }
    .gm-ns-title { flex: 1; min-width: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-ns-chips { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem .75rem 0; }
    .gm-ns-tabs { display: flex; gap: .5rem; flex: none; }
    .gm-ns-chips .gm-chip { height: 2.25rem; }
    .gm-ns-readall { margin-inline-start: auto; min-height: 2.5rem; padding: 0 .5rem; border-radius: .625rem; font-size: .8125rem; font-weight: 600;
        color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gm-ns-readall:active { background: color-mix(in oklch, var(--color-primary) 8%, transparent); }
    .gm-ns-readall:disabled { color: inherit; opacity: .4; }
    /* the list fills the rest of the screen and is the only thing that scrolls */
    .gm-notif-open .gm-nt-list { flex: 1 1 auto; min-height: 0; max-height: none !important; margin: 0 !important; padding: .5rem .5rem calc(1rem + env(safe-area-inset-bottom)) !important;
        gap: .125rem !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .gm-notif-open .gm-nt-list > [data-nid], .gm-notif-open .gm-nt-unread > div > [data-nid] { margin: 0 !important; min-height: 4rem; padding: .625rem .5rem !important; border-radius: .875rem; }
    .gm-notif-open .gm-nt-list [data-nid]:active { background: color-mix(in oklch, var(--color-foreground) 6%, transparent); }
    .gm-notif-open .gm-nt-list [data-unread]:not([data-gm-pin]) { background: color-mix(in oklch, var(--color-primary) 6%, transparent); }
    .gm-notif-open .gm-nt-title, .gm-notif-open .gm-nt-msg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .gm-notif-open .gm-nt-msg { font-size: .8125rem; }
    .gm-notif-open .gm-nt-unread { display: block; }
    .gm-notif-open .gm-nt-unread > div { gap: .125rem !important; }
    .gm-ns-older { display: block; width: 100%; min-height: 2.75rem; margin-top: .25rem; border-radius: .75rem; font-size: .8125rem; font-weight: 600;
        color: var(--color-foreground); background: color-mix(in oklch, var(--color-foreground) 5%, transparent); }
    .gm-ns-empty { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding: 3.5rem 1rem; font-size: .875rem; opacity: .55; }
    @keyframes gmNsUp { from { transform: translateY(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes gmNsFade { from { opacity: 0; } to { opacity: 1; } }
}
/* Tablets: a side sheet on the end edge over the dimmed page instead of the whole screen */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .gm-notif-open .gm-notif-panel { inset-inline-start: auto; width: min(26rem, 100%) !important; box-shadow: 0 0 40px rgb(15 23 42 / .25); }
}
@media (prefers-reduced-motion: reduce) { .gm-notif-open .gm-notif-panel, .gm-notif-open .gm-ns-backdrop { animation: none; } }
/* Sidebar account popup below xl (off-canvas menu): open upwards inside the drawer, not off-screen right. */
@media (max-width: 1279.98px) {
    .side-menu__account .gm-account-pop { left: 1rem; right: 1rem; top: auto; bottom: calc(100% + .5rem); width: auto; margin-left: 0; }
}
/* Touch: icon-only shell controls get a ≥40px hit area without changing their drawn size. */
@media (pointer: coarse) {
    .gm-hit { position: relative; }
    .gm-hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); }
    .open-mobile-menu, .quick-search-toggle { min-height: 2.5rem; min-width: 2.5rem; }
}

/* ── 5. Layout utilities for pages ─────────────────────────────────────────────────────────────────── */
/* Readable measure for forms / long text (centre with mx-auto if wanted). */
.gm-readable { max-width: 42rem; }
.gm-readable-wide { max-width: 56rem; }
/* Two-column field grids (`grid grid-cols-2` + `col-span-2` section rows) → one column on phones.
   Horizontal forms (`.gm-hform` parent of Midone rows `grid grid-cols-4` = right-aligned label + `col-span-3` field):
   on phones the label sits above its field instead of squeezing into a 70px column. */
@media (max-width: 639.98px) {
    .gm-form-2col { grid-template-columns: minmax(0, 1fr); }
    .gm-form-2col > * { grid-column: 1 / -1; }
    .gm-hform > .grid.grid-cols-4 { grid-template-columns: minmax(0, 1fr); row-gap: .5rem; }
    .gm-hform > .grid.grid-cols-4 > * { grid-column: 1 / -1; }
    .gm-hform > .grid.grid-cols-4 > :is(label, span):first-child { text-align: left; padding-top: 0 !important; }   /* label column (inline padding aligned it to a tall field) */
    .gm-hform > .grid.grid-cols-4 > :is(span, div):empty { display: none; }   /* blank label cell (never inputs — they are :empty too) */
}
/* Toolbar: buttons + filters + search that wrap instead of overflowing. Children share the row. */
.gm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; min-width: 0; }
.gm-toolbar > .gm-toolbar__grow { flex: 1 1 14rem; min-width: 0; }
@media (max-width: 639.98px) { .gm-toolbar > * { flex: 1 1 auto; min-width: 0; } }
/* Midone "Data List" toolbars & pagination rows are `flex-wrap … sm:flex-nowrap`: at 1024–1440 the filter
   group ran past the card (and was clipped). Let them wrap when — and only when — they don't fit. */
.flex.flex-wrap.sm\:flex-nowrap { flex-wrap: wrap; row-gap: .75rem; }
/* Midone toolbar search (`<div|form class="mt-3 w-full sm:w-auto …"><div class="relative w-56">`): on phones the wrapper
   already takes its own full row — let the 224px box fill it instead of leaving a gap on the right. */
@media (max-width: 639.98px) { .w-full > .relative.w-56 { width: 100%; } .w-full > .relative.w-56 > input.w-56 { width: 100%; } }   /* the input carries w-56 too — else the icon floats right of it */
/* Equal-width boxed tabs (`[&>*]:flex-1` + `<li class="w-full min-w-0">`, profile / community page): with min-w-0 the
   nowrap labels of 6 tabs were drawn on top of each other on phones and the icons collapsed to 0px at 768.
   Each tab keeps at least its content width (still stretches to share the bar when there is room); when they
   don't fit, the bar scrolls sideways (no scrollbar) from the first tab instead of centring off both edges. */
ul[role="tablist"]:has(> li.min-w-0) { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: flex-start; }
ul[role="tablist"]:has(> li.min-w-0)::-webkit-scrollbar { display: none; }
ul[role="tablist"] > li.min-w-0 { min-width: max-content; }
/* Four-section header cards (profile, community page: avatar · details · info · stats, Midone profile-overview).
   The 4 columns need ~1200px of card; between 672px and that (tablets, 1024–1439 with the sidebar) they were squeezed
   word by word. Follows the CARD width (container query), not the viewport: a 2 × 2 grid with quadrant dividers.
   Markup: <div class="box … gm-head4-card"><div class="gm-head4 flex flex-col … lg:flex-row"> 4 children </div> */
.gm-head4-card { container: gm-head4 / inline-size; }
@container gm-head4 (min-width: 42rem) and (max-width: 74.99rem) {
    .gm-head4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-head4 > * { margin-top: 0; padding: 0 1.25rem 1.25rem; border-width: 0; }
    .gm-head4 > :nth-child(1) { justify-content: flex-start; }
    .gm-head4 > :nth-child(2n) { border-left-width: 1px; }
    .gm-head4 > :nth-child(n+3) { border-top-width: 1px; padding-top: 1.25rem; padding-bottom: 0; }
}
/* Button rows (page headers, dialog footers): wrap at every width; on phones every button shares the row. */
.gm-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Full-width action button with a sentence label ("The money arrived another way — confirm"): Ui::BTN_* are
   nowrap + h-10, so on phones the label ran out of the button. Opt-in: wraps to two centred lines, ≥40px tall. */
.gm-btn-wrap { white-space: normal; height: auto; min-height: 2.5rem; text-align: center; line-height: 1.25; }

/* ── 6. Tables ─────────────────────────────────────────────────────────────────────────────────────── */
/* Midone "Data List" wrappers are `overflow-auto lg:overflow-visible` (visible so action menus weren't cut).
   Midone dropdown menus are re-parented to <body> on open, so visible overflow isn't needed — and at
   lg/xl it let wide tables run under the clipped scroll area. Keep a controlled horizontal scroll. */
.overflow-auto.lg\:overflow-visible, .overflow-x-auto.lg\:overflow-visible, .gm-table-wrap { overflow-x: auto; overflow-y: hidden; }
.gm-table-wrap { max-width: 100%; }
/* Fade edge = "more this way" (classes set by gm-ui.js only while the content is actually wider). */
.gm-tw { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gm-tw::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .gm-tw.gm-scroll-l, .gm-tw.gm-scroll-r { scrollbar-width: thin; } .gm-tw.gm-scroll-l::-webkit-scrollbar, .gm-tw.gm-scroll-r::-webkit-scrollbar { display: block; height: 6px; } }
.gm-tw.gm-scroll-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.gm-tw.gm-scroll-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
.gm-tw.gm-scroll-l.gm-scroll-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
/* Stacked-card variant for phones: <table class="… gm-table-stack"> + <td data-label="Price">.
   A cell with .gm-cell-main spans the card (title / avatar row, no label); .gm-cell-actions right-aligns buttons. */
@media (max-width: 639.98px) {
    .gm-table-stack, .gm-table-stack > tbody { display: block; width: 100%; }
    .gm-table-stack { border-spacing: 0; margin-top: .75rem; }
    .gm-table-stack > thead { display: none; }
    .gm-table-stack > tbody > tr { display: block; margin-bottom: .75rem; padding: .25rem 1rem; border-radius: .75rem;
        border: 1px solid color-mix(in oklch, var(--color-foreground) 10%, transparent); background: var(--color-background); box-shadow: 0 3px 5px #0000000b; }
    .gm-table-stack > tbody > tr > td > * { min-width: 0; max-width: 100%; margin-left: auto; }   /* value hugs the right; wraps under the label if too wide */
    .gm-table-stack > tbody > tr > td.gm-cell-main > * { margin-left: 0; }
    .gm-table-stack > tbody > tr > td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; width: auto; min-width: 0;
        padding: .625rem 0; text-align: right; white-space: normal; border: 0; border-radius: 0; box-shadow: none; background: none; }
    .gm-table-stack > tbody > tr > td + td { border-top: 1px dashed color-mix(in oklch, var(--color-foreground) 9%, transparent); }
    .gm-table-stack > tbody > tr > td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left;
        font-size: .75rem; font-weight: 500; text-transform: uppercase; opacity: .6; }
    .gm-table-stack > tbody > tr > td.gm-cell-main { display: block; text-align: left; }
    .gm-table-stack > tbody > tr > td.gm-cell-main :is(.whitespace-nowrap, .truncate) { white-space: normal; overflow-wrap: anywhere; }   /* titles wrap inside the card */
    .gm-table-stack > tbody > tr > td.gm-cell-actions { justify-content: flex-end; flex-wrap: wrap; }
    .gm-table-stack > tbody > tr > td:empty { display: none; }
    /* Desktop column widths written inline (style="min-width:18rem") must not push a card past a 320px screen. */
    .gm-table-stack > tbody > tr > td[style*="width"] { min-width: 0 !important; max-width: none !important; }
    /* Empty-state row (<td colspan="6">Nothing here.</td>): centred message, not a right-aligned value. */
    .gm-table-stack > tbody > tr > td[colspan] { display: block; text-align: center; }
    .gm-table-stack > tbody > tr > td[data-label] > .w-full { width: auto; }   /* a full-width toggle button sits next to its label */
    /* Variant .gm-stack-inline — forum / feed rows whose extra cells are small self-labelled stats ("12 answers",
       "120 views"): the main cell spans the card, the stats share ONE line under it instead of a label row each.
       The main cell always comes first (order), even when a votes / avatar cell precedes it in the markup. */
    .gm-table-stack.gm-stack-inline > tbody > tr { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 1.25rem; padding-bottom: .75rem; }
    .gm-table-stack.gm-stack-inline > tbody > tr > td.gm-cell-main { flex: 1 1 100%; order: -1; }
    .gm-table-stack.gm-stack-inline > tbody > tr > td[colspan] { flex: 1 1 100%; }
    .gm-table-stack.gm-stack-inline > tbody > tr > td:not(.gm-cell-main) { display: block; padding: 0; border-top: 0; text-align: center; }
    .gm-table-stack.gm-stack-inline > tbody > tr > td:not(.gm-cell-main) > * { margin-left: 0; }
    .gm-table-stack.gm-stack-inline > tbody > tr > td:last-child:not(.gm-cell-main) { margin-left: auto; text-align: right; }
}
/* Variant .gm-stack-tablet (next to gm-table-stack) — wide tables whose actions column would sit behind a sideways
   scroll on tablets: the same cards from 640 to 1023px too, two per row. Used by Admin › Registrations. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .gm-table-stack.gm-stack-tablet { display: block; width: 100%; border-spacing: 0; margin-top: .75rem; }
    .gm-table-stack.gm-stack-tablet > thead { display: none; }
    .gm-table-stack.gm-stack-tablet > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
    .gm-table-stack.gm-stack-tablet > tbody > tr { display: block; min-width: 0; padding: .25rem 1rem; border-radius: .75rem;
        border: 1px solid color-mix(in oklch, var(--color-foreground) 10%, transparent); background: var(--color-background); box-shadow: 0 3px 5px #0000000b; }
    .gm-table-stack.gm-stack-tablet > tbody > tr:has(> td[colspan]) { grid-column: 1 / -1; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td > * { min-width: 0; max-width: 100%; margin-left: auto; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td.gm-cell-main > * { margin-left: 0; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; width: auto; min-width: 0;
        padding: .625rem 0; text-align: right; white-space: normal; border: 0; border-radius: 0; box-shadow: none; background: none; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td + td { border-top: 1px dashed color-mix(in oklch, var(--color-foreground) 9%, transparent); }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left;
        font-size: .75rem; font-weight: 500; text-transform: uppercase; opacity: .6; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td.gm-cell-main { display: block; text-align: left; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td.gm-cell-main :is(.whitespace-nowrap, .truncate) { white-space: normal; overflow-wrap: anywhere; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td.gm-cell-actions { justify-content: flex-end; flex-wrap: wrap; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td:empty { display: none; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td[style*="width"] { min-width: 0 !important; max-width: none !important; }
    .gm-table-stack.gm-stack-tablet > tbody > tr > td[colspan] { display: block; text-align: center; }
}
/* Row action links ("Edit · Sessions · Delete", 20px tall text links) — 40px hit rows on touch screens. */
@media (pointer: coarse) {
    td.gm-cell-actions :is(a, button):not(.h-10) { min-height: 2.5rem; }
}

/* ── 7. Dialogs (Midone .modal + x-gm-dialog) ──────────────────────────────────────────────────────── */
/* The overlay itself may scroll for very tall custom dialogs — never with a visible scrollbar. */
.modal { scrollbar-width: none; }
.modal::-webkit-scrollbar { display: none; }
.modal.show { padding-bottom: 1rem; }
/* Phones: 16px from the top instead of 64px (the drop-in animation is kept, just shorter). */
@media (max-width: 639.98px) {
    .modal > .box.-mt-16 { margin-top: -1rem; width: calc(100% - 2rem); }   /* never edge-to-edge (quick search, visits …) */
    .modal.show > .box.-mt-16 { margin-top: 1rem; }
}
/* x-gm-dialog: header + footer stay visible, only the body scrolls (internal, no scrollbar). */
.gm-dlg { display: flex; flex-direction: column; max-height: calc(100dvh - 8rem); }
.gm-dlg > .gm-dlg__head, .gm-dlg > .gm-dlg__foot, .gm-dlg > form > .gm-dlg__foot { flex: none; }
.gm-dlg > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.gm-dlg .gm-dlg__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.gm-dlg .gm-dlg__body::-webkit-scrollbar { display: none; }
/* Grids inside a dialog body: a nowrap / truncated line (member card "@name · Member · since …") made the implicit
   `auto` column as wide as its text, pushing every row and the footer buttons past the dialog (report review, 375px). */
.gm-dlg__body .grid > * { min-width: 0; }
@media (max-width: 639.98px) {
    .gm-dlg { max-height: calc(100dvh - 2rem); padding: 1.25rem; }
    .gm-dlg .gm-dlg__body { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
/* Dialog footers / Midone button rows inside dialogs: full-width stacked buttons on phones are easier to hit. */
@media (max-width: 639.98px) {
    .gm-dlg__foot > .inline-flex, .gm-dlg__foot > a, .gm-dlg__foot > button { width: 100%; }
}
/* Keyboard focus lands on the dialog box (tabindex=-1) — no ring around the whole card. */
.modal > .box:focus { outline: none; }

/* ── 8. Touch targets ──────────────────────────────────────────────────────────────────────────────── */
/* Opt-in for icon buttons smaller than 40px (kebab menus, ×, ↑ votes): keeps the look, grows the hit area. */
@media (pointer: coarse) {
    .gm-tap { position: relative; }
    .gm-tap::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, 2.5rem); height: max(100%, 2.5rem); transform: translate(-50%, -50%); }
    /* Midone dropdown items and pagination links: 40px tall on touch screens. */
    .dropdown-content > a, .dropdown-content > button { min-height: 2.5rem; }
    ul:has(> li.sm\:flex-initial) > li > a { min-height: 2.5rem; }
}

/* Phones: iOS Safari zooms the whole page when a field under 16px gets focus (all Midone fields are 14px). */
@media (pointer: coarse) and (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea,
    .ts-wrapper.ts-wrapper.single .ts-control, .ts-dropdown.ts-dropdown .dropdown-input { font-size: 16px; }
    /* comment / reply / deal-chat composers set their own 14–14.4px later in the page — `body` outranks them */
    body .gm-cbox .gm-composer textarea, body .gm-chat__compose textarea, body .gm-reply textarea { font-size: 16px; }
}
/* Toasts on phones: centred with 16px margins. gmToast passes offset x=16, which Toastify applies as an inline
   transform; on ≤360px Toastify also centres the toast, so the translate pushed it 16px off the left edge.
   Cancel the horizontal part (the `translate` property composes with the inline transform; y is kept). */
@media (max-width: 639.98px) {
    .toastify.gm-toastify.gm-toastify { left: 0 !important; right: 0 !important; margin-left: auto; margin-right: auto; max-width: fit-content; }
    .toastify.gm-toastify.toastify-right, .toastify.gm-toastify.toastify-center { translate: 16px 0; }
    .toastify.gm-toastify.toastify-left { translate: -16px 0; }
}
/* Small "×" on picked photos (gm-files) — bigger hit area on touch. */
@media (pointer: coarse) {
    .gm-files__x::after { content: ""; position: absolute; inset: -.6rem; }
}
/* Emoji picker (gm-composer): 8 × 2.4rem columns were wider than a 320px screen. */
@media (max-width: 399.98px) {
    .gm-emoji-pop.gm-emoji-pop { grid-template-columns: repeat(7, 2.4rem); }
}

/* ── 9. Motion ─────────────────────────────────────────────────────────────────────────────────────── */
/* Respect the OS setting. Loading spinners keep turning (they carry meaning); everything else is instant. */
@media (prefers-reduced-motion: reduce) {
    html:focus-within, .content__scroll-area { scroll-behavior: auto !important; }
    *:not(.loader-spinner):not(.loader-dots):not(.gm-btn-spinner),
    *:not(.loader-spinner):not(.loader-dots):not(.gm-btn-spinner)::before,
    *:not(.loader-spinner):not(.loader-dots):not(.gm-btn-spinner)::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    }
}
.gm-hovermenu .box[tabindex="-1"]:focus { outline: none; }

/* ── 10. Auth layout ───────────────────────────────────────────────────────────────────────────────── */
/* The shell was exactly 100vh with overflow hidden from lg: on a 1024×700 screen the Register button sat below
   the fold and could not be reached; on phones the blue background stopped where the card kept going.
   Grow with the content; `overflow: clip` still trims the decorative rotated shapes without making a scroller. */
.gm-auth-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: clip; }
/* Card position = Midone login/register template, measured 1920…390: the card is centred on 52px + 50vh below xl
   (p-3 + my-10 over a 100vh panel) and on 12px + 50vh from xl (p-3 over a 100vh grid row). The template gets there
   with boxes taller than the screen (52px / 24px of stray page scroll, or clipped by lg:overflow-hidden); here the
   panel is a column whose two flex spacers centre the card on the same point while the page stays exactly one screen
   tall, and a long form simply grows the page (the ::after spacer keeps the card's stacked layer 12px off the edge). */
.gm-auth-panel { flex-direction: column; }
.gm-auth-panel > .box { margin-top: 0; margin-bottom: 0; }
.gm-auth-panel::before, .gm-auth-panel::after { content: ''; flex: 1 1 0; }
@media (max-width: 1279.98px) {
    .gm-auth-panel { height: auto; min-height: calc(100vh - 52px); min-height: calc(100dvh - 52px); padding-top: 52px; padding-bottom: 0; margin-bottom: -12px; }
    .gm-auth-panel::after { min-height: 12px; }
}
@media (min-width: 1280px) {
    .gm-auth-grid { margin-bottom: -1.5rem; }   /* row = the info column's min-h-screen; −p-3 top+bottom keeps the shell 100vh */
    .gm-auth-panel::after { min-height: 1.5rem; }
}

/* ── Email code: six digit boxes (components/otp-input) ── */
.gm-otp { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; }
.gm-otp__box {
    /* Full form width, same height/radius as the form inputs */
    width: 0; height: 3.15rem; flex: 1 1 0; min-width: 0; padding: 0;   /* width 0: no intrinsic width, so the boxes share the form width instead of widening the panel */
    border: 1px solid color-mix(in oklch, var(--color-foreground) 20%, transparent); border-radius: .75rem;
    background: var(--color-background); text-align: center; font-size: 1.5rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--color-foreground); caret-color: var(--color-primary);
    transition: border-color .15s, box-shadow .15s;
}
.gm-otp__box:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 18%, transparent); }
.gm-otp.is-error .gm-otp__box { border-color: color-mix(in oklch, var(--color-danger) 60%, transparent); }
.gm-otp__sep { width: .75rem; height: 2px; flex: none; border-radius: 1px; background: color-mix(in oklch, var(--color-foreground) 25%, transparent); }
@media (max-width: 380px) { .gm-otp { gap: .3rem; } .gm-otp__box { font-size: 1.3rem; } .gm-otp__sep { width: .25rem; } }
@media (pointer: coarse) { .gm-otp__box { font-size: 1.5rem; } }
@media (min-width: 1280px) { .gm-auth-panel .gm-otp { justify-content: flex-start; } }
/* Every auth page (sign in, sign up, codes, reset, approval) has the same form width as Sign In */
@media (min-width: 1280px) { .gm-auth-panel > .box { width: 28rem; max-width: 100%; } }
/* Auth field errors (sign in / sign up) sit in the 20px gap under their field — nothing moves or resizes */
.gm-fgrid > div, .gm-fgrid > div > div { position: relative; }
.gm-ferr { position: absolute; inset-inline: 0; top: 100%; margin-top: 2px; font-size: 11px; line-height: 1.25; color: var(--color-danger);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* Sign-up terms row: the template's one-line row (items-center, leading-none) from xl, where the sentence fits;
   narrower cards wrap it onto two lines, so it keeps a readable line height and a top-aligned checkbox there */
@media (min-width: 1280px) {
    .gm-terms > div { align-items: center; }
    .gm-terms > div > div { margin-top: 0; }
    .gm-terms label { line-height: 1; }
}

/* ── Role pills next to a name (components/role-pill): ADMINISTRATOR (gold) · AUTHOR (primary) — always the same size ── */
.gm-role-pill { display: inline-flex; flex: none; align-items: center; gap: .125rem; padding: 1px .375rem; border-radius: 9999px;
    font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap;
    color: var(--c); background: color-mix(in oklch, var(--c) 14%, transparent); border: 1px solid color-mix(in oklch, var(--c) 40%, transparent); }
.gm-role-pill.hidden { display: none; }
.gm-role-pill > svg { flex: none; width: 11px; height: 11px; }
.gm-role-pill--admin { --c: #a16207; background: color-mix(in oklch, #eab308 18%, transparent); border-color: color-mix(in oklch, #eab308 45%, transparent); }
/* Profile header role label of official accounts (profile.blade.php data-gm-role-label): a button that still looks like the label — opens the official popup */
.gm-role-label-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: .25rem; text-decoration: underline dotted transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.gm-role-label-btn:hover, .gm-role-label-btn:focus-visible { text-decoration-color: currentColor; }
.gm-role-label-btn:focus-visible { outline: 2px solid color-mix(in oklch, currentColor 45%, transparent); outline-offset: 2px; }
.gm-role-pill--staff { --c: #a16207; background: color-mix(in oklch, #eab308 18%, transparent); border-color: color-mix(in oklch, #eab308 45%, transparent); }   /* same as ADMINISTRATOR, its own icon */
.gm-role-pill--author { --c: var(--color-primary); }
/* Moderators (App\Support\Moderation::COLOR): teal pill + avatar ring (gm-admin-frame.js adds .gm-mod-frame) */
.gm-role-pill--moderator { --c: #0f766e; background: color-mix(in oklch, #0d9488 14%, transparent); border-color: color-mix(in oklch, #0d9488 45%, transparent); }
.gm-mod-frame { --color: #0d9488 !important; box-shadow: 0 0 0 1px #0d9488 !important; }
.gm-mod-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 500;
    color: #0f766e; background: color-mix(in oklch, #0d9488 10%, transparent); border: 1px solid color-mix(in oklch, #0d9488 30%, transparent); }
.gm-mod-chip.hidden { display: none; }

/* Code-entry error alert (gmErrHtml): soft danger box, title + details, tries-left chip */
.gm-err-alert { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .8rem; border-radius: .75rem; text-align: start;
    color: var(--color-danger); background: color-mix(in oklch, var(--color-danger) 6%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-danger) 22%, transparent); }
.gm-err-alert__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .15rem; }
.gm-err-alert__title { font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.gm-err-alert__sub { font-size: .75rem; line-height: 1.4; color: color-mix(in oklch, var(--color-danger) 80%, var(--color-foreground)); opacity: .9; }
.gm-err-alert__chip { flex: none; align-self: center; padding: .15rem .55rem; border-radius: 9999px; font-size: .7rem; font-weight: 600; white-space: nowrap;
    background: color-mix(in oklch, var(--color-danger) 12%, transparent); }

/* Theme tint missing from the prebuilt Midone CSS (used by the moderator area pills: sensitive areas) */
.bg-warning\/10 { background-color: color-mix(in oklch, var(--color-warning) 10%, transparent); }

/* RTL data-list tables: the row card's side borders come from Tailwind first:border-l / last:border-r, which don't flip —
   in RTL the first cell is on the right, so move the borders (only when the table isn't stacked into cards). */
@media (min-width: 640px) {
    [dir=rtl] table:not(.gm-stack-tablet) > tbody > tr > td.first\:border-l:first-child { border-left-width: 0; border-right-width: 1px; }
    [dir=rtl] table:not(.gm-stack-tablet) > tbody > tr > td.last\:border-r:last-child { border-right-width: 0; border-left-width: 1px; }
}
@media (min-width: 1024px) {
    [dir=rtl] table.gm-stack-tablet > tbody > tr > td.first\:border-l:first-child { border-left-width: 0; border-right-width: 1px; }
    [dir=rtl] table.gm-stack-tablet > tbody > tr > td.last\:border-r:last-child { border-right-width: 0; border-left-width: 1px; }
}

/* Social proof — "people you follow …" (partials/social-proof, App\Support\SocialProof) */
.gm-sp { display: flex; flex-direction: column; gap: .5rem; }
.gm-sp__row { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: .75rem; font-size: .8125rem; line-height: 1.35;
    background: color-mix(in oklch, var(--c) 6%, transparent); border: 1px solid color-mix(in oklch, var(--c) 18%, transparent); }
.gm-sp__ico { display: flex; flex: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px;
    color: var(--c); background: color-mix(in oklch, var(--c) 12%, transparent); }
.gm-sp__faces { display: flex; flex: none; padding-inline-start: .45rem; }
.gm-sp__face { position: relative; display: flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; margin-inline-start: -.45rem;
    overflow: hidden; border-radius: 9999px; border: 2px solid var(--color-background); font-size: .625rem; font-weight: 600;
    color: var(--c); background: color-mix(in oklch, var(--c) 14%, var(--color-background)); }
.gm-sp__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-sp__text { font-weight: 500; }
.gm-sp__names { margin-top: .1rem; font-size: .75rem; overflow-wrap: anywhere; }
.gm-sp__names a { color: var(--color-primary); }
.gm-sp__names a:hover { text-decoration: underline; }

/* Follower discount — struck original price + chip (listing page, offer / Buy dialog, deal room) */
.gm-fd-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; white-space: nowrap;
    color: #be185d; background: color-mix(in oklch, #db2777 12%, transparent); border: 1px solid color-mix(in oklch, #db2777 28%, transparent); }
.gm-fd-was { text-decoration: line-through; opacity: .55; font-weight: 500; }
@media (min-width: 1024px) { .gm-sp--wide { flex-direction: row; flex-wrap: wrap; } .gm-sp--wide > .gm-sp__row { flex: 1 1 18rem; } }

/* ── Following (App\Support\Follows): locked followers-first cards / page, follow suggestions, Academy card, bell menu, form box ── */
.gm-lockcard__img { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; overflow: hidden;
    height: var(--gm-pcard-h, 10rem); border-radius: .75rem; color: #fff; background: linear-gradient(135deg, #7c3aed, color-mix(in oklch, #7c3aed 50%, #0f172a)); }
.gm-lockcard__bg { position: absolute; inset-inline-end: -1.5rem; top: -1.5rem; width: 8.5rem; height: 8.5rem; opacity: .14; stroke-width: 1; pointer-events: none; }
.gm-lockcard__lock { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 999px; background: rgb(255 255 255 / .18); }
.gm-lockcard__cap { font-size: .75rem; opacity: .9; padding-inline: 1rem; text-align: center; }
.gm-lockcard__btn { display: inline-flex; flex: none; align-items: center; gap: .35rem; height: 2rem; padding-inline: .75rem; margin-inline-start: auto; border-radius: .5rem; cursor: pointer;
    font-size: .75rem; font-weight: 600; color: var(--color-primary); border: 1px solid color-mix(in oklch, var(--color-primary) 55%, transparent);
    background: color-mix(in oklch, var(--color-primary) 16%, transparent); transition: background .15s; }
.gm-lockcard__btn:hover { background: color-mix(in oklch, var(--color-primary) 8%, transparent); }
.gm-lockcard__btn:disabled { opacity: .6; cursor: default; }
.gm-lockpage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 1.25rem; max-width: 40rem; margin-inline: auto; }
.gm-lockpage__icon { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 999px; color: #7c3aed; background: color-mix(in oklch, #7c3aed 12%, transparent); }
.gm-lockpage__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; font-size: .875rem; opacity: .75; }
.gm-lockpage__meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.gm-follow-suggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.gm-follow-suggest__item { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .75rem; border-radius: .75rem; border: 1px solid color-mix(in oklch, var(--color-foreground) 10%, transparent); }
.gm-follow-suggest__item .gm-lockcard__btn { margin-inline-start: 0; }
.gm-acard__banner { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; height: 9rem; padding: 1rem; border-radius: .5rem;
    background: linear-gradient(135deg, var(--c), color-mix(in oklch, var(--c) 55%, #0f172a)); }
.gm-acard__bg { position: absolute; inset-inline-end: -1.25rem; top: -1.25rem; opacity: .16; pointer-events: none; }
.gm-acard__bg svg, .gm-acard__bg i { width: 8rem; height: 8rem; }
.gm-bellmenu { inset-inline-start: 0; width: 16rem; max-width: calc(100vw - 2rem); }
@media (max-width: 639px) { .gm-bellmenu { inset-inline-start: auto; inset-inline-end: 0; } }   /* the bell sits mid-row on phones: open towards the free side */
.gm-early { border-radius: .75rem; border: 1px solid color-mix(in oklch, #7c3aed 28%, transparent); background: color-mix(in oklch, #7c3aed 6%, transparent); padding: .85rem 1rem; }
.gm-early.is-off { opacity: .65; }
.gm-early__row { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.gm-early.is-off .gm-early__row { cursor: default; }
.gm-early__box { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: #7c3aed; cursor: inherit; }

/* ── <x-phone-input>: mobile number with its own dial-code picker (independent of nationality). The box is dir=ltr. ── */
.gm-phone { position: relative; min-width: 0; }
.gm-phone__box { display: flex; align-items: stretch; height: 2.5rem; width: 100%; min-width: 0; overflow: hidden; }
.gm-phone--lg .gm-phone__box { height: 3.125rem; }
.gm-phone__box.is-error { border-color: color-mix(in oklch, var(--color-danger) 60%, transparent) !important; }
.gm-phone__box.is-locked { cursor: not-allowed; background: color-mix(in oklch, var(--color-foreground) 3%, transparent); }
.gm-phone__code { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding-inline: .7rem .55rem; border-inline-end: 1px solid color-mix(in oklch, var(--color-foreground) 10%, transparent); font-size: .875rem; cursor: pointer; background: transparent; color: inherit; }
.gm-phone--lg .gm-phone__code { padding-inline: 1rem .7rem; }
.gm-phone__code:hover:not(:disabled) { background: color-mix(in oklch, var(--color-foreground) 4%, transparent); }
.gm-phone__code:focus-visible { outline: none; background: color-mix(in oklch, var(--color-primary) 8%, transparent); }
.gm-phone__code:disabled { cursor: not-allowed; opacity: .8; }
.gm-phone__dial { font-variant-numeric: tabular-nums; opacity: .85; unicode-bidi: isolate; direction: ltr; }
.gm-phone__chev { width: 1rem; height: 1rem; opacity: .55; }
.gm-phone__num { flex: 1 1 auto; min-width: 0; height: 100%; padding-inline: .75rem; background: transparent; font-size: .875rem; text-align: start; direction: ltr; }
.gm-phone--lg .gm-phone__num { padding-inline: 1rem 1.25rem; font-size: 1rem; }
.gm-phone__num:focus { outline: none; }
.gm-phone__num::placeholder { color: color-mix(in oklch, var(--color-foreground) 40%, transparent); }
.gm-phone__num[readonly] { cursor: not-allowed; }
/* The popup is a twin of the Tom Select nationality dropdown (gm-forms.css .ts-dropdown + .gm-flag-dd in this file):
   same border / radius / shadow, search box, row height, hover pill and selected style — only the "+code" column is extra. */
.gm-phone__pop { position: fixed; z-index: 10050; overflow: hidden; font-size: .875rem; line-height: 18px; color: var(--color-foreground);
    border: 1px solid color-mix(in oklch, var(--color-foreground) 10%, transparent); border-radius: .75rem;
    background: var(--color-background); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .25); }
.gm-phone__search { padding: .5rem; border-bottom: 1px solid color-mix(in oklch, var(--color-foreground) 8%, transparent); }
.gm-phone__search input {
    display: block; width: 100%; height: 2.25rem; padding: 0 .75rem 0 2.1rem; border-radius: .5rem; font-size: .875rem; outline: none;
    border: 1px solid color-mix(in oklch, var(--color-foreground) 12%, transparent); background-color: color-mix(in oklch, var(--color-foreground) 3%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: .65rem center; }
.gm-phone__search input:focus { border-color: color-mix(in oklch, var(--color-primary) 45%, transparent); }
.gm-phone__list { position: relative; max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; padding: .25rem; margin: 0; list-style: none; }
.gm-phone__opt, .gm-flag-dd .ts-dropdown-content > .option { display: flex; align-items: center; gap: .5rem; padding: 6px .65rem; border-radius: .5rem; font-size: .875rem; line-height: 18px; white-space: nowrap; cursor: pointer; }
.gm-phone__opt:hover, .gm-phone__opt.is-hi { background: color-mix(in oklch, var(--color-primary) 9%, transparent); }
.gm-phone__list:hover .gm-phone__opt.is-hi:not(:hover) { background: transparent; }   /* the pointer wins while it is over the list */
.gm-phone__opt[hidden] { display: none; }
.gm-phone__opt.is-on { font-weight: 600; color: var(--color-primary); }
.gm-phone__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-phone__odial, .gm-flag-dd .gm-flag__dial { flex: none; margin-inline-start: auto; opacity: .5; font-size: .8em; font-weight: 400; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.gm-phone__none { padding: .75rem; text-align: center; opacity: .6; }

/* ── Small flags from ONE sprite (App\Support\Flags / window.gmFlag): 250 flags, 40×30 cells, one decode instead of
   hundreds of SVG <img>s in the country pickers. Big single flags keep public/flags/{iso}.svg. ── */
.gm-flag { display: inline-block; flex: none; width: 20px; height: 15px; border-radius: 2px; vertical-align: middle;
    background-image: url(../flags/sprite.png?v=7f8a37a0);
    background-image: image-set(url(../flags/sprite.webp?v=7f8a37a0) type("image/webp"), url(../flags/sprite.png?v=7f8a37a0) type("image/png"));
    background-size: 1600% 1600%; background-repeat: no-repeat;
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-foreground) 8%, transparent); }
.gm-flag--none { background: color-mix(in oklch, var(--color-foreground) 8%, transparent); }

/* Country pickers: the list scrolls (wheel / touch / keys) without a visible scrollbar */
.gm-phone__list, .gm-flag-dd .ts-dropdown-content { scrollbar-width: none; -ms-overflow-style: none; }
.gm-phone__list::-webkit-scrollbar, .gm-flag-dd .ts-dropdown-content::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gm-flag-dd .ts-dropdown-content > .option > span:not(.gm-flag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-flag-item { display: flex !important; align-items: center; gap: .4rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.gm-flag-item > span:not(.gm-flag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-fd-chip--wait { color: var(--color-warning); background: color-mix(in oklch, var(--color-warning) 10%, transparent); border-color: color-mix(in oklch, var(--color-warning) 30%, transparent); }
/* Marketplace cards: follower discount (FollowerDiscount::forCards) */
.gm-fd-card { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; }
/* Middleman desk › Official middlemen cards (Midone users-layout-2): wide cards, Agreement / Remove side by side at the card's end */
.gm-mm-acts { flex: none; margin-inline-start: .75rem; }
/* role · rating stay on one line next to the avatar (wraps only on phones, where the card is stacked) */
@media (min-width: 1024px) { .gm-mm-role { flex-wrap: nowrap; } }
/* Middleman details popup: the stat cards — all in one row on wide dialogs (prebuilt CSS has no grid-cols-6), 3 / 2 a row on smaller screens */
.gm-mm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .gm-mm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gm-mm-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* 3 cards a row (xl+): the buttons become icons (tooltip = the label) so the name keeps its room */
@media (min-width: 1280px) {
    .gm-mm-acts .gm-mm-lbl { display: none; }
    .gm-mm-acts > * { width: 2.25rem; padding: 0; }
}
/* Tabbed x-gm-dialog (Middleman fee & payment): the tab bar stays on top while the body scrolls under it */
.gm-dlg__tabs { position: sticky; top: -2rem; z-index: 3; margin: -2rem -.25rem 1.25rem; padding: 1.25rem .25rem .75rem; background: var(--color-background); }
@media (max-width: 639.98px) {
    .gm-dlg__tabs { top: -1.5rem; margin-top: -1.5rem; padding-top: .75rem; }
    .gm-dlg__tabs [role="tab"] { padding-inline: .25rem; }
}
@media (max-width: 479.98px) { .gm-dlg__tabs .gm-dlg__tablbl { display: none; } }   /* phones: icons only (each tab's title names it) */
/* Fee tiers table: aligned columns, the remove-button column stays narrow */
.gm-tiers { border-collapse: separate; border-spacing: .5rem .4rem; margin-inline: -.5rem; width: calc(100% + 1rem); }
.gm-tiers td, .gm-tiers th { padding: 0; vertical-align: middle; }
.gm-tiers th:last-child, .gm-tiers td:last-child { width: 2.5rem; }
@media (max-width: 479.98px) {
    .gm-tiers { border-spacing: .3rem .35rem; margin-inline: -.3rem; width: calc(100% + .6rem); table-layout: fixed; }
    .gm-tiers th:nth-child(2), .gm-tiers td:nth-child(2) { width: 22%; }
    .gm-tiers th:last-child, .gm-tiers td:last-child { width: 2.25rem; }
    .gm-tiers input { padding-inline-start: .5rem; font-size: .8125rem; }
    .gm-tiers input + span { font-size: .625rem; inset-inline-end: .4rem !important; }
    .gm-tiers td:nth-child(2) input { padding-inline-end: 1.1rem !important; }
    .gm-tiers td:nth-child(1) input, .gm-tiers td:nth-child(3) input { padding-inline-end: 2rem !important; }
    .gm-tiers button { width: 2.25rem; }
}

/* ── Profile on phones & tablets (< 1024px) — TikTok-style layout ─────────────────────────────────────────────────
   profile.blade.php renders BOTH headers: .gm-head4 (desktop, four columns) and .gm-mp (profile/_mobile-head).
   Below 1024px the card chrome is flattened (display: contents) so the tab strip can stick under the top bar for the
   whole page, .gm-head4 is hidden and .gm-mp shown; tabs become an icon strip; grids get denser. Desktop: untouched. */
.gm-mp, .gm-bprog-pct { display: none; }   /* .gm-bprog-pct: the % pill on locked badge medals — phones only */
@media (max-width: 1023.98px) {
    /* Page chrome: a slimmer frame + gutter on this page only (content = screen minus 32px instead of 56px) */
    .content.px-7:has(.gm-mp-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-mp-root)::before, .content:has(.gm-mp-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-mp-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-mp-title { display: none; }

    .gm-mp-card { display: contents; }
    .gm-mp-card::before, .gm-mp-card::after { content: none; display: none; }
    .gm-mp-card > .gm-head4 { display: none; }
    .gm-mp-card > .px-5 { padding-left: 0; padding-right: 0; }
    .gm-mp-tabwrap { display: contents; }

    /* Header: avatar | name, @handle #id, stats */
    .gm-mp { display: block; padding-top: 1.75rem; }
    .gm-mp__top { display: flex; align-items: center; gap: 1rem; }
    .gm-mp__av { width: 5.75rem; height: 5.75rem; border: 4px solid color-mix(in oklch, var(--color) 6%, transparent); }
    .gm-mp__id { flex: 1 1 auto; min-width: 0; }
    /* Name + seal + community logo flow as text: a long name wraps and the badges stay right after its last word */
    .gm-mp__name { display: block; min-width: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
    .gm-mp__name > .gm-pname { display: inline; white-space: normal; overflow: visible; }
    .gm-mp__name > :not(.gm-pname) { vertical-align: -.125em; margin-inline-start: .1rem; }
    .gm-mp__handle { display: flex; flex-wrap: wrap; align-items: center; margin-top: .125rem; font-size: .8125rem; opacity: .6; }
    .gm-mp__dot { margin: 0 .375rem; }
    .gm-mp__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .25rem; max-width: 20rem; margin-top: .5rem; }
    .gm-mp__stat { appearance: none; background: none; border: 0; padding: .125rem 0; margin: 0; font: inherit; color: inherit;
        display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: start; border-radius: .5rem; cursor: pointer; }
    div.gm-mp__stat { cursor: default; }
    .gm-mp__stat > b { font-size: 1.125rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
    .gm-mp__ring { position: relative; width: 2.875rem; height: 2.875rem; margin-bottom: .0625rem; }
    .gm-mp__ring > span { font-size: .75rem; }
    .gm-mp__stat > span:not(.gm-mp__ring) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; opacity: .6; }
    .gm-mp__stat:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-primary) 60%, transparent); outline-offset: 2px; }

    /* Bio lines */
    .gm-mp__bio { margin-top: .875rem; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
    .gm-mp__role { display: flex; align-items: center; gap: .375rem; min-width: 0; font-weight: 500; }
    .gm-mp__role > [data-gm-role-label]:not(button) { opacity: .7; }
    .gm-mp__facts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; font-size: .8125rem; opacity: .7; }
    .gm-mp__fact { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
    .gm-mp__flag { width: 16px; height: 12px; flex: none; border-radius: 2px; object-fit: cover; }
    .gm-mp__areas { position: relative; display: flex; flex-wrap: wrap; gap: .375rem 1rem; }
    .gm-mp__areas > [data-gm-staff-tasks], .gm-mp__areas > [data-gm-mod-areas] { position: static; font-size: .8125rem; }

    /* Pill buttons row (menus open from the row, so they never hang off the screen) */
    .gm-mp__acts { position: relative; display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
    .gm-mp__acts > .relative { position: static; }
    .gm-mp__chip { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.5rem; padding: 0 .875rem; min-width: 0;
        border-radius: .625rem; border: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent);
        background: color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); color: var(--color-foreground);
        font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s, opacity .15s; }
    .gm-mp__chip:hover { background: color-mix(in oklch, var(--color-foreground) 9%, var(--color-background)); }
    .gm-mp__chip:disabled { opacity: .6; }
    .gm-mp__chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .gm-mp__chip--grow { flex: 1 1 auto; }
    .gm-mp__chip--icon { width: 2.5rem; padding: 0; flex: none; }
    .gm-mp__chip--main { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
    .gm-mp__chip--main:hover { background: color-mix(in oklch, var(--color-primary) 88%, black); }
    .gm-mp__chip--wa { color: var(--color-success); }
    .gm-mp__menu { inset-inline-end: 0; max-width: calc(100vw - 2rem); }

    /* Icon tab strip: sticks under the top bar (the scroll area's top) for the whole page */
    /* Labelled icon tabs, one fixed segmented row with every tab visible (same look as the marketplace tabs):
       icon on top, short label under it, count as a badge on the icon corner, active = filled pill */
    ul.gm-mp-tabs { position: relative; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .125rem;
        width: auto; height: auto; margin: 1.25rem 0 0; padding: .25rem; border: 0; border-radius: .875rem; overflow: visible;
        background: color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); }
    ul.gm-mp-tabs > li { min-width: 0; width: auto; }
    ul.gm-mp-tabs [role="tab"] { position: relative; flex-direction: column; gap: .25rem; height: 3.375rem; padding: .375rem .0625rem .3rem; border-radius: .625rem;
        background: none !important; box-shadow: none !important; opacity: 1; font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: 0;
        color: color-mix(in oklch, var(--color-foreground) 72%, transparent); transition: background-color .15s, color .15s; }
    ul.gm-mp-tabs [role="tab"].active { color: #fff; background: var(--color-primary) !important; box-shadow: 0 4px 10px -4px color-mix(in oklch, var(--color-primary) 70%, transparent) !important; }
    ul.gm-mp-tabs [role="tab"] > i, ul.gm-mp-tabs [role="tab"] > svg { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; }
    ul.gm-mp-tabs .gm-tab__lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    ul.gm-mp-tabs .gm-tab__n { position: absolute; top: .125rem; inset-inline-start: calc(50% + .25rem); margin: 0 !important; font-size: 0; opacity: 1; }
    ul.gm-mp-tabs .gm-tab__n::after { content: attr(data-n); display: block; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 9999px; text-align: center;
        font-size: 9.5px; font-weight: 700; line-height: 1.05rem; color: var(--color-foreground);
        background: color-mix(in oklch, var(--color-foreground) 12%, var(--color-background)); box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); }
    ul.gm-mp-tabs [role="tab"].active .gm-tab__n::after { color: var(--color-primary); background: #fff; box-shadow: 0 0 0 1.5px var(--color-primary); }
    /* 7 tabs (team view adds Contact) on narrow phones: two even rows, 4 + 3, so the labels keep their breathing room */
    @media (max-width: 399.98px) {
        ul.gm-mp-tabs:has(> li:nth-child(7)) { grid-auto-flow: row; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: .125rem; }
        ul.gm-mp-tabs:has(> li:nth-child(7)) > li { grid-column: span 3; }
        ul.gm-mp-tabs:has(> li:nth-child(7)) > li:nth-child(n+5) { grid-column: span 4; }
        ul.gm-mp-tabs:has(> li:nth-child(7)) [role="tab"] { height: 3.125rem; }
    }

    /* Panels: closer to the strip */
    .gm-mp-root .tab-content > [role="tabpanel"] > .mt-8:first-child { margin-top: 1.25rem; }

    /* Details dialog: a list with comfortable rows; long values end in an ellipsis */
    .gm-mp-dl__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 .75rem; font-size: .8125rem; font-weight: 600; opacity: .9; }
    .gm-mp-dl__head:first-child { margin-top: 0; }
    .gm-mp-dl__list { display: flex; flex-direction: column; gap: .875rem; }
    .gm-mp-dl__list > div { min-width: 0; }
    .gm-mp-dl__list > div > span.opacity-70 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Badges & communities: compact centred tiles, 3 a row on tablets */
    .gm-mp-root .gm-bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem .75rem; }
    .gm-mp-root .gm-bcard { flex-direction: column; align-items: center; gap: .625rem; padding: 1rem .75rem .875rem; text-align: center; }
    .gm-mp-root .gm-bcard > .min-w-0 { width: 100%; }
    .gm-mp-root .gm-bcard .flex.flex-wrap, .gm-mp-root .gm-bcard .flex.items-center { justify-content: center; }
    .gm-mp-root .gm-bcard p.truncate { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8125rem; }
    .gm-mp-root .gm-bcard > .tooltip.w-16 { width: 100%; align-items: center; }
    .gm-mp-root .gm-bcard .flex.flex-wrap.items-center.gap-2 { flex-direction: column; gap: .25rem; }
    .gm-mp-root .gm-bcard .mt-2.flex.items-center.text-xs { flex-wrap: wrap; margin-top: .375rem; font-size: .6875rem; }
    .gm-mp-root .gm-bcard .mt-2.flex.items-center.text-xs > i, .gm-mp-root .gm-bcard .mt-2.flex.items-center.text-xs > svg { display: none; }
    .gm-mp-root [role="tabpanel"] > .mt-8 > .grid.grid-cols-12.mt-5 { margin-top: .75rem; }
    .gm-mp-root [role="tabpanel"] > .mt-8 > .grid.grid-cols-12 > .col-span-12.mt-2:first-child { margin-top: 0; }
    .gm-mp-root [role="tabpanel"] > .mt-8 > .grid.grid-cols-12 > .col-span-12.mt-2:first-child > .mt-3 { margin-top: 0; }
}
@media (max-width: 639.98px) {
    .gm-mp-root .gm-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Badge tiles (tap → details dialog): only medal · name · tier chip, 3 a row, equal heights;
       locked badges show their progress as a ring + % pill on the medal (the dialog doesn't show progress) */
    .gm-mp-root .gm-bgrid:has(> .gm-bcard[role="button"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem .5rem; }
    .gm-mp-root .gm-bcard[role="button"] { gap: .5rem; padding: .75rem .375rem .625rem; }
    .gm-mp-root .gm-bcard[role="button"] .gm-medal { --s: 46px !important; }
    .gm-mp-root .gm-bcard[role="button"] > .min-w-0 > :not(.flex-wrap) { display: none; }
    .gm-mp-root .gm-bcard[role="button"] > .min-w-0 > .flex-wrap > .font-medium { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        min-height: 2rem; align-content: center; font-size: .75rem; line-height: 1rem; overflow-wrap: anywhere; }   /* always 2 lines tall → every tile the same height */
    .gm-mp-root .gm-bcard[role="button"] .gm-tier { font-size: .5625rem; }
    /* locked: progress = a thin ring round the greyed medal + a "45%" pill on its top-end corner (no bar → same height as the rest) */
    .gm-mp-root .gm-bcard[role="button"] > .tooltip.w-16 { position: absolute; top: calc(.75rem - 4px); inset-inline: 0; width: 54px; height: 54px; margin-inline: auto; padding: 0;
        gap: 0; pointer-events: none; }
    .gm-mp-root .gm-bcard[role="button"] > .tooltip.w-16::before { content: ""; position: absolute; inset: 0; border-radius: 9999px;
        background: conic-gradient(var(--color-primary) calc(var(--p, 0) * 1%), color-mix(in oklch, var(--color-foreground) 10%, transparent) 0);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
    .gm-mp-root .gm-bcard[role="button"] > .tooltip.w-16 > :not(.gm-bprog-pct) { display: none; }
    .gm-mp-root .gm-bcard[role="button"] .gm-bprog-pct { position: absolute; top: -3px; inset-inline-end: -14px; display: inline-flex; align-items: center; height: 1.05rem; padding: 0 .3rem;
        border-radius: 9999px; font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-background); }
    /* Details: a bottom sheet */
    /* fixed (not absolute): the .modal box is 100vh tall, which on iPhone Safari reaches under the bottom toolbar — a fixed
       bottom:0 sits on the VISIBLE viewport's bottom, so Close is never hidden */
    .gm-mp-dlg > .gm-dlg { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); width: 100% !important; max-width: none !important; margin: 0 !important;
        max-height: 85dvh; transform: translateY(100%); transition: transform .3s ease; }
    .gm-mp-dlg.show > .gm-dlg { transform: none; }
    .gm-mp-dlg > .gm-dlg::before { display: none; }
    .gm-mp-dlg > .gm-dlg::after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .gm-mp-dlg .gm-dlg__head { text-align: start; }
}
/* Profile on phones: listings as a dense 2-column grid (TikTok-like tiles). The owner row is the profile itself, so the
   card header keeps only "category · time"; Share / Open stay in each card's ⋮ menu and on the title / photo link. */
@media (max-width: 639.98px) {
    .gm-mp-root .tab-content .grid.grid-cols-12 { column-gap: .625rem !important; row-gap: 1.4rem !important; }   /* row gap = column gap + the stacked-card shadow under each tile (~.75rem) */
    .gm-mp-root .tab-content .grid.grid-cols-12 > .col-span-12.sm\:col-span-6 { grid-column: span 6 / span 6; min-width: 0; }
    .gm-mp-root .gm-pcard { --gm-pcard-h: 8.5rem; }
    .gm-mp-root .gm-pcard > .flex-1 > .border-b:first-child { padding: .5rem .625rem; }
    .gm-mp-root .gm-pcard > .flex-1 > .border-b:first-child > a:first-child,
    .gm-mp-root .gm-pcard > .flex-1 > .border-b:first-child > .ml-3 > :first-child { display: none; }
    .gm-mp-root .gm-pcard > .flex-1 > .border-b:first-child > .ml-3 { margin: 0; }
    .gm-mp-root .gm-pcard > .flex-1 > .p-5 { padding: .5rem; }
    .gm-mp-root .gm-pcard .gm-pcard__cap { padding: 0 .625rem .625rem; }
    .gm-mp-root .gm-pcard .gm-pcard__title { font-size: .8125rem; line-height: 1.1rem; }
    .gm-mp-root .gm-pcard .gm-pcard__menu { top: .375rem; right: .375rem; }
    .gm-mp-root .gm-pcard .gm-pcard__menu > .dropdown-toggle { width: 1.6rem; height: 1.6rem; }
    .gm-mp-root .gm-pcard .gm-car__dots { display: none; }
    .gm-mp-root .gm-pcard .gm-card-chip { top: .375rem; left: .375rem; max-width: calc(100% - 2.75rem); overflow: hidden; font-size: .625rem; }
    .gm-mp-root .gm-pcard .p-5 > .mt-5.grid { margin-top: .5rem; gap: .25rem; font-size: .75rem; }
    .gm-mp-root .gm-pcard .p-5 > .mt-5.grid > .flex > i:first-child,
    .gm-mp-root .gm-pcard .p-5 > .mt-5.grid > .flex:first-child > span.opacity-70 { display: none; }
    .gm-mp-root .gm-pcard .p-5 > .mt-5.grid > div { gap: .375rem; min-width: 0; }
    .gm-mp-root .gm-pcard .p-5 > .mt-5.grid .font-semibold.text-primary { font-size: .875rem; }
    .gm-mp-root .gm-pcard > .flex-1 > .border-t:last-child { gap: .5rem; padding: .5rem .625rem; flex-wrap: nowrap; }
    .gm-mp-root .gm-pcard > .flex-1 > .border-t:last-child > a[href]:last-child,
    .gm-mp-root .gm-pcard > .flex-1 > .border-t:last-child > button[data-content]:not(.gm-save):nth-last-child(2) { display: none; }
    .gm-mp-root .gm-pcard > .flex-1 > .border-t:last-child > .gm-save { margin-left: auto; }
    .gm-mp-root .gm-pcard .gm-rv { margin: .5rem .5rem 0; padding: .4rem .5rem; font-size: .75rem; gap: .4rem; }
    .gm-mp-root .gm-table-stack > tbody > tr > td > .mx-auto { margin-right: 0; }
    /* Guides / questions: the same 2-column tiles */
    .gm-mp-root .grid.grid-cols-12 > .gm-qcol { grid-column: span 6 / span 6; min-width: 0; }
    .gm-mp-root .gm-qcard { gap: .5rem; padding: .5rem; }
    .gm-mp-root .gm-qcard__cover { height: 6.5rem; }
    .gm-mp-root .gm-qcard .gm-chip { font-size: .625rem; }
    .gm-mp-root .gm-qcard .gm-chip:nth-child(2) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-mp-root .gm-qcard a.mt-2.line-clamp-2 { margin-top: .375rem; font-size: .8125rem; line-height: 1.15rem; }
    .gm-mp-root .gm-qcard .mt-auto.grid { padding-top: .375rem; gap: .125rem; font-size: .6875rem; }
    .gm-mp-root .gm-qcard .mt-auto.grid i, .gm-mp-root .gm-qcard .mt-auto.grid svg, .gm-mp-root .gm-qcard .mt-auto.grid span.opacity-70 { display: none; }
    .gm-mp-root .gm-qcard .mt-auto.grid > .flex { gap: .25rem; }
    .gm-mp-root .gm-qcol .border-t.px-5 { gap: .625rem; padding: .5rem .625rem; }
    .gm-mp-root .gm-qcol .border-t.px-5 > a.ml-auto { display: none; }
}

/* Profile › Contact on phones: one compact card per number (number · type · tags · round Call / WhatsApp buttons) and
   social accounts as 2-a-row tiles. Desktop keeps the table / wide cards. */
.gm-ct-m { display: none; }
.gm-ct-tag { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: .25rem; width: 1.375rem; height: 1.375rem; padding: 0; border-radius: 9999px; color: var(--color-success);
    background: color-mix(in oklch, var(--color-success) 10%, transparent); }
.gm-ct-ib { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px;
    border: 1px solid color-mix(in oklch, var(--color-foreground) 15%, transparent); background: var(--color-background); }
.gm-ct-ib--wa { color: var(--color-success); border-color: color-mix(in oklch, var(--color-success) 45%, transparent); background: color-mix(in oklch, var(--color-success) 12%, transparent); }
@media (max-width: 639.98px) {
    .gm-ct-m { display: flex; }
    .gm-table-stack > tbody > tr > td.gm-ct-d { display: none; }
    .gm-ct-num { width: 100%; }
    .gm-ct-socials { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.25rem .5rem !important; }
    .gm-ct-social { padding: .75rem .35rem !important; }
    .gm-ct-social span.block { font-size: 12px; }
    .gm-ct-social { flex-direction: column; justify-content: center; text-align: center; gap: .5rem; padding: 1rem .75rem; }
    .gm-ct-social > span:nth-child(2) { width: 100%; }
    .gm-ct-social .gm-ct-ext { position: absolute; top: .65rem; inset-inline-end: .65rem; width: .85rem; height: .85rem; }
}

/* Profile › Assets / Services toolbar on phones: "Add new …" and the search side by side (search takes the rest) */
@media (max-width: 639.98px) {
    .gm-mp-tb { flex-wrap: nowrap; gap: .5rem; }
    .gm-mp-tb > a { flex: none; padding-inline: .75rem; }
    .gm-mp-tb > div:last-child { margin-top: 0; flex: 1 1 0%; min-width: 0; width: auto; }
    .gm-mp-tb > div:last-child .relative, .gm-mp-tb > div:last-child input { width: 100% !important; min-width: 0; }
}

/* ── Settings on phones & tablets (< 1024px) — TikTok-style settings ──────────────────────────────────────────────
   settings.blade.php (gmSettingsPage): .gm-ms-root is gm-ms--home (the list), gm-ms--sub (one section full-screen) and
   gm-ms--field (one field of it; [data-pf] blocks not open get .gm-ms-off). Home = .gm-ms-home: mini profile + grouped rows
   (icon · label · muted value · chevron). Sections with many fields (.gm-ms-pfl list + .gm-ms-pfbody form) show a list
   first. Sub screens: .gm-ms-bar (back chevron · centred title) pinned at the top of the page frame; cards flattened into
   grouped lists; headers that only repeated the title (.gm-ms-h) are hidden; Save (.gm-ms-save) sticks to the bottom.
   Desktop (≥ 1024px): nothing changes. */
.gm-ms-home, .gm-ms-bar, .gm-ms-pfl, .gm-ms-only, .gm-ms-hcap { display: none; }
.gm-ms-form { display: contents; }
@media (max-width: 1023.98px) {
    /* Page chrome: same slim frame as the profile on phones (16px from the screen edge to the content) */
    .content.px-7:has(.gm-ms-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-ms-root)::before, .content:has(.gm-ms-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-ms-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-ms-root .gm-ms-title, .gm-ms-root .gm-ms-nav { display: none; }
    .gm-ms-root:not(.gm-ms--sub) .gm-ms-panes { display: none; }
    .gm-ms-root.gm-ms--sub .gm-ms-home { display: none; }
    .gm-ms-root { --gm-ms-page: color-mix(in oklch, var(--color-background), var(--color-foreground) 2%);   /* = the page frame */
        --gm-ms-line: color-mix(in oklch, var(--color-foreground) 7%, transparent); }

    /* ── Grouped list (home + section lists) ── */
    .gm-ms-home { display: block; padding: 1.5rem 0 2rem; }
    .gm-ms-home__t { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; }
    .gm-ms-me { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: .875rem; background: var(--color-background);
        border: 1px solid var(--gm-ms-line); }
    .gm-ms-me__av { position: relative; display: flex; flex: none; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; overflow: hidden;
        border-radius: 9999px; background: color-mix(in oklch, var(--color-primary) 10%, transparent); color: var(--color-primary); font-weight: 600; }
    .gm-ms-me__av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .gm-ms-me__id { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
    .gm-ms-me__name { display: flex; align-items: center; gap: .25rem; min-width: 0; font-size: 1rem; font-weight: 600; }
    .gm-ms-me__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; opacity: .6; text-align: start; }
    .gm-ms-me__btn { margin-top: .125rem; font-size: .8125rem; font-weight: 600; color: var(--color-primary); }
    .gm-ms-sh { margin: 1.5rem .25rem .5rem; font-size: .75rem; font-weight: 600; opacity: .5; }
    .gm-ms-pfl > .gm-ms-sh:first-child { margin-top: .25rem; }
    .gm-ms-cap { display: flex; gap: .375rem; margin: .25rem .25rem .75rem; font-size: .75rem; line-height: 1.45; opacity: .6; }
    .gm-ms-cap > svg, .gm-ms-cap > i { flex: none; margin-top: .1rem; }
    .gm-ms-group { overflow: hidden; border-radius: .875rem; background: var(--color-background); border: 1px solid var(--gm-ms-line); }
    .gm-ms-row { appearance: none; display: flex; align-items: center; gap: .875rem; width: 100%; min-height: 3.25rem; padding: 0 1rem; margin: 0;
        border: 0; background: none; font: inherit; color: var(--color-foreground); text-align: start; cursor: pointer; transition: background-color .15s; }
    .gm-ms-group > * + *, .gm-ms-group > * + .gm-ms-form > .gm-ms-row { box-shadow: inset 0 1px 0 var(--gm-ms-line); }
    .gm-ms-row:hover, .gm-ms-row:active { background: color-mix(in oklch, var(--color-foreground) 4%, transparent); }
    .gm-ms-row:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-primary) 60%, transparent); outline-offset: -2px; }
    .gm-ms-row__i { flex: none; width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
    .gm-ms-row__l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
    .gm-ms-row__v { flex: 0 1 auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; opacity: .5; }
    .gm-ms-row__c { flex: none; width: 1rem; height: 1rem; opacity: .35; }
    .gm-ms-row__av { position: relative; display: flex; flex: none; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; overflow: hidden;
        border-radius: 9999px; background: color-mix(in oklch, var(--color-primary) 10%, transparent); color: var(--color-primary); font-size: .75rem; font-weight: 600; }
    .gm-ms-row__av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .gm-ms-row--danger { color: var(--color-danger); }

    /* ── Sub screens: top bar pinned at the top of the page frame (same colour, no box), back chevron at the start, centred title ── */
    .gm-ms-root.gm-ms--sub .gm-ms-bar { display: flex; }
    .gm-ms-bar { position: sticky; top: 0; z-index: 25; align-items: center; height: 3rem; margin: 1.25rem -.625rem 0; padding: 0 .25rem; background: var(--gm-ms-page); }
    .gm-ms-back { appearance: none; display: inline-flex; flex: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 0; border-radius: 9999px;
        background: none; color: inherit; cursor: pointer; }
    .gm-ms-back:active { background: color-mix(in oklch, var(--color-foreground) 6%, transparent); }
    .gm-ms-bar__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 1.0625rem; font-weight: 600; }
    .gm-ms--sub .gm-ms-panes { padding-bottom: 2rem; }

    /* Section lists vs the full form: list first; a field screen shows only that field (+ Save) */
    .gm-ms-pfl { display: block; padding-top: .75rem; }
    .gm-ms-root:not(.gm-ms--field) .gm-ms-pfbody { display: none; }
    .gm-ms-root.gm-ms--field .gm-ms-pfl { display: none; }
    .gm-ms-off { display: none !important; }
    .gm-ms--field .gm-ms-pfbody > :not(.gm-ms-pi, .grid, button) { display: none; }
    .gm-ms--field .gm-ms-pi > form:not(:has([data-pf]:not(.gm-ms-off))) { display: none; }
    .gm-ms--field .gm-ms-pfbody .grid { row-gap: 1rem; }
    .gm-ms--field .gm-ms-pfbody .grid > * { grid-column: 1 / -1; }
    .gm-ms--field .gm-ms-pi .grid > * { display: flex; flex-direction: column; gap: 1rem; }
    .gm-ms--field [data-pf] { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
    .gm-ms--field .gm-ms-pi .grid > :not(:has([data-pf]:not(.gm-ms-off))) { display: none; }   /* the empty column adds no gap */
    .gm-ms--field .gm-ms-pfbody > p { display: none !important; }
    /* A locked field (username, name in its cooldown, verified phone): nothing to save */
    .gm-ms--field .gm-ms-pi form:has([data-pf]:not(.gm-ms-off) input[readonly]:not([onfocus])) .gm-ms-save { display: none; }
    .gm-ms--field #st-avatar { margin: .75rem auto 0; }   /* the photo screen: the same dashed photo card as on desktop */

    /* Section cards: flat, edge to edge, no box */
    .gm-ms-panes .gm-ms-card { margin-top: 0; padding: 0; }
    .gm-ms-panes .gm-ms-card::before, .gm-ms-panes .gm-ms-card::after { display: none; }
    .gm-ms-panes .gm-ms-card > .p-5, .gm-ms-panes .gm-ms-card > form.p-5, .gm-ms-panes .gm-ms-card > .border-b { padding-left: 0; padding-right: 0; }
    .gm-ms-panes .gm-ms-card > .p-5, .gm-ms-panes .gm-ms-card > form.p-5 { padding-top: .75rem; }
    .gm-ms-panes .gm-ms-card + .gm-ms-card, .gm-ms-panes [x-show] + [x-show] > .gm-ms-card { margin-top: 1.5rem; }
    /* Headers that only repeated the title: hide the title + its icon; keep any hint / chip / button, at the end */
    .gm-ms-h { justify-content: flex-end; min-height: 0; padding-top: .5rem !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
    .gm-ms-h > h2, .gm-ms-h > i, .gm-ms-h > svg { display: none !important; }
    .gm-ms-h:not(:has(> :not(h2, i, svg, span.mr-auto:empty, .gm-hint, .gm-ms-x))) { display: none; }
    .gm-ms-h > .gm-hint { display: none; }
    /* …their "i" text becomes a grey caption under the top bar (gmSettingsPage.msHints) */
    .gm-ms-hcap { display: block; margin: .5rem .25rem 0; font-size: .75rem; line-height: 1.45; opacity: .6; }
    .gm-ms-x { display: none !important; }
    button.gm-ms-only { display: flex; }
    a.gm-ms-only { display: inline-block; }
    .gm-ms-h > span.mr-auto:empty { display: none; }
    /* Section descriptions and field helpers: grey captions (on desktop they are "!" hints) */
    .gm-ms-panes p[data-gm-hinted] { display: block !important; }
    .gm-ms-panes p.text-xs[data-gm-hinted] { display: flex !important; }
    .gm-ms-panes p[data-page-note][data-gm-hinted] { margin: 0 .25rem .75rem; font-size: .75rem; }
    .gm-ms-panes label > .gm-hint:not(.tooltip), .gm-ms-panes h2 > .gm-hint:not(.tooltip) { display: none; }

    /* Switch rows (privacy, notifications, VIP …): one white group with dividers instead of separate boxes */
    .gm-ms-panes .flex.flex-col.gap-3:has(> .rounded-xl.border.p-4 + .rounded-xl.border.p-4) { gap: 0; }
    .gm-ms-panes :not(.gm-ms-stats) > .rounded-xl.border.p-4 { background: var(--color-background); border-color: var(--gm-ms-line); padding: .875rem 1rem; }
    .gm-ms-panes :not(.gm-ms-stats) > .rounded-xl.border.p-4 + .rounded-xl.border.p-4 { margin-top: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
    .gm-ms-panes :not(.gm-ms-stats) > .rounded-xl.border.p-4:has(+ .rounded-xl.border.p-4) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .gm-ms-panes :not(.gm-ms-stats) > .rounded-xl.border.p-4 + :not(.rounded-xl.border.p-4) { margin-top: .75rem; }

    /* Inline pickers / switches on the lists (Language, Time zone, Gender, Nationality, Follower discount) */
    .gm-ms-row--sel { position: relative; }
    .gm-ms-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; border: 0; }
    .gm-ms-row--tg { cursor: default; }
    .gm-ms-row__hit { appearance: none; display: flex; flex: 1 1 auto; align-self: stretch; align-items: center; gap: .875rem; min-width: 0; padding: 0; margin: 0;
        border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }

    /* Security & Logins: full-width Devices | Activity switch, compact device rows in one white group, full-width "Log out other sessions" */
    .gm-ms-sectb { flex-wrap: nowrap; padding: .75rem 0 0 !important; border-bottom: 0 !important; }
    .gm-ms-sectb > ul { flex: 1 1 auto; min-width: 0 !important; }
    .gm-ms-secact { margin-inline-start: 0; flex: none; }
    .gm-ms-secact > button[data-tw-target] { display: none !important; }
    .gm-ms-panes .gm-ms-card > .p-5 > .flex.flex-col.divide-y { padding: 0 1rem; border-radius: .875rem; background: var(--color-background); border: 1px solid var(--gm-ms-line); }
    .gm-ms-panes .gm-ms-card > .p-5 > .flex.flex-col.divide-y:not(:has(> div)) { display: none; }
    .gm-ms-panes .gm-ms-card > .p-5 > .flex.flex-col.divide-y > div { min-height: 3.75rem; padding-top: .625rem !important; padding-bottom: .625rem !important; gap: .75rem; }
    .gm-ms-sess > span:first-child { width: 2.25rem; height: 2.25rem; }
    .gm-ms-sess > span:first-child > svg { width: 1.125rem; height: 1.125rem; }
    .gm-ms-sess .font-medium { font-size: .875rem; }
    .gm-ms-sess > button { padding: .3rem .625rem; }

    /* My Giving: the three stats side by side, compact (like the profile stats) */
    .gm-ms-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem !important; }
    .gm-ms-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .75rem .375rem; text-align: center;
        background: var(--color-background); border-color: var(--gm-ms-line) !important; }
    .gm-ms-stats > div > svg, .gm-ms-stats > div > i { width: 1.125rem; height: 1.125rem; }
    .gm-ms-stats > div > .mt-3 { max-width: 100%; margin-top: .375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 600; }
    .gm-ms-stats > div > .text-xs { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
    a.gm-ms-glink { margin: .75rem .25rem 0; font-size: .8125rem; font-weight: 500; color: var(--color-primary); }

    /* Time zone: one clean field (tom-select drew a box inside the box) and its "local time" caption right under it */
    #st-timezone .ts-wrapper { height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
    #st-timezone .ts-wrapper .ts-control { min-height: 2.75rem; }
    #st-timezone > p { margin: -.25rem 0 0; }

    /* Forms: full-width fields, sticky Save at the bottom of the screen */
    .gm-ms-panes [style*="max-width:20rem"], .gm-ms-panes [style*="max-width:28rem"], .gm-ms-panes .max-w-md { max-width: none !important; }
    .gm-ms-panes input.h-10, .gm-ms-panes select.h-10 { height: 2.75rem; }
    .gm-ms-save { position: sticky; bottom: .75rem; z-index: 5; width: 100% !important; height: 2.875rem !important; margin-top: 1.25rem; border-radius: .75rem;
        background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--color-primary) 60%, transparent); }
    .gm-ms-panes div:has(> .gm-ms-save:only-child) { position: sticky; bottom: .75rem; z-index: 5; }
    .gm-ms-panes div > .gm-ms-save:only-child { position: relative; bottom: auto; }

    /* Personal information (full form): photo first, then the fields */
    .gm-ms-pi { gap: 1.25rem; }
    .gm-ms-pi > form { order: 2; }
    .gm-ms-pi > #st-avatar { order: 1; margin-top: 0; }
}

/* Profile on phones: the member number centred under the avatar (dark pill, same as the desktop "# 121") */
.gm-mp__avwrap { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; }
.gm-mp__num { display: inline-flex; align-items: center; gap: .125rem; margin-top: -.6rem; padding: .2rem .5rem; border-radius: 9999px; position: relative; z-index: 1;
    font-size: 11px; font-weight: 600; line-height: 1; color: var(--color-background); background: var(--color-foreground);
    box-shadow: 0 0 0 2px var(--color-background); font-variant-numeric: tabular-nums; }

/* ── Community on phones & tablets (< 1024px) ───────────────────────────────────────────────────────────────────────
   communities/show.blade.php renders BOTH headers: .gm-head4 (desktop) and .gm-mc (communities/_mobile-head), which reuses
   the profile's .gm-mp__* pieces, its .gm-mp-card flattening, .gm-mp-tabs strip and the .gm-mp-dlg "Details" sheet.
   Members / requests become a compact contact list: the name link (.gm-mc-link) stretches over the row → profile, the
   ⋯ menu and approve / decline buttons sit above it. communities/index.blade.php (.gm-ci-*): one toolbar row + compact
   rows. Desktop (≥ 1024px): nothing changes (.gm-mc-ico stays hidden there). */
.gm-mc-ico { display: none; }
.gm-menu a.gm-mc__mi { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: .5rem; font-size: .8rem; text-align: start; }
.gm-menu a.gm-mc__mi:hover { background: color-mix(in oklch, var(--color-foreground) 6%, transparent); }
@media (max-width: 1023.98px) {
    /* Page chrome: same slim frame as the profile on phones */
    .content.px-7:has(.gm-mc-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-mc-root)::before, .content:has(.gm-mc-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-mc-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }

    /* Header */
    .gm-mc .gm-mp__handle { align-items: center; }
    .gm-mc .gm-mp__stats { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: 1.5rem; }
    .gm-mc .gm-mp__chip [data-lucide], .gm-mc .gm-mp__chip svg { flex: none; width: 1rem; height: 1rem; }
    .gm-mc__chip--wait { color: var(--color-warning); border-color: color-mix(in oklch, var(--color-warning) 40%, transparent);
        background: color-mix(in oklch, var(--color-warning) 10%, var(--color-background)); }
    .gm-mc__chip--in { color: var(--color-success); }
    .gm-mc__chip--in[data-admin] { color: #a16207; }
    .gm-mc .gm-mp__menu { margin-top: .375rem; }

    /* Tabs: icon + label, scroll sideways if they ever don't fit (never cut off), not sticky */
    ul.gm-mc-tabs { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    ul.gm-mc-tabs::-webkit-scrollbar { display: none; }
    ul.gm-mc-tabs [role="tab"] { gap: .375rem; padding: 0 .625rem; font-size: .875rem; }
    ul.gm-mc-tabs [role="tab"] > i, ul.gm-mc-tabs [role="tab"] > svg { flex: none; width: 1.125rem; height: 1.125rem; }
    ul.gm-mc-tabs [role="tab"] > span { margin-left: 0; margin-right: 0; }
    ul.gm-mc-tabs [role="tab"].active::after { bottom: 0; width: 2.5rem; margin-left: -1.25rem; }
    .gm-mc-root > [role="tabpanel"] > .gm-mc-grid.mt-8, .gm-mc-root > [role="tabpanel"].mt-8 { margin-top: 1rem; }

    /* Members / requests: a compact list */
    .gm-mc-grid { row-gap: .25rem !important; }
    .gm-mc-h { display: none; }
    .gm-mc-tb { flex-wrap: nowrap; gap: .5rem; margin-bottom: .5rem; }
    .gm-mc-tb > button { flex: none; padding-inline: .75rem; }
    .gm-mc-tb > div:last-child { flex: 1 1 0%; min-width: 0; width: auto; }
    .gm-mc-card { padding: .5rem .25rem; border-radius: .75rem; transition: background-color .15s; }
    .gm-mc-card::before, .gm-mc-card::after { display: none; }
    .gm-mc-card:hover, .gm-mc-card:active { background: color-mix(in oklch, var(--color-foreground) 4%, transparent); }
    .gm-mc-card:has(.gm-menu:not([x-cloak]):not([style*="none"])) { z-index: 5; }   /* an open ⋯ menu stays above the rows below */
    .gm-mc-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 .75rem; height: auto; text-align: start; }
    .gm-mc-av, .gm-mc-av > span.block { width: 2.75rem; height: 2.75rem; }
    .gm-mc-av.border-3, .gm-mc-av > span.border-3 { border-width: 2px; }
    .gm-mc-av .gm-avatar__crown { width: 1.1rem; height: 1.1rem; }
    .gm-mc-av .gm-avatar__crown > svg, .gm-mc-av .gm-avatar__crown > i { width: .625rem; height: .625rem; }
    .gm-mc-id { flex: 1 1 0%; width: auto; min-width: 0; margin-top: 0; }
    .gm-mc-name { justify-content: flex-start; }
    .gm-mc-sub { margin-top: .0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-mc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
    .gm-mc-acts { position: relative; z-index: 2; flex: none; flex-wrap: nowrap; gap: .375rem; margin-top: 0; }
    .gm-mc-view { display: none; }
    .gm-mc-more { margin-left: 0; margin-right: 0; }
    .gm-mc-acts button { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 9999px; }
    .gm-mc-more > button { border-color: transparent; background: none; }
    .gm-mc-ico { display: block; }
    .gm-mc-btxt { display: none; }
    .gm-mc-lock { position: relative; z-index: 2; flex-basis: 100%; margin-top: .25rem; margin-inline-start: 3.5rem; }
    .gm-mc-note { position: relative; z-index: 2; margin: .375rem 0 .125rem; margin-inline-start: 3.5rem; padding: .375rem .625rem; text-align: start; font-size: .8125rem; }
}
@media (max-width: 639.98px) {
    .gm-mc-grid > .gm-mcol { grid-column: span 12 / span 12; }
}

/* Communities list on phones & tablets: compact rows (logo · name + facts · status), the name link covers the card */
@media (max-width: 1023.98px) {
    .gm-ci-card { padding: .75rem .875rem; }
    .gm-ci-row { flex-direction: row; align-items: center; gap: .75rem; }
    .gm-ci-logo { width: 3rem; height: 3rem; border-width: 2px; margin: 0; }
    .gm-ci-id { flex: 1 1 0%; min-width: 0; margin: 0; text-align: start; }
    .gm-ci-link { display: flex; max-width: 100%; }
    .gm-ci-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: .75rem; }
    .gm-ci-sub { overflow-wrap: anywhere; }
    .gm-ci-sub a, .gm-ci-acts { position: relative; z-index: 2; }
    .gm-ci-acts { flex: none; margin-top: 0; }
    .gm-ci-view { display: none; }
    .gm-ci-root .grid.grid-cols-12 { row-gap: 1.25rem; }
}
@media (max-width: 767.98px) {
    /* "Add New Community" · filter · search in one row (search takes the rest) */
    .gm-ci-tb { flex-wrap: nowrap; gap: .5rem; }
    .gm-ci-tb > a { flex: none; margin: 0; padding-inline: .75rem; }
    .gm-ci-tb > .dropdown { flex: none; }
    .gm-ci-tb > form { flex: 1 1 0%; min-width: 0; width: auto; margin: 0; }
    .gm-ci-tb > form > .relative, .gm-ci-tb > form input { width: 100%; }
}

/* ── Marketplace on phones & tablets (< 1024px) ────────────────────────────────────────────────────────────────────
   marketplace/index (.gm-mk-root): title row with icon buttons (labels → .gm-mk-lbl, screen-reader only), section tabs as one
   fixed segmented row of 6 equal icon tabs (all visible, nothing scrolls sideways; count = badge on the icon), one toolbar row
   (primary "add" · search · filter sheet #mk-filter · ＋ menu; the Sort / "Show requests" selects move into the sheet),
   listings / auctions as 2-column tiles (3 on tablets), buyer requests as compact full-width cards.
   marketplace/show (.gm-mk-show): flat page re-ordered with `order` — gallery, title, badges, price, seller row (+ trust ring,
   Follow), key facts (2-column grid), description, trade box, reactions, comments; "More from…" as a sideways row; a sticky
   action bar (marketplace/_bar) with the trade box's main action + save / share. marketplace/request (.gm-mk-rqp): one
   column — request, answer form, answers. Desktop (≥ 1024px): nothing changes (.gm-mk-only / .gm-mk-bar stay hidden). */
.gm-mk-only, .gm-mk-bar { display: none; }
@media (max-width: 1023.98px) {
    /* Page chrome: same slim frame as the profile on phones (16px from the screen edge to the content) */
    .content.px-7:has(.gm-mk-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-mk-root)::before, .content:has(.gm-mk-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-mk-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-mk-root { --gm-mk-line: color-mix(in oklch, var(--color-foreground) 9%, transparent); }

    /* ── Home: title + icon buttons ── */
    .gm-mk-root > .mt-8:first-child { margin-top: 1rem; }
    .gm-mk-head { flex-wrap: nowrap; gap: .25rem; margin-top: 1.25rem; }
    .gm-mk-head > h2 { min-width: 0; font-size: 1.375rem; font-weight: 700; }
    .gm-mk-hbtn { position: relative; flex: none; width: 2.5rem; height: 2.5rem; justify-content: center; border-radius: 9999px; opacity: .75; }
    .gm-mk-hbtn > svg, .gm-mk-hbtn > i { width: 1.25rem; height: 1.25rem; }
    .gm-mk-hbtn:active { background: color-mix(in oklch, var(--color-foreground) 6%, transparent); }
    .gm-mk-hbtn--ad { opacity: 1; }
    .gm-mk-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    /* Section tabs → one fixed segmented row of 6 equal icon tabs (icon · short label · count badge on the icon corner);
       all visible at once, nothing scrolls sideways; long labels end in "…" */
    .gm-mk-root .gm-mtabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .125rem; margin: .625rem 0 0; padding: .25rem; overflow: visible;
        border: 0; border-radius: .875rem; background: color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); }
    .gm-mk-root .gm-mtab { flex-direction: column; justify-content: center; min-width: 0; height: 3.375rem; padding: .375rem .0625rem .3rem; gap: .25rem; border-radius: .625rem;
        font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: 0; opacity: 1; color: color-mix(in oklch, var(--color-foreground) 72%, transparent); }
    .gm-mk-root .gm-mtab::after { display: none; }
    .gm-mk-root .gm-mtab > svg { flex: none; width: 1.25rem; height: 1.25rem; }
    .gm-mk-root .gm-mtab > span:not(.gm-mtab__n) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-mk-root .gm-mtab.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 4px 10px -4px color-mix(in oklch, var(--color-primary) 70%, transparent); }
    .gm-mk-root .gm-mtab__n { position: absolute; top: .125rem; inset-inline-start: calc(50% + .25rem); min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
        font-size: 9.5px; font-weight: 700; line-height: 1.05rem; letter-spacing: 0; color: var(--color-foreground);
        background: color-mix(in oklch, var(--color-foreground) 12%, var(--color-background)); box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); }
    .gm-mk-root .gm-mtab.is-active .gm-mtab__n { color: var(--color-primary); background: #fff; box-shadow: 0 0 0 1.5px var(--color-primary); }
    .gm-mk-root .gm-mtab--end { margin-left: 0; margin-right: 0; }

    /* Toolbar: add · search · filter · ＋ in one row */
    .gm-mk-tb { flex-wrap: nowrap; gap: .5rem; margin-top: 0; }
    .gm-mk-tb > .gm-mk-add { order: 1; flex: none; height: 2.5rem; margin: 0; padding: 0 .875rem; border-radius: .625rem; box-shadow: none;
        background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
    .gm-mk-tb > .gm-mk-add:hover { background: color-mix(in oklch, var(--color-primary) 88%, black); }
    .gm-mk-tb > .gm-mk-add::before, .gm-mk-tb > .gm-mk-add::after { display: none; }
    .gm-mk-tb > .gm-mk-search { order: 2; flex: 1 1 0%; min-width: 0; width: auto; margin: 0; }
    .gm-mk-tb > .gm-mk-search > .relative { width: 100%; }
    .gm-mk-tb > .gm-mk-search input { height: 2.5rem; border-radius: .625rem; }
    .gm-mk-tb > .gm-mk-fbtn { order: 3; }
    .gm-mk-tb > .gm-mk-more { order: 4; flex: none; }
    .gm-mk-tb > .gm-mk-more > button { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: .625rem; }
    .gm-mk-tb > .gm-mk-sel { display: none; }
    .gm-mk-fbtn { position: relative; display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .625rem;
        border: 1px solid var(--gm-mk-line); background: var(--color-background); color: inherit; cursor: pointer; }
    .gm-mk-fbtn__dot { position: absolute; top: .4rem; inset-inline-end: .4rem; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-background); }
    #mk-filter .gm-dlg__body { padding-top: 1rem; padding-bottom: 1rem; }
    /* closed Midone menus wait (invisible) next to their button — anchored at its end so they never widen the page */
    .gm-mk-root .dropdown > .dropdown-menu:not(.show) { inset-inline-start: auto; inset-inline-end: 0; }

    /* Grid: even gaps (row gap = column gap + the stacked-card shadow under each tile) */
    .gm-mk-grid { column-gap: .625rem !important; row-gap: 1.4rem !important; margin-top: .875rem; }
    .gm-mk-grid > .col-span-12:not(.sm\:col-span-6) > .box.p-5 { padding: 1rem; }

    /* ── Listing tiles (marketplace._card): photo with the title, price, one meta line, seller, counts ── */
    .gm-mk-root .gm-pcard { --gm-pcard-h: 8.5rem; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-b:first-child { order: 1; padding: 0 .625rem .5rem; border-bottom: 0; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-b:first-child > a:first-child { width: 1.375rem; height: 1.375rem; border-width: 1px; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-b:first-child > a:first-child > span { font-size: .5rem; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-b:first-child > .ml-3 { margin-left: .375rem; margin-right: 0; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-b:first-child > .ml-3 > :first-child { font-size: .75rem; font-weight: 500; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-b:first-child > .ml-3 > :first-child svg { width: .875rem; height: .875rem; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-b:first-child > .ml-3 > :nth-child(2) { display: none; }
    .gm-mk-root .gm-pcard > .flex-1 > .p-5 { padding: .5rem; }
    .gm-mk-root .gm-pcard .gm-pcard__cap { padding: 0 .625rem .625rem; }
    .gm-mk-root .gm-pcard .gm-pcard__title { font-size: .8125rem; line-height: 1.1rem; }
    .gm-mk-root .gm-pcard .gm-pcard__menu { top: .375rem; right: .375rem; }
    .gm-mk-root .gm-pcard .gm-pcard__menu > .dropdown-toggle { width: 1.6rem; height: 1.6rem; }
    .gm-mk-root .gm-pcard .gm-car__dots { display: none; }
    .gm-mk-root .gm-pcard .gm-card-chip { top: .375rem; left: .375rem; max-width: calc(100% - 2.75rem); overflow: hidden; font-size: .625rem; }
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid { margin-top: .5rem; gap: .25rem; padding: 0 .125rem; font-size: .75rem; }
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid > .flex:first-child { flex-wrap: wrap; row-gap: .25rem; }
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid > .flex > i:first-child, .gm-mk-root .gm-pcard .p-5 > .mt-5.grid > .flex > svg:first-child,
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid > .flex:first-child > span.opacity-70 { display: none; }
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid > div { gap: .375rem; min-width: 0; }
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid .font-semibold { font-size: .9375rem; }
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid .gm-fd-chip { font-size: .625rem; padding: 0 .4rem; }
    .gm-mk-root .gm-pcard .p-5 > .mt-5.grid .tooltip.size-6 { width: 1.25rem; height: 1.25rem; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-t:last-child { order: 2; gap: .5rem; padding: .5rem .625rem; flex-wrap: nowrap; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-t:last-child > a[href]:last-child,
    .gm-mk-root .gm-pcard > .flex-1 > .border-t:last-child > button[data-content]:not(.gm-save):nth-last-child(2) { display: none; }
    .gm-mk-root .gm-pcard > .flex-1 > .border-t:last-child > .gm-save { margin-left: auto; }
    .gm-mk-root .gm-pcard .gm-rv { margin: .5rem .5rem 0; padding: .4rem .5rem; font-size: .75rem; gap: .4rem; }
    /* followers-first (locked) tiles */
    .gm-mk-root .gm-lockcard > .p-5 { padding: .5rem; }
    .gm-mk-root .gm-lockcard > .p-5 > .mt-4 { margin-top: .5rem; font-size: .75rem; line-height: 1.1rem; }
    .gm-mk-root .gm-lockcard > .p-5 > .mt-3 { margin-top: .375rem; font-size: .75rem; }
    .gm-mk-root .gm-lockcard > .border-t:last-child { padding: .5rem .625rem; flex-wrap: wrap; gap: .375rem; }
    .gm-mk-root .gm-lockcard > .border-t:last-child > span { display: none; }
    .gm-mk-root .gm-lockcard .gm-lockcard__btn { width: 100%; justify-content: center; margin: 0; }

    /* ── Auction tiles: compact, same weight as listing tiles — photo (chip + timer), 2-line title, current bid big,
       one muted line "Buy now … · N bids" (.gm-mk-auc__meta), a small reserve chip, a slim full-width button ── */
    .gm-mk-auc > .border-b:first-child { display: none; }
    .gm-mk-auc > .p-5 { padding: .5rem; }
    .gm-mk-auc .gm-car { height: 8.5rem !important; }
    .gm-mk-auc .gm-car__dots, .gm-mk-auc .gm-car__count { display: none; }
    .gm-mk-auc .gm-card-chip { top: .375rem; left: .375rem; font-size: .625rem; }
    .gm-mk-auc .gm-card-chip + span { right: .375rem !important; bottom: .375rem !important; padding: .125rem .45rem !important; font-size: .6875rem; }
    .gm-mk-auc .gm-card-title { margin-top: .5rem; padding: 0 .125rem; min-height: 2.2rem; font-size: .8125rem; line-height: 1.1rem; }
    .gm-mk-auc .p-5 > .grid { display: block; margin-top: .375rem; padding: 0 .125rem; border: 0; border-radius: 0; }
    .gm-mk-auc .p-5 > .grid > div:first-child > .text-xs { display: none; }
    .gm-mk-auc .p-5 > .grid > div:first-child > .font-semibold { margin-top: 0; font-size: .9375rem; line-height: 1.35rem; }
    .gm-mk-auc .p-5 > .grid > .text-right { display: none; }
    .gm-mk-auc__meta { display: block; margin-top: .0625rem; padding: 0 .125rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .6875rem; opacity: .65; }
    .gm-mk-auc .p-5 > .mt-3.flex { margin-top: .375rem; padding: 0 .125rem; gap: .25rem; font-size: .625rem; }
    .gm-mk-auc .p-5 > .mt-3.flex > span:first-child { display: none; }
    .gm-mk-auc .p-5 > .mt-3.flex > span:not(:first-child) { padding: .0625rem .4rem; border-radius: 9999px; font-weight: 600; background: color-mix(in oklch, currentColor 11%, transparent); }
    .gm-mk-auc .p-5 > .mt-3.flex > span > svg { width: .75rem; height: .75rem; }
    .gm-mk-auc > .border-t:last-child { padding: .5rem; }
    .gm-mk-auc > .border-t:last-child > span { display: none; }
    .gm-mk-auc > .border-t:last-child > a { width: 100%; height: 2rem; justify-content: center; margin-left: 0; margin-right: 0; font-size: .8125rem; border-radius: .5rem; }

    /* ── Buyer requests: 2-column tiles (3 on tablets) — kind chip + budget band, 2-line title, answers · closes, slim Answer button ── */
    .gm-mk-rq > .box > .border-b:first-child { display: none; }
    .gm-mk-rq > .box > .p-5 { padding: .5rem; }
    .gm-mk-rq .gm-rq-ban { height: auto !important; min-height: 4.75rem; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .375rem; padding: .5rem .625rem .5rem; border-radius: .625rem; }
    .gm-mk-rq .gm-rq-ban > span:first-child { display: none; }
    .gm-mk-rq .gm-rq-ban > span:nth-child(2) { gap: .25rem; }
    .gm-mk-rq .gm-rq-ban > span:nth-child(2) > span { max-width: 100%; padding: .0625rem .45rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .625rem; }
    .gm-mk-rq .gm-rq-ban > span:nth-child(2) > span > svg { width: .75rem; height: .75rem; flex: none; }
    .gm-mk-rq .gm-rq-ban > span:last-child { max-width: 100%; min-width: 0; }
    .gm-mk-rq .gm-rq-ban > span:last-child > .uppercase { font-size: .5625rem; }
    .gm-mk-rq .gm-rq-ban > span:last-child > .text-xl { font-size: .8125rem; line-height: 1.1rem; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    .gm-mk-rq .gm-card-title { margin-top: .5rem; padding: 0 .125rem; min-height: 2.2rem; font-size: .8125rem; line-height: 1.1rem; }
    .gm-mk-rq .p-5 > .mt-2.flex { margin-top: .375rem; padding: 0 .125rem; gap: .5rem; min-height: 0 !important; font-size: .6875rem; }
    .gm-mk-rq .p-5 > .mt-2.flex svg { width: .8125rem; height: .8125rem; margin-inline-end: .25rem; }
    .gm-mk-rq .p-5 > .mt-2.flex > span:first-child { flex: none; }
    .gm-mk-rq .gm-card-desc { display: none; }
    .gm-mk-rq > .box > .border-t:last-child { flex-wrap: wrap; gap: .375rem; padding: .5rem; }
    .gm-mk-rq > .box > .border-t:last-child > span.inline-flex { display: none; }
    .gm-mk-rq > .box > .border-t:last-child > a { width: 100%; height: 2rem; justify-content: center; margin: 0; font-size: .8125rem; border-radius: .5rem; }
    .gm-mk-ac > .box > .border-b:first-child { padding: .625rem .75rem; }
    .gm-mk-ac > .box > .border-b:first-child > a:first-child { width: 2.25rem; height: 2.25rem; border-width: 2px; }
    .gm-mk-ac > .box > .p-5 { padding: .75rem; }
}
@media (max-width: 639.98px) {
    .gm-mk-grid > .col-span-12.sm\:col-span-6 { grid-column: span 6 / span 6; min-width: 0; }
    .gm-mk-grid > .gm-mk-ac.col-span-12 { grid-column: span 12 / span 12; }
}
@media (max-width: 479.98px) {
    /* Requests tab: "Post a request" → an icon-only ＋ (aria-label keeps the name) so the search keeps its room */
    .gm-mk-tb > .gm-mk-add--rq { width: 2.5rem; padding: 0; justify-content: center; }
    .gm-mk-add--rq > .gm-mk-addlbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .gm-mk-add--rq > svg { width: 1.25rem; height: 1.25rem; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .gm-mk-grid > .col-span-12.sm\:col-span-6:not(.gm-mk-ac) { grid-column: span 4 / span 4; min-width: 0; }
    .gm-mk-root .gm-pcard { --gm-pcard-h: 9.5rem; }
    .gm-mk-auc .gm-car { height: 9.5rem !important; }
}

/* ── Listing page + buyer request page on phones & tablets ── */
@media (max-width: 1023.98px) {
    /* banners (sold / not live / early access) and the back link */
    .gm-mk-show > .mt-8.rounded-xl { margin-top: 1rem; padding: .625rem .875rem; font-size: .8125rem; }
    .gm-mk-back { margin-top: 1rem; }
    .gm-mk-cols { row-gap: 1.25rem !important; }

    /* the post: flat (no card), re-ordered */
    .gm-mk-post { display: flex; flex-direction: column; margin-top: .75rem; padding: 0; background: none; border: 0; box-shadow: none; }
    .gm-mk-post::before, .gm-mk-post::after { display: none; }
    .gm-mk-post > .gm-mk-gal { order: -6; margin-top: 0; }
    .gm-mk-gal .gm-car { height: min(78vw, 26rem) !important; border-radius: .875rem; }
    .gm-mk-post > .gm-mk-title { order: -5; margin-top: .875rem; font-size: 1.25rem; line-height: 1.6rem; font-weight: 600; }
    .gm-mk-post > .gm-mk-badges { order: -4; margin-top: .5rem; gap: .375rem; }
    /* price: big price · conversions on one muted line · "Platform valuation" as one compact row (small icon, range, chip) */
    .gm-mk-post > .gm-mk-price { order: -3; margin-top: .75rem; padding: .875rem; gap: 0; border-radius: .875rem; }
    .gm-mk-price > div { flex-basis: 100% !important; }
    .gm-mk-price .text-2xl { font-size: 1.625rem; line-height: 2.125rem; }
    .gm-mk-price > .min-w-0 > .text-xs.uppercase { font-size: .6875rem; }
    .gm-mk-price > .min-w-0 > .mt-1.text-xs { margin-top: .125rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; }
    .gm-mk-price > .gm-val { align-items: flex-start; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--gm-mk-line); }
    .gm-mk-price > .gm-val > span:first-child { width: 1.25rem; height: 1.25rem; margin-top: .0625rem; border-radius: 0; background: none !important; }
    .gm-mk-price > .gm-val > span:first-child > svg { width: 1.125rem; height: 1.125rem; }
    .gm-mk-price > .gm-val > .min-w-0 { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
    .gm-mk-price > .gm-val > .min-w-0 > .uppercase { flex: 1 1 auto; font-size: .6875rem; line-height: 1.375rem; letter-spacing: .02em; }
    .gm-mk-price > .gm-val > .min-w-0 > .font-semibold { margin-top: 0; font-size: .875rem; line-height: 1.375rem; white-space: nowrap; }
    .gm-mk-price > .gm-val > .min-w-0 > span { margin-top: 0; }
    .gm-mk-price > .flex-none { width: 100%; margin-top: .75rem; }
    /* seller: line 1 avatar · full name + badges · ⋯ — line 2 "Seller · member since …" (+ date · category) — then equal action buttons */
    .gm-mk-post > .gm-mk-seller { order: -2; margin-top: .75rem; flex-wrap: wrap; align-items: center; gap: 0 .625rem; padding: .875rem; border-radius: .875rem;
        border: 1px solid var(--gm-mk-line); background: var(--color-background); }
    .gm-mk-seller::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
    .gm-mk-seller > .min-w-0 { flex: 1 1 0%; }
    .gm-mk-seller > .gm-mk-smore { order: 1; align-self: flex-start; margin-top: -.25rem; margin-inline-end: -.5rem; }
    .gm-mk-seller > .gm-mk-smore > button { width: 2.25rem; height: 2.25rem; }
    .gm-mk-seller > .gm-mk-trust, .gm-mk-seller > .gm-mk-follow, .gm-mk-seller > .gm-mk-premf { order: 2; flex: 1 1 0%; min-width: 0; margin-top: .75rem; }
    /* no inline padding on the buttons themselves: with flex-basis 0 it would make them unequal — the labels keep their own small inset */
    .gm-mk-trust, .gm-mk-follow, .gm-mk-premf > button { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.375rem; padding: 0;
        border-radius: .625rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden;
        border: 1px solid var(--gm-mk-line); background: color-mix(in oklch, var(--color-foreground) 3%, var(--color-background)); color: var(--color-foreground); }
    .gm-mk-premf > button { border-width: 0; box-shadow: inset 0 0 0 1px var(--gm-mk-line); }
    .gm-mk-trust > span:last-child, .gm-mk-premf > button > span, .gm-mk-follow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-inline-end: .25rem; }
    .gm-mk-seller:has(> .gm-mk-premf) :is(.gm-mk-trust, .gm-mk-follow, .gm-mk-premf > button) { gap: .3rem; font-size: .75rem; }
    .gm-mk-trust b { font-weight: 700; }
    .gm-mk-trust > .gm-mk-ring { width: 1.25rem; height: 1.25rem; }
    .gm-mk-trust > .gm-mk-ring > span { width: calc(100% - 5px); height: calc(100% - 5px); }
    .gm-mk-premf { display: flex; }
    .gm-mk-premf > button { width: 100%; }
    .gm-mk-premf > button > .gm-hide-xs { display: none; }
    .gm-mk-premf > button > .gm-mk-only { display: inline; }
    .gm-mk-premf > button.is-on { color: #7c3aed; background: color-mix(in oklch, #7c3aed 10%, var(--color-background)); box-shadow: inset 0 0 0 1px color-mix(in oklch, #7c3aed 35%, transparent); }
    .gm-mk-post > .gm-sp { order: -2; margin-top: .625rem; }
    .gm-mk-post > .gm-mk-spec { order: -1; margin-top: 1.25rem; }
    .gm-mk-post > .gm-mk-desc { margin-top: 1.25rem; text-align: left; font-size: .9375rem; line-height: 1.6; }
    .gm-mk-seller > a:first-child { width: 2.75rem; height: 2.75rem; border-width: 2px; }
    .gm-mk-seller > .min-w-0 > .flex-wrap { gap: .25rem; font-size: .9375rem; font-weight: 600; line-height: 1.3rem; }
    .gm-mk-seller > .min-w-0 > .flex-wrap > a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
    .gm-mk-seller > .min-w-0 > .text-xs { margin-top: .125rem; font-size: .75rem; line-height: 1.125rem; }
    .gm-mk-ring { position: relative; display: inline-flex; flex: none; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 9999px;
        background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in oklch, var(--color-foreground) 10%, transparent) 0); font-size: .6875rem; font-weight: 700; color: inherit; }
    .gm-mk-ring > span { display: flex; width: calc(100% - 6px); height: calc(100% - 6px); align-items: center; justify-content: center; border-radius: 9999px; background: var(--color-background); }
    .gm-mk-follow { cursor: pointer; color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
    .gm-mk-follow > span { gap: .375rem !important; }
    .gm-mk-follow > span > svg { width: 1rem; height: 1rem; }
    .gm-mk-follow.is-on { color: var(--color-foreground); background: color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); border-color: var(--gm-mk-line); }
    .gm-mk-follow:disabled { opacity: .6; }

    /* key facts: a 2-column grid */
    .gm-mk-spec .gm-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .gm-mk-spec .gm-spec-tile { gap: .5rem; padding: .5rem .625rem .5rem .5rem; }
    .gm-mk-spec .gm-spec-tile.is-wide { grid-column: 1 / -1; }
    .gm-mk-spec .gm-spec-ico { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
    .gm-mk-spec dd.text-sm { font-size: .8125rem; }

    /* trade box: buyer buttons live in the sticky bar */
    .gm-mk-post > .gm-mk-trade { margin-top: 1.25rem; padding: .875rem; border-radius: .875rem; }
    .gm-mk-trade .gm-mk-inl { display: none !important; }
    .gm-mk-trade > .gm-mk-inl + .gm-mk-inl + a[data-tw-target] { margin-top: 0; }
    .gm-mk-trade #bid-amount + button { padding-inline: .875rem; }

    /* reactions + comments */
    .gm-mk-post > .gm-mk-eng { margin-top: 1.25rem; }
    .gm-mk-fbsave { display: none !important; }
    .gm-mk-cmts { padding-top: 1rem; }
    .gm-mk-cmts > .text-base { font-size: .9375rem; font-weight: 600; }
    .gm-mk-cmts .gm-bubble { padding: .4rem .75rem .45rem; }
    .gm-mk-cmts .gm-bubble__text { font-size: .875rem; }
    .gm-mk-cmts .gm-kids { margin-top: 0; }
    .gm-mk-cmts .gm-kid { margin-top: .5rem; }
    .gm-mk-cmts > .mt-5 { margin-top: .75rem; }

    /* side cards (promote, insights, sponsored, more from…) */
    .gm-mk-side .box { margin-top: 1.25rem; padding: 1rem; }
    .gm-mk-side > div > .box:first-child { margin-top: 0; }
    .gm-mk-sp a.mt-4 > span:first-child { height: 7rem; }
    .gm-mk-row { display: flex; gap: .625rem; margin: .75rem -1rem 0; padding: 0 1rem .25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; }
    .gm-mk-row::-webkit-scrollbar { display: none; }
    .gm-mk-row > a { flex: 0 0 8.5rem; flex-direction: column; align-items: stretch; gap: .5rem; min-width: 0; margin-top: 0; scroll-snap-align: start; }
    .gm-mk-row > a > span:first-child { width: 100%; height: 6rem; border-radius: .75rem; }
    .gm-mk-row > a > span:last-child > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: .8125rem; line-height: 1.1rem; }
    .gm-mk-row > a > span:last-child > span:last-child { margin-top: .125rem; font-size: .6875rem; }

    /* action bar: pinned to the bottom of the screen (solid, subtle top shadow); the page keeps room for it so nothing hides behind it */
    .gm-mk-show { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-mk-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: .375rem; margin: 0;
        padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--gm-mk-line); background: var(--color-background);
        box-shadow: 0 -6px 18px -10px rgb(2 6 23 / .3); }
    .gm-mk-bar__ic { display: inline-flex; flex: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: .75rem; cursor: pointer;
        border: 1px solid transparent; background: color-mix(in oklch, var(--color-foreground) 5%, transparent); color: inherit; }
    .gm-mk-bar__acts { display: flex; flex: 1 1 auto; justify-content: flex-end; gap: .375rem; min-width: 0; }
    .gm-mk-bar__form { display: flex; flex: 1 1 auto; min-width: 0; }
    .gm-mk-bar__btn { display: inline-flex; flex: 1 1 auto; min-width: 0; height: 2.75rem; align-items: center; justify-content: center; gap: .375rem; padding: 0 .625rem;
        border-radius: .75rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; cursor: pointer;
        color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 12%, transparent); border: 1px solid color-mix(in oklch, var(--color-primary) 35%, transparent); }
    .gm-mk-bar__btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .gm-mk-bar__btn > svg { flex: none; }
    .gm-mk-bar__btn--main { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
    .gm-mk-bar__btn--main.is-sure { background: var(--color-success); border-color: var(--color-success); }
    .gm-mk-bar__form > .gm-mk-bar__btn { width: 100%; }
    .gm-mk-bar__acts:has(.is-sure) > .gm-mk-bar__btn { flex-shrink: 4; }   /* "press again" needs the room */

    /* buyer request page: request · answer form · answers */
    .gm-mk-rqp { margin-top: 1rem; gap: 1.25rem; }
    .gm-mk-rqp > .gm-mk-rqp__main { display: contents; }
    .gm-mk-rqp__req { order: 1; padding: 1rem; }
    .gm-mk-rqp > .gm-mk-rqp__side { order: 2; }
    .gm-mk-rqp > .gm-mk-rqp__side:not(:has(*)) { display: none; }
    .gm-mk-rqp > .gm-mk-rqp__side > form { padding: 1rem; }
    .gm-mk-rqp__ans { order: 3; margin-top: 0; padding-left: 1rem; padding-right: 1rem; }
    .gm-mk-rqp__who { margin-bottom: .75rem; padding-bottom: .75rem; }
    .gm-mk-rqp__req h2 { font-size: 1.125rem; line-height: 1.5rem; }
    .gm-mk-rqp__facts { gap: .75rem; margin-top: 1rem; padding: .75rem; }
    .gm-mk-rqp__ans > .flex.py-4 { padding-top: .875rem; padding-bottom: .5rem; }
    .gm-mk-rqp__ans .gm-tr-row { flex-wrap: wrap; gap: .75rem; padding-top: .875rem; padding-bottom: .875rem; }
    .gm-mk-rqp__ans .py-8 { padding-top: .75rem; padding-bottom: 1rem; }
    /* header card: kind + budget band (.gm-mk-rqp__band) replaces the kind chip and the Budget fact; the other facts in a compact grid */
    .gm-mk-rqp__req > .flex-wrap:not(.gm-mk-rqp__who) > .gm-tr-chip:first-child { display: none; }
    .gm-mk-rqp__band { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; margin-top: .75rem; padding: .625rem .75rem;
        border-radius: .75rem; color: #fff; background: linear-gradient(135deg, var(--k), color-mix(in oklch, var(--k) 55%, #0f172a)); }
    .gm-mk-rqp__kind { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; background: rgb(255 255 255 / .2); }
    .gm-mk-rqp__bud { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; margin-inline-start: auto; text-align: end; }
    .gm-mk-rqp__bud > span { font-size: .5625rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
    .gm-mk-rqp__bud > b { font-size: 1rem; line-height: 1.35rem; font-weight: 600; }
    .gm-mk-rqp__req h2 { margin-top: .75rem; }
    .gm-mk-rqp__req h2 + p { margin-top: .5rem; }
    .gm-mk-rqp__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .875rem; padding: .625rem .75rem; border-style: solid; font-size: .8125rem; }
    .gm-mk-rqp__facts > div:first-child { display: none; }
    .gm-mk-rqp__facts > div > .text-xs { font-size: .6875rem; }
    /* never wider than the screen: one shrinkable column, every block may shrink below its content */
    .gm-rq-layout.gm-mk-rqp { grid-template-columns: minmax(0, 1fr); }
    .gm-mk-rqp > *, .gm-mk-rqp__main > *, .gm-mk-rqp__req > *, .gm-mk-rqp__ans > * { min-width: 0; max-width: 100%; }
    .gm-mk-rqp__kind { flex: none; }
    .gm-mk-rqp__bud { flex: 1 1 8rem; }
    .gm-mk-rqp__bud > b { overflow-wrap: anywhere; }
    .gm-mk-rqp__facts > div { min-width: 0; overflow-wrap: anywhere; }
    .gm-mk-rqp__ans .gm-tr-row > .min-w-0 > a.mt-3 { max-width: 100%; }
    /* answer form → a bottom sheet (same form), opened by the "Answer this request" bar (.gm-rs-bar); answers sit above */
    .gm-mk-rqp > .gm-mk-rqp__side { order: 4; }
    .gm-mk-rqp:has(form.gm-rs) { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-rs-bar { --gm-mk-line: color-mix(in oklch, var(--color-foreground) 9%, transparent); }
    .gm-mk-rqp form.gm-rs { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; max-height: 88vh; margin: 0; padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto; overscroll-behavior: contain; border-radius: 1.25rem 1.25rem 0 0; background: var(--color-background);
        box-shadow: 0 -10px 30px -12px rgb(2 6 23 / .35), 0 0 0 100vmax rgb(2 6 23 / 0); transform: translateY(105%); visibility: hidden;
        transition: transform .25s ease, visibility .25s, box-shadow .25s; }
    .gm-mk-rqp form.gm-rs.is-open { transform: none; visibility: visible; box-shadow: 0 -10px 30px -12px rgb(2 6 23 / .35), 0 0 0 100vmax rgb(2 6 23 / .5); }
    .gm-mk-rqp form.gm-rs::before, .gm-mk-rqp form.gm-rs::after { content: none !important; display: none; }
    .gm-rs > .font-medium { padding-inline-end: 2.5rem; font-size: 1rem; font-weight: 600; }
    .gm-rs-x { position: absolute; top: .875rem; inset-inline-end: .75rem; display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center;
        border-radius: 9999px; cursor: pointer; background: color-mix(in oklch, var(--color-foreground) 6%, transparent); color: inherit; }
    .gm-rs > .grid { gap: .75rem !important; }
    .gm-rs > .grid > div { min-width: 0; }
    .gm-rs > .grid label { font-size: .8125rem; }
    .gm-rs > .grid :is(input, select, textarea) { width: 100%; }
    .gm-rs > .mt-4:last-child > button { height: 2.75rem; }
    /* answers: compact threads — avatar · name/status/time · message, price on the right */
    .gm-mk-rqp__ans .gm-tr-row { flex-wrap: nowrap; align-items: flex-start; gap: .625rem; }
    .gm-mk-rqp__ans .gm-tr-row > :first-child { width: 2.25rem; height: 2.25rem; flex: none; }
    .gm-mk-rqp__ans .gm-tr-row > .min-w-0 > .flex-wrap { gap: .25rem .375rem; font-size: .875rem; }
    .gm-mk-rqp__ans .gm-tr-row > .min-w-0 > p { font-size: .8125rem; }
    .gm-mk-rqp__ans .gm-tr-row > .min-w-0 > a.mt-3 { margin-top: .5rem; }
    .gm-mk-rqp__ans .gm-tr-row > .flex-none > .uppercase { font-size: .5625rem; }
    .gm-mk-rqp__ans .gm-tr-row > .flex-none > .text-lg { font-size: .9375rem; line-height: 1.3rem; }
}
@media (max-width: 639.98px) {
    .gm-mk-rqp__who { flex-wrap: wrap; }
    .gm-mk-rqp__who > form { width: 100%; margin: .25rem 0 0; }
    .gm-mk-rqp__who > form > button { width: 100%; }
}

/* ── Shared phone pieces for the dashboard, price index, deals and the middleman desk (< 1024px) ───────────────────────
   .gm-chips: a sideways-scrolling pill row (never wraps / clips; quick actions, filters, tabs). Hidden from 1024px, so the
   desktop pages never show it (nor .gm-qtabs: one fixed row of equal icon tabs). .gm-m-only: phones only. The slim page
   frame (16px gutters) is the profile's. */
.gm-chips, .gm-qtabs, .gm-m-only { display: none; }
/* Dashboard stat card detail line ("51 assets · 22 services") — visible at every width (it used to be a card tooltip) */
.gm-dsh-sub { margin-top: .375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; opacity: .6; }
@media (max-width: 1023.98px) {
    .content.px-7:has(.gm-dash, .gm-pi-root, .gm-dl-root, .gm-dr-root, .gm-esc-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-dash, .gm-pi-root, .gm-dl-root, .gm-dr-root, .gm-esc-root)::before,
    .content:has(.gm-dash, .gm-pi-root, .gm-dl-root, .gm-dr-root, .gm-esc-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-dash, .gm-pi-root, .gm-dl-root, .gm-dr-root, .gm-esc-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-m-only { display: block; }
    .gm-chips { display: flex; gap: .5rem; margin: .75rem -.625rem 0; padding: .125rem .625rem .375rem; overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none; scroll-padding-inline: .625rem; -webkit-overflow-scrolling: touch; }
    .gm-chips::-webkit-scrollbar { display: none; }
    .gm-chip { display: inline-flex; flex: none; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem; border-radius: 9999px; cursor: pointer;
        font: inherit; font-size: .8125rem; font-weight: 600; white-space: nowrap; color: var(--color-foreground); background: var(--color-background);
        border: 1px solid color-mix(in oklch, var(--color-foreground) 10%, transparent); transition: background-color .15s, color .15s; }
    .gm-chip > svg, .gm-chip > i { flex: none; width: 1rem; height: 1rem; }
    .gm-chip:active { background: color-mix(in oklch, var(--color-foreground) 6%, var(--color-background)); }
    .gm-chip.is-main, .gm-chip.is-on { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
    .gm-chip__n { min-width: 1.25rem; padding: 0 .35rem; border-radius: 9999px; font-size: 10px; line-height: 1rem; text-align: center;
        background: color-mix(in oklch, var(--color-foreground) 9%, transparent); }
    .gm-chip.is-on .gm-chip__n { background: rgb(255 255 255 / .22); }
    /* round icon button for page headers (the label stays for screen readers: .gm-sr) */
    .gm-hbtn { display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; color: inherit; }
    .gm-hbtn:active { background: color-mix(in oklch, var(--color-foreground) 6%, transparent); }
    .gm-hbtn > svg, .gm-hbtn > i { width: 1.25rem; height: 1.25rem; }
    .gm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Dashboard on phones & tablets (< 1024px) ─────────────────────────────────────────────────────────────────────────
   dashboard.blade.php (.gm-dash): greeting + round reload button, quick-action chips, KPI cards as a compact 2-column grid
   (4 a row on tablets) with their hint line visible (no hover on touch), charts full width with the legend underneath,
   donuts as "chart · legend" rows, listings as compact rows (photo · title · status, views / reactions on one line),
   side lists as slim rows. Desktop: unchanged. */
@media (max-width: 1023.98px) {
    .gm-dash > .grid > .col-span-12.mt-8, .gm-dash__side .mt-8 { margin-top: 1.75rem; }
    .gm-dash > .grid > .col-span-12.mt-8:first-child { margin-top: 1.25rem; }
    .gm-dash h2.text-lg { font-size: 1rem; font-weight: 600; }
    .gm-dash .flex.h-10 > a.text-primary.ms-auto { font-size: .8125rem; }
    .gm-dash .flex.h-10 + .mt-5 { margin-top: .75rem; }

    /* greeting */
    .gm-dsh-head > h2.text-lg { font-size: 1.375rem; font-weight: 700; }
    .gm-dash .gm-dsh-head > a { width: 2.5rem; height: 2.5rem; flex: none; justify-content: center; border-radius: 9999px; }
    .gm-dsh-head > a:active { background: color-mix(in oklch, var(--color-foreground) 6%, transparent); }
    .gm-dsh-head > a > svg, .gm-dsh-head > a > i { width: 1.125rem; height: 1.125rem; }
    .gm-dsh-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    /* quick actions: one fixed row of equal icon tabs (icon · ~10.5px label), all visible — the marketplace's tab pattern */
    .gm-qtabs { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: .125rem; margin-top: .625rem; padding: .25rem; border-radius: .875rem;
        background: color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); }
    .gm-qtab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-width: 0; height: 3.375rem; padding: .375rem .0625rem .3rem;
        border-radius: .625rem; font-size: 10.5px; line-height: 1; font-weight: 600; color: color-mix(in oklch, var(--color-foreground) 72%, transparent); transition: background-color .15s; }
    .gm-qtab > svg, .gm-qtab > i { flex: none; width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }
    .gm-qtab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    button.gm-qtab { border: 0; background: none; font-family: inherit; cursor: pointer; }
    .gm-qtab:active { background: color-mix(in oklch, var(--color-foreground) 7%, transparent); }
    .gm-qtab.is-on { background: var(--color-primary); color: #fff; box-shadow: 0 4px 10px -4px color-mix(in oklch, var(--color-primary) 70%, transparent); }
    .gm-qtab__n { position: absolute; top: .125rem; inset-inline-start: calc(50% + .25rem); min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 9999px;
        font-size: 9.5px; font-weight: 700; line-height: 1.05rem; text-align: center; color: var(--color-foreground); background: color-mix(in oklch, var(--color-foreground) 12%, var(--color-background)); }

    /* KPI cards: compact (row gap = column gap + the stacked-card shadow) */
    .gm-dash .gm-dsh-kpis { gap: 1.4rem .625rem !important; margin-top: .75rem; }
    .gm-dsh-kpis > .col-span-12 { grid-column: span 6 / span 6; min-width: 0; }
    .gm-dsh-kpi { padding: .875rem; }
    .gm-dsh-kpi > .flex > svg:first-child, .gm-dsh-kpi > .flex > i:first-child { width: 1.375rem; height: 1.375rem; }
    .gm-dsh-kpi > .flex .rounded-full.border { padding: 0 .25rem 0 .4rem; font-size: .6875rem; }
    .gm-dsh-kpi > .flex .rounded-full.border svg { width: .875rem; height: .875rem; }
    .gm-dsh-kpi > .mt-6 { margin-top: .5rem; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .gm-dsh-kpi > .mt-1\.5 { margin-top: .125rem; font-size: .6875rem; font-weight: 600; text-transform: none; opacity: .75; }
    .gm-dsh-sub { margin-top: .125rem; font-size: .6875rem; opacity: .55; }

    /* activity report: stats on one row, legend under them, chart full width */
    .gm-dsh-report { padding: 1rem; }
    .gm-dsh-report > .flex > .flex .text-lg { font-size: 1.125rem; font-weight: 700; }
    .gm-dsh-report > .flex > .flex .mt-1\.5 { margin-top: .125rem; font-size: .6875rem; }
    .gm-dsh-report > .flex > .mt-4 { margin-top: .75rem; gap: .375rem 1rem; }
    .gm-dash .gm-dsh-chart { height: 13rem !important; margin-top: 1rem; }

    /* donuts: chart beside its legend */
    .gm-dsh-donut { display: flex; align-items: center; gap: 1rem; padding: 1rem; }
    .gm-dsh-donut > .relative { flex: none; width: 7.5rem; height: 7.5rem !important; margin: 0; }
    .gm-dsh-donut > .relative .text-xl { font-size: 1rem; }
    .gm-dsh-donut > .mx-auto { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .8125rem; }
    .gm-dsh-donut > .mx-auto > .mt-3 { margin-top: .5rem; }

    /* action cards */
    .gm-dsh-ad > div { padding: 1rem 1.125rem 1.125rem; }
    .gm-dsh-ad > div > .text-lg { font-size: 1rem; line-height: 1.4rem; }
    .gm-dsh-ad > div > .opacity-70.mt-1 { font-size: .8125rem; }
    .gm-dsh-ad > div > a { margin-top: .875rem; width: auto; padding: 0 1rem; }

    /* listings: title, two buttons side by side, then compact rows */
    .gm-dsh-tbhead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; height: auto; }
    .gm-dsh-tbhead > h2 { flex: 1 1 100%; }
    .gm-dsh-tbhead > .mt-3 { flex: 1 1 100%; gap: .5rem; margin: 0; }
    .gm-dsh-tbhead > .mt-3 > a { flex: 1 1 0%; justify-content: center; height: 2.5rem; margin: 0; }
    .gm-dsh-tbhead > .mt-3 > a:first-child { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
    .gm-dsh-tbhead > .mt-3 > a::before, .gm-dsh-tbhead > .mt-3 > a::after { display: none; }
    .gm-dsh-tbhead + .mt-8 { margin-top: .5rem; }

    table.gm-dsh-tbl, table.gm-dsh-tbl > tbody { display: block; width: 100%; }
    table.gm-dsh-tbl { border-spacing: 0; margin-top: .25rem; }
    table.gm-dsh-tbl > thead { display: none; }
    table.gm-dsh-tbl > tbody > tr { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; row-gap: .125rem;
        margin: 0 0 .5rem; padding: .625rem .75rem; border-radius: .875rem; border: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent);
        background: var(--color-background); box-shadow: none; }
    table.gm-dsh-tbl > tbody > tr > td { display: block; width: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; text-align: start; }
    table.gm-dsh-tbl > tbody > tr > td::before, table.gm-dsh-tbl > tbody > tr > td[data-label]::before { display: none; }
    table.gm-dsh-tbl > tbody > tr > td + td { border-top: 0; }
    table.gm-dsh-tbl > tbody > tr > td > * { margin: 0; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(1) > .flex > span { width: 2.75rem; height: 2.75rem; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(1) > .flex > span + span { display: none; }
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-main { grid-column: 2 / 4; grid-row: 1; }
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-main > a { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .875rem; }
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-main > a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the whole row opens the post */
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-main > .mt-1 { display: none; }
    /* views · reactions under the title, small and self-labelled */
    table.gm-dsh-tbl > tbody > tr > td:nth-child(3), table.gm-dsh-tbl > tbody > tr > td:nth-child(4) { grid-row: 2; display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; opacity: .65; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(3) { grid-column: 2; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(3)::after { content: attr(data-label); text-transform: lowercase; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(4) { grid-column: 3; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(4) > span > span { opacity: 1; font-size: inherit; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(5) { grid-column: 4; grid-row: 1; font-size: .75rem; font-weight: 600; }
    table.gm-dsh-tbl > tbody > tr > td:nth-child(5) svg { width: .875rem; height: .875rem; margin-inline-end: .25rem; }
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-actions { grid-column: 4; grid-row: 2; position: relative; z-index: 2; justify-self: end; font-size: .75rem; }
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-actions .flex { justify-content: flex-end; }
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-actions a:first-child { display: none; }   /* "View" = the row itself; Edit stays */
    table.gm-dsh-tbl > tbody > tr > td.gm-cell-actions a { min-height: 0; }
    .gm-dash .gm-dsh-tbl + .box { margin-top: .25rem; }

    /* side lists: slim rows */
    .gm-dash__side .gm-dsh-row { margin-bottom: .5rem; padding: .625rem .875rem; }
    .gm-dash__side .gm-dsh-row::after { box-shadow: none; }
    .gm-dash__side .gm-dsh-row > span.size-11 { width: 2.5rem; height: 2.5rem; }
    .gm-dash__side .gm-dsh-row > .ms-4 { margin-inline-start: .75rem; }
    .gm-dash__side .gm-dsh-trust { margin-bottom: 1.75rem; }
    .gm-dsh-act { margin-bottom: .5rem; }
    .gm-dsh-act > .z-10:first-child > span { width: 2.5rem; height: 2.5rem; }
    .gm-dsh-act > .box { margin-inline-start: .75rem; padding: .5rem .875rem; }
    .gm-dsh-act > .box::after { box-shadow: none; }
    .gm-dash .gm-timeline::before { inset-inline-start: 1.25rem; }
    .gm-dash__side .box.mt-5:not(.gm-dsh-row) { padding: 1rem; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .gm-dsh-kpis > .col-span-12 { grid-column: span 3 / span 3; }
    .gm-dsh-tbhead > h2 { flex: 1 1 auto; }
    .gm-dsh-tbhead > .mt-3 { flex: none; }
    .gm-dsh-tbhead > .mt-3 > a { flex: none; }
}

/* ── Price index on phones & tablets (< 1024px) ───────────────────────────────────────────────────────────────────────
   market/index (.gm-pi-root): title + round "Browse marketplace" button, Type chips (All / Assets / Services) and a Sort
   sheet (#pi-sort), each index as a compact row: icon · name · unit + supply (active) + demand · price · ▲▼ change pill.
   market/category (.gm-pic-*): the other indices as chips, a compact header with the stats as 2×2 tiles, the chart full
   width, the price steps as 2-column tiles, listings as compact rows. Desktop (≥ 1024px): unchanged (.gm-pi-dem hidden). */
.gm-pi-dem { display: none; }
@media (max-width: 1023.98px) {
    /* index: header */
    .gm-pi-root > .gm-pi-head { flex-direction: row; align-items: center; gap: .5rem; }
    .gm-pi-head > div { flex: 1 1 auto; min-width: 0; }
    .gm-pi-head h2 { font-size: 1.375rem; font-weight: 700; }
    .gm-pi-head p { font-size: .8125rem; }
    .gm-pi-head > a { flex: none; width: 2.5rem; padding: 0; justify-content: center; border-radius: 9999px; }
    .gm-pi-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .gm-pi-root > .mt-5.grid { margin-top: .75rem; row-gap: 1.5rem; }

    /* index: cards → compact lists */
    .gm-pi-card > .border-b { padding: .75rem 1rem; }
    .gm-pi-card > .border-b > h2 { font-size: .9375rem; font-weight: 600; }
    .gm-pi-list { display: flex; flex-direction: column; padding: 0 1rem; }
    .gm-pi-list > .gm-pi-row { min-height: 3.75rem; margin-top: 0; padding: .625rem 0; gap: 0; }
    /* dividers under every row; the last one (whatever the sort order) is clipped away */
    .gm-pi-list > .gm-pi-row { border-bottom: 1px dashed color-mix(in oklch, var(--color-foreground) 10%, transparent); }
    .gm-pi-list:has(> .gm-pi-row) { clip-path: inset(0 0 1px 0); }
    .gm-pi-row > span:first-child { width: 2.5rem; height: 2.5rem; border-width: 2px; }
    .gm-pi-row > span:first-child svg { width: 1.125rem; height: 1.125rem; }
    .gm-pi-row > .ml-4 > .font-medium { font-size: .9375rem; }
    .gm-pi-row > .ml-4 > .opacity-70 { font-size: .75rem; }
    .gm-pi-dem { display: inline; }
    .gm-pi-row > .text-right > .font-medium { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .gm-pi-chg { display: inline-flex; align-items: center; gap: .125rem; margin-top: .125rem; padding: .0625rem .4rem; border-radius: 9999px; font-weight: 600;
        font-variant-numeric: tabular-nums; background: color-mix(in oklch, currentColor 12%, transparent); }
    .gm-pi-chg { direction: ltr; unicode-bidi: isolate; }   /* "+4.3%" reads the same in Arabic (was "4.3%+") */
    .gm-pi-chg.text-success::before { content: "▲"; font-size: .5625rem; }
    /* Type + Sort: four equal chips in one row (all visible, nothing scrolls or clips) */
    .gm-pi-root > .gm-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; margin-inline: 0; padding-inline: 0; overflow: visible; }
    .gm-pi-root > .gm-chips > .gm-chip { min-width: 0; justify-content: center; padding: 0 .5rem; }
    .gm-pi-root > .gm-chips > .gm-chip > span:not(.gm-chip__n) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .gm-pi-chg.text-danger::before { content: "▼"; font-size: .5625rem; }

    /* category: back link, chips, header */
    .gm-pic-back.mt-8 { margin-top: 1rem; }
    .gm-pic-back + .gm-chips { margin-top: .5rem; }
    .gm-pic-head.p-6 { margin-top: .75rem; padding: 1rem; }
    .gm-pic-head > .flex.items-start { gap: .75rem; }
    .gm-pic-head > .flex.items-start > span:first-child { width: 2.75rem; height: 2.75rem; border-radius: .875rem; }
    .gm-pic-head > .flex.items-start > span:first-child svg { width: 1.375rem; height: 1.375rem; }
    .gm-pic-head h2 { font-size: 1.125rem; font-weight: 600; }
    .gm-pic-head > .flex.items-start p { font-size: .8125rem; }
    .gm-pic-head > .mt-6 { margin-top: 1rem; padding-top: 1rem; }
    .gm-pic-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .gm-pic-stats > .border-dotted { display: none !important; }
    .gm-pic-stats > div:not(.border-dotted) { display: block; min-width: 0; padding: .5rem .75rem; border-radius: .75rem; background: color-mix(in oklch, var(--color-foreground) 4%, transparent); }
    .gm-pic-stats > div > .text-lg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; }
    .gm-pic-stats > div > .mt-1\.5 { margin-top: .125rem; font-size: .625rem; }
    .gm-pic-head .md\:ms-auto { margin-top: .75rem; }
    .gm-pic-chart { height: 14rem; }

    /* category: price steps as 2-column tiles */
    .gm-pic-calc.mt-8, .gm-pic-list.mt-8 { margin-top: 1.5rem; }
    .gm-pic-calc h3, .gm-pic-list h3 { font-size: 1rem; font-weight: 600; }
    .gm-pic-calc > .grid { margin-top: .75rem; gap: .625rem !important; }
    .gm-pic-calc > .grid > div { grid-column: span 6 / span 6; min-width: 0; padding: .75rem; }
    .gm-pic-calc > .grid > div > .flex { gap: .375rem; font-size: .625rem; }
    .gm-pic-calc > .grid > div > .mt-2 { margin-top: .375rem; font-size: 1rem; font-weight: 700; }
    .gm-pic-calc > .grid > div > .mt-0\.5 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .6875rem; line-height: 1.35; }

    /* category: asset listings as compact rows (title · asking / seller · price check / audience · engagement · fair value) */
    .gm-pic-list > .overflow-auto { overflow: visible; }
    table.gm-pic-tbl, table.gm-pic-tbl > tbody { display: block; width: 100%; }
    table.gm-pic-tbl { border-spacing: 0; margin-top: .75rem; }
    table.gm-pic-tbl > thead { display: none; }
    table.gm-pic-tbl > tbody > tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: .375rem .75rem;
        margin: 0 0 .625rem; padding: .75rem .875rem; border-radius: .875rem; border: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent);
        background: var(--color-background); box-shadow: none; }
    table.gm-pic-tbl > tbody > tr > td { display: block; width: auto; min-width: 0 !important; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; text-align: start; white-space: normal; }
    table.gm-pic-tbl > tbody > tr > td + td { border-top: 0; }
    table.gm-pic-tbl > tbody > tr > td::before, table.gm-pic-tbl > tbody > tr > td[data-label]::before { display: none; }
    table.gm-pic-tbl > tbody > tr > td > * { margin: 0; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(1) > a:first-child { font-size: .875rem; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(1) > a:first-child::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the row opens the post */
    table.gm-pic-tbl > tbody > tr > td:nth-child(1) > a + a, table.gm-pic-tbl > tbody > tr > td:nth-child(2) a { position: relative; z-index: 2; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(6) { grid-column: 4; grid-row: 1; text-align: end; font-size: .9375rem; font-weight: 700; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(6) > .mt-1 { margin-top: .125rem; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(2) { grid-column: 1 / 4; grid-row: 2; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(2) > .flex > a:first-child { width: 1.5rem; height: 1.5rem; border-width: 1px; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(2) > .flex > a + a { font-size: .8125rem; font-weight: 500; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(7) { grid-column: 4; grid-row: 2; justify-self: end; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(7) > span { padding: .0625rem .5rem; font-size: .6875rem; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(3), table.gm-pic-tbl > tbody > tr > td:nth-child(4), table.gm-pic-tbl > tbody > tr > td:nth-child(5) {
        grid-row: 3; margin-top: .25rem; padding-top: .5rem; border-top: 1px dashed color-mix(in oklch, var(--color-foreground) 10%, transparent); font-size: .8125rem; font-weight: 600; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(3)::before, table.gm-pic-tbl > tbody > tr > td:nth-child(4)::before, table.gm-pic-tbl > tbody > tr > td:nth-child(5)::before {
        content: attr(data-label); display: block; margin-bottom: .0625rem; font-size: .625rem; font-weight: 500; text-transform: uppercase; opacity: .55; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(3) { grid-column: 1; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(3) .text-xs { display: inline; margin-inline-start: .25rem; font-weight: 400; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(4) { grid-column: 2; }
    table.gm-pic-tbl > tbody > tr > td:nth-child(5) { grid-column: 3 / 5; }
    table.gm-pic-tbl > tbody > tr > td.gm-cell-actions { display: none; }
    .gm-pic-list .overflow-auto > .mt-2 { margin-top: .25rem; }

    /* category: services as compact horizontal cards */
    .gm-pic-svc { gap: .875rem !important; }
    .gm-pic-svc > div > .box { flex-direction: row; }
    .gm-pic-svc > div > .box::before { display: none; }
    .gm-pic-svc > div > .box > .h-40 { flex: none; width: 6.5rem; height: auto; min-height: 7rem; border-radius: 0; border-start-start-radius: .75rem; border-end-start-radius: .75rem; }
    .gm-pic-svc > div > .box > .p-5 { min-width: 0; padding: .75rem .875rem; }
    .gm-pic-svc > div > .box > .p-5 > .font-medium { font-size: .875rem; line-height: 1.25rem; }
    .gm-pic-svc > div > .box > .p-5 > .mt-3 { margin-top: .375rem; font-size: .6875rem; }
    .gm-pic-svc > div > .box > .p-5 > .mt-auto { margin-top: .5rem; padding-top: .5rem; gap: .5rem; }
    .gm-pic-svc > div > .box > .p-5 > .mt-auto .text-xs.uppercase { font-size: .5625rem; }
}

/* ── Deals list on phones & tablets (< 1024px) ────────────────────────────────────────────────────────────────────────
   deals/index (.gm-dl-root): one toolbar row (Browse Marketplace · ＋ menu · search), the status select becomes chips,
   each deal a compact row — photo · title · amount / counterpart (avatar + name) · status chip / "Step x of y" bar +
   middleman · chat. The row opens the deal room. Desktop: unchanged (.gm-dl-steptd / .gm-dl-pn hidden there). */
td.gm-dl-steptd, .gm-dl-pn { display: none; }
@media (max-width: 1023.98px) {
    .gm-dl-root > h2.mt-10 { margin-top: 1.25rem; font-size: 1.375rem; font-weight: 700; }
    .gm-dl-root > .grid { margin-top: .75rem; row-gap: .75rem; }
    /* toolbar: primary · ＋ · search in one row; the select moves to the chips */
    .gm-dl-tb { flex-wrap: nowrap; gap: .5rem; margin-top: 0; }
    .gm-dl-tb > a:first-child { flex: none; height: 2.5rem; margin: 0; padding: 0 .875rem; border-radius: .625rem; box-shadow: none;
        background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
    .gm-dl-tb > a:first-child::before, .gm-dl-tb > a:first-child::after { display: none; }
    .gm-dl-tb > .dropdown { flex: none; }
    .gm-dl-tb > .dropdown > button { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: .625rem; }
    .gm-dl-tb > .mt-3 { flex: 1 1 0%; min-width: 0; width: auto; margin: 0; }
    .gm-dl-tb > .mt-3 > .relative, .gm-dl-tb > .mt-3 input { width: 100% !important; min-width: 0; }
    .gm-dl-tb > .mt-3 input { height: 2.5rem; border-radius: .625rem; }
    .gm-dl-sel { display: none; }
    .gm-dl-root .dropdown > .dropdown-menu:not(.show) { inset-inline-start: auto; inset-inline-end: 0; }
    .gm-dl-chips { margin-top: -.25rem; }

    /* rows */
    .gm-dl-root .col-span-12.overflow-x-auto { overflow: visible; }
    table.gm-dl-tbl, table.gm-dl-tbl > tbody { display: block; width: 100%; }
    table.gm-dl-tbl { margin-top: 0; border-spacing: 0; }
    table.gm-dl-tbl > thead { display: none; }
    table.gm-dl-tbl > tbody > tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem .75rem;
        margin: 0 0 .625rem; padding: .75rem .875rem; border-radius: .875rem; border: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent);
        background: var(--color-background); box-shadow: none; }
    table.gm-dl-tbl > tbody > tr > td { display: block; width: auto; min-width: 0 !important; max-width: none !important; padding: 0; border: 0; border-radius: 0; box-shadow: none;
        background: none; text-align: start; white-space: normal; }
    table.gm-dl-tbl > tbody > tr > td + td { border-top: 0; }
    table.gm-dl-tbl > tbody > tr > td::before, table.gm-dl-tbl > tbody > tr > td[data-label]::before { display: none; }
    table.gm-dl-tbl > tbody > tr > td > * { margin: 0; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(1) > .flex > span:first-child { width: 2.75rem; height: 2.75rem; border-width: 2px; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(1) a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.25rem; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(1) a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the row opens the deal */
    table.gm-dl-tbl > tbody > tr > td:nth-child(1) .text-xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: start; text-align: end; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    /* counterpart: small avatars + the name(s) */
    table.gm-dl-tbl > tbody > tr > td:nth-child(2) { grid-column: 1; grid-row: 2; position: relative; z-index: 2; overflow: hidden; margin: -3px; padding: 3px; }   /* room for the avatar ring */
    table.gm-dl-tbl > tbody > tr > td:nth-child(2) > .flex { min-width: 0; gap: .375rem; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(2) .gm-wav { width: 1.75rem; height: 1.75rem; font-size: .625rem; box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px color-mix(in oklch, var(--color-primary) 25%, transparent); }
    table.gm-dl-tbl > tbody > tr > td:nth-child(2) .gm-wav + * { display: none; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(2) span[style*="margin:0 .55rem"] { width: 1rem; height: 1rem; margin: 0 .125rem !important; background: none; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(2) span[style*="margin:0 .55rem"] svg { width: .75rem; height: .75rem; }
    .gm-dl-pn { display: block; order: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-weight: 500; }
    /* status as a chip */
    table.gm-dl-tbl > tbody > tr > td:nth-child(5) { grid-column: 2; grid-row: 2; justify-self: end; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(5) > div { max-width: 10rem !important; padding: .125rem .5rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600;
        background: color-mix(in oklch, currentColor 11%, transparent); }
    table.gm-dl-tbl > tbody > tr > td:nth-child(5) > div > svg, table.gm-dl-tbl > tbody > tr > td:nth-child(5) > div > i { display: none; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(5) > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.gm-dl-tbl > tbody > tr > td:nth-child(4) { display: none; }
    /* step x of y + middleman */
    table.gm-dl-tbl > tbody > tr > td.gm-dl-steptd { display: block; grid-column: 1 / 3; grid-row: 3; align-self: stretch; padding-top: .5rem; padding-inline-end: 3rem; border-top: 1px dashed color-mix(in oklch, var(--color-foreground) 10%, transparent); }
    table.gm-dl-tbl > tbody > tr > td.gm-dl-steptd:not(:has(.gm-dl-step, .gm-dl-role:not([style*="none"]))) { display: none; }
    .gm-dl-step { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .75rem; font-weight: 500; }
    .gm-dl-bar { position: relative; flex: none; width: 3rem; height: .3125rem; overflow: hidden; border-radius: 9999px; background: color-mix(in oklch, var(--color-foreground) 10%, transparent); }
    .gm-dl-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); border-radius: inherit; background: var(--color-primary); }
    .gm-dl-role { margin-top: .125rem; font-size: .6875rem; opacity: .6; }
    table.gm-dl-tbl > tbody > tr > td.gm-cell-actions { grid-column: 2; grid-row: 3; position: relative; z-index: 2; justify-self: end; align-self: end; }
    table.gm-dl-tbl > tbody > tr > td.gm-cell-actions a:first-child { display: none; }   /* "View" = the row */
    table.gm-dl-tbl > tbody > tr > td.gm-cell-actions a { width: 2.25rem; height: 2.25rem; min-height: 0; justify-content: center; border-radius: 9999px;
        background: color-mix(in oklch, var(--color-primary) 10%, transparent); }
    table.gm-dl-tbl > tbody > tr > td.gm-cell-actions a > svg, table.gm-dl-tbl > tbody > tr > td.gm-cell-actions a > i { margin: 0; }
    .gm-dl-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    /* pagination: one compact row */
    .gm-dl-root .col-span-12.flex-wrap:has(> nav) { flex-wrap: nowrap; gap: .5rem; }
    .gm-dl-root .col-span-12.flex-wrap:has(> nav) > nav { flex: 1 1 auto; min-width: 0; }
    .gm-dl-root .col-span-12.flex-wrap:has(> nav) > select { margin-top: 0; flex: none; }
}

/* ── Deal room on phones & tablets (< 1024px) ─────────────────────────────────────────────────────────────────────────
   deals/show (.gm-dr-root): compact header — photo · title · status chip · ref · price, then "Step x of y · label" with a
   segmented bar (.gm-dr-step; tap = the full progress .gm-wiz) and the People row (.gm-dr-ppl → #deal-details). The side
   column is hidden: the same cards (deals/_details) open as the Details bottom sheet. The Next step card stays first; a
   sticky bar (.gm-dr-bar: Details · Chat · the viewer's main action, see gmDealBar) rides above the chat; the chat is full
   width and sized to the screen so its composer sits at the bottom. Dialogs: .gm-mp-dlg bottom sheets. Desktop: unchanged. */
.gm-dr-step, .gm-dr-ppl, .gm-dr-bar { display: none; }
@media (max-width: 1023.98px) {
    .gm-dr-root { --gm-dr-line: color-mix(in oklch, var(--color-foreground) 9%, transparent); margin-top: 1rem; gap: 1rem; }
    .gm-dr-side { display: none; }
    .gm-dr-root > .min-w-0 > .mt-6 { margin-top: 1rem; }
    .gm-dr-root .box.p-5, .gm-dr-root > .min-w-0 > .box { padding: 1rem; }

    /* header */
    .gm-dr-head > .flex.flex-wrap:first-child { flex-wrap: nowrap; gap: .75rem; }
    .gm-dr-head > .flex.flex-wrap:first-child > .gm-tr-thumb { width: 3.25rem !important; height: 3.25rem !important; border-radius: .75rem; }
    .gm-dr-head > .flex.flex-wrap:first-child > .min-w-0 { flex: 1 1 auto !important; }
    .gm-dr-head h2 { font-size: .9375rem; line-height: 1.3rem; }
    .gm-dr-head > .flex.flex-wrap:first-child > .min-w-0 > .flex.flex-wrap { gap: .25rem .5rem; }
    .gm-dr-head > .flex.flex-wrap:first-child > .min-w-0 > .mt-1 { margin-top: .25rem; gap: 0 .375rem; font-size: .6875rem; }
    .gm-dr-head > .flex.flex-wrap:first-child > .min-w-0 > .mt-1 > span:last-child { display: none; }   /* the date: in Details */
    .gm-dr-head > .flex.flex-wrap:first-child > .ml-auto > .text-xs { font-size: .5625rem; }
    .gm-dr-head > .flex.flex-wrap:first-child > .ml-auto > .text-2xl { font-size: 1.125rem; line-height: 1.5rem; }
    .gm-dr-head > .mt-4.rounded-xl { margin-top: .75rem; padding: .5rem .75rem; font-size: .75rem; }

    /* Step x of y */
    .gm-dr-step { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; width: 100%; margin-top: .875rem; padding: .625rem .75rem; border: 0; border-radius: .75rem;
        background: color-mix(in oklch, var(--color-foreground) 4%, transparent); color: inherit; font: inherit; font-size: .8125rem; text-align: start; cursor: pointer; }
    .gm-dr-step__t { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-dr-step__c { flex: none; opacity: .5; transition: transform .2s; }
    .gm-dr-head.is-wiz .gm-dr-step__c { transform: rotate(180deg); }
    .gm-dr-seg { display: flex; flex: 1 1 100%; gap: 3px; margin-top: .5rem; }
    .gm-dr-seg > span { flex: 1 1 0%; height: 4px; border-radius: 9999px; background: color-mix(in oklch, var(--color-foreground) 10%, transparent); }
    .gm-dr-seg > span.is-done { background: color-mix(in oklch, var(--color-primary) 55%, transparent); }
    .gm-dr-seg > span.is-now { background: var(--color-primary); }
    .gm-dr-seg > span.is-alert { background: var(--color-danger); }
    .gm-dr-head .gm-wiz { display: none; }
    .gm-dr-head.is-wiz .gm-wiz { display: grid; margin-top: 1rem; }

    /* People row → Details */
    .gm-dr-ppl { display: flex; align-items: center; gap: .625rem; width: 100%; margin-top: .75rem; padding: .625rem 0 0; border: 0; border-top: 1px dashed var(--gm-dr-line);
        background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
    .gm-dr-ppl__av { display: flex; flex: none; }
    .gm-dr-ppl__av > * { box-shadow: 0 0 0 2px var(--color-background); border-radius: 9999px; }
    .gm-dr-ppl__av > * + * { margin-inline-start: -.5rem; }
    .gm-dr-ppl__t { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; opacity: .7; }
    .gm-dr-ppl__more { display: inline-flex; flex: none; align-items: center; gap: .125rem; font-size: .8125rem; font-weight: 600; color: var(--color-primary); }

    /* Next step card */
    .gm-dr-next > .text-xs.uppercase:first-child { font-size: .6875rem; color: var(--color-primary); opacity: 1; }
    .gm-dr-next > .mt-3.text-sm { font-size: .875rem; }
    .gm-dr-next .gm-btn-wrap { min-height: 2.75rem; }

    /* sticky bar (above the chat: it scrolls away once the chat is reached, so the composer is never covered) */
    .gm-dr-bar { position: sticky; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; gap: .375rem; margin-top: 1rem; padding: .375rem;
        border-radius: 1rem; border: 1px solid var(--gm-dr-line); background: color-mix(in oklch, var(--color-background) 92%, transparent);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px -8px rgb(2 6 23 / .28); }
    .gm-dr-bar__ic { display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: .0625rem; width: 3.5rem; height: 2.75rem;
        border-radius: .75rem; border: 0; background: color-mix(in oklch, var(--color-foreground) 5%, transparent); color: inherit; font: inherit; font-size: .625rem; font-weight: 600; cursor: pointer; }
    .gm-dr-bar__ic > svg, .gm-dr-bar__ic > i { width: 1.125rem; height: 1.125rem; }
    .gm-dr-bar:has(> .gm-dr-bar__btn[style*="none"]) > .gm-dr-bar__ic, .gm-dr-bar:has(> .gm-dr-bar__btn[x-cloak]) > .gm-dr-bar__ic { flex: 1 1 0%; flex-direction: row; gap: .375rem; font-size: .8125rem; }
    .gm-dr-bar__btn { display: flex; flex: 1 1 auto; min-width: 0; height: 2.75rem; align-items: center; justify-content: center; padding: 0 .75rem; border-radius: .75rem; cursor: pointer;
        border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; font: inherit; font-size: .8125rem; font-weight: 600; }
    .gm-dr-bar__btn > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-dr-bar__btn > span > svg { display: inline-block; width: 1rem; height: 1rem; margin-inline-end: .375rem; vertical-align: -.1875rem; }
    .gm-dr-bar__btn:disabled { opacity: .55; }

    /* chat: full width, sized to the screen, composer pinned to the card's bottom */
    .gm-dr-root #chat { margin-top: 1rem; padding: 0; scroll-margin-top: .5rem; }
    .gm-dr-root .gm-chat__head { gap: .625rem; padding: .75rem .875rem; }
    .gm-dr-root .gm-chat__stack > span > * { width: 2rem; height: 2rem; }
    .gm-dr-root .gm-chat__body { height: max(18rem, calc(100dvh - 16rem)); max-height: 40rem; padding: .875rem .75rem; }
    .gm-dr-root .gm-chat__row { max-width: 88%; margin-bottom: .75rem; }
    .gm-dr-root .gm-chat__bubble { padding: .55rem .8rem; }
    .gm-dr-root .gm-chat__card { min-width: 0; }
    .gm-dr-root .gm-chat__compose { position: sticky; bottom: 0; z-index: 2; padding: .5rem .625rem calc(.5rem + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 .75rem .75rem;
        background: var(--color-background); }

    /* Details sheet: the side cards as flat groups */
    .gm-dr-sheet .gm-dlg__body > .box { margin-top: .75rem; padding: .875rem 1rem; border-radius: .875rem; border: 1px solid var(--gm-dr-line, color-mix(in oklch, var(--color-foreground) 9%, transparent));
        background: var(--color-background); }
    .gm-dr-sheet .gm-dlg__body > .box:first-child { margin-top: 0; }
    .gm-dr-sheet .gm-dlg__body > .box::before, .gm-dr-sheet .gm-dlg__body > .box::after { display: none; }
    .gm-dr-sheet .gm-dlg__body { padding-top: 1rem; padding-bottom: 1rem; }
}

/* Deal room key / value boxes (deals/_details: Deal terms at every width; Summary rows on phones and in the Details sheet).
   .gm-kv__row: stacked — small muted label on top, the value under it (start-aligned, wraps); .is-line: one line, value at
   the end (short values: category, audience, 3.4%…). Thin dividers between rows. */
.gm-kv { display: flex; flex-direction: column; }
.gm-kv__row { display: flex; flex-direction: column; gap: .125rem; min-width: 0; padding: .5rem 0; border-top: 1px solid color-mix(in oklch, var(--color-foreground) 8%, transparent); }
.gm-kv__row:first-child { padding-top: 0; border-top: 0; }
.gm-kv__row.is-line { flex-direction: row; align-items: baseline; justify-content: space-between; gap: .75rem; }
.gm-kv__k { flex: none; font-size: .75rem; opacity: .6; }
.gm-kv__row.is-line > .gm-kv__k { font-size: .875rem; opacity: .7; }
.gm-kv__v { min-width: 0; font-weight: 500; text-align: start; overflow-wrap: anywhere; }
.gm-kv__row.is-line > .gm-kv__v { text-align: end; }
.gm-kv__v.is-text { font-size: .8125rem; font-weight: 400; line-height: 1.5; opacity: .85; }
.gm-kv > button { margin-top: .5rem; }
@media (max-width: 1023.98px) {
    .gm-sum { gap: 0; }
    .gm-sum > div { padding: .5rem 0; border-top: 1px solid color-mix(in oklch, var(--color-foreground) 8%, transparent); }
    .gm-sum > div:first-child { padding-top: 0; border-top: 0; }
    .gm-sum > .gm-kv-m { flex-direction: column; gap: .125rem; }
    .gm-sum > .gm-kv-m > span:first-child { font-size: .75rem; opacity: .6; }
    .gm-sum > .gm-kv-m > :last-child { max-width: 100%; text-align: start !important; }
    /* deal room banners (hand-over request, warranty, "missed the deadline"): text · buttons rows wrap the buttons under the
       text instead of squeezing the text into a one-word column */
    .gm-dr-root .flex-wrap > .min-w-0.flex-1 { flex: 1 1 12rem; }
    /* deal room header: the status chip stays one line (ellipsis) */
    .gm-dr-head .gm-tr-chip { max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; font-size: .6875rem; }
}

/* ── Middleman desk on phones & tablets (< 1024px) ────────────────────────────────────────────────────────────────────
   escrow/index (.gm-esc-root): compact 2×2 stats, the tab select → one fixed row of equal icon tabs (.gm-qtabs, counts on
   the icons), one toolbar row (main button · ⋯ · search), the three tables (deals / penalties / commissions) as compact rows
   (.gm-esc-tbl--deals|pen|dues; the deal title opens the deal), pagination on one row. Desktop: unchanged. */
@media (max-width: 1023.98px) {
    .gm-esc-root > h2.mt-8 { margin-top: 1.25rem; font-size: 1.375rem; font-weight: 700; }
    .gm-esc-root > .gm-tr-stats { gap: 1.4rem .625rem; margin-top: .75rem; }
    .gm-esc-root > .gm-tr-stats > .box { padding: .875rem; }
    .gm-esc-root > .gm-tr-stats > .box > svg:first-child, .gm-esc-root > .gm-tr-stats > .box > i:first-child { width: 1.375rem; height: 1.375rem; }
    .gm-esc-root > .gm-tr-stats > .box > .mt-5 { margin-top: .5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
    .gm-esc-root > .gm-tr-stats > .box > .mt-1 { margin-top: .125rem; font-size: .75rem; line-height: 1.3; }
    .gm-esc-root > .grid.mt-5 { margin-top: 1rem; row-gap: .75rem; }
    .gm-esc-tabs { margin-top: 0; }

    /* toolbar: main button · ⋯ · search in one row (the select is replaced by the tabs) */
    .gm-esc-tb { flex-wrap: nowrap; gap: .5rem; margin-top: 0; }
    .gm-esc-tb > button:first-child { flex: 0 1 auto; min-width: 0; max-width: 58%; height: 2.5rem; margin: 0; padding: 0 .75rem; border-radius: .625rem; box-shadow: none; overflow: hidden;
        background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
    .gm-esc-tb > button:first-child::before, .gm-esc-tb > button:first-child::after { display: none; }
    .gm-esc-tb > button:first-child > span { background: rgb(255 255 255 / .22); }
    .gm-esc-tb > .dropdown { flex: none; }
    .gm-esc-tb > .dropdown > button { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: .625rem; }
    .gm-esc-tb > .flex.w-full { flex: 1 1 0%; min-width: 7rem; width: auto; }
    .gm-esc-tb > .flex.w-full > .relative { flex: 1 1 auto !important; width: auto; min-width: 0; }
    .gm-esc-tb > .flex.w-full input { width: 100% !important; height: 2.5rem; border-radius: .625rem; }
    .gm-esc-sel { display: none; }
    .gm-esc-root .dropdown > .dropdown-menu:not(.show) { inset-inline-start: auto; inset-inline-end: 0; }

    /* tables → compact rows */
    .gm-esc-root .col-span-12.overflow-auto { overflow: visible; }
    table.gm-esc-tbl, table.gm-esc-tbl > tbody { display: block; width: 100%; }
    table.gm-esc-tbl { margin-top: 0; border-spacing: 0; }
    table.gm-esc-tbl > thead { display: none; }
    table.gm-esc-tbl > tbody > tr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem .75rem;
        margin: 0 0 .625rem; padding: .75rem .875rem; border-radius: .875rem; border: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent);
        background: var(--color-background); box-shadow: none; }
    table.gm-esc-tbl > tbody > tr[style*="none"] { display: none; }
    table.gm-esc-tbl > tbody > tr > td { display: block; width: auto; min-width: 0 !important; max-width: none !important; padding: 0; border: 0; border-radius: 0; box-shadow: none;
        background: none; text-align: start; white-space: normal; }
    table.gm-esc-tbl > tbody > tr > td + td { border-top: 0; }
    table.gm-esc-tbl > tbody > tr > td::before, table.gm-esc-tbl > tbody > tr > td[data-label]::before { display: none; }
    table.gm-esc-tbl > tbody > tr > td > * { margin: 0; }
    table.gm-esc-tbl > tbody > tr > td[colspan] { grid-column: 1 / -1; padding: 1rem 0; text-align: center; }
    table.gm-esc-tbl > tbody > tr > td.gm-cell-actions { position: relative; z-index: 2; justify-self: end; }
    table.gm-esc-tbl > tbody > tr > td.gm-cell-actions > .flex { gap: .375rem; }
    table.gm-esc-tbl > tbody > tr > td.gm-cell-actions :is(a, button, span) { min-height: 2.25rem; margin: 0; padding: 0 .75rem; border-radius: 9999px; font-size: .8125rem; font-weight: 600;
        background: color-mix(in oklch, currentColor 10%, transparent); }
    table.gm-esc-tbl > tbody > tr > td.gm-cell-actions span.opacity-40 { background: none; }
    /* status as a chip */
    table.gm-esc-tbl .gm-status, table.gm-esc-tbl--pen > tbody > tr > td:nth-child(4) > div, table.gm-esc-tbl--dues > tbody > tr > td:nth-child(4) > div > div {
        max-width: 11rem !important; margin: 0; padding: .125rem .5rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; background: color-mix(in oklch, currentColor 11%, transparent); }
    table.gm-esc-tbl .gm-status > svg, table.gm-esc-tbl--pen > tbody > tr > td:nth-child(4) svg, table.gm-esc-tbl--dues > tbody > tr > td:nth-child(4) svg { display: none; }

    /* deals: title · amount / buyer → seller · middleman · status / fee · actions */
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(1) > a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-size: .875rem; line-height: 1.25rem; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(1) > a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the row opens the deal */
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(1) > .mt-0\.5 { font-size: .6875rem; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(1) .tooltip { position: relative; z-index: 2; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(3) { grid-column: 3; grid-row: 1; align-self: start; text-align: end; font-size: .9375rem; font-weight: 700; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(2) { grid-column: 1; grid-row: 2; position: relative; z-index: 2; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(2) > .flex > a > span, table.gm-esc-tbl--deals > tbody > tr > td:nth-child(2) > .flex > span > span { width: 1.75rem; height: 1.75rem; font-size: .625rem; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(5) { grid-column: 2; grid-row: 2; position: relative; z-index: 2; font-size: .75rem; overflow: hidden; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(5) :is(a, button) > span:first-child { width: 1.5rem; height: 1.5rem; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(5) .truncate { max-width: 100% !important; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(6) { grid-column: 3; grid-row: 2; justify-self: end; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(4) { grid-column: 1 / 3; grid-row: 3; font-size: .75rem; opacity: .7; }
    table.gm-esc-tbl--deals > tbody > tr > td:nth-child(4)::after { content: " · " attr(data-label); }
    table.gm-esc-tbl--deals > tbody > tr > td.gm-cell-actions { grid-column: 3; grid-row: 3; }
    table.gm-esc-tbl--deals > tbody > tr > td.gm-cell-actions a.text-primary { display: none; }   /* "View" = the row */
    table.gm-esc-tbl--deals > tbody > tr:not(:has(> td.gm-cell-actions :is(button, span))) > td:nth-child(4) { grid-column: 1 / -1; }

    /* penalties: member · amount / reason / status · actions */
    table.gm-esc-tbl--pen > tbody > tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    table.gm-esc-tbl--pen > tbody > tr > td:nth-child(1) a > span:first-child, table.gm-esc-tbl--pen > tbody > tr > td:nth-child(1) a > span.relative { width: 2rem; height: 2rem; }
    table.gm-esc-tbl--pen > tbody > tr > td:nth-child(3) { grid-column: 3; grid-row: 1; text-align: end; font-size: .9375rem; font-weight: 700; }
    table.gm-esc-tbl--pen > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: .8125rem; }
    table.gm-esc-tbl--pen > tbody > tr > td:nth-child(2) .text-sm { font-size: .8125rem; line-height: 1.4; }
    table.gm-esc-tbl--pen > tbody > tr > td:nth-child(2) a { position: relative; z-index: 2; }
    table.gm-esc-tbl--pen > tbody > tr > td:nth-child(4) { grid-column: 1; grid-row: 3; justify-self: start; }
    table.gm-esc-tbl--pen > tbody > tr > td.gm-cell-actions { grid-column: 2 / 4; grid-row: 3; }

    /* commissions: middleman · commission / deal · status / actions */
    table.gm-esc-tbl--dues > tbody > tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    table.gm-esc-tbl--dues > tbody > tr > td:nth-child(1) :is(a, button) > span:first-child { width: 2rem; height: 2rem; }
    table.gm-esc-tbl--dues > tbody > tr > td:nth-child(3) { grid-column: 3; grid-row: 1; text-align: end; font-size: .9375rem; font-weight: 700; }
    table.gm-esc-tbl--dues > tbody > tr > td:nth-child(3) .text-xs { font-size: .625rem; font-weight: 400; }
    table.gm-esc-tbl--dues > tbody > tr > td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; font-size: .8125rem; }
    table.gm-esc-tbl--dues > tbody > tr > td:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; }
    table.gm-esc-tbl--dues > tbody > tr > td.gm-cell-actions { grid-column: 1 / -1; grid-row: 3; }
    table.gm-esc-tbl--dues > tbody > tr:not(:has(> td.gm-cell-actions :is(a, button))) > td.gm-cell-actions { display: none; }

    /* pagination: one compact row */
    .gm-esc-root .col-span-12.flex-wrap:has(> nav) { flex-wrap: nowrap; gap: .5rem; }
    .gm-esc-root .col-span-12.flex-wrap:has(> nav) > nav { flex: 1 1 auto; min-width: 0; }
    .gm-esc-root .col-span-12.flex-wrap:has(> nav) > select { margin-top: 0; flex: none; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .gm-esc-root > .gm-tr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Academy on phones & tablets (< 1024px) ───────────────────────────────────────────────────────────────────────────
   academy/index (.gm-ac-home): the left topic menu is replaced by a title row (+ 🏆 Top contributors) and one fixed row of
   equal icon tabs (.gm-qtabs: All · Guides · Questions · Unanswered · Pending, counts as badges); one toolbar row
   ("New Post" · search · filter sheet #ac-filter with Sort, Sections and the admin section tools); topics as compact
   cards (avatar · chips · title · meta, then one stats line). academy/show (.gm-ac-show): flat post (no card), the
   side column under it, answers as chat bubbles; the comment composer (same box as marketplace comments) pinned to the
   bottom of the screen (.gm-ac-compose, moved to <body>). academy/form (.gm-ac-form): one column — title, post
   info, editor, tips — with Cancel / Publish pinned to the bottom. Desktop (≥ 1024px): nothing changes (.gm-ac-m and
   .gm-ac-bar stay hidden, the hook classes carry no style there). */
.gm-ac-m, .gm-ac-bar { display: none; }
@media (max-width: 1023.98px) {
    /* Page chrome: the profile's slim frame (16px from the screen edge to the content) */
    .content.px-7:has(.gm-ac-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-ac-root)::before, .content:has(.gm-ac-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-ac-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-ac-root, .gm-ac-sheet, .gm-ac-bar { --gm-ac-line: color-mix(in oklch, var(--color-foreground) 9%, transparent); --gm-mk-line: var(--gm-ac-line);
        --gm-ms-line: color-mix(in oklch, var(--color-foreground) 7%, transparent); }
    .gm-ac-m { display: block; }
    /* status / section / badge chips: small tags (the shared phone .gm-chip is a 36px filter pill) */
    .gm-ac-root .gm-chip, .gm-ac-sheet .gm-chip { height: auto; padding: .125rem .5rem; border: 0; font-size: .6875rem; line-height: 1rem; cursor: inherit; }
    .gm-ac-root .gm-chip > svg, .gm-ac-root .gm-chip > i { width: .75rem; height: .75rem; }
    /* closed Midone menus wait (invisible) next to their button — anchored at its end so they never widen the page */
    .gm-ac-root .dropdown > .dropdown-menu:not(.show) { inset-inline-start: auto; inset-inline-end: 0; }

    /* ── Home ── */
    .gm-ac-home .gm-ac-index { display: block; margin-top: 1rem; }
    .gm-ac-home .gm-ac-menu { display: none; }
    .gm-ac-head { display: flex; align-items: center; gap: .25rem; }
    .gm-ac-head > h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.375rem; font-weight: 700; }
    .gm-ac-hbtn { display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer;
        border: 0; background: none; color: inherit; }
    .gm-ac-hbtn:active { background: color-mix(in oklch, var(--color-foreground) 6%, transparent); }
    .gm-ac-hbtn > svg, .gm-ac-hbtn > i { width: 1.25rem; height: 1.25rem; }
    .gm-ac-home .gm-ac-tabs { display: grid; margin-top: .625rem; }
    .gm-ac-tabs > .gm-qtab.is-on .gm-qtab__n { color: var(--color-primary); background: #fff; }
    .gm-ac-tabs > .gm-qtab .gm-qtab__n.is-alert { color: #fff; background: var(--color-danger); }
    /* toolbar: New Post · search · filter */
    .gm-ac-tb { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem; margin-top: .875rem; }
    .gm-ac-tb > .gm-ac-btns { display: contents; }
    .gm-ac-tb .gm-ac-top, .gm-ac-tb .gm-ac-plus { display: none; }
    .gm-ac-tb .gm-ac-new { order: 1; flex: none; height: 2.5rem; padding: 0 .875rem; border-radius: .625rem; font-weight: 600; color: #fff;
        background: var(--color-primary); border-color: var(--color-primary); }
    .gm-ac-tb > .gm-ac-search { order: 2; flex: 1 1 0%; min-width: 0; width: auto; margin: 0; }
    .gm-ac-tb > .gm-ac-search input { height: 2.5rem; border-radius: .625rem; }
    .gm-ac-tb > .gm-ac-search > .dropdown { display: none; }
    .gm-ac-tb > .gm-ac-search > input { padding-inline-end: .75rem; }
    .gm-ac-tb > .gm-ac-fbtn { order: 3; }
    .gm-ac-fbtn { position: relative; display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .625rem;
        border: 1px solid var(--gm-ac-line); background: var(--color-background); color: inherit; cursor: pointer; }
    .gm-ac-fbtn > svg, .gm-ac-fbtn > i { width: 1.125rem; height: 1.125rem; }
    .gm-ac-fbtn__dot { position: absolute; top: .4rem; inset-inline-end: .4rem; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-background); }
    /* the section / sort in use: one small removable pill under the toolbar */
    .gm-ac-on { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
    .gm-ac-on > a { display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; height: 1.875rem; padding: 0 .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
        color: var(--c, var(--color-primary)); background: color-mix(in oklch, var(--c, var(--color-primary)) 10%, var(--color-background));
        border: 1px solid color-mix(in oklch, var(--c, var(--color-primary)) 30%, transparent); }
    .gm-ac-on > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-ac-on > a > svg { flex: none; width: .875rem; height: .875rem; opacity: .7; }
    /* topics: compact cards (every width below 1024, the shared stacked table only starts below 640) */
    .gm-ac-home .gm-ac-main > .mt-4.overflow-auto, .gm-ac-home .gm-ac-main > .mt-4.overflow-auto > .overflow-auto { overflow: visible; }
    .gm-ac-root .gm-ac-list.gm-table-stack, .gm-ac-root .gm-ac-list.gm-table-stack > tbody { display: block; width: 100%; }
    .gm-ac-root .gm-ac-list.gm-table-stack { margin-top: .75rem; border-spacing: 0; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .875rem; margin: 0 0 .625rem; padding: .875rem .875rem .75rem;
        border-radius: .875rem; border: 1px solid var(--gm-ac-line); background: var(--color-background); box-shadow: 0 3px 5px #0000000b; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td { display: flex; align-items: baseline; gap: .25rem; width: auto; min-width: 0 !important; margin: .625rem 0 0; padding: 0;
        border: 0; border-radius: 0; box-shadow: none; background: none; text-align: start; white-space: nowrap; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td::before, .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td::after { display: none; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td.gm-cell-main { display: block; flex: 1 1 100%; order: -1; margin: 0; white-space: normal; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td.gm-cell-main + td { margin-inline-start: 3.25rem; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td:not(.gm-cell-main) > .text-base { font-size: .8125rem; line-height: 1.1rem; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td:not(.gm-cell-main) > .text-xs { font-size: .75rem; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td:last-child:not(.gm-cell-main) { margin-inline-start: auto; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td:last-child:not(.gm-cell-main) > .text-sm { font-size: .75rem; opacity: .6; }
    .gm-ac-root .gm-ac-list.gm-table-stack.gm-stack-inline > tbody > tr > td:last-child:not(.gm-cell-main) > .text-xs { display: none; }
    .gm-ac-list .gm-cell-main > .flex { gap: .625rem; }
    .gm-ac-list .gm-cell-main > .flex > a:first-child > span { width: 2.625rem; height: 2.625rem; }
    .gm-ac-list .gm-cell-main > .flex > .min-w-0 > .flex-wrap { gap: .25rem; }
    .gm-ac-list .gm-cell-main > .flex > .min-w-0 > a.block { margin-top: .375rem; font-size: .9375rem; font-weight: 600; line-height: 1.3rem; }
    .gm-ac-list .gm-cell-main > .flex > .min-w-0 > .text-xs { margin-top: .25rem; }

    /* filter sheet */
    .gm-ac-sheet .gm-dlg__body { padding-top: 1rem; padding-bottom: 1rem; }
    .gm-ac-sheet .gm-ms-sh { margin: 1.25rem .25rem .5rem; }
    .gm-ac-sheet .gm-ms-sh:first-child { margin-top: 0; }
    .gm-ac-sheet .gm-ms-row { min-height: 3rem; }
    .gm-ac-sheet .gm-ms-row__dot { flex: none; width: .625rem; height: .625rem; border-radius: 9999px; border: 1px solid var(--c);
        background: color-mix(in oklch, var(--c) 25%, transparent); }
    .gm-ac-sheet .gm-ms-row.is-on { color: var(--color-primary); font-weight: 600; }

    /* ── Guide / question page ── */
    .gm-ac-show { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-ac-show > .gm-ac-grid { margin-top: 1.25rem; gap: 1.5rem; }
    .gm-ac-show .gm-ac-post { padding: 0; background: none; border: 0; box-shadow: none; }
    .gm-ac-show .gm-ac-post::before, .gm-ac-show .gm-ac-post::after { display: none; }
    .gm-ac-show .gm-ac-post > .flex-wrap:first-child { gap: .375rem; }
    .gm-ac-review { align-items: flex-start; gap: .625rem .75rem !important; padding: .75rem .875rem !important; border-radius: .875rem !important; }
    .gm-ac-review > .flex-none { display: flex; width: 100%; gap: .5rem; }
    .gm-ac-review > .flex-none > * { flex: 1 1 0%; min-width: 0; }
    .gm-ac-review > .flex-none button { width: 100%; }
    .gm-ac-show .gm-ac-title { margin-top: .75rem; font-size: 1.375rem; line-height: 1.8rem; font-weight: 700; }
    .gm-ac-show .gm-ac-meta { margin-top: .375rem; font-size: .75rem; line-height: 1.25rem; }
    .gm-ac-show .gm-ac-author { margin-top: 1rem; padding: .75rem .875rem; border: 1px solid var(--gm-ac-line); border-radius: .875rem; background: var(--color-background); }
    .gm-ac-show .gm-ac-author > a:first-child > span { width: 2.75rem; height: 2.75rem; }
    .gm-ac-show .gm-ac-author > .min-w-0 { margin-inline-start: .75rem; margin-inline-end: 0; }
    /* article typography: 16px text, roomy lines, full-width pictures, tables scroll inside themselves */
    .gm-ac-show .gm-article { margin-top: 1.25rem; font-size: 1rem; line-height: 1.7; }
    .gm-ac-show .gm-article h2 { margin: 1.5rem 0 .5rem; font-size: 1.1875rem; }
    .gm-ac-show .gm-article h3 { margin: 1.25rem 0 .4rem; font-size: 1.0625rem; }
    .gm-ac-show .gm-article figure.image { margin: 1rem 0; }
    .gm-ac-show .gm-article figure.image img, .gm-ac-show .gm-article img { width: 100%; border-radius: .75rem; }
    .gm-ac-show .gm-article figure.table { margin: 1rem 0; }
    .gm-ac-show .gm-article .gm-code { margin: .75rem 0; font-size: .78rem; }
    .gm-ac-show .gm-ac-eng { margin-top: 1.25rem; }
    .gm-ac-show .gm-ac-answers { margin-top: 1rem; }
    .gm-ac-show .gm-ac-answers > .text-base:first-child { font-size: 1rem; font-weight: 700; }
    .gm-ac-show .gm-ac-answers .gm-bubble { padding: .4rem .75rem .45rem; }   /* = marketplace comments on phones */
    .gm-ac-show .gm-ac-answers .gm-bubble__text { font-size: .875rem; }
    .gm-ac-show .gm-answer.is-accepted > .flex > div > .gm-cmt-row > .gm-bubble { box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--color-success) 55%, transparent) !important; }
    /* side column: the post's facts + tools, related topics, "Still stuck?" */
    .gm-ac-side { gap: 1.25rem !important; }
    .gm-ac-side > .box { padding: 1rem; }
    .gm-ac-side .grid-cols-3 > div { padding: .625rem .25rem; }
    .gm-ac-side .grid-cols-3 .text-2xl { margin-top: .375rem; font-size: 1.25rem; }
    .gm-ac-side .grid-cols-3 .gm-ac-ico { width: 1.75rem; height: 1.75rem; }

    /* the answer / comment composer: the marketplace comment box (avatar · rounded growing input · emoji · send), moved to
       <body> by academy/show and pinned to the bottom of the screen like the deal chat composer */
    .gm-ac-bar { display: flex; }
    body > .gm-ac-compose { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; margin: 0; align-items: flex-end;
        padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent);
        background: var(--color-background); box-shadow: 0 -6px 18px -10px rgb(2 6 23 / .3); }
    body > .gm-ac-compose > span:first-of-type { width: 2.25rem; height: 2.25rem; margin: 0 0 .1875rem; }
    body > .gm-ac-compose textarea[data-composer] { max-height: 8.5rem; overflow-y: auto; }

    /* ── New / edit post: one column (title · post info · editor · tips), Cancel / Publish pinned to the bottom ── */
    .gm-ac-form { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-ac-form .gm-ac-fhead { margin-top: 1rem; align-items: flex-start; }
    .gm-ac-form .gm-ac-fhead > h2 { font-size: 1.375rem; font-weight: 700; }
    .gm-ac-form .gm-ac-facts { display: none; }   /* the same Cancel / Publish live in the bottom bar (.gm-ac-fbar) */
    .gm-ac-form .gm-ac-fgrid { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; gap: 1rem !important; }
    .gm-ac-form .gm-ac-fmain { display: contents; }
    .gm-ac-form .gm-ac-fgrid > *, .gm-ac-form .gm-ac-fmain > * { grid-column: 1 / -1; min-width: 0; margin-top: 0; }
    .gm-ac-form .gm-ac-ftitle { order: 1; padding: .75rem; }
    .gm-ac-form .gm-ac-finfo { order: 2; }
    .gm-ac-form .gm-ac-finfo > .box { padding: 1rem; }
    .gm-ac-form .gm-ac-fed { order: 3; padding: .75rem; }
    .gm-ac-form .gm-ac-fed ul[role="tablist"] { display: none; }
    .gm-ac-form .gm-ac-fed .mt-3\.5 { margin-top: 0; }
    .gm-ac-form .gm-ac-fed .rounded-lg.border.p-5 { padding: 0; border: 0; }
    .gm-ac-form .gm-ac-fed .border-b.pb-5 { padding-bottom: .625rem; }
    .gm-ac-form .gm-ac-fed .gm-editor { margin-top: .75rem; }
    .gm-ac-form .gm-editor .ck-editor__editable_inline { min-height: 16rem; padding: 0 .875rem !important; font-size: 1rem; }
    .gm-ac-form .gm-ac-ftitle input { height: 2.75rem; font-size: 1rem; }
    .gm-ac-form .gm-ac-finfo select { height: 2.75rem; }
    .gm-ac-form .gm-ac-finfo .gm-typecard { min-height: 2.75rem; }
}

/* ── Fraud Registry on phones & tablets (< 1024px) ───────────────────────────────────────────────────────────────────
   fraud-registry/index (.gm-fr-home): the 3 stats as compact side-by-side cards; admins: Registry · Review as one row of
   equal icon tabs (.gm-qtabs look), the review queue's status tabs the same; one toolbar row (Report / Add · search ·
   filter sheet #fr-filter with the fraud types); entries as compact cards (photo · name + type · amount, contacts as
   small chips, the whole card opens the entry). fraud-registry/show (.gm-fr-show): flat page re-ordered with `order` —
   person, facts as stacked label / value rows, story, photos, known contacts, evidence as a 2-column gallery (3 on
   tablets), dates, follow-ups, discussion; the comment composer pinned to the bottom (.gm-fr-compose, moved to <body>).
   fraud-registry/create (.gm-fr-form): steps as one row of 4, full-width fields, Previous / Next / Submit pinned to the
   bottom (.gm-fr-bar). Review dialog + follow-up dialogs: bottom sheets. Desktop (≥ 1024px): nothing changes. */
.gm-fr-m, .gm-fr-bar, .gm-fr-lbl-short { display: none; }
[dir="rtl"] .gm-fr-bar__dir { transform: scaleX(-1); }
@media (max-width: 1023.98px) {
    .content.px-7:has(.gm-fr-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-fr-root)::before, .content:has(.gm-fr-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-fr-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-fr-root, .gm-fr-sheet, .gm-fr-bar { --gm-fr-line: color-mix(in oklch, var(--color-foreground) 9%, transparent); --gm-mk-line: var(--gm-fr-line);
        --gm-ms-line: color-mix(in oklch, var(--color-foreground) 7%, transparent); }
    .gm-fr-m { display: block; }
    .gm-fr-root .dropdown > .dropdown-menu:not(.show) { inset-inline-start: auto; inset-inline-end: 0; }

    /* ── Home ── */
    .gm-fr-home > .gm-fr-head { margin-top: 1.25rem; }
    .gm-fr-home > .gm-fr-head h2 { font-size: 1.375rem; font-weight: 700; }
    /* stats: 3 compact cards side by side */
    .gm-fr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem !important; margin-top: .875rem; }
    .gm-fr-stats > .box { min-width: 0; padding: .75rem .625rem; }
    .gm-fr-stats > .box::before { display: none; }
    .gm-fr-stats > .box > svg, .gm-fr-stats > .box > i { width: 1.25rem; height: 1.25rem; }
    .gm-fr-stats > .box > .mt-6 { margin-top: .375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; line-height: 1.4rem; font-weight: 700;
        font-variant-numeric: tabular-nums; }
    .gm-fr-stats > .box > .mt-1\.5 { margin-top: .125rem; font-size: .625rem; line-height: .85rem; text-transform: none; font-weight: 600; opacity: .65; }
    /* admins: Registry · Review → equal icon tabs */
    .gm-fr-panes, .gm-fr-qtabs { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .125rem; height: auto; margin-top: .875rem; padding: .25rem; border-radius: .875rem;
        background: color-mix(in oklch, var(--color-foreground) 5%, var(--color-background)); }
    .gm-fr-panes > li, .gm-fr-qtabs > li { min-width: 0; width: auto; }
    .gm-fr-panes button, .gm-fr-qtabs button { position: relative; flex-direction: column; gap: .25rem; width: 100%; height: 3.375rem; padding: .375rem .125rem .3rem; border-radius: .625rem;
        font-size: 10.5px; line-height: 1; font-weight: 600; box-shadow: none !important; opacity: 1 !important; color: color-mix(in oklch, var(--color-foreground) 72%, transparent); background: none; }
    .gm-fr-panes button > svg { flex: none; width: 1.25rem; height: 1.25rem; }
    .gm-fr-panes button.active, .gm-fr-qtabs button.active { background: var(--color-primary) !important; color: #fff; box-shadow: 0 4px 10px -4px color-mix(in oklch, var(--color-primary) 70%, transparent) !important; }
    .gm-fr-panes button > .rounded-full { position: absolute; top: .125rem; inset-inline-start: calc(50% + .25rem); min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; font-size: 9.5px; line-height: 1.05rem; }
    /* review queue: In review · Published · Declined · All — one row, the count as a small pill after the label */
    .gm-fr-qtabs { flex: 1 1 100%; width: 100%; margin-top: 0; }
    .gm-fr-qtabs button { flex-direction: row; justify-content: center; gap: .2rem; height: 2.5rem; padding: 0 .125rem; font-size: 11px; letter-spacing: -.01em; }
    .gm-fr-qtabs button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-fr-qtabs button > span:last-child { flex: none; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 9999px; font-size: 9.5px; font-weight: 700; line-height: 1.05rem;
        text-align: center; opacity: 1; color: var(--color-foreground); background: color-mix(in oklch, var(--color-foreground) 10%, var(--color-background)); }
    .gm-fr-qtabs button.active > span:last-child { color: var(--color-primary); background: #fff; }
    .gm-fr-qtabs + .relative { flex: 1 1 100%; width: 100%; margin: 0; }
    .gm-fr-qtabs + .relative > input { height: 2.5rem; border-radius: .625rem; }
    div:has(> .gm-fr-qtabs) { flex-wrap: wrap; gap: .625rem; }
    .gm-fr-lbl-long { display: none; }
    .gm-fr-lbl-short { display: inline; }
    /* toolbar: Report · search · filter */
    .gm-fr-tb { flex-wrap: nowrap !important; gap: .5rem; margin-top: .375rem !important; }
    .gm-fr-tb > .gm-fr-add { flex: none; height: 2.5rem; margin: 0; padding: 0 .875rem; border-radius: .625rem; font-weight: 600; color: #fff;
        background: var(--color-danger); border-color: var(--color-danger); }
    .gm-fr-tb > .gm-fr-more, .gm-fr-tb > .mx-auto { display: none; }
    .gm-fr-tb > .gm-fr-search { flex: 1 1 0%; min-width: 0; width: auto; margin: 0; }
    .gm-fr-tb > .gm-fr-search > .relative { width: 100%; }
    .gm-fr-tb > .gm-fr-search input { height: 2.5rem; border-radius: .625rem; }
    .gm-fr-fbtn { position: relative; display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .625rem;
        border: 1px solid var(--gm-fr-line); background: var(--color-background); color: inherit; cursor: pointer; }
    .gm-fr-fbtn > svg, .gm-fr-fbtn > i { width: 1.125rem; height: 1.125rem; }
    .gm-fr-fbtn__dot { position: absolute; top: .4rem; inset-inline-end: .4rem; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-background); }
    .gm-fr-on { display: flex; flex-wrap: wrap; gap: .375rem; }
    .gm-fr-on > a { display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; height: 1.875rem; padding: 0 .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
        color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 10%, var(--color-background)); border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent); }
    .gm-fr-on > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-fr-on > a > svg { flex: none; width: .875rem; height: .875rem; opacity: .7; }
    .gm-fr-list { row-gap: .625rem !important; margin-top: .875rem !important; }
    .gm-fr-list > .gm-fr-tb, .gm-fr-list > .gm-fr-on { margin-top: 0 !important; }

    /* entries: compact cards — photo · name + type (+ country) · amount / date, then the contacts as small chips */
    .gm-fr-list > .gm-fr-item { grid-column: 1 / -1; min-width: 0; }
    .gm-fr-card { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem .75rem; padding: .875rem;
        border-radius: .875rem; }
    .gm-fr-card::before { display: none; }
    .gm-fr-card > .gm-fr-card__h { grid-column: 1; grid-row: 1; padding: 0; min-width: 0; }
    .gm-fr-card__h > .flex-col { flex-direction: row; align-items: center; gap: .75rem; }
    .gm-fr-card__h > .flex-col > span:first-child { width: 2.75rem; height: 2.75rem; border-width: 2px; font-size: .875rem; }
    .gm-fr-card__h > .flex-col > .min-w-0 { margin: 0; text-align: start; }
    .gm-fr-card__h > .flex-col > .min-w-0 > a { font-size: .9375rem; font-weight: 600; line-height: 1.25rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
    .gm-fr-card__a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the name link covers the card */
    .gm-fr-card__h > .dropdown { position: absolute; top: .375rem; inset-inline-end: .375rem; z-index: 2; margin: 0; }
    .gm-fr-card__h > .dropdown > a { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; }
    .gm-fr-card > .gm-fr-card__f { grid-column: 2; grid-row: 1; padding: 0; border: 0; margin-inline-end: 1.75rem; }
    .gm-fr-card__f > .mr-auto { margin: 0; text-align: end; }
    .gm-fr-card__f > .mr-auto > .text-sm { font-size: .875rem; font-weight: 700; white-space: nowrap; }
    .gm-fr-card__f > .mr-auto > .text-xs { font-size: .6875rem; white-space: nowrap; }
    .gm-fr-card__f > a { display: none; }
    .gm-fr-card > .gm-fr-card__b { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; padding: 0; padding-inline-start: 3.5rem; text-align: start; }
    .gm-fr-card__b > .line-clamp-2 { display: none; }
    .gm-fr-card__b > div[dir="ltr"] { display: inline-flex; max-width: 100%; margin: 0; padding: .125rem .5rem; border-radius: 9999px; font-size: .6875rem; line-height: 1.1rem; opacity: .85;
        background: color-mix(in oklch, var(--color-foreground) 5%, transparent); }
    .gm-fr-card__b > div[dir="ltr"] > svg { width: .75rem; height: .75rem; margin-inline-end: .25rem; }
    .gm-fr-card__b > .text-xs { margin: 0; font-size: .6875rem; }
    .gm-fr-card__b > .flex:not([dir]) { margin: 0; font-size: .6875rem; }
    .gm-fr-card__b:not(:has(> *:not(.line-clamp-2))) { display: none; }
    .gm-fr-card__b > .flex:not([dir]) > img { width: 14px !important; height: 10px !important; margin-inline-end: .25rem; margin-right: 0; }

    /* your reports / review queue: the stacked table cards with a little less air */
    .gm-fr-home .gm-table-stack > tbody > tr { border-radius: .875rem; }

    /* filter sheet */
    .gm-fr-sheet .gm-dlg__body { padding-top: 1rem; padding-bottom: 1rem; }
    .gm-fr-sheet .gm-ms-sh { margin: 1.25rem .25rem .5rem; }
    .gm-fr-sheet .gm-ms-sh:first-child { margin-top: 0; }
    .gm-fr-sheet .gm-ms-row { min-height: 3rem; }
    .gm-fr-sheet .gm-ms-row.is-on { color: var(--color-primary); font-weight: 600; }

    /* review dialog (shared admin review layout) → a bottom sheet */
    .gm-fr-rsheet > .box { position: fixed; left: 0; right: 0; bottom: 0; width: 100% !important; max-width: none !important; margin: 0 !important; max-height: 92dvh; overflow-y: auto;
        padding: 1.25rem 1rem calc(env(safe-area-inset-bottom, 0px) + .75rem); transform: translateY(100%); transition: transform .3s ease; scrollbar-width: none; }
    .gm-fr-rsheet.show > .box { transform: none; }
    .gm-fr-rsheet > .box::before { display: none; }
    .gm-fr-rsheet > .box::after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .gm-fr-rsheet .gm-vbody { max-height: none; overflow: visible; margin: 1rem 0; padding: 0; }
    .gm-fr-rsheet .gm-docs { --n: 2 !important; }
    .gm-fr-rsheet .gm-dlg-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .gm-fr-rsheet .gm-dlg-foot > * { min-width: 0; width: 100%; padding-inline: .5rem; }
    .gm-fr-rsheet .gm-dlg-foot > :nth-last-child(-n+2) { order: -1; }

    /* ── Entry page ── */
    .gm-fr-show { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-fr-show > .gm-fr-banner { margin-top: 1rem; padding: .625rem .875rem; border-radius: .875rem; font-size: .8125rem; line-height: 1.35; }
    .gm-fr-show > .gm-fr-grid { display: flex; flex-direction: column; gap: 1.25rem !important; margin-top: 1.25rem; }
    .gm-fr-show .gm-fr-main, .gm-fr-show .gm-fr-main > .box, .gm-fr-show .gm-fr-side { display: contents; }
    .gm-fr-show .gm-fr-main > .box::before, .gm-fr-show .gm-fr-main > .box::after { display: none; }
    .gm-fr-show .gm-fr-main > .box > * { margin-top: 0 !important; min-width: 0; }
    .gm-fr-show .gm-fr-side > * { min-width: 0; }
    .gm-fr-show .gm-fr-side > .box { padding: 1rem; border-radius: .875rem; }
    .gm-fr-show .gm-fr-side > .box::before { display: none; }
    /* order: person · facts · story · photos · contacts · linked account · evidence · private docs · dates · note · follow-ups · others · discussion · report */
    .gm-fr-o1 { order: 1; } .gm-fr-o2 { order: 2; } .gm-fr-o3 { order: 3; } .gm-fr-o4 { order: 4; } .gm-fr-o5 { order: 5; } .gm-fr-o6 { order: 6; } .gm-fr-o7 { order: 7; }
    .gm-fr-o8 { order: 8; } .gm-fr-o9 { order: 9; } .gm-fr-o10 { order: 10; } .gm-fr-o11 { order: 11; } .gm-fr-o12 { order: 12; } .gm-fr-o13 { order: 13; } .gm-fr-o14 { order: 14; }
    .gm-fr-show .gm-fr-who > .min-w-0 > h2 { font-size: 1.375rem; line-height: 1.8rem; font-weight: 700; }
    .gm-fr-show .gm-fr-who > :first-child { width: 4rem; height: 4rem; margin: 4px; }
    /* facts: stacked label / value rows */
    .gm-fr-facts { display: block !important; padding: 0 !important; border: 1px solid var(--gm-fr-line) !important; border-radius: .875rem; overflow: hidden; background: var(--color-background); }
    .gm-fr-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: .5rem .875rem; }
    .gm-fr-facts > div + div { border-top: 1px solid var(--gm-fr-line); }
    .gm-fr-facts > div > .text-xs { flex: none; font-size: .8125rem; }
    .gm-fr-facts > div > .mt-0\.5 { margin: 0; min-width: 0; text-align: end; font-size: .875rem; font-weight: 600; }
    .gm-fr-show .gm-fr-story > .mt-2 { font-size: .9375rem; line-height: 1.65; }
    /* galleries: 2 columns (3 on tablets), even gaps */
    .gm-fr-show .gm-fr-photos > .flex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .gm-fr-show .gm-fr-photos > .flex > button { width: auto; height: auto; aspect-ratio: 1; }
    .gm-fr-show .gm-fr-gal > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem !important; }
    .gm-fr-show .gm-fr-docs { padding: .875rem; }
    .gm-fr-show .gm-fr-docs > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem !important; }
    .gm-fr-show .gm-fr-note { padding-top: 0; border-top: 0; }
    /* follow-ups: the two buttons side by side, full width */
    .gm-fr-show #follow-ups { padding-top: 0; border-top: 0; }
    .gm-fr-show #follow-ups > .flex-wrap:first-child > .mr-auto { flex: 1 1 100%; }
    .gm-fr-show #follow-ups > .flex-wrap:first-child > button { flex: 1 1 0%; min-width: 0; padding-inline: .5rem; }
    .gm-fr-show #follow-ups > .flex-col > .rounded-xl { padding: .875rem; border-radius: .875rem; }
    .gm-fr-show #follow-ups form.border-t > input { flex: 1 1 100%; }
    .gm-fr-show #follow-ups form.border-t > button { flex: 1 1 0%; }
    .gm-fr-show #comments { padding-top: 1rem; }
    .gm-fr-show .gm-fr-side > .gm-fr-report { width: 100%; }
    /* the comment composer: moved to <body> and pinned to the bottom (same as the academy's) */
    body > .gm-fr-compose { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; margin: 0; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent); background: var(--color-background); box-shadow: 0 -6px 18px -10px rgb(2 6 23 / .3); }
    body > .gm-fr-compose > .gm-cform { align-items: flex-end; }
    body > .gm-fr-compose textarea[data-composer] { max-height: 8.5rem; overflow-y: auto; }
    .gm-fr-show:not(:has(.gm-fr-compose-home)) { padding-bottom: 1.5rem; }

    /* ── Report / add / edit form ── */
    .gm-fr-form { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-fr-form > .mt-8:first-of-type { margin-top: 1.25rem; }
    .gm-fr-form > .mt-8 > h2 { font-size: 1.375rem; font-weight: 700; }
    .gm-fr-wz { margin-top: 1rem; padding: .75rem !important; }
    .gm-fr-wz::before { display: none; }
    /* steps: one row of 4 (number · short label) joined by a line */
    .gm-fr-wz .gm-wz-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: .25rem 0 0; }
    .gm-fr-wz .gm-wz-line::before { content: ''; position: absolute; top: 1.4rem; left: 12.5%; right: 12.5%; height: 2px; background: color-mix(in oklch, var(--color-foreground) 10%, transparent); }
    .gm-fr-wz .gm-wz-step { display: flex; flex-direction: column; align-items: center; gap: .375rem; min-width: 0; text-align: center; }
    .gm-fr-wz .gm-wz-step > button { width: 2.375rem; height: 2.375rem; margin: 0; padding: 0; }
    .gm-fr-wz .gm-wz-step > div { width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; line-height: 1rem; }
    .gm-fr-wz .gm-wz-body { margin-top: 1rem; padding: 1rem .25rem .25rem; }
    .gm-fr-wz .gm-wz-body .col-span-12 { grid-column: 1 / -1; }
    .gm-fr-wz .gm-wz-body input.h-10, .gm-fr-wz .gm-wz-body select.h-10, .gm-fr-wz .gm-wz-body .ts-control { min-height: 2.75rem; font-size: 1rem; }
    .gm-fr-wz .gm-wz-body textarea { font-size: 1rem; }
    .gm-fr-wz .gm-ctype { width: 8.5rem; }
    .gm-fr-wz .gm-ctype__btn { height: 2.75rem; }
    .gm-fr-wz .gm-wz-body section > .rounded-xl.border-2 > .relative.cursor-pointer { min-height: 3rem; flex-wrap: wrap; font-size: .8125rem; }
    .gm-fr-wz .gm-shot { width: 4.75rem; height: 4.75rem; }
    .gm-fr-wz .gm-wz-nav { display: none; }
    /* bottom bar: ‹ Previous / ✕ Cancel · Next / Submit */
    .gm-fr-bar { display: flex; }
    .gm-fr-bar .gm-fr-bar__send { background: var(--color-danger); border-color: var(--color-danger); }
    .gm-fr-bar .gm-mk-bar__btn:disabled { opacity: .6; }
}
@media (max-width: 479.98px) {
    /* "Report a Scammer" / "Add to Registry" → an icon-only button (its text stays for screen readers) so the search keeps its room */
    .gm-fr-tb > .gm-fr-add { width: 2.5rem; padding: 0; justify-content: center; font-size: 0; gap: 0; }
    .gm-fr-tb > .gm-fr-add > svg { width: 1.25rem; height: 1.25rem; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .gm-fr-show .gm-fr-gal > .grid, .gm-fr-show .gm-fr-docs > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .gm-fr-show .gm-fr-photos > .flex { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .gm-fr-list > .gm-fr-item { grid-column: span 6 / span 6; }
}

/* ── POWER of Good on phones & tablets (< 1024px) ────────────────────────────────────────────────────────────────────
   giving/index (.gm-gv-home): the report boxes as compact 2-column cards, the open drive as one compact card, one toolbar
   row (Open a drive · search · filter sheet #gv-filter with Year / Kind), "Our story" drives as 2-column tiles (3 on
   tablets). giving/show (.gm-gv-show): compact 2×2 numbers, the team's Edit · Reminders · Manage as one row of equal
   buttons, the open drive card, photos as a 2-column gallery, contributors as small avatar tiles (4 a row), the team's
   donations as stacked cards. Open drive: a sticky "Donate" bar (.gm-gv-bar, moved to <body>) opening the donate sheet;
   closed drive: the comment composer pinned to the bottom instead (.gm-gv-compose). Every dialog: a bottom sheet
   (.gm-mp-dlg). Desktop (≥ 1024px): nothing changes. */
.gm-gv-m, .gm-gv-bar { display: none; }
@media (max-width: 1023.98px) {
    .content.px-7:has(.gm-gv-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-gv-root)::before, .content:has(.gm-gv-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-gv-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-gv-root, .gm-gv-sheet, .gm-gv-bar { --gm-gv-line: color-mix(in oklch, var(--color-foreground) 9%, transparent); --gm-mk-line: var(--gm-gv-line);
        --gm-ms-line: color-mix(in oklch, var(--color-foreground) 7%, transparent); }
    .gm-gv-m { display: block; }
    .gm-gv-root .dropdown > .dropdown-menu:not(.show) { inset-inline-start: auto; inset-inline-end: 0; }
    .gm-gv-root h2.text-lg { font-size: 1.0625rem; font-weight: 600; }
    .gm-gv-root > h2.mt-8:first-child, .gm-gv-root > .mt-8:first-child { margin-top: 1.25rem; }
    .gm-gv-root > h2.mt-8:first-child, .gm-gv-root > .mt-8:first-child > h2 { font-size: 1.375rem; font-weight: 700; }
    .gm-gv-root > h2.mt-10 { margin-top: 1.75rem; }

    /* report boxes / numbers: compact cards, 2 a row (the odd last one spans the row) */
    .gm-gv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .625rem !important; margin-top: .875rem; }
    .gm-gv-stats > .min-w-0:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .gm-gv-stats .box { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .625rem; padding: .75rem .875rem; }
    .gm-gv-stats .box::before { display: none; }
    .gm-gv-stats .box > svg, .gm-gv-stats .box > i { grid-row: span 2; width: 1.5rem; height: 1.5rem; }
    .gm-gv-stats .box > .mt-5 { margin: 0; font-size: 1rem; line-height: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .gm-gv-stats .box > .mt-1 { margin: 0; font-size: .6875rem; line-height: 1rem; }

    /* the open drive card */
    .gm-gv-cur { padding: 1rem; }
    .gm-gv-cur::before { display: none; }
    .gm-gv-cur > .flex-col { gap: .875rem; }
    .gm-gv-cur a.text-xl { font-size: 1.0625rem; font-weight: 600; line-height: 1.4rem; }
    .gm-gv-cur .text-2xl { font-size: 1.25rem; }
    .gm-gv-cur .size-9.rounded-full { width: 2rem; height: 2rem; }
    .gm-gv-cur > .flex-col > .flex-none { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .gm-gv-cur > .flex-col > .flex-none > .rounded-xl { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .75rem; text-align: start; }
    .gm-gv-cur > .flex-col > .flex-none > .rounded-xl > svg { margin: 0; flex: none; }
    .gm-gv-cur > .flex-col > .flex-none > .rounded-xl > br { display: none; }
    .gm-gv-cur > .flex-col > .flex-none > .rounded-xl > .text-xs::before { content: "· "; }
    .gm-gv-cur > .flex-col > .flex-none > :is(a, button) { height: 2.5rem; }
    .gm-gv-prep { padding: .875rem; gap: .75rem; }
    .gm-gv-prep::before { display: none; }

    /* toolbar: Open a drive · search · filter (the "All years" / "All drives" menus move into the sheet) */
    .gm-gv-tb { flex-wrap: nowrap !important; gap: .5rem; margin-top: .875rem; }
    .gm-gv-tb > button.gm-gv-add { flex: none; height: 2.5rem; padding: 0 .875rem; border-radius: .625rem; font-weight: 600; color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
    .gm-gv-tb > .mx-auto { display: none; }
    .gm-gv-tb > .gm-gv-tools { flex: 1 1 0%; flex-wrap: nowrap; min-width: 0; width: auto; }
    .gm-gv-tools > .relative:first-child { flex: 1 1 0%; min-width: 0; width: auto; }
    .gm-gv-tools > .relative:first-child > input { height: 2.5rem; border-radius: .625rem; }
    .gm-gv-tools > .relative:not(:first-child) { display: none; }
    .gm-gv-fbtn { position: relative; display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .625rem;
        border: 1px solid var(--gm-gv-line); background: var(--color-background); color: inherit; cursor: pointer; }
    .gm-gv-fbtn > svg, .gm-gv-fbtn > i { width: 1.125rem; height: 1.125rem; }
    .gm-gv-fbtn__dot { position: absolute; top: .4rem; inset-inline-end: .4rem; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-background); }
    .gm-gv-on { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
    .gm-gv-on > button { display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; height: 1.875rem; padding: 0 .625rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
        color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 10%, var(--color-background)); border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent); cursor: pointer; }
    .gm-gv-on > button > svg { flex: none; width: .875rem; height: .875rem; opacity: .7; }

    /* "Our story": 2-column tiles (3 on tablets) — icon, month, kind, then the result + amount stacked */
    .gm-gv-story { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.4rem .625rem !important; margin-top: .875rem; }
    .gm-gv-story > a { min-width: 0; padding: .75rem; }
    .gm-gv-story > a > .flex:first-child { gap: .5rem; }
    .gm-gv-story > a > .flex:first-child > span:first-child { width: 2.125rem; height: 2.125rem; }
    .gm-gv-story > a > .flex:first-child > span:first-child > svg { width: 1rem; height: 1rem; }
    .gm-gv-story > a > .flex:first-child > .min-w-0 > .font-medium { font-size: .8125rem; font-weight: 600; }
    .gm-gv-story > a > .flex:first-child > .min-w-0 > .text-xs { font-size: .6875rem; }
    .gm-gv-story > a > .flex:first-child > svg:last-child { position: absolute; top: .625rem; inset-inline-end: .625rem; width: .875rem; height: .875rem; }
    .gm-gv-story > a > .grid { margin-top: .625rem; padding-top: .625rem; gap: .5rem; }
    .gm-gv-story > a > .grid .text-lg { font-size: .9375rem; line-height: 1.25rem; }
    .gm-gv-story > a > .grid .text-xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .625rem; line-height: .9rem; }
    .gm-gv-sheet [data-acc] > select { width: 8.5rem !important; }

    /* filter sheet */
    .gm-gv-sheet .gm-dlg__body { padding-top: 1rem; padding-bottom: 1rem; }
    .gm-gv-sheet .gm-ms-sh { margin: 1.25rem .25rem .5rem; }
    .gm-gv-sheet .gm-ms-sh:first-child { margin-top: 0; }
    .gm-gv-sheet .gm-ms-row { min-height: 3rem; }
    .gm-gv-sheet .gm-ms-row.is-on { color: var(--color-primary); font-weight: 600; }

    /* ── Drive page ── */
    .gm-gv-show { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-gv-show > .gm-gv-title { margin-top: 1.25rem; }
    .gm-gv-show > .gm-gv-title > h2 { font-size: 1.25rem; line-height: 1.6rem; font-weight: 700; }
    /* the team's toolbar: Edit · Reminders · Manage as one row of equal buttons */
    .gm-gv-adm { display: grid !important; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .5rem !important; margin-top: .875rem; }
    .gm-gv-adm > *, .gm-gv-adm > .dropdown > button { min-width: 0; width: 100%; padding-inline: .5rem; font-size: .8125rem; }
    .gm-gv-adm > .dropdown > button > svg:last-child { display: none; }
    .gm-gv-adm .gv-pill { flex: none; }
    .gm-gv-show > .mt-8 { margin-top: 1.25rem; }
    .gm-gv-show .gm-gv-did { padding: 1rem; }
    .gm-gv-show .gm-gv-did::before { display: none; }
    .gm-gv-show .gm-gv-did > p { font-size: .9375rem; }
    .gm-gv-did > .flex-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem !important; }
    .gm-gv-did > .flex-wrap > div { width: auto !important; min-width: 0; }
    .gm-gv-did > .flex-wrap > .group > button { height: auto !important; aspect-ratio: 1; }
    .gm-gv-did > .flex-wrap > [data-ph] { padding: .5rem; }
    .gm-gv-did > .flex-wrap > [data-ph] > .image-fit { height: auto; aspect-ratio: 1; }
    .gm-gv-did > .flex-wrap > [data-ph] > label { height: 2.25rem; margin-top: .5rem; padding-inline: .5rem; font-size: .75rem; }
    .gm-gv-show #comments { padding: 1rem; }
    .gm-gv-show #comments::before { display: none; }
    .gm-gv-donors { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .5rem !important; margin-top: .875rem; }
    .gm-gv-donors > a { min-width: 0; padding: .625rem .25rem; }
    .gm-gv-donors > a::before { display: none; }
    .gm-gv-donors > a > span:first-child { width: 2.75rem; height: 2.75rem; border-width: 2px; }
    .gm-gv-donors > a > span:last-child { margin-top: .375rem; font-size: .6875rem; }
    .gm-gv-queue .gm-table-stack > tbody > tr { border-radius: .875rem; }

    /* the comment composer on a closed drive: moved to <body>, pinned to the bottom */
    body > .gm-gv-compose { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; margin: 0; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid color-mix(in oklch, var(--color-foreground) 9%, transparent); background: var(--color-background); box-shadow: 0 -6px 18px -10px rgb(2 6 23 / .3); }
    body > .gm-gv-compose > .gm-cform { align-items: flex-end; }
    body > .gm-gv-compose textarea[data-composer] { max-height: 8.5rem; overflow-y: auto; }
    /* the Donate bar */
    .gm-gv-home:has(~ .gm-gv-bar), .gm-gv-home.has-bar { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-gv-bar { display: flex; }
    .gm-gv-bar .gm-mk-bar__btn--main { color: #fff; background: var(--color-success); border-color: var(--color-success); }
    .gm-gv-bar__meta { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 1 auto; padding-inline-start: .25rem; }
    .gm-gv-bar__meta > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-variant-numeric: tabular-nums; }
    .gm-gv-bar__meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; opacity: .6; }
    /* donate sheet: account rows */
    .gm-gv-sheet .gm-dlg__body .text-xl { font-size: 1.125rem; }
}
@media (max-width: 479.98px) {
    /* "Open a new drive" → an icon-only ＋ (its text stays for screen readers) so the search keeps its room */
    .gm-gv-tb > button.gm-gv-add { width: 2.5rem; padding: 0; justify-content: center; font-size: 0; }
    .gm-gv-tb > button.gm-gv-add > svg { width: 1.25rem; height: 1.25rem; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .gm-gv-story { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .gm-gv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .gm-gv-stats > .min-w-0:last-child:nth-child(odd) { grid-column: auto; }
    .gm-gv-donors { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .gm-gv-did > .flex-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Ads Manager on phones & tablets (< 1024px) ──────────────────────────────────────────────────────────────────────
   ads/index (.gm-ad-root): the 5 account numbers as compact cards (3 + 2), the "start advertising" banner compact, the
   status select → one row of equal icon tabs (.gm-qtabs: All · Active · Paused · Completed, counts as badges), one
   toolbar row (search · ＋ menu), campaigns as compact cards (photo · title · dates, then status ·
   delivery · clicks side by side, results, actions as pills), Billing & plans · "Create ad" in a sticky bottom bar (.gm-ad-bar, moved to
   <body>). Billing & plans (plans as compact cards: name · price, the 3 facts, choose), the payment step, Create ad,
   Stop and Move: bottom sheets (.gm-ad-sheet). Desktop (≥ 1024px): nothing changes. */
.gm-ad-m, .gm-ad-bar { display: none; }
@media (max-width: 1023.98px) {
    .content.px-7:has(.gm-ad-root) { padding-left: .375rem; padding-right: .375rem; }
    .content:has(.gm-ad-root)::before, .content:has(.gm-ad-root)::after { left: .375rem; right: .375rem; }
    .content:has(.gm-ad-root) .content__scroll-area { padding-left: .625rem; padding-right: 2.375rem; }
    .gm-ad-root, .gm-ad-bar { --gm-ad-line: color-mix(in oklch, var(--color-foreground) 9%, transparent); --gm-mk-line: var(--gm-ad-line); }
    .gm-ad-m { display: block; }
    .gm-ad-root { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    .gm-ad-root .dropdown > .dropdown-menu:not(.show) { inset-inline-start: auto; inset-inline-end: 0; }
    .gm-ad-root > .gm-ad-head { margin-top: 1.25rem; }
    .gm-ad-root > .gm-ad-head h2 { font-size: 1.375rem; font-weight: 700; }
    .gm-ad-root > h2.mt-10 { margin-top: 1.75rem; font-size: 1.0625rem; font-weight: 600; }

    /* account numbers: 3 + 2 compact cards */
    .gm-ad-stats { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: .5rem !important; margin-top: .875rem; }
    .gm-ad-stats > .min-w-0 { grid-column: span 2; }
    .gm-ad-stats > .min-w-0:nth-child(n+4) { grid-column: span 3; }
    .gm-ad-stats .box { padding: .75rem .625rem; }
    .gm-ad-stats .box::before { display: none; }
    .gm-ad-stats .box > svg, .gm-ad-stats .box > i { width: 1.25rem; height: 1.25rem; }
    .gm-ad-stats .box > .mt-5 { margin-top: .375rem; font-size: 1rem; line-height: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .gm-ad-stats .box > .mt-1 { margin-top: .125rem; font-size: .625rem; line-height: .85rem; font-weight: 600; opacity: .65; }
    .gm-ad-start { gap: .75rem !important; margin-top: .875rem; padding: .875rem !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; border-radius: .875rem !important; }
    .gm-ad-start > .mr-auto { flex: 1 1 12rem; min-width: 0; }
    .gm-ad-start > .mr-auto > .font-medium { font-size: .9375rem; }
    .gm-ad-start > .mr-auto > .text-sm { font-size: .8125rem; }
    .gm-ad-start > :last-child:is(a, button) { width: 100%; }

    /* status tabs + toolbar */
    .gm-ad-root .gm-ad-tabs { display: grid; margin-top: .875rem; }
    .gm-ad-tabs > .gm-qtab.is-on .gm-qtab__n { color: var(--color-primary); background: #fff; }
    .gm-ad-list { gap: .625rem !important; margin-top: .25rem !important; }
    .gm-ad-tb { flex-wrap: nowrap !important; gap: .5rem; margin-top: .625rem !important; }
    .gm-ad-tb > .gm-ad-new, .gm-ad-tb > .gm-ad-plans { display: none; }   /* both live in the bottom bar */
    .gm-ad-tb > .dropdown { order: 3; flex: none; }
    .gm-ad-tb > .dropdown > button { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: .625rem; }
    .gm-ad-tb > .mx-auto { display: none; }
    .gm-ad-tb > .gm-ad-search { order: 2; flex: 1 1 0%; min-width: 0; width: auto; margin: 0; }
    .gm-ad-search > select { display: none; }
    .gm-ad-search > .relative, .gm-ad-search > .relative > input { flex: 1 1 auto; width: 100% !important; min-width: 0; }
    .gm-ad-search > .relative > input { height: 2.5rem; border-radius: .625rem; }

    /* campaigns: compact cards */
    .gm-ad-list > .gm-ad-wrap { overflow: visible; }
    #ads-table.gm-table-stack { display: block; width: 100%; margin: 0; border-spacing: 0; }
    #ads-table.gm-table-stack > thead { display: none; }
    #ads-table.gm-table-stack > tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; }
    #ads-table.gm-table-stack > tbody > tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem .5rem; margin: 0; padding: .875rem;
        border-radius: .875rem; border: 1px solid var(--gm-ad-line); background: var(--color-background); box-shadow: 0 3px 5px #0000000b; }
    #ads-table.gm-table-stack > tbody > tr[style*="display: none"] { display: none; }
    #ads-table.gm-table-stack > tbody > tr > td { display: block; min-width: 0 !important; width: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; text-align: start; }
    #ads-table.gm-table-stack > tbody > tr > td > * { margin: 0; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-main { grid-column: 1 / -1; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-main .size-12 { width: 2.75rem; height: 2.75rem; border-radius: .625rem; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-main a.truncate { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        font-size: .875rem; font-weight: 600; line-height: 1.2rem; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-main .text-xs { font-size: .6875rem; }
    #ads-table.gm-table-stack > tbody > tr > td[data-label] { padding: .5rem .5rem .4rem; border-radius: .625rem; background: color-mix(in oklch, var(--color-foreground) 4%, transparent); }
    #ads-table.gm-table-stack > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .25rem; font-size: .625rem; font-weight: 600; line-height: .8rem;
        text-transform: none; opacity: .55; }
    #ads-table.gm-table-stack > tbody > tr > td[data-label] .justify-center { justify-content: flex-start; }
    #ads-table.gm-table-stack > tbody > tr > td[data-label] .text-sm, #ads-table.gm-table-stack > tbody > tr > td[data-label] .font-medium { font-size: .8125rem; }
    #ads-table.gm-table-stack > tbody > tr > td[data-label] > div > .flex > svg { width: .875rem; height: .875rem; margin-inline-end: .25rem; margin-right: 0; }
    #ads-table.gm-table-stack > tbody > tr > td[data-label] .tooltip.h-2 { max-width: none !important; margin-top: .375rem; }
    #ads-table.gm-table-stack > tbody > tr > td[data-label] .text-\[11px\] { max-width: 100%; margin-top: .125rem; font-size: .625rem !important; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-ad-res { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-ad-res::before { margin: 0; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-ad-res > .flex { gap: .75rem; font-size: .75rem; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-ad-res svg { width: .875rem; height: .875rem; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-actions { grid-column: 1 / -1; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-actions > .flex { display: flex; gap: .375rem; }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-actions > .flex > :is(a, form > button) { flex: 1 1 0%; justify-content: center; height: 2.25rem; margin: 0; padding: 0 .5rem; border-radius: .625rem;
        font-size: .8125rem; font-weight: 600; border: 1px solid var(--gm-ad-line); }
    #ads-table.gm-table-stack > tbody > tr > td.gm-cell-actions > .flex > form.contents { display: contents; }
    #ads-table.gm-table-stack > tbody > tr > td[colspan] { grid-column: 1 / -1; padding: 1.5rem .5rem; text-align: center; background: none; }
    #ads-table.gm-table-stack > tbody > tr:has(> td[colspan]) { display: block; }
    #ads-table.gm-table-stack > tbody > tr:has(> td[colspan])[style*="display: none"] { display: none; }
    .gm-ad-pager { justify-content: center; gap: .5rem; }
    .gm-ad-pager > nav, .gm-ad-pager > nav > ul { width: 100%; }

    /* bottom sheets (raw Midone dialogs): fixed to the visible screen's bottom */
    .gm-ad-sheet > .box { position: fixed !important; left: 0; right: 0; bottom: 0; width: 100% !important; max-width: none !important; margin: 0 !important; max-height: 88dvh; overflow-y: auto;
        overscroll-behavior: contain; scrollbar-width: none; padding: 1.25rem 1rem calc(env(safe-area-inset-bottom, 0px) + .75rem) !important; transform: translateY(100%); transition: transform .3s ease; }
    .gm-ad-sheet.show > .box { transform: none; }
    .gm-ad-sheet > .box::before { display: none; }
    .gm-ad-sheet > .box::after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .gm-ad-sheet .flex-col.space-y-3 { text-align: start; }
    .gm-ad-sheet .py-8 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .gm-ad-sheet .p-5.text-center { padding: .5rem 0; }
    .gm-ad-sheet .p-5.text-center > svg:first-child { width: 3rem; height: 3rem; margin-top: 0; }
    .gm-ad-sheet .p-5.text-center > .text-2xl { margin-top: .75rem; font-size: 1.25rem; }
    .gm-ad-sheet .px-5.pb-8 { display: flex; gap: .5rem; padding: .75rem 0 0; }
    .gm-ad-sheet .px-5.pb-8 > button { flex: 1 1 0%; width: auto; margin: 0; }
    .gm-ad-sheet .flex-col-reverse { flex-direction: row; }
    .gm-ad-sheet .flex-col-reverse > * { flex: 1 1 0%; min-width: 0; padding-inline: .5rem; }
    .gm-ad-sheet .flex-col-reverse > [type="submit"] { flex-grow: 1.6; }
    /* plans: compact cards — icon · name / period · price, the 3 facts, choose */
    .gm-ad-planlist { gap: 1rem !important; margin-top: 1.25rem !important; }
    .gm-ad-plan { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; padding: .875rem !important; border-radius: .875rem !important; }
    .gm-ad-plan > .flex:first-of-type { grid-column: 1; }
    .gm-ad-plan > .flex:first-of-type > span:first-child { width: 2.25rem; height: 2.25rem; }
    .gm-ad-plan > .mt-4.flex { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; }
    .gm-ad-plan > .mt-4.flex > span { font-size: 1.375rem; line-height: 1.75rem; }
    .gm-ad-plan > .text-xs.opacity-60 { grid-column: 2; grid-row: 2; margin-top: -.125rem; text-align: end; font-size: .625rem; }
    .gm-ad-plan > .grid-cols-3 { grid-column: 1 / -1; margin-top: .625rem; padding: .5rem 0; }
    .gm-ad-plan > .grid-cols-3 .font-semibold { font-size: .875rem; }
    .gm-ad-plan > .mt-3 { grid-column: 1 / -1; margin-top: .5rem; font-size: .6875rem; }
    .gm-ad-plan > button { grid-column: 1 / -1; margin-top: .75rem !important; height: 2.5rem; }
    .gm-ad-plan > span.absolute { left: auto !important; inset-inline-start: 1rem; transform: translateY(-50%) !important; }
    .gm-ad-sheet .gm-ad-hist { display: block; }
    .gm-ad-sheet .gm-ad-hist > thead { display: none; }
    .gm-ad-sheet .gm-ad-hist > tbody { display: block; }
    .gm-ad-sheet .gm-ad-hist > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .125rem .75rem; padding: .5rem 0; }
    .gm-ad-sheet .gm-ad-hist > tbody > tr > td { padding: 0; }
    .gm-ad-sheet .gm-ad-hist > tbody > tr > td:nth-child(2) { grid-row: 2; font-size: .75rem; }
    .gm-ad-sheet .gm-ad-hist > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 1; }
    .gm-ad-sheet .gm-ad-hist > tbody > tr > td:nth-child(4) { grid-column: 2; grid-row: 2; }

    /* sticky bottom bar: Create ad */
    .gm-ad-bar { display: flex; }
    .gm-ad-bar__dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--color-warning); flex: none; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    #ads-table.gm-table-stack > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #ads-table.gm-table-stack > tbody > tr:has(> td[colspan]) { grid-column: 1 / -1; }
    .gm-ad-stats > .min-w-0, .gm-ad-stats > .min-w-0:nth-child(n+4) { grid-column: auto; }
    .gm-ad-stats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .gm-ad-planlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Closed end-aligned dropdown menus (invisible, but still laid out) mustn't stick out past the page's end edge and
   make the content area scroll sideways (e.g. the ⋯ menu on the last Fraud Registry card). Popper positions them on open. */
[data-tw-placement="bottom-end"] > .dropdown-menu:not(.show) { inset-inline-start: auto !important; inset-inline-end: 0 !important; transform: none !important; }

/* ── Admin settings on phones & tablets (< 1024px) ──────────────────────────────────────────────────────────────────
   admin/general-settings (+ admin/_ms-page › gmAdminMs): .gm-as-root reuses the member Settings pattern above (.gm-ms-root
   list home → full-screen section under .gm-ms-bar; .gm-ms-card / .gm-ms-h / .gm-ms-save). Added here: checkbox rows become
   switch rows (.gm-as-sw, one white group per .gm-as-swg), "i" field hints become grey captions (.gm-as-cap, made by
   gmAdminMs.msHints), the notification-position radios one list (.gm-as-radios), the policy pages a white group (.gm-as-list),
   the policy editor a bottom sheet (.gm-as-sheet), the logo card first (.gm-as-logo). Desktop (≥ 1024px): nothing changes. */
.gm-as-cap { display: none; }
@media (max-width: 1023.98px) {
    .gm-as-root { margin-top: -1.25rem; }   /* = the member Settings page (its root is -mt-5) */
    button.gm-ms-me { width: 100%; margin: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
    .gm-as-root .gm-ms-h:has(> .ml-auto) { justify-content: space-between; }   /* Registration: "Emails today" chip · Pending link */
    .gm-as-root .gm-ms-h > .ml-auto { margin-inline-start: 0; }
    .gm-as-root .gm-ms-panes .gm-hint { display: none !important; }
    .gm-as-cap { display: block; margin-top: .375rem; font-size: .75rem; font-weight: 400; line-height: 1.45; opacity: .6; }

    /* Forms: one column of full-width fields */
    .gm-as-root .gm-ms-panes .sm\:grid-cols-2, .gm-as-root .gm-ms-panes [style*="auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }
    .gm-as-root .gm-ms-panes .gm-readable-wide { max-width: none; }
    .gm-as-root .gm-ms-panes input[style*="max-width:9rem"] { max-width: none !important; flex: 1 1 auto; min-width: 0; height: 2.75rem; }
    .gm-as-root .gm-ms-panes label.rounded-xl.border:not(.bg-primary\/5) { background: var(--color-background); }   /* sign-up mode cards */
    .gm-as-root .gm-ms-panes h3 { margin-top: .25rem; }

    /* Switch rows: the checkbox at the end as a switch (same look as the member Settings switches), text + caption at the start */
    :is(.gm-as-root, .gm-as-sheet) .gm-as-sw { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; margin-top: .75rem;
        padding: .875rem 1rem; border: 1px solid var(--gm-ms-line); border-radius: .875rem; background: var(--color-background); font-size: .875rem; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-sw > :not(input) { grid-column: 1; min-width: 0; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-sw > input[type="checkbox"] { grid-column: 2; grid-row: 1 / span 3; appearance: none; -webkit-appearance: none; position: relative; flex: none;
        width: 2.75rem; height: 1.5rem; margin: 0; border: 0; border-radius: 9999px; background: color-mix(in oklch, var(--color-foreground) 15%, transparent);
        cursor: pointer; transition: background-color .15s; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-sw > input[type="checkbox"]::before { content: ""; position: absolute; top: .125rem; inset-inline-start: .125rem; width: 1.25rem; height: 1.25rem;
        border-radius: 9999px; background: var(--color-background); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: inset-inline-start .15s linear; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-sw > input[type="checkbox"]:checked { background: var(--color-foreground); }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-sw > input[type="checkbox"]:checked::before { inset-inline-start: 1.375rem; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-sw > input[type="checkbox"]:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-primary) 60%, transparent); outline-offset: 2px; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-swg { gap: 0; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-swg > .gm-as-sw { margin-top: 0; border-radius: 0; border-top-width: 0; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-swg > .gm-as-sw:first-of-type { border-top-width: 1px; border-start-start-radius: .875rem; border-start-end-radius: .875rem; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-swg > .gm-as-sw:last-of-type { border-end-start-radius: .875rem; border-end-end-radius: .875rem; }

    /* Logo Settings: the logo card first, then the name fields */
    .gm-as-logo > div:last-child { order: -1; margin-top: 0; margin-bottom: 1.25rem; }

    /* Notifications position: one white list, the radio at the end of each row */
    .gm-ms-panes .gm-as-radios { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--gm-ms-line); border-radius: .875rem; background: var(--color-background); }
    .gm-as-radios > label { flex-direction: row-reverse; justify-content: space-between; min-height: 3.25rem; padding: 0 1rem; border: 0; border-radius: 0; font-size: .9375rem; }
    .gm-as-radios > label + label { box-shadow: inset 0 1px 0 var(--gm-ms-line); }
    .gm-as-radios > label > input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-primary); }

    /* Policy pages: header note as a caption, the pages as one white group, "View" as an icon */
    .gm-as-root .gm-ms-h > span.text-xs.opacity-50 { flex: 1 1 100%; margin: 0 .25rem .5rem; text-align: start; }
    .gm-as-list { overflow: hidden; border: 1px solid var(--gm-ms-line); border-radius: .875rem; background: var(--color-background); }
    .gm-as-list > * + * { border-top: 0; box-shadow: inset 0 1px 0 var(--gm-ms-line); }
    .gm-as-list > div { min-height: 3.5rem; padding: .625rem 1rem; }
    a.gm-as-view { margin-inline-end: .5rem; padding: .375rem; font-size: 0; }
    a.gm-as-view > svg, a.gm-as-view > i { margin: 0; }

    /* Policy editor: a bottom sheet (fixed to the visible viewport's bottom so Save is never hidden) */
    .gm-as-sheet > .box { position: fixed; left: 0; right: 0; bottom: 0; width: 100% !important; max-width: none !important; max-height: 92dvh; margin: 0 !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); overflow-y: auto; border-radius: 1.25rem 1.25rem 0 0; background: var(--color-background);
        transform: translateY(100%); transition: transform .3s ease; }
    .gm-as-sheet.show > .box { transform: none; }
    .gm-as-sheet { --gm-ms-line: color-mix(in oklch, var(--color-foreground) 7%, transparent); }   /* moved to <body> by the modal script: outside .gm-ms-root */
    .gm-as-sheet > .box::before, .gm-as-sheet > .box::after { display: none; }
    .gm-as-sheet form > .border-t { display: flex; gap: .5rem; }
    .gm-as-sheet form > .border-t > button { flex: 1 1 0%; height: 2.75rem; margin: 0; }

    /* ── Site-settings data lists (admin/countries, admin/currencies: .gm-as-crud) — the top bar back to General settings, the
       page note as a caption, the rows as one compact white list (tap = Edit, which stretches over the row; the status
       switch and the trash icon sit above it), Add / Edit / Delete dialogs as bottom sheets (.gm-as-sheet above). ── */
    .gm-as-crud > p[data-gm-hinted] { display: block !important; margin: .5rem .25rem 0; font-size: .75rem; line-height: 1.45; opacity: .6; }
    .gm-as-crud .gm-as-tb { margin-top: 1rem !important; gap: .5rem 0; }
    .gm-as-crud .gm-as-tb .relative.w-56 { width: 100%; }
    .gm-as-crud .gm-as-tb input { height: 2.75rem; }
    .gm-as-crud .grid.gap-6:has(> .gm-as-tb) { row-gap: .5rem; }
    table.gm-as-tbl, table.gm-as-tbl > tbody { display: block; width: 100%; }
    table.gm-as-tbl { margin-top: .75rem; border-spacing: 0; overflow: hidden; border: 1px solid var(--gm-ms-line); border-radius: .875rem; background: var(--color-background); }
    table.gm-as-tbl > thead { display: none; }
    table.gm-as-tbl > tbody > tr { position: relative; display: grid; align-items: center; gap: .125rem .75rem; min-height: 3.75rem; margin: 0; padding: .625rem 1rem;
        border: 0; border-radius: 0; box-shadow: none; background: none; transition: background-color .15s; }
    table.gm-as-tbl > tbody > tr + tr { box-shadow: inset 0 1px 0 var(--gm-ms-line); }
    table.gm-as-tbl > tbody > tr:active { background: color-mix(in oklch, var(--color-foreground) 4%, transparent); }
    table.gm-as-tbl > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; text-align: start; }
    table.gm-as-tbl > tbody > tr > td::before { content: none !important; }
    table.gm-as-tbl > tbody > tr > td > *, table.gm-as-tbl > tbody > tr > td.gm-cell-main > * { margin: 0; }
    table.gm-as-tbl .gm-cell-main .whitespace-nowrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.gm-as-tbl .gm-as-edit { font-size: 0; }
    table.gm-as-tbl .gm-as-edit::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole row opens Edit */
    table.gm-as-tbl .gm-as-edit > svg, table.gm-as-tbl .gm-as-edit > i { display: none; }
    table.gm-as-tbl .gm-as-del { position: relative; z-index: 2; display: flex; padding: .5rem; margin-inline-end: -.5rem; font-size: 0; color: inherit; opacity: .45; }
    table.gm-as-tbl .gm-as-del:active { color: var(--color-danger); opacity: 1; }
    table.gm-as-tbl .gm-as-del > svg, table.gm-as-tbl .gm-as-del > i { width: 1.125rem; height: 1.125rem; margin: 0; }
    /* status: the same switch as the member Settings (on = .text-success); a tap still toggles it (toggleActive) */
    .gm-as-tg { position: relative; z-index: 2; flex: none; width: 2.75rem !important; height: 1.5rem; border-radius: 9999px; background: color-mix(in oklch, var(--color-foreground) 15%, transparent);
        transition: background-color .15s; }
    .gm-as-tg > * { display: none !important; }
    .gm-as-tg::before { content: ""; position: absolute; top: .125rem; inset-inline-start: .125rem; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
        background: var(--color-background); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: inset-inline-start .15s linear; }
    .gm-as-tg.text-success { background: var(--color-foreground); }
    .gm-as-tg.text-success::before { inset-inline-start: 1.375rem; }
    /* Countries: flag · name / ISO · dial code under it — switch — trash */
    .gm-as-tbl--co > tbody > tr { grid-template-columns: max-content minmax(0, 1fr) auto auto; column-gap: .375rem; }
    .gm-as-tbl--co > tbody > tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    .gm-as-tbl--co > tbody > tr > td:nth-child(2) { grid-column: 1; grid-row: 2; padding-inline-start: 2.25rem; font-size: .75rem; }
    .gm-as-tbl--co > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: start; font-size: .75rem; direction: ltr; unicode-bidi: isolate; }
    .gm-as-tbl--co > tbody > tr > td:nth-child(2):has(+ td:not(:empty))::after { content: "·"; margin-inline-start: .375rem; }
    .gm-as-tbl--co > tbody > tr > td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; margin-inline-start: .375rem; }
    .gm-as-tbl--co > tbody > tr > td:nth-child(5) { grid-column: 4; grid-row: 1 / 3; margin-inline-start: .375rem; }
    /* Currencies: symbol · code / name — rate / source — trash; "Inactive" only when off */
    .gm-as-tbl--cu > tbody > tr { grid-template-columns: minmax(0, 1fr) auto auto; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: end; text-align: end; font-size: .8125rem; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(2) div { unicode-bidi: plaintext; }   /* "1 USD = 53.46 EGP" reads left to right in Arabic too */
    .gm-as-tbl--cu > tbody > tr > td:nth-child(2) .text-xs, .gm-as-tbl--cu > tbody > tr > td:nth-child(3) .text-xs { display: none; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 2; align-self: start; font-size: .75rem; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(3) > div > div { justify-content: flex-end; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(3) svg { width: .875rem; height: .875rem; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(4) { grid-column: 1; grid-row: 3; padding-inline-start: 3.25rem; font-size: .75rem; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(4):has(.text-success) { display: none; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(4) > div { justify-content: flex-start; }
    .gm-as-tbl--cu > tbody > tr > td:nth-child(5) { grid-column: 3; grid-row: 1 / 3; }
    /* Languages & Translations (admin/languages: .gm-as-lang) — the header buttons side by side, the tabs scroll sideways (never
       cut off), the languages as compact rows (flag · name / progress — switch / Translate · JSON icons; tap = Edit) */
    .gm-as-lhead { margin-top: .75rem !important; }
    .gm-as-lhead > h2 { display: none; }
    .gm-as-lhead > .gm-btnrow { display: grid; flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .gm-as-lhead > .gm-btnrow > form > button, .gm-as-lhead > .gm-btnrow > button { width: 100%; margin: 0; padding-inline: .5rem; white-space: normal; line-height: 1.2; }
    ul.gm-as-ltabs { max-width: none !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    ul.gm-as-ltabs::-webkit-scrollbar { display: none; }
    ul.gm-as-ltabs > li { flex: 1 0 auto; width: auto; }
    ul.gm-as-ltabs > li > a { padding-inline: .75rem; white-space: nowrap; }
    @media (max-width: 479.98px) { ul.gm-as-ltabs > li > a { padding-inline: .5rem; } ul.gm-as-ltabs > li > a > :is(svg, i) { display: none; } }   /* the four labels fit a phone without their icons */
    .gm-as-tbl--lg > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(2), .gm-as-tbl--lg > tbody > tr > td:nth-child(3) { display: none; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(4) { grid-column: 1; grid-row: 2; padding-inline-start: 3.25rem; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(4) [style*="min-width:6rem"] { min-width: 2.5rem !important; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(4) span.text-xs { white-space: nowrap; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; font-size: .75rem; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(6) { grid-column: 2; grid-row: 2; }
    .gm-as-tbl--lg > tbody > tr > td:nth-child(6) > div { flex-wrap: nowrap; justify-content: flex-end; column-gap: .25rem; }
    .gm-as-tg.opacity-60 { opacity: 1; }
    table.gm-as-tbl a.gm-as-ico { position: relative; z-index: 2; padding: .375rem; font-size: 0; opacity: .6; }
    table.gm-as-tbl a.gm-as-ico > svg, table.gm-as-tbl a.gm-as-ico > i { width: 1.125rem; height: 1.125rem; margin: 0; }
    :is(.gm-as-root, .gm-as-sheet) .gm-as-swg { flex-direction: column; flex-wrap: nowrap; }
}