Add credential sharing openspec

apps/logicsrc-web/src/styles.css

@@ -19,6 +19,17 @@ a {
   text-decoration: none;
 }
 
+button {
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
 .shell {
   display: grid;
   grid-template-columns: 16rem minmax(0, 1fr);
@@ -236,11 +247,20 @@ h1 {
   background: #f7f3e8;
 }
 
+.credentials .soon-lead {
+  background: #eef3f7;
+}
+
 .agentbyte .soon-lead span {
   border-color: #e3c878;
   color: #735b14;
 }
 
+.credentials .soon-lead span {
+  border-color: #9fc3da;
+  color: #225d77;
+}
+
 .soon-lead span {
   display: inline-block;
   margin-bottom: 0.75rem;
@@ -284,6 +304,32 @@ h1 {
   line-height: 1.45;
 }
 
+.surface-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.surface-strip article {
+  min-height: 7.25rem;
+  padding: 0.85rem;
+  border: 1px solid #d6ddd2;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.surface-strip h3 {
+  margin-bottom: 0.35rem;
+  font-size: 1rem;
+}
+
+.surface-strip p {
+  margin-bottom: 0;
+  color: #58615b;
+  line-height: 1.45;
+}
+
 .schema-list {
   display: grid;
   gap: 0.5rem;
@@ -485,10 +531,61 @@ pre {
   margin-bottom: 0;
 }
 
+.coinpay-result {
+  margin-top: 0.85rem;
+  color: #ccd5ce;
+}
+
+.coinpay-result:empty {
+  display: none;
+}
+
+.coinpay-result strong {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #ffffff;
+}
+
+.coinpay-result p {
+  margin-bottom: 0;
+}
+
+.coinpay-result dl {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0;
+}
+
+.coinpay-result div {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.coinpay-result dt {
+  color: #8ee4c9;
+  font-size: 0.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.coinpay-result dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.coinpay-result img {
+  width: min(12rem, 100%);
+  height: auto;
+  margin-top: 0.75rem;
+  border-radius: 6px;
+  background: #ffffff;
+}
+
 @media (max-width: 980px) {
   .primitive-grid,
   .implementation-list,
-  .hire-grid {
+  .hire-grid,
+  .surface-strip {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
@@ -531,7 +628,8 @@ pre {
   .primitive-grid,
   .soon-grid,
   .implementation-list,
-  .hire-grid {
+  .hire-grid,
+  .surface-strip {
     grid-template-columns: 1fr;
   }