:root {
  --dci-primary: #0b172a;
  --dci-accent: #0aa0ff;
  --dci-text: #111827;
  --dci-width: 440px;
  --dci-radius: 16px;
  --dci-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.dci-size-sm { --dci-width: 360px; }
.dci-size-md { --dci-width: 440px; }
.dci-size-lg { --dci-width: 560px; }

.dci-overlay { position: fixed; inset: 0; display: none; background: rgba(0,0,0,.45); z-index: 999999; }
.dci-overlay.show { display: block; }
.dci-modal {
  position: absolute; right: 16px; bottom: 16px;
  width: min(95vw, var(--dci-width));
  max-height: 85vh;
  background: #fff; border-radius: var(--dci-radius);
  box-shadow: var(--dci-shadow);
  overflow: hidden; display: flex; flex-direction: column;
  animation: dci-pop .18s ease-out;
  color: var(--dci-text);
}
@keyframes dci-pop { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.dci-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; background: var(--dci-primary); color:#fff; }
.dci-title { font-weight: 700; }
.dci-close { border:0; background: transparent; font-size: 22px; color:#fff; cursor: pointer; }

.dci-body { padding: 16px; overflow:auto; background:#fff; }
.dci-choices { display:grid; gap: 8px; margin: 12px 0; }
.dci-choice {
  border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px;
  cursor:pointer; background:#fff; transition: border-color .15s, box-shadow .15s;
}
.dci-choice:hover { border-color: var(--dci-accent); box-shadow: 0 0 0 3px rgba(10,160,255,.16); }
.dci-choice input { display:none; }
.dci-choice.active { border-color: var(--dci-accent); box-shadow: 0 0 0 3px rgba(10,160,255,.24); }

.dci-actions { display:flex; gap: 10px; margin-top: 10px; }
.dci-btn {
  appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer;
  background: var(--dci-accent); color:#fff;
}
.dci-btn.secondary { background:#e5e7eb; color:#111827; }

.dci-inline-card {
  width: min(100%, var(--dci-width)); margin: 0 auto;
  background: #fff; border-radius: var(--dci-radius);
  box-shadow: var(--dci-shadow); overflow:hidden; color: var(--dci-text);
}

.dci-footer-note { font-size:12px; color:#6b7280; margin-top:8px; }
@media (max-width: 640px) { .dci-modal { right: 8px; left: 8px; width: auto; } }