/* Equyx — Connectors */

.conn-card { border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px; margin-bottom: 14px; background: var(--panel-2, #0c0a07); }
.cc-top { display: flex; align-items: flex-start; gap: 12px; }
.cc-logo { width: 42px; height: 42px; border-radius: 8px; background: var(--good); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; letter-spacing: .04em; flex: none; }
.cc-state { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.cc-on { color: var(--good); font-weight: 700; }
.cc-warn { color: var(--amber, #ffa028); font-weight: 700; }
.cc-bad { color: var(--bad); }
.cc-guest { margin-top: 12px; font-size: 12px; color: var(--muted); }
.cc-who { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.cc-who b { color: var(--text); }
.cc-setup { margin-top: 12px; font-size: 12px; }
.cc-setup ol { margin: 6px 0 12px; padding-left: 20px; line-height: 1.7; color: var(--text-2); }
.cc-setup code { background: var(--hover, #17130c); padding: 1px 6px; border-radius: 3px; color: var(--amber-dim, #c8912f); }
.cc-forms { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.cc-form { border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px; }
.cc-form label { display: block; font-size: 11px; color: var(--muted); margin: 6px 0; }
.cc-form input, .cc-renew input, .sm-grid input, .sm-grid select, .sm-confirm input { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 6px 8px; margin-top: 3px; background: var(--panel, #0d0b08); color: var(--text); border: 1px solid var(--border-strong, #3a3020); border-radius: 3px; }
.cc-form .btn { margin-top: 8px; }
.cc-body { margin-top: 12px; }
.cc-funds { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.cc-funds b { color: var(--text); }
.cc-renew { display: inline-flex; align-items: center; gap: 6px; }
.cc-renew input { width: 150px; margin: 0; padding: 3px 6px; font-size: 11px; }
.cc-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cc-table th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.cc-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cc-table code { font-size: 10.5px; }

/* ---- trade dialog ---- */
.sig-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sig-modal { background: var(--panel, #0d0b08); border: 1px solid var(--border-strong, #3a3020); border-radius: 6px; width: min(720px, 100%); max-height: 90vh; overflow: auto; padding: 14px 16px 16px; font-size: 12px; }
.sm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sm-head b { font-size: 14px; }
.sm-head .mini { margin-left: auto; }
.sm-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; }
.sm-grid label { font-size: 11px; color: var(--muted); }
.sm-cost { margin: 10px 0 6px; font-size: 12px; color: var(--muted); }
.sm-cost b { color: var(--text); }
.sm-act { display: flex; gap: 8px; }
.sm-preview { margin-top: 12px; border: 1px solid var(--border); border-left: 3px solid var(--amber, #ffa028); padding: 10px 12px; }
.sm-preview .d-h { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--amber, #ffa028); margin-bottom: 6px; }
.sm-inst { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.sm-body { font-size: 11px; background: var(--panel-3, #080705); padding: 8px 10px; border-radius: 3px; overflow: auto; max-height: 220px; color: var(--text-2); }
.sm-confirm { display: flex; align-items: flex-end; gap: 10px; margin: 8px 0; }
.sm-confirm label { font-size: 11px; color: var(--muted); flex: 1; }
.sm-placed { border: 1px solid var(--good); border-left: 3px solid var(--good); padding: 10px 12px; line-height: 1.6; }
.sm-placed code { background: var(--hover, #17130c); padding: 1px 6px; border-radius: 3px; }

@media (max-width: 900px) { .cc-forms, .sm-grid { grid-template-columns: 1fr; } }