生体認証(Face ID)許可ダイアログ

<div class="d11-13-11-bg"></div>
        <div class="d11-13-11-dialog">
          <div class="d11-13-11-icon">
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M12 2a4 4 0 0 0-4 4v2a4 4 0 1 0 8 0V6a4 4 0 0 0-4-4Z" stroke="#0891b2" stroke-width="1.6"/><path d="M5 12v1a7 7 0 0 0 14 0v-1M12 20v2M8.5 9v3M15.5 9v3" stroke="#0891b2" stroke-width="1.6" stroke-linecap="round"/></svg>
          </div>
          <div class="d11-13-11-title">Face IDでサインインしますか?</div>
          <p class="d11-13-11-text">パスワード入力の代わりに顔認証でログインできるようになります</p>
          <div class="d11-13-11-btns">
            <span class="d11-13-11-btn">パスワードを使用</span>
            <span class="d11-13-11-btn d11-13-11-btn-strong">Face IDを使用</span>
          </div>
        </div>

.d11-13-11-bg{ position:absolute; inset:0; background:#ecfeff; }
        .d11-13-11-dialog{
          position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:250px;
          background:#fff; border-radius:16px; padding:22px 18px 0; text-align:center;
          box-shadow:0 10px 30px rgba(8,145,178,.18);
        }
        .d11-13-11-icon{ margin-bottom:8px; }
        .d11-13-11-title{ font-size:13px; font-weight:700; color:#1f2937; line-height:1.4; }
        .d11-13-11-text{ margin-top:6px; padding-bottom:16px; font-size:11px; color:#6b7280; line-height:1.5; }
        .d11-13-11-btns{ display:flex; border-top:1px solid #e5e7eb; }
        .d11-13-11-btn{
          flex:1; padding:10px 0; font-size:12px; font-weight:600; color:#6b7280;
          border-right:1px solid #e5e7eb;
        }
        .d11-13-11-btn:last-child{ border-right:none; }
        .d11-13-11-btn-strong{ color:#0891b2; font-weight:800; }