/* ManualPass – interaktive Vorschau „Security & Support (CRA)“ */
.xd-cra-box { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; }
.xd-cra-h { display: flex; align-items: center; gap: 5px; font: 700 12.5px var(--display); }
.xd-cra-box dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: 10.5px; }
.xd-cra-box dt { color: var(--muted); } .xd-cra-box dd { margin: 0; overflow-wrap: anywhere; }
.xd-cra-adv { font-size: 10.5px; background: #FFF4D6; border-radius: 6px; padding: 3px 6px; display: flex; flex-direction: column; }
.xd-cra-adv i { font-style: normal; font-weight: 700; color: #8A5F00; }
.xd-cra-expl { display: flex; gap: 10px; align-items: flex-start; background: #FDECEA; border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.xd-cra-expl input { margin-top: 3px; accent-color: var(--red); width: 16px; height: 16px; }
.xd-cra-expl span { display: flex; flex-direction: column; } .xd-cra-expl small { font-size: 12px; color: var(--muted); }
.xd-cra-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.xd-cra-dl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.xd-cra-dl b { font-size: 13.5px; } .xd-cra-dl small { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.xd-cra-dl em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font: 700 12px var(--display); font-variant-numeric: tabular-nums; background: #FFF1C2; color: #7A5200; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.xd-cra-dl em.hot { background: #FDE7E5; color: var(--red); }
.xd-cra-dl em.wait { background: var(--steel); color: var(--muted); font-weight: 600; }
.xd-op-mail { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.xd-op-mh { display: flex; gap: 8px; align-items: center; background: var(--steel); padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.xd-op-mh span { font-size: 18px; }
.xd-op-mail dl { margin: 0; padding: 8px 12px 10px; display: grid; grid-template-columns: 78px 1fr; gap: 5px 8px; font-size: 13px; }
.xd-op-mail dt { color: var(--muted); font-size: 12px; }
.xd-op-mail dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.xd-op-body { background: var(--amber-soft); border-radius: 6px; padding: 3px 7px; white-space: pre-wrap; }
.xd-op-note { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 13px; background: #F4FBF7; border: 1px solid #9FD3B8; border-radius: 8px; padding: 6px 10px; }
.xd-op-note span { font: 700 12px var(--display); color: var(--green); }
.xd[data-demo="cra"] .xd-toast { bottom: 70px; }