.cio-ymi { display: grid; gap: 20px; }
.cio-ymi__message { padding: 12px 16px; border-left: 4px solid #7b2cff; background: #f7f2ff; }
.cio-ymi__wizard { min-width: 0; }
.cio-ymi__step[hidden] { display: none !important; }
.cio-ymi__step { display: grid; gap: 24px; animation: cio-ymi-step-in .18s ease-out; }
.cio-ymi__start-copy { display: grid; gap: 10px; text-align: left; }
.cio-ymi__start-copy h3,
.cio-ymi__step-heading h3 { margin: 0; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.35; }
.cio-ymi__start-copy p,
.cio-ymi__step-heading p { margin: 0; line-height: 1.8; color: #444; }
.cio-ymi__actions { display: flex; justify-content: center; }
.cio-ymi__actions--start { justify-content: flex-start; }
.cio-ymi__primary-action,
.cio-ymi__provider { display: inline-flex !important; min-height: 52px; padding: 13px 34px !important; align-items: center; justify-content: center; border: 1px solid #7b2cff !important; border-radius: 7px !important; background: #7b2cff !important; color: #fff !important; font: inherit; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none !important; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cio-ymi__primary-action:hover,
.cio-ymi__primary-action:focus-visible,
.cio-ymi__provider:hover,
.cio-ymi__provider:focus-visible { background: #681edb !important; border-color: #681edb !important; color: #fff !important; box-shadow: 0 4px 12px rgba(123,44,255,.25); transform: translateY(-1px); }
.cio-ymi__primary-action:focus-visible,
.cio-ymi__provider:focus-visible { outline: 3px solid rgba(123,44,255,.25); outline-offset: 2px; }
.cio-ymi__primary-action:disabled,
.cio-ymi__provider:disabled,
.cio-ymi__provider[aria-busy="true"] { opacity: .58; cursor: wait; transform: none; box-shadow: none; }
.cio-ymi__step-heading { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: start; }
.cio-ymi__back { margin-top: 4px; padding: 6px 0; border: 0; background: transparent; color: #5f20d1; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cio-ymi__method-list { display: grid; gap: 12px; }
.cio-ymi__method-button { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 20px; width: 100%; padding: 18px 52px 18px 20px; border: 1px solid #d7d7d7; border-radius: 10px; background: #fff; color: #111; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.cio-ymi__method-button:hover,
.cio-ymi__method-button:focus-visible { border-color: #7b2cff; background: #fbf8ff; box-shadow: 0 0 0 3px rgba(123,44,255,.10); outline: 0; }
.cio-ymi__method-name { grid-column: 1; font-size: 21px; font-weight: 700; line-height: 1.4; }
.cio-ymi__method-description { grid-column: 1; color: #555; line-height: 1.6; }
.cio-ymi__method-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 32px; line-height: 1; color: #7b2cff; }
.cio-ymi__terms { margin: 0; padding: 18px; border: 1px solid #e2e2e2; border-radius: 10px; background: #f8f8f8; }
.cio-ymi__terms-body { margin-top: 12px; max-height: 240px; overflow: auto; line-height: 1.75; }
.cio-ymi__terms-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-weight: 700; }
.cio-ymi__terms-check input { margin-top: 4px; }
.cio-ymi__status { display: grid; gap: 20px; }
.cio-ymi__status-heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cio-ymi__status-heading p { margin: 0; }
.cio-ymi__status-badge { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: #e8f7ec; color: #176b2c; font-weight: 700; }
.cio-ymi__channels { display: grid; gap: 12px; }
.cio-ymi__channels h3 { margin: 0; }
.cio-ymi__channel { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 16px; border: 1px solid #e1e1e1; border-radius: 8px; }
.cio-ymi__channel-main { display: grid; gap: 4px; }
.cio-ymi__channel-provider { font-size: .92em; color: #555; }
.cio-ymi__unlink { padding: 9px 14px; border: 1px solid #7b2cff; border-radius: 5px; background: #fff; color: #5f20d1; font-weight: 700; cursor: pointer; }
@keyframes cio-ymi-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .cio-ymi__actions,
  .cio-ymi__actions--start { justify-content: stretch; }
  .cio-ymi__primary-action,
  .cio-ymi__provider { width: 100%; }
  .cio-ymi__step-heading { grid-template-columns: 1fr; gap: 8px; }
  .cio-ymi__back { justify-self: start; }
  .cio-ymi__method-button { padding: 16px 44px 16px 16px; }
  .cio-ymi__channel { align-items: stretch; flex-direction: column; }
  .cio-ymi__unlink { width: 100%; }
}

/* Agreement UX */
.cio-ymi__terms { display: grid; gap: 18px; }
.cio-ymi__terms-summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.cio-ymi__terms-open { padding: 7px 0; border: 0; background: transparent; color: #5f20d1; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cio-ymi__terms-check { margin-top: 0; cursor: pointer; }
.cio-ymi__terms-check input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #7b2cff; }
.cio-ymi__provider:disabled { background: #b9b9b9 !important; border-color: #b9b9b9 !important; color: #fff !important; opacity: 1; cursor: not-allowed; }
.cio-ymi__provider:disabled:hover { transform: none; box-shadow: none; }
.cio-ymi__terms-modal[hidden] { display: none !important; }
.cio-ymi__terms-modal { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 20px; }
.cio-ymi__terms-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.52); }
.cio-ymi__terms-modal-panel { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: min(720px, 100%); max-height: min(80vh, 760px); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.cio-ymi__terms-modal-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e1e1e1; }
.cio-ymi__terms-modal-heading h4 { margin: 0; font-size: 24px; line-height: 1.4; }
.cio-ymi__terms-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f3f3f3; color: #222; font-size: 28px; line-height: 1; cursor: pointer; }
.cio-ymi__terms-modal .cio-ymi__terms-body { margin: 0; max-height: none; padding: 24px; overflow: auto; }
.cio-ymi__terms-modal .cio-ymi__terms-body p { margin: 0 0 1.15em; line-height: 1.9; }
.cio-ymi__terms-modal .cio-ymi__terms-body h3 { margin: 1.75em 0 .65em; font-size: 1.08em; line-height: 1.6; }
.cio-ymi__terms-modal .cio-ymi__terms-body h3:first-child { margin-top: 0; }
.cio-ymi__terms-modal .cio-ymi__terms-body ol,
.cio-ymi__terms-modal .cio-ymi__terms-body ul { margin: 0 0 1.3em; padding-left: 1.8em; }
.cio-ymi__terms-modal .cio-ymi__terms-body li { margin: .45em 0; line-height: 1.8; }
.cio-ymi__terms-modal-actions { display: flex; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid #e1e1e1; }
.cio-ymi__terms-confirm { min-width: 120px; padding: 11px 24px; border: 1px solid #7b2cff; border-radius: 7px; background: #7b2cff; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
body.cio-ymi-terms-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .cio-ymi__terms-summary { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cio-ymi__terms-modal { padding: 12px; }
  .cio-ymi__terms-modal-panel { max-height: 88vh; }
  .cio-ymi__terms-modal-heading,
  .cio-ymi__terms-modal .cio-ymi__terms-body,
  .cio-ymi__terms-modal-actions { padding-left: 18px; padding-right: 18px; }
}

.cio-ymi__terms-note { margin: 0; color: #555; font-size: 14px; line-height: 1.7; }

.cio-ymi__terms-check.is-disabled { color: #777; cursor: not-allowed; }
.cio-ymi__terms-check.is-disabled input { cursor: not-allowed; }
.cio-ymi__terms-check:not(.is-disabled) { color: #111; }


/* Verification and dark-room participation summary */
.cio-ymi__summary-list { display: grid; gap: 0; margin: 0; }
.cio-ymi__summary-list > div { display: grid; grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); gap: 18px; padding: 11px 0; border-bottom: 1px solid #e6e6e6; }
.cio-ymi__summary-list > div:last-child { border-bottom: 0; }
.cio-ymi__summary-list dt { font-weight: 700; }
.cio-ymi__summary-list dd { margin: 0; }
.cio-ymi__participation { display: inline-flex; min-width: 42px; justify-content: center; padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.cio-ymi__participation--active { background: #e8f7ec; color: #176b2c; }
.cio-ymi__participation--inactive { background: #f3f3f3; color: #555; }
@media (max-width: 640px) {
  .cio-ymi__summary-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* 0.5.0: YouTube verification and Discord dark-room cards */
.cio-ymi__feature-card { display: grid; gap: 22px; padding: 24px; border: 1px solid #e1e1e1; border-radius: 12px; background: #fff; }
.cio-ymi__feature-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.cio-ymi__feature-heading h3 { margin: 2px 0 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.35; }
.cio-ymi__feature-kicker { margin: 0; color: #666; font-size: 14px; font-weight: 700; }
.cio-ymi__status-badge--neutral { background: #f1f1f1; color: #555; }
.cio-ymi__verified-channel-list { display: grid; gap: 12px; }
.cio-ymi__verified-channel { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px; border: 1px solid #e4e4e4; border-radius: 9px; }
.cio-ymi__verified-channel > div { display: grid; gap: 5px; }
.cio-ymi__field-label { color: #666; font-size: 14px; }
.cio-ymi__verified-channel strong { font-size: 20px; }
.cio-ymi__summary-list--dark-room { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.cio-ymi__dark-room-actions { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 640px) {
  .cio-ymi__feature-card { padding: 18px; }
  .cio-ymi__feature-heading,
  .cio-ymi__verified-channel { align-items: stretch; flex-direction: column; }
  .cio-ymi__dark-room-actions { justify-items: stretch; }
}


/* 0.6.8: verification flow guidance */
.cio-ymi__flow-guide { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: cio-ymi-flow; }
.cio-ymi__flow-guide li { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 48px; border: 1px solid #e6e0ef; border-radius: 9px; background: #fbf9ff; counter-increment: cio-ymi-flow; }
.cio-ymi__flow-guide li::before { content: counter(cio-ymi-flow); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #7b2cff; color: #fff; font-weight: 700; font-size: 13px; }
.cio-ymi__flow-guide span { color: #555; line-height: 1.6; }


/* 0.6.18: terms read-through and participation gating */
.cio-ymi__terms-modal-actions { align-items: center; justify-content: space-between; gap: 16px; }
.cio-ymi__terms-scroll-note { margin: 0; color: #666; font-size: 14px; line-height: 1.6; }
.cio-ymi__terms-confirm:disabled { background: #c8c8c8; border-color: #c8c8c8; color: #fff; cursor: not-allowed; }
.cio-ymi__dark-room-actions > .cio-ymi__provider:disabled { cursor: not-allowed; }
@media (max-width: 640px) {
  .cio-ymi__terms-modal-actions { align-items: stretch; flex-direction: column; }
  .cio-ymi__terms-confirm { width: 100%; }
}