/* 共作 main interface (工作 / Create). Every class starts with gz- so nothing here touches the sign-in pages.
   Tokens come from styles.css; see docs/DESIGN.md and docs/design/overview-20261031.html. */
:root { --fill: #F2F2F7; --fill2: #F7F7F9; --soft: rgba(0, 113, 227, .09); --warn: #FF9F0A; --warn-t: #C93400; --ok: #34C759; --ok-t: #1D7F37; --violet: #5856D6; --late: #FF3B30; }
@media (prefers-color-scheme: dark) { :root { --fill: #3A3A3C; --fill2: #323234; --soft: rgba(10, 132, 255, .18); --warn-t: #FF9F0A; --ok-t: #30D158; } }

#shell-stage { padding: 0; display: block; min-height: 0; }
.gz { position: fixed; inset: 0; display: flex; background: var(--bg); color: var(--t); font-size: 14px; }
.gz button { font: inherit; color: inherit; }
.gz a { color: var(--acc); cursor: pointer; text-decoration: none; }
.gz-mut { color: var(--t2); }
.gz-small { font-size: 12px; color: var(--t2); }

/* ---------- rail ---------- */
.gz-rail { width: 92px; flex: none; margin: 16px 0 16px 16px; border-radius: 28px; background: var(--card); display: flex; flex-direction: column; align-items: center; padding: 16px 0 14px; gap: 2px; position: relative; z-index: 5; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gz-rail.create { background: var(--sea); color: #F5F5F7; }
.gz-pip { width: 56px; height: 56px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 18px; position: relative; display: grid; place-items: center; }
.gz-pip:focus-visible { outline: 3px solid var(--focus); }
.gz-pip .gz-tip { top: 14px; }
.gz-mode { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 9px; margin: 2px 0 8px; background: var(--fill); color: var(--t2); letter-spacing: .02em; }
.gz-rail.create .gz-mode { background: rgba(255,255,255,.14); color: #fff; }
.gz-ri { width: 72px; border: 0; background: none; padding: 8px 0 6px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--t2); font-size: 11.5px; font-weight: 700; cursor: pointer; position: relative; }
.gz-ri svg { width: 20px; height: 20px; }
.gz-ri:hover { background: rgba(0,0,0,.04); color: var(--t); }
.gz-ri.on { background: var(--soft); color: var(--acc); }
.gz-ri.sm { padding: 6px 0 5px; font-size: 11px; }
.gz-ri.sm svg { width: 18px; height: 18px; }
.gz-rail.create .gz-ri { color: rgba(245,245,247,.62); }
.gz-rail.create .gz-ri:hover { background: rgba(255,255,255,.08); color: #fff; }
.gz-rail.create .gz-ri.on { background: rgba(255,255,255,.14); color: #fff; }
.gz-new { width: 44px; height: 44px; border-radius: 14px; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; margin-bottom: 6px; position: relative; }
.gz-new:hover { background: rgba(255,255,255,.2); }
.gz-sep { width: 36px; height: 1px; background: var(--line); margin: 6px 0; }
.gz-cnt { position: absolute; right: 12px; top: 4px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.gz-cnt.need { background: var(--lime); color: #1D1D1F; }
.gz-cnt.unread { background: var(--acc); color: #fff; }
.gz-tip { position: absolute; left: 84px; top: 50%; transform: translateY(-50%); background: #1D1D1F; color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 20; }
.gz-ri:hover .gz-tip, .gz-pip:hover .gz-tip, .gz-new:hover .gz-tip, .gz-me:hover .gz-tip { opacity: 1; }
.gz-tip small { color: rgba(255,255,255,.6); font-weight: 500; margin-left: 6px; }
.gz-me { margin-top: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fill); font-weight: 700; cursor: pointer; position: relative; }
.gz-rail.create .gz-me { background: rgba(255,255,255,.12); color: #fff; }
.gz-menu { position: absolute; left: 84px; bottom: 0; width: 220px; background: var(--card); color: var(--t); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); padding: 6px; z-index: 30; }
.gz-menu .h { padding: 8px 10px; font-size: 12px; color: var(--t2); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.gz-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.gz-menu button:hover { background: var(--fill); }

/* ---------- main area, panels ---------- */
.gz-main { flex: 1; min-width: 0; padding: 16px 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.gz-head { display: flex; align-items: center; gap: 12px; min-height: 34px; flex-wrap: wrap; }
.gz-head h1 { font-size: 20px; margin: 0; font-weight: 700; }
.gz-head .gz-sp { flex: 1; }
.gz-body { flex: 1; min-height: 0; display: grid; gap: 12px; }
.gz-p { background: var(--card); border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.04); display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; position: relative; }
.gz-ph { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.gz-ph b { font-size: 14px; }
.gz-ph .gz-sp { flex: 1; }
.gz-pb { flex: 1; min-height: 0; overflow: auto; }
.gz-pf { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; gap: 8px; align-items: center; }
.gz-pf .gz-small { margin-right: auto; line-height: 1.4; }

/* buttons, chips, tabs */
.gz-btn { height: 30px; padding: 0 12px; border-radius: 9px; border: 0; background: var(--fill); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.gz-btn:hover { filter: brightness(.96); }
.gz-btn.p { background: var(--acc); color: #fff; }
.gz-btn.g { background: none; color: var(--acc); padding: 0 6px; }
.gz-btn.sm { height: 26px; font-size: 12px; padding: 0 10px; }
.gz-btn:disabled { opacity: .45; cursor: default; }
.gz-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(118,118,128,.12); }
.gz-tabs button { border: 0; background: none; padding: 4px 12px; border-radius: 7px; font-size: 12.5px; cursor: pointer; color: var(--t); }
.gz-tabs button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 600; }
.gz-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 9px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 12px; cursor: pointer; white-space: nowrap; border: 0; }
.gz-chip.on { background: var(--sea); color: #fff; box-shadow: none; }
.gz-chip i { width: 8px; height: 8px; border-radius: 3px; }
.gz-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: var(--fill); font-size: 12.5px; color: var(--t2); min-width: 0; }
.gz-search input { border: 0; background: none; outline: none; font: inherit; color: var(--t); flex: 1; min-width: 0; }
.gz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gz-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--fill); color: var(--t); }
.gz-av.enso { background: #fff; box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--violet); }
@media (prefers-color-scheme: dark) { .gz-av.enso { background: var(--card); } }
.gz-av svg { width: 100%; height: 100%; }

/* data source label, states */
.gz-src { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2); padding: 2px 9px; border-radius: 9px; background: var(--fill); white-space: nowrap; }
.gz-src.preview::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.gz-src.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.gz-state { padding: 40px 20px; text-align: center; color: var(--t2); font-size: 13px; line-height: 1.6; }
.gz-state b { display: block; color: var(--t); font-size: 14.5px; margin-bottom: 4px; }
.gz-state .gz-btn { margin-top: 10px; }
.gz-sk { border-radius: 10px; background: linear-gradient(90deg, var(--fill) 0%, var(--fill2) 50%, var(--fill) 100%); background-size: 200% 100%; animation: gzsk 1.2s infinite linear; height: 14px; margin: 10px 16px; }
@keyframes gzsk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .gz-sk { animation: none; } }
.gz-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1D1D1F; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: min(560px, 90vw); line-height: 1.5; }
.gz-toast small { display: block; color: rgba(255,255,255,.6); font-size: 11.5px; }

/* ---------- 跟进 ---------- */
.gz-follow { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); }
.gz-strip { grid-column: 1 / -1; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.gz-fc { flex: 0 0 210px; border: 0; text-align: left; background: var(--card); border-radius: 14px; padding: 10px 12px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); border-left: 4px solid var(--pj, var(--acc)); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.gz-fc.on { box-shadow: 0 0 0 2px var(--acc); }
.gz-fc .t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.gz-fc .t b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gz-fc .due { font-size: 11.5px; color: var(--t2); white-space: nowrap; }
.gz-fc .due.late { color: var(--late); font-weight: 700; }
.gz-fc .s { font-size: 11.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-bar { display: flex; gap: 2px; height: 4px; }
.gz-bar i { flex: 1; border-radius: 2px; background: var(--fill); }
.gz-bar i.d { background: var(--t3); } .gz-bar i.c { background: var(--acc); } .gz-bar i.w { background: var(--warn); } .gz-bar i.r { background: var(--late); }
.gz-talk { display: flex; flex-direction: column; min-height: 0; }
.gz-msgs { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.gz-day { text-align: center; font-size: 11px; color: var(--t3); }
.gz-b { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 76%; width: fit-content; flex: none; }
.gz-b .gz-bm { font-size: 11px; color: var(--t2); display: flex; align-items: center; gap: 5px; padding: 0 4px; }
.gz-b .gz-bm .gz-av { width: 16px; height: 16px; font-size: 8.5px; }
.gz-b .gz-bx { border-radius: 18px; border-bottom-left-radius: 6px; padding: 10px 14px; background: var(--fill); line-height: 1.55; font-size: 14px; white-space: pre-wrap; }
.gz-b.gz-me { align-self: flex-end; align-items: flex-end; }
.gz-b.gz-me .gz-bx { background: var(--acc); color: #fff; border-radius: 18px; border-bottom-right-radius: 6px; }
.gz-b.gz-ask .gz-bx { background: rgba(93,184,15,.15); }
.gz-b .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gz-b .acts .gz-btn:not(.p) { background: var(--card); }
.gz-b .done { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--t2); }
.gz-b .refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gz-b .refs span { font-size: 11.5px; padding: 2px 8px; border-radius: 8px; background: var(--card); color: var(--t2); }
.gz-b.gz-think .gz-bx { color: var(--t2); }
.gz-sys { align-self: center; font-size: 11.5px; color: var(--t2); display: flex; gap: 8px; align-items: center; }
.gz-sys.warn { color: var(--warn-t); }
.gz-cmp { border-top: 1px solid var(--line); padding: 10px 12px 12px; position: relative; }
.gz-cmp form { display: flex; align-items: flex-end; gap: 8px; border-radius: 16px; background: var(--fill2); padding: 8px 8px 8px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.gz-cmp textarea { flex: 1; border: 0; background: none; resize: none; outline: none; font: inherit; font-size: 14px; color: var(--t); max-height: 140px; min-height: 22px; padding: 4px 0; }
.gz-cmp .chip { font-size: 12px; padding: 4px 9px; border-radius: 9px; border: 0; background: var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; white-space: nowrap; color: var(--t); }
.gz-cmp .model { font-size: 12px; padding: 4px 9px; border-radius: 9px; border: 0; background: none; color: var(--t2); cursor: pointer; white-space: nowrap; }
.gz-cmp .model:hover, .gz-cmp .model.open { background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--t); }
.gz-cmp .model.chg::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); margin-right: 5px; vertical-align: 1px; }
.gz-send { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--acc); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.gz-send:disabled { opacity: .4; }
.gz-send.stop { background: #1D1D1F; }
.gz-pop { position: absolute; right: 56px; bottom: calc(100% - 4px); width: 300px; background: var(--card); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06); padding: 6px; z-index: 10; }
.gz-pop .o { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 2px 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font-size: 13px; }
.gz-pop .o:hover { background: var(--fill); }
.gz-pop .o .ck { color: var(--acc); font-weight: 700; }
.gz-pop .o small { grid-column: 2; font-size: 11.5px; color: var(--t2); }
.gz-pop .f { border-top: 1px solid var(--line); margin-top: 4px; padding: 8px 10px 4px; font-size: 11.5px; color: var(--t2); line-height: 1.5; }
.gz-flow .gz-fw { padding: 12px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.gz-flow .gz-fw:first-child { border-top: 0; }
.gz-flow .gz-fw:hover { background: var(--fill2); }
.gz-flow .gz-fw .t { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.gz-flow .gz-fw .t i { width: 4px; height: 16px; border-radius: 2px; flex: none; }
.gz-flow .gz-fw .t span { margin-left: auto; font-size: 11.5px; color: var(--t2); font-weight: 500; }
.gz-flow .gz-fw .t span.late { color: var(--late); font-weight: 700; }
.gz-steps { display: flex; align-items: center; margin: 8px 0 4px; }
.gz-steps i { width: 9px; height: 9px; border-radius: 50%; background: var(--fill); flex: none; box-shadow: inset 0 0 0 1.5px var(--t3); }
.gz-steps i.d { background: var(--t3); box-shadow: none; }
.gz-steps i.c { background: var(--card); box-shadow: inset 0 0 0 2.5px var(--acc); }
.gz-steps i.w { background: var(--card); box-shadow: inset 0 0 0 2.5px var(--warn); }
.gz-steps i.r { background: var(--card); box-shadow: inset 0 0 0 2.5px var(--late); }
.gz-steps s { flex: 1; height: 2px; background: var(--fill); text-decoration: none; }
.gz-steps s.d { background: var(--t3); }
.gz-flow .gz-fw .sub { font-size: 11.5px; color: var(--t2); }
.gz-node { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 2px 10px; padding: 10px 14px; position: relative; font-size: 13px; }
.gz-node .k { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; box-shadow: inset 0 0 0 2px var(--t3); }
.gz-node .k.d { background: var(--t3); box-shadow: none; } .gz-node .k.c { box-shadow: inset 0 0 0 3px var(--acc); } .gz-node .k.w { box-shadow: inset 0 0 0 3px var(--warn); } .gz-node .k.r { box-shadow: inset 0 0 0 3px var(--late); } .gz-node .k.v { box-shadow: inset 0 0 0 2.5px var(--lime); }
.gz-node small { grid-column: 2; color: var(--t2); font-size: 12px; }
.gz-node .due { font-size: 11.5px; color: var(--t2); grid-row: 1 / 3; grid-column: 3; text-align: right; }
.gz-node .due.late { color: var(--late); font-weight: 600; }

/* ---------- 对话 ---------- */
.gz-chat { grid-template-columns: 290px minmax(0,1fr) 270px; }
.gz-grp { font-size: 11px; font-weight: 600; color: var(--t2); padding: 10px 16px 4px; }
.gz-li { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; padding: 8px 12px; margin: 0 6px; border-radius: 12px; cursor: pointer; align-items: center; border: 0; background: none; width: calc(100% - 12px); text-align: left; }
.gz-li:hover { background: var(--fill2); }
.gz-li.on { background: var(--soft); }
.gz-li b { font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.gz-li .l { font-size: 12px; color: var(--t2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-li .r { text-align: right; font-size: 11px; color: var(--t2); white-space: nowrap; }
.gz-li .r em { display: inline-block; font-style: normal; min-width: 16px; height: 16px; border-radius: 8px; background: var(--acc); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; margin-top: 4px; }
.gz-pair { position: relative; width: 36px; height: 36px; }
.gz-pair .gz-av { position: absolute; width: 24px; height: 24px; }
.gz-pair .gz-av:first-child { left: 0; top: 0; } .gz-pair .gz-av:last-child { right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--card); }
.gz-pair .gz-av.enso:last-child { box-shadow: inset 0 0 0 1.5px var(--violet), 0 0 0 2px var(--card); }
.gz-pair.one .gz-av { width: 36px; height: 36px; font-size: 13px; }
.gz-relay { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t2); padding: 10px 14px; border-top: 1px solid var(--line); }
.gz-relay .gz-btn:first-of-type { margin-left: auto; }
.gz-info { padding: 12px 14px; font-size: 12.5px; }
.gz-info h5 { margin: 12px 0 6px; font-size: 11.5px; color: var(--t2); font-weight: 600; }
.gz-info h5:first-child { margin-top: 0; }
.gz-info .r { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.gz-info .r small { margin-left: auto; color: var(--t2); }

/* ---------- 项目 ---------- */
.gz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gz-table th { text-align: left; font-size: 11px; color: var(--t3); font-weight: 600; padding: 10px 14px 6px; }
.gz-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.gz-table tr.click { cursor: pointer; } .gz-table tr.click:hover td { background: var(--fill2); }
.gz-sq { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.gz-nm { display: flex; align-items: center; gap: 10px; }
.gz-nm b { display: block; font-weight: 600; }
.gz-nm small { display: block; color: var(--t2); font-size: 12px; }
.gz-need { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.gz-need::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.gz-pbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--fill); width: 160px; }
.gz-pbar i { display: block; height: 100%; }
.gz-ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 16px; }
.gz-ptabs button { border: 0; background: none; padding: 10px 10px; font-size: 13px; cursor: pointer; color: var(--t2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.gz-ptabs button.on { color: var(--t); font-weight: 600; border-bottom-color: var(--acc); }
.gz-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 14px 16px 4px; }
.gz-kpi div { border-radius: 12px; background: var(--fill2); padding: 10px 12px; font-size: 12px; color: var(--t2); }
.gz-kpi b { display: block; font-size: 20px; color: var(--t); font-weight: 600; font-variant-numeric: tabular-nums; }
.gz-sec { padding: 6px 16px 14px; }
.gz-sec h4 { margin: 12px 0 8px; font-size: 12px; color: var(--t2); font-weight: 600; display: flex; }
.gz-sec h4 a { margin-left: auto; font-weight: 500; }
.gz-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 13px; }
.gz-row:first-of-type { border-top: 0; }
.gz-row small { margin-left: auto; color: var(--t2); font-size: 12px; white-space: nowrap; }
.gz-row small.late { color: var(--late); font-weight: 600; }
.gz-row .tag { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--fill); color: var(--t2); }
.gz-tree .gz-row { padding-left: calc(2px + var(--lv, 0) * 24px); }
.gz-load { display: inline-flex; gap: 2px; }
.gz-load i { width: 8px; height: 8px; border-radius: 2px; background: var(--fill); }
.gz-load i.h { background: var(--acc); } .gz-load i.o { background: var(--t3); }

/* ---------- 资料 ---------- */
.gz-filt { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: center; }
.gz-filt .lab { font-size: 11.5px; color: var(--t2); margin-right: 2px; }
.gz-mat { display: grid; grid-template-columns: 32px minmax(0,1fr) 150px 110px 90px; gap: 12px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.gz-mat .ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.gz-mat b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-mat small { display: block; color: var(--t2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-mat .c { font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-mem { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; align-items: center; }
.gz-mem span { color: var(--t2); font-size: 12px; }
.gz-mem b { font-weight: 500; border-radius: 6px; padding: 2px 4px; outline: none; }
.gz-mem b:focus { background: var(--fill); }

/* ---------- 成员 ---------- */
.gz-mem2 { grid-template-columns: minmax(0,1fr) 290px; }
.gz-net { position: relative; flex: 1; min-height: 0; }
.gz-net svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gz-net svg text { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; fill: var(--t); }
.gz-net svg .node { cursor: pointer; }
.gz-net svg .node:hover circle { filter: brightness(.95); }
.gz-netbar { display: flex; gap: 8px; padding: 10px 14px; align-items: center; }
.gz-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--t2); padding: 8px 14px 12px; }
.gz-side h5 { margin: 0; font-size: 14px; }
.gz-side .pr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; align-items: center; }
.gz-side .pr:first-of-type { border-top: 0; }
.gz-side .pr .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.gz-side .pr .bar i { display: block; height: 100%; background: var(--t2); }
.gz-side .pr .bar i.p { background: var(--violet); }
.gz-side .pr .c { font-size: 12px; color: var(--t2); white-space: nowrap; }
.gz-note { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--fill2); font-size: 12px; line-height: 1.55; }
.gz-tm { position: relative; flex: 1; min-height: 420px; margin: 30px 12px 10px; }
.gz-tm .g { position: absolute; top: -20px; font-size: 11px; font-weight: 700; color: var(--t3); letter-spacing: .04em; }
.gz-tb { position: absolute; border-radius: 14px; padding: 10px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border: 0; text-align: left; color: var(--t); }
.gz-tb:hover { filter: brightness(.98); }
.gz-tb.on { box-shadow: inset 0 0 0 2px var(--acc); }
.gz-tb .h { display: flex; align-items: baseline; gap: 8px; } .gz-tb .h b { font-size: 14px; } .gz-tb .h span { font-size: 12px; color: var(--t2); }
.gz-tb .gz-tld { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.gz-tb .gz-tld .e { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--violet); background: rgba(88,86,214,.1); padding: 1px 8px; border-radius: 9px; }
.gz-tb .gz-tld .ne { font-size: 11px; color: var(--t2); }
.gz-tb .fc { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; flex: 1; min-height: 0; overflow: hidden; }
.gz-tb .fc i { width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 600; display: grid; place-items: center; background: var(--card); }
.gz-tb .fc i.f { box-shadow: 0 0 0 1.5px var(--warn); } .gz-tb .fc i.o { opacity: .4; } .gz-tb .fc i.more { background: none; width: auto; padding: 0 4px; font-size: 11px; color: var(--t2); }
.gz-tb .ft { font-size: 11.5px; color: var(--t2); } .gz-tb .ft em { font-style: normal; color: var(--warn-t); }

/* ---------- drawer (监管、成员、插件) ---------- */
.gz-drawer { position: absolute; right: 16px; top: 16px; bottom: 16px; width: min(420px, calc(100% - 32px)); background: var(--card); border-radius: 18px; box-shadow: -10px 0 40px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.04); z-index: 15; display: flex; flex-direction: column; overflow: hidden; }
.gz-drawer .dh { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; }
.gz-drawer .dh b { font-size: 15.5px; display: block; line-height: 1.4; }
.gz-drawer .dh small { display: block; font-size: 12px; color: var(--t2); margin-top: 3px; }
.gz-drawer .dh .x { margin-left: auto; border: 0; background: none; font-size: 18px; color: var(--t2); cursor: pointer; }
.gz-drawer .db { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 14px; font-size: 13px; }
.gz-drawer h6 { margin: 14px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--t2); }
.gz-vs { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 6px 10px; font-size: 13px; line-height: 1.5; background: var(--fill2); border-radius: 12px; padding: 10px 12px; }
.gz-vs span { color: var(--t2); font-size: 12px; }
.gz-vs .bad { color: var(--warn-t); }
.gz-tl { padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.gz-tl div { position: relative; padding-bottom: 10px; }
.gz-tl div::before { content: ""; position: absolute; left: -14px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--t2); }
.gz-tl div.c::before { background: var(--lime); }

/* ---------- 监管 ---------- */
.gz-sup { grid-template-columns: minmax(0,1fr) 320px; }
.gz-live { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 12px; }
.gz-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(52,199,89,.18); }
.gz-gate { display: grid; grid-template-columns: 46px minmax(0,1fr) 150px 120px auto; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.gz-gate:hover { background: var(--fill2); }
.gz-gate.need { background: linear-gradient(90deg, rgba(93,184,15,.10), rgba(93,184,15,0) 60%); }
.gz-gate .tm { font-size: 12px; color: var(--t2); font-variant-numeric: tabular-nums; }
.gz-gate b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-gate small { display: block; font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-cq { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--t2); }
.gz-cq .b { display: flex; gap: 2px; } .gz-cq .b i { width: 10px; height: 5px; border-radius: 2px; background: var(--fill); } .gz-cq .b i.on { background: var(--t); }
.gz-gs { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.gz-gs.stop { color: var(--warn-t); } .gz-gs.stop::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.gz-gs.need::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.gz-gs.pass { color: var(--t2); }
.gz-chk .c { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
.gz-chk .c:first-child { border-top: 0; }
.gz-chk .c .r { font-size: 11.5px; color: var(--t2); }
.gz-chk .c .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.gz-chk .c .bar i { display: block; height: 100%; background: var(--t2); }
.gz-chk .c .s { grid-column: 1 / -1; font-size: 11.5px; color: var(--t2); } .gz-chk .c .s em { font-style: normal; color: var(--warn-t); }
.gz-iss { display: grid; grid-template-columns: minmax(0,1fr) 160px 140px; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.gz-iss:hover { background: var(--fill2); }
.gz-iss b { display: block; font-weight: 600; } .gz-iss small { display: block; font-size: 12px; color: var(--t2); }
.gz-st5 { display: flex; align-items: center; } .gz-st5 i { width: 8px; height: 8px; border-radius: 50%; background: var(--fill); flex: none; } .gz-st5 i.d { background: var(--t2); } .gz-st5 i.c { background: var(--card); box-shadow: 0 0 0 2px var(--acc); } .gz-st5 i.n { background: var(--lime); } .gz-st5 s { flex: 1; height: 2px; background: var(--fill); text-decoration: none; } .gz-st5 s.d { background: var(--t2); }
.gz-kp4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.gz-kp4 div { padding: 14px 18px; border-left: 1px solid var(--line); font-size: 12px; color: var(--t2); } .gz-kp4 div:first-child { border-left: 0; }
.gz-kp4 b { display: block; font-size: 22px; color: var(--t); font-weight: 600; font-variant-numeric: tabular-nums; } .gz-kp4 b em { font-style: normal; font-size: 13px; color: var(--warn-t); margin-left: 6px; font-weight: 500; }
.gz-au { display: grid; grid-template-columns: 70px minmax(0,1fr) 240px 110px; gap: 14px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.gz-au .k { font-size: 11.5px; padding: 2px 7px; border-radius: 6px; background: #FFF1E0; color: #C93400; justify-self: start; } .gz-au .k.fp { background: var(--fill); color: var(--t2); }
.gz-au b { font-weight: 600; display: block; } .gz-au small { display: block; font-size: 12px; color: var(--t2); }
.gz-au .w { text-align: right; font-size: 12px; color: var(--t2); }
.gz-chipst { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; } .gz-chipst::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--t3)); }

/* ---------- Create ---------- */
.gz-cx { grid-template-columns: 228px minmax(0,1fr) 420px; }
.gz-cx.two { grid-template-columns: 228px minmax(0,1fr); }
.gz-cx.three2 { grid-template-columns: 228px minmax(0,1fr) 340px; }
.gz-it { display: block; width: calc(100% - 12px); margin: 0 6px; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.gz-it:hover { background: var(--fill2); }
.gz-it.on { background: var(--soft); }
.gz-it b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-it small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2); margin-top: 2px; }
.gz-it small .k { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.gz-it.ic { display: flex; align-items: center; gap: 10px; }
.gz-it.ic .gz-sq { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
.gz-it.ic > div { min-width: 0; flex: 1; }
.gz-it.ic .st { font-size: 11px; color: var(--t2); white-space: nowrap; }
.gz-start { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px 40px 30px; }
.gz-start h2 { font-size: 22px; margin: 0; }
.gz-start .gz-cmp { width: 100%; max-width: 680px; border: 0; padding: 0; }
.gz-start .gz-cmp textarea { min-height: 52px; }
.gz-cats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gz-cats button { font-size: 12.5px; padding: 5px 11px; border-radius: 14px; background: var(--fill); border: 0; cursor: pointer; }
.gz-sug { width: 100%; max-width: 680px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.gz-sug .c { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.gz-sug .c .k { font-size: 11px; color: var(--t2); font-weight: 600; }
.gz-sug .c small { font-size: 12px; color: var(--t2); line-height: 1.5; }
.gz-sug .c .gz-btn { align-self: flex-start; margin-top: auto; }
.gz-stg { display: flex; align-items: center; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
.gz-stg span { display: flex; align-items: center; gap: 6px; color: var(--t3); }
.gz-stg span i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--t3); display: grid; place-items: center; font-style: normal; font-size: 9px; color: #fff; font-weight: 700; }
.gz-stg span.d { color: var(--t2); } .gz-stg span.d i { background: var(--sea); box-shadow: none; }
.gz-stg span.c { color: var(--t); font-weight: 600; } .gz-stg span.c i { box-shadow: inset 0 0 0 2px var(--acc); }
.gz-stg s { width: 22px; height: 1.5px; background: var(--line); margin: 0 6px; } .gz-stg s.d { background: var(--sea); }
.gz-log { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 8px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.6; }
.gz-log .me { align-self: flex-end; max-width: 80%; background: var(--fill); border-radius: 14px; padding: 8px 12px; }
.gz-log .tx { white-space: pre-wrap; }
.gz-log .opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gz-brief { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; font-size: 13px; display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 6px 10px; }
.gz-brief span { color: var(--t2); font-size: 12px; }
.gz-brief .all { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; color: var(--t2); display: flex; gap: 8px; flex-wrap: wrap; }
.gz-stp { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--t2); }
.gz-stp div { display: flex; gap: 8px; } .gz-stp div i { width: 14px; text-align: center; font-style: normal; color: var(--t3); }
.gz-fold { font-size: 12.5px; color: var(--t2); }
.gz-ship { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; font-size: 13px; }
.gz-ship .r { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; padding: 4px 0; } .gz-ship .r span { color: var(--t2); font-size: 12px; }
.gz-ship .ck { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: var(--fill2); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.gz-ship .ck div::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: 6px; }
.gz-ship .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.gz-pv { padding: 12px; }
.gz-pv .cap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); margin-bottom: 8px; flex-wrap: wrap; }
.gz-pv .cap b { color: var(--t); font-size: 13px; }
.gz-pv .tag { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: #E8F6EC; color: #1D7F37; }
.gz-sum3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.gz-sum3 div { border-radius: 10px; background: var(--fill2); padding: 8px 10px; font-size: 11.5px; color: var(--t2); }
.gz-sum3 b { display: block; font-size: 18px; color: var(--t); font-weight: 600; } .gz-sum3 b.w { color: var(--warn-t); }
.gz-tb2 { width: 100%; border-collapse: collapse; font-size: 12px; }
.gz-tb2 th { text-align: left; font-weight: 600; color: var(--t2); font-size: 11px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--fill2); }
.gz-tb2 td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.gz-tb2 tr.mis td { background: rgba(255,159,10,.08); }
.gz-tb2 td.x { color: var(--warn-t); }
.gz-df { margin: 10px 12px 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.gz-df .fh { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--fill2); font-size: 12.5px; border-bottom: 1px solid var(--line); }
.gz-df .fh small { color: var(--t2); } .gz-df .fh .pm { margin-left: auto; }
.gz-pm { font-size: 11.5px; font-variant-numeric: tabular-nums; } .gz-pm i { font-style: normal; color: #1D7F37; } .gz-pm u { text-decoration: none; color: #C0362C; }
.gz-df .l { display: grid; grid-template-columns: 18px minmax(0,1fr); font-size: 12.5px; line-height: 1.55; padding: 3px 10px 3px 6px; }
.gz-df .l.a { background: #ECF8EF; color: #14532D; } .gz-df .l.r { background: #FDEEEE; color: #7F1D1D; }
@media (prefers-color-scheme: dark) { .gz-df .l.a { background: rgba(48,209,88,.14); color: #A6F0B8; } .gz-df .l.r { background: rgba(255,69,58,.14); color: #FFB4AE; } }
.gz-runs .r { display: grid; grid-template-columns: 96px 70px minmax(0,1fr); gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.gz-runs .r:first-child { border-top: 0; } .gz-runs .ok { color: var(--ok-t); } .gz-runs .bad { color: #C0362C; } .gz-runs small { color: var(--t2); }
.gz-code { display: grid; grid-template-columns: 150px minmax(0,1fr); min-height: 100%; }
.gz-code .tree { border-right: 1px solid var(--line); padding: 10px 8px; font-size: 12px; }
.gz-code .tree div { padding: 4px 6px; border-radius: 6px; display: flex; gap: 6px; } .gz-code .tree div.on { background: var(--soft); color: var(--acc); } .gz-code .tree small { margin-left: auto; color: #1D7F37; }
.gz-code pre { margin: 0; padding: 8px 10px; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; }
.gz-calc { padding: 16px; } .gz-calc .card { border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(0,0,0,.05); padding: 16px; max-width: 340px; margin: 0 auto; }
.gz-calc h4 { margin: 0 0 12px; font-size: 15px; }
.gz-calc .f { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 8px; align-items: center; font-size: 12.5px; margin-bottom: 8px; } .gz-calc .f span:first-child { color: var(--t2); }
.gz-calc .in { height: 30px; border-radius: 8px; background: var(--fill); display: flex; align-items: center; padding: 0 10px; } .gz-calc .in.new { box-shadow: inset 0 0 0 1.5px var(--ok); }
.gz-calc .tot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--t2); } .gz-calc .tot b { font-size: 22px; color: var(--t); }
.gz-detail { padding: 4px 20px 18px; }
.gz-dh { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.gz-dh .gz-sq { width: 40px; height: 40px; font-size: 16px; border-radius: 11px; }
.gz-dh h2 { font-size: 18px; margin: 0; } .gz-dh small { display: block; color: var(--t2); font-size: 12px; margin-top: 2px; }
.gz-dh .gz-sp { flex: 1; }
.gz-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.gz-perm { border-radius: 12px; background: var(--fill2); padding: 10px 12px; font-size: 12.5px; line-height: 1.8; }
.gz-tagc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 9px; background: var(--fill); margin: 0 6px 6px 0; }
.gz-num { counter-reset: s; font-size: 13px; line-height: 1.6; } .gz-num div { counter-increment: s; display: grid; grid-template-columns: 24px minmax(0,1fr); padding: 3px 0; } .gz-num div::before { content: counter(s); width: 18px; height: 18px; border-radius: 50%; background: var(--fill); font-size: 11px; display: grid; place-items: center; color: var(--t2); margin-top: 2px; }
.gz-try { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 10px 12px; font-size: 13px; }
.gz-try form { display: flex; gap: 8px; align-items: center; border-radius: 9px; background: var(--fill); padding: 5px 6px 5px 10px; }
.gz-try input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--t); }
.gz-try .out { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--t2); }
.gz-pg { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gz-pc { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; cursor: pointer; border: 0; background: none; text-align: left; color: var(--t); }
.gz-pc.on { box-shadow: inset 0 0 0 2px var(--acc); }
.gz-pc .t { display: flex; align-items: center; gap: 8px; } .gz-pc .t b { font-size: 13.5px; }
.gz-pc small { color: var(--t2); line-height: 1.5; }
.gz-pc .ft { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11.5px; color: var(--t2); }
.gz-pc .ft .on { color: var(--ok-t); } .gz-pc .ft .wt { color: var(--warn-t); } .gz-pc .ft .lv { margin-left: auto; padding: 1px 7px; border-radius: 6px; background: var(--fill); color: var(--t); }
.gz-seg3 { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(118,118,128,.12); }
.gz-seg3 button { flex: 1; border: 0; background: none; font-size: 12px; padding: 5px 0; border-radius: 7px; cursor: pointer; } .gz-seg3 button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 600; }
.gz-stat4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.gz-stat4 div { padding: 12px 14px; border-left: 1px solid var(--line); font-size: 12px; color: var(--t2); } .gz-stat4 div:first-child { border-left: 0; }
.gz-stat4 b { display: block; font-size: 17px; color: var(--t); font-weight: 600; }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  .gz-follow { grid-template-columns: minmax(0,1fr); }
  .gz-follow > .gz-flowp { display: none; }
  .gz-chat { grid-template-columns: 240px minmax(0,1fr); } .gz-chat > .gz-infop { display: none; }
  .gz-cx { grid-template-columns: 200px minmax(0,1fr); } .gz-cx > .gz-rpane { display: none; }
  .gz-sup, .gz-mem2 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  .gz { flex-direction: column-reverse; position: static; min-height: 100vh; }
  .gz-rail { width: auto; margin: 0; border-radius: 0; flex-direction: row; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; }
  .gz-rail .gz-mode, .gz-rail .gz-sep, .gz-tip { display: none; }
  .gz-ri { width: auto; flex: 1; } .gz-pip { width: 40px; height: 40px; } .gz-me { margin: 0; width: 36px; height: 36px; }
  .gz-main { padding: 12px 16px; }
  .gz-body { display: flex; flex-direction: column; }
  .gz-chat > .gz-p:first-child, .gz-cx > .gz-p:first-child { max-height: 260px; }
  .gz-p { min-height: 320px; }
  .gz-mat { grid-template-columns: 32px minmax(0,1fr); } .gz-mat > :nth-child(n+3) { display: none; }
  .gz-gate, .gz-iss, .gz-au { grid-template-columns: minmax(0,1fr); }
  .gz-drawer { position: fixed; inset: auto 0 0 0; top: 10vh; width: auto; border-radius: 18px 18px 0 0; }
  .gz-kp4, .gz-stat4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gz-tm { min-height: 640px; }
  .gz-main, .gz-body, .gz-body > *, .gz-p { min-width: 0; max-width: 100%; }
  .gz-rail { overflow-x: auto; gap: 0; }
  .gz-ri { flex: 1 1 0; min-width: 44px; padding: 6px 0 4px; font-size: 10.5px; }
  .gz-ri .gz-cnt { right: 2px; }
  .gz-new { width: 40px; height: 40px; margin: 0 4px; flex: none; }
  .gz-cmp textarea { min-width: 0; }
  .gz-cmp .chip { display: none; }
  .gz-cmp .model { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  .gz-pop { right: 0; width: min(300px, calc(100vw - 32px)); }
  .gz-head h1 { font-size: 18px; }
}