.stn-av-on { background: none; }
.stn-av-on .stn-av-ph { display: none; }

/* ══ GALAXIES (stations/) — separate from Collections ════════════
   A galaxy is open to everyone from birth. Colour law: blue = public signal
   (every galaxy wears it), gold = yours / the verb (+ GALAXY, create, keep).
   Collections above are untouched. */
.gx-vis {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px 3px 6px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; line-height: 1;
  color: rgba(190,205,228,0.7); border: 1px solid rgba(150,170,200,0.28); background: rgba(150,170,200,0.06);
}
.gx-vis i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentColor; }
.gx-vis-open { color: #7fc3ff; border-color: rgba(24,176,245,0.45); background: rgba(24,176,245,0.08); }
.gx-vis-open i { background: #18B0F5; border-color: #18B0F5; box-shadow: 0 0 6px rgba(24,176,245,0.9); }
.bx-cstrow .gx-vis { padding: 2px 6px 2px 5px; font-size: 7.5px; }
/* the switch layer: two shelves — yours, and everyone's open galaxies */
.bx-cst-sec {
  margin: 16px 4px 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.24em;
  color: rgba(200,216,240,0.45); text-align: left;
}
.bx-cst-sec:first-child { margin-top: 2px; }
.bx-cst-sec span { font-weight: 400; letter-spacing: 0.06em; color: rgba(200,216,240,0.35); }
.bx-cst-pub { max-height: 236px; overflow-y: auto; scrollbar-width: thin; }
.bx-gx-find {
  width: 100%; margin: 6px 0 4px; padding: 8px 11px; border-radius: 8px;
  background: rgba(8,14,26,0.6); border: 1px solid rgba(150,190,225,0.22); color: #eef3fb;
  font-family: var(--font-mono); font-size: 12px; outline: none;
}
.bx-gx-find:focus { border-color: rgba(24,176,245,0.5); }
.bx-cstrow-new { border-bottom: none; margin-top: 6px; }
.bx-cstrow-new .bx-cstrow-name { font-weight: 400; color: rgba(245,197,66,0.9); }
/* the workstation's home card: who can see it, under the name */
.gx-home-vis, .gx-mast-vis { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: rgba(190,205,228,0.62); }
.gx-mast-vis { margin-top: 0; }
.gal-mast-name.gx-noedit { cursor: default; }
.bx-confirm.gxc { width: min(420px, 90vw); }
@media (max-width: 640px) {
  .bx-gx-find { font-size: 16px; }   /* iOS: ≥16px or it zooms on focus */
}
/* GALAXY PROTOTYPE · rules pass — disabled rows, notes, menu sub-heads */
.bx-cstrow[disabled] { cursor: default; }
.bx-cstrow[disabled]:not(.bx-cstrow-here) { opacity: 0.4; }
.bx-cstrow[disabled]:hover { background: none; }
.bx-cstrow-new { margin: 0 0 4px; border-bottom: 1px solid rgba(245,197,66,0.18); }
.bx-cstrow-new .bx-cstrow-name { font-weight: 700; color: #f5c542; }
.gx-by { flex: 0 0 auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; color: rgba(245,197,66,0.7); }
.gx-note { margin: 2px 4px 6px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: rgba(238,190,140,0.85); text-align: left; }
/* GALAXY PROTOTYPE · pixel icons before every galaxy name (16×16, 1:1 or 2:1
   only — anything between smears the pixels) */
.gx-ico { flex: 0 0 auto; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; image-rendering: pixelated; }
.gx-ico-spiral svg { display: block; width: 16px; height: 16px; }
.gx-ico-spiral { color: rgba(185,201,226,0.75); }          /* private: slate */
.gx-ico-spiral.gx-ico-open { color: #7fc3ff; }              /* open: signal blue */
.gx-ico-mast { width: 32px; height: 32px; margin-right: 12px; vertical-align: middle; }
.gx-ico-mast.gx-ico-spiral svg { width: 32px; height: 32px; }
.gal-mast-titlerow { display: flex; align-items: center; justify-content: center; }
.bx-cstrow-new .gx-ico-spiral, .mg-cm-newrow .gx-ico-spiral { color: #f5c542; }

/* GALAXY PROTOTYPE · the full NEW GALAXY sheet — name, a line of story, who
   it's for, an icon, the stations it starts with. Labels small and quiet;
   the fields carry the weight. */
.gxc-l { display: block; margin: 0 0 8px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.22em; color: rgba(200,216,240,0.5); }
.gxc-l span { font-weight: 400; letter-spacing: 0.06em; color: rgba(200,216,240,0.35); }
.gxc-note { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; line-height: 1.4; color: rgba(185,201,226,0.55); }
.gxc-st { max-height: 156px; overflow-y: auto; border-radius: 10px; border: 1px solid rgba(150,190,225,0.18); background: rgba(8,14,26,0.45); padding: 4px; }
.gxc-strow { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border-radius: 7px; cursor: pointer; background: none; border: none; text-align: left; font-family: var(--font-mono); font-size: 12px; color: #dfe8f6; }
.gxc-strow:hover { background: rgba(150,190,225,0.07); }
.gxc-strow input { accent-color: #f5c542; width: 15px; height: 15px; flex: none; }
.gxc-stname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxc-strow em { flex: none; font-style: normal; font-size: 10px; color: rgba(185,201,226,0.5); }
.gxc-strow.gx-shut, .gxc-strow[disabled] { opacity: 0.45; cursor: default; }
.gxc-stchk { flex: none; width: 15px; text-align: center; color: #f5c542; }
.gxc-land { max-height: 300px; margin-bottom: 18px; }

/* the workstation: the galaxies this station is in */
.gx-ins { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 6px; }
.gx-ins .bx-cst-home-kick { text-align: center; margin-bottom: 6px; }
.gx-in {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; cursor: pointer; text-align: left;
  border-radius: 10px; border: 1px solid rgba(150,190,225,0.16); background: rgba(8,14,26,0.4);
  transition: border-color .15s ease, background .15s ease;
}
.gx-in:hover { border-color: rgba(150,190,225,0.4); background: rgba(24,60,110,0.18); }
.gx-in-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-pixel); font-size: 9.5px; color: #eef4fc; line-height: 1.6; }
.gx-in-s { flex: none; font-family: var(--font-mono); font-size: 9.5px; color: rgba(185,201,226,0.55); }
.gx-in b { flex: none; font-weight: 400; color: rgba(185,201,226,0.5); }
.gx-ins .bx-cst-change { align-self: center; margin-top: 10px; }

/* a galaxy's masthead */
.gx-crumb { display: block; margin: 0 auto 8px; padding: 2px 6px; cursor: pointer; background: none; border: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(185,201,226,0.6); }
.gx-crumb:hover { color: #eef4fc; }
/* ALL · MINE · OTHERS — whose stations, inside a galaxy */
.gx-who { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid rgba(150,190,225,0.2); background: rgba(8,13,24,0.45); }
.gx-who button { padding: 6px 10px; border: none; border-radius: 7px; background: none; cursor: pointer; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: rgba(185,201,226,0.6); }
.gx-who button i { font-style: normal; font-weight: 400; opacity: 0.7; }
.gx-who button:hover { color: #e7eefb; }
.gx-who button.on { background: rgba(24,120,190,0.35); color: #eef5ff; }
/* someone else's station inside a galaxy: a quiet card, not yours to open */
.gx-other-card { cursor: default; }
.gx-other-card .mg-card-cover { opacity: 0.85; }
.gx-by-tag { padding: 3px 7px; border-radius: 999px; background: rgba(8,13,24,0.7); border: 1px solid rgba(127,195,255,0.35); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; color: #a9d3ff; }
.gx-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 0; text-align: center; }
/* small bits */
.gx-alone-ico .gx-ico { width: 32px; height: 32px; }
.gx-alone-ico .gx-ico-spiral svg { width: 32px; height: 32px; }
.gx-ico-new { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.gx-ico-new.gx-ico-spiral, .gx-ico-new.gx-ico-spiral svg { color: #f5c542; width: 18px; height: 18px; }
.gx-ico-born { width: 28px; height: 28px; margin-right: 10px; vertical-align: -6px; }
.mg-cm-gx .mg-cm-chk svg { width: 13px; height: 13px; color: #7fc3ff; vertical-align: -2px; }
.gxc-sw { max-height: 52vh; overflow-y: auto; margin-bottom: 16px; }

/* ══ MY STATIONS · MY GALAXIES — two parallel pages; the switch sits at top
   centre (the credits pill keeps its own corner) ══ */
#stn-top { position: fixed; top: 23px; left: 50%; transform: translateX(-50%); z-index: 419; display: flex; align-items: center; }
body.ncp-nav-open #stn-top { opacity: 0; pointer-events: none; }
.stn-pages {
  display: inline-flex; gap: 2px; padding: 3px; height: 30px; box-sizing: border-box; border-radius: 999px;
  background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}
.stn-pages button {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: none; border-radius: 999px; cursor: pointer; background: none; white-space: nowrap;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.05em; color: rgba(205,221,242,0.55); transition: color .15s ease, background .15s ease;
}
.stn-pages button svg { width: 13px; height: 13px; }
.stn-pages button:hover { color: #e7eefb; }
.stn-pages button.on { background: rgba(245,197,66,0.14); color: #f5c542; }
/* the drawer's rows can be buttons (the two pages) */
.ncp-nav-drawer button.ncp-nav-link { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; line-height: inherit; letter-spacing: inherit; }   /* same face as the link rows */
.ncp-nav-drawer .ncp-nav-end { margin-left: auto; }
/* MY GALAXIES — the page */
.gx-page-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.gx-ico-page, .gx-ico-page.gx-ico-spiral svg { width: 26px; height: 26px; color: #7fc3ff; }
.gx-sec2 { margin: 18px 0 12px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.24em; color: rgba(200,216,240,0.55); }
.gx-sec2 i { font-style: normal; font-weight: 400; color: rgba(127,195,255,0.8); margin-left: 6px; }
.gx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.gx-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px 18px; cursor: pointer; text-align: center;
  border-radius: 16px; border: 1px solid rgba(127,195,255,0.22);
  background: radial-gradient(circle at 50% 30%, rgba(24,60,110,0.45), rgba(8,14,26,0.6) 70%);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gx-card:hover { transform: translateY(-3px); border-color: rgba(127,195,255,0.55); box-shadow: 0 14px 30px rgba(0,0,0,0.4), 0 0 18px rgba(24,176,245,0.18); }
.gx-card-ico { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 4px; }
.gx-card-ico .gx-ico, .gx-card-ico .gx-ico-spiral svg { width: 64px; height: 64px; }
.gx-card-name { font-family: var(--font-pixel); font-size: 10px; line-height: 1.55; color: #eef4fc; text-wrap: balance; }
.gx-card-meta { font-family: var(--font-mono); font-size: 10.5px; color: rgba(185,201,226,0.65); }
.gx-card-by { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; color: rgba(127,195,255,0.7); }
.gx-card-new { border: 1px dashed rgba(245,197,66,0.55); background: rgba(245,197,66,0.05); }
.gx-card-new .gx-card-name { color: #f5c542; }
.gx-card-new:hover { border-color: rgba(245,197,66,0.9); box-shadow: 0 14px 30px rgba(0,0,0,0.4), 0 0 20px rgba(245,197,66,0.2); }
.gx-card-new .gx-ico-new, .gx-card-new .gx-ico-new.gx-ico-spiral svg { width: 48px; height: 48px; margin: 0; }
.gx-none { padding: 22px 18px; border-radius: 14px; border: 1px dashed rgba(150,190,225,0.22); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: rgba(185,201,226,0.65); }
.gx-none b { color: #cfe6ff; }
.gx-findmore { display: inline-block; margin: 26px 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(127,195,255,0.8); text-decoration: none; border-bottom: 1px solid transparent; }
.gx-findmore:hover { color: #d6ecff; border-bottom-color: rgba(214,236,255,0.6); }
@media (max-width: 640px) {
  #stn-top { top: 62px; }   /* phones: under the corners (name · credits · menu), still centred */
  .stn-pages button { padding: 0 8px; font-size: 7px; }
  .stn-pages button svg { display: none; }
  .gx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}


/* ══ Joey 11-03 (phase A) — copied from his stations/css/preview.css ══ */
/* a galaxy's masthead, in three parts: who it is (+ its settings) · its link
   (the address and the ways to pass it on) · then its Stations below */
.gx-set {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; cursor: pointer; white-space: nowrap; border-radius: 9px;
  border: 1px solid rgba(150,190,225,0.3); background: rgba(120,140,170,0.1); color: #e7eefb;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; transition: border-color .15s ease, background .15s ease;
}
.gx-set:hover { border-color: rgba(150,190,225,0.6); background: rgba(120,140,170,0.18); }
.gx-set svg { color: #8fcfff; }
.gx-set-leave:hover { border-color: rgba(238,163,163,0.6); color: #eea3a3; }
.gx-mast > .gx-set { margin: 20px auto 0; min-width: 120px; }
/* 11-05 RF-1: Settings · Refine side by side, the same size */
.gx-mast > .gx-set-pair { display: flex; justify-content: center; gap: 10px; margin: 20px auto 0; }
.gx-set-pair .gx-set { min-width: 120px; }
.gx-set-refine { border-color: rgba(245,197,66,0.4); color: #f5d88c; }
.gx-set-refine:hover { border-color: rgba(245,197,66,0.7); background: rgba(245,197,66,0.1); }
.gx-set-refine:disabled { opacity: 0.45; cursor: default; }
.gx-set-star { color: #f5c542; }
.gx-mast .gx-mast-vis { margin: 0 0 14px; gap: 12px; }
.gx-link { width: 100%; max-width: 560px; margin: 22px auto 0; text-align: left; }
.gx-link-k { margin: 0 0 7px 2px; font-family: var(--font-pixel); font-size: 7.5px; letter-spacing: 0.06em; color: rgba(185,201,226,0.6); }
.gx-link-box {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px;
  border: 1px solid rgba(127,195,255,0.35); background: rgba(4,8,18,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.gx-link-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #eef4fc;
}
.gx-link-url:hover { text-decoration: underline; text-underline-offset: 3px; }
.gx-link-acts { flex: none; display: flex; gap: 6px; }
.gx-lb {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 11px; cursor: pointer; white-space: nowrap; text-decoration: none; border-radius: 8px;
  border: 1px solid rgba(150,190,225,0.25); background: rgba(120,140,170,0.08); color: #dfe8f6;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; transition: border-color .15s ease, background .15s ease;
}
.gx-lb:hover { border-color: rgba(150,190,225,0.55); background: rgba(120,140,170,0.16); }
.gx-lb-main { border-color: rgba(127,195,255,0.55); background: rgba(24,176,245,0.14); color: #bfe4ff; }
.gx-lb-main:hover { background: rgba(24,176,245,0.22); }
.gx-lb-main.on { border-color: rgba(245,197,66,0.6); background: rgba(245,197,66,0.12); color: #f5d88c; }
.gx-add-card .br-new-label { padding: 0 12px; white-space: normal; text-align: center; line-height: 1.8; }   /* phones: ADD MY / STATIONS on two lines */
@media (max-width: 640px) {
  .gx-page-view .gal-mast { margin-top: 26px; }
  .gx-mast .gal-mast-titlerow { max-width: 100%; padding: 0 8px; box-sizing: border-box; }
  .gx-mast .gal-mast-titlerow .gal-mast-name { flex: 0 1 auto; min-width: 0; font-size: 13px; line-height: 1.5; text-align: center; text-wrap: balance; }   /* long names wrap, never run off */
  .gx-link { padding: 0 24px; box-sizing: border-box; }
  .gx-mast > .gx-set { display: flex; width: calc(100% - 48px); height: 40px; }   /* phones: as wide as the link box */
  .gx-mast > .gx-set-pair { width: calc(100% - 48px); }
  .gx-set-pair .gx-set { flex: 1; min-width: 0; height: 40px; }
  .gx-link-box { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .gx-link-url { padding: 2px 4px; font-size: 13.5px; }
  .gx-link-acts .gx-lb { flex: 1; padding: 0 6px; }
}
/* the picker's way out: make a new station for this galaxy (left), Done (right) */
.bx-confirm-acts.gxl-acts { justify-content: space-between; }
.gxl-new { padding: 6px 0; cursor: pointer; border: none; background: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #9fd0ff; text-decoration: underline; text-decoration-color: rgba(159,208,255,0.35); text-underline-offset: 3px; }
.gxl-new:hover { color: #cfe8ff; }
#stn-top[hidden] { display: none; }
/* beta (ruling D): a draft's masthead — PUBLISH where the link will be */
.gx-draft-pub { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; margin: 22px auto 0; text-align: center; }
.gx-draft-pub span { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: rgba(185,201,226,0.7); }
.gx-pending { max-width: 640px; margin: 0 auto 18px; }
.gx-link-note { margin: 8px 2px 0; font-family: var(--font-mono); font-size: 11px; color: rgba(245,216,140,0.8); }

/* feedback 11-04 §5: the take-out picker (one by one) and the page after the last one leaves */
.gxc-strow.gxc-out .gxc-stname { text-decoration: line-through; opacity: 0.55; }
.gxc-strow.gxc-out .gxc-stchk { color: #eea3a3; }
.gx-none-here { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.65); }
.gx-mast > .gx-none-here { display: block; text-align: center; margin: 20px auto 0; }
/* feedback 11-04 §2: the generated icon (48×40) at Studio's sizes */
.gx-ico.gx-gicon { width: 24px; height: 20px; vertical-align: -4px; }
.gx-ico.gx-gicon-ph { display: inline-flex; }
.gx-ico.gx-gicon-ph svg { width: 18px; height: 18px; }
.gx-card-ico .gx-ico.gx-gicon { width: 72px; height: 60px; }
.gx-card-ico .gx-ico.gx-gicon-ph svg { width: 40px; height: 40px; }
.gx-ico-mast.gx-gicon { width: 48px; height: 40px; }
.gx-ico-mast.gx-gicon-ph svg { width: 30px; height: 30px; }


/* ══ 11-08 — the host's dashboard (gx/galaxy-host.js) and Plan & Credits as a page ══
   Navi has one colour everywhere: indigo. Coral = paused. Gold = something to review. */
:root { --gxh-ind: #8f96ff; --gxh-ind-b: rgba(120,128,255,0.6); --gxh-ind-f: rgba(98,106,230,0.16); --gxh-coral: #f0906c; --gxh-gold: #f5c542; }
/* D-3: one label, three states; the whole capsule takes the state's colour */
.gxh-nl { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; white-space: nowrap; line-height: 1; }
.gxh-nl i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.gxh-nl-on { color: var(--gxh-ind); border-color: var(--gxh-ind-b); background: var(--gxh-ind-f); }
.gxh-nl-off { color: rgba(185,198,220,0.72); border-color: rgba(185,198,220,0.35); background: rgba(185,198,220,0.06); }
.gxh-nl-off i { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.gxh-nl-paused { color: var(--gxh-coral); border-color: rgba(240,144,108,0.6); background: rgba(240,144,108,0.1); }
.gxh-nl-sm { gap: 6px; padding: 4px 10px; font-size: 9px; letter-spacing: 0.18em; border-width: 1px; }
.gxh-nl-sm i { width: 5px; height: 5px; }
/* D-1: the strip */
.gxh-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 4px; border-radius: 14px; border: 1px solid rgba(127,195,255,0.2); background: rgba(6,12,24,0.45); }
.gxh-strip .gxh-cell + .gxh-cell { border-left: 1px solid rgba(127,195,255,0.16); }
.gxh-cell { position: relative; min-width: 0; padding: 16px 22px 14px; text-align: left; }
.gxh-k { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em; color: rgba(200,216,240,0.6); }
.gxh-k i { font-style: normal; color: rgba(127,195,255,0.85); margin-left: 6px; letter-spacing: 0; }
.gxh-n { margin: 6px 0 4px; font-family: var(--font-pixel); font-size: 22px; color: #eef4fc; line-height: 1.15; }
.gxh-n small { font-family: var(--font-mono); font-size: 13px; color: rgba(185,201,226,0.7); margin-left: 4px; }
.gxh-mo { font-family: var(--font-mono); font-size: 11.5px; color: rgba(185,201,226,0.55); }
.gxh-mo b { font-weight: 500; color: #6ad7a0; }
.gxh-lim { position: absolute; right: 18px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; padding: 2px 0; cursor: pointer; border: none; background: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--gxh-ind); }
.gxh-lim:hover .gxh-lim-t { text-decoration: underline; text-underline-offset: 3px; }
.gxh-lim b { font-weight: 500; }
.gxh-bar { position: relative; display: block; width: 56px; height: 4px; border-radius: 4px; background: rgba(150,170,210,0.18); overflow: hidden; }
.gxh-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--gxh-ind); }
.gxh-bar-big { width: 100%; height: 5px; margin: 10px 0 8px; }
.gxh-bar-coral i { background: var(--gxh-coral); }
/* D-2: own cards */
.gx-sec-own { font-size: 12.5px; }
.gx-cards-own { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; }
.gx-cards-own .gx-card { justify-content: center; min-height: 300px; }
.gx-card-own .gx-card-ico { position: relative; width: 120px; height: 120px; }
.gx-card-own .gx-card-ico .gx-ico, .gx-card-own .gx-card-ico .gx-ico-spiral svg, .gx-card-own .gx-card-ico img { width: 112px; height: 112px; }
.gx-card-own .gx-card-name, .gx-cards-own .gx-card-new .gx-card-name { font-size: 15.5px; }
.gx-card-own .gx-card-meta { font-size: 12.5px; }
.gx-card-own .gx-card-meta b { font-weight: 500; color: #dfe8f6; }
.gx-card-nl { margin-top: 10px; }
.gx-badge { position: absolute; top: 0; right: -2px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--gxh-gold); color: #1a1405; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 24px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
/* D-4: the tab bar */
.gxh-tabs { display: flex; justify-content: center; gap: 4px; margin: 26px 0 18px; border-bottom: 1px solid rgba(127,195,255,0.16); }
.gxh-tab { position: relative; padding: 12px 20px; cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; color: rgba(185,201,226,0.6); }
.gxh-tab i { font-style: normal; color: rgba(127,195,255,0.85); margin-left: 6px; }
.gxh-tab.on { color: #eef4fc; border-bottom-color: #3aa8f0; }
.gxh-tab:hover { color: #dfe8f6; }
.gxh-dot { position: absolute; top: 9px; right: 8px; width: 7px; height: 7px; border-radius: 50%; }
.gxh-dot-gold { background: var(--gxh-gold); }
.gxh-dot-coral { background: var(--gxh-coral); }
.gxh-pane { margin: 0 auto 30px; max-width: 1440px; }
.gxh-empty { padding: 26px 8px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.6); }
/* D-5: Pass holders */
.gxh-search { max-width: none; margin-bottom: 10px; }
.gxh-hrow { display: flex; align-items: flex-start; gap: 18px; padding: 16px 12px; border-bottom: 1px solid rgba(127,195,255,0.12); }
.gxh-av { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--av); border: 2px solid color-mix(in srgb, var(--av) 60%, white 25%); font-family: var(--font-pixel); font-size: 12px; color: #fff; }
.gxh-hwho { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gxh-hname { font-family: var(--font-sans); font-size: 15px; color: #eef4fc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxh-hj { font-family: var(--font-mono); font-size: 11.5px; color: rgba(185,201,226,0.55); }
.gxh-htags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gxh-htags[hidden] { display: none; }
.gxh-htag { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(150,190,225,0.3); font-family: var(--font-mono); font-size: 12px; color: #e7eefb; text-decoration: none; }
.gxh-htag:hover { border-color: rgba(127,195,255,0.7); }
.gxh-hmore { flex: none; align-self: center; padding: 4px 2px; cursor: pointer; border: none; background: none; font-family: var(--font-mono); font-size: 12.5px; color: #7fc3ff; }
.gxh-hmore b { font-weight: 500; }
.gxh-hmore i { font-style: normal; display: inline-block; margin-left: 4px; transition: transform .15s ease; }
.gxh-hmore.on i { transform: rotate(90deg); }
.gxh-foot { padding: 16px 0 6px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.5); }
.gxh-sent { height: 1px; }
/* D-6: Navi agent */
.gxh-navi { display: flex; flex-direction: column; gap: 14px; }
.gxh-top { display: flex; align-items: center; justify-content: space-between; }
.gxh-sub { display: flex; flex-direction: column; gap: 14px; }
.gxh-off .gxh-sub > *:not(.gxh-persona.gxh-live):not(.gxh-know) { opacity: 0.42; pointer-events: none; filter: grayscale(0.4); }
.gxh-sw { position: relative; flex: none; width: 46px; height: 26px; padding: 0; cursor: pointer; border-radius: 999px; border: 1.5px solid rgba(150,190,225,0.35); background: rgba(4,8,18,0.6); transition: background .2s ease, border-color .2s ease; }
.gxh-sw i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: rgba(205,215,232,0.85); transition: transform .2s ease; }
.gxh-sw[aria-checked="true"] { background: #164b6e; border-color: #2f7fb0; }
.gxh-sw[aria-checked="true"] i { transform: translateX(20px); background: #fff; }
.gxh-two { display: grid; grid-template-columns: 2fr 3fr; border-radius: 14px; border: 1px solid rgba(127,195,255,0.2); background: rgba(6,12,24,0.45); }
.gxh-two .gxh-cell + .gxh-cell { border-left: 1px solid rgba(127,195,255,0.16); }
.gxh-two .gxh-cell { padding: 20px 26px; }
.gxh-used { font-family: var(--font-mono); font-size: 12.5px; color: rgba(185,201,226,0.6); }
.gxh-used b { font-weight: 600; color: #dfe8f6; }
.gxh-next { margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--gxh-ind); }
.gxh-pill { padding: 7px 16px; cursor: pointer; border-radius: 999px; border: 1px solid rgba(150,190,225,0.4); background: rgba(4,8,18,0.4); font-family: var(--font-mono); font-size: 12.5px; color: #e7eefb; }
.gxh-pill:hover { border-color: rgba(200,220,245,0.7); }
.gxh-pill-indigo { margin-top: 12px; color: #dfe1ff; border-color: var(--gxh-ind-b); background: var(--gxh-ind-f); }
.gxh-narrow { display: none; }
.gxh-link { padding: 0; cursor: pointer; border: none; background: none; font: inherit; color: #9fd0ff; text-decoration: underline; text-underline-offset: 3px; }
.gxh-line { padding: 13px 18px; border-radius: 12px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.gxh-line-gold { color: #f3d68a; border: 1px solid rgba(245,197,66,0.45); background: rgba(245,197,66,0.07); }
.gxh-line-coral { color: #f6b49a; border: 1px solid rgba(240,144,108,0.5); background: rgba(240,144,108,0.09); }
.gxh-line-coral b { color: var(--gxh-coral); font-weight: 600; }
.gxh-line-indigo { color: #c9ccff; border: 1px solid var(--gxh-ind-b); background: var(--gxh-ind-f); }
.gxh-add { padding: 0; cursor: pointer; border: none; background: none; font: inherit; color: #7fc3ff; white-space: nowrap; }
.gxh-mod { padding: 20px 26px; border-radius: 14px; border: 1px solid rgba(127,195,255,0.18); background: rgba(6,12,24,0.42); }
.gxh-mod-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; min-height: 30px; }
.gxh-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gxh-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; cursor: pointer; border-radius: 12px; border: 1px solid rgba(150,190,225,0.3); background: rgba(4,8,18,0.5); color: #eef4fc; }
.gxh-opt b { font-family: var(--font-pixel); font-size: 15px; font-weight: 400; }
.gxh-opt span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--gxh-gold); }
.gxh-opt.on { border-color: var(--gxh-gold); background: rgba(245,197,66,0.08); }
.gxh-opt.on b { color: var(--gxh-gold); }
.gxh-opt:hover { border-color: rgba(200,220,245,0.6); }
.gxh-ptext { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: #eef4fc; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gxh-pin { width: 100%; box-sizing: border-box; resize: vertical; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(150,190,225,0.35); background: rgba(4,8,18,0.6); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: #eef4fc; outline: none; }
.gxh-pin:focus { border-color: var(--gxh-ind-b); }
.gxh-pnote { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: rgba(243,214,138,0.85); }
.gxh-pacts { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
/* 11-11 WHAT NAVI KNOWS */
.gxh-khint { margin-bottom: 12px; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: rgba(185,201,226,0.7); }
.gxh-know .gxh-ptext { white-space: pre-line; -webkit-line-clamp: 6; }
.gxh-know .gxh-pacts { margin-top: 10px; }
.gxh-kcount { margin-right: auto; font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.55); }
.gxh-daily { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gxh-dt { font-family: var(--font-sans); font-size: 16px; color: #eef4fc; }
.gxh-dp { margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; color: rgba(185,201,226,0.55); }
.gxh-dp b { color: #fff; font-weight: 600; }
.gxh-arow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px dashed rgba(127,195,255,0.18); }
.gxh-atag { padding: 4px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; border: 1px solid rgba(185,198,220,0.35); color: rgba(205,215,232,0.8); }
.gxh-atag-r { border-color: var(--gxh-ind-b); color: #b9bdff; background: var(--gxh-ind-f); }
.gxh-aq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; color: #e7eefb; }
.gxh-aw { font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.5); }
.gxh-acr { font-family: var(--font-pixel); font-size: 11px; color: #f08a4b; white-space: nowrap; }
.gxh-dlg-alt { color: #e7eefb !important; }
/* §2: Plan & Credits as a page (Galaxy beta entry only) */
/* the page fills the screen; its header stays, its body scrolls (the panel's own pattern) */
.manage-overlay.ncp-mg-open.v2-sub-page { padding: 0; }
.v2-sub-page > .v2-sub-pg { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: none; clip-path: none; box-shadow: none; }
.v2-sub-page .v2-pg-hdr { gap: 20px; padding: 14px 32px; }
.v2-sub-page .v2-pg-back { position: static; margin: 0; flex: none; }
.v2-sub-page .v2-pg-hdr .ncp-panel-hdr-tag { font-size: 11px; color: #f5c542; }
.v2-pg-tabs { margin-left: auto; display: flex; gap: 8px; }
.v2-pg-tabs button { padding: 8px 18px; cursor: pointer; border-radius: 999px; border: 1px solid transparent; background: none; font-family: var(--font-mono); font-size: 13px; color: rgba(205,215,232,0.7); }
.v2-pg-tabs button.on { color: var(--gxh-gold); border-color: rgba(245,197,66,0.6); background: rgba(245,197,66,0.06); }
.v2-sub-page .v2-sub-body { padding-left: 32px; padding-right: 32px; }
.v2-use { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 1380px; margin: 18px auto 40px; }
.v2-use-mod { padding: 26px 30px; border-radius: 16px; border: 1px solid rgba(127,195,255,0.18); background: rgba(6,12,24,0.42); }
.v2-use-h { margin-bottom: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; color: rgba(200,216,240,0.6); }
.v2-use-h i { font-style: normal; color: rgba(127,195,255,0.85); margin-left: 8px; letter-spacing: 0; }
.v2-use-all { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 13.5px; color: #e7eefb; }
.v2-use-tot { color: rgba(185,201,226,0.6); }
.v2-use-tot b { font-family: var(--font-pixel); font-size: 18px; font-weight: 400; color: #eef4fc; margin-right: 4px; }
.v2-use-tbl { margin-top: 18px; border-top: 1px solid rgba(127,195,255,0.16); }
.v2-use-th, .v2-use-tr { display: grid; grid-template-columns: 2fr 1fr 0.7fr 2fr; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid rgba(127,195,255,0.12); }
.v2-use-th { font-family: var(--font-mono); font-size: 11.5px; color: rgba(185,201,226,0.5); }
.v2-use-th span:last-child { grid-column: 3 / span 2; }
.v2-use-gn { font-family: var(--font-mono); font-size: 13.5px; color: #e7eefb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-use-ul { font-family: var(--font-mono); font-size: 13px; color: rgba(185,201,226,0.6); text-align: right; }
.v2-use-ul b { color: #eef4fc; font-weight: 600; }
.v2-use-tr .gxh-bar { width: 100%; }
.v2-use-foot { padding-top: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.5); }
/* M-1: phones keep the same structure; only the small print tightens */
@media (max-width: 640px) {
  .gxh-cell { padding: 12px 12px 10px; }
  .gxh-strip .gxh-n { font-size: 18px; }
  .gxh-strip .gxh-k { font-size: 8px; letter-spacing: 0.14em; }
  .gxh-mo span { display: none; }
  .gxh-lim { position: static; margin-top: 8px; gap: 6px; font-size: 10.5px; }
  .gxh-lim .gxh-bar { width: 28px; }
  .gxh-lim-w { display: none; }
  .gx-cards-own { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-cards-own .gx-card { min-height: 0; padding: 18px 8px 14px; }
  .gx-card-own .gx-card-ico { width: 84px; height: 84px; }
  .gx-card-own .gx-card-ico .gx-ico, .gx-card-own .gx-card-ico .gx-ico-spiral svg, .gx-card-own .gx-card-ico img { width: 78px; height: 78px; }
  .gx-card-own .gx-card-name, .gx-cards-own .gx-card-new .gx-card-name { font-size: 10.5px; }
  .gx-card-own .gx-card-meta { font-size: 11px; }
  .gxh-tabs { margin: 18px 0 14px; gap: 0; }
  .gxh-tab { flex: 1; padding: 10px 4px; font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .gxh-tab i { margin: 0; }
  .gxh-two .gxh-cell { padding: 14px 14px; }
  .gxh-mod { padding: 16px 16px; }
  .gxh-wide { display: none; }
  .gxh-narrow { display: inline; }
  .gxh-long2 { display: none; }
  .gxh-opts { gap: 6px; }
  .gxh-opt { min-height: 52px; }
  .gxh-opt b { font-size: 11px; }
  .gxh-arow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .gxh-aw { display: none; }
  .gxh-aq { font-size: 12px; }
  .gxh-pin, .gxh-search input, .gal-search { font-size: 16px; }   /* no iOS zoom on focus */
  .v2-sub-page .v2-pg-hdr { flex-wrap: wrap; padding: 12px 16px; gap: 10px 14px; }
  .v2-pg-tabs { margin: 0; width: 100%; }
  .v2-pg-tabs button { flex: 1; }
  .v2-use { margin: 10px 0 30px; }
  .v2-use-mod { padding: 18px 16px; }
  .v2-use-th { display: none; }
  .v2-use-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n u" "s b"; gap: 10px 12px; }
  .v2-use-gn { grid-area: n; } .v2-use-ul { grid-area: u; } .v2-use-st { grid-area: s; } .v2-use-tr .gxh-bar { grid-area: b; align-self: center; }
  .v2-use .v2-act-via, .v2-use .v2-act-why, .v2-use .v2-act-when { display: none; }
}
/* 11-09: taken down after a report — the host's banner and card label */
.gxh-nl-down { color: var(--gxh-coral); border-color: rgba(240,144,108,0.6); background: rgba(240,144,108,0.1); }
.gxh-down { margin: 18px 0 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(240,144,108,0.55); background: rgba(240,144,108,0.08); color: #f3e6df;
  font: 14px/1.55 var(--font-sans, system-ui, sans-serif); }
.gxh-down b { display: block; margin-bottom: 4px; color: #f6b39a; font-weight: 700; }
.gxh-down p { margin: 4px 0 0; }
.gxh-down span { color: rgba(243,230,223,0.65); }
.gxh-down .gxh-down-fine { font-size: 12.5px; color: rgba(243,230,223,0.6); }