#cg-demo { margin: 2rem 0 2.5rem; }
#cg-demo .demo-app { border: 1px solid var(--tp-border, #E4E6F0); border-radius: 12px;
  overflow: hidden; background: var(--tp-bg, #fff); }
#cg-demo .demo-bar { background: #6A2BFF; color: #fff; padding: .7rem 1rem;
  font-weight: 700; display: flex; gap: .6rem; align-items: baseline; }
#cg-demo .demo-bar span { font-weight: 400; opacity: .8; font-size: .85rem; }
#cg-demo .demo-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#cg-demo .demo-table th, #cg-demo .demo-table td {
  text-align: left; padding: .55rem 1rem; border-bottom: 1px solid var(--tp-border, #E4E6F0); }
#cg-demo .demo-table th { font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tp-fg-3, #6B6E82); }
#cg-demo tbody tr.chosen { background: rgba(106,43,255,.07); }
#cg-demo .demo-row-action { border: 1px solid var(--tp-border, #E4E6F0); background: var(--tp-bg, #fff);
  color: inherit; border-radius: 7px; padding: .35rem .85rem; font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .06s; }
#cg-demo .demo-row-action:hover { border-color: #6A2BFF; color: #6A2BFF; }
#cg-demo .demo-row-action:active { transform: translateY(1px); }
#cg-demo .demo-label { display: block; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tp-fg-3, #6B6E82);
  margin: 1rem 1rem .35rem; }
#cg-demo .demo-input { width: calc(100% - 2rem); margin: 0 1rem; padding: .6rem .75rem;
  border: 1px solid var(--tp-border, #E4E6F0); border-radius: 8px; font: inherit;
  background: var(--tp-bg, #fff); color: inherit; }
#cg-demo .demo-input:focus { outline: 2px solid #6A2BFF; outline-offset: 1px; }
#cg-demo .demo-save { margin: 1rem; padding: .6rem 1.2rem; border: 0; border-radius: 9px;
  background: #6A2BFF; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11,11,22,.16); transition: filter .15s, transform .06s, box-shadow .15s; }
#cg-demo .demo-save:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(106,43,255,.3); }
#cg-demo .demo-save:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(11,11,22,.16); }
#cg-demo .demo-note { margin: 0 1rem 1rem; font-size: .85rem; color: #16C79A;
  font-weight: 600; opacity: 0; transition: opacity .2s; }
#cg-demo .demo-note.shown { opacity: 1; }
#cg-demo .demo-controls { display: flex; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap;
  align-items: center; }
#cg-demo .demo-controls button { display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 10px; padding: .7rem 1.35rem; font: inherit; font-weight: 600;
  font-size: .92rem; cursor: pointer; line-height: 1;
  transition: filter .15s, transform .06s, box-shadow .15s, border-color .15s, background .15s; }
#cg-demo .demo-controls button:active { transform: translateY(1px); }
#cg-demo .demo-controls button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }

/* Primary carries the Wayfinder gradient. The guidelines reserve it for hero
   moments, and the button that starts the walkthrough is the one on this page. */
#cg-demo .demo-primary { border: 0; color: #fff;
  background: linear-gradient(135deg, #6A2BFF, #06D6F5);
  box-shadow: 0 2px 6px rgba(106,43,255,.28); }
#cg-demo .demo-primary::before { background: #fff; opacity: .9; }
#cg-demo .demo-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(106,43,255,.36); }

#cg-demo .demo-secondary { background: var(--tp-bg, #fff); color: inherit;
  border: 1px solid var(--tp-border, #E4E6F0); }
#cg-demo .demo-secondary::before { background: #FF5470; }
#cg-demo .demo-secondary:hover { border-color: #6A2BFF; color: #6A2BFF; }
#cg-demo .demo-secondary::before { animation: cg-blip 1.6s ease-in-out infinite; }
@keyframes cg-blip { 50% { opacity: .25; } }
#cg-demo .demo-caption { font-size: .85rem; color: var(--tp-fg-2, #585B6B); margin-top: 1rem; }