@gotcos/glasses-server 6.98.0 → 6.99.12

package/server/web-control/memories/graph-explorer.css

@@ -0,0 +1,200 @@
+/* COS Knowledge graph explorer. Port of operations/scripts/lightrag_d3_template.html
+   into the COS Control palette. Scoped under .cgx so it can live inside the Memories pane. */
+.cgx{--cgx-bg:var(--graph-bg,#14100c);--cgx-card:var(--card,#261d16);--cgx-raised:var(--raised,#30271f);--cgx-fg:var(--fg,#f5f0e6);--cgx-muted:var(--muted,#bbae9a);--cgx-line:var(--line,#473a2c);--cgx-gold:var(--accent,#c9a86e);--cgx-green:var(--green,#92c6a1);--cgx-red:var(--red,#e8a494);--cgx-height:520px;
+  position:relative;color:var(--cgx-fg);font:12.5px/1.5 var(--body,'DM Sans',system-ui,sans-serif)}
+.cgx *{box-sizing:border-box}
+.cgx button{font:inherit;color:inherit;cursor:pointer}
+.cgx button:disabled{cursor:default;opacity:.45}
+.cgx button:focus-visible,.cgx input:focus-visible,.cgx [tabindex]:focus-visible{outline:2px solid var(--cgx-gold);outline-offset:2px}
+
+/* Toolbar (in flow, above the stage) */
+.cgx-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
+.cgx-scope{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--cgx-line);background:var(--cgx-card);font-size:11px;color:var(--cgx-muted)}
+.cgx-scope b{color:var(--cgx-fg);font-weight:600}
+.cgx-scope i{width:7px;height:7px;border-radius:50%;background:var(--cgx-green);display:inline-block}
+.cgx-scope.example i{background:var(--cgx-gold)}
+.cgx-scope.off i{background:var(--cgx-red)}
+.cgx-fresh{font-size:11px;color:var(--cgx-muted)}
+.cgx-fresh b{color:var(--cgx-fg);font-weight:500}
+.cgx-search{position:relative;margin-left:auto;min-width:220px;flex:0 1 300px}
+.cgx-search input{width:100%;height:32px;padding:0 34px 0 30px;border-radius:9px;border:1px solid var(--cgx-line);background:var(--cgx-card);color:var(--cgx-fg);font:inherit;font-size:12px;transition:border-color .2s,box-shadow .2s}
+.cgx-search input::placeholder{color:var(--cgx-muted)}
+.cgx-search input:focus{border-color:var(--cgx-gold);box-shadow:0 0 0 3px rgba(201,168,110,.14);outline:none}
+.cgx-search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--cgx-muted);font-size:12px;pointer-events:none}
+.cgx-search kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:10px/1 ui-monospace,Menlo,monospace;color:var(--cgx-muted);border:1px solid var(--cgx-line);border-radius:5px;padding:2px 6px;background:var(--cgx-raised);pointer-events:none}
+.cgx-results{position:absolute;top:38px;left:0;right:0;z-index:40;background:var(--cgx-card);border:1px solid var(--cgx-gold);border-radius:10px;max-height:280px;overflow:auto;display:none;box-shadow:0 16px 40px rgba(0,0,0,.5)}
+.cgx-results.on{display:block}
+.cgx-result{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 12px;border:0;background:none;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
+.cgx-result:last-child{border-bottom:0}
+.cgx-result:hover,.cgx-result.kbd{background:rgba(201,168,110,.12)}
+.cgx-result .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
+.cgx-result .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
+.cgx-result .ty{margin-left:auto;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cgx-muted);flex-shrink:0}
+
+/* Stage */
+.cgx-stage{position:relative;height:var(--cgx-height);min-height:380px;border:1px solid var(--cgx-line);border-radius:14px;overflow:hidden;
+  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(201,168,110,.075),transparent 62%),radial-gradient(circle at 85% 85%,rgba(146,198,161,.04),transparent 40%),var(--cgx-bg)}
+.cgx-stage svg.cgx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
+.cgx-stage svg.cgx-canvas:active{cursor:grabbing}
+.cgx-stage text.nl{pointer-events:none;font-family:var(--body,'DM Sans',system-ui,sans-serif);paint-order:stroke;stroke:var(--cgx-bg);stroke-width:3px;stroke-linejoin:round}
+.cgx-stage .edge.flow{stroke-dasharray:7 9;animation:cgxflow 1.05s linear infinite}
+@keyframes cgxflow{to{stroke-dashoffset:-16}}
+.cgx-stage .orbit{animation:cgxorbit 60s linear infinite}
+@keyframes cgxorbit{to{stroke-dashoffset:-600}}
+.cgx-stage .fresh-ring{animation:cgxfresh 2.2s ease-in-out infinite}
+@keyframes cgxfresh{0%,100%{stroke-opacity:.18;stroke-width:1.5}50%{stroke-opacity:.7;stroke-width:2.5}}
+.cgx-stage .focusable:focus{outline:none}
+
+/* States */
+.cgx-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;z-index:5}
+.cgx-state>div{max-width:420px}
+.cgx-state h3{margin:0 0 6px;font:600 16px/1.3 var(--display,'Fraunces',Georgia,serif);color:var(--cgx-fg)}
+.cgx-state p{margin:0 0 12px;color:var(--cgx-muted);font-size:12px}
+.cgx-state .cgx-btn{margin:0 4px}
+.cgx-spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--cgx-line);border-top-color:var(--cgx-gold);margin:0 auto 12px;animation:cgxspin .9s linear infinite}
+@keyframes cgxspin{to{transform:rotate(360deg)}}
+
+/* Pinned bar */
+.cgx-pinned{position:absolute;top:0;left:0;right:0;z-index:20;display:none;align-items:center;gap:10px;padding:6px 14px;font-size:11px;color:var(--cgx-muted);background:rgba(201,168,110,.08);border-bottom:1px solid rgba(201,168,110,.22);backdrop-filter:blur(8px)}
+.cgx-pinned.on{display:flex}
+.cgx-pinned .lbl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cgx-gold)}
+.cgx-pinned .nms{color:var(--cgx-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
+
+/* Control rail (bottom-left overlay) */
+.cgx-rail{position:absolute;left:12px;bottom:12px;z-index:15;width:200px;display:flex;flex-direction:column;gap:7px;max-height:calc(100% - 24px);overflow:auto;scrollbar-width:thin}
+.cgx-panel{isolation:isolate;background:var(--cgx-card);border:1px solid var(--cgx-line);border-radius:12px;padding:9px 11px 10px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 6px 18px rgba(16,12,9,.16)}
+.cgx-panel-t,.cgx-leg,.cgx-keys{text-shadow:none;filter:none;-webkit-font-smoothing:antialiased}
+.cgx-panel-t{display:flex;align-items:center;justify-content:space-between;font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cgx-muted);margin-bottom:8px}
+.cgx-panel-t button{border:0;background:none;color:var(--cgx-muted);font-size:10px;padding:0}
+.cgx-row{display:flex;gap:5px;flex-wrap:wrap}
+.cgx-btn{padding:4px 10px;border-radius:7px;border:1px solid var(--cgx-line);background:transparent;color:var(--cgx-muted);font-size:10px;font-weight:600;letter-spacing:.04em;transition:all .18s}
+.cgx-btn:hover:not(:disabled){border-color:var(--cgx-gold);color:var(--cgx-fg)}
+.cgx-btn.on{background:rgba(201,168,110,.16);border-color:var(--cgx-gold);color:var(--cgx-fg)}
+.cgx-btn.primary{background:var(--cgx-gold);border-color:var(--cgx-gold);color:#17120d}
+.cgx-btn.primary:hover:not(:disabled){background:#d8bb86}
+.cgx-slider{display:flex;align-items:center;gap:8px}
+.cgx-slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:rgba(201,168,110,.25);border-radius:2px;outline:none}
+.cgx-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cgx-gold);border:2px solid var(--cgx-bg);cursor:pointer;box-shadow:0 0 8px rgba(201,168,110,.5)}
+.cgx-slider .val{font:10px/1 ui-monospace,Menlo,monospace;color:var(--cgx-muted);min-width:18px;text-align:right}
+.cgx-legend{display:flex;flex-direction:column;gap:1px;max-height:170px;overflow:auto;scrollbar-width:thin}
+.cgx-leg{display:flex;align-items:center;gap:8px;padding:3px 6px;margin:0 -6px;border-radius:6px;border:0;background:none;text-align:left;font-size:11px;color:var(--cgx-muted);transition:background .15s}
+.cgx-leg:hover{background:rgba(255,255,255,.04)}
+.cgx-leg.on{color:var(--cgx-fg);background:rgba(201,168,110,.14)}
+.cgx-leg .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 7px currentColor}
+.cgx-leg .nm{text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cgx-leg .ct{margin-left:auto;font:10px/1 ui-monospace,Menlo,monospace;color:var(--cgx-muted)}
+.cgx-leg.on .ct{color:var(--cgx-gold)}
+.cgx-keys{font-size:10px;color:var(--cgx-muted);line-height:2}
+.cgx-keys kbd{display:inline-block;min-width:18px;text-align:center;padding:1px 5px;margin-right:3px;border:1px solid var(--cgx-line);border-radius:4px;background:rgba(201,168,110,.08);font:9.5px/1.4 ui-monospace,Menlo,monospace;color:var(--cgx-gold)}
+.cgx-rail.collapsed .cgx-panel:not(.keep){display:none}
+.cgx-railtoggle{position:absolute;left:12px;bottom:12px;z-index:16;display:none}
+.cgx--narrow .cgx-rail{width:176px}.cgx--narrow .cgx-stage{--cgx-height:440px}.cgx--narrow .cgx-hint{display:none}
+
+/* Inspector (right overlay) */
+.cgx-body{position:relative}
+.cgx-dp{position:absolute;top:12px;right:12px;bottom:12px;width:312px;z-index:25;display:none;flex-direction:column;background:var(--cgx-card);border:1px solid var(--cgx-line);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(18px) saturate(1.1)}
+.cgx-dp.on{display:flex;animation:cgxdp .26s cubic-bezier(.34,1.3,.5,1)}
+@keyframes cgxdp{from{opacity:0;transform:translateX(14px) scale(.985)}to{opacity:1;transform:none}}
+.cgx-dp-accent{height:3px;flex-shrink:0}
+.cgx-dp-hd{padding:13px 16px 11px;border-bottom:1px solid var(--cgx-line);position:relative;flex-shrink:0}
+.cgx-dp-nm{font:600 18px/1.2 var(--display,'Fraunces',Georgia,serif);letter-spacing:-.01em;padding-right:34px;margin-bottom:8px;overflow-wrap:anywhere}
+.cgx-dp-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--cgx-muted)}
+.cgx-tb{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
+.cgx-tb i{width:6px;height:6px;border-radius:50%}
+.cgx-dp-meta b{color:var(--cgx-fg);font-weight:600}
+.cgx-dp-meta .fresh.new{color:var(--cgx-green)}
+.cgx-meter{margin-top:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
+.cgx-meter i{display:block;height:100%;border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}
+.cgx-dp-x{position:absolute;top:11px;right:11px;width:26px;height:26px;border-radius:7px;border:1px solid var(--cgx-line);background:rgba(255,255,255,.04);color:var(--cgx-muted);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s}
+.cgx-dp-x:hover{color:var(--cgx-red);border-color:rgba(232,164,148,.4);background:rgba(232,164,148,.1)}
+.cgx-dp-bd{padding:12px 16px 16px;overflow:auto;scrollbar-width:thin;font-size:12px;line-height:1.55;color:var(--cgx-muted);flex:1}
+.cgx-sec{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cgx-muted);margin:14px 0 7px}
+.cgx-sec:first-child{margin-top:0}
+.cgx-fact{position:relative;padding-left:13px;margin-bottom:6px;color:var(--cgx-fg)}
+.cgx-fact::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--cgx-gold);opacity:.6}
+.cgx-rel{display:block;width:100%;text-align:left;padding:7px 9px;margin:0 -9px 3px;border:0;border-radius:8px;background:none;transition:background .15s}
+.cgx-rel:hover{background:rgba(255,255,255,.045)}
+.cgx-rel-top{display:flex;align-items:center;gap:8px}
+.cgx-rel-nm{font-weight:600;font-size:12px;color:var(--cgx-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cgx-rel-w{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
+.cgx-rel-bar{width:40px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
+.cgx-rel-bar i{display:block;height:100%;border-radius:2px}
+.cgx-rel-wv{font:9.5px/1 ui-monospace,Menlo,monospace;color:var(--cgx-muted)}
+.cgx-rel-d{font-size:11px;color:var(--cgx-muted);line-height:1.45;margin-top:3px}
+.cgx-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
+.cgx-tag{padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:500;background:rgba(255,255,255,.04);border:1px solid var(--cgx-line);color:var(--cgx-muted);transition:all .15s}
+.cgx-tag:hover{color:var(--cgx-fg);border-color:var(--cgx-gold);background:rgba(201,168,110,.12)}
+.cgx-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+.cgx-step{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(201,168,110,.1);border:1px solid rgba(201,168,110,.35);color:var(--cgx-gold)}
+.cgx-arrow{color:var(--cgx-muted);font-size:11px}
+.cgx-dp-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 12px;border-top:1px solid var(--cgx-line);flex-shrink:0;background:rgba(0,0,0,.12)}
+.cgx-note{font-size:10.5px;color:var(--cgx-muted);border:1px solid var(--cgx-line);border-radius:8px;padding:8px 10px;margin-top:12px;line-height:1.45}
+.cgx--narrow .cgx-dp{position:relative;top:auto;right:auto;bottom:auto;width:auto;max-height:none;margin-top:10px;border-radius:12px;animation:none}
+.cgx--narrow .cgx-dp-bd{max-height:360px}
+
+/* Hover tip, toast, hint */
+.cgx-tip{position:absolute;z-index:30;display:none;max-width:280px;padding:8px 12px;border-radius:9px;background:var(--cgx-card);border:1px solid var(--cgx-line);font-size:12px;color:var(--cgx-fg);pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.45)}
+.cgx-tip .top{display:flex;align-items:center;gap:7px;font-weight:600}
+.cgx-tip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
+.cgx-tip .deg{margin-left:auto;font:9.5px/1 ui-monospace,Menlo,monospace;color:var(--cgx-muted);padding-left:10px}
+.cgx-tip .desc{font-size:10.5px;color:var(--cgx-muted);line-height:1.45;margin-top:4px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.cgx-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:12;font-size:10px;letter-spacing:.03em;color:var(--cgx-muted);background:rgba(20,16,12,.7);border:1px solid var(--cgx-line);border-radius:999px;padding:5px 14px;white-space:nowrap;transition:opacity 1s;pointer-events:none}
+.cgx-hint b{color:var(--cgx-fg);font-weight:500}
+.cgx-hint.hide{opacity:0}
+.cgx-toast{position:absolute;left:50%;bottom:52px;transform:translateX(-50%) translateY(8px);z-index:45;font-size:12px;color:var(--cgx-fg);background:var(--cgx-card);border:1px solid var(--cgx-gold);border-radius:9px;padding:7px 16px;opacity:0;pointer-events:none;transition:all .25s;box-shadow:0 10px 30px rgba(0,0,0,.5)}
+.cgx-toast.show{opacity:1;transform:translateX(-50%)}
+
+/* Footer line under the stage */
+.cgx-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-top:9px;font-size:10.5px;color:var(--cgx-muted)}
+.cgx-foot b{color:var(--cgx-fg);font-weight:500}
+
+@media (prefers-reduced-motion:reduce){
+  .cgx-stage .edge.flow,.cgx-stage .orbit,.cgx-stage .fresh-ring,.cgx-spin{animation:none}
+  .cgx-dp.on{animation:none}
+}
+
+/* Graph management (design mock, 2026-09-06): possible duplicates, review sheet, changes list */
+.cgx-dup{padding:8px 9px;margin:0 -9px 6px;border:1px solid var(--cgx-line);border-radius:9px;background:rgba(255,255,255,.025)}
+.cgx-dup-meta{font-size:10.5px;color:var(--cgx-muted);margin-top:3px}
+.cgx-agree{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;font:600 9.5px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--cgx-line);color:var(--cgx-muted)}
+.cgx-agree.ok{color:var(--cgx-green);border-color:rgba(146,198,161,.4)}
+.cgx-agree.warn{color:var(--cgx-red);border-color:rgba(232,164,148,.4)}
+.cgx-sheet{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(16,12,9,.72);backdrop-filter:blur(6px)}
+.cgx-sheet-box{width:min(720px,100%);max-height:100%;overflow:auto;background:var(--cgx-card);border:1px solid var(--cgx-line);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
+.cgx-sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 10px;border-bottom:1px solid var(--cgx-line)}
+.cgx-sheet-hd h3{margin:0;font:600 18px/1.2 var(--display,'Fraunces',Georgia,serif);color:var(--cgx-fg)}
+.cgx-sheet-bd{padding:14px 18px;font-size:12px;color:var(--cgx-muted)}
+.cgx-sheet-bd p{margin:0 0 10px}
+.cgx-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.cgx-cmp-col{border:1px solid var(--cgx-line);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.025)}
+.cgx-cmp-col.keep{border-color:rgba(201,168,110,.55);background:rgba(201,168,110,.07)}
+.cgx-cmp-col h4{margin:0 0 4px;font-size:13px;color:var(--cgx-fg)}
+.cgx-cmp-col .m{font-size:10.5px;color:var(--cgx-muted);margin-bottom:6px}
+.cgx-cmp-col p{margin:4px 0;font-size:11.5px;color:var(--cgx-fg);line-height:1.45}
+.cgx-cmp-col label{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--cgx-fg);cursor:pointer}
+.cgx-effect{margin-top:12px;padding:10px 12px;border:1px solid var(--cgx-line);border-radius:10px;background:rgba(0,0,0,.15)}
+.cgx-effect b{color:var(--cgx-fg);font-weight:600}
+.cgx-effect ul{margin:6px 0 0;padding-left:18px}
+.cgx-effect li{margin:2px 0;color:var(--cgx-fg)}
+.cgx-rule{margin-top:12px;padding:10px 12px;border:1px solid var(--cgx-line);border-radius:10px}
+.cgx-rule label{display:flex;align-items:center;gap:8px;color:var(--cgx-fg);font-size:12px;cursor:pointer}
+.cgx-rule .fields{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
+.cgx-rule input,.cgx-rule select,.cgx-sheet-bd input[type=text],.cgx-sheet-bd input[type=search]{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--cgx-line);background:var(--cgx-bg);color:var(--cgx-fg);font:inherit;font-size:12px}
+.cgx-sheet-bd input[type=text],.cgx-sheet-bd input[type=search]{width:100%}
+.cgx-sheet-ft{display:flex;align-items:center;gap:8px;padding:12px 18px 14px;border-top:1px solid var(--cgx-line);flex-wrap:wrap}
+.cgx-sheet-ft .grow{flex:1;font-size:10.5px;color:var(--cgx-muted);min-width:200px}
+.cgx-changes{margin-top:10px;border:1px solid var(--cgx-line);border-radius:10px;padding:8px 12px;font-size:11px;color:var(--cgx-muted);display:none}
+.cgx-changes.on{display:block}
+.cgx-changes .t{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;color:var(--cgx-muted)}
+.cgx-change{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid rgba(255,255,255,.05)}
+.cgx-change:first-of-type{border-top:0}
+.cgx-change .what{flex:1;color:var(--cgx-fg)}
+.cgx-change .st{font:600 9px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--cgx-line);color:var(--cgx-muted)}
+.cgx-change .st.applied{color:var(--cgx-green);border-color:rgba(146,198,161,.4)}
+.cgx-change .st.queued{color:var(--cgx-gold);border-color:rgba(201,168,110,.5)}
+.cgx-change.reverted .what{opacity:.5;text-decoration:line-through}
+.cgx-pick{max-height:160px;overflow:auto;margin-top:8px;border:1px solid var(--cgx-line);border-radius:8px}
+.cgx-pick button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border:0;background:none;font-size:12px;color:var(--cgx-fg)}
+.cgx-pick button:hover{background:rgba(201,168,110,.12)}
+.cgx-pick .ty{margin-left:auto;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cgx-muted)}
+@media (max-width:640px){.cgx-cmp{grid-template-columns:1fr}}