/* Interactive dashboard demo for the landing page. Everything is scoped under
   .cr-demo so it can't touch the rest of the page. The three theme token sets
   below are copied from the extension's dashboard.css (light, dark, pink) so
   the demo looks like the real product in each mode. Sample data only: every
   brand, number and script shown here is invented. */

.cr-demo {
  /* dark (default) */
  --cr-bg: #111827; --cr-surface: #1f2937; --cr-surface-strong: #1a2338; --cr-surface-strong-2: #121a2c; --cr-well: #0b1220;
  --cr-border: #1f2937; --cr-border-strong: #263151; --cr-border-panel: #2d3a52; --cr-border-input: #374151; --cr-border-row: #1c2436;
  --cr-text: #f3f4f6; --cr-text-muted: #9ca3af; --cr-text-faint: #6b7280; --cr-text-soft: #d1d5db;
  --cr-accent: #60a5fa; --cr-btn-primary-bg: #2563eb; --cr-link-pill-text: #bfdbfe; --cr-link-pill-text-hover: #eaf2ff;
  --cr-pill-bg: rgba(96, 165, 250, 0.14); --cr-pill-border: rgba(96, 165, 250, 0.28);
  --cr-badge-blue-bg: #1e3a8a; --cr-badge-blue-text: #93c5fd;
  --cr-badge-muted-bg: #1f2937; --cr-badge-muted-text: #9ca3af;
  --cr-badge-amber-bg: #78350f; --cr-badge-amber-text: #fcd34d;
  --cr-badge-green-bg: #14532d; --cr-badge-green-text: #86efac;
  --cr-badge-red-bg: #7f1d1d; --cr-badge-red-text: #f87171;
  --cr-money: #34d399; --cr-money-glow: rgba(52, 211, 153, 0.12);
  --cr-header-bg: linear-gradient(135deg, #1e3a8a 0%, #172554 100%); --cr-header-border: #2c4a9e;
}
.cr-demo[data-theme="light"] {
  --cr-bg: #f6f7fa; --cr-surface: #ffffff; --cr-surface-strong: #f1f5f9; --cr-surface-strong-2: #e2e8f0; --cr-well: #eef1f5;
  --cr-border: #e2e8f0; --cr-border-strong: #dbe2ea; --cr-border-panel: #d8dee6; --cr-border-input: #cbd5e1; --cr-border-row: #eef1f5;
  --cr-text: #0f172a; --cr-text-muted: #64748b; --cr-text-faint: #94a3b8; --cr-text-soft: #334155;
  --cr-accent: #2563eb; --cr-btn-primary-bg: #2563eb; --cr-link-pill-text: #1d4ed8; --cr-link-pill-text-hover: #1e3a8a;
  --cr-pill-bg: rgba(96, 165, 250, 0.14); --cr-pill-border: rgba(96, 165, 250, 0.28);
  --cr-badge-blue-bg: #dbeafe; --cr-badge-blue-text: #1e40af;
  --cr-badge-muted-bg: #e5e7eb; --cr-badge-muted-text: #475569;
  --cr-badge-amber-bg: #fef3c7; --cr-badge-amber-text: #78350f;
  --cr-badge-green-bg: #dcfce7; --cr-badge-green-text: #166534;
  --cr-badge-red-bg: #fee2e2; --cr-badge-red-text: #b91c1c;
  --cr-money: #059669; --cr-money-glow: rgba(5, 150, 105, 0.1);
}
.cr-demo[data-theme="pink"] {
  --cr-bg: #fff0f6; --cr-surface: #ffffff; --cr-surface-strong: #ffe3ef; --cr-surface-strong-2: #fdd0e3; --cr-well: #ffe8f1;
  --cr-border: #fbcfe2; --cr-border-strong: #f9b9d4; --cr-border-panel: #f6add0; --cr-border-input: #f3a0c6; --cr-border-row: #ffe3ef;
  --cr-text: #4a1230; --cr-text-muted: #9d4a73; --cr-text-faint: #c488a6; --cr-text-soft: #6b2547;
  --cr-accent: #e11d74; --cr-btn-primary-bg: #ec4899; --cr-link-pill-text: #be185d; --cr-link-pill-text-hover: #831843;
  --cr-pill-bg: rgba(236, 72, 153, 0.12); --cr-pill-border: rgba(236, 72, 153, 0.3);
  --cr-badge-blue-bg: #fbcfe8; --cr-badge-blue-text: #9d174d;
  --cr-badge-muted-bg: #fce7f3; --cr-badge-muted-text: #9d4a73;
  --cr-badge-amber-bg: #fef3c7; --cr-badge-amber-text: #78350f;
  --cr-badge-green-bg: #dcfce7; --cr-badge-green-text: #166534;
  --cr-badge-red-bg: #ffe4e6; --cr-badge-red-text: #be123c;
  --cr-money: #e11d74; --cr-money-glow: rgba(225, 29, 116, 0.1);
  --cr-header-bg: linear-gradient(135deg, #f472b6 0%, #ec4899 100%); --cr-header-border: #f9a8d4;
}

.cr-demo, .cr-demo * { box-sizing: border-box; }
.cr-demo {
  position: relative;
  border: 1px solid var(--cr-border-strong);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cr-bg);
  color: var(--cr-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: background 0.2s ease, color 0.2s ease;
}
.cr-demo button, .cr-demo input, .cr-demo select { font-family: inherit; }
.cr-demo :focus-visible { outline: 2px solid var(--cr-accent); outline-offset: 2px; border-radius: 6px; }

/* browser chrome */
.cr-demo-chrome { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--cr-surface-strong-2); border-bottom: 1px solid var(--cr-border-strong); }
.cr-demo-dots { display: flex; gap: 6px; }
.cr-demo-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--cr-border-panel); display: block; }
.cr-demo-url { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--cr-text-muted); background: var(--cr-bg); border: 1px solid var(--cr-border-strong); border-radius: 999px; padding: 3px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-demo-reset { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--cr-text-muted); background: var(--cr-bg); border: 1px solid var(--cr-border-strong); border-radius: 999px; padding: 2px 12px; cursor: pointer; white-space: nowrap; }
.cr-demo-reset:hover { color: var(--cr-text); border-color: var(--cr-accent); }
.cr-demo-sample { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cr-text-faint); white-space: nowrap; }

/* app shell */
.cr-demo-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 40rem; }
.cr-demo-sidebar { background: var(--cr-surface-strong); border-right: 1px solid var(--cr-border-strong); display: flex; flex-direction: column; padding: 12px 0; overflow-y: auto; }
.cr-demo-logo { display: flex; align-items: center; gap: 8px; padding: 4px 16px 14px; font-weight: 800; letter-spacing: 0.04em; font-size: 12.5px; color: var(--cr-accent); white-space: nowrap; }
.cr-demo-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cr-text-faint); padding: 12px 16px 4px; }
.cr-demo-item { display: block; width: 100%; text-align: left; background: none; border: none; border-left: 3px solid transparent; color: var(--cr-text); padding: 8px 16px; font-size: 13.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-demo-item:hover { background: var(--cr-border-strong); }
.cr-demo-item[aria-current="page"] { background: var(--cr-border-strong); border-left-color: var(--cr-accent); font-weight: 700; }
.cr-demo-item.is-static { color: var(--cr-text-faint); cursor: default; }
.cr-demo-item.is-static:hover { background: none; }
.cr-demo-item .new { margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--cr-accent); background: var(--cr-pill-bg); border: 1px solid var(--cr-pill-border); padding: 0 6px; border-radius: 999px; vertical-align: 1px; }
.cr-demo-spacer { margin-top: auto; }
.cr-demo-theme { display: flex; align-items: center; gap: 8px; }

/* main column */
.cr-demo-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cr-demo-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: var(--cr-header-bg); border-bottom: 1px solid var(--cr-header-border, #2c4a9e); color: #fff; flex: none; }
.cr-demo-header h3 { margin: 0; font-family: inherit; font-weight: 700; font-size: 17px; color: #fff; letter-spacing: 0; }
.cr-demo-header .sub { font-size: 12px; color: rgba(255, 255, 255, 0.78); }
.cr-demo-view { padding: 18px 22px 26px; overflow: auto; flex: 1; min-height: 0; }
.cr-demo-view[hidden] { display: none; }

/* widgets */
.cr-demo-widgets { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.cr-demo-widget { background: linear-gradient(160deg, var(--cr-surface-strong) 0%, var(--cr-surface-strong-2) 100%); border: 1px solid var(--cr-border-strong); border-radius: 10px; padding: 14px 18px; }
.cr-demo-widget.money { flex: 1; min-width: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; border-left: 3px solid var(--cr-money); background: linear-gradient(160deg, var(--cr-money-glow), transparent), var(--cr-surface-strong); }
.cr-demo-widget .lbl { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cr-text-faint); }
.cr-demo-widget .big { font-size: 28px; font-weight: 800; color: var(--cr-money); line-height: 1.1; }
.cr-demo-widget.top { flex: 2; min-width: 260px; }

/* tables */
.cr-demo-tablewrap { overflow-x: auto; border: 1px solid var(--cr-border-strong); border-radius: 10px; background: var(--cr-surface); }
.cr-demo table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cr-demo th { text-align: left; padding: 9px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cr-text-muted); background: var(--cr-surface-strong); border-bottom: 1px solid var(--cr-border-strong); white-space: nowrap; }
.cr-demo th.sortable { cursor: pointer; user-select: none; }
.cr-demo th.sortable:hover { color: var(--cr-text); }
.cr-demo th .arrow { font-size: 10px; margin-left: 4px; color: var(--cr-accent); }
.cr-demo td { padding: 9px 12px; border-bottom: 1px solid var(--cr-border-row); color: var(--cr-text-soft); white-space: nowrap; }
.cr-demo tbody tr:last-child td { border-bottom: none; }
.cr-demo tbody tr.row { cursor: pointer; }
.cr-demo tbody tr.row:hover td { background: var(--cr-surface-strong); }
.cr-demo td.brand { color: var(--cr-text); font-weight: 600; }
.cr-demo tr.detail td { background: var(--cr-well); white-space: normal; color: var(--cr-text-muted); }
.cr-demo .tick { color: var(--cr-badge-green-text); font-weight: 700; }
.cr-demo .dash { color: var(--cr-text-faint); }

.cr-demo-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.cr-demo-toolbar input[type="search"], .cr-demo-toolbar select, .cr-demo-pop input { background: var(--cr-surface); color: var(--cr-text); border: 1px solid var(--cr-border-input); border-radius: 8px; padding: 7px 11px; font-size: 13px; min-width: 0; }
.cr-demo-toolbar input[type="search"] { flex: 1; min-width: 140px; max-width: 280px; }
.cr-demo-toolbar .count { margin-left: auto; font-size: 12px; color: var(--cr-text-faint); }

/* badges and pills */
.cr-demo .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.cr-demo .b-hi { background: var(--cr-badge-green-bg); color: var(--cr-badge-green-text); }
.cr-demo .b-mid { background: var(--cr-badge-amber-bg); color: var(--cr-badge-amber-text); }
.cr-demo .b-lo { background: var(--cr-badge-red-bg); color: var(--cr-badge-red-text); }
.cr-demo .b-blue { background: var(--cr-badge-blue-bg); color: var(--cr-badge-blue-text); }
.cr-demo .b-muted { background: var(--cr-badge-muted-bg); color: var(--cr-badge-muted-text); }
.cr-demo .pending { margin-left: 6px; font-size: 12px; }
.cr-demo .mine { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--cr-accent); background: var(--cr-pill-bg); border: 1px solid var(--cr-pill-border); padding: 0 6px; border-radius: 999px; }

/* card grids (submissions, amazon videos) */
.cr-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.cr-demo-card { background: linear-gradient(160deg, var(--cr-surface-strong) 0%, var(--cr-surface-strong-2) 100%); border: 1px solid var(--cr-border-strong); border-radius: 10px; display: flex; flex-direction: column; position: relative; }
.cr-demo-card.is-archived { opacity: 0.55; }
.cr-demo-thumb { position: relative; display: block; width: 100%; aspect-ratio: 9 / 14; border: none; padding: 0; cursor: pointer; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--cr-well); }
.cr-demo-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.cr-demo-thumb .status { position: absolute; left: 6px; top: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.cr-demo-thumb .dur { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.6); color: #fff; }
.cr-demo-cardbody { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 5px; }
.cr-demo-cardbody .t { font-weight: 700; color: var(--cr-text); font-size: 13px; }
.cr-demo-cardbody .d { font-size: 12px; color: var(--cr-text-muted); }
.cr-demo-cardbody .badge { align-self: flex-start; }
.cr-demo-detail { margin-bottom: 14px; background: linear-gradient(160deg, var(--cr-surface-strong) 0%, var(--cr-surface-strong-2) 100%); border: 1px solid var(--cr-border-strong); border-radius: 10px; padding: 14px; display: flex; gap: 16px; flex-wrap: wrap; }
.cr-demo-detail .vid { width: 150px; aspect-ratio: 9 / 14; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 28px; color: rgba(255, 255, 255, 0.85); }
.cr-demo-detail .txt { flex: 1; min-width: 200px; font-size: 13px; color: var(--cr-text-soft); }
.cr-demo-detail .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 14px; }
.cr-demo-detail .head .cr-demo-btn { padding: 3px 10px; font-size: 12px; }
.cr-demo-detail .stats { font-size: 12px; color: var(--cr-text-muted); margin-bottom: 8px; }
.cr-demo-detail .txt b { color: var(--cr-text); }

/* the per-card View Options menu, same look as the extension's */
.cr-demo-more { position: relative; display: inline-flex; margin-top: 3px; }
.cr-demo-morebtn { display: inline-flex; align-items: center; color: var(--cr-link-pill-text); background: var(--cr-pill-bg); border: 1px solid var(--cr-pill-border); padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.cr-demo-morebtn:hover { color: var(--cr-link-pill-text-hover); border-color: var(--cr-accent); }
.cr-demo-pill { display: inline-flex; align-items: center; color: var(--cr-link-pill-text); background: var(--cr-pill-bg); border: 1px solid var(--cr-pill-border); padding: 3px 10px; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.cr-demo-pill:hover { color: var(--cr-link-pill-text-hover); border-color: var(--cr-accent); }
.cr-demo-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; width: max-content; padding: 6px; background: var(--cr-surface-strong); border: 1px solid var(--cr-border-panel); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.cr-demo-panel[hidden] { display: none; }
.cr-demo-panel button { display: flex; align-items: center; width: 100%; margin: 0; padding: 5px 10px; border: 1px solid var(--cr-pill-border); border-radius: 5px; background: var(--cr-pill-bg); color: var(--cr-link-pill-text); font-size: 12px; font-weight: 600; line-height: 1.3; text-align: left; white-space: nowrap; cursor: pointer; }
.cr-demo-panel button:hover { color: var(--cr-link-pill-text-hover); border-color: var(--cr-accent); }
.cr-demo-panel button.klipq { color: #fff; background: #10b981; border-color: #0d9668; font-weight: 700; }
.cr-demo-panel button.klipq:hover { background: #059669; color: #fff; }
.cr-demo-panel button.danger { background: transparent; border-color: var(--cr-border-panel); color: var(--cr-text-faint); }
.cr-demo-panel button.danger:hover { color: var(--cr-badge-red-text); border-color: currentColor; }

/* brand-picker popover */
.cr-demo-pop { position: absolute; z-index: 30; left: 50%; top: 22%; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); background: var(--cr-surface-strong); border: 1px solid var(--cr-border-panel); border-radius: 12px; padding: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.cr-demo-pop[hidden] { display: none; }
.cr-demo-pop-wide { width: min(600px, calc(100% - 24px)); top: 8%; }
.cr-demo-pop pre { margin: 0 0 4px; max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--cr-well); color: var(--cr-text-soft); border: 1px solid var(--cr-border-row); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.5; }
.cr-demo-pop h4 { margin: 0 0 4px; font-size: 15px; color: var(--cr-text); }
.cr-demo-pop p { margin: 0 0 10px; font-size: 12.5px; color: var(--cr-text-muted); }
.cr-demo-pop input { width: 100%; }
.cr-demo-pop .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; align-items: center; }
.cr-demo-pop .row .spacer { margin-right: auto; }
.cr-demo-btn { background: var(--cr-surface); color: var(--cr-text); border: 1px solid var(--cr-border-input); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cr-demo-btn.primary { background: var(--cr-btn-primary-bg); border-color: transparent; color: #fff; }
.cr-demo-btn.text { background: none; border: none; color: var(--cr-text-muted); text-decoration: underline; padding-left: 0; }

/* top performers */
.cr-demo-top3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cr-demo-vcard { background: linear-gradient(160deg, var(--cr-surface-strong) 0%, var(--cr-surface-strong-2) 100%); border: 1px solid var(--cr-border-strong); border-radius: 10px; padding: 12px; display: flex; gap: 12px; }
.cr-demo-vcard .thumb { width: 70px; aspect-ratio: 9 / 14; border-radius: 7px; flex: none; display: grid; place-items: center; color: rgba(255, 255, 255, 0.85); font-size: 18px; }
.cr-demo-vcard .rank { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cr-text-faint); }
.cr-demo-vcard .clicks { font-size: 22px; font-weight: 800; color: var(--cr-accent); line-height: 1.1; }
.cr-demo-vcard .meta { font-size: 12px; color: var(--cr-text-muted); }
.cr-demo-bars { display: grid; gap: 7px; }
.cr-demo-bar { display: grid; grid-template-columns: 130px 1fr 54px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--cr-text-soft); }
.cr-demo-bar .track { height: 10px; border-radius: 999px; background: var(--cr-well); overflow: hidden; border: 1px solid var(--cr-border-row); }
.cr-demo-bar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cr-accent), var(--cr-btn-primary-bg)); width: 0; transition: width 0.5s ease; }
.cr-demo-section-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cr-text-faint); margin: 18px 0 8px; }
.cr-demo-script { background: var(--cr-surface); border: 1px solid var(--cr-border-row); border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; font-size: 12.5px; color: var(--cr-text-muted); }
.cr-demo-script b { color: var(--cr-text); }

/* toast + hints */
.cr-demo-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; z-index: 40; max-width: min(460px, calc(100% - 24px)); background: var(--cr-text); color: var(--cr-bg); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: opacity 0.2s ease, transform 0.2s ease; }
.cr-demo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cr-hint { animation: cr-demo-ping 1.6s ease-out 3; border-radius: 6px; }
@keyframes cr-demo-ping { 0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7); } 70% { box-shadow: 0 0 0 12px rgba(236, 72, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .cr-hint { animation: none; outline: 2px solid var(--cr-accent); } .cr-demo-bar .fill, .cr-demo-toast { transition: none; } }

/* "things to try" strip above the demo */
.cr-try { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 14px; }
.cr-try .lbl { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint, #5c6c8a); margin-right: 4px; }
.cr-try button { font: inherit; font-size: 13px; font-weight: 600; color: var(--text, #e8ecf6); background: var(--surface-2, #1a2338); border: 1px solid var(--border, #26314a); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.cr-try button:hover { border-color: var(--accent, #5b8def); }

/* phones: sidebar becomes a row of tabs */
@media (max-width: 760px) {
  .cr-demo-app { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cr-demo-sidebar { flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; border-right: none; border-bottom: 1px solid var(--cr-border-strong); }
  .cr-demo-logo, .cr-demo-group, .cr-demo-spacer, .cr-demo-item.is-static { display: none; }
  .cr-demo-item { width: auto; flex: none; border-left: none; border-radius: 8px; padding: 7px 12px; border: 1px solid var(--cr-border-strong); }
  .cr-demo-item[aria-current="page"] { border-color: var(--cr-accent); }
  .cr-demo-view { padding: 14px; max-height: 34rem; }
  .cr-demo-sample { display: none; }
  .cr-demo-bar { grid-template-columns: 90px 1fr 46px; }
  .cr-demo-header { padding: 12px 14px; flex-wrap: wrap; }
  .cr-demo-widget.top { min-width: 0; flex-basis: 100%; padding: 12px; }
  .cr-demo-widget.top td { padding: 7px 6px; }
  .cr-demo-widget.money { min-width: 0; flex-basis: calc(50% - 7px); }
  .cr-demo-widget .big { font-size: 22px; }
}

.cr-rw-secret { filter: blur(5px); -webkit-user-select: none; user-select: none; pointer-events: none; }

/* Send to phone popup (sample QR is a decorative grid, not a real code) */
.cr-demo-phone-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.cr-demo-qr { display: grid; grid-template-columns: repeat(21, 1fr); width: 126px; height: 126px; padding: 6px; background: #fff; border-radius: 8px; flex: none; }
.cr-demo-qr i { background: #fff; }
.cr-demo-qr i.on { background: #111; }
.cr-demo-phone-side { flex: 1; min-width: 160px; display: grid; gap: 6px; }
.cr-demo-phone-side input { width: 100%; }