/* === agent g: CRM power in glass - Customers directory, Deals pipeline, Views / Dashboards ("Make it yours") ===
   Scoped to .gx-* (new screens) and to main[data-module="customers"|"deals"|"views"]. Uses the LIQUID GLASS tokens. */

/* Views and dashboards get their own personality: iris. */
body:has(main[data-module="views"]) { --mod: #5B5BD6; --mod-rgb: 91 91 214; }

/* ---------------------------------------------------------------- shared page frame (rail + main), like Desk */
.main.flush > .gx-page { flex: 1; min-height: 0; }
.gx-page { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; height: 100%;
  transition: grid-template-columns calc(var(--spring-response, .35) * 1s) var(--ease-out, ease-out); }
.gx-page.gx-norail { grid-template-columns: 0 minmax(0, 1fr); }
.gx-rail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: rgb(255 255 255 / .42); border-right: 1px solid rgb(255 255 255 / .6);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
.gx-norail .gx-rail { visibility: hidden; }
.gx-rail-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-3) var(--sp-1) var(--sp-4); }
.gx-rail-head b { font-size: var(--fs-xl); letter-spacing: -.015em; }
.gx-vlist { overflow: auto; padding: 0 var(--sp-2) var(--sp-4); flex: 1; overscroll-behavior: contain; }
.gx-vgroup { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; padding: var(--sp-4) var(--sp-2) var(--sp-1); }
.gx-vitem { display: flex; align-items: center; border-radius: 12px; }
.gx-vitem > button, .gx-vitem > a { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; text-align: left; background: none; border: 0; color: var(--ink-2);
  padding: 7px var(--sp-2); border-radius: 12px; font: inherit; font-size: var(--fs-base); cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; }
.gx-vitem > button span, .gx-vitem > a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-vitem > button:hover, .gx-vitem > a:hover { background: rgb(255 255 255 / .55); }
.gx-vitem > button:active, .gx-vitem > a:active { transform: scale(.985); background: var(--press); }
.gx-vitem .ico { color: var(--mod); flex: none; }
.gx-vitem i { font-style: normal; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.gx-vitem.on > button { background: rgb(255 255 255 / .92); box-shadow: var(--glass-edge), var(--sh-hover); font-weight: 600; color: var(--ink); }
.gx-vitem.gx-new > a { color: var(--mod); font-weight: 600; }
.gx-vx { opacity: 0; background: none; border: 0; color: var(--faint); width: 24px; height: 24px; border-radius: 8px; cursor: pointer; flex: none; }
.gx-vitem:hover .gx-vx, .gx-vx:focus-visible { opacity: 1; }

.gx-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gx-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-2); flex-wrap: wrap; }
.gx-title { display: flex; flex-direction: column; min-width: 0; }
.gx-title h1 { margin: 0; font-size: 1.375rem; letter-spacing: -.022em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.gx-search { display: flex; align-items: center; gap: var(--sp-2); width: min(340px, 34vw); padding: 0 var(--sp-3); color: var(--faint);
  border-radius: var(--r-pill); background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px var(--line-2); transition: width .25s var(--ease-out, ease-out), box-shadow .15s; }
.gx-search input { border: 0; background: none; padding: 0; min-height: 36px; }
.gx-search input:focus { outline: none; }
.gx-search:focus-within { width: min(440px, 44vw); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .55), 0 0 0 4px rgb(var(--mod-rgb) / .14); background: #fff; }
.gx-seg button[aria-pressed="true"] .ico { color: var(--mod); }
.gx-add { display: flex; gap: var(--sp-2); }
.gx-head .btn { height: 34px; padding: 0 var(--sp-4); }
.gx-head .btn:active, .gx-tools .dk-link:active, .gx-starter:active, .gx-chip:active { transform: scale(.97); }

.gx-tools { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-3); flex-wrap: wrap; }
.gcx-pill { position: relative; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); transition: background .15s, box-shadow .15s; }
.gcx-pill select { appearance: none; -webkit-appearance: none; border: 0; background: none; width: auto; max-width: 220px; min-height: 30px; padding: 0 26px 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; text-overflow: ellipsis; }
.gcx-pill .ico { position: absolute; right: 9px; pointer-events: none; }
.gcx-pill.on { background: rgb(var(--mod-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .45); }
.gcx-pill.on select { color: var(--ink); font-weight: 600; }
.gcx-pill:focus-within { box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .6), 0 0 0 3px rgb(var(--mod-rgb) / .15); }
.gx-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); padding: 0 var(--sp-2); cursor: pointer; }
.gx-toggle input { width: 16px; height: 16px; min-height: 0; accent-color: var(--mod); }

.gx-body { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--sp-5) var(--sp-6); transition: opacity .18s; }
.gx-body.gx-stale { opacity: .6; }
.gx-note { padding: var(--sp-2) var(--sp-1); }
.gx-readonly { margin: 0 var(--sp-5) var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2);
  background: rgb(255 255 255 / .55); border-radius: var(--r-pill); padding: 6px var(--sp-3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); width: fit-content; max-width: calc(100% - 2 * var(--sp-5)); }
.gx-readonly .ico { color: var(--mod); flex: none; }

/* ---------------------------------------------------------------- customers: list, table, cards */
.gx-list, .gx-tablewrap { background: var(--panel); border-radius: var(--r-card); box-shadow: var(--glass-edge), var(--sh-1); overflow: hidden;
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
.gx-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: 11px var(--sp-4); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .12s; }
.gx-row:last-child { border-bottom: 0; }
.gx-row:hover { background: rgb(255 255 255 / .6); text-decoration: none; }
.gx-row:active { background: rgb(var(--mod-rgb) / .08); }
.gx-row:hover .gx-row-name { color: var(--link); }
.gx-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; flex: none;
  color: #fff; background: linear-gradient(145deg, rgb(var(--mod-rgb) / .7), var(--mod)); box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 3px 8px rgb(var(--mod-rgb) / .25); }
.gx-av.org { border-radius: 10px; background: linear-gradient(145deg, #4b62b8, var(--sg-blue)); box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 3px 8px rgb(var(--sg-blue-rgb) / .25); }
.gx-row-main { min-width: 0; }
.gx-row-name { font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.gx-sub { display: flex; align-items: center; flex-wrap: nowrap; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gx-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.gx-row-right { display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; color: var(--ink-2); }
.gx-when { width: 64px; text-align: right; font-size: var(--fs-sm); color: var(--faint); }

.gx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.gx-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  padding: 10px var(--sp-3); background: rgb(255 255 255 / .82); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.gx-table th .vw-th { background: none; border: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.gx-table td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.gx-table tr:last-child td { border-bottom: 0; }
.gx-table tbody tr { cursor: pointer; transition: background .12s; }
.gx-table tbody tr:hover td { background: rgb(255 255 255 / .62); }
.gx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.gx-tname a { font-weight: 600; color: var(--ink); }
.gx-tname a:hover { color: var(--link); }
.gx-tablewrap { overflow: auto; }

.gx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.gx-card { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4); border-radius: var(--r-card); color: inherit; text-decoration: none; min-width: 0;
  background: var(--panel); box-shadow: var(--glass-edge), var(--sh-1); transition: box-shadow .18s, transform .18s, background .18s; }
.gx-card:hover { background: rgb(255 255 255 / .9); box-shadow: var(--glass-edge), var(--sh-hover); text-decoration: none; transform: translateY(-1px); }
.gx-card:active { transform: scale(.985); }
.gx-card-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.gx-card-name { font-size: var(--fs-lg); letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.gcx-next { font-size: var(--fs-sm); color: var(--ink-2); display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gcx-next .ico { color: var(--mod); flex: none; }
.gcx-next.none { color: var(--faint); }
.gx-card-foot { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); margin-top: auto; border-top: 1px solid var(--line); color: var(--ink-2); }

/* ---------------------------------------------------------------- deals: pipeline board */
.gx-body-board { padding-bottom: var(--sp-3); }
.gx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(264px, 320px); gap: var(--sp-3); align-items: start; min-height: 100%; overflow-x: auto; padding-bottom: var(--sp-2); }
.gx-lane { display: flex; flex-direction: column; min-height: 120px; max-height: 100%; border-radius: var(--r-card); background: rgb(255 255 255 / .38);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); transition: background .15s, box-shadow .15s; }
.gx-lane.closed { background: rgb(255 255 255 / .24); }
.gx-lane.drop { background: rgb(var(--mod-rgb) / .12); box-shadow: inset 0 0 0 2px rgb(var(--mod-rgb) / .45); }
.gx-lane-head { display: flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-3) var(--sp-2); position: sticky; top: 0; z-index: 1; }
.gx-lane-head b { font-size: var(--fs-base); letter-spacing: -.008em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gx-lane-head i { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: rgb(255 255 255 / .7); border-radius: var(--r-pill); padding: 0 7px; font-variant-numeric: tabular-nums; }
.gx-lane-sum { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--mod); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-lane.closed .gx-lane-sum { color: var(--muted); }
.gx-code { flex: none; font-size: 10px; font-weight: 700; color: #fff; background: var(--mod); border-radius: 6px; padding: 1px 6px; letter-spacing: .02em; }
.gx-lane.closed .gx-code { background: var(--faint); }
.gx-lane-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); overflow: auto; }
.gx-lane-more { border: 0; background: rgb(255 255 255 / .55); border-radius: var(--r-pill); padding: 6px; font: inherit; font-size: var(--fs-sm); color: var(--link); cursor: pointer; }
.gx-lane-more:hover { background: #fff; }
.gx-deal { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3); border-radius: 16px; color: inherit; text-decoration: none; background: rgb(255 255 255 / .78);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 1px 2px rgb(var(--sg-blue-rgb) / .06); transition: box-shadow .15s, background .15s; -webkit-user-drag: none; user-select: none; }
.gx-deal:hover { background: #fff; box-shadow: var(--glass-edge), var(--sh-hover); text-decoration: none; }
.gx-deal:active { transform: scale(.985); }
.gx-deal.gx-lifted { position: relative; z-index: 20; cursor: grabbing; background: #fff; box-shadow: var(--sh-pop); transition: none; }
.gx-deal-top { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.gx-job { font-weight: 700; color: var(--mod); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.gx-job.none { color: var(--faint); font-weight: 500; }
.gx-pipe { margin-left: auto; color: var(--muted); }
.gx-deal-name { font-size: var(--fs-base); line-height: 1.3; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gx-deal-cust { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-deal-nums { display: flex; align-items: baseline; gap: var(--sp-2); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--ink-2); }
.gx-deal-nums b { font-size: var(--fs-lg); color: var(--ink); letter-spacing: -.01em; }
.gx-deal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.gx-close { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.gx-close.late { color: var(--bad); font-weight: 600; }
.gx-own { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--ink-2); background: rgb(var(--mod-rgb) / .14); flex: none; }
.gx-stage { display: inline-block; font-size: var(--fs-sm); padding: 1px 8px; border-radius: var(--r-pill); background: rgb(var(--mod-rgb) / .12); color: var(--ink); }
.gx-stage.closed { background: var(--hover); color: var(--muted); }

/* ---------------------------------------------------------------- views + dashboards: Make it yours */
main[data-module="views"] .vw-side { background: rgb(255 255 255 / .5); border: 0; border-radius: var(--r-card); box-shadow: var(--glass-edge), var(--sh-1); padding: var(--sp-4);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
main[data-module="views"] .vw-side .btn-primary { background: linear-gradient(180deg, rgb(var(--mod-rgb) / .85), var(--mod)); box-shadow: 0 6px 16px rgb(var(--mod-rgb) / .3); }
main[data-module="views"] .vw-ul li { border-radius: 10px; }
main[data-module="views"] .vw-ul li.active { background: rgb(255 255 255 / .9); box-shadow: var(--glass-edge), var(--sh-hover); }
main[data-module="views"] .vw-ul li.active a { color: var(--ink); font-weight: 600; }
main[data-module="views"] .vw-star.on { color: var(--sg-gold-deep); }
main[data-module="views"] .vw-builder, main[data-module="views"] .db-card, main[data-module="views"] .table-wrap, main[data-module="views"] .vw-list, main[data-module="views"] .vw-cal {
  background: var(--panel); border: 0; border-radius: var(--r-card); box-shadow: var(--glass-edge), var(--sh-1); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
main[data-module="views"] .vw-builder { padding: var(--sp-4) var(--sp-5); }
main[data-module="views"] .table-wrap { overflow: auto; }
main[data-module="views"] .vw-list { padding: var(--sp-2) var(--sp-4); }
main[data-module="views"] .vw-cal { padding: var(--sp-3) var(--sp-4); }
main[data-module="views"] .db-card { padding: var(--sp-4) var(--sp-5); }
main[data-module="views"] .db-card h3 { letter-spacing: -.012em; }
main[data-module="views"] .db-big { color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
main[data-module="views"] .db-bar .b span { background: linear-gradient(90deg, rgb(var(--mod-rgb) / .55), var(--mod)); }
main[data-module="views"] .vw-lane { background: rgb(255 255 255 / .4); border: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
main[data-module="views"] .vw-card { border-radius: 14px; background: rgb(255 255 255 / .8); border: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 1px 2px rgb(var(--sg-blue-rgb) / .06); }
main[data-module="views"] .vw-card:hover { background: #fff; box-shadow: var(--glass-edge), var(--sh-hover); }
main[data-module="views"] .svc-head h1, main[data-module="views"] .gx-vhero h1 { letter-spacing: -.022em; }
main[data-module="views"] .svc-tile { border: 0; border-radius: 16px; background: var(--panel); box-shadow: var(--glass-edge), var(--sh-1); transition: box-shadow .15s, transform .15s; }
main[data-module="views"] .svc-tile:hover { box-shadow: var(--glass-edge), var(--sh-hover); text-decoration: none; transform: translateY(-1px); }
main[data-module="views"] .db-filters select, main[data-module="views"] .vw-grid select, main[data-module="views"] .vw-cond select, main[data-module="views"] .vw-cond input { border-radius: var(--r-ctl); }
.gx-h1-tile { width: 28px; height: 28px; border-radius: 9px; }
.gx-h1-tile .ico { width: 15px; height: 15px; }
.svc-head h1 .gx-h1-tile, .tk-title h1 .gx-h1-tile { margin-right: 2px; }

.gx-vhome { max-width: 1100px; }
.gx-vhero { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }
.gx-vhero .mod-tile { width: 40px; height: 40px; border-radius: 12px; }
.gx-vhero .mod-tile .ico { width: 20px; height: 20px; }
.gx-vhero h1 { margin: 2px 0 var(--sp-1); font-size: 1.5rem; }
.gx-vhero p { max-width: 720px; margin: 0; }
.gx-vh2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
.gx-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.gx-starter { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: var(--sp-4); border: 0; border-radius: 20px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--panel); box-shadow: var(--glass-edge), var(--sh-1); transition: box-shadow .18s, transform .18s, background .18s; }
.gx-starter:hover { background: rgb(255 255 255 / .92); box-shadow: var(--glass-edge), var(--sh-hover); transform: translateY(-1px); }
.gx-starter b { font-size: var(--fs-lg); letter-spacing: -.012em; margin-top: var(--sp-2); }
.gx-starter-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, rgb(var(--mod-rgb) / .72), var(--mod)); box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 4px 12px rgb(var(--mod-rgb) / .3); }
.gx-starter.blank { background: rgb(255 255 255 / .4); box-shadow: inset 0 0 0 1.5px rgb(var(--mod-rgb) / .25); }
.gx-starter.blank .gx-starter-ic { background: rgb(var(--mod-rgb) / .14); color: var(--mod); box-shadow: none; }
.gx-startrow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.gx-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer;
  background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .15s, box-shadow .15s; }
.gx-chip .ico { color: var(--mod); }
.gx-chip:hover { background: #fff; }
.gx-chip.on { background: rgb(var(--mod-rgb) / .14); box-shadow: inset 0 0 0 1px rgb(var(--mod-rgb) / .5); color: var(--ink); }

main[data-module="views"] .btn-outline { border-color: rgb(var(--mod-rgb) / .5); color: var(--mod); background: rgb(var(--mod-rgb) / .08); }
@media (max-width: 760px) { main[data-module="views"] .vw-main { order: -1; } main[data-module="views"] .vw-page { gap: var(--sp-3); } }

/* Tickets panel: the "New view" entry reads as an action. */
.dk-vitem.dk-vnew > a { color: var(--mod); font-weight: 600; }

/* ---------------------------------------------------------------- customer page: glass header with the module tile */
main[data-module="customers"] .tk-head { background: linear-gradient(135deg, rgb(255 255 255 / .78), rgb(255 255 255 / .55)); box-shadow: 0 1px 0 rgb(255 255 255 / .7), 0 6px 18px rgb(var(--sg-blue-rgb) / .05); }
main[data-module="customers"] .tk-title h1 { display: flex; align-items: center; gap: var(--sp-2); }
.gx-story-tile { width: 30px; height: 30px; }
.gx-story-tile .ico { width: 16px !important; height: 16px !important; color: #fff !important; }

/* ---------------------------------------------------------------- phone and tablet */
@media (max-width: 1100px) { .gx-row-right .small { display: none; } }
@media (max-width: 760px) {
  .gx-page, .gx-page.gx-norail { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .gx-rail { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .6); }
  .gx-norail .gx-rail { display: none; }
  .gx-rail-head { padding: var(--sp-2) var(--sp-3) 0 var(--sp-4); }
  .gx-vlist { display: flex; gap: 6px; overflow-x: auto; padding: var(--sp-2) var(--sp-3) var(--sp-3); flex: none; scrollbar-width: none; }
  .gx-vgroup { display: none; }
  .gx-vitem > button, .gx-vitem > a { white-space: nowrap; background: rgb(255 255 255 / .6); border-radius: var(--r-pill); padding: 6px var(--sp-3); }
  .gx-vitem > button span, .gx-vitem > a span { overflow: visible; }
  .gx-vx { display: none; }
  .gx-head { padding: var(--sp-3) var(--sp-3) var(--sp-2); gap: var(--sp-2); }
  .gx-title h1 { font-size: 1.2rem; }
  .gx-search, .gx-search:focus-within { order: 10; width: 100%; }
  .gx-add .btn:last-child { display: none; }
  .gx-tools { padding: 0 var(--sp-3) var(--sp-2); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gx-tools > * { flex: none; }
  .gx-body { padding: 0 var(--sp-3) var(--sp-5); }
  .gx-row { grid-template-columns: 34px minmax(0, 1fr); padding: 10px var(--sp-3); }
  .gx-row-right { grid-column: 2; gap: var(--sp-2); }
  .gx-row-right .small, .gx-when { display: none; }
  .gx-cards { grid-template-columns: minmax(0, 1fr); }
  .gx-board { grid-auto-columns: minmax(78vw, 1fr); scroll-snap-type: x mandatory; }
  .gx-lane { scroll-snap-align: start; }
  .gx-readonly { margin: 0 var(--sp-3) var(--sp-2); max-width: calc(100% - 2 * var(--sp-3)); border-radius: 14px; }
  .gx-starters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-page, .gx-search, .gx-card, .gx-starter, .gx-deal, .gx-row { transition: none; }
  .gx-card:hover, .gx-starter:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .gx-rail, .gx-list, .gx-tablewrap, main[data-module="views"] .vw-side, main[data-module="views"] .vw-builder, main[data-module="views"] .db-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
}